/* S22/S23: shared CookieRun editorial grammar, case-specific proof compositions.
   References are recorded in LOG. No external code or media is copied. */
.ff-switch{grid-column:1/-1;min-width:0;margin-top:var(--gap-s)}
.ff-tabs{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:var(--gutter);margin-bottom:var(--gap-s)}
.ff-tabs[hidden],.ff-panel[hidden]{display:none!important}
.ff-tabs button{position:relative;display:grid;align-content:start;gap:12px;padding:0 0 20px;min-height:48px;text-align:left;color:var(--muted);border-bottom:1px solid var(--line)}
.ff-tabs b{font-size:var(--fr);line-height:1.35;font-weight:500}
.ff-tabs small{font-size:var(--r-cap);line-height:1.45}
.ff-th{display:flex;align-items:flex-end;gap:8px;overflow:hidden}
.ff-th img{display:block;min-width:0;opacity:.5;transition:opacity var(--t-2) var(--ease-out)}
.ff-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ui);transform:scaleX(0);transform-origin:left;transition:transform var(--t-2) var(--ease-out)}
.ff-tabs button:is([aria-selected=true],:hover,:focus-visible){color:var(--ink)}
.ff-tabs button:is([aria-selected=true],:hover,:focus-visible) img{opacity:1}
.ff-tabs button[aria-selected=true]::after{transform:scaleX(1)}
.ff-tabs button:focus-visible{outline:2px solid var(--ui);outline-offset:4px}
.ff-stage{position:relative}
.ff-stage.is-switching{overflow:hidden}
.ff-panel.is-leaving{position:absolute;left:0;right:0;width:100%;z-index:0;pointer-events:none}
.ff-stage.is-switching>.ff-panel:not(.is-leaving){position:relative;z-index:1}
.ff-panel figure{margin:0}
.ff-panel figcaption{margin-top:16px;font-size:var(--r-cap);line-height:1.45;color:var(--muted)}
.ff-panel>figure>video{width:100%;height:auto;max-height:80svh;object-fit:contain;background:var(--paper);border-radius:0}
.ff-panel+.ff-panel:not([hidden]){margin-top:var(--gap-s)}
.ff-switch.is-ready .ff-panel{margin-top:0}
/* Big projection footage keeps its original ratio, followed by precise tests. */
.md[data-id=cookierun] [data-block=L02-TEST]>.md-grid{margin-inline:calc(var(--margin) * -1);width:calc(100% + var(--margin) * 2)}
.md[data-id=cookierun] [data-block=L02-TEST]>.md-grid figcaption{padding-inline:var(--margin)}
.md[data-id=cookierun] [data-block=L02-TEST]>.md-grid video{max-height:85svh;object-fit:contain;background:var(--paper)}
/* Meaning and expression remain paired even when the three columns collapse. */
.ff-pair-head{display:flex;align-items:center;gap:16px;border-top:1px solid var(--ink);padding-top:24px;margin-top:32px}
.ff-pair-head span{color:var(--muted)}
.ff-pairs{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin:32px 0 0;padding:0}
.ff-pairs>li{display:grid;grid-template-rows:1fr 1fr;min-width:0}
.ff-pairs h5{margin:0;font-size:clamp(24px,2.5vw,48px);font-weight:500;line-height:1.2;letter-spacing:var(--ls-ko-d)}
.ff-pairs p{margin:16px 0 0;font-size:var(--r-cap);line-height:1.5;color:var(--muted);max-width:28em}
.ff-value{padding:32px 24px 40px 0}
.ff-value h5{color:var(--ui)}
.ff-principle{position:relative;padding:32px 24px 32px 0;border-top:1px solid var(--line)}
.ff-principle h5{font-size:clamp(22px,2vw,36px);letter-spacing:var(--ls-en-d)}
.ff-application-copy{list-style:none;counter-reset:application;margin:24px 0 0;padding:0}
.ff-application-copy li{counter-increment:application;position:relative;padding:24px 0 24px 48px;border-top:1px solid var(--line);font-size:var(--r-cap);line-height:1.6}
.ff-application-copy li::before{content:counter(application,decimal-leading-zero);position:absolute;left:0;top:24px;color:var(--ui)}
.ff-jump{display:inline-block;margin-top:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--r-cap);color:var(--ui)}
.ff-jump:hover{border-color:var(--ui)}
.md[data-id=cookierun] .fe-cr dd,.fe-wx .fe-cr dd{flex-wrap:wrap}
.md[data-id=now-audio-playground] [data-block=L04-EXP]>.md-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
.md[data-id=now-audio-playground] [data-block=L04-EXP]>.md-grid>figure:first-child{grid-column:1/9}
.md[data-id=now-audio-playground] [data-block=L04-EXP]>.md-grid>figure:last-child{grid-column:9/-1;align-self:end}
@media(max-width:1000px){
 .ff-pairs h5{font-size:28px}.ff-principle h5{font-size:24px}
 .ff-value,.ff-principle{padding-right:0}
}
@media(min-width:701px) and (max-width:1100px){
 .md[data-id=cookierun] .fe-cr>div,.fe-wx .fe-cr>div{grid-template-columns:1fr;row-gap:12px}
}
@media(max-width:700px){
 .ff-tabs{gap:12px}.ff-tabs b{font-size:var(--r-cap)}
 .ff-pairs{grid-template-columns:1fr;gap:40px}
 .ff-pair-head span{transform:rotate(-90deg)}
 .ff-pairs>li{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
 .ff-value,.ff-principle{padding:0;border:0}
 .ff-pairs h5{font-size:24px}.ff-principle h5{font-size:22px}
 .ff-pairs p{margin-top:12px;font-size:var(--r-cap)}
 .md[data-id=now-audio-playground] [data-block=L04-EXP]>.md-grid{display:grid;grid-template-columns:1fr}
 .md[data-id=now-audio-playground] [data-block=L04-EXP]>.md-grid>figure{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
 .ff-tabs button::after,.ff-th img{transition:none}
}
.ff-tabs{margin-bottom:32px}
/* S23 Weather: text-only chapter heads sit closer to their evidence. */
.md[data-id=samsung-weather] .md-sec:is([data-block=L01-SCREEN],[data-block=L03-FIX]){padding-bottom:48px}
/* S23 NOW: As is / To be states a direction, so it stays below the evidence in scale. */
.md[data-id=now-audio-playground] .fe-ba strong{font-size:clamp(28px,5vw,96px)}
/* 10/25 NOW: 전 / 후 가운데 · 히어로 목업 2장 1행 · 포지셔닝 맵 인라인 SVG(바탕 없음) */
.md[data-id=now-audio-playground] .fe-ba{justify-items:center;text-align:center}
.fe-dark[data-id=now-audio-playground] .md-ov .yt .dg-hg{grid-template-rows:1fr}
.dg-map svg{display:block;width:100%;height:auto;overflow:visible}
.dg-map svg.is-m{display:none}
@media(max-width:700px){.dg-map svg{display:none}.dg-map svg.is-m{display:block}}
/* S23: CookieRun and NOW titles use the Weather two-column composition (weather.css). */
.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gutter);padding:48px 0 64px;margin:0}
.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .bp-back{grid-column:1/-1;margin:0 0 12px}
.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head h1{grid-column:1/9;align-self:last baseline;font-size:clamp(64px,7.4vw,144px);line-height:.98;letter-spacing:var(--ls-ko-d);margin:0}
.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .md-sub{grid-column:9/-1;grid-row:2;font-size:var(--r-lead);line-height:var(--heading-lh);letter-spacing:var(--ls-ko-d);margin:0;width:auto;align-self:last baseline}
.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .fe-work{grid-column:9/-1;font-size:16px;line-height:1.65;margin:0;color:var(--muted)}
.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .fe-meta{grid-column:1/9;grid-row:3;align-self:end;font-size:16px;margin:0;color:var(--muted)}
@media(max-width:1100px){
 .md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head h1{font-size:88px;grid-column:1/-1}.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .md-sub,.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .fe-work{grid-column:6/-1}.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .md-sub{grid-row:2}
}
@media(max-width:700px){
 .md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head{display:block;padding:24px 0 40px}.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .bp-back{margin-bottom:32px}
 .md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head h1{font-size:56px}.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .md-sub{font-size:var(--r-lead);margin-top:24px}
 .md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .fe-work{font-size:15px;margin-top:20px}.md:is([data-id=cookierun],[data-id=now-audio-playground]) .md-head .fe-meta{font-size:14px;margin-top:24px}
}
.md[data-id=now-audio-playground] .md-head h1{letter-spacing:-.045em;max-width:8em}
/* One overview-to-chapter gap for all three Featured cases. */
.md:is([data-id=cookierun],[data-id=samsung-weather],[data-id=now-audio-playground]) .md-ov{padding-bottom:64px}