/* Featured 담당 CSS(2026-10-21 분리 · docs/HANDOFF_FEATURED.md). style.css 뒤에 읽힘. 값은 style.css 맨 위 토큰(var(--…))만 */
/* 카드: 카드 문구(아르곤 [확정]) */
.fe-copy{margin-top:12px}
.fe-copy+.fe-principle{margin-top:4px;color:var(--muted)}

/* 상세: 머리 = 제목 → 원리 한 줄 → 증명 문단 · 챕터 = 라벨 → 헤딩 → 질문 → 본문 → 담당 · SHIFT는 먹 선 한 줄(파랑 5곳 밖이라 안 씀) */
.md-head .fe-proof{margin-top:24px;max-width:48em}
.fe-b.is-shift{border-top:1px solid var(--ink)}
.fe-q{font-size:calc(var(--body) * 1.3);line-height:1.5}
.fe-q+p{margin-top:16px}
.fe-ul{margin:0;padding-left:1.2em;display:grid;row-gap:8px}
.copy .fe-role{margin-top:24px}
.md-grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.md-grid.is-3{grid-template-columns:1fr}}

/* 상세 v1 문법 배치(리브랜딩 보드 A′ · §8 A열): 페이지 사이 288 · 같은 페이지 안 96 · [01] 라벨 왼쪽(Heron · Plus X) · 글 7/12 왼쪽(ISKRA) · 그림 12칸 ↔ 6+6(전/후) 두 단계 */
.fe-b.md-sec.ch{padding-top:var(--gap-s)}
.fe-b.md-sec.ch.is-pg{padding-top:var(--gap-l)}
/* 챕터 = 머리 5칸(라벨 → 큰 헤딩 64, Plus X UNIX) + 글 7칸(ISKRA) 2단 비대칭, 그림은 아래 12칸. 머리 위 1px 선이 칸 테두리 */
.fe-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.fe-b>.sec-head{grid-column:1/-1;grid-row:1;margin-bottom:0}
.fe-b .sec-head .draw-body>*{grid-column:1/span 5;text-align:left}
.fe-b.is-l .sec-head .label{grid-column:1/span 5;grid-row:1;text-align:left}
.fe-b.is-l .sec-head h2{grid-row:2;grid-column:1/span 5;font-size:var(--h2);line-height:1.05;letter-spacing:var(--ls-ko-d)}
.fe-b .sec-head h3{font-size:calc(var(--body) * 1.2);font-weight:400}
.fe-b>.g{grid-column:6/-1;grid-row:1;display:block;padding-top:24px}
.fe-b>.g .copy{font-size:calc(var(--body) * 1.1)}
.fe-b>.md-grid{grid-column:1/-1}
.fe-b>.g{position:relative}  /* 장 머리(.sec-head, relative)가 같은 줄의 본문을 덮어 링크가 안 눌리던 문제(10/22) */
.fe-b:not(.is-pg)>.sec-head.draw::before{opacity:.35}
/* 머리: 원리 한 줄 = 한 문장 챌린지(Instrument) · 개요 아래 챕터 목차(Plus X UNIX) */
.md-head .md-sub{font-size:calc(var(--h2) * .5);line-height:1.3;color:var(--ink);max-width:24em}
.fe-toc{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
.fe-toc a{display:flex;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.fe-toc a:hover{border-color:var(--ink)}
.fe-toc span{color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:700px){
 .fe-b>.g{grid-column:1/-1;grid-row:auto;padding-top:24px}
 .fe-b .sec-head .draw-body>*,.fe-b.is-l .sec-head .label{grid-column:1/-1}
 .fe-toc{grid-template-columns:1fr}
}
.fe-cr{margin:0;display:grid}
.fe-cr div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:var(--gutter);padding:12px 0;border-top:1px solid var(--line)}
.fe-cr dt{color:var(--muted)}
.fe-cr dd{margin:0}
@media(max-width:700px){.fe-cr div{grid-template-columns:1fr;row-gap:4px}}
/* 세로 영상(현장 · 공개 영상)은 화면 높이 안에 */
.md-grid .is-v video{display:block;width:100%;height:auto;background:rgb(32 34 31 / .06)}
.md-grid .is-tall video{width:auto;max-width:100%;max-height:80svh;margin-inline:auto}
.md-ov .yt video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--paper)}
@media(max-width:700px){.md-ov .yt.has-hero{aspect-ratio:4/5}}

/* 키워드 줄(B안 · 경험 장면 끝): 칸 테두리 3칸, 큰 글자 */
.fe-kw{grid-column:1/-1;list-style:none;margin:var(--gap-s) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
.fe-kw li{padding-top:16px;border-top:1px solid var(--ink);font-size:calc(var(--h2) * .75);line-height:1.1;letter-spacing:var(--ls-ko-d)}
@media(max-width:700px){.fe-kw{grid-template-columns:1fr;row-gap:16px}.fe-kw li{font-size:calc(var(--body) * 1.6)}}

/* 위치 표시(시안 ↔ 현장 같은 번호): 그림 위 번호 점 */
.fe-mkw{position:relative;display:block}
.fe-mk{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border:1px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);font-size:13px;line-height:26px;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:700px){.fe-mk{width:22px;height:22px;margin:-11px 0 0 -11px;line-height:20px;font-size:11px}}
/* ── 어두운 상세(쿠키런, 주영 10/21 A안 적용): 어두운 공간(쿠키런 믹스 §3-A) + FIELD.IO 케이스 문법(Chopard · Kia · Nike 실측 10/21). 글 · 챕터는 B와 같음 ──
   FIELD: 제목 60 → 연도 · 분야 → 리드 40 / Context · Approach · Impact 세 줄(라벨 왼쪽 · 글 24) / 챕터 = 작은 제목 왼쪽 반 · 글 오른쪽 반(크기보다 자리로 위계)
   그림 = 콘텐츠 폭 안, 간격 10, 2장 반반 · 3장 = 넓게 1 + 반반 2(넓은 장면 → 세부) · 대표 영상만 화면 끝까지 */
body:has(.fe-dark){--paper:#0e0e0d;--ink:#ecebe6;--muted:#9a9b95;--line:#3a3b37;background:var(--paper);color:var(--ink)}
.fe-dark .fe-meta{margin-top:24px;letter-spacing:var(--ls-cap);color:var(--muted)}
.fe-dark .md-head .md-sub{margin-top:16px;max-width:none;width:min(100%,calc((100% - var(--gutter) * 11) / 12 * 8 + var(--gutter) * 7))}
.fe-dark .md-head .fe-proof{display:none}
.fe-dark .md-ov .yt{margin-inline:calc(var(--margin) * -1);aspect-ratio:auto;height:100svh;background:var(--paper)}
.fe-dark .md-ov .yt video{background:var(--paper)}
.fe-dark .md-ov .copy>.label{display:none}
.fe-cai{margin:0;display:grid;row-gap:32px}
.fe-cai dt{font-size:calc(var(--body) * 1.2)}
.fe-cai dd{font-size:calc(var(--body) * 1.2);line-height:1.2}
.fe-dark .fe-b.md-sec.ch.is-pg{padding-top:var(--gap-l)}
.fe-dark .fe-b>.g{grid-column:7/-1;grid-row:1;padding-top:24px}
.fe-dark .fe-b>.md-grid{gap:var(--gutter);margin-top:var(--gap-s)}
.fe-dark .fe-b>.md-grid.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.fe-dark .fe-b>.md-grid.is-3>:first-child{grid-column:1/-1}
.fe-dark .md-grid .is-tall video{max-height:100svh}
@media(max-width:700px){
 .fe-dark .md-head .md-sub{font-size:28px}
 .fe-dark .md-ov .copy,.fe-dark .fe-b>.g{grid-column:1/-1}
 .fe-dark .fe-b>.g{grid-row:auto}
 .fe-dark .fe-b>.md-grid.is-3{grid-template-columns:1fr}
}
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .fe-dark .md-grid figure{animation:fe-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
 }
}
@keyframes fe-rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}

/* ── F17 인터랙션 칸(fe-fx.js). JS 없음 · 동작 줄이기 = 멈춘 그림 ── */
.fe-b>.fe-wave{grid-column:1/-1;margin-top:var(--gap-s)}
.fe-dark .fe-wave-r button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fe-reveal.is-on{grid-template-columns:1fr}
.fe-reveal.is-on>*{grid-area:1/1}
.fe-reveal.is-on>:nth-child(2) .fe-mkw{clip-path:inset(0 0 0 var(--r,0%))}
/* 두 캡션 = 12칸 격자 왼 6 · 오른 6에 맞춤(S61, 48 · 52%는 오른쪽 캡션이 칸 선에서 22px 밀렸음) */
.fe-reveal.is-on>:first-child figcaption{width:calc(50% - var(--gutter) / 2)}
.fe-reveal.is-on>:nth-child(2) figcaption{margin-left:calc(50% + var(--gutter) / 2)}
.fe-b figure{position:relative}


.fe-wave{display:grid;gap:16px;row-gap:80px;container-type:inline-size}
.fe-wave-r{display:grid;grid-template-columns:auto minmax(0,1fr) 220px;gap:16px;align-items:center}
.fe-wv{position:relative;display:block}
.fe-wv svg{display:block;width:100%;height:64px;background:linear-gradient(90deg,rgb(255 255 255 / .1) var(--p,0%),transparent 0)}
.fe-seg{position:absolute;inset:-60px 0 0;pointer-events:none}
.fe-seg span{position:absolute;top:0;bottom:0;padding:0 8px 0 6px;border-left:1px solid var(--ink)}
.fe-wave-r rect{fill:var(--muted)}
.fe-wave-r.is-play rect{fill:var(--ink)}
.fe-wave-r span{font-size:15px;color:var(--muted)}
@media(max-width:700px){
 .fe-wave-r{grid-template-columns:auto minmax(0,1fr)}
 .fe-wave-r span{grid-column:1/-1}
}
/* Experience = 오른쪽 세로 영상(NAU 행복), 왼쪽 제목 · 글 · 키워드 / 제목 없는 이어지는 칸 */
.fe-dark .fe-b.is-side>.g{grid-row:2}
.fe-dark .fe-b.is-side>.md-grid{grid-row:1/span 3;margin-top:0;align-self:start}
.fe-dark .fe-b.is-side>.fe-kw{grid-row:3;grid-template-columns:1fr;row-gap:16px;align-self:end}
.fe-b.md-sec.ch.is-cont{padding-top:var(--gap-s)}
.fe-dark .fe-b.is-cont>.g{grid-row:1;padding-top:0}
@media(max-width:700px){
 .fe-dark .fe-b.is-side>.g,.fe-dark .fe-b.is-side>.md-grid,.fe-dark .fe-b.is-side>.fe-kw{grid-column:1/-1;grid-row:auto}
 .fe-dark .fe-b.is-side>.md-grid{margin-top:var(--gap-s)}
}
/* ── FIELD.IO 글자 크기(주영 10/21, 실측 = 19번 · reports/FIELD 보고서): 기준 --fr 16 / 20(768+) / 24(1200+) × 단계 3 · 2 · 1.5 · 1 · .7 · .6
   제목 = 3 · 리드 = 2 · 챕터 제목 = 본문과 같은 1(크기 대신 색과 자리로 위계, FIELD는 파랑 · 쿠키런은 분홍) · 라벨 .6 · 캡션 .7 · Context/Approach/Impact = 24px 고정
   중요한 부분 = 볼드 + 분홍(원고 **…**) */
.fe-dark{--fr:16px;--pink:#ff7fcf;--ui:var(--pink)}  /* --ui = UI 글자 강조색 = 분홍(주영 10/22 확정). 파랑으로 바꾸려면 var(--blue-on-dark) */
@media(min-width:768px){.fe-dark{--fr:20px}}
@media(min-width:1200px){.fe-dark{--fr:24px}}
.fe-dark .md-head h1{font-size:calc(var(--fr) * 3);line-height:.95;letter-spacing:.01em}
.fe-dark .md-head .md-sub{font-size:calc(var(--fr) * 2);line-height:1.2}
.fe-dark .fe-meta,.fe-dark .label{font-size:calc(var(--fr) * .6)}
.fe-dark .fe-cai dt,.fe-dark .fe-cai dd{font-size:24px;line-height:1.2}
.fe-dark .fe-b.is-l .sec-head h2,.fe-dark .fe-b .sec-head h3{font-size:var(--fr);line-height:1.2;letter-spacing:0;color:var(--ui)}
.fe-hk{display:block;margin-bottom:4px;font-size:var(--r-lab);line-height:1.4;color:var(--muted)}  /* 장 머리 층 표기(L01 · Challenge) = 한국어 제목 위 작은 줄(10/22 편집안) */
.fe-dark .fe-b>.g .copy{font-size:var(--fr);line-height:1.45}
.fe-dark figcaption,.fe-dark .fe-wave-r span,.fe-dark .md-meta dd{font-size:calc(var(--fr) * .7)}
.fe-dark .fe-kw li{font-size:calc(var(--fr) * 1.5);line-height:1.2}
.fe-dark .fe-em{font-weight:500;color:var(--ui)}
@media(max-width:767px){.fe-dark .fe-cai dt,.fe-dark .fe-cai dd{font-size:16px}}
.fe-jump{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:calc(var(--fr) * .7)}.fe-jump span{color:var(--muted)}.fe-jump a{text-decoration:underline;text-underline-offset:4px}  /* 쿠키런 개요 핵심 판단 바로가기(S120) */
.fe-dark .fe-b .copy p+p{margin-top:1em}
@media(max-width:767px){.fe-dark .md-head h1{font-size:calc(var(--fr) * 2)}}
/* Featured 상세에는 화면 테두리 눈금자(style.css S06-A body::before · ::after) 안 씀(주영 10/21) */
body:has(.fe-b)::before,body:has(.fe-b)::after{content:none}
/* 어두운 상세 = 스크롤바 · 기본 컨트롤도 어둡게(web-design-guidelines) */
html:has(.fe-dark){color-scheme:dark}

/* ── 28 통합(F31) ──
   A3 도면이 그려지는 선(진입 1회 .fe-in, fe-fx.js): 구간 선 600ms --ease-io → 칸 테두리 → 안의 내용 300ms --ease-out 24px 위로. reduced · JS 없음 = 다 그려진 상태
   칸 테두리 · 박스 라인은 안 씀(FIELD 문법: 가로 선만, 주영 10/21 밤). SVG dashoffset · 글자 쪼개기 · 반복 재생 · 스크롤 되감기 없음 */
.fe-top{margin-top:var(--gap-s)}.fe-top .md-grid{margin-top:0}.fe-top figure{position:relative}
.fe-cai>div,.md-meta>div{position:relative;padding-top:16px}
.fe-cai>div::before,.md-meta>div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left}
@media(prefers-reduced-motion:no-preference){
 html.js .fe-b .sec-head::before{transform:scaleX(0);transform-origin:left;transition:transform var(--t-3) var(--ease-io)}
 html.js .fe-b .sec-head.fe-in::before{transform:scaleX(1)}
 /* .md-meta는 fe-fx.js가 도는 Featured 상세(.fe-dark)에서만 숨겼다 드러냄. Motion 상세는 그 스크립트가 없어 항상 보임(10/23) */
 html.js :is(.fe-cai,.fe-dark .md-meta):not(.fe-in)>div::before{transform:scaleX(0)}
 :is(.fe-cai,.md-meta)>div::before{transition:transform var(--t-3) var(--ease-io)}
 :is(.fe-cai,.md-meta)>div:nth-child(2)::before{transition-delay:var(--t-1)}:is(.fe-cai,.md-meta)>div:nth-child(3)::before{transition-delay:calc(var(--t-1) * 2)}
 :is(.fe-cai,.md-meta)>div:nth-child(n+4)::before{transition-delay:calc(var(--t-1) * 3)}
 html.js :is(.fe-cai,.fe-dark .md-meta):not(.fe-in)>div>*{opacity:0;transform:translateY(24px)}
 :is(.fe-cai,.md-meta)>div>*{transition:opacity var(--t-2) var(--ease-out) var(--t-3),transform var(--t-2) var(--ease-out) var(--t-3)}
}

/* 그림 칸 안 맞춤(box) · 위치 표시 사각 · 세로 그림은 화면 높이 안에 */
.fe-box{display:block;overflow:hidden}
.md-grid .fe-box img{width:100%;height:100%;object-fit:cover}
.md-grid .is-tall:not(.is-v) img{width:auto;max-width:100%;max-height:80svh;margin-inline:auto}

/* 2칸 표(역할 · 받은 조건 ↔ 내 범위 · 공통 ↔ 날씨별) · Image credits & methods 한 줄 */
.fe-b>.fe-tbl,.fe-b>.fe-meth{grid-column:7/-1;margin-top:var(--gap-s)}
.fe-tbl{width:100%;border-collapse:collapse}
.fe-tbl th,.fe-tbl td{padding:12px 24px 12px 0;text-align:left;vertical-align:top;border-top:1px solid var(--line);font-weight:400}
.fe-tbl th{font-size:var(--label);letter-spacing:var(--ls-cap);color:var(--muted)}
.fe-tbl td{width:50%}.fe-tbl td:first-child{color:var(--muted)}
.fe-tbl tr:last-child td{border-bottom:1px solid var(--line)}
.fe-meth{display:grid;row-gap:8px;color:var(--muted)}
.fe-meth .label{color:var(--muted)}
@media(max-width:700px){.fe-b>.fe-tbl,.fe-b>.fe-meth{grid-column:1/-1}}

.fe-b>.fe-iso{grid-column:1/-1;margin-top:var(--gap-s)}

/* ③ 아이소 컷어웨이: 평면(2D)이 고정 각도 마름모 판(3D)으로 스크롤 진입 1회 기울어짐(600ms --ease-io). 판 두께 = 1px 선 두 줄. 동작 줄이기 · JS 없음 = 기울어진 최종 상태 */
.fe-iso{--rx:60deg;--rz:-45deg}
.fe-iso-st{position:relative;aspect-ratio:21/9;display:grid;place-items:center;perspective:1800px;overflow:hidden}
.fe-iso-pl{position:relative;width:58%;aspect-ratio:3/2;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateZ(var(--rz));transition:transform var(--t-3) var(--ease-io)}
.fe-iso-pl img{display:block;width:100%;height:100%;border-radius:0}
.fe-iso-pl::before,.fe-iso-pl::after{content:"";position:absolute;inset:0;border:1px solid var(--ink);pointer-events:none}
.fe-iso-pl::after{opacity:.5;transform:translateZ(-14px)}
.fe-iso .fe-mk{transform:translateZ(3px) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1));transition:transform var(--t-3) var(--ease-io)}
@media(prefers-reduced-motion:no-preference){html.js .fe-iso:not(.fe-in){--rx:0deg;--rz:0deg}}
@media(max-width:700px){.fe-iso-st{aspect-ratio:4/3}.fe-iso-pl{width:78%}}
.fe-b .md-grid{align-items:start}

/* ── 28 통합 D7 · D8 (상세 공통: 웨더 · JY · Motion 5 · 쿠키런) ──
   S26 역할표: style.css 맨 위 --r-*로 제목/리드/챕터/본문/담당/캡션 분리. 챕터 500, 본문 행간 1.65, 캡션 최소 13px. --fr은 기존 도판 배율 유지.
   D7 본문 시작 = 12칸 중 7칸째, 제목 1~5칸(6칸 비움). 700 이하는 제목 → 본문 한 칸. About · 홈은 [data-page=detail] 밖이라 그대로 */
[data-page=detail] .md-head h1{font-size:var(--r-title);line-height:.95}
[data-page=detail] .md-head .md-sub{font-size:var(--r-lead);line-height:var(--heading-lh)}
[data-page=detail] .md-ov h2{font-size:calc(var(--fr) * 1.5);line-height:1.2}
[data-page=detail] .md-sec .sec-head h2,[data-page=detail] .fe-b.is-l .sec-head h2{font-size:var(--r-ch);font-weight:500;line-height:var(--heading-lh);letter-spacing:0}
[data-page=detail] .fe-b .sec-head h3{font-size:var(--r-ch);line-height:1.2}
[data-page=detail] .label,[data-page=detail] .md-meta dt{font-size:var(--r-lab)}
[data-page=detail] :is(.md-grid,.fe-top,.fe-iso) figcaption,[data-page=detail] .md-meta dd,[data-page=detail] .fe-wave-r span{font-size:var(--r-cap);line-height:1.45}
[data-page=detail] .md-sec .copy p,[data-page=detail] .fe-b>.g .copy,[data-page=detail] .fe-tbl{font-size:var(--r-body);line-height:var(--reading-lh)}
[data-page=detail] .fe-b>.g{grid-column:7/-1}
[data-page=detail] .md-sec.ch:not(.md-ov):not(.fe-b)>.g .copy{grid-column:7/-1}
[data-page=detail] .md-sec.ch .sec-head :is(.label,h2){grid-column:1/span 5;text-align:left}
[data-page=detail] .md-sec.ch .sec-head .label{grid-row:1}
[data-page=detail] .md-sec.ch .sec-head h2{grid-row:2}
.fe-dark .fe-b .sec-head .draw-body>*,.fe-dark .fe-b.is-l .sec-head .label,.fe-dark .fe-b.is-l .sec-head h2{grid-column:1/span 5}
@media(max-width:700px){
 [data-page=detail] .fe-b>.g,[data-page=detail] .md-sec.ch:not(.md-ov):not(.fe-b)>.g .copy,[data-page=detail] .md-sec.ch .sec-head :is(.label,h2),
 .fe-dark .fe-b .sec-head .draw-body>*,.fe-dark .fe-b.is-l .sec-head .label,.fe-dark .fe-b.is-l .sec-head h2{grid-column:1/-1}
}

/* ── F31 주영 피드백(10/21 밤): FIELD 문법 = 박스 라인 없이 가로 선만 · 12칸 격자 맞춤(이름 · 제목 1~5칸, 글 7~12칸) ── */
/* Context · Approach · Impact · 메타 표 = 챕터와 같은 격자 */
.fe-dark .md-ov .copy{grid-column:1/-1}
.fe-cai div,.fe-dark .md-meta>div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.fe-cai dt,.fe-dark .md-meta dt{grid-column:1/span 5}
.fe-cai dd,.fe-dark .md-meta dd{grid-column:7/-1;margin:0}
.fe-dark .md-meta{grid-column:1/-1;margin-top:var(--gap-s)}
/* 경험: 제목 · 글 1~5칸, 영상 7~12칸. 핑크 없음, 첫 문장만 볼드 */
.fe-dark .fe-b.is-side>.g,.fe-dark .fe-b.is-side>.fe-kw{grid-column:1/span 5}
.fe-dark .fe-b.is-side>.md-grid{grid-column:7/-1}
.fe-dark .fe-b.is-plain .sec-head :is(h2,h3){color:var(--ink)}
.fe-bd{font-weight:700}
/* 사운드 버튼: 박스 없이 글자 + 밑줄 */
.fe-wave-r button{font:inherit;font-size:var(--r-cap);line-height:1.4;color:var(--muted);background:none;border:0;border-bottom:1px solid transparent;border-radius:0;padding:4px 0;cursor:pointer;transition:color var(--t-2) var(--ease-out),border-color var(--t-2) var(--ease-out),transform var(--t-1) var(--ease-out)}
.fe-wave-r button::before{content:"▶";margin-right:8px;font-size:.75em}
.fe-wave-r button[aria-pressed=true]::before{content:"■"}
.fe-wave-r button:hover,.fe-wave-r button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
.fe-seg span{font-size:max(13px,var(--r-cap));line-height:1.3}
@media(max-width:700px){
 .fe-cai div,.fe-dark .md-meta>div{grid-template-columns:1fr;row-gap:8px}
 .fe-cai dt,.fe-cai dd,.fe-dark .md-meta dt,.fe-dark .md-meta dd{grid-column:1/-1}
 .fe-dark .fe-b.is-side>.g,.fe-dark .fe-b.is-side>.fe-kw,.fe-dark .fe-b.is-side>.md-grid{grid-column:1/-1}
}

.fe-iso.is-scrub .fe-iso-pl,.fe-iso.is-scrub .fe-mk{transition:none}

/* 10/22: 바뀐 번호(현장 ④ 가운데 포디움) = 분홍 · 머리 메타 표 삭제(크레딧과 겹침) */
.fe-dark .fe-mk.is-hl{border-color:var(--pink);color:var(--pink)}
.fe-dark .md-ov .md-meta{display:none}

/* ── 38 마감(10/22) ── */
/* 머리: 리드 → 담당 → 연도 · 분야. 모바일은 대표 영상 4:5 그대로(위아래 검은 공백 제거) */
.fe-dark .fe-show{margin-top:24px;max-width:40em;font-size:var(--fr);line-height:1.45;color:var(--muted)}
.fe-dark .fe-show+.fe-work{margin-top:4px}
.fe-dark .fe-work{margin-top:24px;max-width:40em;font-size:var(--fr);line-height:1.45}
.fe-dark .fe-work+.fe-meta{margin-top:16px}
@media(max-width:700px){.fe-dark .md-ov .yt{height:auto;aspect-ratio:4/5}}
/* Reference · Fog: 모바일에서 대표 장면은 한 줄 전체, 나머지 둘은 나란히 */
@media(max-width:700px){
 .fe-dark .fe-b>.md-grid.is-rep{grid-template-columns:1fr 1fr}
 .fe-dark .fe-b>.md-grid.is-rep>:first-child{grid-column:1/-1}
}
/* 사운드: 파형 위는 짧은 단계 이름(기 · 승 · 전 · 결), 좁은 폭에서는 긴 설명을 아래 목록으로(.fe-wave 폭 기준) */
.fe-seg b{font-weight:400}
.fe-seg i{font-style:normal}
.fe-seg-l{display:none;grid-column:1/-1;margin:0;padding:0;list-style:none;row-gap:4px;color:var(--muted);font-size:var(--r-cap);line-height:1.45}
@container (max-width:1060px){
 .fe-seg i{display:none}
 .fe-seg{inset:-32px 0 0}
 .fe-wv:has(.fe-seg){margin-top:36px}
 .fe-seg-l{display:grid}
}
/* 세로 영상(경험 · 현장 · 결과)은 12칸 격자 왼쪽에 붙여 캡션과 같은 줄에 */
.fe-dark .md-grid .is-tall video,.fe-dark .md-grid .is-tall:not(.is-v) img{margin-inline:0}
/* 어두운 상세 포커스 링 = 밝은 먹색(파랑 #315aca는 #0e0e0d 위에서 대비 약 3:1) · 터치 기기 버튼 높이 44px · 더블탭 확대 지연 없음 */
.fe-dark :is(a,button):focus-visible{outline-color:var(--ink)}
.fe-wave-r button{touch-action:manipulation}
@media(pointer:coarse){.fe-wave-r button{min-height:44px}}
/* F46: 작은 3열(Reference · System · TD 매뉴얼 · Media) · 모바일 2열(stack = 한 줄씩) · 소속 같은 작은 글 */
.fe-dark .fe-b>.md-grid.is-sm{grid-template-columns:repeat(3,minmax(0,1fr))}
.fe-dark .fe-b>.md-grid.is-sm>:first-child{grid-column:auto}
@media(max-width:700px){
 .fe-dark .fe-b>.md-grid.is-sm{grid-template-columns:1fr 1fr}
 .fe-dark .fe-b>.md-grid.is-sm.is-stack{grid-template-columns:1fr}
 /* S61: 한 장뿐인 줄 · 긴 카톡 캡처(is-full)는 2열이면 반쪽 빈칸 · 글자가 안 읽혀 한 열 */
 .fe-dark .fe-b>.md-grid.is-sm:is(.is-one,.is-full){grid-template-columns:1fr}
}
.fe-sm{font-size:.75em;font-weight:400;color:var(--muted)}
/* F47 미디어: 비율이 다른 그림(세로 현수막 · 가로 리플렛)을 같은 높이 한 줄로 작게 */
.fe-dark .fe-b>.md-grid.is-strip{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--gutter)}
.fe-dark .fe-b>.md-grid.is-strip>figure{flex:none;max-width:100%}
.fe-dark .fe-b>.md-grid.is-strip :is(img,video){width:auto;height:200px;max-width:100%;object-fit:contain}  /* 10/23: 그림 + 영상 6개가 1920에서 한 줄(한 화면)에 */
@media(max-width:700px){.fe-dark .fe-b>.md-grid.is-strip :is(img,video){height:120px}}
/* F51: 줄 머리(sub = 이름|이유) = 가는 윗선 + 이름(먹, 본문 크기) + 이유(회색). 데스크톱은 같은 줄(이름 왼 6 · 이유 오른 6), 모바일은 아래 줄 */
.fe-dark .fe-lbl{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);position:relative;margin-top:var(--gap-s);padding-top:12px;font-size:var(--r-body);font-weight:400;line-height:1.35;letter-spacing:0;color:var(--muted)}
.fe-dark .fe-lbl span:first-child{grid-column:1/span 6;color:var(--ink)}
.fe-dark .fe-lbl span:last-child:not(:first-child){grid-column:7/-1;text-align:right}
.fe-dark .fe-b.is-cont:not(:has(>.g))>.fe-lbl{margin-top:0}
.fe-dark .fe-b.has-lbl>.md-grid{margin-top:16px}
.fe-dark .fe-b.is-label-first>.g{grid-row:auto;padding-top:var(--gutter)}
.fe-dark .fe-b.is-label-first>.md-grid{margin-top:var(--gutter)}
@media(max-width:700px){
 .fe-dark .fe-lbl{display:block}
 .fe-dark .fe-lbl span{display:block;text-align:left!important}
 .fe-dark .fe-lbl span+span{margin-top:4px;font-size:var(--r-cap)}
}
/* F51 Challenge: 전/후 두 칸씩 짝(왼 = 전, 오른 = 후), 실현 안 된 초기안(Concept)만 채도 뺌 */
.fe-dark .is-un img{filter:saturate(.15) brightness(.8)}
.fe-dark .fe-b>.md-grid.is-pair{row-gap:calc(var(--gutter) * 2)}
@media(max-width:700px){.fe-dark .fe-b>.md-grid.is-pair{row-gap:32px}}
/* F51 Outcome: 세로 대표 영상(NAU) 왼쪽 4칸 + 오른쪽 8칸에 방문 영상 2열(세로 영상은 높이를 가로 영상에 맞춤) */
.fe-dark .fe-b>.md-grid.is-lead{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;align-items:start}
.fe-dark .fe-b>.md-grid.is-lead>figure{grid-column:span 4}
.fe-dark .fe-b>.md-grid.is-lead>:first-child{grid-row:1/span 2}
.fe-dark .fe-b>.md-grid.is-lead>:last-child video{width:auto;max-width:100%;max-height:17vw}
@media(max-width:700px){
 .fe-dark .fe-b>.md-grid.is-lead{grid-template-columns:1fr 1fr;grid-template-rows:none}
 .fe-dark .fe-b>.md-grid.is-lead>figure{grid-column:auto}
 .fe-dark .fe-b>.md-grid.is-lead>:first-child{grid-column:1/-1;grid-row:auto}
 .fe-dark .fe-b>.md-grid.is-lead>:last-child video{max-height:42vw}
}

/* ── F52 작은 그림 크게 보기(fe-fx.js): .fe-zoom 버튼(작은 칸 그림 · 영상) → <dialog class="fe-lb">. 같은 문서 View Transition으로 썸네일 자리에서 커짐 --t-2 --ease-out.
   동작 줄이기 = 이름 안 붙임 → 배경 페이드 --t-1만. View Transition 미지원 = 바로 열리고 페이드 --t-1. JS 없음 = 버튼 disabled(그림만 보임) ── */
.fe-zoom{display:block;width:100%;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;cursor:zoom-in;touch-action:manipulation;transition:transform var(--t-1) var(--ease-out)}
.fe-zoom:disabled{cursor:default}
.fe-zoom:active{transform:scale(.97)}
.fe-dark .md-grid.is-strip .fe-zoom{width:auto}
html:has(.fe-b){scrollbar-gutter:stable}
html:has(.fe-lb[open]){overflow:hidden}
.fe-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;overscroll-behavior:contain;background:color-mix(in srgb,var(--paper) 90%,transparent);color:var(--ink)}
.fe-lb[open]{display:grid;place-items:center}
.fe-lb::backdrop{background:none}
.fe-lb figure{margin:0;display:grid;row-gap:12px;width:fit-content;max-width:90vw}
.fe-lb img,.fe-lb video{display:block;width:auto;height:auto;max-width:min(90vw,160svh);max-height:86svh;object-fit:contain}
.fe-lb figcaption{font-size:var(--r-cap);line-height:1.45;color:var(--muted)}
.fe-lb-x{position:absolute;top:16px;right:var(--margin);font:inherit;font-size:var(--r-cap);line-height:1.4;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:6px 0 4px;cursor:pointer;touch-action:manipulation;transition:border-color var(--t-2) var(--ease-out),transform var(--t-1) var(--ease-out)}
.fe-lb-x:hover{border-bottom-color:var(--ink)}
.fe-lb-x:active{transform:scale(.97)}
.fe-lb button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(pointer:coarse){.fe-zoom,.fe-lb-x{min-height:44px}}
@media(prefers-reduced-motion:no-preference){.fe-vt{view-transition-name:fe-zoom}}
@media(prefers-reduced-motion:reduce){.fe-zoom:active,.fe-lb-x:active{transform:none}.fe-zoom,.fe-lb-x{transition:none}}
.fe-zooming::view-transition-group(fe-zoom),.fe-zooming::view-transition-old(root),.fe-zooming::view-transition-new(root){animation-duration:var(--t-2);animation-timing-function:var(--ease-out)}
@media(prefers-reduced-motion:reduce){.fe-zooming::view-transition-old(root),.fe-zooming::view-transition-new(root){animation-duration:var(--t-1)}}
@supports not (view-transition-name:a){.fe-lb[open]{animation:fe-lb-in var(--t-1) var(--ease-out)}}
@keyframes fe-lb-in{from{opacity:0}}

/* ── F53 사운드 현재 구간 강조(fe-fx.js `mark`) + 재생 · 영상 멈추기 버튼 눌림 ──
   재생 중에만: 현재 구간 이름표 = 먹 + 500, 나머지 = 원래 회색(--t-1). 현재 구간 띠에 분홍 2px 밑선이 왼쪽에서 그려짐(--t-2). 모바일 목록(.fe-seg-l)도 같은 항목. 정지하면 처음 모습.
   소리 낭독을 방해하지 않게 aria-live 없음. 동작 줄이기 = 색 · 선 바로 바뀜, 눌림 끔 */
.fe-seg>span,.fe-seg-l li{transition:color var(--t-1) var(--ease-out)}
.fe-seg>span::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--ui);transform:scaleX(0);transform-origin:left;transition:transform var(--t-2) var(--ease-out)}
.fe-wave-r.is-play :is(.fe-seg>span,.fe-seg-l li).is-cur{color:var(--ink);font-weight:500}
.fe-wave-r.is-play .fe-seg>span.is-cur::after{transform:scaleX(1)}
.fe-wave-r button:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.fe-wave-r button:active{transform:none}.fe-wave-r button,.fe-seg>span,.fe-seg>span::after,.fe-seg-l li{transition:none}}

/* ── F54 이름표 줄(.fe-lbl) 선 그리기: 장 머리 선과 같은 문법. .fe-in(fe-fx.js 0번 관찰)이 붙으면 선 scaleX(0 → 1) --t-3 --ease-io 왼쪽 기준 → 이름 · 이유 opacity --t-2 --ease-out(지연 --t-1).
   동작 줄이기 · JS 없음 = 다 그려진 상태 ── */
.fe-dark .fe-lbl::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:color-mix(in srgb,var(--ink) 40%,transparent);transform-origin:left}
@media(prefers-reduced-motion:no-preference){
 html.js .fe-lbl:not(.fe-in)::before{transform:scaleX(0)}
 html.js .fe-lbl:not(.fe-in)>span{opacity:0}
 .fe-lbl::before{transition:transform var(--t-3) var(--ease-io)}
 .fe-lbl>span{transition:opacity var(--t-2) var(--ease-out) var(--t-1)}
}

/* ══ 10/22 W4 · W6-5 ══ */
/* W4-2 · 4-4 표: 열 수만큼 나눔(L01 조건 3칸 · L02 규칙 3칸). 머리 칸이 빈 규칙 표는 첫 열이 행 이름 */
.fe-tbl td{width:auto}
.fe-tbl th:empty{border-top-color:transparent}
.fe-b>.fe-tbl:not(:first-child){margin-top:var(--gap-s)}
/* W4-6 방문 인증 = 작은 썸네일 한 줄 띠 */
.fe-dark .fe-b>.md-grid.is-thumbs{display:flex;flex-wrap:nowrap;gap:var(--gutter);align-items:flex-start;margin-top:16px}
.fe-dark .fe-b>.md-grid.is-thumbs>figure{flex:0 0 clamp(104px,11vw,168px);min-width:0}
.fe-dark .md-grid.is-thumbs figcaption{font-size:max(12px,calc(var(--fr) * .55));line-height:1.4}
@media(max-width:700px){.fe-dark .fe-b>.md-grid.is-thumbs{flex-wrap:wrap}.fe-dark .fe-b>.md-grid.is-thumbs>figure{flex-basis:calc(50% - var(--gutter) / 2)}}
.h-t .h-x{display:inline-block;width:.8em;height:.8em;vertical-align:-.12em}
.h-t .h-circ{display:inline-block;width:1.5em;height:1em;vertical-align:-.2em}
/* W5 쿠키런 손글씨(C · B): 구역 위 빈 곳에 놓음 */
.h-pair{position:absolute;left:50%;top:calc(var(--gap-s) - 46px);translate:-50% 0}
.h-ref{position:absolute;right:0;top:calc(var(--gap-s) - 6px)}
.h-sel{position:absolute;right:0;top:calc(var(--gap-s) - 6px)}
.h-field{position:absolute;left:calc(50% + 24px);top:calc(var(--gap-s) - 40px)}
.fe-cr dd{position:relative;display:flex;align-items:center;gap:20px}
.fe-cr .h-ring{align-self:flex-start}
/* W6-5 상세 빈 화면 제거: 구역 고정 높이 · 큰 하단 여백을 풀고 구역 사이 간격은 한 값 */
[data-page=detail] .md-sec,[data-page=detail] .md-sec.ch{min-height:0;padding-bottom:clamp(96px,14vh,180px)}
[data-page=detail] .md-sec.ch.fe-b.fe-b.fe-b{padding-top:0}
[data-page=detail] .md-ov{padding-bottom:clamp(96px,14vh,180px)}
[data-page=detail] .md-sec.ch.fe-b:last-of-type{padding-bottom:0}
[data-page=detail] .md-sec>.sec-head{margin-bottom:clamp(24px,4vh,40px)}
[data-page=detail] .md-sec .md-grid{margin-top:clamp(24px,4vh,40px)}
[data-page=detail] .md-sec.fe-b.fe-b.fe-b>.md-grid{margin-top:clamp(24px,4vh,40px)}
.fe-link{text-decoration:underline;text-underline-offset:4px}
.fe-dark .fe-l00{margin:0 0 32px;font-size:var(--fr);font-weight:500;line-height:1.2;letter-spacing:0;color:var(--ui)}

/* ── NOW 상세(1022 지시서): 쿠키런 층 문법(.fe-dark 규칙 전부) + 라이트 톤(.fe-lt) ──
   톤 = 아래 토큰 한 묶음. 다크로 바꾸려면 이 값만 바꿈(--paper #0e0e0d · --ink #ecebe6 · --muted #9a9b95 · --line #3a3b37 · --now-red 밝게 · color-scheme dark) */
:root{--now-red:#e20215}  /* 책 로고 · 본문 강조 실측 #e20215 */
:is(:root,body):has(.fe-lt){--paper:#f3f2ed;--ink:#20221f;--muted:#666963;--line:#c8cac1;color-scheme:light;background:var(--paper)}
.fe-dark.fe-lt{--ui:var(--now-red)}
@media(max-width:700px){.fe-lt .md-ov .yt,.fe-lt .md-ov .yt.has-hero{aspect-ratio:16/9}}
/* 텍스트 원형(이미지 아님): 리스너 3 · 핵심 가치 3 */
.fe-orbs{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.fe-orbs li{aspect-ratio:1;display:grid;place-items:center;padding:12%;border:1px solid var(--ink);border-radius:50%;text-align:center;font-size:calc(var(--fr) * .9);line-height:1.3}
.fe-dark .fe-b .copy .fe-pr{margin-top:16px;font-size:calc(var(--fr) * .6);letter-spacing:var(--ls-cap);color:var(--muted)}
/* 하이라이트 장면: AUDIO LIVE STATION(전, 흐리게 · 취소선) → AUDIO PLAYGROUND(후, NOW 레드 · 크게) */
.fe-ba{grid-column:1/-1;display:grid;row-gap:calc(var(--gutter) * 2);margin-top:var(--gap-s)}
.fe-ba p{margin:0;display:grid;row-gap:8px;font-weight:600;line-height:.95;letter-spacing:var(--ls-en-d)}
.fe-ba span{font-size:var(--r-lab);font-weight:400;line-height:1.4;letter-spacing:var(--ls-cap);color:var(--muted)}
.fe-ba s{font-size:calc(var(--fr) * 3);color:var(--muted);opacity:.7;text-decoration-thickness:.06em}
.fe-ba strong{font-size:clamp(28px,7.4vw,144px);font-weight:600;color:var(--ui)}
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){.fe-ba p{animation:fe-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}
}

/* ── 도식(NOW 1022 후속, 레퍼런스 SAEROK 문법): 얇은 선 · 크기에 뜻이 있는 원 · 단계 화살표 · 선 아래 이름표. 값은 토큰만, 파랑 없음 ── */
.fe-b>.fe-dg{grid-column:1/-1;margin-top:var(--gap-s);--dg-gap:56px}
.fe-dg h4{margin:0;font-size:calc(var(--fr) * .8);font-weight:400;line-height:1.35;color:var(--muted)}
.fe-dg small{display:block;font-size:calc(var(--fr) * .6);line-height:1.4;color:var(--muted)}
/* 경쟁 서비스 → 포지셔닝 맵 */
.dg-compete{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--gap-s);align-items:start}
.dg-l{grid-column:1/span 5}
.dg-rows{list-style:none;margin:0;padding:0}
.dg-bk{margin:48px 0 0}.dg-bk img{display:block;width:100%;height:auto}.dg-bk figcaption{margin-top:8px;font-size:var(--r-cap);line-height:1.45;color:var(--muted)}
.dg-rows li{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,2fr);align-items:center;column-gap:var(--gutter);padding:16px 0;border-top:1px solid var(--line);font-size:calc(var(--fr) * .85);line-height:1.45}
.dg-rows li:last-child{border-bottom:1px solid var(--line)}
.dg-ic{width:24px;height:24px;border-radius:50%;background:#a6a7a1;display:grid;place-items:center;font:600 13px/1 var(--f);font-style:normal;color:#fff}
.dg-rows .is-now .dg-ic{background:transparent}
.dg-rows b{font-weight:500}.dg-rows span{color:var(--muted)}
.dg-rows .is-now b,.dg-rows .is-now span{color:var(--ui)}
.dg-map{grid-column:7/-1;margin:0}.dg-map img{display:block;width:100%;height:auto;border:1px solid var(--line)}.dg-map figcaption{margin-top:8px}
/* 인터뷰 7명 → 리스너 3유형 → 차별점 */
.dg-listeners{--c:minmax(0,1.25fr) minmax(0,.9fr) minmax(0,1.35fr)}
.dg-cols,.dg-lane{display:grid;grid-template-columns:var(--c);column-gap:var(--dg-gap)}
.dg-cols span{padding-top:12px;border-top:1px solid var(--ink);font-size:calc(var(--fr) * .7);color:var(--muted)}
.dg-lanes{list-style:none;margin:0;padding:0}
.dg-lane{align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.dg-dots{list-style:none;margin:0;padding:0 16px 0 0;display:grid;row-gap:10px;border-right:1px solid var(--ink)}
.dg-dots li{display:flex;align-items:baseline;gap:10px;font-size:calc(var(--fr) * .7);line-height:1.35}
.dg-dots i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.dg-oc{position:relative;display:grid;justify-items:center}
.dg-oc::before{content:"";position:absolute;top:50%;left:calc(var(--dg-gap) * -1);right:calc(var(--dg-gap) * -1 + 16px);border-top:1px solid var(--ink)}
.dg-orb{position:relative;z-index:1;width:max(calc(220px * var(--s)),7.5em);max-width:100%;aspect-ratio:1;display:grid;place-content:center;padding:8%;border:1px solid var(--ink);border-radius:50%;background:var(--paper);text-align:center}
.dg-orb b{font-size:calc(var(--fr) * .8);font-weight:500;line-height:1.3}
.dg-tr{margin:0;font-size:calc(var(--fr) * .8);line-height:1.5}
.dg-tr small{margin-top:6px}
.dg-usp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;padding-top:var(--gap-s)}
.dg-usp h4{grid-column:1/span 3}
.dg-usp ul{grid-column:4/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.dg-usp li{aspect-ratio:1;max-width:200px;display:grid;place-items:center;padding:8%;border:1px solid var(--ui);border-radius:50%;color:var(--ui);text-align:center;font-size:calc(var(--fr) * .75);font-weight:500;line-height:1.35}
.dg-msg{margin:var(--gap-s) 0 0;max-width:30em;font-size:calc(var(--fr) * 1.2);line-height:1.4;margin-left:calc((100% - var(--gutter) * 11) / 12 * 3 + var(--gutter) * 3)}
/* 키워드 → 놀이터 정의 → 핵심 가치 ┃ 디자인 원칙 */
.dg-r{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);column-gap:var(--gutter);padding:32px 0;border-top:1px solid var(--line)}
.dg-r:first-child{border-top:1px solid var(--ink)}
.dg-kw{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dg-kw li{padding:4px 16px 5px;border:1px solid var(--ink);border-radius:999px;font-size:calc(var(--fr) * .8)}
.dg-lead{margin:24px 0 0;font-size:var(--fr);line-height:1.45}
.dg-st{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.dg-st li{padding-top:12px;border-top:1px solid var(--line)}
.dg-st b{display:block;font-size:calc(var(--fr) * 1.1);font-weight:500;line-height:1.3}
.dg-st span{display:block;margin-top:8px;font-size:calc(var(--fr) * .7);line-height:1.5;color:var(--muted)}
.dg-cs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.dg-cs li{text-align:center}
.dg-c{width:min(100%,220px);aspect-ratio:1;margin:0 auto;display:grid;place-items:center;padding:12%;border:1px solid var(--ink);border-radius:50%;font-size:calc(var(--fr) * .85);font-weight:500;line-height:1.3}
.dg-c.is-fill{background:var(--ui);border-color:var(--ui);color:var(--paper)}
.dg-cs p{margin:16px auto 0;max-width:19em;font-size:calc(var(--fr) * .7);line-height:1.5;color:var(--muted)}
.dg-cs.is-pr li::before{content:"";display:block;width:1px;height:32px;margin:0 auto 16px;background:var(--ink)}
/* 그리드 → 배치 → 샘플 → 본 인쇄 */
.dg-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.dg-steps li{position:relative}
.dg-steps svg{display:block;width:100%;max-width:200px;height:auto;color:var(--ink);fill:none;stroke:currentColor;stroke-width:1}
.dg-steps svg *{vector-effect:non-scaling-stroke}
.dg-steps .dg-thin{opacity:.6}.dg-steps .dg-fill rect{fill:currentColor;stroke:none;opacity:.85}
.dg-steps .dg-fill .dg-ui,.dg-steps .dg-cover{fill:var(--ui);stroke:none;opacity:1}.dg-steps .dg-fill .dg-hatch{fill:var(--line);opacity:1}
.dg-steps .dg-now{fill:var(--paper);stroke:none;font:600 28px/1 var(--f);letter-spacing:-.02em}
.dg-steps b{display:block;margin-top:16px;padding-top:12px;border-top:1px solid var(--ink);font-size:calc(var(--fr) * .8);font-weight:500;line-height:1.35}
.dg-steps p{margin:6px 0 0;font-size:calc(var(--fr) * .7);line-height:1.5;color:var(--muted)}
.dg-steps li:not(:last-child)::after{content:"";position:absolute;top:100px;right:calc(var(--gutter) / -2 - 4px);width:8px;height:8px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}
@media(max-width:1100px){
 .fe-b>.fe-dg{--dg-gap:32px}
 .dg-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}.dg-steps li:nth-child(2n)::after{content:none}
 .dg-st,.dg-cs,.dg-usp ul{grid-template-columns:1fr}
}
@media(max-width:767px){
 .dg-compete{display:block}.dg-rows{margin-bottom:var(--gap-s)}
 .dg-cols{display:none}
 .dg-lane{display:block}
 .dg-dots{padding:0 0 0 12px;border-right:0;border-left:1px solid var(--ink)}
 .dg-oc{margin:24px 0;justify-items:start}.dg-oc::before{content:none}
 .dg-orb{width:max(calc(160px * var(--s)),7.5em)}  /* 작은 원(--s .62)도 글자 3줄이 들어가는 최소 지름 = 정원 유지 */
 .dg-usp{display:block}.dg-usp h4{margin-bottom:24px}.dg-usp li{margin-bottom:16px;max-width:200px}
 .dg-msg{margin-left:0}
 .dg-r{display:block}.dg-r h4{margin-bottom:16px}
 .dg-cs li{margin-bottom:32px}
 .dg-steps li::after{content:none!important}
}
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){.fe-dg :is(.dg-lane,.dg-r,.dg-steps li,.dg-rows li,.dg-map,.dg-usp,.dg-msg){animation:fe-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}}
}
.fe-b>.fe-bk{grid-column:1/-1;margin:var(--gap-s) 0 0;padding-top:12px;border-top:1px solid var(--ink);font-size:calc(var(--fr) * .8);font-weight:400;line-height:1.35;color:var(--muted)}

/* ── 웨더 1022 ──
   주체 칩(.fe-who): 모든 미디어 캡션 끝에 직접 / 팀 라벨 · 2D 기기 목업(.lb-*: CSS로 그린 폰 9:19.5 · 태블릿 16:10, 사진 · 3D 아님, 로고 · 기기명 없음)
   목업 3안: A 선(기본) · B 면(.is-solid) · A+ 치수(.is-dim) · 9겹 분해도(.fe-ex, 정지) · 전달 기록(.fe-dlv) */
.fe-who{display:block;width:fit-content;margin-top:8px;padding:1px 10px;border:1px solid var(--line);border-radius:var(--r-tag);font-size:var(--r-lab);letter-spacing:var(--ls-cap);line-height:1.5;color:var(--muted)}
.fe-who{font-style:normal}
.fe-who.is-me{border-color:var(--ink);color:var(--ink)}
.fe-b>.fe-tbl.is-w{grid-column:1/-1}
.fe-tbl.is-w td:first-child{color:var(--ink)}

.lb-devs{--cols:3;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--gap-s);align-items:start}
.lb-devs.is-2{--cols:2}.lb-devs.is-5{--cols:5}.lb-devs.is-tab{--cols:1}
.fe-b>.lb-devs{grid-column:1/-1;margin-top:var(--gap-s)}
.lb-device{margin:0;min-width:0}
.lb-device figcaption{margin-top:28px;max-width:32em;font-size:var(--r-cap);line-height:1.45;color:var(--muted)}
.lb-device figcaption b{display:block;margin-bottom:4px;font-weight:500;color:var(--ink)}
.lb-device figcaption small{display:block;margin-top:8px;font-size:var(--r-lab);letter-spacing:var(--ls-cap)}
.lb-phone,.lb-tab{position:relative;box-sizing:border-box;width:100%;max-width:var(--lb-w,260px);border:1.5px solid var(--ink);background:transparent}
.lb-phone{aspect-ratio:9/19.5;padding:3.4%;border-radius:13% / 6%}
.lb-tab{aspect-ratio:16/10;padding:2.4%;border-radius:4.5% / 7.2%}
.lb-phone::before,.lb-tab::before{content:"";position:absolute;z-index:2;left:50%;border-radius:50%;background:var(--ink)}
.lb-phone::before{top:3.4%;width:4.2%;aspect-ratio:1;transform:translate(-50%,60%)}
.lb-tab::before{top:1.1%;width:1.3%;aspect-ratio:1;transform:translateX(-50%)}
.lb-btn{position:absolute;right:-3.2%;width:2%;border:1.5px solid var(--ink);border-left:0;border-radius:0 2px 2px 0;background:var(--paper)}
.lb-btn--vol{top:19%;height:10%}.lb-btn--pwr{top:32%;height:5.5%}
.lb-tab .lb-btn{right:-1.3%;width:.9%}.lb-tab .lb-btn--vol{top:18%;height:13%}.lb-tab .lb-btn--pwr{top:35%;height:7%}
.lb-screen{position:relative;width:100%;height:100%;border-radius:10.5% / 4.8%;overflow:hidden}
.lb-tab .lb-screen{border-radius:2.6% / 4.2%}
.lb-screen>img,.lb-screen>video{display:block;width:100%;height:100%;object-fit:cover;object-position:top;background:rgb(32 34 31 / .06)}
/* B 면: 먹색 베젤 채움 */
.lb-devs.is-solid :is(.lb-phone,.lb-tab){background:var(--ink)}
.lb-devs.is-solid .lb-btn{background:var(--ink)}
/* A+ 치수: A + 아래 · 왼쪽 치수선(폰 1080 / 2340, 태블릿 2560 × 1600) */
.lb-dw,.lb-dh{display:none;font-style:normal;font-size:var(--r-lab);letter-spacing:var(--ls-cap);color:var(--ink);align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.lb-dw::before,.lb-dw::after{content:"";flex:1;min-width:0;height:9px;background:linear-gradient(var(--ink),var(--ink)) center / 100% 1px no-repeat}
.lb-dw::before{border-left:1px solid var(--ink)}.lb-dw::after{border-right:1px solid var(--ink)}
.lb-dh::before,.lb-dh::after{content:"";flex:1;min-width:0;width:9px;background:linear-gradient(var(--ink),var(--ink)) center / 1px 100% no-repeat}
.lb-dh::before{border-top:1px solid var(--ink)}.lb-dh::after{border-bottom:1px solid var(--ink)}
.lb-devs.is-dim :is(.lb-dw,.lb-dh){display:flex}
.lb-dw{position:absolute;left:0;right:0;top:calc(100% + 14px)}
.lb-dh{position:absolute;top:0;bottom:0;right:calc(100% + 14px);writing-mode:vertical-rl;transform:rotate(180deg)}
.lb-devs.is-dim :is(.lb-phone,.lb-tab){margin:0 0 40px 40px;width:calc(100% - 40px)}
@media(max-width:700px){.lb-devs,.lb-devs.is-2,.lb-devs.is-5{--cols:2;row-gap:calc(var(--gap-s) / 2)}.lb-devs.is-tab{--cols:1}}

/* 9겹 분해도: 투명 레이어 PNG를 CSS 3D로 띄운 정지 도식(아이소 각도는 fe-iso와 같은 계열) + 오른쪽 목록 */
.fe-b>.fe-ex{grid-column:1/-1;margin:var(--gap-s) 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:24px;align-items:center}
.fe-ex-st{grid-column:1/span 7;position:relative;aspect-ratio:7/5.6;display:grid;place-items:center;perspective:2000px;container-type:inline-size}
.fe-ex-pl{--rx:60deg;--rz:-40deg;position:relative;width:40%;aspect-ratio:720/900;transform-style:preserve-3d;transform:translateY(8%) rotateX(var(--rx)) rotateZ(var(--rz))}
.fe-ex-l{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--i) * 5.4cqw))}
.fe-ex-l img{display:block;width:100%;height:100%}
.fe-ex-l::after{content:"";position:absolute;inset:0;border:1px solid var(--ink);opacity:.22;pointer-events:none}
.fe-ex-pl .fe-mk{left:0;top:100%;transform:translateZ(2px) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1))}
.fe-ex-ls{grid-column:9/-1;list-style:none;margin:0;padding:0}
.fe-ex-ls li{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:10px 0;border-top:1px solid var(--line);font-size:var(--r-cap);line-height:1.4}
.fe-ex-ls li:last-child{border-bottom:1px solid var(--line)}
.fe-ex-n{color:var(--muted);font-variant-numeric:tabular-nums}
.fe-ex-ls b{font-weight:500;font-size:calc(var(--fr) * .8)}
.fe-ex-ls em{font-style:normal;font-size:var(--r-lab);letter-spacing:var(--ls-cap);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-tag);padding:0 8px;align-self:center}
.fe-ex-ls li>span:last-child{grid-column:2/-1;color:var(--muted)}
.fe-ex figcaption{grid-column:1/-1;max-width:48em;font-size:var(--r-cap);line-height:1.45;color:var(--muted)}
.fe-ex figcaption>span:not(.fe-who){display:block;margin-top:4px}
@media(max-width:700px){.fe-ex-st,.fe-ex-ls{grid-column:1/-1}}

/* 구름만 바꾼 4장(프레임 없음, 한 줄) */
.md-grid.is-sw{grid-template-columns:repeat(4,minmax(0,1fr))}
.md-grid.is-sw figure img{max-height:none}
@media(max-width:700px){.md-grid.is-sw{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 전달 기록: 크게 3건 + 한 줄 타임라인 + 최종 전달본. 용량은 조건이 다른 기록값이라 개선율로 읽히게 하지 않음(→ 는 프레임 수 표기에만) */
.fe-b>.fe-dlv{grid-column:1/-1;margin-top:var(--gap-s)}
.dl-big,.dl-tl{list-style:none;margin:0;padding:0;display:grid;column-gap:var(--gutter)}
.dl-big{grid-template-columns:repeat(3,minmax(0,1fr))}
.dl-big li{display:grid;row-gap:12px;align-content:start;padding-top:16px;border-top:1px solid var(--ink)}
.dl-big b{font-size:calc(var(--h2) * .75);font-weight:600;line-height:1;letter-spacing:var(--ls-en-d);font-variant-numeric:tabular-nums}
.dl-big h4{margin:0;font-size:calc(var(--fr) * 1.1);font-weight:500;line-height:1.2}
.dl-big p{margin:0;font-size:var(--fr);line-height:1.5}
.dl-big small{font-size:var(--r-cap);line-height:1.45;color:var(--muted);letter-spacing:var(--ls-cap)}
.dl-tl{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:var(--gap-s)}
.dl-tl li{display:grid;row-gap:4px;align-content:start;padding-top:12px;border-top:1px solid var(--line);font-size:var(--r-cap);line-height:1.4}
.dl-tl b{font-weight:500;font-size:calc(var(--fr) * .85);font-variant-numeric:tabular-nums}
.dl-tl small{color:var(--muted)}
.dl-last{margin:var(--gap-s) 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:16px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);font-size:var(--fr);line-height:1.5}
.dl-last b{grid-column:1/span 6;font-weight:500}
.dl-last span{grid-column:7/-1}
.dl-cap{margin:16px 0 0;max-width:48em;font-size:var(--r-cap);line-height:1.45;color:var(--muted)}
@media(max-width:700px){.dl-big{grid-template-columns:1fr;row-gap:32px}.dl-tl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}.dl-last b,.dl-last span{grid-column:1/-1}.dl-big b{font-size:calc(var(--body) * 2.2)}}

/* 이름표 줄(.fe-lbl, 라이트 상세): 12칸 전폭 윗선 + 이름 · 이유 한 줄. 어두운 상세는 위 F54 규칙 */
.md:not(.fe-dark) .fe-b>.fe-lbl{grid-column:1/-1;margin:var(--gap-s) 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--r-body);font-weight:400;line-height:1.35;letter-spacing:0;color:var(--muted)}
.md:not(.fe-dark) .fe-b>.fe-lbl span:first-child{color:var(--ink);margin-right:1em}
.md:not(.fe-dark) .fe-b.is-cont>.fe-lbl+.md-grid{margin-top:24px}
/* 세로 영상 2장(전 ↔ 후): 왼쪽 정렬 · 화면 높이 안 */
.md-grid.is-left .is-tall video{margin-inline:0;max-height:72svh}
/* NOW 히어로 = 목업 모음 2x2(영상은 OUTCOME으로) */
.fe-dark .md-ov .yt .dg-hg{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.fe-dark .md-ov .yt .dg-hg img{position:static;width:100%;height:100%;object-fit:cover;border-radius:0}
@media(max-width:700px){.fe-lt .md-ov .yt.has-hero.is-grid{aspect-ratio:3/2;height:auto}}

/* ── 웨더 톤(쿠키런 층 문법 + OCT002 하늘색): 바탕 · 먹 · 파랑 강조는 OCT002 웨더 값(case.css .case-weather). 머리 = 색 입힌 카드 3장 위로 캐릭터가 튀어나옴(OCT002 .wx-pop) ── */
.fe-dark.fe-lt[data-id=samsung-weather]{--ui:#5B9BD5}  /* 10/25 3차 W12: 하늘색 바탕(.fe-wx) 해제, 종이 바탕 + 강조 1색(DECISIONS §3). S90: 하늘 #5B9BD5(S89 주영 확정) */
/* S99 웨더 같은 사람, 다른 날씨 = 옷 카드 회전판(S96에서 지운 규칙 되살림) */
.wx-pop{--bh:clamp(320px,26vw,520px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);padding-top:calc(var(--bh) * .34);margin-top:var(--gap-s)}
.wx-pop-card{position:relative;margin:0}
.wx-pop-box{position:relative;height:var(--bh);padding:24px;background:var(--g);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.is-sunny .wx-pop-box{--g:linear-gradient(180deg,#8cc4f2 0%,#bfdef8 62%,#e4f1fc 100%);color:#0d1a27}
.is-rain .wx-pop-box{--g:linear-gradient(180deg,#0e1b38 0%,#1f3a66 64%,#38598a 100%)}
.is-thunder .wx-pop-box{--g:linear-gradient(180deg,#2c3a3f 0%,#4b5c58 62%,#6d7f77 100%)}
.is-rain .wx-pop-box{align-items:flex-end;text-align:right}
.wx-pop-top{display:flex;flex-direction:column;gap:6px;max-width:46%;margin:0;position:relative;z-index:2}
.wx-pop-top b{font-size:calc(var(--fr) * 1.4);font-weight:500;line-height:1;letter-spacing:var(--ls-en-d)}
.wx-pop-top span{font-size:var(--r-cap);line-height:1.45;opacity:.85}
.wx-pop-bot{position:relative;z-index:2;max-width:44%;margin:0;font-size:var(--r-cap);line-height:1.5}
.wx-pop-ch{position:absolute;z-index:1;bottom:5%;height:var(--h);width:auto;max-width:none;pointer-events:none;filter:drop-shadow(0 28px 24px rgb(8 22 40 / .28))}
.is-sunny .wx-pop-ch{--h:136%;right:6%}.is-rain .wx-pop-ch{--h:122%;left:0}.is-thunder .wx-pop-ch{--h:104%;right:8%}
.wx-pop-cap{grid-column:1/-1;margin:16px 0 var(--gap-s);font-size:var(--r-cap);line-height:1.5;color:var(--muted)}
@media(max-width:700px){.wx-pop{grid-template-columns:1fr;row-gap:calc(var(--bh) * .4);--bh:300px}.wx-pop-cap{margin-top:calc(var(--bh) * -.2)}}
/* S30 캐러셀(fe-fx.js 5): 화면 폭 원통에 카드가 둘러섬. 옆 카드는 화면 끝에서 잘림(가로 넘침 없음). 뒤 빛 = 앞 카드 색(--c) */
.wx-pop.is-car{display:block;--cw:clamp(260px,26vw,440px)}
.wx-car{position:relative;height:var(--bh);width:100vw;margin-left:calc(50% - 50vw);overflow-x:clip;perspective:1800px;cursor:grab;touch-action:pan-y;user-select:none}
.wx-car.is-drag{cursor:grabbing}.wx-car:focus-visible{outline:1px solid var(--blue);outline-offset:-1px}
.wx-car-r{position:absolute;left:50%;top:0;width:0;height:100%;transform-style:preserve-3d}
.is-car .wx-pop-card{position:absolute;top:0;left:calc(var(--cw) / -2);width:var(--cw);will-change:transform}
.wx-car-g{position:absolute;inset:-30% 0 -10%;pointer-events:none;background:radial-gradient(40% 50% at 50% 55%,rgb(var(--c,200 210 220) / .7),transparent 75%);filter:blur(48px)}
.is-car .wx-pop-cap{margin-top:24px}
@media(max-width:700px){.wx-pop.is-car{--cw:72vw}}

/* ── JY 톤(쿠키런 층 문법 + 앱 Rams 색): 바탕 = 앱 타일 면 · 먹 · 보조 · 선은 JY WORK OS design-kit DESIGN_SYSTEM.md 값. 글자 강조 = 앱의 작은 글자용 주황(#a33a17, 바탕 대비 5.35:1). 원래 주황 #df4f24는 3.21:1이라 글자에 안 씀 ── */
:is(:root,body):has(.fe-os){--paper:#e9e7e0;--ink:#20201e;--muted:#56544e;--line:#b8b4aa;color-scheme:light;background:var(--paper)}
.fe-dark.fe-lt.fe-os{--ui:#a33a17}
[data-page=detail] .md[data-id=jy-work-os] .md-head .fe-work{font-size:var(--r-role);line-height:1.45}
/* ── 지시서 14 (2026-10-23) 상세 ── */
.lb-cap{margin:16px 0 0;font-size:var(--r-cap);line-height:1.4;color:var(--muted);letter-spacing:var(--ls-cap)}
.fe-b>.lb-cap{grid-column:1/-1}
.fe-b>.fe-next{grid-column:1/-1;margin:var(--gap-s) 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fr)}
.dl-big:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.fe-more .dl-tl{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){.fe-more .dl-tl{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 웨더 히어로(SOL 10/23): 개발 전달 영상 4:5를 틀 없이 같은 크기 3열로. 폰 하단을 암시하지 않음 */
.lb-devs.is-flat{grid-template-columns:repeat(3,minmax(0,var(--lb-w)));column-gap:var(--gutter);justify-content:start}
.lb-art{aspect-ratio:576/720;overflow:hidden;background:rgb(32 34 31 / .06)}
.lb-art>video,.lb-art>img{display:block;width:100%;height:100%;object-fit:cover}
.lb-flat figcaption{margin-top:16px}
@media(max-width:700px){.lb-devs.is-flat{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px}}
.fe-dark .fe-b>.md-grid.is-sm.is-cand{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px var(--gutter)}
.md-grid.is-cand figcaption{font-size:var(--r-lab);line-height:1.35}
.md-grid.is-cand figcaption .todo-h{display:block;margin-top:2px;padding:0 6px;font-size:1em}
@media(max-width:900px){.fe-dark .fe-b>.md-grid.is-sm.is-cand{grid-template-columns:repeat(3,minmax(0,1fr))}}
.md-grid.is-cand .fe-who{display:none}
.fe-b>.md-grid.is-asym{grid-template-columns:repeat(12,minmax(0,1fr))}
.fe-b>.md-grid.is-asym>:first-child{grid-column:span 8}.fe-b>.md-grid.is-asym>:last-child{grid-column:span 4;align-self:end}
@media(max-width:700px){.fe-b>.md-grid.is-asym>*{grid-column:1/-1!important}}
.lb-devs+.lb-devs{margin-top:var(--gap-s)}

/* 10/23 NOW: 도판은 원본 비율 그대로, 제어는 본문과 겹치지 않음. */
.fe-original{display:block;width:fit-content;margin-top:6px;color:inherit;text-underline-offset:3px}
@media(max-width:700px){.md[data-id="now-audio-playground"] .md-grid.is-sm{grid-template-columns:minmax(0,1fr)}}
/* S18 NOW 상단: 16:9 이미지 블록을 먼저, 표는 그 아래에서 시작(겹침 없음) */
.fe-lt .md-ov .yt.is-grid{height:auto;aspect-ratio:16/9;overflow:hidden}
@media(max-width:700px){.fe-lt .md-ov .yt.has-hero.is-grid{aspect-ratio:3/2}}

/* 쿠키런 6장(10/25): 가로 영상 3개 각 4칸 / 세로 영상 2개 각 4칸(같은 3열 격자) */
.fe-dark .fe-b>.md-grid.is-tri{grid-template-columns:repeat(3,minmax(0,1fr))}
.fe-dark .fe-b>.md-grid.is-tri>:first-child{grid-column:auto}
.fe-dark .md-grid.is-vp .is-tall video{width:100%;height:auto;max-height:none}
/* 쿠키런 5장: 긴 카톡 캡처는 잘리지 않게 칸 폭 그대로 */
.fe-dark .md-grid.is-full .is-tall :is(img,video){width:100%;height:auto;max-height:none}
/* 5장 인포그래픽: 큰 숫자 → 이슈 → 큰 숫자, 마지막만 분홍 */
.fe-b>.fe-dg.dg-flow{grid-column:1/-1;margin-top:var(--gap-s)}
.dg-fl{--dg-gap:calc(var(--gutter) * 3);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dg-gap);list-style:none;margin:0;padding:0}
.dg-fl li{position:relative;display:grid;gap:16px;align-content:start}
/* S63 · S64 태깅 점(.dg-tap, NOW .dg-dots와 다른 이름): 윗선 대신 횟수를 점으로(15 → 이슈 → 5). 먹 점, 마지막 칸 분홍. 점 없는 칸도 같은 높이 */
.dg-tap{display:flex;flex-wrap:wrap;gap:var(--u);min-height:calc(var(--u) * 1.5);margin-bottom:var(--u)}
.dg-tap i{width:calc(var(--u) * 1.5);aspect-ratio:1;border-radius:50%;background:var(--ink)}
.dg-fl li:last-child .dg-tap i{background:var(--pink)}
.dg-fl b{position:relative;font-weight:400;font-size:clamp(56px,7vw,128px);line-height:1;letter-spacing:-.02em}
.dg-fl li:last-child b{color:var(--pink)}
.dg-fl span{font-size:var(--r-body,18px);line-height:1.5;max-width:22em}
/* 화살표 = 칸 사이 가운데, 큰 글자 높이 가운데(S64: 더 잘 보이게 먹색 · 크게, 칸 사이를 gutter 3배로 넓혀 글자와 띄움) */
.dg-fl li+li b::before{content:"→";position:absolute;left:calc(var(--dg-gap) / -2);top:50%;transform:translate(-50%,-50%);font-size:var(--r-lead);line-height:1;letter-spacing:0;color:var(--ink)}
@media(max-width:700px){
 .fe-dark .fe-b>.md-grid.is-tri{grid-template-columns:1fr}
 .dg-fl{grid-template-columns:1fr;gap:32px}
 .dg-fl li+li b::before,.dg-tap:empty{display:none}
}
/* 5장 렌더 위 인포그래픽: 아래쪽에 얹고 글자 뒤는 어두운 그라데이션 */
.fe-b>.fe-ov{grid-column:1/-1;position:relative;margin-top:var(--gap-s)}
.fe-ov .md-grid{margin-top:0}
.fe-ov .fe-dg.dg-flow{position:absolute;inset:auto 0 0 0;margin:0;padding:clamp(24px,5vw,96px) clamp(20px,3vw,56px) clamp(20px,3vw,48px);background:linear-gradient(to top,rgb(14 14 13 / .92),rgb(14 14 13 / .6) 55%,transparent)}
.fe-ov .dg-fl b{font-size:clamp(40px,5.5vw,104px)}
@media(max-width:700px){.fe-ov .fe-dg.dg-flow{position:static;padding:24px 0 0;background:none}}
/* S64 행복 피드백: 카톡 캡처 [행복] 위치 사각(fe-fig box.rect) · 전 → 후 영상 사이 화살표(영상 16:9 높이 가운데, 칸 사이 gutter 가운데) */
.fe-rect{position:absolute;border:2px solid var(--pink);pointer-events:none}
/* S64 영상 → 가운데 → 영상: 화살표 = 왼 영상 오른쪽 · 오른 영상 왼쪽(칸 사이 gutter 가운데), 높이 = 영상 16:9 가운데(margin % = 칸 폭 기준) */
.fe-dark .fe-b>.md-grid.is-arrow>figure{position:relative}
.fe-dark .fe-b>.md-grid.is-arrow>figure.is-v:first-child::after,.fe-dark .fe-b>.md-grid.is-arrow>figure.is-v:last-child::before{content:"→";position:absolute;top:0;width:var(--gutter);margin-top:28.125%;transform:translateY(-50%);text-align:center;font-size:var(--r-lead);line-height:1;color:var(--pink);pointer-events:none}
.fe-dark .fe-b>.md-grid.is-arrow>figure.is-v:first-child::after{left:100%}
.fe-dark .fe-b>.md-grid.is-arrow>figure.is-v:last-child::before{right:100%}
.fe-dark .fe-b>.md-grid.is-mid{align-items:start}
.fe-dark .fe-b>.md-grid.is-mid>figure:not(.is-v){align-self:center}
@media(max-width:700px){.fe-dark .fe-b>.md-grid.is-arrow>figure::before,.fe-dark .fe-b>.md-grid.is-arrow>figure::after{display:none}}