/* 계절전선 — 스타일. 근거는 전부 docs/컨셉시트.md 에 있다(공간=10월 산장 게시판, 앵커=날짜 레일·오늘 표식·빈 줄·출처 도장).
   토큰은 han/디자인/_값예약.md 에 예약한 값이다: 지면 #6d5233 · 쪽지 #efe7d4 · 행간 1.62 ·
   웨이트 400/600 · 강조 #ad3b1a · 스케일 1.2/17(17·20·24·29·35) · radius 0 · 그림자 0 · 외부 폰트 0.
   형제 도구의 팔레트·골격은 참조하지 않았다. */

:root {
  --판: #6d5233;          /* 비 맞은 나무 게시판 */
  --판글씨: #f2e8d6;      /* 판 위에 직접 쓰는 글씨(판 대비 6:1 이상) */
  --판선: rgba(242, 232, 214, 0.34);
  --쪽지: #efe7d4;        /* 판에 붙은 갱지 */
  --잉크: #2a1f14;
  --연잉크: #5e4a33;
  --강조: #ad3b1a;        /* 단풍 주홍 — 오늘 표식과 출처 도장에만. 쪽지 위 대비 4.99:1 */

  --t0: 15px;  /* 도장·잔글씨 */
  --t1: 17px;  /* 본문 */
  --t2: 20px;
  --t3: 24px;
  --t4: 29px;
  --t5: 35px;
  --lh: 1.62;

  --폭: 44rem;
  --고딕: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --명조: AppleMyungjo, 'Nanum Myeongjo', Batang, 'Apple SD Gothic Neo', serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--판);
  color: var(--판글씨);
  font: 400 var(--t1) / var(--lh) var(--고딕);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--강조); outline-offset: 2px; }

.skip {
  position: absolute; left: -999px;
}
.skip:focus {
  position: static; display: inline-block; margin: 8px; padding: 8px 12px;
  background: var(--쪽지); color: var(--잉크);
}

/* ── 판 머리 ─────────────────────────────────────────────── */
.mast {
  max-width: var(--폭);
  margin: 0 auto;
  padding: 28px 18px 10px;
}
.mast__site {
  margin: 0 0 18px;
  font-size: var(--t0);
  letter-spacing: 0.22em;
  color: var(--판선);
  color: rgba(242, 232, 214, 0.78);
}
.mast__site a { text-decoration: none; }
.mast h1 {
  margin: 0 0 12px;
  font: 600 var(--t4) / 1.28 var(--명조);
}
.mast__sub { margin: 0; font-size: var(--t1); }
.mast__sub b { font-weight: 600; }

/* ── 구역 ────────────────────────────────────────────────── */
main { max-width: var(--폭); margin: 0 auto; padding: 0 18px 8px; }

.sec { margin: 34px 0 0; }
.sec h2 {
  margin: 0 0 12px;
  font: 600 var(--t2) / 1.35 var(--명조);
  border-bottom: 1px solid var(--판선);
  padding-bottom: 6px;
}
.lede, .note, .warn, .trend, .sec > p { margin: 0 0 12px; font-size: var(--t1); }
.asof { font-size: var(--t0); color: rgba(242, 232, 214, 0.72); }
.note { font-size: var(--t0); }
.warn {
  padding: 10px 12px;
  border-left: 3px solid var(--강조);
  background: rgba(0, 0, 0, 0.12);
  font-size: var(--t0);
}
.warn b { font-weight: 600; }

/* ── 빈 줄: 줄은 그어져 있는데 쪽지가 없다 ───────────────── */
.blanks { list-style: none; margin: 0 0 14px; padding: 0; }
.blank {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--판선);
}
.blank__name { font-size: var(--t2); font-family: var(--명조); }
.blank__line { flex: 1 1 auto; }
.blank__mark { font-size: var(--t0); color: rgba(242, 232, 214, 0.72); white-space: nowrap; }

/* ── 날짜 레일: 지면을 세로로 관통하는 눈금자 ─────────────── */
.rail {
  list-style: none;
  margin: 0 0 22px;
  padding: 4px 0 4px 22px;
  position: relative;
}
.rail::before {
  content: '';
  position: absolute; left: 3px; top: 0; bottom: 0;
  width: 2px;
  background: var(--판선);
}

.row {
  position: relative;
  background: var(--쪽지);
  color: var(--잉크);
  padding: 12px 14px 12px 15px;
  margin-top: 14px;
}
.row::before { /* 레일에 매달린 눈금 */
  content: '';
  position: absolute; left: -19px; top: 20px;
  width: 16px; height: 2px;
  background: var(--판선);
}
.row::after { /* 무용 장치 1개 — 압정 */
  content: '';
  position: absolute; left: -24px; top: 16px;
  width: 8px; height: 8px;
  background: var(--쪽지);
}
.gap--s { margin-top: 10px; }
.gap--m { margin-top: 24px; }
.gap--l { margin-top: 44px; }

.row__when { margin: 0; font: 600 var(--t3) / 1.2 var(--명조); }
.row__what { margin: 2px 0 6px; font: 400 var(--t2) / 1.35 var(--명조); }
.row__sub { font-size: var(--t0); color: var(--연잉크); font-family: var(--고딕); }
.row__dday { margin: 0; font-size: var(--t0); color: var(--연잉크); min-height: 0; }
.row__dday:empty { display: none; }
.row__stamp {
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--강조);
  font-size: var(--t0);
  color: var(--강조);
}
.row__maps { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.map { font-size: var(--t0); color: var(--연잉크); }

/* 오늘 — 화면에서 유일하게 매일 움직인다 */
.today {
  position: relative;
  margin-top: 18px;
  border-top: 2px solid var(--강조);
  padding-top: 8px;
}
.today__chip {
  display: inline-block;
  background: var(--쪽지);
  color: var(--강조);
  font-size: var(--t0);
  font-weight: 600;
  padding: 3px 9px;
}

/* ── 표 ──────────────────────────────────────────────────── */
.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--쪽지);
  color: var(--잉크);
  font-size: var(--t0);
  margin: 0 0 12px;
}
.grid caption {
  text-align: left;
  color: var(--판글씨);
  font-size: var(--t0);
  padding: 0 0 8px;
}
.grid th, .grid td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(42, 31, 20, 0.18);
  vertical-align: top;
}
.grid thead th { font-weight: 600; border-bottom: 2px solid rgba(42, 31, 20, 0.4); white-space: nowrap; }
.grid tbody th { font-weight: 400; font-family: var(--명조); font-size: var(--t1); }
.grid .stamp { color: var(--연잉크); }
.grid--src { display: block; overflow-x: auto; }

/* ── 출처 목록 ───────────────────────────────────────────── */
.srcs { list-style: none; margin: 0 0 14px; padding: 0; }
.src {
  padding: 11px 0;
  border-bottom: 1px dashed var(--판선);
}
.src__title { margin: 0; font: 400 var(--t2) / 1.4 var(--명조); }
.src__org { margin: 3px 0 0; font-size: var(--t0); color: rgba(242, 232, 214, 0.9); }
.src__meta { margin: 3px 0 0; font-size: var(--t0); color: rgba(242, 232, 214, 0.72); }

.cite {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--판선);
  font-size: var(--t0);
}

/* ── 사실 목록(첫눈) ─────────────────────────────────────── */
.facts { list-style: none; margin: 0 0 14px; padding: 0; }
.fact { background: var(--쪽지); color: var(--잉크); padding: 12px 14px; margin: 0 0 12px; }
.fact__text { margin: 0; font: 400 var(--t2) / 1.45 var(--명조); }
.fact__stamp { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--강조); font-size: var(--t0); color: var(--강조); }
.fact__stamp a { color: inherit; }

/* ── 접힘·목록 ───────────────────────────────────────────── */
.fold { font-size: var(--t0); margin: 0 0 8px; }
.fold summary { cursor: pointer; padding: 6px 0; }
.plain { margin: 4px 0 8px; padding-left: 20px; }
.plain li { margin: 4px 0; }
.rules { margin: 0; padding-left: 20px; }
.rules li { margin: 0 0 10px; }
.rules b { font-weight: 600; }
code { font-size: 0.92em; background: rgba(0, 0, 0, 0.16); padding: 1px 4px; }

/* ── 꼬리 ────────────────────────────────────────────────── */
.foot {
  max-width: var(--폭);
  margin: 40px auto 0;
  padding: 16px 18px 38px;
  border-top: 1px solid var(--판선);
  font-size: var(--t0);
}
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; }
.legal { margin: 0; color: rgba(242, 232, 214, 0.82); }

/* ── 넓은 화면: 레일이 지면을 세로로 가른다 ──────────────── */
@media (min-width: 46rem) {
  .mast { padding-top: 46px; }
  .mast h1 { font-size: var(--t5); }
  .rail { padding-left: 116px; }
  .rail::before { left: 96px; }
  .row::before { left: -22px; width: 20px; }
  .row::after { left: -30px; }
  .row__when {
    position: absolute;
    left: -116px; top: 12px;
    width: 92px;
    text-align: right;
    color: var(--판글씨);
    font-size: var(--t2);
  }
  .row__what { margin-top: 0; }
  .today { margin-left: 0; }
  .src { display: grid; grid-template-columns: 22rem 1fr; column-gap: 20px; }
  .src__title { grid-row: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}