/* style.css — 1021212 COLOR_SENSE (HueSense) · 2026-09-26 개편
   출발점: DesignKit kit-editorial(세리프 헤드라인·좌측 정렬·괘선·그림자 없음) → 변형
   디자인 레퍼런스: basecamp.com(읽기 좋은 큰 세리프·친근한 에디토리얼) — 일러스트·노랑 하이라이트는 가져오지 않음
   - 잡지 지면 무드: 옅은 무채 종이 + 잉크 1색, 겹괘선(double rule) 제호, 2px 잉크 괘선 + 1px 헤어라인
   - 타이포: Playfair Display(제목·큰 숫자, 라이닝·고정폭 숫자) + Lora(본문) + Noto Serif KR(한글)
   - 유채 액센트 없음: 색은 테스트 격자·색 견본 안에서만 쓴다(색 판단을 흐리지 않도록)
   - 격자 주변은 테마와 무관하게 중립 회색(sRGB 128) 매트 — 넓은 액자 여백으로 종이색과 격리
   - 블러·그라디언트·글로우·그림자 없음, 모서리 0~2px */
:root {
  --paper: #f6f4ef; --paper-2: #ece9e2;
  --ink: #1b1a17; --ink-2: #4a4741; --ink-3: #85817a;
  --hair: #dcd8cf; --hair-2: #c3beb3;
  --bad: #a3261d;
  --surround: #808080;           /* 테스트 주변 중립 회색 — 테마 불변 */
  --cjk: 'Noto Serif KR';
  --display: 'Playfair Display', var(--cjk), 'Noto Naskh Arabic', Georgia, 'Times New Roman', serif;
  --text: 'Lora', var(--cjk), 'Noto Naskh Arabic', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --it: italic;                  /* 라틴·키릴 문자만 이탤릭 — CJK·아랍은 정체 */
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #171614; --paper-2: #211f1c;
  --ink: #ebe7de; --ink-2: #bcb7ac; --ink-3: #868176;
  --hair: #302e2a; --hair-2: #46433d;
  --bad: #ff8f84;
  color-scheme: dark;
}
html[lang="ja"] { --cjk: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP'; }
html[lang="zh"] { --cjk: 'Songti SC', 'STSong', 'Noto Serif SC', 'SimSun'; }
html:is([lang="ko"], [lang="ja"], [lang="zh"], [lang="ar"]) { --it: normal; }
html[lang="ar"] { --text: 'Noto Naskh Arabic', 'Lora', Georgia, serif; }

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
html[lang="ar"] body { line-height: 1.9; }
a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1px; }
button, input, select { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.num, .meters dd, .res-big, .g-n, .nf-code { font-variant-numeric: lining-nums tabular-nums; }

/* ── masthead: 제호 줄 + 목차 줄, 겹괘선으로 마감 ── */
.top { border-bottom: 3px double var(--ink); }
.top-in { max-width: 1080px; margin: 0 auto; padding: 18px 16px 0; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools" "nav nav"; align-items: center; row-gap: 14px; }
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; justify-self: start;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 1.95rem; line-height: 1; letter-spacing: -0.02em; }
.mark { display: block; width: 22px; height: 22px; }
.nav { grid-area: nav; display: flex; gap: 28px; border-top: 1px solid var(--hair); padding: 9px 0 10px; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; padding: 2px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); }
.tools { grid-area: tools; display: flex; gap: 12px; align-items: center; }
.lang { height: 32px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 0 4px; font-size: .86rem; font-style: var(--it); max-width: 132px; border-radius: 0; cursor: pointer; }
.theme-btn { width: 34px; height: 34px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink); padding: 0; }
.theme-btn:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 720px) {
  .top-in { padding-top: 14px; row-gap: 10px; }
  .brand { font-size: 1.5rem; gap: 9px; }
  .mark { width: 18px; height: 18px; }
  .nav { gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 8px 0 9px; }
  .nav a { font-size: .74rem; letter-spacing: .08em; }
}

/* ── 테스트: 판독 줄(위) → 액자에 든 격자 → 캡션 ── */
.app { width: 100%; max-width: 1080px; margin: 0 auto; padding: 30px 16px 48px; flex: 1; }
.bench { display: grid; justify-items: center; }
.readout, .stage-col { width: min(100%, max(320px, min(640px, calc(100svh - 260px)))); }
.meters { margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hair); }
.meters > div { padding: 9px 12px 10px; min-width: 0; }
.meters > div:first-child { padding-inline-start: 0; }
.meters > div + div { border-inline-start: 1px solid var(--hair); }
.meters dt { font-size: .68rem; color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meters dd { margin: 1px 0 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.6rem; line-height: 1.15; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
[dir="rtl"] .meters dd { text-align: end; }
.life { display: inline-block; width: 11px; height: 11px; border: 1.5px solid var(--ink); border-radius: 50%; margin-inline-end: 5px; vertical-align: middle; }
.life.on { background: var(--ink); }

.stage-col { margin-top: 20px; min-width: 0; }
.stage { position: relative; aspect-ratio: 1 / 1; width: 100%; background: var(--surround); padding: clamp(14px, 5.5%, 34px); }
.board { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 4px; width: 100%; height: 100%; }
.board[data-n="2"], .board[data-n="3"] { gap: 10px; }
.board[data-n="4"], .board[data-n="5"] { gap: 6px; }
.cell { border: 0; padding: 0; margin: 0; border-radius: 0; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cell:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.cell[data-mark="odd"] { outline: 3px solid #111; outline-offset: 2px; z-index: 1; }
.cell[data-mark="wrong"]::after { content: '×'; position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(1.2rem, 5vw, 2.4rem); font-weight: 300; line-height: 1; color: #fff; }
.board[data-ink="dark"] .cell[data-mark="wrong"]::after { color: #111; }

/* 표지(모드 선택) — 목차처럼 좌측 정렬 */
.cover { position: absolute; inset: 0; background: var(--paper); border: 1px solid var(--hair-2); display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 18px; padding: clamp(18px, 8%, 52px); text-align: start; overflow: auto; }
.modes { display: grid; width: 100%; border-top: 2px solid var(--ink); }
.mode { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 13px 0 12px; background: none; border: 0; border-bottom: 1px solid var(--hair); cursor: pointer; color: var(--ink-3); text-align: start; }
.mode::before { content: ''; grid-row: 1 / span 2; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; align-self: center; }
.mode[aria-pressed="true"] { color: var(--ink); }
.mode[aria-pressed="true"]::before { background: var(--ink); border-color: var(--ink); }
.mode:hover { color: var(--ink-2); }
.mode-t { font-family: 'Playfair Display', var(--cjk), Georgia, serif; font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.mode-d { font-size: .82rem; line-height: 1.45; font-style: var(--it); grid-column: 2; }
.fam-pick { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--ink-2); }
.fam-pick select { height: 34px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 0 4px; border-radius: 0; font-style: var(--it); cursor: pointer; }
.go { display: inline-block; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 12px 32px; font-family: 'Playfair Display', var(--cjk), Georgia, serif;
  font-weight: 700; font-size: 1.05rem; line-height: 1.3; cursor: pointer; text-decoration: none; border-radius: 2px; }
.go:hover { background: transparent; color: var(--ink); }
.cover .go { min-width: 168px; }
.cover-hint { margin: 0; font-size: .9rem; color: var(--ink-3); font-style: var(--it); }
.cover-rec { margin: 0; font-size: .84rem; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }

.timebar { height: 2px; background: var(--hair); margin-top: 10px; overflow: hidden; }
.timebar i { display: block; height: 100%; background: var(--ink); transform-origin: left center; transform: scaleX(1); }
[dir="rtl"] .timebar i { transform-origin: right center; }
.caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--hair); }
.flash { margin: 0; font-family: 'Playfair Display', var(--cjk), Georgia, serif; font-size: 1.1rem; font-style: var(--it); font-weight: 600; }
.flash.is-bad { color: var(--bad); }
.line-btn { background: transparent; border: 1px solid var(--ink); border-radius: 2px; padding: 8px 18px; cursor: pointer; font-size: .9rem; font-style: var(--it); }
.line-btn:hover { background: var(--ink); color: var(--paper); }
.caption .line-btn { margin-inline-start: auto; padding: 6px 16px; }

@media (max-width: 720px) {
  .app { padding-top: 16px; }
  .readout, .stage-col { width: 100%; }
  .stage-col { margin-top: 12px; }
  .meters > div { padding: 7px 8px 8px; }
  .meters dt { font-size: .6rem; letter-spacing: .06em; }
  .meters dd { font-size: 1.08rem; }
  .life { width: 8px; height: 8px; margin-inline-end: 3px; border-width: 1px; }
  .cover { gap: 12px; padding: 16px; }
  .mode { padding: 9px 0 8px; }
  .mode-t { font-size: 1.15rem; }
  .mode-d { font-size: .74rem; }
  .cover .go { padding: 10px 28px; }
  .cover-hint { font-size: .8rem; }
  .caption { min-height: 42px; }
  .flash { font-size: .98rem; }
}

/* ── 결과: 지면 2단(큰 숫자 | 색 쌍) → 전폭 기사 ── */
.result { max-width: 960px; margin: 56px auto 0; border-top: 3px double var(--ink); padding-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr); }
.result > * { min-width: 0; }
@media (min-width: 860px) {
  .result { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 56px; }
  .result > * { grid-column: 1 / -1; }
  .result > .res-head { grid-column: 1; align-self: end; }
  .result > .res-pair { grid-column: 2; margin-top: 0; }
}
.res-head { text-align: start; }
.res-k { margin: 0; font-size: .74rem; color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; }
.res-big { margin: 6px 0 10px; font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: clamp(4rem, 13vw, 7.2rem); line-height: .95; letter-spacing: -0.03em; }
[dir="rtl"] .res-big { text-align: end; }
.res-sub { margin: 0; color: var(--ink-2); font-size: 1rem; font-style: var(--it); }
.res-pair { margin: 28px 0 0; text-align: start; }
.pair-h { margin: 0 0 10px; font-size: .74rem; color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; }
.pair-sw { display: inline-flex; gap: 0; background: var(--surround); padding: 18px; max-width: 100%; }
.pair-sw figure { margin: 0; }
.big-sw { display: block; width: clamp(96px, 28vw, 160px); aspect-ratio: 1 / 1; }
.pair-sw figcaption { font-size: .74rem; color: #fff; padding-top: 7px; text-align: start; }
.pair-sw figure + figure figcaption { text-align: end; }
.pair-sw code { font-family: var(--mono); }
.pair-v { margin: 10px 0 0; font-size: .86rem; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.res-h { font-family: 'Playfair Display', var(--cjk), Georgia, serif; font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 44px 0 14px; }
.fam-t td, .fam-t th { vertical-align: middle; }
.fam-t tbody th { font-weight: 400; white-space: nowrap; }
.fam-t tr.is-weak th { font-weight: 700; }
.tag { display: inline-block; font-size: .66rem; border: 1px solid var(--ink); border-radius: 999px; padding: 0 7px; margin-inline-start: 6px; font-weight: 600; letter-spacing: .04em; vertical-align: 1px; }
.bar { display: inline-block; width: 72px; height: 6px; background: var(--hair); vertical-align: middle; margin-inline-end: 8px; }
.bar i { display: block; height: 100%; background: var(--ink); }
.bar-v { font-size: .84rem; font-variant-numeric: lining-nums tabular-nums; }
.bar-v small { color: var(--ink-3); font-size: .74rem; }
.res-note { font-size: .98rem; color: var(--ink-2); }
.scale { background: var(--paper-2); padding: 18px 22px 16px; margin: 26px 0 18px; }
.scale-h { margin: 0 0 6px; font-family: 'Playfair Display', var(--cjk), Georgia, serif; font-style: var(--it); font-weight: 600; font-size: 1.05rem; }
.scale ul { margin: 0; padding-inline-start: 1.1em; font-size: .92rem; }
.disc { font-size: .9rem; color: var(--ink-2); margin: 8px 0; }
.disc strong { font-weight: 600; color: var(--ink); }
.res-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 26px 0 6px; }
.text-link { font-size: .95rem; font-style: var(--it); }
.text-btn { background: none; border: 0; padding: 0; color: var(--ink-3); font-size: .84rem; font-style: var(--it); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; margin-top: 10px; justify-self: start; }
.hist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.hist li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dotted var(--hair-2); font-size: .92rem; }
.h-d { color: var(--ink-3); font-style: var(--it); }
.h-v { font-variant-numeric: lining-nums tabular-nums; }
.muted { color: var(--ink-3); }

/* ── ads (애드핏 규정: 래퍼에 radius·overflow 금지) ── */
.ad-wrap { margin: 44px auto 0; }
.ad-grid { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 672px; margin: 0 auto; }
.ad-grid[data-ad-layout="mixed"] { max-width: 760px; }
.ad-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.ad-cell { min-height: 50px; max-width: 100%; }
.ad-pc { display: none; }
@media (min-width: 720px) { .ad-pc { display: flex; } .ad-mo { display: none; } }
.prose .ad-wrap { margin: 40px 0; }

/* ── 본문 페이지: 좁은 칼럼 · 큰 세리프 제목 · 이탤릭 리드 ── */
.page { width: 100%; max-width: 700px; margin: 0 auto; padding: 30px 16px 64px; flex: 1; }
.page.wide { max-width: 1080px; }
.crumb { font-size: .72rem; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb .sep { color: var(--hair-2); }
.prose { font-size: 1.06rem; line-height: 1.82; }
.prose.wide { max-width: none; }
.prose h1, .page-h { font-family: 'Playfair Display', var(--cjk), Georgia, serif; font-size: clamp(2.1rem, 5.8vw, 3.2rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 20px; font-weight: 800; }
html:is([lang="ko"], [lang="ja"], [lang="zh"], [lang="ar"]) :is(.prose h1, .page-h) { line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
.prose h2 { font-family: 'Playfair Display', var(--cjk), Georgia, serif; font-size: 1.5rem; line-height: 1.3; margin: 54px 0 14px; font-weight: 700; }
.prose h2::before { content: ''; display: block; width: 40px; height: 2px; background: var(--ink); margin-bottom: 16px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { padding-inline-start: 1.3em; margin: 0 0 20px; }
.prose li { margin: 6px 0; }
.prose strong { font-weight: 600; }
.prose code { font-family: var(--mono); font-size: .84em; background: var(--paper-2); padding: 1px 5px; }
.lead { color: var(--ink-2); font-size: 1.2rem; line-height: 1.65; font-style: var(--it); padding-bottom: 24px; margin-bottom: 28px !important; border-bottom: 1px solid var(--hair); }
.page > .lead { margin-top: 0; }
/* 라틴·키릴 가이드 첫 문단 드롭캡(CJK·아랍 제외) */
html:not([lang="ko"]):not([lang="ja"]):not([lang="zh"]):not([lang="ar"]) .prose > .lead + p::first-letter {
  float: left; font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: 3.5em; line-height: .82; padding: 7px 10px 0 0; }
.formula { font-family: var(--mono); font-size: .88rem; background: var(--paper-2); border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); padding: 14px 16px; overflow-x: auto; unicode-bidi: plaintext; }
.notice { font-style: var(--it); font-size: 1rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hair); padding: 12px 0; margin: 24px 0 !important; }
.refs { font-size: .88rem; color: var(--ink-2); line-height: 1.65; }
.tbl { overflow-x: auto; margin: 0 0 22px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.tbl table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--hair); text-align: start; vertical-align: top; }
.tbl th:first-child, .tbl td:first-child { padding-inline-start: 0; }
.tbl thead th { font-weight: 600; font-size: .72rem; color: var(--ink-2); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--ink); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.num-c { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.cta { margin-top: 36px; }
.faq { border-bottom: 1px solid var(--hair); }
.faq:first-of-type { border-top: 2px solid var(--ink); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; font-family: 'Playfair Display', var(--cjk), Georgia, serif; font-weight: 600; font-size: 1.1rem; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--text); font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--ink-3); }
.faq[open] summary::after { content: '−'; }
.faq p { margin: 0 0 16px; color: var(--ink-2); }
.mail { font-size: 1.06rem; }
.related { margin-top: 40px; }

/* guides hub — 2단 목차 지면(괘선 격자) */
.g-list { list-style: none; margin: 30px 0 8px; padding: 0; border-top: 2px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1fr); }
.g-list > li { border-bottom: 1px solid var(--hair); }
.g-item { display: grid; gap: 8px; padding: 22px 0 24px; text-decoration: none; height: 100%; }
.g-item:hover .g-t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.g-n { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--ink-3); }
.g-body { display: grid; gap: 6px; }
.g-t { font-family: 'Playfair Display', var(--cjk), Georgia, serif; font-weight: 700; font-size: 1.22rem; line-height: 1.35; }
.g-d { color: var(--ink-2); font-size: .92rem; line-height: 1.6; font-style: var(--it); }
@media (min-width: 720px) {
  .page:has(.g-list) { max-width: 900px; }
  .g-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-list > li:nth-child(odd) .g-item { padding-inline-end: 28px; }
  .g-list > li:nth-child(even) .g-item { padding-inline-start: 28px; }
  .g-list > li:nth-child(even) { border-inline-start: 1px solid var(--hair); }
  .g-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ΔE examples */
.ex table { font-size: .84rem; }
.ex tbody th { font-weight: 600; white-space: nowrap; }
.ex thead tr.sub th { font-weight: 400; font-size: .7rem; color: var(--ink-3); padding-top: 0; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--ink); }
.ex thead tr:first-child th { border-bottom: 0; }
.sw { display: inline-block; width: 30px; height: 30px; vertical-align: middle; }
.pair { display: inline-flex; background: var(--surround); padding: 5px; }
.ex-hex { display: block; font-family: var(--mono); font-size: .7rem; color: var(--ink-3); margin-top: 3px; }
.ex-v { display: block; font-size: .74rem; margin-top: 4px; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }

.nf { padding-top: 32px; }
.nf-code { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 900; font-size: clamp(5rem, 22vw, 8rem); line-height: 1; margin: 0 0 10px; }
.nf-langs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 28px; font-size: .92rem; font-style: var(--it); }

/* ── footer: 겹괘선 + 이탤릭 목록 ── */
.foot { border-top: 3px double var(--ink); margin-top: 40px; }
.foot-in { max-width: 1080px; margin: 0 auto; padding: 26px 16px 36px; display: grid; gap: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-main a { color: var(--ink); text-decoration: none; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.foot-guides { border-top: 1px solid var(--hair); padding-top: 12px !important; }
.foot-guides a { color: var(--ink-2); text-decoration: none; font-size: .86rem; font-style: var(--it); }
.foot a:hover { text-decoration: underline; }
.copyright { margin: 4px 0 0; font-size: .76rem; color: var(--ink-3); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); background: var(--ink); color: var(--paper); border-radius: 2px; padding: 10px 18px; font-size: .9rem; font-style: var(--it); opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; z-index: 50; max-width: calc(100% - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }