/* ============================================================
INDEX / 색인 — farmerkweon.com renewal, lane B (Andersson)
토큰 3축: ① 색 ② 간격 ③ 타이포(크기·행간·자간·optical size)
장식 0. 그림자 0. 라운드 최대 2px. 경계는 전부 1px 헤어라인.
============================================================ */
/* ---------- ① 색 축 : 무채색 + 액센트 1색 ---------- */
:root{
color-scheme: light dark;
--paper: #ffffff;
--paper-2: #f5f5f6;
--paper-3: #ebebed;
--ink: #0b0b0c; /* on paper 19.6:1 */
--ink-2: #45464a; /* on paper 9.1:1 */
--ink-3: #74757b; /* on paper 4.8:1 */
--rule: #e2e2e5;
--rule-2: #c8c8cd;
--accent: #ff3d00; /* 그래픽 전용 (괘선·마커·호버) */
--accent-ink: #c22e00; /* 텍스트용, on paper 5.4:1 */
--accent-bg: rgba(255,61,0,.07);
--sel: rgba(255,61,0,.18);
/* ---------- ② 간격 축 : 4px 기반 ---------- */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
--s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:176px;
/* ---------- 그리드 축 ---------- */
--cols:12; --gutter:24px; --pad:40px; --max:1512px; --hair:1px;
/* ---------- ③ 타이포 축 ----------
base 17px / ratio ≈ 1.26 (수작업 보정)
tr-* = 라틴 자간 | trk-* = 한글 보정 자간 (라틴의 약 40%)
한글은 라틴보다 x-height가 크고 어센더/디센더가 짧다 →
같은 자간을 주면 답답해지고, 같은 행간이면 빽빽해 보인다. */
--t-100: 11px; --lh-100: 16px; --tr-100: .09em; --trk-100: .02em; --opsz-100:14;
--t-200: 13px; --lh-200: 20px; --tr-200: .004em; --trk-200: 0em; --opsz-200:14;
--t-300: 15px; --lh-300: 24px; --tr-300: 0em; --trk-300: 0em; --opsz-300:14;
--t-400: 17px; --lh-400: 28px; --tr-400: -.006em; --trk-400: 0em; --opsz-400:16;
--t-500: 21px; --lh-500: 31px; --tr-500: -.013em; --trk-500: -.004em; --opsz-500:19;
--t-600: 27px; --lh-600: 35px; --tr-600: -.019em; --trk-600: -.007em; --opsz-600:23;
--t-700: 34px; --lh-700: 40px; --tr-700: -.023em; --trk-700: -.009em; --opsz-700:28;
--t-800: 46px; --lh-800: 50px; --tr-800: -.027em; --trk-800: -.011em; --opsz-800:32;
--t-900: 64px; --lh-900: 64px; --tr-900: -.031em; --trk-900: -.013em; --opsz-900:32;
--t-1000: clamp(46px, 10.4vw, 148px); --lh-1000:.94; --tr-1000:-.042em; --trk-1000:-.018em; --opsz-1000:32;
--font-sans:
"Inter",
"Pretendard Variable","Pretendard",
"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
"Noto Sans KR","Hiragino Sans","Yu Gothic",
system-ui, -apple-system, "Segoe UI", sans-serif;
--dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;
--ease: cubic-bezier(.2,.6,.2,1);
}
/* 다크 : prefers-color-scheme + 수동 토글 둘 다 */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--paper:#0b0b0c; --paper-2:#141416; --paper-3:#1c1d20;
--ink:#f2f2f3; --ink-2:#a9aaaf; --ink-3:#87888e;
--rule:#26272a; --rule-2:#3a3b3f;
--accent:#ff5a2b; --accent-ink:#ff7a4f; --accent-bg:rgba(255,90,43,.10);
--sel:rgba(255,90,43,.26);
}
}
:root[data-theme="dark"]{
--paper:#0b0b0c; --paper-2:#141416; --paper-3:#1c1d20;
--ink:#f2f2f3; --ink-2:#a9aaaf; --ink-3:#87888e;
--rule:#26272a; --rule-2:#3a3b3f;
--accent:#ff5a2b; --accent-ink:#ff7a4f; --accent-bg:rgba(255,90,43,.10);
--sel:rgba(255,90,43,.26);
}
/* ---------- reset ---------- */
*,*::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-sans);
font-size:var(--t-400); line-height:var(--lh-400); letter-spacing:var(--trk-400);
font-variation-settings:'opsz' var(--opsz-400);
font-feature-settings:'cv05' 1,'ss03' 1;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
/* 한글은 어절 단위로 끊는다. keep-all 이 없으면 「공개됩니 / 다.」처럼
한 낱말이 두 줄로 쪼개진다 — 라틴 활자 규칙을 한글에 그대로 쓴 결과다.
대신 pg_stat_statements 같은 긴 라틴 토큰은 break-word 로 빠져나간다. */
word-break:keep-all; overflow-wrap:break-word;
}
:lang(ko) body, body{ line-height:1.72 }
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol,dl{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--sel)}
hr{border:0;border-top:var(--hair) solid var(--rule);margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
:focus:not(:focus-visible){outline:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s4);top:-64px;z-index:100;background:var(--ink);color:var(--paper);
padding:var(--s3) var(--s5);font-size:var(--t-200);transition:top var(--dur-2) var(--ease)}
.skip:focus{top:var(--s4)}
/* ---------- 타입 유틸 (스케일 그대로) ---------- */
.t100,.t200,.t300,.t400,.t500,.t600,.t700,.t800,.t900,.t1000{margin:0}
.t100{font-size:var(--t-100);line-height:var(--lh-100);letter-spacing:var(--tr-100);
font-variation-settings:'opsz' var(--opsz-100);font-weight:600;text-transform:uppercase}
.t200{font-size:var(--t-200);line-height:var(--lh-200);letter-spacing:var(--tr-200);font-variation-settings:'opsz' var(--opsz-200)}
.t300{font-size:var(--t-300);line-height:var(--lh-300);letter-spacing:var(--tr-300);font-variation-settings:'opsz' var(--opsz-300)}
.t400{font-size:var(--t-400);line-height:var(--lh-400);letter-spacing:var(--tr-400);font-variation-settings:'opsz' var(--opsz-400)}
.t500{font-size:var(--t-500);line-height:var(--lh-500);letter-spacing:var(--tr-500);font-variation-settings:'opsz' var(--opsz-500)}
.t600{font-size:var(--t-600);line-height:var(--lh-600);letter-spacing:var(--tr-600);font-variation-settings:'opsz' var(--opsz-600);font-weight:600}
.t700{font-size:var(--t-700);line-height:var(--lh-700);letter-spacing:var(--tr-700);font-variation-settings:'opsz' var(--opsz-700);font-weight:600}
.t800{font-size:var(--t-800);line-height:var(--lh-800);letter-spacing:var(--tr-800);font-variation-settings:'opsz' var(--opsz-800);font-weight:650}
.t900{font-size:var(--t-900);line-height:var(--lh-900);letter-spacing:var(--tr-900);font-variation-settings:'opsz' var(--opsz-900);font-weight:700}
/* .ko = 한글 자간/행간 보정. 라틴 값 그대로 쓰면 한글은 붙어 보인다. */
.ko.t100{letter-spacing:var(--trk-100)} .ko.t200{letter-spacing:var(--trk-200)}
.ko.t300{letter-spacing:var(--trk-300);line-height:1.72} .ko.t400{letter-spacing:var(--trk-400);line-height:1.72}
.ko.t500{letter-spacing:var(--trk-500);line-height:1.5} .ko.t600{letter-spacing:var(--trk-600);line-height:1.4}
.ko.t700{letter-spacing:var(--trk-700);line-height:1.3} .ko.t800{letter-spacing:var(--trk-800);line-height:1.2}
.ko.t900{letter-spacing:var(--trk-900);line-height:1.12}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1,'lnum' 1,'zero' 1}
.dim{color:var(--ink-3)} .dim2{color:var(--ink-2)}
.acc{color:var(--accent-ink)}
/* ---------- 그리드 ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
/* 섹션 마커 : § 번호 + 라틴 이름 + 한글 이름 + 헤어라인 */
.marker{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding-block:var(--s3);
border-top:var(--hair) solid var(--ink);grid-column:1/-1;margin-bottom:var(--s7)}
.marker > span{white-space:nowrap}
.marker__sq{width:9px;height:9px;background:var(--accent);flex:none}
.marker__no,.marker__en{font-size:var(--t-100);line-height:var(--lh-100);letter-spacing:var(--tr-100);
font-weight:600;text-transform:uppercase;font-variant-numeric:tabular-nums}
.marker__en{color:var(--ink)}
.marker__no{color:var(--ink-3)}
.marker__ko{font-size:var(--t-200);color:var(--ink-3);letter-spacing:var(--trk-200)}
.marker__rule{flex:1;height:var(--hair);background:var(--rule)}
.marker__meta{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--ink-3);
font-variant-numeric:tabular-nums;text-transform:uppercase}
/* 섹션 구분선은 마커의 1px 상단선 하나로 충분하다. 선을 겹쳐 긋지 않는다. */
section{padding-block:var(--s10)}
/* ============================================================
1. MASTHEAD / GNB
============================================================ */
.masthead{position:sticky;top:0;z-index:50;background:var(--paper);
border-bottom:var(--hair) solid var(--ink)}
.masthead__in{display:flex;align-items:center;gap:var(--s6);height:64px}
.wordmark{display:flex;align-items:baseline;gap:6px;font-weight:700;
font-size:19px;letter-spacing:-.035em;font-variation-settings:'opsz' 19;flex:none}
.wordmark b{font-weight:700}
.wordmark span{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--accent-ink);
text-transform:uppercase;transform:translateY(-6px)}
.gnb{display:flex;align-items:center;gap:var(--s5);margin-inline-start:var(--s5)}
.gnb a{position:relative;font-size:var(--t-200);letter-spacing:.02em;font-weight:500;color:var(--ink-2);
padding-block:6px;transition:color var(--dur-1) var(--ease)}
.gnb a .n{font-size:9px;color:var(--ink-3);vertical-align:super;margin-left:3px;font-variant-numeric:tabular-nums}
.gnb a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease)}
.gnb a:hover,.gnb a[aria-current="page"]{color:var(--ink)}
.gnb a:hover::after,.gnb a[aria-current="page"]::after{transform:scaleX(1)}
.utils{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s3)}
.hairbtn{display:inline-flex;align-items:center;gap:var(--s2);height:30px;padding-inline:var(--s3);
background:transparent;border:var(--hair) solid var(--rule-2);border-radius:0;cursor:pointer;
font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;text-transform:uppercase;
color:var(--ink-2);transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.hairbtn:hover{border-color:var(--ink);color:var(--ink)}
.searchbtn{min-width:220px;justify-content:flex-start;color:var(--ink-3)}
.searchbtn kbd{margin-inline-start:auto;font:inherit;border:var(--hair) solid var(--rule-2);
padding:0 5px;line-height:16px;color:var(--ink-3)}
.searchbtn svg{width:13px;height:13px;flex:none}
.langs{display:flex;border:var(--hair) solid var(--rule-2)}
.langs button{background:none;border:0;height:30px;padding-inline:9px;cursor:pointer;
font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--ink-3)}
.langs button + button{border-left:var(--hair) solid var(--rule-2)}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.langs button:hover{color:var(--ink)}
.langs button[aria-pressed="true"]:hover{color:var(--paper)}
.burger{display:none}
.mnav{display:none} /* 데스크톱에서는 항상 숨김. 860px 이하에서만 .open 으로 노출 */
/* 검색 패널 */
.searchpanel{border-bottom:var(--hair) solid var(--ink);background:var(--paper-2);overflow:hidden}
.searchpanel[hidden]{display:none}
.searchpanel__in{padding-block:var(--s7) var(--s6)}
.searchfield{display:flex;align-items:center;gap:var(--s4);border-bottom:2px solid var(--ink);padding-bottom:var(--s3)}
.searchfield input{flex:1;background:none;border:0;outline:none;font-size:var(--t-700);font-weight:600;
letter-spacing:var(--trk-700);line-height:1.3;font-variation-settings:'opsz' 28}
.searchfield input::placeholder{color:var(--ink-3);font-weight:400}
.searchhints{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.chip{border:var(--hair) solid var(--rule-2);padding:5px 10px;font-size:var(--t-200);color:var(--ink-2);
background:none;cursor:pointer;letter-spacing:var(--trk-200)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
/* ============================================================
2. HERO
============================================================ */
.hero{padding-block:var(--s10) var(--s9)}
.hero__type{grid-column:1/-1;font-size:var(--t-1000);line-height:var(--lh-1000);
letter-spacing:var(--trk-1000);font-weight:700;font-variation-settings:'opsz' 32;
text-wrap:balance}
.hero__type .l{display:block}
.hero__type .l2{padding-inline-start:.09em}
.hero__type em{font-style:normal;color:var(--accent-ink)}
.hero__lead{grid-column:1/8;margin-top:var(--s6);font-size:var(--t-500);line-height:1.55;
letter-spacing:var(--trk-500);font-weight:500;color:var(--ink-2);max-width:44ch;
font-variation-settings:'opsz' 19;text-wrap:pretty}
.hero__aside{grid-column:1/-1;margin-top:var(--s8);display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);
row-gap:var(--s6);border-top:var(--hair) solid var(--ink);padding-top:var(--s4)}
.hero__quote{grid-column:1/6;color:var(--ink-2);font-size:var(--t-300);line-height:1.7;letter-spacing:var(--trk-300)}
.hero__quote cite{display:block;font-style:normal;font-size:var(--t-100);letter-spacing:var(--tr-100);
font-weight:600;color:var(--ink-3);margin-top:var(--s3);text-transform:uppercase}
.stats{grid-column:7/13;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gutter)}
.stats div{border-left:var(--hair) solid var(--rule);padding-inline-start:var(--s3)}
.stats dt{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--ink-3);text-transform:uppercase}
.stats dd{margin:2px 0 0;font-size:var(--t-700);font-weight:650;letter-spacing:var(--tr-700);
font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 28;line-height:1.15}
/* ============================================================
3. TYPE SCALE SPECIMEN — 이 레인의 주장
============================================================ */
.scale__head{grid-column:1/9;margin-bottom:var(--s7)}
.scale__note{grid-column:9/13;margin-bottom:var(--s7);font-size:var(--t-200);color:var(--ink-2);
line-height:1.75;letter-spacing:var(--trk-200);border-left:2px solid var(--accent);padding-inline-start:var(--s4)}
.spec{grid-column:1/-1;border-top:var(--hair) solid var(--ink)}
.spec__hd,.spec__row{display:grid;grid-template-columns:78px minmax(0,1fr) 92px 62px 78px 56px 56px 118px;
column-gap:var(--gutter);align-items:baseline;
border-bottom:var(--hair) solid var(--rule);padding-block:var(--s3)}
.spec__hd{padding-block:var(--s2);border-bottom-color:var(--ink)}
.spec__hd span{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--ink-3);text-transform:uppercase}
.spec__row:hover{background:var(--accent-bg)}
.spec__row > *{font-variant-numeric:tabular-nums}
.spec__tok{font-size:var(--t-200);font-weight:600;color:var(--accent-ink)}
.spec__sample{overflow:hidden;white-space:nowrap;color:var(--ink);font-weight:600}
.spec__row[data-w="400"] .spec__sample{font-weight:400}
.spec__num{font-size:var(--t-200);color:var(--ink-2)}
.spec__use{font-size:var(--t-200);color:var(--ink-3);letter-spacing:var(--trk-200);text-align:right}
/* ============================================================
4. GALLERY — 비대칭 그리드, 이미지 비율 존중
============================================================ */
.gal{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter);row-gap:var(--s9);align-items:start}
.work{grid-column:span var(--sp,4);margin-top:var(--drop,0)}
.work a{display:block}
.work__fr{position:relative;aspect-ratio:var(--ar,4/3);overflow:hidden;background:var(--paper-3);
border:var(--hair) solid var(--rule)}
.work__fr svg{width:100%;height:100%}
/* 캔버스 결 : 이미지 위 1px 스캔라인. 라이트=곱하기, 다크=스크린 */
.work__fr::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;z-index:1;
background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 1px,transparent 1px 3px);
mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .work__fr::after{mix-blend-mode:screen;opacity:.10;
background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0 1px,transparent 1px 3px)}
}
:root[data-theme="dark"] .work__fr::after{mix-blend-mode:screen;opacity:.10;
background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0 1px,transparent 1px 3px)}
.work__fr::before{content:"";position:absolute;inset:0;z-index:2;background:var(--ink);opacity:0;
transition:opacity var(--dur-2) var(--ease)}
.work a:hover .work__fr::before{opacity:.06}
.work__cap{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--s4);
margin-top:var(--s4);padding-top:var(--s3);border-top:var(--hair) solid var(--ink)}
.work__no{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--accent-ink);
font-variant-numeric:tabular-nums}
.work__ti{display:block;font-size:var(--t-500);font-weight:600;letter-spacing:var(--trk-500);line-height:1.35;
transition:color var(--dur-1) var(--ease)}
.work a:hover .work__ti{color:var(--accent-ink)}
.work__me{display:block;font-size:var(--t-200);color:var(--ink-3);letter-spacing:var(--trk-200);
margin-top:var(--s2);font-variant-numeric:tabular-nums}
/* ============================================================
5. 글 색인 (인덱스형 리스트)
============================================================ */
.idx__bar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s5)}
.idx__bar .spacer{flex:1}
.filt{background:none;border:var(--hair) solid var(--rule-2);padding:5px 11px;cursor:pointer;
font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--ink-3);text-transform:uppercase}
.filt:hover{border-color:var(--ink);color:var(--ink)}
.filt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.idx{grid-column:1/-1;border-top:var(--hair) solid var(--ink)}
.idx__hd{display:grid;grid-template-columns:64px 124px 116px minmax(0,1fr) 92px;column-gap:var(--gutter);
border-bottom:var(--hair) solid var(--ink);padding-block:var(--s2)}
.idx__hd button{background:none;border:0;padding:0;text-align:left;cursor:pointer;
font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--ink-3);text-transform:uppercase}
.idx__hd button:hover{color:var(--ink)}
.idx__hd button[data-active="1"]{color:var(--accent-ink)}
.idx__hd button[data-active="1"]::after{content:" ↓"}
.idx__hd button[data-active="1"][data-dir="asc"]::after{content:" ↑"}
.idx__hd .r{text-align:right}
.row{display:grid;grid-template-columns:64px 124px 116px minmax(0,1fr) 92px;column-gap:var(--gutter);
align-items:baseline;border-bottom:var(--hair) solid var(--rule);padding-block:var(--s4);
position:relative;transition:background var(--dur-1) var(--ease)}
.row:hover{background:var(--accent-bg)}
.row::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--accent);
transition:width var(--dur-3) var(--ease)}
.row:hover::before{width:100%}
.row__no,.row__dt,.row__rt{font-size:var(--t-200);color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.row__rt{text-align:right}
.row__ty{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;text-transform:uppercase;color:var(--ink-2)}
.row__ty i{font-style:normal;display:inline-block;width:7px;height:7px;margin-right:6px;background:var(--ink-3);
vertical-align:middle;transform:translateY(-1px)}
.row[data-type="tarchive"] .row__ty i{background:var(--accent)}
.row[data-type="tech"] .row__ty i{background:var(--ink)}
.row[data-type="blog"] .row__ty i{background:transparent;border:var(--hair) solid var(--ink-3)}
.row__ti{font-size:var(--t-500);font-weight:600;letter-spacing:var(--trk-500);line-height:1.4;
transition:transform var(--dur-2) var(--ease)}
.row__ti a{display:inline-block}
.row:hover .row__ti{transform:translateX(6px)}
.row:hover .row__ti a{color:var(--accent-ink)}
.row__sub{display:none;font-size:var(--t-200);color:var(--ink-3);margin-top:var(--s2);letter-spacing:var(--trk-200);
font-variant-numeric:tabular-nums}
.idx__more{grid-column:1/-1;margin-top:var(--s6);display:flex;gap:var(--s5);align-items:center}
.linkbtn{border:0;background:none;padding:0;cursor:pointer;font-size:var(--t-200);font-weight:600;
border-bottom:2px solid var(--ink);padding-bottom:2px;letter-spacing:var(--trk-200)}
.linkbtn:hover{color:var(--accent-ink);border-color:var(--accent)}
/* ============================================================
5-B. T‑ARCHIVE 분류 색인 — 색인(index) · 패싯
3단계를 들여쓰기로 그리지 않는다. 깊이는 활자가 말한다:
깊이1 = t‑500/650 · 깊이2 = t‑300/600 · 깊이3 = t‑200/400
말단은 줄바꿈 없이 연속 조판(run‑in). 책 뒷장 색인의 두 조판법 중
'run‑in style'을 그대로 가져온 것이다. 세로 길이가 1/6 로 줄어든다.
============================================================ */
.tax__intro{grid-column:1/8;margin-bottom:var(--s6)}
.tax__note{grid-column:8/13;margin-bottom:var(--s6);font-size:var(--t-200);color:var(--ink-2);
line-height:1.75;letter-spacing:var(--trk-200);
border-left:2px solid var(--accent);padding-inline-start:var(--s4)}
.tax{grid-column:1/-1}
/* 구분점은 앞 항목에 nbsp 로 붙인다 — 줄바꿈 시 「· 파티셔닝」처럼 점이 줄머리에 서지 않게. */
.tax .sp{color:var(--rule-2);user-select:none;white-space:nowrap}
.tax .lb{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;text-transform:uppercase;
color:var(--ink-3);margin-inline-end:var(--s3)}
/* --- 도구 막대 : 배열 전환 + 가변성 시뮬레이션 --- */
.tax__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
border-top:var(--hair) solid var(--ink);padding-top:var(--s3);margin-bottom:var(--s4)}
.tax__bar .spacer{flex:1}
.seg{display:flex;border:var(--hair) solid var(--rule-2)}
.seg button{background:none;border:0;height:30px;padding-inline:13px;cursor:pointer;
font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;
text-transform:uppercase;color:var(--ink-3)}
.seg button + button{border-left:var(--hair) solid var(--rule-2)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button[aria-pressed="true"]:hover{color:var(--paper)}
/* --- 색인 탭(thumb index) : 첫 글자로 점프 --- */
.tax__railwrap{display:flex;align-items:baseline;gap:var(--s4);
border-top:var(--hair) solid var(--rule);border-bottom:var(--hair) solid var(--rule);
padding-block:5px;margin-bottom:var(--s3)}
.tax__railwrap > .lb{flex:none;margin:0}
.tax__rail{display:flex;flex-wrap:wrap;gap:0;flex:1}
.tax__rail button{background:none;border:0;cursor:pointer;min-width:25px;height:23px;padding:0 3px;
font-size:var(--t-200);font-weight:600;color:var(--ink-3);letter-spacing:0;line-height:23px;
font-variant-numeric:tabular-nums}
.tax__rail button:hover{color:var(--accent-ink);background:var(--accent-bg)}
.tax__hint{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;text-transform:uppercase;
color:var(--ink-3);margin-bottom:var(--s6)}
/* --- 색인 표제(entry head) : 선택된 분류가 서는 자리 --- */
.tax__head{border-top:2px solid var(--ink);padding-top:var(--s4);margin-bottom:var(--s7);
display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gutter);row-gap:var(--s3)}
.tax__path{grid-column:1/-1;font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;
text-transform:uppercase;color:var(--ink-3)}
.tax__path b{color:var(--accent-ink);font-weight:600}
.tax__ttl{font-size:var(--t-800);font-weight:650;letter-spacing:var(--trk-800);line-height:1.15;
font-variation-settings:'opsz' 32;align-self:end}
.tax__big{text-align:right;line-height:1.1;white-space:nowrap;align-self:end;
font-size:var(--t-700);font-weight:650;letter-spacing:var(--tr-700);
font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 28}
.tax__big small{display:block;font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;
text-transform:uppercase;color:var(--ink-3)}
.tax__rel{grid-column:1/-1;font-size:var(--t-200);color:var(--ink-2);letter-spacing:var(--trk-200);line-height:1.95}
.tax__rel .ln{display:block}
.tax__rel .ln + .ln{border-top:var(--hair) solid var(--rule);margin-top:4px;padding-top:4px}
.tax__go{grid-column:1/-1;margin-top:var(--s4)}
/* --- 다칼럼 색인 본체 : 칼럼 사이는 1px 괘선 --- */
.tax__cols{columns:4 250px;column-gap:var(--s7);column-rule:var(--hair) solid var(--rule)}
.tax__br{break-inside:avoid;-webkit-column-break-inside:avoid;
border-top:2px solid var(--ink);padding-top:var(--s3);margin-bottom:var(--s7)}
.tax__d1{margin:0}
.tax__g{break-inside:avoid;-webkit-column-break-inside:avoid;
border-top:var(--hair) solid var(--rule);margin-top:7px;padding-top:6px}
.tax__d2{margin:0}
.tax__d3s{margin:1px 0 0;font-size:var(--t-200);line-height:1.9;letter-spacing:var(--trk-200);color:var(--ink-2)}
/* 용어 = 버튼. 깊이는 오직 활자로 구분한다. 들여쓰기 0px. */
.tax__t{display:inline-block;vertical-align:baseline;background:none;border:0;padding:0;margin:0;
cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;
border-bottom:2px solid transparent}
.tax__t.d1{font-size:var(--t-500);line-height:1.3;font-weight:650;letter-spacing:var(--trk-500);color:var(--ink)}
.tax__t.d2{font-size:var(--t-300);line-height:1.5;font-weight:600;letter-spacing:var(--trk-300);color:var(--ink)}
.tax__t.d3{font-size:var(--t-200);line-height:1.9;font-weight:400;letter-spacing:var(--trk-200);color:var(--ink-2)}
.tax__t .ct{margin-inline-start:5px;font-size:var(--t-100);font-weight:600;color:var(--ink-3);
letter-spacing:.02em;font-variant-numeric:tabular-nums}
.tax__t.d1 .ct{font-size:var(--t-200)}
.tax__t:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}
.tax__t:hover .ct{color:var(--accent-ink)}
.tax__t[aria-current="true"]{color:var(--accent-ink);border-bottom-color:var(--accent)}
.tax__t[aria-current="true"] .ct{color:var(--accent-ink)}
.tax__t[data-anc="1"]{border-bottom-color:var(--rule-2)}
/* 0건 분류 — 지우지 않고 흐리게 남긴다. 빈 곳은 빈 곳으로. */
.tax__t .ct.z,.tax__e .c.z{opacity:.5}
.tax__rel .tax__t{line-height:1.9}
/* --- 가나다순(통합 색인) : 계층을 버리고 이름으로만 세운다 --- */
.tax__abcgrp{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--s6)}
.tax__init{font-size:var(--t-500);font-weight:700;letter-spacing:var(--trk-500);color:var(--accent-ink);
border-bottom:var(--hair) solid var(--ink);padding-bottom:2px;margin-bottom:var(--s2);line-height:1.2}
.tax__e{display:grid;grid-template-columns:minmax(0,auto) minmax(12px,1fr) auto;column-gap:7px;
align-items:baseline;width:100%;background:none;border:0;cursor:pointer;text-align:left;
padding:5px 0;border-bottom:var(--hair) solid var(--rule)}
.tax__e .n{font-size:var(--t-300);font-weight:600;letter-spacing:var(--trk-300);color:var(--ink);line-height:1.4}
.tax__e .ld{height:1px;align-self:center;margin-top:6px;
background:repeating-linear-gradient(90deg,var(--rule-2) 0 1px,transparent 1px 4px)}
.tax__e .c{font-size:var(--t-200);color:var(--ink-3);font-variant-numeric:tabular-nums}
.tax__e .p{grid-column:1/-1;font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;
text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.tax__e:hover{background:var(--accent-bg)}
.tax__e:hover .n{color:var(--accent-ink)}
.tax__e[aria-current="true"] .n{color:var(--accent-ink)}
.tax__e[aria-current="true"]{border-bottom-color:var(--accent)}
/* 데이터가 바뀐 항목은 잠깐 표시된다 (가변성의 증거) */
@keyframes taxflash{from{background:var(--accent-bg);box-shadow:0 0 0 4px var(--accent-bg)}
to{background:transparent;box-shadow:0 0 0 4px transparent}}
.tax__t.isnew,.tax__e.isnew{animation:taxflash 1600ms var(--ease)}
/* --- 로그 : 시뮬레이션 결과와 선택 상태를 말로 남긴다(aria-live) --- */
.tax__log{margin-top:var(--s5);border-top:var(--hair) solid var(--rule);padding-top:var(--s3);
font-size:var(--t-200);color:var(--ink-3);letter-spacing:var(--trk-200);line-height:1.7}
.tax__log b{color:var(--accent-ink);font-weight:600}
/* --- 상세페이지 하단 삽입 예시 (검색으로 착지한 방문자용) --- */
.tax__stamp{margin-top:var(--s8);border:var(--hair) solid var(--rule-2);padding:var(--s5) var(--s5) var(--s4)}
.tax__stamp .lb{display:block;margin-bottom:var(--s3)}
.tax__stampPath{font-size:var(--t-300);font-weight:600;letter-spacing:var(--trk-300);color:var(--ink)}
.tax__stampPath b{color:var(--accent-ink)}
.tax__stampSib{margin-top:6px;font-size:var(--t-200);color:var(--ink-3);letter-spacing:var(--trk-200);line-height:1.8}
@media (max-width:1080px){
.tax__intro,.tax__note{grid-column:1/-1}
.tax__note{margin-top:calc(-1 * var(--s3))}
.tax__cols{columns:3 215px;column-gap:var(--s6)}
}
@media (max-width:860px){
.tax__cols{columns:2 190px;column-gap:var(--s5)}
.tax__ttl{font-size:var(--t-700);letter-spacing:var(--trk-700)}
}
@media (max-width:620px){
/* 390px : 칼럼이 1개로 무너진다. 대신 run‑in 조판이 세로 길이를 지탱하고,
가지 표제는 마스트헤드 아래에 붙어 "지금 어느 가지인지"를 계속 말해준다. */
.tax__cols{columns:auto;column-count:auto;column-width:auto;column-rule:none;display:block}
.tax__br{margin-bottom:var(--s5)}
.tax__d1{position:sticky;top:56px;z-index:2;background:var(--paper);
padding-block:3px;border-bottom:var(--hair) solid var(--rule)}
.tax__head{grid-template-columns:minmax(0,1fr)}
.tax__big{text-align:left}
.tax__big small{display:inline;margin-inline-start:6px}
.tax__railwrap{flex-wrap:wrap;gap:var(--s2)}
.tax__stamp{padding:var(--s4)}
}
/* ============================================================
6. 강좌 연재
============================================================ */
.courses{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s8)}
.course{border-top:2px solid var(--ink);padding-top:var(--s3)}
.course__hd{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4)}
.course__ti{font-size:var(--t-500);font-weight:650;letter-spacing:var(--trk-500);line-height:1.3}
.course__ct{margin-inline-start:auto;font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;
color:var(--accent-ink);font-variant-numeric:tabular-nums;flex:none}
.course__path{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--ink-3);
text-transform:uppercase;margin-bottom:var(--s5)}
.course ol li{border-bottom:var(--hair) solid var(--rule)}
.course ol li:first-child{border-top:var(--hair) solid var(--rule)}
.course ol a{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:var(--s3);
padding-block:9px;font-size:var(--t-300);letter-spacing:var(--trk-300);line-height:1.5;
color:var(--ink-2);transition:color var(--dur-1) var(--ease),padding var(--dur-2) var(--ease)}
.course ol a:hover{color:var(--ink);padding-inline-start:var(--s2)}
.course ol .k{font-size:var(--t-200);color:var(--ink-3);font-variant-numeric:tabular-nums}
.course ol a:hover .k{color:var(--accent-ink)}
/* ============================================================
7. 방명록 CTA
============================================================ */
.gb{grid-column:1/-1;border:var(--hair) solid var(--ink);display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.gb__l{grid-column:1/7;padding:var(--s8) var(--s7);border-right:var(--hair) solid var(--ink)}
.gb__r{grid-column:7/13;padding:var(--s8) var(--s7);display:flex;flex-direction:column;justify-content:center}
.gb__ti{font-size:var(--t-800);font-weight:700;letter-spacing:var(--trk-800);line-height:1.15;
font-variation-settings:'opsz' 32}
.gb__tx{margin-top:var(--s5);color:var(--ink-2);font-size:var(--t-300);line-height:1.75;letter-spacing:var(--trk-300);max-width:34ch}
.gb__form{display:flex;border-bottom:2px solid var(--ink);padding-bottom:var(--s3);gap:var(--s4)}
.gb__form input{flex:1;background:none;border:0;outline:none;font-size:var(--t-500);letter-spacing:var(--trk-500)}
.gb__form input::placeholder{color:var(--ink-3)}
.gb__form button{background:var(--ink);color:var(--paper);border:0;padding:var(--s2) var(--s5);cursor:pointer;
font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;text-transform:uppercase}
.gb__form button:hover{background:var(--accent-ink)}
.gb__meta{margin-top:var(--s5);display:flex;gap:var(--s6);font-size:var(--t-200);color:var(--ink-3);
font-variant-numeric:tabular-nums;letter-spacing:var(--trk-200)}
/* ============================================================
8. FOOTER
============================================================ */
.foot{border-top:var(--hair) solid var(--ink);padding-block:var(--s8) var(--s6);background:var(--paper)}
.foot__cols{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--gutter);row-gap:var(--s7)}
.foot__brand{grid-column:1/5}
.foot__col{grid-column:span 2}
.foot__col h3,.foot__brand h3{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;
color:var(--ink-3);text-transform:uppercase;margin-bottom:var(--s3)}
.foot__col li a{font-size:var(--t-200);color:var(--ink-2);display:inline-block;padding-block:3px;letter-spacing:var(--trk-200)}
.foot__col li a:hover{color:var(--accent-ink)}
.foot__colophon{font-size:var(--t-200);color:var(--ink-3);line-height:1.75;max-width:38ch;letter-spacing:var(--trk-200)}
.foot__bot{grid-column:1/-1;margin-top:var(--s8);padding-top:var(--s3);border-top:var(--hair) solid var(--rule);
display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;
font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--ink-3);text-transform:uppercase}
.foot__bot .spacer{flex:1}
.foot__bot a:hover{color:var(--ink)}
/* ---------- 등장 모션 (극히 절제) ----------
JS가 없거나 IntersectionObserver가 안 돌면 콘텐츠는 그냥 보인다.
숨김은 .js 클래스가 붙었을 때만 적용한다 — 글이 안 보이는 사고를 원천 차단. */
.js .rv{opacity:0;transform:translateY(10px);
transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.js .rv.in{opacity:1;transform:none}
/* ============================================================
반응형 : 1440 / 1024 / 768 / 390
============================================================ */
@media (max-width:1280px){
:root{--pad:32px}
.searchbtn{min-width:150px}
.spec__hd,.spec__row{grid-template-columns:70px minmax(0,1fr) 62px 56px 70px 56px 110px}
.spec__hd span:nth-child(7),.spec__row > *:nth-child(7){display:none}
}
@media (max-width:1080px){
:root{--pad:28px;--gutter:20px}
.gnb{gap:var(--s4);margin-inline-start:var(--s4)}
.hero__quote{grid-column:1/7}
.hero__lead{grid-column:1/-1;max-width:34ch}
.stats{grid-column:7/13;grid-template-columns:repeat(2,1fr);row-gap:var(--s5)}
.scale__head{grid-column:1/-1;margin-bottom:var(--s5)}
.scale__note{grid-column:1/-1;margin-bottom:var(--s6)}
.spec__hd,.spec__row{grid-template-columns:64px minmax(0,1fr) 58px 54px 62px}
.spec__hd span:nth-child(6),.spec__row > *:nth-child(6),
.spec__hd span:nth-child(8),.spec__row > *:nth-child(8){display:none}
.courses{grid-template-columns:repeat(2,minmax(0,1fr))}
.work{--sp:6 !important}
.work:first-child{--sp:12 !important}
.foot__brand{grid-column:1/7}
.foot__col{grid-column:span 3}
}
@media (max-width:860px){
:root{--pad:24px}
.gnb,.searchbtn{display:none}
.burger{display:inline-flex}
.masthead__in{gap:var(--s3)}
.mnav{border-top:var(--hair) solid var(--rule)}
.mnav.open{display:block}
.mnav a{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s4) 0;
border-bottom:var(--hair) solid var(--rule);font-size:var(--t-500);font-weight:600;letter-spacing:var(--trk-500)}
.mnav a .n{font-size:var(--t-200);color:var(--ink-3);font-variant-numeric:tabular-nums}
.hero{padding-block:var(--s8) var(--s8)}
section{padding-block:var(--s8)}
.hero__aside{margin-top:var(--s7)}
.hero__quote{grid-column:1/-1}
.stats{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
.idx__hd{display:none}
.row{grid-template-columns:56px minmax(0,1fr);row-gap:0;padding-block:var(--s4)}
.row__dt,.row__rt{display:none}
.row__ty{grid-column:1;grid-row:1}
.row__no{grid-column:1;grid-row:2;padding-top:4px}
.row__ti{grid-column:2;grid-row:1/3}
.row__sub{display:block}
.row:hover .row__ti{transform:none}
.gb__l,.gb__r{grid-column:1/-1;padding:var(--s6) var(--s5);border-right:0}
.gb__l{border-bottom:var(--hair) solid var(--ink)}
.foot__brand{grid-column:1/-1}
.foot__col{grid-column:span 4}
}
@media (max-width:620px){
:root{--pad:18px;--gutter:14px}
.work{--sp:12 !important}
.work{--drop:0 !important}
.courses{grid-template-columns:1fr;row-gap:var(--s7)}
.stats{grid-template-columns:repeat(2,1fr);row-gap:var(--s5)}
.spec__hd,.spec__row{grid-template-columns:52px minmax(0,1fr) 54px}
.spec__hd span:nth-child(4),.spec__row > *:nth-child(4),
.spec__hd span:nth-child(5),.spec__row > *:nth-child(5){display:none}
.gal{row-gap:var(--s8)}
.searchfield input{font-size:var(--t-600)}
.gb__ti{font-size:var(--t-700);letter-spacing:var(--trk-700)}
.foot__col{grid-column:span 6}
.idx__bar{gap:6px}
/* 마스트헤드 압축 — 언어 스위처·테마·메뉴가 390px 안에 모두 들어와야 한다 */
.masthead__in{gap:var(--s2);height:56px}
.wordmark{font-size:16px}
.wordmark span{font-size:9px;transform:translateY(-5px)}
.utils{gap:5px}
.langs button{padding-inline:6px}
.hairbtn{padding-inline:8px;height:28px}
.marker{gap:var(--s2);row-gap:2px}
.marker__rule{display:none}
.marker__meta{flex-basis:100%;padding-top:2px}
.hero__lead{margin-top:var(--s5)}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
.js .rv{opacity:1;transform:none}
}
@media print{ .masthead,.searchpanel{position:static} }
/* ============================================================
9. 멀티페이지 — 페이지 전환 / 페이지 머리 / 좌측 트리
2026-08-02 방향 변경(01_multipage_tree.md) 반영.
지배 원칙: 구조가 정보를 깎아내지 않는다.
→ 이 파일 어디에도 text-overflow:ellipsis 가 없다. 이름은 자르지 않는다.
============================================================ */
/* ---------- 크로스 도큐먼트 페이지 전환 ---------- */
@view-transition{ navigation: auto }
::view-transition-old(root){ animation: vt-out 160ms var(--ease) both }
::view-transition-new(root){ animation: vt-in 260ms var(--ease) both }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes vt-in { from{ opacity:0; transform:translateY(8px) } }
.masthead{ view-transition-name: mh }
.wordmark{ view-transition-name: wm }
.foot{ view-transition-name: ft }
.side{ view-transition-name: side }
@media (prefers-reduced-motion: reduce){
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important }
}
/* ---------- 페이지 머리 (하위 페이지 공통) ---------- */
.ph{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
column-gap:var(--gutter);border-bottom:var(--hair) solid var(--ink);
padding-bottom:var(--s4);margin-bottom:var(--s7)}
.ph__ti{font-size:var(--t-900);font-weight:700;letter-spacing:var(--trk-900);line-height:1.06;
font-variation-settings:'opsz' 32}
.ph__ti em{font-style:normal;color:var(--accent-ink)}
.ph__no{font-size:var(--t-700);font-weight:650;letter-spacing:var(--tr-700);text-align:right;
white-space:nowrap;font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 28;line-height:1.1}
.ph__no small{display:block;font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;
text-transform:uppercase;color:var(--ink-3)}
.ph__lead{grid-column:1/-1;margin-top:var(--s4);font-size:var(--t-300);line-height:1.8;
letter-spacing:var(--trk-300);color:var(--ink-2);max-width:60ch}
.morebar{grid-column:1/-1;margin-top:var(--s7);padding-top:var(--s3);
border-top:var(--hair) solid var(--rule);display:flex;flex-wrap:wrap;gap:var(--s5);align-items:baseline}
.morebar .spacer{flex:1}
/* ---------- archive / learn : 2단 (좌측 트리 + 본문) ---------- */
.arc{grid-column:1/-1;display:grid;grid-template-columns:298px minmax(0,1fr);
column-gap:var(--s7);align-items:start}
.arc__main{min-width:0}
.side{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;
border-top:2px solid var(--ink);padding-top:var(--s3)}
.side__hd{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3)}
.side__hd h2{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;text-transform:uppercase}
.side__meta{margin-inline-start:auto;font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;
color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.side__find{display:flex;align-items:center;gap:var(--s2);border-bottom:2px solid var(--ink);
padding-bottom:5px;margin-bottom:var(--s4)}
.side__find svg{width:13px;height:13px;flex:none;color:var(--ink-3)}
.side__find input{flex:1;min-width:0;background:none;border:0;outline:none;
font-size:var(--t-300);letter-spacing:var(--trk-300)}
.side__find input::placeholder{color:var(--ink-3)}
.side__x{background:none;border:0;cursor:pointer;font-size:var(--t-100);letter-spacing:var(--tr-100);
font-weight:600;color:var(--ink-3);text-transform:uppercase;padding:2px 4px}
.side__x:hover{color:var(--accent-ink)}
.side__empty{font-size:var(--t-200);color:var(--ink-3);letter-spacing:var(--trk-200);
padding:var(--s4) 0;line-height:1.7}
.side__sim{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--s6);
border-top:var(--hair) solid var(--rule);padding-top:var(--s4)}
.side__sim .hairbtn{height:26px;padding-inline:8px}
.side__log{margin-top:var(--s3);font-size:var(--t-100);line-height:1.65;color:var(--ink-3);
letter-spacing:.01em}
.side__log b{color:var(--accent-ink);font-weight:600}
.side__close{display:none}
.drawerbtn{display:none}
.scrim{display:none}
/* ---------- 트리뷰 ----------
들여쓰기는 8px 만. 깊이는 활자 위계(15/650 → 13/600 → 13/400)와
1px 세로 괘선이 말한다. 3단이라도 가로로 24px 이상 밀리지 않는다. */
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree ul{margin-left:5px;padding-left:8px;border-left:var(--hair) solid var(--rule)}
.tree li{margin:0}
.ti{display:grid;grid-template-columns:13px minmax(0,1fr) auto;column-gap:7px;align-items:baseline;
padding:5px 3px 5px 0;border-bottom:var(--hair) solid var(--rule);cursor:pointer}
.tree > li > .ti{border-bottom-color:var(--rule-2)}
.ti:hover{background:var(--accent-bg)}
li[role="treeitem"]{outline-offset:-2px}
li[role="treeitem"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
li[role="treeitem"]:focus-visible > .ti{background:var(--accent-bg)}
/* 이름은 절대 자르지 않는다 — 길면 줄바꿈한다 */
.tn{min-width:0;overflow-wrap:anywhere;word-break:keep-all;line-height:1.45}
.tc{font-size:var(--t-100);font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;
letter-spacing:.02em;white-space:nowrap}
.tc.z{opacity:.5}
.tree > li > .ti .tn{font-size:var(--t-300);font-weight:650;letter-spacing:var(--trk-300);color:var(--ink)}
.tree > li > .ti .tc{font-size:var(--t-200)}
li[aria-level="2"] > .ti .tn{font-size:var(--t-200);font-weight:600;letter-spacing:var(--trk-200);color:var(--ink)}
li[aria-level="3"] > .ti .tn{font-size:var(--t-200);font-weight:400;letter-spacing:var(--trk-200);color:var(--ink-2)}
li[aria-selected="true"] > .ti{background:var(--accent-bg)}
li[aria-selected="true"] > .ti .tn{color:var(--accent-ink);font-weight:650}
li[aria-selected="true"] > .ti .tc{color:var(--accent-ink)}
li[data-onpath="1"] > .ti .tn{color:var(--ink)}
.ti mark{background:none;color:var(--accent-ink);font-weight:650}
/* 펼침 토글 : 1px 헤어라인 상자 안의 + / −. 말단에는 아예 만들지 않는다. */
.tw{width:11px;height:11px;position:relative;align-self:center;justify-self:start;
border:var(--hair) solid var(--rule-2);flex:none}
.tw::before,.tw::after{content:"";position:absolute;background:var(--ink-2)}
.tw::before{left:2px;right:2px;top:4px;height:1px}
.tw::after{top:2px;bottom:2px;left:4px;width:1px;transition:opacity var(--dur-1) var(--ease)}
li[aria-expanded="true"] > .ti > .tw::after{opacity:0}
li[aria-expanded="true"] > .ti > .tw{border-color:var(--accent);background:var(--accent-bg)}
.ti:hover .tw{border-color:var(--ink)}
.tw--leaf{border:0;background:none}
.tw--leaf::before{left:3px;right:3px;top:5px;height:1px;background:var(--rule-2)}
.tw--leaf::after{display:none}
/* ---------- 본문 : 경로 · 표제 · 색인 요약 ---------- */
.crumb{grid-column:1/-1;font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;
text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)}
.crumb a:hover{color:var(--ink)}
.crumb b{color:var(--accent-ink);font-weight:600}
.crumb .sep{color:var(--rule-2);padding-inline:5px}
/* ---------- 방명록 목록 ---------- */
.gbl{grid-column:1/-1;border-top:var(--hair) solid var(--ink)}
.gbl li{display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:var(--gutter);
border-bottom:var(--hair) solid var(--rule);padding-block:var(--s4)}
.gbl .who{font-size:var(--t-200);font-weight:600;letter-spacing:var(--trk-200)}
.gbl .when{display:block;font-size:var(--t-100);letter-spacing:var(--tr-100);color:var(--ink-3);
font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.gbl .msg{font-size:var(--t-300);line-height:1.75;letter-spacing:var(--trk-300);color:var(--ink-2)}
.gbl .msg b{color:var(--ink);font-weight:600}
/* ---------- 강좌 페이지 : 목차 트리 + 본문 ---------- */
.lesson{border-top:var(--hair) solid var(--rule);padding-block:var(--s4)}
.lesson:first-of-type{border-top:2px solid var(--ink)}
.lesson h3{font-size:var(--t-500);font-weight:650;letter-spacing:var(--trk-500);line-height:1.35}
.lesson p{margin-top:6px;font-size:var(--t-200);color:var(--ink-3);letter-spacing:var(--trk-200);line-height:1.7}
.lesson .k{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--accent-ink);
font-variant-numeric:tabular-nums}
/* ---------- 반응형 : 860 이하 = 드로어 ---------- */
@media (max-width:1080px){
.arc{grid-template-columns:258px minmax(0,1fr);column-gap:var(--s6)}
.ph__ti{font-size:var(--t-800);letter-spacing:var(--trk-800)}
}
@media (max-width:860px){
.arc{grid-template-columns:minmax(0,1fr)}
/* .wrap.grid 의 그리드 아이템이므로 열 지정이 없으면 1칼럼(≈24px)으로 짜부라져
글자가 한 자씩 세로로 쌓인다. 전폭을 잡고 줄바꿈을 막는다. */
.drawerbtn{display:inline-flex;position:sticky;top:72px;z-index:20;
grid-column:1/-1;justify-self:start;white-space:nowrap;margin-bottom:var(--s4)}
.side{position:fixed;left:0;top:0;bottom:0;width:min(88vw,340px);height:100%;max-height:none;z-index:70;
background:var(--paper);border-top:0;border-right:var(--hair) solid var(--ink);
padding:var(--s5) var(--s5) var(--s8);transform:translateX(-102%);visibility:hidden;
transition:transform var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
.side.open{transform:none;visibility:visible;transition:transform var(--dur-2) var(--ease)}
.side__close{display:inline-flex;margin-inline-start:auto}
.side__meta{margin-inline-start:0}
.scrim{display:block;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.34);
opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.ph__ti{font-size:var(--t-700);letter-spacing:var(--trk-700)}
.ph{grid-template-columns:minmax(0,1fr)}
.ph__no{text-align:left}
.ph__no small{display:inline;margin-inline-start:6px}
.gbl li{grid-template-columns:minmax(0,1fr);row-gap:var(--s2)}
}
@media (max-width:620px){
.tree ul{margin-left:3px;padding-left:6px}
.ti{column-gap:6px}
.side{width:min(92vw,330px);padding:var(--s4) var(--s4) var(--s8)}
.drawerbtn{top:64px}
}
/* ============================================================
10. 갤러리 대표이미지 메타 · SNS 공유 · 이미지 라이트박스
02_gallery_and_share.md 반영.
★ 정보는 어떤 입력장치에서도 사라지지 않는다.
- 마우스: 이미지 위 오버레이가 hover 로 올라온다(현행 경험 유지)
- 터치 : hover 를 흉내내지 않는다. 오버레이가 상시 노출된다(2탭 문제 원천 제거)
- 키보드: :focus-within 으로 동일하게 뜬다
- 그리고 어느 경우에도 카드 본문의 메타 텍스트는 항상 있다(오버레이는 보조)
============================================================ */
/* ---------- 카드 본문 메타 : 언제나 활자로 존재한다 ---------- */
.work__spec{display:block;margin-top:5px;font-size:var(--t-200);letter-spacing:var(--trk-200);
color:var(--ink-2);font-variant-numeric:tabular-nums;line-height:1.6}
.work__spec .d{color:var(--rule-2);padding-inline:5px}
.work__spec .price{color:var(--accent-ink);font-weight:600}
/* ---------- 이미지 위 오버레이 ---------- */
.work__ov{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;
padding:14px 16px;color:#fff;
background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.30) 58%,rgba(0,0,0,0) 100%);
pointer-events:none;transition:opacity var(--dur-3) var(--ease)}
.work__ov dl{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;width:100%}
.work__ov dt{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;
text-transform:uppercase;color:rgba(255,255,255,.72)}
.work__ov dd{margin:0 0 0 6px;font-size:var(--t-200);font-weight:600;color:#fff;
letter-spacing:var(--trk-200);font-variant-numeric:tabular-nums}
.work__ov .pair{display:flex;align-items:baseline}
/* 마우스가 있는 기기에서만 hover 로 감춘다. 이 격리가 2탭 문제의 유일한 예방책이다. */
@media (hover:hover) and (pointer:fine){
.work__ov{opacity:0}
.work:hover .work__ov,
.work:focus-within .work__ov{opacity:1}
.work:hover .work__fr svg{transform:scale(1.045)}
.work__fr svg{transition:transform 400ms var(--ease)}
}
/* 터치 기기 : hover 흉내 금지. 상시 노출. 탭은 오직 '이동'이다. */
@media (hover:none){
.work__ov{opacity:1}
}
@media (prefers-reduced-motion:reduce){
.work:hover .work__fr svg{transform:none}
}
/* 입력장치 3분기 비교 샘플 (art.html) */
.states{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:var(--gutter);row-gap:var(--s5)}
.state__lb{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;text-transform:uppercase;
color:var(--ink-3);border-top:var(--hair) solid var(--ink);padding-top:6px;margin-bottom:var(--s3)}
.state__lb b{color:var(--accent-ink);font-weight:600}
.state__fr{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);
border:var(--hair) solid var(--rule)}
.state__fr svg{width:100%;height:100%}
.state--touch .work__ov{opacity:1}
.state--hover .work__ov{opacity:1}
.state--rest .work__ov{opacity:0}
.state__no{font-size:var(--t-200);color:var(--ink-3);letter-spacing:var(--trk-200);margin-top:6px;line-height:1.6}
/* ---------- SNS 공유 ---------- */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
border-top:var(--hair) solid var(--ink);padding-top:var(--s3);margin-top:var(--s6)}
.share > .lb{flex:none;margin-inline-end:var(--s3)}
.sbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding-inline:12px;
background:none;border:var(--hair) solid var(--rule-2);cursor:pointer;color:var(--ink-2);
font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;text-transform:uppercase;
text-decoration:none;transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.sbtn svg{width:14px;height:14px;flex:none}
.sbtn:hover{border-color:var(--ink);color:var(--ink)}
.sbtn:active{background:var(--accent-bg)}
.sbtn[data-done="1"]{border-color:var(--accent);color:var(--accent-ink)}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--s4)}
.tag{font-size:var(--t-200);letter-spacing:var(--trk-200);color:var(--ink-2);
border:var(--hair) solid var(--rule);padding:3px 8px}
.tag:hover{border-color:var(--ink);color:var(--ink)}
.tag i{font-style:normal;color:var(--accent-ink);font-weight:600;margin-inline-end:2px}
@media (max-width:640px){
.sbtn span{display:none} /* 아이콘만 남는다 — 접근명은 aria-label 이 지킨다 */
.sbtn{padding-inline:0;width:38px;justify-content:center}
}
/* ---------- 상세 미리보기 블록 ---------- */
.detail{grid-column:1/-1;border-top:2px solid var(--ink);padding-top:var(--s5)}
.detail__body{max-width:68ch;margin-top:var(--s5)}
.detail__body p{margin-top:var(--s4);font-size:var(--t-400);line-height:1.85;letter-spacing:var(--trk-400);color:var(--ink-2)}
.detail__body p:first-child{margin-top:0}
.figwrap{margin-top:var(--s6)}
.figcap{margin-top:var(--s3);padding-top:var(--s2);border-top:var(--hair) solid var(--rule);
font-size:var(--t-200);color:var(--ink-3);letter-spacing:var(--trk-200);line-height:1.6}
/* 확대 가능 기표 : 커서 + 우상단 헤어라인 배지 */
.zoom{display:block;position:relative;width:100%;padding:0;border:var(--hair) solid var(--rule);
background:var(--paper-3);cursor:zoom-in;overflow:hidden}
.zoom > svg{display:block;width:100%;height:auto}
.zoom__badge{position:absolute;right:8px;top:8px;display:inline-flex;align-items:center;gap:5px;
height:26px;padding-inline:8px;background:var(--paper);border:var(--hair) solid var(--ink);
font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;text-transform:uppercase;
color:var(--ink);opacity:.85;transition:opacity var(--dur-1) var(--ease)}
.zoom:hover .zoom__badge{opacity:1;color:var(--accent-ink);border-color:var(--accent)}
.zoom__badge svg{width:11px;height:11px}
/* ---------- 라이트박스 ---------- */
dialog.lb{padding:0;border:0;max-width:100vw;max-height:100vh;width:100vw;height:100dvh;
background:var(--paper);color:var(--ink);overflow:hidden}
dialog.lb::backdrop{background:rgba(0,0,0,.86)}
.lb__stage{position:absolute;inset:56px 0 92px;display:flex;align-items:center;justify-content:center;
padding:0 var(--s5);touch-action:pinch-zoom}
.lb__img{max-width:100%;max-height:100%;display:block;background:var(--paper-2);
transition:transform var(--dur-2) var(--ease);transform-origin:center center}
.lb__img[data-zoom="2"]{transform:scale(2);cursor:zoom-out}
.lb__bar{position:absolute;left:0;right:0;top:0;height:56px;display:flex;align-items:center;
gap:var(--s3);padding-inline:var(--s4);border-bottom:var(--hair) solid var(--rule);
background:var(--paper);z-index:2}
.lb__no{font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;color:var(--ink-3);
font-variant-numeric:tabular-nums;text-transform:uppercase}
.lb__x{margin-inline-start:auto;width:44px;height:44px;min-width:44px;display:inline-flex;
align-items:center;justify-content:center;background:none;border:var(--hair) solid var(--ink);
cursor:pointer;color:var(--ink)}
.lb__x:hover{background:var(--ink);color:var(--paper)}
.lb__x svg{width:16px;height:16px}
.lb__nav{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
background:none;border:var(--hair) solid var(--rule-2);cursor:pointer;color:var(--ink-2)}
.lb__nav:hover{border-color:var(--ink);color:var(--ink)}
.lb__nav[disabled]{opacity:.35;cursor:default}
.lb__foot{position:absolute;left:0;right:0;bottom:0;min-height:92px;display:flex;align-items:center;
gap:var(--s4);padding:var(--s3) var(--s4);border-top:var(--hair) solid var(--rule);
background:var(--paper);z-index:2}
.lb__cap{flex:1;min-width:0;font-size:var(--t-200);color:var(--ink-2);letter-spacing:var(--trk-200);
line-height:1.6}
.lb__cap b{display:block;color:var(--ink);font-size:var(--t-300);font-weight:650;margin-bottom:3px}
.lb__load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:var(--t-100);letter-spacing:var(--tr-100);font-weight:600;text-transform:uppercase;
color:var(--ink-3);background:var(--paper)}
.lb__load[hidden]{display:none}
body.lb-open{position:fixed;left:0;right:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){ .lb__img{transition:none} }
@media (max-width:620px){
.lb__stage{inset:52px 0 104px;padding:0 var(--s3)}
.lb__bar{height:52px;padding-inline:var(--s3)}
.lb__foot{padding:var(--s3);gap:var(--s2)}
}
@media (max-width:860px){
.states{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
}
/* ============================================================
11. 멀티페이지 셸 보강
★ 규칙 : .wrap.grid 의 직계 자식은 예외 없이 열을 선언한다.
선언이 없으면 12분의 1 칼럼(1440px에서 ≈90px)으로 짜부라지고
한글이 한 자씩 세로로 쌓인다. 아래 한 줄이 그 사고를 막는다.
============================================================ */
.hero,.sec,.gbform{grid-column:1/-1}
/* 홈은 GNB 항목이 아니다 — 홈에서는 워드마크가 현재 위치를 말한다.
GNB 와 같은 2px 액센트 밑줄로 표시를 통일한다. */
.wordmark[aria-current="page"] b{box-shadow:inset 0 -2px 0 0 var(--accent);padding-bottom:1px}
/* --- 더 보기 링크 : 밑줄 2px 하나로 끝낸다 --- */
.more{display:inline-block;font-size:var(--t-200);font-weight:600;letter-spacing:var(--trk-200);
border-bottom:2px solid var(--ink);padding-bottom:2px;
transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.more:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}
/* --- 필터 버튼 묶음 : 좁아지면 줄바꿈한다 --- */
.filt-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* --- 아카이브 목록 : .idx 와 같은 규칙의 상단선 --- */
.arc__list{border-top:var(--hair) solid var(--ink)}
/* --- 공유 상태 메시지 · 3분기 샘플 칼럼 --- */
.share__msg{margin-inline-start:var(--s3);font-size:var(--t-100);letter-spacing:var(--tr-100);
font-weight:600;text-transform:uppercase;color:var(--accent-ink)}
.state{min-width:0}
/* .detail 은 이미 2px 상단선을 갖는다 — 마커가 선을 겹쳐 긋지 않게 한다 */
.detail > .marker{border-top:0;margin-bottom:var(--s5)}
/* --- 방명록 작성 폼 : 상자를 그리지 않는다. 1px 밑줄만 남긴다 --- */
.gbform{margin-bottom:var(--s8)}
.gbform__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
.gbform input,.gbform textarea{width:100%;background:none;border:0;outline:none;
border-bottom:var(--hair) solid var(--rule-2);padding:var(--s3) 0;color:var(--ink);
font-family:inherit;font-size:var(--t-300);line-height:1.6;letter-spacing:var(--trk-300);
transition:border-color var(--dur-1) var(--ease)}
.gbform textarea{margin-top:var(--s5);min-height:132px;resize:vertical;
border-bottom-width:2px;border-bottom-color:var(--ink)}
.gbform input:focus,.gbform textarea:focus{border-bottom-color:var(--accent)}
.gbform ::placeholder{color:var(--ink-3)}
.gbform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s4)}
.gbform__foot p{flex:1;min-width:min(100%,240px)}
.gbform__foot button{height:38px;padding-inline:var(--s6);flex:none}
@media (max-width:620px){
.gbform__row{grid-template-columns:minmax(0,1fr)}
.gbform__foot button{width:100%;justify-content:center}
}
/* ============================================================
11. 히어로 재배치 + 물감 컬러링 (2026-08-03 발주자 지시)
------------------------------------------------------------
① 인용문+스탯 블록을 대형 활자 위로 올렸다(에피그래프).
원래는 아래에 있어 border-top 으로 끊었으나, 위로 올라왔으므로 괘선을 아래로 뒤집는다.
② 인용문의 세 낱말에 물감 이름의 색을 입힌다.
젊음 = 블루(울트라마린) / 아름다움 = 오로라 / 사랑 = 크림슨 레이크
오로라는 단색으로 표현되지 않는 색이라 그라디언트로 처리하고,
background-clip 미지원 브라우저에서는 solid color 로 떨어진다.
============================================================ */
/* ---------- 히어로 메인 문장 (작업 노트 문장이 headline 이 된 경우) ----------
원래 headline 은 「그림을 그린다.」 7~8자였고 --t-1000(최대 148px)에 맞춰져 있었다.
새 문장은 「젊음, 아름다움, 사랑은」 12자 → 같은 크기로는 컨테이너를 넘는다.
1440 기준 본문 폭 ≈1352px, 12자 × 100px = 1200px 로 여유를 둔다. */
.hero__type--quote{
font-size:clamp(34px, 7.2vw, 100px);
line-height:1.04;
letter-spacing:var(--trk-900);
}
.hero__type--quote .l2{padding-inline-start:0}
/* 출처 — 대형 활자 바로 아래 붙는 작은 서명 */
.hero__lead--cite{
grid-column:1/-1;
margin-top:var(--s5);
font-size:var(--t-100);
letter-spacing:var(--tr-100);
font-weight:600;
text-transform:uppercase;
color:var(--ink-3);
max-width:none;
}
/* ---------- 물감 낱말 ---------- */
:root{
--pg-blue: #2447b5; /* Ultramarine on paper 7.4:1 */
--pg-crimson: #9b1b32; /* Crimson Lake on paper 8.1:1 */
--pg-aurora: #1f8a76; /* 오로라 폴백(단색) on paper 4.6:1 */
--pg-aurora-1:#1f9e86;
--pg-aurora-2:#2bb673;
--pg-aurora-3:#3f8fd6;
--pg-aurora-4:#7a5ad8;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--pg-blue: #8aa6ff;
--pg-crimson: #ff8095;
--pg-aurora: #5fd6b4;
--pg-aurora-1:#5fd6b4;
--pg-aurora-2:#7ee39a;
--pg-aurora-3:#7fb6ff;
--pg-aurora-4:#b79cff;
}
}
:root[data-theme="dark"]{
--pg-blue: #8aa6ff;
--pg-crimson: #ff8095;
--pg-aurora: #5fd6b4;
--pg-aurora-1:#5fd6b4;
--pg-aurora-2:#7ee39a;
--pg-aurora-3:#7fb6ff;
--pg-aurora-4:#b79cff;
}
.pg{font-weight:650}
.pg--blue{color:var(--pg-blue)}
.pg--crimson{color:var(--pg-crimson)}
.pg--aurora{color:var(--pg-aurora)}
/* 오로라만 그라디언트. 지원할 때만 투명 채움으로 바꾼다 —
@supports 없이 -webkit-text-fill-color 를 쓰면 미지원 환경에서 글자가 사라진다. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
.pg--aurora{
background-image:linear-gradient(96deg,
var(--pg-aurora-1) 0%, var(--pg-aurora-2) 34%,
var(--pg-aurora-3) 68%, var(--pg-aurora-4) 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
}
/* 고대비 선호 시에는 그라디언트를 걷어내고 단색으로 — 가독성이 우선이다. */
@media (prefers-contrast:more){
.pg--aurora{background-image:none;-webkit-text-fill-color:var(--pg-aurora)}
}
/* (이전 라운드의 .hero__aside--top / :has() 상단여백 규칙은 제거했다.
발주자 의도는 블록의 위아래 교체가 아니라 "어느 쪽이 메인 대형 활자인가" 였다.) */
/* 아래 소형 인용의 두 번째 문장 강조 — 원래 인덱스 였으나
data-i18n 이 textContent 를 통째 교체하므로 자식 을 둘 수 없다.
문장 전체를 감싸는 span 에 액센트를 준다(번역 후에도 강조가 유지된다). */
.hero__quote .ac{color:var(--accent-ink);font-style:italic}