/* ============================================================
   KWONMO — edition-bench.css
   야간판(dark). 공통 마크업 위에 얹는 "작업대 판형" 표현.
   구조는 layout.css 소유. 이 파일은 색·서체·패널 크롬만 다룬다.
   조간판과 같은 마크업을 쓰므로, 여기서 선언하지 않은 것은 자동으로 사라진다.
   (조간판의 2단 본문·장식선이 그렇게 사라진다)
   ============================================================ */

[data-theme="dark"] a:hover { color: var(--text); }

/* ================= 제호 ================= */
[data-theme="dark"] .masthead { background: var(--bg); border-bottom: none; }
[data-theme="dark"] .brand-name { font-family: var(--ed-display); font-weight: 700; letter-spacing: -.02em; }

/* 높이는 layout.css 가 고정(--brand-h). 세로 패딩은 주지 않는다 */
[data-theme="dark"][data-layout="basic"] .brand-name {
  font-size: clamp(2rem, 4.4vw, 3.625rem); line-height: 1.1; color: var(--text);
}
/* 신문 제호 자리에 터미널 프롬프트를 얹는다 — 마크업 추가 없이 의사요소로 */
[data-theme="dark"][data-layout="basic"] .brand-name::before {
  content: "$ whoami"; display: block;
  font-size: .75rem; font-weight: 400; letter-spacing: 0;
  color: var(--text-dim); margin-bottom: .5625rem;
}

/* ---------- 탭 ---------- */
[data-theme="dark"][data-layout="basic"] .nav { border-bottom: var(--hairline) solid var(--line); }
[data-theme="dark"] .nav-link {
  display: grid; place-items: center; height: 100%; padding-inline: var(--sp-md);
  font-family: var(--ed-label); font-size: .75rem; color: var(--text-dim);
  border-bottom: var(--stroke-2) solid transparent;
}
[data-theme="dark"][data-layout="basic"] .nav-link:first-child { padding-left: 0; }
[data-theme="dark"] .nav-link.is-current { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .edition { font-family: var(--ed-label); font-size: .9rem; color: var(--text-mid); }
[data-theme="dark"] .edition:hover { color: var(--text); }

/* 로그인 이름 — 메뉴와 같은 줄에 서므로 크기도 메뉴 탭에 맞춘다(.nav-link 와 같은 .75rem).
   .9rem 이면 같은 줄에서 이름만 커 보인다. 색으로만 구분한다. */
[data-theme="dark"] .session-user { font-family: var(--ed-label); font-size: .75rem; color: var(--text-mid); }
[data-theme="dark"] .session-user:hover { color: var(--text); }
[data-theme="dark"] .fullscreen { color: var(--text-mid); }
[data-theme="dark"] .fullscreen:hover { color: var(--text); }

/* 축약 헤더(특수 레이아웃 페이지) */
[data-theme="dark"]:not([data-layout="basic"]) .masthead {
  background: var(--surface-2); border-bottom: var(--hairline) solid var(--line);
}
[data-theme="dark"]:not([data-layout="basic"]) .brand-name { font-size: .9375rem; letter-spacing: .1em; }
[data-theme="dark"]:not([data-layout="basic"]) .nav-link { height: var(--header-h); padding-inline: .75rem; }

/* ================= 패널 배치 ================= */
/* 이 비율은 데스크톱에서만 쓰인다(태블릿·모바일은 layout.css 가 덮는다).
   고정 패널을 5% 넓혔다 — 1.6:1 에서 머리기사 61.5% → 64.7% */
[data-theme="dark"] { --stage-cols: 1.83fr 1fr; }
[data-theme="dark"][data-layout="basic"] .stage {
  gap: var(--sp-md);
  padding-block: var(--sp-lg);
}

/* ---------- 고정 패널(머리기사 자리) ---------- */
[data-theme="dark"] .lead {
  background: var(--surface); border: var(--hairline) solid var(--line);
  border-top: var(--stroke-2) solid var(--cat-novel);
}
[data-theme="dark"] .lead-kicker {
  font-size: 0; padding: .6875rem var(--sp-md);
  background: var(--surface-2); border-bottom: var(--hairline) solid var(--line);
}
/* 어휘 전환: 한글 원문(연재소설)은 DOM 에 남고 화면엔 data-alt 를 그린다 */
[data-theme="dark"] .lead-kicker::before {
  content: attr(data-alt);
  font-family: var(--ed-label); font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; color: var(--cat-novel);
}
[data-theme="dark"] .lead-title {
  font-size: 1.75rem; font-weight: 600; line-height: 1.35;
  padding: 1.125rem var(--sp-md) 0; color: var(--text); text-wrap: pretty;
}
[data-theme="dark"] .lead-deck {
  font-size: .875rem; line-height: 1.7; color: var(--text-mid);
  padding: .6875rem var(--sp-md) 0; text-wrap: pretty;
}
[data-theme="dark"] .lead-byline {
  gap: var(--sp-md); padding: .875rem var(--sp-md);
  border-bottom: var(--hairline) solid var(--rule-soft);
  font-family: var(--ed-label); font-size: .6875rem; color: var(--text-dim);
}
[data-theme="dark"] .lead-body { padding: .9375rem var(--sp-md) 1.125rem; }
[data-theme="dark"] .lead-body p {
  font-size: .8125rem; line-height: 1.85; color: var(--text-mid);
  margin-bottom: .75rem; text-wrap: pretty;
}

/* ---------- 패널 머리(섹션 표제) ----------
   한글 표제는 접근성 이름으로 DOM 에 남기고, 화면에는 data-alt 의 터미널 어휘를 그린다.
   ::before 는 카테고리 색 막대, ::after 가 레이블. */
[data-theme="dark"] .sec-title {
  gap: .625rem; font-size: 0; padding: .6875rem .875rem;
  background: var(--surface-2); border-bottom: var(--hairline) solid var(--line);
}
[data-theme="dark"] .sec-title::before {
  content: ""; flex: 0 0 auto; width: var(--stroke-3); height: .8125rem; background: var(--text-dim);
}
[data-theme="dark"] .sec-title::after {
  content: attr(data-alt);
  font-family: var(--ed-label); font-size: .75rem; font-weight: 700;
  letter-spacing: .04em; color: var(--text);
}
[data-theme="dark"] .feed[data-cat="novel"] .sec-title::before { background: var(--cat-novel); }
[data-theme="dark"] .feed[data-cat="note"] .sec-title::before { background: var(--cat-note); }
[data-theme="dark"] .feed[data-cat="work"] .sec-title::before { background: var(--cat-work); }
[data-theme="dark"] .status .sec-title::before { background: var(--accent); }

[data-theme="dark"] .block { background: var(--surface); border: var(--hairline) solid var(--line); }

/* ---------- 우측 패널 ---------- */
[data-theme="dark"] .rail { display: flex; flex-direction: column; gap: var(--sp-md); }
[data-theme="dark"] .index-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .625rem; padding: .875rem;
}
[data-theme="dark"] .index-list li {
  flex-direction: column; background: var(--bg);
  border: var(--hairline) solid var(--line); border-top: var(--stroke-2) solid var(--text-dim);
  padding: .625rem .75rem;
}
[data-theme="dark"] .index-list li:nth-child(1) { border-top-color: var(--cat-novel); }
[data-theme="dark"] .index-list li:nth-child(2) { border-top-color: var(--cat-note); }
[data-theme="dark"] .index-list li:nth-child(3) { border-top-color: var(--cat-work); }
[data-theme="dark"] .index-name { font-family: var(--ed-label); font-size: .625rem; letter-spacing: .1em; color: var(--text-dim); }
[data-theme="dark"] .index-num { font-family: var(--ed-label); font-size: 1.625rem; font-weight: 700; line-height: 1.35; color: var(--text); }

/* 달력 패널 */
[data-theme="dark"] .cal-grid { width: calc(100% - 1.75rem); margin: .375rem .875rem .25rem; }
[data-theme="dark"] .cal-grid th { padding-block: .5rem; font-family: var(--ed-label); font-size: .625rem; font-weight: 400; color: var(--text-dim); }
[data-theme="dark"] .cal-grid td { height: 2rem; font-family: var(--ed-label); font-size: 1rem; color: var(--text); }
[data-theme="dark"] .cal-grid .is-sun,
[data-theme="dark"] .cal-grid .is-holiday { color: var(--cat-novel); }
[data-theme="dark"] .cal-grid .is-sat { color: var(--accent); }
[data-theme="dark"] .cal-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem; border-radius: var(--radius-sm);
}
[data-theme="dark"] .cal-grid .is-today .cal-num { border: var(--hairline) solid var(--accent); }
[data-theme="dark"] .cal-lun { font-size: .6rem; color: var(--text-dim); }
[data-theme="dark"] .cal-grid .has-mark::after {
  content: ""; position: absolute; left: 50%; bottom: .0625rem;
  width: .1875rem; height: .1875rem; margin-left: -.09375rem; border-radius: 50%; background: var(--text-dim);
}
[data-theme="dark"] .cal-list { padding: .25rem .875rem .5rem; border-top: var(--hairline) solid var(--line); }
[data-theme="dark"] .cal-list li { gap: .75rem; padding-block: .3125rem; font-family: var(--ed-label); font-size: .75rem; color: var(--text-mid); }
[data-theme="dark"] .cal-when { min-width: 2.5rem; color: var(--text-dim); }
[data-theme="dark"] .cal-list .is-holiday .cal-name { color: var(--cat-novel); }

/* 날씨 패널 */
[data-theme="dark"] .wx-now { column-gap: .75rem; padding: .875rem; border-bottom: var(--hairline) solid var(--line); }
[data-theme="dark"] .wx-place { font-family: var(--ed-label); font-size: .625rem; letter-spacing: .1em; color: var(--text-dim); }
[data-theme="dark"] .wx-temp { font-family: var(--ed-display); font-size: 2.25rem; font-weight: 700; line-height: 1.3; color: var(--text); }
[data-theme="dark"] .wx-sky { font-family: var(--ed-label); font-size: .875rem; font-weight: 700; color: var(--accent); }
[data-theme="dark"] .wx-meta, [data-theme="dark"] .wx-air { font-family: var(--ed-label); font-size: .6875rem; color: var(--text-mid); }
[data-theme="dark"] .wx-src + .wx-src { padding-top: 0; border-top: none; }
[data-theme="dark"] .wx-days { column-gap: .75rem; padding: .25rem .875rem; }
[data-theme="dark"] .wx-days li { padding-block: .5rem; border-bottom: var(--hairline) solid var(--rule-soft); font-family: var(--ed-label); font-size: .75rem; }
[data-theme="dark"] .wx-days li:last-child { border-bottom: none; }
[data-theme="dark"] .wx-day { color: var(--text-dim); }
[data-theme="dark"] .wx-day-sky, [data-theme="dark"] .wx-range { color: var(--text); }
[data-theme="dark"] .wx-pop, [data-theme="dark"] .wx-src, [data-theme="dark"] .wx-msg { font-family: var(--ed-label); font-size: .625rem; color: var(--text-dim); }
[data-theme="dark"] .wx-src { padding: .5rem .875rem .75rem; border-top: var(--hairline) solid var(--line); }
[data-theme="dark"] .wx-msg { padding: .875rem; }

[data-theme="dark"] .kv { padding: .8125rem .875rem .3125rem; }
[data-theme="dark"] .kv > div { padding-bottom: var(--sp-sm); font-family: var(--ed-label); font-size: .6875rem; line-height: 1.6; }
[data-theme="dark"] .kv dt { color: var(--text-dim); }
[data-theme="dark"] .kv dd { color: var(--text-mid); text-align: right; }
[data-theme="dark"] .status-live {
  padding: .625rem .875rem .8125rem; border-top: var(--hairline) solid var(--rule-soft);
  font-family: var(--ed-label); font-size: .6875rem; color: var(--text-dim);
}
[data-theme="dark"] .dot { width: .375rem; height: .375rem; }

/* ---------- 패널 3개 ---------- */
[data-theme="dark"] .feeds { gap: var(--sp-md); margin-top: var(--sp-md); }
[data-theme="dark"] .feed { background: var(--surface); border: var(--hairline) solid var(--line); }
[data-theme="dark"] .entry { padding: .75rem .875rem; border-bottom: var(--hairline) solid var(--rule-soft); }
[data-theme="dark"] .entry:last-child { border-bottom: none; }
[data-theme="dark"] .entry-meta { font-family: var(--ed-label); font-size: .6875rem; color: var(--text-dim); }
[data-theme="dark"] .entry-title {
  font-size: .875rem; font-weight: 600; line-height: 1.45;
  margin-top: .375rem; color: var(--text); text-wrap: pretty;
}
[data-theme="dark"] .entry-title a { color: inherit; }
[data-theme="dark"] .entry-dek { font-size: .75rem; line-height: 1.6; color: var(--text-mid); margin-top: var(--sp-xs); }

/* ---------- 카드: 손 얹기 / 확대 ----------
   야간판에서는 패널이 작업대 위로 한 겹 떠오르는 느낌. 확대되면 accent 상단선이 붙는다. */
[data-theme="dark"] .card:not(.is-open) {
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
[data-theme="dark"] .card:not(.is-open):hover {
  transform: translateY(-.125rem);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45);
}
[data-theme="dark"] .entry.card:not(.is-open):hover { background: var(--surface-2); }
[data-theme="dark"] .card:not(.is-open):focus-visible {
  outline: var(--focus-ring) solid var(--accent); outline-offset: calc(var(--focus-ring) * -1);
}

[data-theme="dark"] .card.is-open {
  background: color-mix(in srgb, var(--surface) var(--card-open-alpha), transparent);
  border-radius: var(--radius-sm);
  border: var(--hairline) solid var(--line);
  border-top: var(--stroke-2) solid var(--accent);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .55);
}
/* .lead 는 자식들이 각자 좌우 여백을 갖고 있어 카드에 또 주면 이중이 된다 */
[data-theme="dark"] .lead.card.is-open { padding: 0; }
[data-theme="dark"] .lead.card.is-open .card-pager { margin-inline: var(--sp-md); }
[data-theme="dark"] .entry.card.is-open { padding: var(--sp-lg); border-bottom: none; }
[data-theme="dark"] .entry.card.is-open .entry-title {
  font-size: 1.75rem; line-height: 1.35; margin-top: .625rem;
}
[data-theme="dark"] .entry .card-detail { margin-top: .9375rem; }
[data-theme="dark"] .entry .card-detail p {
  font-size: .8125rem; line-height: 1.85; color: var(--text-mid);
  margin-bottom: .75rem; text-wrap: pretty;
}

/* ---------- 로그 ---------- */
[data-theme="dark"] .log { margin-top: var(--sp-md); }
/* 열 간격·좌우 여백은 목록이 소유한다 — subgrid 축의 간격은 부모가 정하고,
   줄에 좌우 여백을 주면 그만큼 열이 안쪽으로 밀린다 */
[data-theme="dark"] .log-list { padding: .625rem .875rem; column-gap: 1.375rem; }
[data-theme="dark"] .log-list li {
  row-gap: var(--sp-xs); padding-block: .3125rem;
  font-family: var(--ed-label); font-size: .71875rem; line-height: 1.7; color: var(--text-mid);
}
[data-theme="dark"] .log-time { color: var(--text-dim); }
[data-theme="dark"] .log-kind { color: var(--cat-work); }
[data-theme="dark"] .log-ref { color: var(--cat-note); }

/* ---------- 태그 ---------- */
[data-theme="dark"] .tags { gap: var(--sp-md); margin-top: var(--sp-md); }
[data-theme="dark"] .tags .sec-title { flex: 0 0 auto; background: none; border: none; padding: 0; }
[data-theme="dark"] .tags .sec-title::before { display: none; }
[data-theme="dark"] .tags .sec-title::after { color: var(--text-dim); font-weight: 400; }
[data-theme="dark"] .tag-list { gap: var(--sp-sm); }
[data-theme="dark"] .tag-list li {
  font-family: var(--ed-label); font-size: .625rem; font-weight: 700;
  padding: .125rem .375rem; border: var(--hairline) solid var(--text-dim); color: var(--text-dim);
}
[data-theme="dark"] .tag-list a { color: inherit; }

/* ---------- 상태줄 ---------- */
[data-theme="dark"] .colophon {
  height: 2rem; background: var(--surface-2);
  border-top: var(--hairline) solid var(--line);
  font-family: var(--ed-label); font-size: .6875rem; color: var(--text-dim);
}

/* ---------- 태블릿 이하 ---------- */
@media (max-width: 48em) {
  [data-theme="dark"] .rail { margin-top: var(--sp-md); }
  [data-theme="dark"] .feeds { gap: var(--sp-md); }
  [data-theme="dark"] .colophon { height: auto; padding-block: var(--sp-sm); flex-direction: column; align-items: flex-start; gap: var(--sp-xs); }
}