/* gamechapters — 박물관 유물 라벨 · 누른 그린 + 틸. 설계 = 99_META/Migration_Plans/2026-09-16_gamechapters-visual-identity-design.md §3 · DESIGN.md 가 빌드 뒤 정본 */
@font-face{font-family:"Pretendard";src:url("/assets/fonts/PretendardVariable-subset.woff2") format("woff2");font-weight:45 920;font-display:swap}
:root{--ink:#0d1510;--wall:#132019;--raise:#1c2d24;--rule:#2c4236;--tint:#16352a;--paper:#eaf3ef;--mute:#9ab3a9;--accent:#2fd0a8;--accent-dim:#1d8a70;--mint:#7df2cf;--coral:#ff8a6b;--c-console:#c9d86b;--c-mobile:#b79cf0;--c-pc:#62b4dc;--r-apac:#4d8a84;--r-na:#5b7a9e;--r-eu:#8c6b8f;--r-latam:#9a8a5a;--r-mea:#7a6e88;--w:880px;--rail:56px}
*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}
img{max-width:100%;height:auto}
body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.65 Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;padding:0 16px;word-break:keep-all;overflow-wrap:break-word}
a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--accent-dim);text-underline-offset:3px}a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--wall);padding:8px 12px}.skip:focus{left:16px}
.wrap{max-width:var(--w);margin:0 auto}
/* 껍데기 */
header.top{display:flex;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
header.top .brand{font-weight:800;font-size:20px;letter-spacing:-.01em;text-decoration:none}
header.top nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
header.top nav a,header.top nav summary,header.top details.menu>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 9px;color:var(--mute);text-decoration:none;white-space:nowrap;font-size:13px;cursor:pointer;list-style:none}
header.top nav a[aria-current=page]{color:var(--paper);box-shadow:inset 0 -2px var(--accent)}
header.top details{position:relative}header.top details:not([open])>ul{display:none}header.top details ul{position:absolute;right:0;top:44px;background:var(--wall);border:1px solid var(--rule);padding:8px;margin:0;list-style:none;min-width:200px;z-index:2}
header.top details li a{display:flex;min-height:44px;align-items:center}
main{display:block}
main.read>p:not(.k):not(.lead):not(.meta),main.read>h2,main.read>h3,main.read>ul,main.read>ol:not(.tl-hero),main.read>blockquote,main.read>.callout{max-width:42em}
main.read>.lead{max-width:34em}
h1{font-size:clamp(26px,5vw,40px);line-height:1.15;letter-spacing:-.02em;margin:28px 0 10px}
h1 .sub{display:block;font-size:.55em;font-weight:500;color:var(--mute);letter-spacing:0;margin-top:6px}
h2{font-size:22px;margin:36px 0 10px}h3{font-size:18px;margin:26px 0 8px}
.spot{position:relative}
.k{font-size:13px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase}
.meta{color:var(--mute);font-size:14px}
.lead{font-size:19px;line-height:1.6;margin:14px 0 22px}
/* 라벨 카드 — 한 모양 */
.label{display:grid;grid-template-columns:minmax(72px,auto) 1fr;gap:4px 18px;background:var(--wall);border:1px solid var(--rule);padding:16px 18px;margin:22px 0}
.label .yr{grid-row:1/span 4;font-weight:250;font-variant-numeric:tabular-nums;font-size:clamp(40px,9vw,64px);line-height:1;color:var(--accent);letter-spacing:-.03em}
.label .yr small{font-size:.4em;font-weight:300;margin-left:.15em}
.label .t{font-size:19px;font-weight:700;line-height:1.3}.label .t a{text-decoration:none}.label .t .sub{display:block;font-size:15px;font-weight:500;color:var(--mute)}
.label h1.t{font-size:19px;line-height:1.3;letter-spacing:0;margin:0}
.label .rel,.label .src1{font-size:14px;color:var(--mute)}.label .rel a{color:var(--paper)}
.label .take{margin:8px 0 0;padding-left:14px;position:relative;font-size:16px}.label .take::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.label .ok{grid-column:1/-1;font-size:12px;color:var(--mute);letter-spacing:.04em;margin-top:6px}
.label.row{grid-template-columns:72px 1fr;padding:10px 14px;margin:0;border-width:0 0 1px;background:none}.label.row .yr{font-size:22px;grid-row:auto;font-weight:300}
.label.big .yr{font-size:clamp(56px,14vw,96px)}
/* 큰 라벨은 연도가 배너 한 줄 — 아니면 96px 활자가 auto 열 폭을 절반 넘게 끌고 간다 (critique 2026-09-16 #3) */
.label.big .yr{grid-row:1;grid-column:1/-1}
.label.big .t,.label.big .rel,.label.big .src1,.label.big .take{grid-column:1/-1}
/* 카드 페이지 이웃 */
.neigh{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.neigh a{display:block;background:var(--wall);border:1px solid var(--rule);padding:12px 14px;text-decoration:none}.neigh .k{display:block;margin-bottom:4px}.neigh a:only-child{grid-column:1/-1}
@media (max-width:600px){.label:not(.row){grid-template-columns:1fr}.label:not(.row) .yr{grid-row:auto}.label:not(.row) .ok{grid-column:auto}.neigh{grid-template-columns:1fr}}
/* rail */
div.rail{position:fixed;left:max(8px,calc((100vw - var(--w))/2 - var(--rail)));top:120px;bottom:120px;width:2px;background:var(--rule)}
.rail i{position:absolute;left:0;top:0;width:2px;height:100%;background:var(--accent);transform:scaleY(var(--p,0));transform-origin:top;transition:transform .2s linear}
.rail .flag{position:absolute;left:-6px;width:14px;height:14px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .4s}
.rail .flag.on{opacity:1}
.rail .tick{position:absolute;left:-3px;width:8px;height:2px;background:var(--mute)}
.rail-note{font-size:14px;color:var(--mute);background:var(--wall);border:1px solid var(--rule);padding:8px 12px;margin:0 0 16px}
@media (max-width:1040px){div.rail{left:0;top:0;bottom:auto;right:0;width:auto;height:3px}.rail i{height:3px;width:100%;transform:scaleX(var(--p,0));transform-origin:left}.rail .flag{top:0;left:auto;width:3px;height:3px;border-radius:0;background:var(--paper)}.rail .tick{display:none}}
@media (prefers-reduced-motion:reduce){.rail i,.rail .flag{transition:none}html{scroll-behavior:auto}}
/* HTML hero 연표 */
.tl-hero{list-style:none;padding:0;margin:18px 0 26px;border-left:2px solid var(--rule)}
.tl-hero li{position:relative;padding:6px 0 6px 18px}.tl-hero li::before{content:"";position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.tl-hero time{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:300;margin-right:10px}
@media (min-width:760px){.tl-hero{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-left:0;border-top:2px solid var(--rule);padding-top:14px}.tl-hero li{padding:0 6px}.tl-hero li::before{top:-20px;left:0}.tl-hero li:nth-child(even){margin-top:38px}.tl-hero time{display:block}}
/* 콜아웃 */
.callout{background:var(--wall);border:1px solid var(--rule);padding:14px 18px;margin:24px 0}.callout .k{margin:0 0 8px}.callout p{margin:4px 0}
.callout.tl3 p:not(.k){padding-left:26px;position:relative;counter-increment:tl3}.callout.tl3{counter-reset:tl3}.callout.tl3 p:not(.k)::before{content:counter(tl3);position:absolute;left:0;top:.15em;width:18px;height:18px;border:1px solid var(--accent);border-radius:50%;font-size:11px;line-height:18px;text-align:center;color:var(--accent)}
.callout.rule{border-top:2px solid var(--accent)}
details.tl3{margin:24px 0}details.tl3 summary{cursor:pointer;color:var(--mute);min-height:44px;display:flex;align-items:center}
details.tl3 summary::before{content:"";display:inline-block;width:8px;height:8px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(45deg);margin-right:10px}
details.tl3[open] summary::before{transform:rotate(-135deg)}
/* 전환 룰 — markdown.py 현재 산출(순수 ul·details.tl3>ul·callout h4)을 다음 플랜 Task 전까지 스타일링 (critique 2026-09-16) */
ul.tl,details.tl3>ul{list-style:none;padding:0;margin:0}
.callout h4{font-size:13px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;font-weight:600;margin:0 0 8px}
/* 사진 · 표 · 출처 */
figure.photo{margin:26px 0}figure.photo img{width:100%;display:block;border:1px solid var(--rule)}figure.photo figcaption{font-size:13px;color:var(--mute);margin-top:8px}figure.photo figcaption a{color:var(--mute)}
figure.chart{overflow-x:auto;margin:8px 0 18px}figure.chart svg{width:100%;min-width:720px;height:auto;display:block;border:1px solid var(--rule)}.note{font-size:16px;line-height:1.65;margin:0 0 4px;max-width:42em}.callout.pm p:not(.k){padding-left:16px;position:relative}.callout.pm p:not(.k)::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* 차트 v2 (설계 2026-09-18 §8 · 결정 10·14) — KPI 행·CAGR/판 표는 HTML(모바일에서 읽히는 층) · SVG 는 가로 스크롤 · 3색은 .c-* 헤더와 figure.chart 안에서만 · details.sub 는 details.tl3 규칙 재사용 */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:16px 0}
.kpi .cell{background:var(--wall);padding:12px 14px;display:flex;flex-direction:column;gap:2px}.kpi .k{font-size:12px;color:var(--mute);letter-spacing:.04em}.kpi .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.kpi .s{font-size:13px;color:var(--mute)}.yoy{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;margin:12px 0 20px}table.cagr,table.vintage{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums;margin:0}
table.cagr caption,table.vintage caption{text-align:left;font-size:12px;color:var(--mute);letter-spacing:.06em;padding:0 0 6px}
table.cagr th,table.vintage th,table.cagr td,table.vintage td{border-bottom:1px solid var(--rule);padding:8px 10px;text-align:right;white-space:nowrap}table.cagr tbody th,table.vintage tbody th,table.cagr thead th:first-child,table.vintage thead th:first-child{text-align:left;color:var(--mute);font-weight:400}
table.cagr thead th{font-weight:600}.c-console{color:var(--c-console)}.c-mobile{color:var(--c-mobile)}.c-pc{color:var(--c-pc)}table.vintage small{color:var(--mute);font-size:11px}table.vintage tbody.plat th[colspan]{color:var(--mute);font-size:12px;letter-spacing:.06em;padding-top:14px;text-align:left}
details.sub{margin:4px 0 28px;border-top:1px solid var(--rule)}details.sub summary{cursor:pointer;color:var(--mute);min-height:44px;display:flex;align-items:center;list-style:none}details.sub summary::-webkit-details-marker{display:none}
details.sub summary::before{content:"";display:inline-block;width:8px;height:8px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(45deg);margin-right:10px}details.sub[open] summary::before{transform:rotate(-135deg)}
.cite{font-size:12px;color:var(--mute);letter-spacing:.04em}
@media (max-width:600px){.kpi .v{font-size:17px}}
table{border-collapse:collapse;width:100%;margin:18px 0;font-size:15px}th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--rule)}th{color:var(--mute);font-weight:600}
.src ul{list-style:none;padding:0}.src li{padding:8px 0;border-bottom:1px solid var(--rule);font-size:15px}.src .k{margin-left:8px;text-transform:none}.src .dom{color:var(--mute);font-size:13px;margin-left:8px;overflow-wrap:anywhere}
.src .ref{color:var(--paper);font-weight:600;margin-right:8px}.src .ref a{text-decoration:none}
.src1n{font-style:italic}
.series-nav{display:flex;justify-content:space-between;gap:12px;margin:28px 0}.series-nav a{display:inline-flex;min-height:44px;align-items:center;font-weight:600}
.credits{font-size:13px;color:var(--mute);margin:20px 0 0}
/* 홈 */
.chips{list-style:none;padding:0}.chips a{display:inline-flex;min-height:32px;align-items:center;border:1px solid var(--rule);border-radius:999px;padding:0 10px;margin:0 6px 6px 0;font-size:13px;color:var(--mute);text-decoration:none}
footer{border-top:1px solid var(--rule);margin-top:56px;padding:22px 0;color:var(--mute);font-size:13px}
/* 이미지 중심 홈 (2026-09-19 · 설계 docs/designs/2026-09-19_gamechapters-image-first-home-design.md) — 카드 모양 하나(.card) + big 변형 하나 */
.wrap.wide{max-width:none}   /* 아웃스탠딩 실측 2026-09-27 · W-1 — `.layout` max-width:none(모든 폭에서 뷰포트 폭과 동일) · 레일 셸 페이지(홈·목록)는 캡을 두지 않는다. 종전 1280px */
.card{margin:0}
.card .frame{display:block;border:1px solid var(--rule);background:var(--wall);aspect-ratio:1.9/1;overflow:hidden}   /* 16/9→1.9/1(W-3) — 아웃스탠딩 원본(900×473) 실측. 롤러 슬라이드 박스(450×253·300×168)는 그대로 둔다 */
.card .frame img{width:100%;height:100%;object-fit:cover;display:block}
.card .frame.empty{min-height:0}
.card .cat{font-size:13px;color:var(--mute);margin:10px 0 2px;letter-spacing:.02em}
.card h3{font-size:19px;line-height:1.3;margin:0 0 6px;letter-spacing:-.01em}
.card h3 a{text-decoration:none}.card h3 a:hover{text-decoration:underline}
.card .one{margin:0 0 8px;font-size:15px;opacity:.92}
.card .ok{font-size:13px;color:var(--mute);margin:0}
.evidence{margin:6px 0 0;font-size:13px}.evidence a{display:inline-flex;min-height:28px;align-items:center;border:1px solid var(--rule);border-radius:999px;padding:0 8px;margin:0 6px 4px 0;color:var(--mute);text-decoration:none}.evidence a:hover{color:var(--paper);border-color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px;margin:32px 0;border-top:1px solid var(--rule);padding-top:24px}   /* 아웃스탠딩 실측 2026-09-27 · W-1 — 카드 그리드 열 수 2/3/4(브레이크포인트는 아래 media). 종전 auto-fill minmax(300px,1fr), 모바일도 2열 */
@media (min-width:1160px){.grid{grid-template-columns:repeat(3,1fr)}}   /* 아웃스탠딩 실측 2026-09-27 · W-1 — 2→3열 전환점(실측 1155~1160px 사이) */
@media (min-width:1610px){.grid{grid-template-columns:repeat(4,1fr)}}   /* 아웃스탠딩 실측 2026-09-27 · W-1 — 3→4열 전환점(실측 1605~1610px 사이) */
footer.site{border-top:1px solid var(--rule);margin-top:48px;padding:20px 0 40px;color:var(--mute);font-size:14px}
footer.site .line{margin:0 0 6px;color:var(--paper)}
footer.site p{margin:0}
header.top details.menu{display:none}
/* 최종 리뷰 — 카테고리 9 는 ≈860px 필요 · 768px(아이패드 세로)에서 두 줄로 꺾였다 */
@media (max-width:860px){header.top nav.cats>a{display:none}header.top details.menu{display:block}}
/* 홈 v2 (2026-09-19 · 설계 docs/designs/2026-09-19_gamechapters-home-v2-design.md) — 정의 한 줄 · 피처드 롤러 · 시장 스냅샷 · 카테고리 띠. 점 8px 는 틸 「면」·둥근 모서리 예외 */
h1.def{font-size:14px;font-weight:500;color:var(--mute);letter-spacing:.01em;margin:8px 0 12px}
.snapshot{margin:28px 0 0;border-top:1px solid var(--rule);padding-top:20px}
.snapshot h2{margin:0 0 10px}
.snapshot .insight{font-size:16px;line-height:1.5;margin:0 0 8px;max-width:none}
.snapshot .take{margin:0 0 16px;padding-left:14px;position:relative;font-size:16px;color:var(--paper)}
.snapshot .take::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.snapshot .charts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:1000px){.snapshot .charts{grid-template-columns:1fr}}
.snapshot .charts figure{margin:0;border:1px solid var(--rule);padding:12px;background:var(--wall)}
.snapshot .charts figure.bars{grid-column:1/-1}
@media (min-width:1610px){.snapshot .charts{grid-template-columns:1fr 1fr 1.3fr}.snapshot .charts figure.bars{grid-column:auto}}   /* 아웃스탠딩 실측 2026-09-27 · W-1b — W-1 이 `.wrap.wide` 캡(1280px)을 없앤 뒤 1920px 에서 스냅샷 차트가 과하게 커졌다(donut 795×460·bars 1605×436, Ryan 지적 09-27). 카드 4열 전환점(1610)과 같은 값부터 세 차트를 한 줄로(작은 둘+긴 막대) — 실측 1610→383/498·1920→477/620px(SVG 는 viewBox 기반이라 축소해도 텍스트 겹침 없음, playwright bbox 교차 검사 0건). ⚠️ 뒤(source order)에 둘 것 — 무조건 규칙 `figure.bars{grid-column:1/-1}` 보다 앞에 두면 동일 특이도라 커스케이드에서 이 규칙이 진다(1차 시도에서 실측 재현 실패로 발견) */
.snapshot .charts svg{width:100%;height:auto;display:block;font-family:inherit}
.snapshot .charts figcaption{font-size:14px;margin:0 0 6px}.snapshot .charts figcaption span{color:var(--mute);margin-left:8px}
.snapshot .charts p.cagr{font-size:13px;color:var(--mute);margin:0 0 6px}
/* 시각만 숨김 — DOM·접근성 트리에는 남는다 (설계 §8 · display:none 금지) */
.snapshot .charts figure{position:relative;overflow:hidden}   /* 숨긴 legend 표는 width:1px 를 무시하고 최소 폭(~379px)이 되어 절대 위치 박스가 스크롤 폭을 늘린다(1024px +29px · Task 10 실측) — 가장 가까운 위치 조상이 잘라 낸다 */
.snapshot .charts table.legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;border-collapse:collapse;font-size:14px}
.snapshot .charts table.legend th,.snapshot .charts table.legend td{text-align:left;padding:3px 10px 3px 0;font-weight:400;border-bottom:1px solid var(--rule)}
.snapshot .charts table.legend thead th{color:var(--mute);font-size:12px}
.snapshot .charts table.legend i{width:12px;height:12px;display:inline-block;vertical-align:-1px;margin-right:8px}
/* ≤720px — SVG 글자(밖 라벨 .lab·막대 값 .val·연도 .yr·가운데 캡션+YoY .ctr.sub)를 끄고 표(table.legend)를 보인다 · 링 안 % 와 가운데 큰 값(.ctr)은 남는다 (홈 v4 설계 §1.4·F2 · 기본 규칙보다 뒤에 둘 것) */
@media (max-width:720px){.snapshot .charts svg .lab,.snapshot .charts svg .val,.snapshot .charts svg .yr,.snapshot .charts svg .ctr.sub,.snapshot .charts svg .usd{display:none}
.snapshot .charts table.legend{position:static;width:auto;height:auto;margin:8px 0 0;overflow:visible;clip:auto;white-space:normal}}
@media (max-width:720px){.snapshot .charts figure{overflow:visible}}
.snapshot .src{font-size:13px;color:var(--mute);margin:10px 0 0}
.snapshot form.fx{margin:10px 0 0;font-size:13px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:var(--paper)}
.snapshot form.fx input{width:6.5em;background:var(--wall);color:var(--paper);border:1px solid var(--rule);padding:4px 6px;font:inherit;font-variant-numeric:tabular-nums}
.snapshot form.fx button{font:inherit;background:var(--wall);color:var(--paper);border:1px solid var(--rule);padding:4px 10px;cursor:pointer}
.snapshot form.fx button:hover{border-color:var(--accent)}
.snapshot form.fx output{color:var(--mute)}
.snapshot .fxnote{font-size:13px;color:var(--mute);margin:6px 0 0}
.snapshot .stale{font-size:13px;color:var(--accent);margin:8px 0 0}
.snapshot .more{display:inline-block;margin-top:10px;font-size:14px}
/* 홈 v5 (2026-09-22 · docs/designs/2026-09-22_gamechapters-home-v5-design.md) — 피처드 2+4 · 섹션 연속 · 얼굴 그리드 · 역사 한 줄 */
.home-sec{margin:36px 0 0;border-top:1px solid var(--rule);padding-top:20px}.home-sec h2{margin:0 0 4px}.home-sec h2 a{text-decoration:none}
.home-sec .grid{margin:12px 0 0;border-top:0;padding-top:0}.home-sec .more{display:inline-block;margin-top:12px;font-size:14px;color:var(--mute)}
.home-sec#news .weekly{margin:12px 0 0;font-size:14px;color:var(--mute)}.home-sec#news .weekly a{color:var(--mute)}
.badge{display:inline-block;font-size:12px;letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent-dim);padding:2px 8px;margin:10px 0 0}
.fgroup h3{font-size:13px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;margin:14px 0 8px}
.faces{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1040px}   /* 아웃스탠딩 실측 2026-09-27 · W-1 — `.wrap.wide` 캡 제거로 컨테이너가 1600px대까지 넓어지면 그룹 인원이 6명 미만일 때 빈 트랙이 그대로 늘어나 큰 검은 여백으로 보였다(1920 실측 · 국내 1명·해외 3명). 셀 크기를 종전 1280px 캡 시절 값(≈160px)으로 상한 */
.face{display:block;text-decoration:none;color:var(--paper)}.face img,.face .ph{width:100%;aspect-ratio:1;object-fit:cover;display:block;border:1px solid var(--rule);background:var(--wall)}
.face b{display:block;font-size:14px;margin-top:8px}.face.typo b{color:var(--mute)}
.history-rail{margin:36px 0 0;border-top:1px solid var(--rule);padding-top:16px}.history-rail h3{font-size:13px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;margin:0 0 10px}
.history-rail ol{display:grid;grid-template-columns:repeat(var(--eras),1fr);list-style:none;margin:0;padding:0;row-gap:18px}.history-rail li{position:relative}.history-rail li::before{content:"";position:absolute;left:0;right:0;top:5px;border-top:1px solid var(--rule)}
.history-rail .era{display:block;position:relative;min-height:36px;text-decoration:none;color:var(--mute);font-size:12px}.history-rail .dot{display:block;width:11px;height:11px;border-radius:50%;border:1px solid var(--rule);background:var(--ink);position:relative;z-index:1}.history-rail .on .dot{background:var(--accent);border-color:var(--accent)}.history-rail .yr{display:block;margin-top:6px}.history-rail .key{display:block;margin-top:2px;font-size:11px;color:var(--mute);white-space:nowrap}.history-rail a.era:hover,.history-rail a.era:focus-visible{color:var(--paper)}.history-rail a.era:hover .key,.history-rail a.era:focus-visible .key{color:var(--paper)}
.genre-history{margin:40px 0 0;border-top:1px solid var(--rule);padding-top:16px}.genre-history .era-block{margin:28px 0 0}.genre-history .on{margin:6px 0}.genre-history .chip{display:inline-block;margin:0 6px 4px 0}
.genre-rail{display:grid;grid-template-columns:repeat(var(--eras),1fr);list-style:none;margin:0 0 8px;padding:0;row-gap:18px}.genre-rail li{position:relative}.genre-rail li::before{content:"";position:absolute;left:0;right:0;top:5px;border-top:1px solid var(--rule)}.genre-rail .era{display:block;position:relative;min-height:36px;text-decoration:none;color:var(--mute);font-size:12px}.genre-rail .dot{display:block;width:11px;height:11px;border-radius:50%;border:1px solid var(--rule);background:var(--ink);position:relative;z-index:1}.genre-rail .yr{display:block;margin-top:6px}.genre-rail .key{display:block;margin-top:2px;font-size:11px;white-space:nowrap}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}.contrast .side h4{margin:0 0 6px;font-size:13px;color:var(--mute)}.insight .badge-ours{font-size:11px;color:var(--mute);border:1px solid var(--rule);padding:1px 6px;margin-left:6px;white-space:nowrap}
@media (max-width:720px){.contrast{grid-template-columns:1fr}.genre-rail{grid-template-columns:repeat(auto-fit,minmax(52px,1fr));column-gap:4px}.genre-rail .key{font-size:10px}}/* 장르사 칸 수는 장르마다 달라 고정 열 대신 auto-fit · 슈터 11칸이 390 에서 한 줄이면 칸 27~36px 에 연도·키워드가 붙었다(2026-09-25 render-qa 간격 0px) */
@media (max-width:1000px){.faces{grid-template-columns:repeat(3,1fr)}}
.axis{display:inline-block;font-size:12px;letter-spacing:.06em;color:var(--accent);margin:10px 8px 0 0}.kr{display:inline-block;font-size:12px;color:var(--mute);border:1px solid var(--rule);padding:1px 6px;margin:10px 0 0}
.card .frame.logo{background:var(--paper)}.card .frame.logo img{object-fit:contain;padding:6%;box-sizing:border-box;max-height:100%}
/* 홈 v6 (2026-09-22 · 설계 docs/designs/2026-09-22_gamechapters-home-v6-rail-design.md) — 좌측 레일 셸 · 상단 검색+티커 · 피처드 롤러 12. 토큰만 · 새 색 없음 */
header.top.rail{display:grid;grid-template-columns:auto minmax(200px,320px) 1fr;gap:18px;align-items:center;flex-wrap:nowrap}
header.top.rail details.menu{grid-column:1/-1}
header.top form.search{position:relative;margin:0;min-width:0}
header.top form.search input{width:100%;min-height:40px;background:var(--wall);color:var(--paper);border:1px solid var(--rule);padding:0 12px;font:inherit;font-size:14px}
header.top form.search input:focus{outline:2px solid var(--accent);outline-offset:1px}
header.top .results{position:absolute;left:0;right:0;top:44px;margin:0;padding:6px;list-style:none;background:var(--wall);border:1px solid var(--rule);z-index:3}
header.top .results li a{display:flex;gap:10px;min-height:40px;align-items:center;padding:0 8px;text-decoration:none;color:var(--paper);font-size:14px}
header.top .results li a .k{color:var(--mute);font-size:12px;min-width:4.5em}
header.top .results li[aria-selected=true] a,header.top .results li a:hover{background:var(--ink)}
header.top .results li.none{color:var(--mute);font-size:13px;padding:8px}
.ticker{overflow:hidden;height:40px;border:1px solid var(--rule);background:var(--wall);padding:0 12px;min-width:0}
.ticker ul{margin:0;padding:0;list-style:none;animation:tick calc(var(--n)*4s) steps(var(--n)) infinite}
.ticker[style="--n:1"] ul{animation:none}
.ticker li{height:40px;line-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.ticker li a{color:var(--paper);text-decoration:none}.ticker li a:hover{text-decoration:underline}
.ticker:hover ul{animation-play-state:paused}
@keyframes tick{to{transform:translateY(calc(var(--n)*-40px))}}
.shell{display:grid;grid-template-columns:255px 1fr;gap:28px;align-items:start}   /* 아웃스탠딩 실측 2026-09-27 · W-1 — 레일 폭 255px(종전 200px) */
aside.nav{position:static;padding-top:24px}
aside.nav .grp{margin:0 0 22px}
aside.nav h2{font-size:13px;color:var(--mute);font-weight:600;margin:0 0 4px;letter-spacing:.02em}
aside.nav ul{list-style:none;margin:0;padding:0}
aside.nav li a{display:flex;align-items:center;min-height:44px;color:var(--paper);text-decoration:none;font-size:15px}
aside.nav li a:hover{text-decoration:underline}
aside.nav li a[aria-current=page]{box-shadow:inset 0 -2px var(--accent)}
.channels{display:flex;gap:4px;flex-wrap:wrap;list-style:none;margin:8px 0 0;padding:0}
.channels a{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;color:var(--mute)}
.channels a:hover,.channels a:focus{color:var(--accent)}
.channels svg{width:20px;height:20px;fill:currentColor}
header.top details.menu .grp{margin:0 0 10px}header.top details.menu h2{font-size:12px;color:var(--mute);margin:8px 0 2px}header.top details.menu ul{padding:0}
header.top.rail details.menu .grp ul,header.top.rail details.menu ul.channels{position:static;right:auto;top:auto;min-width:0;background:none;border:0;padding:0;margin:0}
/* 롤러 → 가운데 강조 캐러셀(W-2 · 아웃스탠딩 실측 2026-09-27) — 고정 450×253(≤900px 300×168) · 가운데 scale(1)+글로우 · 이웃 scale(.9)+opacity(.4 · W-3 존재감 보강) · 트랙 이동 500ms · 강조 전환은 하나가 아니다(li.slide=transform · img=opacity,box-shadow) · 점(dots) 폐기 */
.roller{position:relative;margin:8px 0 0;border-top:1px solid var(--rule);padding:30px 0;background:var(--wall);--slide-w:450px;--slide-h:253px;--glow:0 0 25px 10px var(--mute)}   /* 가로 띠 배경(W-3 존재감 보강) — 페이지 배경(--ink)보다 한 단계 밝은 기존 토큰 · 새 색 없음 · 위아래 패딩 30px 은 그대로 */
/* Fix round 1 #3 — 3장 폭 캡을 없앴다(스펙 §8(c). 넓은 화면은 두 번째 이웃까지 보여야 한다). 클론이 실 전체를
   두 벌 복제해 두므로(위 [클론N][실N][클론N]) 어느 쪽으로도 N-1 장 깊이까지 항상 채워져 있어 가장자리가 비지 않는다 —
   실측(1920px)으로 확인했다(보고서 Fix round 1 §확인) */
.roller .stage{position:relative;overflow:hidden}
.roller .slides{display:flex;list-style:none;margin:0;padding:0;transition:transform .5s ease;will-change:transform}
/* Fix round 1 #1 — transition 을 transform/opacity/box-shadow 로 좁혔다(종전 all). --slide-w/--slide-h 가
   900px 분기에서 바뀔 때 "all" 이면 width/height 도 .3s 애니메이션 대상이 돼, 리사이즈 직후 JS 가 읽는
   offsetWidth 가 그 중간값을 잡는다(실측 1280→600 에서 가운데 중심이 1504px 어긋났다) — 폭 변경은 즉시, 강조 전환만 애니메이션 */
.roller li.slide{flex:0 0 var(--slide-w);width:var(--slide-w);height:var(--slide-h);position:relative;transform:scale(.9);transition:transform .3s ease;border-radius:0}
.roller li.slide.active{transform:scale(1);z-index:2}
.roller li.slide .frame{position:absolute;inset:0;display:block;background:var(--ink);overflow:hidden}
.roller li.slide .frame img{width:100%;height:100%;object-fit:contain;display:block;opacity:.4;transition:opacity .3s ease,box-shadow .3s ease;border-radius:0}   /* .2→.4(W-3) — 검은 배경(--ink) 위에서 이웃이 배경에 묻혔다(Ryan 09-27) · 새 띠 배경(--wall)과 겹치니 .35~.45 안에서 재조정 */
.roller li.slide.active .frame img{opacity:1;box-shadow:var(--glow)}
/* --ink 의 rgb 값(21,18,15) — 그라데이션·반투명 오버레이는 var() 색을 못 섞어(rgba 함수 인자로 커스텀 프로퍼티 문자열을 못 쓴다) 직접 푼다. 새 색이 아니라 --ink 그대로다 */
/* padding-right 110px — 가운데 슬라이드의 카운터+토글(hud, 우하단)과 겹치지 않을 폭. 실측(390px)에서 처음엔 제목 마지막 글자가 hud 밑에 깔렸다 */
.roller li.slide .cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 110px 10px 12px;font-size:15px;font-weight:700;color:var(--paper);background:linear-gradient(transparent,rgba(13,21,16,.85));display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;opacity:.35;transition:opacity .3s ease}
.roller li.slide.active .cap{opacity:1}
.roller .hud{position:absolute;bottom:10px;right:calc(50% - (var(--slide-w)/2) + 5px);z-index:3;display:flex;align-items:center;gap:6px}
.roller .hud .count{margin:0;font-size:.6em;color:var(--paper);background:rgba(13,21,16,.6);padding:2px 5px;border-radius:10px}
.roller .hud .toggle{position:static;width:44px;height:44px;background:rgba(13,21,16,.6);color:var(--paper);border:0;border-radius:50%;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.roller .hud .toggle:hover,.roller .hud .toggle:focus-visible{background:var(--accent);color:var(--ink)}
/* 일시정지 아이콘 — 글리프(⏸/▶) 대신 CSS 도형(두 막대 · 삼각형). data-state 로 하나만 보인다(W-3 — 폰트에 없는 글리프가 두부로 렌더됐다) */
.roller .hud .toggle .ic-pause{display:flex;gap:4px}
.roller .hud .toggle .ic-pause::before,.roller .hud .toggle .ic-pause::after{content:"";width:4px;height:14px;background:currentColor}
.roller .hud .toggle .ic-play{display:none;width:0;height:0;margin-left:2px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.roller .hud .toggle[data-state="pause"] .ic-pause{display:none}
.roller .hud .toggle[data-state="pause"] .ic-play{display:block}
.roller button.prev,.roller button.next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:var(--ink);color:var(--accent);border:1px solid var(--accent);cursor:pointer;font:inherit;font-size:22px;line-height:1;z-index:3}
.roller button.prev{left:calc(50% - (var(--slide-w)/2) - 54px)}
.roller button.next{right:calc(50% - (var(--slide-w)/2) - 54px)}
.roller button.prev:hover,.roller button.prev:focus-visible,.roller button.next:hover,.roller button.next:focus-visible{background:var(--accent);color:var(--ink)}
@media (max-width:900px){.roller{--slide-w:300px;--slide-h:168px;--glow:0 0 10px 5px var(--mute)}.roller button.prev{left:0}.roller button.next{right:0}}
@media (prefers-reduced-motion:reduce){.roller .slides,.roller li.slide,.roller li.slide .frame img,.roller li.slide .cap{transition:none}}
@media (max-width:900px){aside.nav{display:none}.shell{grid-template-columns:1fr}header.top.rail{grid-template-columns:auto 1fr auto}header.top.rail .ticker{grid-column:1/-1}header.top.rail details.menu{grid-column:1/-1;display:block;position:static}}   /* 아웃스탠딩 실측 2026-09-27 · W-1 — 레일 표시 전환점 900/901px(종전 860px) */
@media (max-width:720px){.history-rail ol{grid-template-columns:repeat(7,1fr)}.history-rail .key{font-size:10px}}/* 13 칸 = 7+6 두 줄(6 이면 6+6+1 외톨이) · 키워드 10px = 칸 51px 에 5자(「부분유료화」) 50px 가 붙어 보여서(390 실측 간격 1.14px · 2026-09-23 render-qa) */
@media (max-width:600px){.ticker{padding:0 8px}.ticker li{font-size:13px}}
@media (prefers-reduced-motion:reduce){.ticker ul{animation:none}}
/* 최종 리뷰 픽스 (2026-09-22) */
.shell>main{min-width:0}   /* F1 — figure.chart svg{min-width:720px} 등 넓은 자식이 셸을 못 넓히게 하드 가드. 프로즈 캡은 안 둔다 — 넘치면 자기 안에서 가로 스크롤 */
header.top .results .k{text-transform:none}   /* F2 — 전역 .k{text-transform:uppercase} 가 검색 드롭다운의 한글 label 을 대문자화하지 않게 */
header.top details.menu>summary::-webkit-details-marker{display:none}   /* F4 — 레일 헤더 메뉴 요약의 webkit 기본 삼각 마커 제거 */
header.top details.menu .grp a{text-decoration:none}   /* F4 — 아코디언 항목 링크는 밑줄 없이(aside.nav li a 와 같은 결) */
.preview{position:sticky;top:0;background:var(--accent);color:var(--ink);padding:6px 12px;font-size:13px;z-index:5}   /* build --preview 띠 (심사 개선 A-5) */
/* 도시에 A안 → 구조 C — 결론 먼저 · 고정 목차 · 장(=항목) · 번호 각주 · 미확인·상충 · 등급별 출처 (도시에 재설계 §3 · 심층·교차 설계 §2·§3)
   구간 = ≥1600 넓은 모니터 · 1280~1599 데스크톱 · 720~1279 노트북·태블릿 · <720 휴대폰. 토큰만 · 틸은 숫자·표식 · 모서리 0 */
header.top.dos-top details.menu{display:block}   /* 도시에 페이지엔 aside.nav 가 없다 — 사이트 메뉴는 폭과 관계없이 헤더 하나 */
@media (min-width:901px){header.top.rail.dos-top{grid-template-columns:auto minmax(200px,320px) 1fr auto}header.top.dos-top details.menu{grid-column:auto;justify-self:end}header.top.dos-top details.menu[open]{grid-column:1/-1;justify-self:stretch}}
/* 다듬기 #9(2026-09-30) — ≤900 에서 공용 header.top.rail 규칙(브랜드+검색 첫 줄 · 티커 둘째 줄 · 메뉴 혼자 셋째 줄)을
   도시에 헤더만 따로 접는다. 메뉴를 브랜드 줄 오른쪽 끝으로 올려 한 줄을 줄인다(dos-top 3클래스라 specificity 로 이긴다) */
@media (max-width:900px){header.top.rail.dos-top{grid-template-columns:1fr auto}
 header.top.rail.dos-top .brand{grid-column:1;grid-row:1}
 header.top.rail.dos-top details.menu{grid-column:2;grid-row:1;justify-self:end}
 header.top.rail.dos-top form.search{grid-column:1/-1;grid-row:2}
 header.top.rail.dos-top .ticker{grid-column:1/-1;grid-row:3;min-height:44px}}
/* 720~900 은 브랜드·검색·메뉴가 한 줄에 들어간다 — 세 줄(44·40·44)이면 줄여도 197px 이라 줄 수를 줄인다(render-qa 실측 2026-09-30) */
@media (min-width:720px) and (max-width:900px){header.top.rail.dos-top{grid-template-columns:auto 1fr auto}
 header.top.rail.dos-top form.search{grid-column:2;grid-row:1}
 header.top.rail.dos-top details.menu{grid-column:3}
 header.top.rail.dos-top .ticker{grid-row:2}}
/* ≥1600 — 헤더·푸터를 본문(main.dos 1680)과 같은 폭으로 가운데 모은다. 종전엔 헤더(브랜드 x=16)가 화면 끝까지
   퍼지고 본문(x=120)만 가운데 모여 왼쪽 가장자리가 어긋났다. 아래 헤더 줄(border-bottom)도 같이 좁아진다 —
   화면 끝까지 남겨도 되는 선이라 밝혔다(제안서 #9 · 강제 아님) */
main.dos{max-width:none;margin:0}   /* 페이지 전체 좌(목차)·우(본문) 분할 — 폭 상한 없음 (Ryan 10-08) */
main.dos .dos-main{min-width:0}
main.dos sup,.ev-body sup{font-size:11px;line-height:0;margin-left:1px}main.dos sup a,.ev-body sup a{color:var(--accent);text-decoration:none;padding:0 1px}
main.dos small{display:block;color:var(--mute);font-size:12px;font-weight:400}
main.dos .k{font-size:12px;margin:0 0 8px}
main.dos figure{margin:0}main.dos img{display:block}
main.dos small.asof{font-size:11px;margin-top:4px}main.dos small.asof a{color:var(--mute);overflow-wrap:anywhere}
/* 제목 · 힌트 */
main.dos .dos-head{padding:28px 0 18px;position:relative}
main.dos .dos-head .kind{font-size:13px;color:var(--mute);margin:0}
main.dos .dos-head h1{margin:4px 0 6px}main.dos .dos-head h1 .sub{display:inline;margin-left:6px}
main.dos .dos-head .meta{margin:0}main.dos .dos-head time{color:var(--accent);font-weight:300;font-size:20px;margin-right:8px;font-variant-numeric:tabular-nums}
/* 수치 카드 — 모든 숫자에 기준 일자 + 원본 ↗ (§6) */
main.dos .dos-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
main.dos .dos-stats>.stat{background:var(--wall);padding:14px 16px;min-width:0}
main.dos .dos-stats b{display:block;font-size:30px;font-weight:250;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
main.dos .dos-stats b i{font-style:normal;font-size:14px;color:var(--mute);margin-left:3px}
main.dos .dos-stats span{display:block;font-size:13px;margin-top:6px}
/* 기본 정보 · 언어별 리뷰 표 — 같은 행 규칙 */
main.dos table.dos-basic,main.dos table.dos-langs{width:100%;border-collapse:collapse;font-size:14px}
main.dos table.dos-basic caption{text-align:left;font-size:12px;letter-spacing:.08em;color:var(--mute);padding-bottom:8px}
main.dos table.dos-basic th,main.dos table.dos-langs th{text-align:left;font-weight:500;color:var(--mute);width:6.5em;padding:8px 10px 8px 0;border-top:1px solid var(--rule);vertical-align:top;white-space:nowrap}
main.dos table.dos-basic td,main.dos table.dos-langs td{padding:8px 0;border-top:1px solid var(--rule)}
main.dos table.dos-basic td small{margin-top:2px}
main.dos table.dos-basic tr.todo td{color:var(--mute);font-size:13px}
main.dos table.dos-langs{margin:20px 0;font-variant-numeric:tabular-nums}main.dos table.dos-langs thead th{font-size:12px;letter-spacing:.04em;width:auto}
main.dos table.dos-langs td{text-align:right;padding-left:12px}main.dos table.dos-langs td small.asof{margin:0}main.dos table.dos-langs thead th:not(:first-child){text-align:right}
main.dos table.dos-langs caption{text-align:left;font-size:12px;letter-spacing:.08em;color:var(--mute);padding-bottom:8px}
/* 다듬기 #6(2026-09-30) — 기준 일자가 전 행 같으면 caption 한 줄로 올린다(dossier_render._lang_table()) · 행 머리와
   숫자를 한 줄에 맞춘다(vertical-align:top 은 다른 줄에 보였다) · 머리글 오른쪽 여백을 몸통과 같게(0) 맞춘다 */
main.dos table.dos-langs th,main.dos table.dos-langs td{vertical-align:baseline}
main.dos table.dos-langs th{padding-right:0}
/* 머리 표준 (심층·교차 설계 §2.2 · 시안 mock dossier-v2) — 배지 줄 · 제목 · 요약 · 대표+장면 4 · 정보표 · 점수 줄 · 링크 */
main.dos .dos-th{margin:22px 0 0}
main.dos .dos-th .kind{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
main.dos .tb{font-size:12px;border:1px solid var(--rule);color:var(--mute);padding:0 8px;white-space:nowrap}main.dos .tb.on{border-color:var(--accent);color:var(--accent)}main.dos .tb.q{border-style:dashed}
main.dos .dos-th h1{margin:0 0 10px;font-size:clamp(26px,5vw,40px);line-height:1.15;letter-spacing:-.02em}main.dos .dos-th h1 small{display:inline;font-size:.5em;font-weight:500;color:var(--mute);margin-left:8px;white-space:nowrap}
main.dos .sum{font-size:16.5px;margin:0 0 10px}
main.dos a.src{display:inline-flex;align-items:center;max-width:100%;overflow:hidden;white-space:nowrap;gap:4px;font-size:11px;line-height:1.6;color:var(--mute);border:1px solid var(--rule);padding:0 6px;margin:0 3px 2px 0;text-decoration:none;vertical-align:1px}
main.dos a.src:hover{border-color:var(--accent-dim);color:var(--paper)}main.dos a.src .sn{flex:none;color:var(--accent);font-variant-numeric:tabular-nums}
main.dos .thg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch}   /* 1:1 (Ryan 10-08 · 종전 1.35:1 이면 정보표가 이미지보다 길게 내려갔다) */
main.dos .thg .side{display:flex;flex-direction:column;min-width:0}   /* 요약 → 칩 줄(별도 레이어) → 정보표가 남는 높이를 채운다 */
main.dos .thg .side .dos-chips{margin:0 0 14px}
main.dos .thg .info{flex:1;display:flex}main.dos .thg .info table{height:100%}
main.dos .hero img,main.dos .mstrip img{aspect-ratio:16/9;object-fit:cover;width:100%;border:1px solid var(--rule)}
main.dos .mstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
main.dos .thg .media{container-type:inline-size}
@container (max-width:640px){main.dos .mstrip{grid-template-columns:repeat(2,minmax(0,1fr))}}   /* 그림 칸이 좁으면(1280~1650) 2×2 — 정보표 높이에 맞춘다 (10-08 실측) */
main.dos .dos-th figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:12px;color:var(--mute);margin:5px 0 0;line-height:1.45}
main.dos .dos-th figcaption .c{color:var(--paper)}main.dos .dos-th figcaption .cr{font-size:11px;color:var(--mute);white-space:nowrap}
main.dos .mstrip figcaption .c{font-size:11.5px}
main.dos .info table{width:100%;border-collapse:collapse;font-size:14px}
main.dos .info th,main.dos .info td{border-top:1px solid var(--rule);padding:7px 6px;text-align:left;vertical-align:top}
main.dos .info th{color:var(--mute);font-weight:500;white-space:nowrap;width:1%;padding-right:14px}
main.dos .info td.s{white-space:nowrap}main.dos .info td.l{white-space:normal}
main.dos .info .sub{display:block;font-size:12px;color:var(--mute)}
main.dos .info tr.opt th{color:var(--mute)}
main.dos .scoreline{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;font-size:13.5px;color:var(--mute)}main.dos .scoreline b{color:var(--mint);font-size:19px;margin-right:4px}
main.dos .dos-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
main.dos .dos-links a{border:1px solid var(--rule);padding:3px 12px;font-size:13px;text-decoration:none;white-space:nowrap}main.dos .dos-links a:hover{border-color:var(--accent)}
main.dos .gline{height:3px;background:linear-gradient(90deg,var(--accent),var(--mint));margin:22px 0 0}
/* 페이지 전체 좌(목차)·우(본문) 분할 (Ryan 10-08 · Timetakers 레퍼런스). 목차 칸은 머리부터 출처 끝까지 전체 높이에 걸쳐 고정, 접으면 44px 띠.
   본문 칸은 남는 폭을 다 쓴다 — 글 단락에 em 상한을 두지 않는다(D16 「글은 상자 폭 전부」). 현재 위치는 옆 띠가 아니라 바탕·글자색. */
main.dos .dos-shell{display:grid;grid-template-columns:244px minmax(0,1fr);align-items:start}
main.dos .dos-shell.nav-closed{grid-template-columns:44px minmax(0,1fr)}
main.dos .dos-col{min-width:0;padding:0 36px 56px}
main.dos .dos-side{position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--rule);background:var(--ink)}
main.dos:has(>.preview) .dos-side{top:34px;height:calc(100vh - 34px)}   /* 미리보기 띠(34px) 아래로 */
main.dos .dos-nav-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 14px;background:none;border:0;border-bottom:1px solid var(--rule);color:var(--mute);font:inherit;font-size:13px;cursor:pointer}
main.dos .dos-nav-toggle[hidden]{display:none}
main.dos .dos-nav-toggle:hover,main.dos .dos-nav-toggle:focus-visible{color:var(--paper)}
main.dos .dos-nav-toggle .ico::before{content:"\00ab"}   /* « 접기 */
main.dos .nav-closed .dos-nav-toggle .ico::before{content:"\00bb"}   /* » 펼치기 */
main.dos .nav-closed .dos-nav-toggle{padding:0;justify-content:center}
main.dos .nav-closed .dos-nav-toggle .lab,main.dos .nav-closed .dos-toc{display:none}
main.dos .dos-toc{padding:14px 0 28px}
main.dos .dos-toc .brand{margin:0 0 10px;padding:0 14px;font-size:15px;font-weight:700;line-height:1.35}
main.dos .dos-toc .brand small{margin-top:2px}
main.dos .dos-toc ol,main.dos .dos-toc ul{list-style:none;padding:0;margin:0}
main.dos .dos-toc li a{display:flex;gap:10px;padding:6px 14px;font-size:14px;text-decoration:none;color:var(--mute)}
main.dos .dos-toc li a:hover,main.dos .dos-toc li a.on{color:var(--paper);background:var(--wall)}
main.dos .dos-toc li a.on{font-weight:600}
main.dos .dos-toc .no{color:var(--accent);font-size:12px;font-variant-numeric:tabular-nums;padding-top:2px}
/* 다듬기 #3(2026-09-30) — 280px 칸에서 2열이면 한 칸 120px 밖에 안 돼 단위·날짜가 중간에서 끊겼다. 한 열로 쌓고
   각 칸은 값+단위(왼쪽) · 라벨(오른쪽) 한 줄 + 기준+원본 한 줄(짧은 asof — 다듬기 #5 의 _asof_parts short 재사용). */
/* 항목 — 굵은 첫 문장(관찰) → 사실 → 리소스(문단 사이) (§5) */
main.dos .item h2{font-size:22px;margin:56px 0 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;scroll-margin-top:20px}
main.dos .item:first-child h2{margin-top:0}
main.dos h2 .no{color:var(--accent);font-weight:300;font-size:16px;font-variant-numeric:tabular-nums}
main.dos .item p strong{font-weight:700}
main.dos small.fasof{display:inline;font-size:12px;color:var(--mute)}   /* 사실 글 옆 기준 일자 — main.dos small{display:block} 은 각주 전 흐름을 깬다 (최종 픽스 A2) */
main.dos .conn{font-size:12px;font-weight:400;color:var(--mute)}main.dos .conn a{color:var(--mute)}main.dos .conn a:hover,main.dos .conn a:focus-visible{color:var(--paper)}
main.dos .na{color:var(--mute)}
main.dos .more{margin-top:40px}
/* 다듬기 #8(2026-09-30) — 갤러리·영상 세로 22 · 가로 16(리듬 토큰). 종전 8px 는 2열에서 왼쪽 사진 크레딧과
   오른쪽 사진 캡션이 붙어 한 문장처럼 읽혔다. 캡션은 이제 「무엇 — 사진 크레딧」 한 줄(왼쪽 정렬 · _screen() 마크업) */
/* 본문 그림 크기는 화면 높이를 따른다 (Ryan 10-08 「이미지가 너무 크게」) — 한 칸 높이 ≤ --img-h. 종전엔 칸 폭을 다 채워 1920 에서 한 장이 1572×884 였다 */
main.dos{--img-h:clamp(170px,30vh,340px);--img-w:calc(var(--img-h)*16/9)}
main.dos .gallery{display:grid;gap:22px 16px;margin:22px 0}
main.dos .gallery,main.dos .vids{justify-content:center}   /* 리소스 가운데 정렬 (Ryan 10-08) */
main.dos .gallery.c2{grid-template-columns:repeat(2,minmax(0,var(--img-w)))}
main.dos .gallery.c3{grid-template-columns:repeat(3,minmax(0,var(--img-w)))}
main.dos figure.shot img{border:1px solid var(--rule);aspect-ratio:16/9;object-fit:cover;width:100%}
main.dos figure.shot figcaption{font-size:13px;color:var(--mute);padding-top:6px}
main.dos figure.dia figcaption{font-size:13px;color:var(--mute);padding-top:6px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
main.dos figure.shot figcaption span{opacity:.75;white-space:nowrap}main.dos figure.shot figcaption a{color:var(--mute)}
main.dos figure.shot.big{margin:22px auto;max-width:calc(var(--img-w)*1.3)}   /* 한 장은 조금 크게 */
main.dos figure.dia{margin:22px auto;max-width:calc(var(--img-w)*1.7);border:1px solid var(--rule);padding:16px 16px 10px}   /* 생성 도식도 화면 높이에 연동된 폭 상한 + 가운데 (Ryan 10-08 · 1920 에서 1538×865 였다) */
main.dos figure.dia svg{width:100%;height:auto;display:block}
main.dos figure.dia figcaption small.asof{margin:0;text-align:right}
main.dos .legend{font-size:12px;color:var(--mute);margin:0 0 6px}
main.dos .legend .sw{display:inline-block;width:10px;height:10px;margin:0 4px 0 8px;vertical-align:-1px}
main.dos .legend .sw.up{background:var(--mute)}main.dos .legend .sw.dn{background:var(--rule)}
/* 다듬기 #1(2026-09-30) — 도시에 그래프는 dia graph(전용 클래스). 사이트 공용 figure.chart 의 min-width:720px·테두리를 안 물려받는다.
   figure.dia 의 틀·svg 규칙은 그대로 물려받는다(위 main.dos figure.dia 규칙) — class 이름만 다르다 */
main.dos .vids{display:grid;gap:22px 16px;margin:22px 0}
main.dos .vids.c2{grid-template-columns:repeat(2,minmax(0,var(--img-w)))}
main.dos a.vid{position:relative;display:block;text-decoration:none;border:1px solid var(--rule)}main.dos a.vid img{aspect-ratio:16/9;object-fit:cover;width:100%}
main.dos a.vid .play{position:absolute;left:12px;top:12px;width:36px;height:36px;background:rgba(13,21,16,.85);border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-size:12px}
main.dos a.vid .cap{display:block;padding:8px 10px;font-size:14px;background:var(--wall)}
main.dos a.doc{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;border:1px solid var(--rule);padding:12px 14px;margin:18px 0;text-decoration:none;background:var(--wall)}
main.dos a.doc .k{margin:0}main.dos a.doc b{font-weight:600;font-size:15px}main.dos a.doc small{font-size:12px}main.dos a.doc:hover{border-color:var(--accent-dim)}
main.dos .pending,main.dos .dos-note{font-size:13px;color:var(--mute);border-top:1px dashed var(--rule);padding-top:10px}
main.dos .tp{display:inline-block;font-size:11px;color:var(--mute);border:1px solid var(--rule);padding:0 6px;margin-left:6px;white-space:nowrap}   /* 제3자 집계 칩 */
/* 평가(전달) — 한 절 */
main.dos .plain{color:var(--mute);font-size:14px}
/* 다듬기 #5(2026-09-30) — auto-fit(220px) 는 배지가 둘뿐이어도 오른쪽 한 칸이 안 빈다(종전 repeat(3,1fr)).
   목록은 배지(kind=score)로 이미 보인 매체를 뺀다(dossier_render._eval()) — 남는 줄이 가운데가 안 비도록
   4em auto 1fr auto(층·매체·값·기준이 붙는다 · 종전 4em 1fr auto auto 는 매체 칸이 늘어나 가운데가 비었다) */
main.dos .badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:16px 0}
main.dos .badges>div{border:1px solid var(--rule);padding:14px;display:flex;gap:12px;align-items:center;min-width:0}
main.dos .badges b{font-size:36px;font-weight:250;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}main.dos .badges span{font-size:14px}
main.dos ul.evals{list-style:none;padding:0;margin:0;font-size:14px}
main.dos ul.evals li{display:grid;grid-template-columns:4em auto 1fr auto;gap:12px;align-items:baseline;border-top:1px solid var(--rule);padding:8px 0}
main.dos ul.evals .k{margin:0}main.dos ul.evals b{font-weight:600}main.dos ul.evals small{font-size:12px}
/* 연표 · 출처 · 바텀 시트 — 종전엔 .dos-body 형제(폭 1680 전체) · A안 시안(mock dossier-v1/a.html)처럼 .dos-main 마지막 자식으로 옮겼다(끝 부분 정리 · Ryan 09-29 「진행해줘」).
   margin-top 은 그대로 둔다 — .item h2 만 56px 위 여백을 받고(마진 규칙이 클래스 한정) 이 두 절의 h2 는 그 규칙 밖이라 폭과 무관하게 여전히 필요하다. columns:2 도 시안과 같다(760~820 폭에서도 2열) */
main.dos .dos-timeline{margin-top:48px}
main.dos .dos-sources{margin-top:48px}
main.dos .dos-sources ol{list-style:none;padding:0;margin:0;font-size:14px;columns:2;column-gap:28px}
main.dos .dos-sources li{display:grid;grid-template-columns:2em 1fr;padding:6px 0;border-top:1px solid var(--rule);break-inside:avoid;scroll-margin-top:72px}
main.dos .dos-sources li small{grid-column:2}main.dos .dos-sources li:target{background:var(--wall)}
main.dos .dos-sources .n{color:var(--accent);font-variant-numeric:tabular-nums}main.dos .cnt{color:var(--mute);font-weight:400;font-size:15px}
/* 넓은 모니터 ≥1600 — 본문 220|≤820|300 */
@media (min-width:1600px){main.dos{font-size:17px}
}
/* 1280 미만 — 목차가 위에 붙는 칩 줄이 된다 */
@media (max-width:1279px){main.dos .dos-shell,main.dos .dos-shell.nav-closed{display:block}
 main.dos:has(>.preview) .dos-side{top:auto;height:auto}   /* 띠 규칙(:has · 100vh-34px)이 height:auto 를 이겨 접어도 빈 칸 866px 이 남았다 (10-08 실측) */
 main.dos .dos-col{padding:0 16px 40px}
 main.dos .dos-side{position:static;height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--rule)}
 main.dos .dos-nav-toggle{border-bottom:0}
 main.dos .nav-closed .dos-nav-toggle{justify-content:flex-start;padding:0 14px}
 main.dos .nav-closed .dos-nav-toggle .lab{display:inline}
 main.dos .item h2{scroll-margin-top:20px}}
@media (max-width:999px){main.dos .thg{grid-template-columns:1fr}}
@media (max-width:860px){main.dos .dos-sources ol{columns:1}main.dos .gallery.c3{grid-template-columns:1fr 1fr}}
/* 휴대폰 <720 — 한 줄로 쌓는다 · 도식·그래프는 가로 스크롤 */
@media (max-width:719px){main.dos figure.dia{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--accent-dim) var(--rule)}main.dos figure.dia svg{min-width:600px}
 /* C1·C2 — overflow-x:auto 자체는 이미 스크롤되지만(min-width:600 이 그 전제), 정적 화면에는 스크롤 막대가 안 보여 "잘림"으로 읽혔다.
    막대를 늘 보이게 해 "옆으로 더 있다"는 신호를 남긴다(폭을 줄여 다시 욱여넣지 않는다 — min-width:600 결정은 그대로) */
 main.dos figure.dia::-webkit-scrollbar{height:6px}
 main.dos figure.dia::-webkit-scrollbar-track{background:var(--rule)}
 main.dos figure.dia::-webkit-scrollbar-thumb{background:var(--accent-dim)}
 main.dos ul.evals li{grid-template-columns:1fr auto}}
@media (max-width:719px){main.dos .mstrip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:559px){main.dos .dos-th .info td.s{white-space:normal}}
@media (max-width:559px){main.dos .gallery.c2,main.dos .gallery.c3,main.dos .vids.c2{grid-template-columns:1fr}}
/* 구조 C (심층·교차 설계 §2·§3) */
main.dos .dos-trust,main.dos .dos-legend,main.dos .dos-elements small,main.dos .dos-open small{color:var(--mute);font-size:13px}
main.dos .bdg,main.dos .bld{display:inline-block;font-size:11px;padding:0 6px;margin-left:4px;border:1px solid var(--rule);color:var(--mute)}
main.dos .bdg.cross{border-color:var(--mute)}main.dos .bdg.check{border-color:var(--coral);color:var(--coral)}main.dos .bdg.conflict{background:var(--coral);color:var(--ink);border-color:var(--coral)}main.dos th,main.dos a.src,main.dos .bdg,main.dos .bld{white-space:nowrap}
main.dos .dos-cards,main.dos .dos-pc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px}
main.dos .dos-open small{display:block}
main.dos .acard{background:var(--wall);border:1px solid var(--rule);padding:14px 16px}main.dos .acard h3{margin:0 0 6px;color:var(--accent)}
main.dos .dos-trust,main.dos .dos-legend{margin:6px 0 0}main.dos .dos-legend small,main.dos .dos-elements small{display:inline;margin-right:8px}
main.dos .dos-legend .bdg:first-of-type{margin-left:6px}main.dos .dos-legend .k{margin:0}
main.dos .dos-conclusion{margin:8px 0 0}
main.dos .strip-note{font-size:13px;color:var(--mute);margin:0 0 10px}
main.dos .acard .one{font-size:15px;font-weight:600;margin:4px 0 0}
main.dos .acard .more{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:6px;font-size:13px;color:var(--accent);text-decoration:none}main.dos .acard .more span{color:var(--mute);font-size:12px}main.dos .acard .more:hover{text-decoration:underline}
main.dos .why{border:1px solid var(--rule);background:var(--ink);padding:16px 20px;margin:14px 0 0;scroll-margin-top:16px}main.dos .why:target{outline:1px solid var(--accent-dim)}
main.dos .why-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 6px}main.dos .why-h b{font-size:12px;letter-spacing:.08em;color:var(--accent)}main.dos .why-h span{font-size:12px;color:var(--mute)}
main.dos .why-i{padding:10px 0 0}main.dos .why-i+.why-i{border-top:1px solid var(--rule);margin-top:10px}main.dos .why-i h4{font-size:16px;margin:0 0 4px}main.dos .why-i p{margin:0;font-size:14.5px}main.dos .why-i .dos-chips{margin-top:6px}main.dos .acard p{margin:0 0 8px}
main.dos .chip{color:var(--mute);border:1px solid var(--rule);padding:0 6px;margin-right:2px;font-size:12px;text-decoration:none}main.dos .chip:hover{color:var(--paper);border-color:var(--accent-dim)}
main.dos .dos-elements .k,main.dos .split .k{margin:0 6px 0 0}main.dos .dos-elements .el{text-decoration:underline dotted var(--mute)}
main.dos .dos-pc h3,main.dos .dos-sources h3{font-size:14px;color:var(--mute);margin:0 0 6px}main.dos .dos-pc ul{margin:0;padding-left:1.2em}
main.dos table.dos-outcome,main.dos table.dos-open{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0}
main.dos table.dos-outcome caption{text-align:left;font-size:12px;letter-spacing:.08em;color:var(--mute);padding-bottom:8px}
main.dos table.dos-outcome th,main.dos table.dos-outcome td,main.dos table.dos-open th,main.dos table.dos-open td{text-align:left;padding:8px 10px 8px 0;border-top:1px solid var(--rule);vertical-align:top}
main.dos table.dos-outcome th,main.dos table.dos-open tbody th{font-weight:500;color:var(--mute);width:8em}main.dos table.dos-open thead th{font-size:12px;font-weight:500;color:var(--mute)}
main.dos table.dos-outcome tr.todo td{color:var(--mute);font-size:13px}
main.dos .dos-open-sec{margin-top:48px}main.dos .dos-sources h3{margin:20px 0 6px}main.dos .dos-src-group{margin:14px 0 0}main.dos .dos-src-group>summary{font-size:14px;font-weight:700;color:var(--mute);cursor:pointer;list-style:none;margin:0 0 6px}main.dos .dos-src-group>summary::-webkit-details-marker{display:none}main.dos .dos-src-group>summary::before{content:'▸ ';color:var(--accent)}main.dos .dos-src-group[open]>summary::before{content:'▾ '}main.dos .dos-src-group>summary:hover{color:var(--ink)}main.dos .dos-method{font-size:13px;color:var(--mute);margin-top:16px}
/* 옆 줄무늬 허용 1/2 — 시안 mock.html:249 · Ryan 10-07 시안 v2 R2 */
main.dos details.dos-flow{margin:16px 0 22px;padding:0;border:1px solid var(--rule);background:linear-gradient(180deg,var(--accent),var(--mint)) left/4px 100% no-repeat,var(--wall);word-break:keep-all}
main.dos .dos-flow>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:16px 20px}
main.dos .dos-flow>summary::-webkit-details-marker{display:none}
main.dos .dos-flow .lab{grid-column:1;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
main.dos .dos-flow .lab b{font-size:13px;letter-spacing:.08em;color:var(--accent)}main.dos .dos-flow .per{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
main.dos .dos-flow .st{grid-column:1;font-size:21px;font-weight:800}
main.dos .dos-flow .one{grid-column:1;color:var(--mute);font-size:14.5px}
main.dos .dos-flow .tog{grid-column:2;grid-row:1 / 4;align-self:center;font-size:13px;color:var(--accent);border:1px solid var(--accent-dim);padding:4px 12px;white-space:nowrap}
main.dos .dos-flow .tog::before{content:"▸ "}main.dos .dos-flow[open] .tog::before{content:"▾ "}
main.dos .dos-flow .t-close,main.dos .dos-flow[open] .t-open{display:none}main.dos .dos-flow[open] .t-close{display:inline}
main.dos .flow-in{padding:0 20px 20px}
main.dos .flow-body{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:16px;align-items:stretch}
main.dos .sig ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
main.dos .sig li{font-size:13.5px;line-height:1.5;position:relative;padding-top:18px;border-top:2px solid var(--rule)}
main.dos .sig li::before{content:"";position:absolute;left:0;top:-8px;width:14px;height:14px;clip-path:circle(50%);background:var(--paper)}
main.dos .sig li:last-child::before{background:var(--accent)}
main.dos .sig .d{display:block;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;font-size:14px}
main.dos .sig .tt{display:block;font-weight:700;margin:2px 0 6px}
main.dos .numchip{display:inline-block;font-size:12px;font-weight:700;border:1px solid var(--accent);color:var(--paper);padding:1px 7px;margin:0 0 4px}
main.dos .sig li:last-child .numchip{background:var(--accent);color:var(--ink)}
main.dos .scale{border:2px solid var(--accent);background:var(--tint);padding:16px;display:flex;flex-direction:column;justify-content:center}
main.dos .scale .k{margin:0 0 6px}
main.dos .scale .big{font-size:38px;font-weight:800;line-height:1.05;color:var(--accent);font-variant-numeric:tabular-nums}
main.dos .scale .big small{font-size:16px;color:var(--paper);font-weight:600;margin:0 6px 0 3px}
main.dos .scale p{margin:8px 0 0;font-size:13.5px}
main.dos .fimgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0}
main.dos .fimgs img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--rule)}
/* 옆 줄무늬 허용 2/2 — 시안 mock.html:260 · Ryan 10-07 시안 v2 R2 */
main.dos .ask{margin:18px 0 0;border-left:3px solid var(--accent);background:var(--ink);padding:12px 16px}
main.dos .ask b{display:block;font-size:12px;letter-spacing:.08em;color:var(--mute);font-weight:500;margin:0 0 4px}
main.dos .ask p{margin:0;font-size:18px;font-weight:700}
@media (max-width:720px){main.dos .flow-body{grid-template-columns:minmax(0,1fr)}main.dos .fimgs{grid-template-columns:minmax(0,1fr)}}

/* 작은 도식 — 색은 토큰만(코랄은 배지 전용) */
main.dos svg.mini{display:block;width:100%;max-width:360px;height:auto;margin:6px 0 10px;fill:none}
main.dos svg.mini .ln{stroke:var(--mute);stroke-width:2;fill:none}main.dos svg.mini .ln.acc{stroke:var(--accent)}main.dos svg.mini .ln.dash{stroke-dasharray:4 4}
main.dos svg.mini .dot-acc{fill:var(--accent)}main.dos svg.mini .dot-paper{fill:var(--paper)}
main.dos svg.mini .bar-acc{fill:var(--accent)}main.dos svg.mini .bar-mute{fill:var(--mute)}main.dos svg.mini .bar-line{fill:var(--tint);stroke:var(--rule)}
main.dos svg.mini .grid{stroke:var(--rule);stroke-width:1}
main.dos svg.mini text{font-family:inherit}main.dos svg.mini .t{fill:var(--paper);font-weight:700}main.dos svg.mini .s{fill:var(--mute);font-size:11px}

/* AI 허브 (설계 2026-10-08 §3) — 칸 = 제목·정의 한 줄·카드 최대 4 */
.aiblk{margin:36px 0 0}.aiblk h2{margin:0 0 4px}.aiblk .def{color:var(--mute);margin:0 0 14px}
.aicards{display:grid;grid-template-columns:1fr;gap:14px}   /* 카드 = 연표와 같은 블록 꼴(날짜 왼쪽·본문 오른쪽) — 300px 칸에 넣으면 본문이 세로로 꺾인다 (10-08 실렌더) */
.aiblk .more{margin:12px 0 0}
/* 카드 상세 본문 (카드 본문 설계 §5) — 폭은 상자 전부 · 낱말 중간 끊김 없음 */
.ev-body p,.callout.gc-take p{word-break:keep-all}
.callout.gc-take{border-left:2px solid var(--accent)}