/* 편집 기능 소개(/features, 이슈 184) — 색은 토큰만. 첫 구역 · 끝 구역은 무대(--stage), 타임라인 · 믹스 · 코드는 작업 판(--ink) — 두 테마에서 같다.
   데모 판은 L 이상에서 제 기능을 다 쓰고, S · M 에서는 한 열로 쌓는다(설계 165) */

/* ── 첫 구역 ─────────────────────────────────────────── */
.ft-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--stage);color:var(--on-stage);padding-top:56px}
.ft-hero-lines{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(0deg,transparent 0 39px,var(--stage-line) 39px 40px);
  -webkit-mask-image:radial-gradient(ellipse at 72% 45%,var(--stage) 0%,transparent 68%);mask-image:radial-gradient(ellipse at 72% 45%,var(--stage) 0%,transparent 68%)}
.ft-hero-in{position:relative;display:grid;gap:40px;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:1024px){.ft-hero{padding-top:88px}.ft-hero-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}}
.ft-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--stage-line);background:var(--stage-glass);color:var(--on-stage)}
.ft-hero-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.ft-hero-title{font-size:clamp(40px,5.4vw,78px);font-weight:900;line-height:1.08;letter-spacing:-2px}
.ft-hero-lede{font-size:clamp(16px,1.3vw,19px);line-height:1.75;color:var(--on-stage-2)}
.ft-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.ft-hero-notes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--on-stage-dim)}
.ft-hero-notes b{font-size:18px;color:var(--on-stage);margin-right:2px}
.ft-hero-art{position:relative;min-width:0}
@media (min-width:1024px){.ft-hero-art .staff{transform:perspective(1600px) rotateY(-7deg) rotateX(2deg)}}
.ft-hero-who{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:13px;color:var(--on-stage-dim)}
.ft-hero-who img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid var(--stage-line)}
.ft-hero-name{display:flex;flex-direction:column;line-height:1.3}
.ft-hero-who b{color:var(--on-stage);font-size:15px}
.ft-rec{margin-left:auto;display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--stage-line);background:var(--stage-glass)}
.ft-rec i{width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 10px var(--bad);animation:vsPulse 1.2s ease-in-out infinite}
.ft-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* 목차 — 좁으면 옆으로 민다 */
.ft-toc{position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:44px 28px}
.ft-toc::-webkit-scrollbar{display:none}
.ft-toc a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px;border-radius:var(--r-pill);
  border:1px solid var(--stage-line);background:var(--stage-glass);color:var(--on-stage-2);font-size:14px;text-decoration:none;white-space:nowrap}
.ft-toc a:hover{color:var(--on-stage);border-color:var(--on-stage-dim)}
.ft-toc span{font-family:var(--mono);font-size:11px;color:var(--grad-a)}

/* ── 구역 공통 ─────────────────────────────────────────── */
.ft-sec{scroll-margin-top:var(--gn-h)}
.ft-sec-alt{background:var(--hover)}
.ft-sec .sec-head{display:grid;grid-template-columns:minmax(0,1fr);align-items:end}
@media (min-width:1024px){.ft-sec .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}}
.ft-head-desc{font-size:16px;line-height:1.7}
.ft-soon{background:var(--warn-bg);color:var(--warn);font-weight:700;letter-spacing:0;vertical-align:2px;margin-left:6px}
.ft-ok{background:var(--ok-bg);color:var(--ok);font-weight:700}
.ft-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;box-shadow:var(--shadow-lift)}
.ft-h3{font-size:18px;font-weight:800}
.ft-grow{flex:1 1 0}
.ft-points{list-style:none;margin:20px 0 0;padding:0}
.ft-points b{display:block;margin-bottom:6px}
.ft-points p{font-size:14px}
@media (max-width:639px){.ft-panel{padding:14px;border-radius:var(--r-lg)}.ft-head-desc{font-size:15px}}

/* 고르기 칩 · 슬라이더 — 데모 판이 함께 쓴다 */
.ft-chips{display:flex;flex-wrap:wrap;gap:6px}
.ft-chip{display:inline-flex;align-items:center;gap:4px;min-height:var(--tap);padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--card);color:var(--muted);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.ft-chip:hover{color:var(--text);border-color:var(--line-strong)}
.ft-chip[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line);font-weight:700}
.emo-chip.ft-chip{background:var(--card);color:var(--muted);border-color:var(--line)}
.emo-chip.ft-chip:hover{color:var(--e-fg);border-color:var(--e-bar)}
.emo-chip.ft-chip[aria-pressed="true"]{background:var(--e-bg);color:var(--e-fg);border-color:var(--e-bar);box-shadow:inset 0 0 0 1px var(--e-bar)}
.ft-lab{font-size:12px;font-weight:700;color:var(--muted)}
.ft-pal-row{display:flex;flex-direction:column;gap:8px}
.ft-slider{display:grid;grid-template-columns:72px minmax(0,1fr) 64px;align-items:center;gap:10px;min-height:var(--tap)}
.ft-slider input{width:100%;height:var(--tap);margin:0;accent-color:var(--accent)}
.ft-slider output{font-family:var(--mono);font-size:13px;text-align:right}
.ft-slider.is-off{opacity:.5}

/* ── 01 연기 악보 ─────────────────────────────────────────── */
@media (min-width:1024px){
  .ft-score-lay{--lay-gap:28px;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"main side"}
  .ft-score-main{grid-area:main}.ft-pal{grid-area:side;border-left:1px solid var(--line);padding-left:24px}
}
.ft-score-who{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13px;color:var(--muted)}
.ft-score-who img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.ft-score-who b{color:var(--text)}
.ft-score{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px}
.ft-lanes,.ft-w{display:grid;grid-template-rows:24px 30px 24px 24px 50px;align-items:center}
.ft-lanes{font-size:11px;font-weight:700;color:var(--faint);letter-spacing:1px}
.ft-words{display:flex;flex-wrap:wrap;gap:16px 6px;min-width:0}
.ft-w{--e-bar:var(--line);--e-fg:var(--muted);flex:var(--n) 1 auto;width:calc(var(--n) * 1.1em + 22px);min-width:0}
.ft-c{position:relative;height:100%;display:flex;align-items:center;min-width:0;font-size:11px;white-space:nowrap}
.ft-c b{position:relative;z-index:1}
.ft-emo.is-on::before{content:"";position:absolute;left:0;right:-6px;bottom:3px;height:7px;border-radius:var(--r-pill);background:var(--e-bar)}
.ft-emo.is-end::before{right:0}
.ft-emo b{align-self:flex-start;color:var(--e-fg);font-weight:800}
.ft-dyn b{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:16px;color:var(--text)}
.ft-dyn.is-wedge::after{content:"";position:absolute;inset:5px -6px 5px 0;background:var(--e-bar);opacity:.8;
  clip-path:polygon(0 calc(50% - var(--a) * 45%),100% calc(50% - var(--b) * 45%),100% calc(50% + var(--b) * 45%),0 calc(50% + var(--a) * 45%))}
.ft-sp.is-on::before{content:"";position:absolute;inset:3px -6px 3px 0;border-radius:var(--r-sm);background:var(--accent-soft);border:1px solid var(--accent-line)}
.ft-sp.is-end::before{right:0}
.ft-sp b{padding-left:6px;font-family:var(--mono);font-weight:500;color:var(--accent)}
.ft-mk b{margin-right:4px;color:var(--accent);font-weight:700}
.ft-word{width:100%;height:100%;padding:0 4px;border:1px solid transparent;border-radius:var(--r);background:var(--hover);color:var(--text);
  font:inherit;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ft-word:hover{border-color:var(--line-strong)}
.ft-word[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px var(--accent-line)}
@media (min-width:1024px) and (max-width:1439px){.ft-w{width:calc(var(--n) * 1em + 16px)}.ft-word{font-size:15px}}
@media (max-width:639px){.ft-lanes{display:none}.ft-score{grid-template-columns:minmax(0,1fr)}.ft-word{font-size:15px}}

.ft-markup{margin-top:22px;border-radius:var(--r-lg);background:var(--ink);border:1px solid var(--ink-line);color:var(--ink-fg);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ft-markup-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-dim)}
.ft-markup .chip,.ft-code .chip{background:var(--ink-2);color:var(--ink-fg)}
.ft-markup-line{font-family:var(--mono);font-size:14px;line-height:1.9}
.ft-markup-line .tg{white-space:nowrap;color:var(--syn-emo);background:var(--syn-emo-bg);border-radius:4px;padding:1px 3px}
.ft-markup-line .pm{text-decoration:underline dotted var(--syn-num) 2px;text-underline-offset:5px;color:var(--syn-num)}
.ft-markup .dim{color:var(--ink-dim)}
.ft-markup a{color:var(--syn-fn)}
.ft-markup-line.is-new{animation:vsPop .3s ease-out}

.ft-pal{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.ft-pal-sel{display:flex;flex-direction:column;gap:2px}
.ft-pal-sel b{font-size:18px}
.ft-clear{align-self:flex-start}

/* 실제 소리 목록 */
.ft-takes-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:36px 0 14px}
.ft-takes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft-take{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"play body sec" "wave wave wave";gap:8px 14px;align-items:center;
  padding:10px 14px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line)}
@media (min-width:640px){.ft-take{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"play body wave sec"}}
.ft-play{grid-area:play}.ft-take-body{grid-area:body}.ft-take-wave{grid-area:wave}.ft-take-sec{grid-area:sec}
.ft-take-body{display:flex;flex-direction:column;min-width:0}
.ft-take-body b{font-size:15px}
.ft-take-text{font-size:13px;color:var(--muted)}
.ft-take-text em{font-style:normal;font-weight:800;color:var(--accent)}
.ft-take-sec{font-family:var(--mono);font-size:12px;color:var(--faint)}
.ft-take-wave{position:relative;height:34px}
.ft-take-wave svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--line-strong)}
.ft-take-prog{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0)}
.ft-take-prog svg{fill:var(--accent)}
.ft-take.is-on{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.ft-play{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);cursor:pointer}
.ft-play:hover{background:var(--accent-deep)}
.ft-play-ico{width:14px;height:14px;background:currentColor;clip-path:polygon(18% 0,100% 50%,18% 100%)}
[aria-pressed="true"]>.ft-play-ico{clip-path:inset(8% 8% 8% 8%)}
[aria-busy="true"]>.ft-play-ico{display:none}

/* ── 02 캐스팅 · 튜닝 ─────────────────────────────────────── */
@media (min-width:1024px){
  .ft-cast-lay{--lay-gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"faces tune";align-items:stretch}
  .ft-faces{grid-area:faces}.ft-tune{grid-area:tune;align-self:start;position:sticky;top:calc(var(--gn-h) + 16px)}
}
.ft-faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.ft-face{position:relative;overflow:hidden;aspect-ratio:4/5;padding:0;border:2px solid transparent;border-radius:var(--r-lg);background:var(--stage);
  color:var(--on-stage);cursor:pointer;display:flex;align-items:flex-end;text-align:left;transition:transform .25s ease,border-color .25s ease}
.ft-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .5s ease}
.ft-face:hover img{transform:scale(1.05)}
.ft-face-art{position:absolute;inset:0;background:radial-gradient(circle at 40% 30%,var(--glow-1),var(--stage) 75%)}
.ft-face-body{position:relative;width:100%;display:flex;flex-direction:column;padding:28px 10px 8px;background:linear-gradient(0deg,var(--stage-shade) 45%,transparent)}
.ft-face-body b{font-size:16px}
.ft-face-body small{font-size:11px;color:var(--on-stage-2)}
.ft-face[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-line);transform:translateY(-2px)}
@media (min-width:1024px){.ft-face{aspect-ratio:1/1}}
@media (min-width:640px){.ft-seg-gap small{display:inline}}
@media (max-width:639px){.ft-face-body{padding:20px 6px 6px}.ft-face-body b{font-size:14px}}
.ft-tune{display:flex;flex-direction:column;gap:12px}
.ft-tune-head{display:flex;gap:14px;align-items:center}
.ft-tune-head img{width:96px;aspect-ratio:2/3;height:auto;border-radius:var(--r);object-fit:cover;object-position:50% 20%}
.ft-tune-head>div{display:flex;flex-direction:column;gap:2px}
.ft-tune-name{font-size:22px}
.ft-strip{display:flex;gap:4px;align-items:stretch;min-height:96px;margin-top:6px;padding:8px;border-radius:var(--r-lg);background:var(--hover)}
.ft-seg{position:relative;flex:calc(var(--n) / var(--speed)) 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:8px 10px 12px;border-radius:var(--r);background:var(--e-bg);color:var(--e-fg);border-left:3px solid var(--e-bar);transition:flex-grow .3s ease}
.ft-seg b{font-size:16px}
.ft-seg small{font-family:var(--mono);font-size:11px}
.ft-seg::after{content:"";position:absolute;left:10px;bottom:5px;height:4px;width:calc(var(--x) * (100% - 20px));border-radius:2px;background:var(--e-bar);transition:width .3s ease}
.ft-seg-gap{flex:calc(var(--gap) * 7) 1 0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--r);
  background:repeating-linear-gradient(135deg,var(--line) 0 3px,transparent 3px 8px);color:var(--muted);transition:flex-grow .3s ease}
.ft-seg-gap small{display:none;font-family:var(--mono);font-size:11px;background:var(--hover);padding:0 4px;border-radius:4px;white-space:nowrap}

/* ── 03 전체 타임라인 · 04 믹스 — 작업 판(--ink) ─────────────────── */
.ft-daw{--rc:var(--syn-fn);background:var(--ink);color:var(--ink-fg);border:1px solid var(--ink-line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lift)}
.ft-daw [data-c="1"]{--rc:var(--syn-fn)}.ft-daw [data-c="2"]{--rc:var(--syn-emo)}.ft-daw [data-c="3"]{--rc:var(--syn-str)}
.ft-daw [data-c="4"]{--rc:var(--syn-num)}.ft-daw [data-c="5"]{--rc:var(--syn-key)}.ft-daw [data-c="6"]{--rc:var(--syn-prop)}
.ft-daw-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--ink-line)}
.ft-daw-title{font-size:15px}
.ft-daw-dim{font-size:13px;color:var(--ink-dim)}
.ft-seg-btns{display:inline-flex;border:1px solid var(--ink-line);border-radius:var(--r);overflow:hidden}
.ft-seg-btns button{min-height:var(--tap);padding:0 14px;border:0;background:transparent;color:var(--ink-dim);font:inherit;font-size:13px;cursor:pointer}
.ft-seg-btns button+button{border-left:1px solid var(--ink-line)}
.ft-seg-btns button:hover{color:var(--ink-fg)}
.ft-seg-btns button[aria-pressed="true"]{background:var(--ink-2);color:var(--ink-fg);font-weight:700;box-shadow:inset 0 -2px 0 var(--grad-a)}
.ft-zoom{display:flex;align-items:center;min-height:var(--tap)}
.ft-zoom input{width:140px;accent-color:var(--grad-a)}
@media (max-width:639px){.ft-zoom{display:none}}
.ft-daw .ft-slider{grid-template-columns:96px minmax(0,1fr) 64px}
.ft-daw .ft-lab{color:var(--ink-dim)}
.ft-daw .ft-slider input{accent-color:var(--grad-a)}

.ft-ov{position:relative;height:40px;margin:12px 14px 4px;border-radius:var(--r-sm);background:var(--ink-2);cursor:pointer;touch-action:none}
.ft-ov-bar{position:absolute;left:calc(var(--t) / var(--total) * 100%);width:calc(var(--d) / var(--total) * 100%);top:calc(8px + var(--r) * 9px);
  height:6px;border-radius:3px;background:var(--rc)}
/* 보는 구간 — 밖을 어둡게 덮어 어디를 보는지 드러낸다. 아주 확대해도 손으로 잡을 만큼은 남긴다 */
.ft-ov-frame{position:absolute;top:0;bottom:0;left:var(--fl,0%);width:var(--fw,30%);min-width:14px;border:2px solid var(--grad-a);border-radius:var(--r-sm);
  box-shadow:0 0 0 999px var(--scrim);pointer-events:none}
.ft-ov{overflow:hidden}

.ft-tl-body{display:grid;grid-template-columns:84px minmax(0,1fr);padding:8px 0 14px}
.ft-tl-heads{display:grid;grid-auto-rows:60px;grid-template-rows:24px;border-right:1px solid var(--ink-line)}
.ft-tl-role{display:flex;align-items:center;gap:8px;padding-left:14px;font-size:13px;box-shadow:inset 3px 0 0 var(--rc)}
.ft-tl-role img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.ft-tl-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:var(--ink-line) transparent}
.ft-tl-scroll:focus-visible{outline-offset:-2px}
.ft-tl-canvas{position:relative;width:calc(var(--total) * var(--pps) * 1px + 24px);min-width:100%}
.ft-ruler{position:relative;height:24px;border-bottom:1px solid var(--ink-line)}
.ft-ruler span{position:absolute;left:calc(var(--t) * var(--pps) * 1px);top:0;bottom:0;padding:4px 0 0 4px;border-left:1px solid var(--ink-line);
  font-family:var(--mono);font-size:10px;color:var(--ink-dim);white-space:nowrap}
.ft-track{position:relative;height:60px;border-bottom:1px solid var(--ink-line)}
.ft-clip{position:absolute;top:9px;bottom:9px;left:calc(var(--t) * var(--pps) * 1px);width:calc(var(--d) * var(--pps) * 1px);min-width:14px;
  display:flex;align-items:center;gap:6px;padding:0 6px;overflow:hidden;border-radius:6px;background:var(--ink-2);
  border:1px solid var(--ink-line);border-left:3px solid var(--rc);box-shadow:inset 0 3px 0 var(--e-bar);font-size:12px;white-space:nowrap;
  transition:left .25s ease,width .25s ease}
.ft-clip-n{flex:none;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--rc)}
.ft-clip-first{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink-fg)}
.ft-clip-words{display:none;flex:1 1 0;min-width:0;height:100%;align-items:stretch}
.ft-clip-words span{flex:var(--w) 1 0;min-width:0;display:flex;align-items:center;padding:0 4px;overflow:hidden;border-right:1px dashed var(--ink-line)}
.ft-clip-words span:last-child{border-right:0}
.ft-tl[data-level="far"] .ft-clip-first{display:none}
.ft-tl[data-level="far"] .ft-clip{justify-content:center;padding:0 2px}
.ft-tl[data-level="near"] .ft-clip-first{display:none}
.ft-tl[data-level="near"] .ft-clip-words{display:flex}
@media (max-width:639px){.ft-tl-body{grid-template-columns:56px minmax(0,1fr)}.ft-tl-role{padding-left:8px}.ft-tl-role img{display:none}}

.ft-mix-stage{padding:6px 14px 0}
.ft-mix-stage canvas{display:block;width:100%;height:300px}
@media (max-width:639px){.ft-mix-stage canvas{height:250px}}
.ft-mix-play{background:var(--on-stage);border-color:var(--on-stage);color:var(--stage);font-weight:700}
.ft-mix-play:hover{background:var(--on-stage-2);color:var(--stage)}
.ft-clock{font-family:var(--mono);font-size:14px;color:var(--ink-fg);min-width:6ch}
.ft-mix-ctrl{display:grid;gap:4px 24px;grid-template-columns:minmax(0,1fr);padding:10px 14px}
@media (min-width:1024px){.ft-mix-ctrl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ft-mix-legend{list-style:none;margin:0;padding:0 14px 14px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--ink-dim)}
.ft-key{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;vertical-align:-1px}
.ft-key[data-k="scene0"]{background:var(--emo-calm-bar)}.ft-key[data-k="scene1"]{background:var(--emo-fear-bar)}.ft-key[data-k="sfx"]{background:var(--syn-num)}

/* ── 05 텍스트 · JSON ─────────────────────────────────────── */
.ft-twin{display:flex;flex-direction:column;gap:16px}
.ft-parts{display:flex;flex-wrap:wrap;gap:8px}
.ft-part{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:var(--tap);padding:10px 16px;border:2px solid transparent;border-radius:var(--r-lg);
  background:var(--e-bg);color:var(--e-fg);font:inherit;font-size:17px;font-weight:800;cursor:pointer;text-align:left}
.ft-part small{font-size:11px;font-weight:700}  /* 흐리게 하지 않는다 — 감정 바탕 위 11px 은 4.5:1 이 빠듯하다(이슈 216) */
.ft-part[aria-pressed="true"]{border-color:var(--e-bar);box-shadow:0 8px 24px -12px var(--e-bar)}
.ft-twin-code{--fit-gap:12px}
.ft-code{margin:0;border-radius:var(--r-lg);background:var(--ink);color:var(--ink-fg);overflow:hidden;display:flex;flex-direction:column}
.ft-code figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--ink-line);font-size:12px;color:var(--ink-dim)}
.ft-code pre{flex:1 1 auto;margin:0;padding:18px;font-family:var(--mono);font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:break-word}
.ft-code .tg{color:var(--syn-emo);white-space:nowrap}.ft-code .k{color:var(--syn-prop)}.ft-code .s{color:var(--syn-str)}.ft-code .who{color:var(--syn-key)}
.ft-code .s .seg{color:var(--syn-str)}
.ft-code .seg{border-radius:4px;transition:background .2s ease}
.ft-code .seg.is-on{background:var(--syn-emo-bg);box-shadow:0 0 0 2px var(--syn-emo-bg)}

/* ── 06 단어 다듬기 ─────────────────────────────────────── */
.ft-wd-strip{display:flex;flex-wrap:wrap;row-gap:12px;align-items:stretch}
.ft-wd-unit{display:flex;align-items:stretch}
.ft-wd-cell{width:calc(var(--w) * var(--s) * 1.15em + 26px);min-height:84px;display:flex;align-items:flex-start;justify-content:center;padding:8px 4px 0;
  margin-right:6px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:clamp(17px,1.8vw,26px);font-weight:700;color:var(--text);cursor:pointer;white-space:nowrap;
  background:var(--card) repeating-linear-gradient(90deg,var(--accent-line) 0 2px,transparent 2px 6px) 0 100%/100% 32px no-repeat;
  transition:width .3s ease}
.ft-wd-cell:hover{border-color:var(--line-strong)}
.ft-wd-cell[aria-pressed="true"]{border-color:var(--accent);background-color:var(--accent-soft);color:var(--accent);
  background-image:repeating-linear-gradient(90deg,var(--accent) 0 2px,transparent 2px 6px)}
.ft-wd-gap{width:calc(var(--g) * 160px);margin-right:calc(var(--g) * 6px);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--r);
  background:repeating-linear-gradient(135deg,var(--warn-bg) 0 4px,transparent 4px 9px);color:var(--warn);transition:width .3s ease}
.ft-wd-gap small{font-family:var(--mono);font-size:11px;white-space:nowrap}
.ft-wd-ctrl{display:grid;gap:4px 24px;grid-template-columns:minmax(0,1fr);margin-top:16px}
@media (min-width:640px){.ft-wd-ctrl{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── 07 비교 ─────────────────────────────────────── */
.ft-cmp-panel{padding:6px 10px}
.ft-cmp-box{--table-bg:var(--card)}
@media (min-width:640px){.ft-cmp th,.ft-cmp td{padding:14px 10px}}
@media (max-width:639px){.ft-cmp-panel{padding:0;border:0;background:none;box-shadow:none}.ft-cmp-box{--table-bg:var(--paper)}}
.ft-cmp th:nth-child(3){color:var(--accent);font-weight:800}
@media (min-width:640px){.ft-cmp td:nth-child(3){background:var(--accent-soft)}}
.ft-note{margin-top:14px}
.ft-cmp td{line-height:1.65}
.ft-cmp td:first-child{font-weight:800}
@media (min-width:640px){.ft-cmp td:first-child{width:16%}.ft-cmp td:last-child{width:9%;white-space:nowrap}}

/* ── 끝 구역 ─────────────────────────────────────── */
.ft-cta{position:relative;overflow:hidden;isolation:isolate;background:var(--stage);color:var(--on-stage);padding:110px 0;text-align:center}
.ft-cta-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px}
.ft-cta-title{font-size:clamp(32px,4.4vw,60px);font-weight:900;line-height:1.15;letter-spacing:-1px}
.ft-cta .ft-hero-actions{justify-content:center}
@media (max-width:639px){.ft-cta{padding:60px 0}.ft-hero{padding-top:32px}.ft-toc{padding-block:28px 20px}}