/* ============================================================
   정원준의 블로그

   색·간격·글자 크기를 아래 변수로 먼저 정의하고,
   실제 스타일에서는 변수만 참조한다.
   같은 값을 여러 곳에 직접 적지 않는다.

   변수 이름은 색조가 아니라 역할이나 재료로 짓는다.
   ============================================================ */

/* --- 서체 등록 ------------------------------------------------
   둘 다 SIL Open Font License 1.1. 라이선스 전문은 각 woff2 메타데이터에 들어 있다.

   Galmuri11 — Copyright (c) 2019-2025 Lee Minseo. https://github.com/quiple/galmuri
     출처: 사용자 요청 "도트 디자인의 웹사이트" (2026-11-03 대화).
     sources/ 에 해당 파일이 없다. 출처 규칙과 충돌하지만 사용자의 명시적 지시로 넣는다.
     사이트 이름, 분류, 제목에만 쓴다. 본문에는 쓰지 않는다. 한글 장문에서 눈이 지친다.
     12px 격자로 그린 서체라 12px의 정수배(12/24/36/48)에서만 픽셀이 또렷하다.

   MaruBuri(마루 부리) — Copyright (c) NAVER Corporation. https://hangeul.naver.com
     소설 본문용. 획이 가늘고 끝이 둥근 명조라 "하늘하늘"하게 읽히면서도
     화면에서 긴 글을 읽기에 무리가 없다.
*/
@font-face {
  font-family: "Galmuri11";
  src: url("fonts/Galmuri11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MaruBuri";
  src: url("fonts/MaruBuri-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- 색 ---------------------------------------------------
     임시값이다. sources/ 에 소재 사진이 아직 없다.

     색은 화면에서 고르지 않는다.
     하늘·구름·풀·안개 사진이 sources/ 에 들어오면 거기서 스포이드로 집고
     이 블록만 고친다. 사이트 전체가 따라온다.
  */
  --paper:  #ffffff;   /* 배경 */
  --ink:    #1a1a1a;   /* 본문 */
  --ink-2:  #555555;   /* 보조 텍스트 */
  --ink-3:  #767676;   /* 캡션, 날짜. 흰 배경에서 4.5:1 이상 */
  --rule:   #dddddd;   /* 선 */
  /* 디자인 위임 (2026-11-04): sources/ 출처 규칙의 예외.
     mist는 기존 images/sample-cover.png의 구름색 RGB(242,248,250).
     leaf는 그림의 풀과 이어지도록 고른 짙은 녹색으로, 추출색은 아니다. */
  --mist: #f2f8fa;
  --leaf: #355b37;
  --seed-white: #ffffff;
  --seed-stem: #b5ab83;
  /* 디자인 위임 (2026-11-04): 아래 씨앗·바람 색은 images/sample-cover.png 를 만든
     샘플 팔레트와 같은 값이다. 소재 사진에서 뽑은 색이 아니다. */
  --seed-shade: #c9d8e6;   /* 솜털 아래 그늘 */
  --seed-line:  #9fb3c8;   /* 솜털 아랫면 외곽선 */
  --seed-eye:   #3a4652;   /* 눈 */
  --seed-blush: #f2b3ab;   /* 볼 */
  --seed-core:  #a88c6c;   /* 씨앗 */
  --wind-line:  #e3edf5;   /* 씨앗 뒤 바람 줄 */
  --leaf-deep:  #263f28;   /* 바람 버튼 그림자·hover. leaf 를 어둡게 한 값 */

  /* --- 간격 -------------------------------------------------
     아래 여덟 단계 안에서만 고른다.
  */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6.5rem;

  /* --- 글자 크기 ---------------------------------------------
     본문 서체(MaruBuri)용과 픽셀 서체(Galmuri11)용을 나눈다.
     픽셀 서체는 12px 정수배가 아니면 흐려지므로 따로 둔다.
  */
  --text-s:  0.875rem;    /* 날짜, 캡션 */
  --text-m:  1.0625rem;   /* 본문. 한글은 16px 아래에서 획이 뭉개진다 */
  --text-l:  1.25rem;     /* 목록의 글 제목 */

  --pixel-s:  0.75rem;    /* 12px. 바람 버튼 */
  --pixel-m:  1.5rem;     /* 24px. 분류, 섹션 제목 */
  --pixel-l:  2.25rem;    /* 36px. 글 제목(넓은 화면), 사이트 이름(좁은 화면) */
  --pixel-xl: 3rem;       /* 48px. 사이트 이름(넓은 화면) */

  /* --- 서체 -------------------------------------------------
     교체 지점은 이 두 변수뿐이다. 다른 곳에 폰트 이름을 적지 않는다.
     라틴 서체를 먼저, 한글 서체를 뒤에 놓는다.
     두 서체 모두 라틴 글리프를 자체 포함하므로 맨 앞에 둔다.
  */
  --font-body:    "MaruBuri", "AppleMyungjo", "Batang", serif;
  --font-display: "Galmuri11", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* --- 본문 폭 ----------------------------------------------
     한 줄이 한글 45자를 넘으면 읽기 어렵다. em 으로 잡는다.
  */
  --measure: 38em;
  --layout: 58em;
  --cover-width: 68rem;
  --section-rail: 6rem;
  --wind-time: 9s;
  --pixel-icon: 1.375rem; /* 22px. 11px 씨앗 요정 아이콘의 2배 */
}

/* ------------------------------------------------------------
   기준선
   장식보다 먼저 성립해야 하는 것들이다. 지우지 말 것.
   ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-m);

  /* 한글은 라틴 문자보다 행간이 더 필요하다. 본문 1.6~1.8 */
  line-height: 1.8;

  /* keep-all 이 없으면 한글 문장이 단어 중간에서 잘린다.
     break-word 가 없으면 긴 URL 이 화면을 뚫는다. 둘은 같이 쓴다. */
  word-break: keep-all;
  overflow-wrap: break-word;

  /* 한글 본문은 자간을 조금 좁히는 쪽이 낫다. 0 ~ -0.02em.
     제목은 받침이 부딪히므로 좁히지 않는다. */
  letter-spacing: -0.01em;
}

p { text-wrap: pretty; }  /* Firefox 는 아직 미지원. 없어도 문제없다 */

/* 키보드로 이동할 때 지금 어디 있는지 보여야 한다. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------
   레이아웃
   ------------------------------------------------------------ */

.wrap {
  max-width: var(--layout);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

/* ------------------------------------------------------------
   커버: 화면 폭 전체의 픽셀 풍경
   출처: 사용자 요청 "샘플 이미지를 포함해 초안을 파악하기 좋게" (2026-11-03 대화).
   images/sample-cover.png 는 에이전트가 생성한 샘플이다. sources/ 근거 파일이 없다.
   방향은 AGENTS.md 목적 칸의 "웅장함보다 하늘하늘함": 하늘이 3분의 2, 낮은 지평선, 바람.
   마스코트는 "씨앗 요정". 여러 마리가 바람(오른쪽)을 타고 흩날리며 표정이 제각각이다
   (사용자 요청, 2026-11-03).
   왼쪽 위 구름 하나는 얼굴 없는 양 모양이다. 둘 다 오리지널이며 사용자와 합의했다(2026-11-03).
   소재 사진이 sources/ 에 들어오면 그 사진으로 다시 만든다.
   ------------------------------------------------------------ */

.cover {
  position: relative;
  max-width: var(--cover-width);
  margin: 0 auto;
  /* 씨앗 좌표를 커버 폭 기준(cqw)으로 계산하기 위한 컨테이너 */
  container-type: inline-size;
}

.cover img {
  width: 100%;
  /* 384×128 원본을 키워 쓴다. 흐리게 보간하지 않고 픽셀을 그대로 키운다. */
  image-rendering: pixelated;
}

/* 씨앗·바람 도형 정의만 담는 그릇. 화면에 그려지지 않는다. */
.sprites { position: absolute; }

.px-w { fill: var(--seed-white); }
.px-s { fill: var(--seed-shade); }
.px-o { fill: var(--seed-line); }
.px-e { fill: var(--seed-eye); }
.px-b { fill: var(--seed-blush); }
.px-t { fill: var(--seed-stem); }
.px-k { fill: var(--seed-core); }
.px-l { fill: var(--wind-line); }
.px-g { fill: var(--seed-white); }

/* ------------------------------------------------------------
   바람
   2026-11-04 사용자 요청: 씨앗 전부가 움직이고, 바람 디자인을 다듬는다.
   - 바람은 풀잎이 눕는 방향(오른쪽)으로 분다. 씨앗은 오른쪽 위로 떠오르며 흘러가고,
     끝에서 사라졌다가 처음 자리에서 다시 나타난다. 커버 밖으로 나가지 않는다.
   - 이동은 배경 그림의 한 픽셀씩 끊어서(steps) 움직여 도트 느낌을 지킨다.
   - 위아래 한 픽셀 흔들림, 가끔 지나가는 바람 줄기 세 개.
   - 씨앗마다 속도(--t)와 시작 시점(--d)이 달라 한꺼번에 움직이지 않는다.
   ------------------------------------------------------------ */

.wind {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --px: calc(100cqw / 384);   /* 배경 그림 한 픽셀이 화면에서 차지하는 크기 */
}

.seed, .gust {
  position: absolute;
  left: calc(var(--x) / 384 * 100%);
  top: calc(var(--y) / 128 * 100%);
  width: calc(var(--w) * var(--px));
  height: auto;
  shape-rendering: crispEdges;
}

.gust { opacity: 0; }   /* 움직임을 끈 사용자에게는 바람 줄기를 보이지 않는다 */

@media (prefers-reduced-motion: no-preference) {
  .seed {
    animation-name: seed-drift, seed-fade;
    animation-duration: calc(var(--wind-time) * var(--t));
    animation-delay: calc(var(--wind-time) * var(--t) * var(--d));
    animation-timing-function: steps(var(--dx)), linear;
    animation-iteration-count: infinite;
  }
  .seed use {
    animation: seed-bob calc(var(--wind-time) * var(--t) / 5) linear infinite;
  }
  .gust {
    animation-name: gust-pass, gust-fade;
    animation-duration: calc(var(--wind-time) * var(--t));
    animation-delay: calc(var(--wind-time) * var(--t) * var(--d));
    animation-timing-function: steps(var(--dx)), linear;
    animation-iteration-count: infinite;
  }
}

@keyframes seed-drift {
  to { transform: translate(calc(var(--dx) * var(--px)), calc(var(--dy) * var(--px))); }
}
@keyframes seed-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}
/* 두 장면짜리 도트 흔들림: 제자리 → 한 픽셀 위 */
@keyframes seed-bob {
  0%, 49.9%  { transform: translateY(0); }
  50%, 100%  { transform: translateY(-1px); }
}
@keyframes gust-pass {
  to { transform: translateX(calc(var(--dx) * var(--px))); }
}
@keyframes gust-fade {
  0%   { opacity: 0; }
  20%  { opacity: 0.85; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

.cover.is-still .seed,
.cover.is-still .seed use,
.cover.is-still .gust { animation-play-state: paused; }

/* ------------------------------------------------------------
   바람 멈추기 버튼
   모서리를 한 칸 깎은 픽셀 버튼. 아이콘은 씨앗 요정이고,
   바람을 멈추면 요정이 눈을 감는다(script.js).
   ------------------------------------------------------------ */

.wind-toggle {
  position: absolute;
  right: var(--space-5);
  top: calc(100% + var(--space-3));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: var(--leaf);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--pixel-s);
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  /* 위·아래·왼쪽·오른쪽에만 2px 를 덧대 모서리가 깎인 도트 테두리를 만든다.
     안쪽 아래 그림자로 눌리기 전의 두께를 준다. */
  box-shadow:
    0 -2px 0 var(--leaf),
    0 2px 0 var(--leaf),
    -2px 0 0 var(--leaf),
    2px 0 0 var(--leaf),
    inset 0 -3px 0 var(--leaf-deep);
}

.wind-toggle:hover {
  background: var(--leaf-deep);
  box-shadow:
    0 -2px 0 var(--leaf-deep),
    0 2px 0 var(--leaf-deep),
    -2px 0 0 var(--leaf-deep),
    2px 0 0 var(--leaf-deep);
}

/* 누르면 한 픽셀 내려앉는다. 사용자 동작에 대한 응답이다. */
.wind-toggle:active { transform: translateY(2px); }

.wind-toggle-icon {
  width: var(--pixel-icon);
  height: auto;
  shape-rendering: crispEdges;
}

@media (prefers-reduced-motion: reduce) {
  .wind-toggle { display: none; }
}

@media (min-width: 50em) {
  .cover { width: calc(100% - var(--space-6) * 2); margin-top: var(--space-5); }
  .wind-toggle { top: auto; right: var(--space-4); bottom: var(--space-4); }
}
@media (max-width: 49.999em) {
  .cover:not([hidden]) + .wrap { padding-top: var(--space-8); }
}

/* ------------------------------------------------------------
   머리: 사이트 이름 + 분류
   이 사이트에서 기억에 남길 요소는 픽셀 서체로 쓴 사이트 이름 하나다.
   나머지는 조용히 둔다.
   ------------------------------------------------------------ */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;        /* 픽셀 서체에 가짜 굵기를 입히면 획이 뭉개진다 */
  line-height: 1.25;       /* 제목은 1.2~1.4. 24/36/48px 에서 정수 픽셀이 된다 */
  letter-spacing: 0;
  margin: 0;
}

.site-head {
  margin-bottom: var(--space-6);
}

.site-name {
  font-size: var(--pixel-l);
  margin-bottom: var(--space-4);
}

.site-name a {
  text-decoration: none;
}

.site-name a:hover { color: var(--leaf); }

.site-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--pixel-m);
  line-height: 1.25;
  letter-spacing: 0;
}

.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  display: inline-block;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid transparent;
}

.site-nav a:hover, .site-nav a[aria-current] {
  color: var(--leaf);
  border-bottom-color: currentColor;
}

@media (min-width: 30em) {
  .site-name { font-size: var(--pixel-xl); }
}

/* ------------------------------------------------------------
   첫 화면: 소개 + 분류별 목록
   ------------------------------------------------------------ */

.lede {
  color: var(--ink-2);
  margin: 0 0 var(--space-7);
}

/* 섹션 사이는 넓게, 제목과 목록 사이는 좁게. 같은 덩어리끼리 붙인다. */
section {
  margin-bottom: var(--space-7);
}

section h2 {
  font-size: var(--pixel-m);
  margin-bottom: var(--space-3);
  color: var(--leaf);
}

.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
}

.post-list .post-link {
  font-size: var(--text-l);
  line-height: 1.4;
  text-decoration: none;
}

.post-list .post-link:hover {
  color: var(--leaf);
  text-decoration: underline;
}

.post-label { display: block; }

.post-list[data-kind="photo"] {
  display: grid;
  gap: var(--space-6);
}
.post-list[data-kind="photo"] li { padding: 0; border: 0; }
.post-list[data-kind="photo"] .meta { margin-top: var(--space-2); }
.post-list img[src*="sample-"] { image-rendering: pixelated; }

@media (min-width: 36em) {
  .post-list[data-kind="photo"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 2026-11-04 사용자 디자인 위임: 분류를 왼쪽 여백에 두어
   소설·사진·공부 목록의 시작점을 맞춘다. */
@media (min-width: 50em) {
  .site-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); }
  .site-name { margin-bottom: 0; }
  #home section { display: grid; grid-template-columns: var(--section-rail) minmax(0, 1fr); column-gap: var(--space-6); }
  #home section h2 { padding-top: var(--space-4); }
  #home #photos h2 { padding-top: 0; }
  #home section > .empty { grid-column: 2; }
  .post-list:not([data-kind="photo"]) li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-5); }
  .post-list:not([data-kind="photo"]) .meta { text-align: right; }
}

.post-list img {
  margin-bottom: var(--space-3);
}

/* 소개: 목록의 첫 글과 같은 높이에서 시작하고(li 의 위 여백과 같은 값),
   넓은 화면에서도 한 줄이 한글 45자를 넘지 않게 본문 폭으로 묶는다. */
.about {
  max-width: var(--measure);
  padding-top: var(--space-4);
}

.about p {
  margin: 0 0 var(--space-4);
}

.meta {
  color: var(--ink-3);
  font-size: var(--text-s);
  margin: 0;
}

.empty {
  color: var(--ink-3);
  font-size: var(--text-s);
  margin: 0;
  padding: var(--space-4) 0;
}

/* ------------------------------------------------------------
   글 하나
   글을 열면 그림도 픽셀도 물러나고 문장만 남는다.
   ------------------------------------------------------------ */

.post-title {
  font-size: var(--pixel-m);
  margin-bottom: var(--space-3);
}

#post { max-width: var(--measure); margin: 0 auto; }

@media (min-width: 30em) {
  .post-title { font-size: var(--pixel-l); }
}

.post-meta {
  margin-bottom: var(--space-7);
}

/* 글을 열 때 script.js 가 제목으로 포커스를 옮긴다(스크린리더가 새 글을 읽게).
   제목은 Tab 순서에 없으므로(tabindex="-1") 테두리를 그리지 않는다.
   링크·버튼의 포커스 표시는 위 기준선 규칙이 그대로 담당한다. */
.post-title:focus {
  outline: none;
}

.post-media img {
  margin-bottom: var(--space-6);
}

.post-body p {
  margin: 0 0 var(--space-5);
}

.post-back {
  margin: var(--space-8) 0 0;
  font-size: var(--text-s);
}