/* 나노마케팅 제안서 화면. 값은 tokens.css 에서만 가져온다.
   PC(900px 이상): 한 장면씩 넘기는 무대. 휴대폰: 위에서 아래로 읽는 흐름.
   스크립트가 없으면 모든 장면이 흐름형으로 펼쳐진다. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ol, ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #000; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
svg path, svg line, svg circle, svg rect { vector-effect: non-scaling-stroke; }

/* ── 바탕 연출: 작은 별점과 세로 빛줄기 ── */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ambient .pt { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,.5); opacity: .15; animation: twinkle var(--tw, 5s) ease-in-out var(--twd, 0s) infinite; }
.ambient .pt.is-red { background: var(--red); }
.ambient .beam { display: none; }
@keyframes twinkle { 0%, 100% { opacity: .08; } 50% { opacity: .45; } }
@keyframes beam { 0%, 100% { opacity: .02; } 50% { opacity: .06; } }

/* ── 공통 부품 ── */
.pill {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--red-text);
  background: var(--red-soft); border: 1px solid rgba(206,42,30,.32);
}
.head { text-align: center; }
.head .title { margin-top: 16px; }
.title { font-size: var(--fs-title); font-weight: 900; line-height: 1.25; letter-spacing: -.01em; }
.title .tl { display: block; }
.title.l1 { line-height: 1; }
.sub { margin-top: 12px; font-size: 15px; color: rgba(255,255,255,.62); text-wrap: balance; }
.row-k { margin: 28px 0 10px; font-size: var(--fs-small); color: var(--ink-3); letter-spacing: .02em; }
.foot-note { margin-top: 16px; text-align: center; font-size: 13px; color: rgba(255,255,255,.62); text-wrap: balance; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px;
  border-radius: 20px; font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: #dd3426; }
.btn-glow { box-shadow: 0 0 40px rgba(206,42,30,.55), 0 0 90px rgba(206,42,30,.22); }
.btn-ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.88); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.btn-s { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12px; }
.btn-block { width: 100%; }

/* ── 상단 도구 ── */
.tools {
  position: fixed; inset: 0 0 auto 0; height: 56px; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; pointer-events: none;
}
.tools > * { pointer-events: auto; }
.tools-left, .tools-right { display: flex; align-items: center; gap: 4px; }
.tool { height: 30px; padding: 0 10px; border-radius: 15px; font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; transition: color 180ms ease, background-color 180ms ease; }
.tool:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.tool-red { color: var(--red-text); }
.tools-deck { font-size: 12px; color: var(--ink-2); padding-left: 6px; }
.scene-label { position: absolute; left: 50%; top: 21px; transform: translateX(-50%); font-size: var(--fs-label); letter-spacing: .08em; color: rgba(255,255,255,.3); pointer-events: none; }
body[data-view="library"] [data-only="deck"] { display: none !important; }
body[data-view="deck"] [data-only="library"] { display: none !important; }

/* ── 장면 아래 고정 표시: 쪽 표시 · 로고 · 점 이동 · 이전/다음 ── */
.deck-ui { display: none; }
.counter { position: fixed; left: 36px; bottom: 22px; z-index: 15; font-size: var(--fs-label); letter-spacing: .04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.brand { position: fixed; right: 36px; bottom: 20px; z-index: 15; opacity: .55; transition: opacity 180ms ease; }
.brand:hover { opacity: .9; }
.brand img { width: 74px; height: auto; }
.dots { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; align-items: center; }
.dots button { display: grid; place-items: center; width: 20px; height: 13px; }
.dots button::before { content: ''; width: 3px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.2); transition: width 300ms var(--ease-std), height 300ms var(--ease-std), background-color 300ms var(--ease-std); }
.dots button:hover::before { background: rgba(255,255,255,.5); }
.dots button[aria-current="true"]::before { width: 4px; height: 18px; background: var(--red); }
.dots li:has(button[aria-current="true"]) button { height: 26px; }
.nav-btn { position: fixed; top: 50%; z-index: 15; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); transition: background-color 180ms ease, opacity 180ms ease; }
.nav-btn:hover { background: rgba(255,255,255,.1); }
.nav-btn:disabled { opacity: .25; cursor: default; }
.nav-btn svg { width: 16px; height: 16px; fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-prev { left: 16px; }
.nav-next { right: 40px; }

/* ── 등장 (data-a): 장면 380ms 교차, 제목 묶음 30px, 목록 16px ── */
@keyframes a-head { from { opacity: 0; transform: translateY(var(--rise-head)); } to { opacity: 1; transform: none; } }
@keyframes a-up { from { opacity: 0; transform: translateY(var(--rise-el)); } to { opacity: 1; transform: none; } }
@keyframes a-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-scale { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
/* 둘레 점은 translate 속성으로 자리를 잡고, 튀어나오는 움직임은 transform 만 쓴다(동작 줄이기에서 transform 을 지워도 자리가 유지된다) */
@keyframes a-pop { 0% { opacity: 0; transform: scale(.4) rotate(-15deg); } 60% { opacity: 1; transform: scale(1.12) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes a-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes a-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.js .scene:not(.is-built) [data-a],
.js .library:not(.is-built) [data-a] { opacity: 0; }
.js .is-built [data-a="head"] { animation: a-head 460ms var(--ease-in-el) var(--d) both; }
.js .is-built [data-a="up"] { animation: a-up 360ms var(--ease-in-el) var(--d) both; }
.js .is-built [data-a="fade"] { animation: a-fade 500ms var(--ease-std) var(--d) both; }
.js .is-built [data-a="scale"] { animation: a-scale 460ms var(--ease-out) var(--d) both; }
.js .is-built [data-a="pop"] { animation: a-pop 520ms var(--ease-out) var(--d) both; }
.js .is-built [data-a="line"] { transform-origin: left center; animation: a-line 1100ms var(--ease-out) var(--d) both; }
[data-a="draw"] { stroke-dasharray: 1; }
.js .scene:not(.is-built) [data-a="draw"] { stroke-dashoffset: 1; opacity: 1; }
.js .is-built [data-a="draw"] { animation: a-draw 1000ms var(--ease-out) var(--d) both; }

/* ── 01 시작: 흩어진 낱말 → 세로 빛 → 큰 문장 → 짧은 선 → 보조 문장 → 연결 → 단추 ── */
.sc-opening .stage { width: 100%; max-width: none; }
.op-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.op-field::before, .op-field::after { content: ''; position: absolute; background: rgba(255,255,255,.035); }
.op-field::before { left: 0; right: 0; top: 50%; height: 1px; }
.op-field::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.op-field .w { position: absolute; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.42); white-space: nowrap; opacity: 0; }
.op-field .w.is-red { color: var(--red-text); }
.op-beam { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.5), transparent); opacity: 0; }
.op-main { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.op-kicker { display: inline-flex; align-items: center; height: 25px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--fs-label); font-weight: 600; color: var(--red-text); background: var(--red-soft); border: 1px solid rgba(206,42,30,.32); margin-bottom: 22px; }
.statement { font-size: var(--fs-statement); font-weight: 900; line-height: 1.05; letter-spacing: -.05em; }
.statement .sl { display: block; }
.statement .sl-last { color: rgba(255,255,255,.2); }
.op-rule { display: block; width: 112px; height: 1px; margin: 26px auto 27px; background: rgba(255,255,255,.22); }
.op-sub { font-size: var(--fs-sub-light); font-weight: 300; line-height: 1.5; color: var(--red-copy); max-width: 760px; text-wrap: balance; }
.route { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(820px, 100%); margin-top: 34px; }
.rt-line { position: absolute; top: 5px; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); height: 1px; background: linear-gradient(90deg, var(--red), rgba(206,42,30,.35)); container-type: inline-size; }
.rt-flow { position: absolute; top: -3.5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--red-text); box-shadow: 0 0 12px var(--red); opacity: 0; }
.rt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 8px; }
.rt-node { width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--red); margin-bottom: 10px; }
.rt:last-child .rt-node { background: var(--red); box-shadow: 0 0 0 4px rgba(206,42,30,.2); }
.rt strong { font-size: 15px; font-weight: 800; }
.rt span { font-size: var(--fs-small); color: var(--ink-3); }
.op-note { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.op-actions { display: flex; gap: 10px; margin-top: 30px; }

/* 시작 장면 시간표 (전체 재생): 낱말 → 세로 빛 → 큰 문장 → 짧은 선 → 설명 → 경로 → 단추 */
.js .sc-opening.is-built .w { animation: w-in 700ms var(--ease-std) calc(150ms + var(--i) * 90ms) both, w-out 600ms var(--ease-std) 2500ms forwards; }
@keyframes w-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes w-out { to { opacity: 0; transform: scale(.94); } }
.js .sc-opening.is-built .op-field::before, .js .sc-opening.is-built .op-field::after { animation: a-fade 900ms ease 300ms both, w-out 700ms ease 2500ms forwards; }
.js .sc-opening.is-built .op-beam { animation: beam-in 1800ms var(--ease-std) max(0ms, calc(2300ms + var(--op-shift, 0ms))) both; }
@keyframes beam-in { 0% { opacity: 0; } 40% { opacity: .5; } 100% { opacity: .08; } }
.js .sc-opening .op-main > * { opacity: 0; }
.js .sc-opening.is-built .op-kicker { animation: a-up 500ms var(--ease-in-el) calc(2700ms + var(--op-shift, 0ms)) both; }
.js .sc-opening.is-built .statement { opacity: 1; }
.js .sc-opening .statement .sl { opacity: 0; }
.js .sc-opening.is-built .statement .sl { animation: sl-in 700ms ease-out calc(2850ms + var(--i) * 380ms + var(--op-shift, 0ms)) both; }
.js .sc-opening.is-built .statement .sl-last { animation: sl-in-dim 700ms ease-out calc(2850ms + var(--i) * 380ms + var(--op-shift, 0ms)) both, sl-light 900ms var(--ease-std) calc(3900ms + var(--i) * 380ms + var(--op-shift, 0ms)) forwards; }
@keyframes sl-in { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sl-in-dim { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sl-light { to { color: #fff; } }
.js .sc-opening.is-built .op-rule { opacity: 1; transform-origin: center; animation: a-line 800ms var(--ease-out) calc(4300ms + var(--op-shift, 0ms)) both; }
.js .sc-opening.is-built .op-sub { animation: a-fade 900ms var(--ease-std) calc(4600ms + var(--op-shift, 0ms)) both; }
.js .sc-opening.is-built .route { opacity: 1; }
.js .sc-opening .route .rt, .js .sc-opening .rt-line { opacity: 0; }
.js .sc-opening.is-built .rt-line { opacity: 1; transform-origin: left center; animation: a-line 1300ms var(--ease-out) calc(5100ms + var(--op-shift, 0ms)) both; }
.js .sc-opening.is-built .rt { animation: a-up 420ms var(--ease-in-el) calc(5100ms + var(--k) * 300ms + var(--op-shift, 0ms)) both; }
.js .sc-opening.is-built .rt-flow { animation: flow 2600ms var(--ease-std) calc(6600ms + var(--op-shift, 0ms)) infinite; }
@keyframes flow { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(100cqw - 8px)); } }
.js .sc-opening.is-built .op-note { animation: a-fade 700ms ease calc(6300ms + var(--op-shift, 0ms)) both; }
.js .sc-opening.is-built .op-actions { animation: a-up 460ms var(--ease-in-el) calc(6400ms + var(--op-shift, 0ms)) both; }
/* 다시 볼 때(짧게)와 건너뛰기: 낱말 단계를 빼고 문장부터 */
.js .sc-opening.op-short.is-built .w, .js .sc-opening.op-short.is-built .op-field::before, .js .sc-opening.op-short.is-built .op-field::after { animation: none; opacity: 0; }
.js .sc-opening.op-done .w, .js .sc-opening.op-done .op-field::before, .js .sc-opening.op-done .op-field::after { animation: none !important; opacity: 0 !important; }
.js .sc-opening.op-done .op-main > *, .js .sc-opening.op-done .statement .sl, .js .sc-opening.op-done .rt, .js .sc-opening.op-done .rt-line, .js .sc-opening.op-done .op-rule { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
.js .sc-opening.op-done .statement .sl-last { color: #fff; }
.js .sc-opening.op-done .op-beam { animation: none; opacity: .08; }
.js .sc-opening.op-done .rt-flow { animation: flow 2600ms var(--ease-std) 300ms infinite; }

/* ── 02 점검: 깔때기 ── */
.funnel { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; margin-top: 40px; }
.fn-left { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fn-left li { width: calc(100% - var(--k) * 48px); min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 16px; background: rgba(255,255,255, calc(.04 + var(--k) * .008)); border: 1px solid rgba(255,255,255,.06); }
.fn-left strong { flex: none; font-size: 15px; font-weight: 800; }
.fn-left span { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.4; }
.fn-mid { position: relative; justify-self: center; width: 48px; height: 48px; }
.fn-arrow { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--red); }
.fn-arrow svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ripple { position: absolute; inset: -26px; border-radius: 50%; background: rgba(206,42,30,.16); animation: ripple 2000ms ease-out infinite; }
@keyframes ripple { from { transform: scale(.5); opacity: .6; } to { transform: scale(1.25); opacity: 0; } }
.fn-right { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; min-height: 210px; padding: 28px 28px; border-radius: 20px; background: var(--red-soft); border: 1px solid var(--red-line); box-shadow: 0 0 40px rgba(206,42,30,.08); }
.fn-right p { font-size: 21px; font-weight: 800; line-height: 1.45; text-wrap: balance; }
.fn-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(206,42,30,.18); }
.fn-mark svg, .wd-mark svg { width: 20px; height: 20px; fill: none; stroke: var(--red-text); stroke-width: 1.8; }

/* ── 03 운영: 단계 상자 ── */
.steps { position: relative; margin-top: 44px; }
.steps ol { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.steps li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; }
.st-line { position: absolute; top: 40px; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); height: 1px; background: linear-gradient(90deg, rgba(206,42,30,.55), var(--red)); }
.st-box { position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 16px; background: #131313; border: 1px solid rgba(206,42,30,.16); }
.st-box.is-hot { background: #1d0908; border-color: var(--red-line); animation: glow var(--t-glow) ease-in-out infinite; } /* 불투명: 뒤 영상 광선이 숫자 뒤로 비치지 않게 (붉은 .12 를 바탕에 합성한 값) */
@keyframes glow { 0%, 100% { box-shadow: 0 0 20px rgba(206,42,30,.3), 0 0 40px rgba(206,42,30,.1); } 50% { box-shadow: 0 0 46px rgba(206,42,30,.6), 0 0 90px rgba(206,42,30,.22); } }
.st-no { font-size: 20px; font-weight: 900; color: var(--red-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.steps strong { margin-top: 18px; font-size: 16px; font-weight: 800; }
.st-desc { margin-top: 6px; font-size: 13px; color: var(--ink-2); max-width: 184px; line-height: 1.45; text-wrap: balance; }
.st-back { display: block; width: 100%; height: 40px; margin-top: 14px; overflow: visible; }
.st-back-arrow { position: absolute; left: calc(100% / var(--n) / 2 - 5px); bottom: 34px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(206,42,30,.7); }
.js .is-built .st-line { animation-duration: 700ms; }
.st-back path { fill: none; stroke: rgba(206,42,30,.5); stroke-width: 1; }
.bar-card { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 20px; border-radius: var(--radius-panel); background: #111; border: 1px solid rgba(206,42,30,.22); }
.bar-card p { font-size: 16px; font-weight: 800; }
.bc-icon, .dc-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--red-soft); }
.bc-icon svg, .dc-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--red-text); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

/* ── 04 광고: 선 위의 단계 + 정보 카드 ── */
.flow { position: relative; width: min(760px, 100%); margin: 44px auto 0; }
.flow ol { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.flow li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; }
.fl-line { position: absolute; top: 32px; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); height: 1px; background: rgba(206,42,30,.4); container-type: inline-size; }
.fl-dot { position: absolute; top: -3.5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--red); opacity: 0; }
.js .is-built .fl-dot { animation: flow 2400ms linear calc(1400ms + var(--fd, 0ms)) infinite; }
.fl-dot:nth-child(2) { --fd: 800ms; }
.fl-dot:nth-child(3) { --fd: 1600ms; }
.fl-box { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #131313; border: 1px solid rgba(206,42,30,.16); }
.fl-box.is-hot { background: rgba(206,42,30,.12); border-color: var(--red-line); animation: glow var(--t-glow) ease-in-out infinite; }
.flow strong { margin-top: 14px; font-size: 17px; font-weight: 800; }
.flow li > span:last-child { margin-top: 6px; font-size: 13px; color: var(--ink-2); max-width: 230px; line-height: 1.45; text-wrap: balance; }
.info-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 16px; }
.info { display: flex; flex-direction: column; gap: 4px; padding: 13px 16px; border-radius: 20px; background: #0e0e0e; border: 1px solid rgba(255,255,255,.07); }
.info-k { font-size: var(--fs-label); color: var(--ink-3); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.info strong { font-size: 14px; font-weight: 700; }
.sc-advertising .row-k, .sc-website .row-k { text-align: left; }

/* ── 05 콘텐츠: 이름 칸 + 비교 칸 ── */
.table { display: flex; flex-direction: column; gap: 8px; width: min(760px, 100%); margin: 40px auto 0; }
.tr { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; }
.th { font-size: 15px; font-weight: 800; color: rgba(255,255,255,.88); padding-left: 4px; }
.td { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 11px 18px; border-radius: 20px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.86); background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); }
.td.is-mark { position: relative; padding-left: 24px; }
.td.is-mark::before { content: ''; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--red); }
.td em { font-style: normal; font-size: 13px; padding: 3px 10px; border-radius: 6px; background: rgba(255,255,255,.05); color: var(--ink-2); }

/* ── 06 홈페이지: 두 목록 + 이어지는 점 + 아래 카드 ── */
.lists { display: grid; grid-template-columns: 1fr 100px 1fr; align-items: center; margin-top: 40px; }
.ls-left, .ls-right { display: flex; flex-direction: column; gap: 8px; }
.lists li { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 12px 16px; border-radius: 20px; font-size: 14px; }
.ls-left li { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); color: var(--ink-2); font-weight: 600; }
.ls-right li { background: var(--red-faint); border: 1px solid rgba(206,42,30,.16); color: rgba(255,255,255,.88); font-weight: 500; }
.ls-right li.is-hot { background: var(--red-soft); border-color: rgba(206,42,30,.36); color: #fff; font-weight: 700; }
.ls-no { flex: none; font-size: var(--fs-label); color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ls-right .ls-no { color: var(--red-text); }
.ls-dots { position: relative; height: 180px; }
.ls-dots span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--red); opacity: 0; left: calc(18px + (var(--i) * 37 % 64) * 1px); top: calc(var(--i) * 27px); }
.js .is-built .ls-dots span { animation: a-fade 300ms ease calc(500ms + var(--i) * 70ms) both, float 3s ease-in-out calc(1200ms + var(--i) * 200ms) infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.stat-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 16px; }
.stat { display: grid; place-items: center; min-height: 64px; padding: 12px 16px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); text-align: center; }
.stat strong { font-size: 16px; font-weight: 900; }
.stat.is-red { background: rgba(206,42,30,.09); border-color: rgba(206,42,30,.28); }

/* ── 07 검색: 왼쪽 제목 단 + 중심과 둘레 ── */
.hub-wrap { display: grid; grid-template-columns: 300px 520px; gap: 100px; align-items: center; justify-content: center; }
.head-left { text-align: left; }
.title-s { font-size: clamp(30px, 2.5vw, 36px); line-height: 1.12; }
.head-left .sub { font-size: 14px; line-height: 1.62; }
.note-card { margin-top: 20px; padding: 13px 16px; border-radius: 20px; background: rgba(206,42,30,.07); border: 1px solid rgba(206,42,30,.2); }
.nc-k { display: block; font-size: var(--fs-label); color: var(--ink-3); letter-spacing: .04em; margin-bottom: 4px; }
.note-card p { font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.55; }
.hub { position: relative; width: 520px; height: 520px; }
.hub-glow { position: absolute; inset: 60px; border-radius: 50%; background: var(--red); opacity: .1; filter: blur(70px); }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-lines line { stroke: var(--red); stroke-width: .8; opacity: .5; }
.hub-core { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; display: grid; place-items: center; border-radius: 50%; background: #1a0b09; border: 1px solid var(--red-line); animation: glow var(--t-glow) ease-in-out infinite; }
.hub-core img { width: 64px; height: auto; }
.hub ol { position: absolute; inset: 0; }
.hb-node { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; }
.hb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); margin-bottom: 8px; box-shadow: 0 0 0 4px rgba(206,42,30,.15); }
.hb-node strong { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.hb-node.is-big { width: 176px; }
.hb-node.is-big .hb-dot { width: 16px; height: 16px; box-shadow: 0 0 0 6px rgba(206,42,30,.18), 0 0 24px rgba(206,42,30,.5); }
.hb-node.is-big strong { font-size: 16px; font-weight: 800; color: #fff; }
.hb-node.is-big span { margin-top: 4px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; text-wrap: balance; }
.js .is-built .hub-lines line[data-a="draw"] { animation: a-draw 900ms var(--ease-out) var(--d) both; }

/* ── 08 성과: 카드 둘 + 긴 판 ── */
.pcards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.pcard { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-radius: var(--radius-panel); background: #131313; border: 1px solid rgba(255,255,255,.1); text-align: left; }
.pcard.is-red { border-color: rgba(206,42,30,.3); }
.tag { display: inline-flex; padding: 3px 10px; border-radius: 4px; font-size: 13px; font-weight: 900; background: rgba(255,255,255,.88); color: #000; }
.tag.is-red { background: var(--red); color: #fff; }
.pcard p { font-size: 16px; font-weight: 700; line-height: 1.5; }
.pcard .tag { flex: none; }
.wide { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-top: 20px; padding: 20px 24px; border-radius: var(--radius-panel); border: 1px solid rgba(206,42,30,.36); background: rgba(206,42,30,.04); text-align: left; }
.wd-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--red-soft); }
.wd-text strong { display: block; font-size: 17px; font-weight: 900; }
.wd-text span { font-size: 13px; color: var(--ink-2); }
.wd-checks { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 18px; }
.wd-checks li, .docs ul li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.78); }
.wd-checks svg, .docs ul svg, .of-check svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--red-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 09 결과물: 카드 넷 + 아래 칸 ── */
.docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.docs > li { padding: 20px; border-radius: var(--radius-panel); background: #131313; border: 1px solid rgba(255,255,255,.08); text-align: left; }
.docs h3 { margin-top: 16px; font-size: 16px; font-weight: 800; }
.docs ul { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.mini-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 12px; margin-top: 16px; }
.mini { display: grid; place-items: center; min-height: 52px; padding: 10px 14px; border-radius: 20px; background: rgba(206,42,30,.07); border: 1px solid rgba(206,42,30,.22); text-align: center; }
.mini strong { font-size: 14px; font-weight: 800; }

/* ── 10 진행: 가로선 위 점 + 카드, 마지막 강조 ── */
.tline { position: relative; margin-top: 48px; }
.tline ol { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 16px; }
.tline li { display: flex; flex-direction: column; align-items: center; }
.tl-line { position: absolute; top: 13px; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(206,42,30,.8)); }
.tl-dot { position: relative; z-index: 1; width: 18px; height: 18px; margin: 4px 0 16px; border-radius: 50%; background: #1c1c1c; border: 2px solid rgba(255,255,255,.22); }
.tline li.is-hot .tl-dot { width: 28px; height: 28px; margin: -1px 0 11px; background: var(--red); border-color: var(--red); animation: glow var(--t-glow) ease-in-out infinite; }
.tl-card { width: 100%; padding: 16px; border-radius: var(--radius-panel); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); text-align: left; }
.tline li.is-hot .tl-card { background: rgba(206,42,30,.09); border-color: rgba(206,42,30,.3); box-shadow: 0 0 40px rgba(206,42,30,.1); }
.tl-no { display: block; font-size: var(--fs-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tline li.is-hot .tl-no { color: var(--red-text); }
.tl-card strong { display: block; margin-top: 6px; font-size: 16px; font-weight: 900; }
.tl-card span:last-child { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.5; text-wrap: balance; }
.notice { margin-top: 28px; padding: 18px 32px; border-radius: var(--radius-panel); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); text-align: center; }
.notice p { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.86); }

/* ── 11 구성: 왼쪽 큰 판 + 단추 / 오른쪽 목록 ── */
.offer { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; text-align: left; align-items: start; }
.of-left { display: flex; flex-direction: column; gap: 16px; }
.of-card { padding: 28px 26px; border-radius: var(--radius-panel); background: #131313; border: 1px solid rgba(255,255,255,.08); }
.of-est span { display: block; font-size: 14px; color: var(--ink-2); }
.of-est strong { display: block; margin-top: 8px; font-size: clamp(44px, 4.2vw, 60.8px); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.of-cost { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; font-size: 13px; color: var(--red-text); line-height: 1.5; }
.of-dot { flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--red); }
.of-right { display: flex; flex-direction: column; gap: 12px; }
.of-right li { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 16px 18px; border-radius: 20px; background: rgba(206,42,30,.03); border: 1px solid rgba(206,42,30,.14); }
.of-right li.is-hot { background: var(--red-soft); border-color: rgba(206,42,30,.36); }
.of-check { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(206,42,30,.14); }
.of-right strong { font-size: 16px; font-weight: 800; }
.of-right li > span:last-child { font-size: 13px; color: var(--ink-2); line-height: 1.5; text-wrap: balance; }

/* ── 12 상담: 가운데 쌓인 문장 + 연락 판 ── */
.close-title { margin-top: 18px; font-size: var(--fs-close-big); font-weight: 900; line-height: 1.2; letter-spacing: -.02em; }
.close-title .cl { display: block; }
.close-title .cl.is-red { color: var(--red); }
.close-sub { margin-top: 14px; font-size: 20px; font-weight: 300; color: rgba(255,255,255,.62); }
.cbar { margin-top: 34px; border-radius: var(--radius-panel); background: #111; border: 1px solid rgba(206,42,30,.24); overflow: hidden; text-align: left; }
.cb-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px 24px; }
.cb-icon, .cb-ci { display: grid; place-items: center; border-radius: 50%; }
.cb-icon { width: 48px; height: 48px; background: var(--red-soft); }
.cb-icon svg, .cb-ci svg { width: 22px; height: 22px; fill: none; stroke: var(--red-text); stroke-width: 1.6; stroke-linejoin: round; }
.cb-text strong { display: block; font-size: 16px; font-weight: 900; }
.cb-text ul { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 4px; }
.cb-text li { font-size: 13px; color: var(--ink-2); }
.cb-text li + li::before { content: '/'; margin: 0 8px; color: var(--ink-4); }
.cb-cells { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.07); }
.cb-cell { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 18px 24px; transition: background-color 180ms ease; }
.cb-cell + .cb-cell { border-left: 1px solid rgba(255,255,255,.07); }
.cb-cell:hover { background: rgba(255,255,255,.03); }
.cb-ci { grid-row: span 2; width: 36px; height: 36px; background: rgba(255,255,255,.05); }
.cb-ci svg { width: 18px; height: 18px; stroke: rgba(255,255,255,.75); }
.cb-ci.is-red svg { stroke: var(--red-text); }
.cb-k { font-size: var(--fs-label); color: var(--ink-3); letter-spacing: .04em; }
.cb-cell strong { font-size: 16px; font-weight: 800; }
.close-links { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.close-links a { height: 32px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 16px; font-size: 13px; color: rgba(255,255,255,.66); transition: background-color 180ms ease, color 180ms ease; }
.close-links a:hover { color: #fff; background: rgba(255,255,255,.06); }
.close-foot { margin-top: 18px; text-align: center; font-size: var(--fs-label); color: var(--ink-3); letter-spacing: .06em; }

/* ── 업종 목록 ── */
.library { position: relative; z-index: 1; padding: 96px 24px 80px; }
.lib-inner { width: min(1024px, 100%); margin: 0 auto; }
.lib-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 36px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 32px; padding: 0 14px; border-radius: 16px; font-size: 13px; color: var(--ink-2); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.chip:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.chip[aria-pressed="true"] { color: #fff; background: var(--red-soft); border-color: rgba(206,42,30,.45); }
.search { display: flex; align-items: center; gap: 10px; }
.search label { font-size: var(--fs-small); color: var(--ink-3); }
.search input { width: 220px; height: 34px; padding: 0 14px; border-radius: 17px; font: inherit; font-size: 13px; color: #fff; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); }
.search input::placeholder { color: rgba(255,255,255,.4); }
.search input:focus { outline: none; border-color: var(--red); }
.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.lc { position: relative; display: flex; flex-direction: column; min-height: 196px; padding: 20px; border-radius: var(--radius-panel); background: #131313; border: 1px solid rgba(255,255,255,.08); transition: border-color 220ms ease, transform 220ms var(--ease-out), background-color 220ms ease; }
.lc.is-ready:hover { border-color: rgba(206,42,30,.4); transform: translateY(-2px); }
.lc.is-common { box-shadow: inset 0 2px 0 var(--red); }
.lc-tag { align-self: flex-start; padding: 2px 8px; border-radius: 4px; font-size: var(--fs-label); color: var(--red-text); background: rgba(206,42,30,.1); }
.lc-title { margin-top: 14px; font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
.lc-sum { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.lc-route { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 12px; font-size: var(--fs-small); color: var(--ink-3); }
.lc-route li + li::before { content: '→'; margin: 0 6px; color: var(--red-text); }
.lc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; }
.lc-status { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: var(--fs-small); color: var(--ink-3); }
.lc-status span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
.lc.is-preparing { min-height: 150px; }
.lc.is-preparing .lc-title { color: rgba(255,255,255,.62); }
.lc.is-preparing .lc-tag { color: var(--ink-3); background: rgba(255,255,255,.05); }
.lib-empty { margin-top: 40px; text-align: center; color: var(--ink-2); }

/* ── 목차 · 알림 ── */
.toc { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0,0,0,.72); padding: 24px; }
.toc-panel { width: min(560px, 100%); padding: 28px; border-radius: 20px; background: #101010; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.toc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 20px 0 22px; }
.toc-list a { display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 17px; font-weight: 700; transition: background-color 180ms ease; }
.toc-list a span { font-size: var(--fs-small); color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.toc-list a:hover, .toc-list a[aria-current="true"] { background: rgba(255,255,255,.05); }
.toc-list a[aria-current="true"] span { color: var(--red-text); }
.toc-panel .btn + .btn { margin-left: 6px; }
.toast { position: fixed; left: 50%; bottom: 64px; z-index: 50; transform: translateX(-50%); padding: 12px 20px; border-radius: 16px; background: #1a1a1a; border: 1px solid rgba(255,255,255,.14); font-size: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }

/* ── 장면 전환 (PC 무대) ── */
.deck { position: relative; z-index: 1; }
.scene { position: relative; }
@keyframes scene-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scene-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-20px); } }

@media (min-width: 900px) {
  .js body[data-view="deck"] { height: 100dvh; overflow: hidden; }
  .js body[data-view="deck"] .library { display: none; }
  .js body[data-view="deck"] .deck-ui { display: block; }
  .js .deck { position: fixed; inset: 0; }
  .js .deck:not(.is-active) { display: none; }
  .js .deck .scene { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 64px 80px; }
  .js .deck .scene.is-current, .js .deck .scene.is-leaving { display: flex; }
  .js .deck .scene.is-current { animation: scene-in var(--t-scene) var(--ease-std) both; }
  .js .deck .scene.is-leaving { animation: scene-out var(--t-scene) var(--ease-std) both; pointer-events: none; }
  .js .deck .stage { width: min(var(--content), 100%); transform: scale(var(--fit, 1)); transform-origin: center; }
  .js .deck .sc-opening .stage { width: 100%; }
  .js .deck .sc-opening { padding: 64px 40px; }
  .js body[data-view="library"] .deck { display: none; }
  .js body.is-present .tools { opacity: 0; transition: opacity 200ms ease; }
  .js body.is-present .tools:hover, .js body.is-present .tools:focus-within { opacity: 1; }
}

/* ── 휴대폰·좁은 화면: 위에서 아래로 읽는다. 스크롤을 가로채지 않는다 ── */
@media (max-width: 899px) {
  .wide-only { display: none !important; }
  .tools { height: 56px; padding: 0 8px; background: rgba(5,5,5,.88); pointer-events: auto; }
  .tool { height: 44px; padding: 0 12px; border-radius: 22px; font-size: 13px; }
  .chip, .btn-s, .close-links a { min-height: 44px; border-radius: 22px; }
  .search input { height: 44px; border-radius: 22px; }
  .toc-list a { min-height: 44px; align-items: center; }
  .tools-deck, .scene-label { display: none; }
  .scene { padding: 72px 20px 64px; border-bottom: 1px solid rgba(255,255,255,.04); }
  .js .deck:not(.is-active) { display: none; }
  .js body[data-view="deck"] .library { display: none; }
  .js body[data-view="library"] .deck { display: none; }
  .stage { width: 100%; }
  .title { font-size: clamp(24px, 7.4vw, 30px); line-height: 1.3; }
  .sub { font-size: 14px; }
  .sc-opening { min-height: 100svh; display: flex; align-items: center; padding-top: 90px; }
  .op-field .w:nth-child(n+9) { display: none; }
  .op-field .w { font-size: 12px; }
  .statement { font-size: clamp(38px, 11vw, 46px); }
  .op-sub { font-size: 18px; font-weight: 400; }
  .route { grid-template-columns: 1fr 1fr; row-gap: 22px; margin-top: 28px; }
  .rt-line { display: none; }
  .op-actions { flex-direction: column; width: 100%; max-width: 320px; }
  .funnel { grid-template-columns: 1fr; gap: 16px; }
  .fn-left li { width: calc(100% - var(--k) * 16px); }
  .fn-mid { transform: rotate(90deg); }
  .steps ol { grid-template-columns: 1fr; gap: 14px; }
  .steps li { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 14px; text-align: left; align-items: center; }
  .st-box { width: 56px; height: 56px; grid-row: span 2; }
  .steps strong { margin-top: 0; }
  .st-desc { margin-top: 2px; max-width: none; }
  .st-line { left: 28px; right: auto; top: 28px; bottom: 28px; width: 1px; height: auto; background: linear-gradient(rgba(206,42,30,.55), var(--red)); transform-origin: top center; }
  .st-back, .st-back-arrow { display: none; }
  .bar-card { padding: 16px; }
  .bar-card p { font-size: 15px; }
  .flow ol { grid-template-columns: 1fr; gap: 18px; }
  .fl-line { display: none; }
  .info-row, .stat-row, .mini-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tr { grid-template-columns: 1fr; gap: 6px; }
  .lists { grid-template-columns: 1fr; gap: 10px; }
  .ls-dots { display: none; }
  .hub-wrap { grid-template-columns: 1fr; gap: 12px; }
  .head-left { text-align: center; }
  .hub { width: 100%; height: auto; aspect-ratio: 1; max-width: 360px; margin: 0 auto; }
  .hub-glow { inset: 12%; }
  .hb-node, .hb-node.is-big { width: 108px; }
  .hb-node strong { font-size: 12px; }
  .hb-node.is-big strong { font-size: 13px; }
  .hb-node.is-big span { display: none; }
  .hub-core { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
  .hub-core img { width: 48px; }
  .pcards { grid-template-columns: 1fr; gap: 10px; }
  .wide { grid-template-columns: auto 1fr; }
  .wd-checks { grid-column: 1 / -1; }
  .docs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .docs > li { padding: 16px; }
  .tline ol { grid-template-columns: 1fr; gap: 10px; }
  .tline li { flex-direction: row; align-items: flex-start; gap: 14px; }
  .tl-dot, .tline li.is-hot .tl-dot { margin: 16px 0 0; flex: none; }
  .tl-line { display: none; }
  .notice { padding: 16px; }
  .offer { grid-template-columns: 1fr; gap: 16px; }
  .close-title { font-size: 34px; }
  .close-sub { font-size: 17px; }
  .cb-top { grid-template-columns: auto 1fr; }
  .cb-top .btn { grid-column: 1 / -1; }
  .cb-text ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .cb-text li + li::before { content: none; }
  .note-card { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
  .cb-cells { grid-template-columns: 1fr; }
  .cb-cell + .cb-cell { border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
  .close-links { flex-wrap: wrap; }
  .library { padding: 80px 16px 56px; }
  .lib-grid { grid-template-columns: 1fr; }
  .search input { width: 100%; }
  .search { width: 100%; }
  .toc-list { grid-template-columns: 1fr 1fr; }
  .toc-list a { font-size: 15px; padding: 9px 10px; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .hub-wrap { grid-template-columns: 280px 440px; gap: 48px; }
  .hub { width: 440px; height: 440px; }
  .hub-glow { inset: 40px; }
}

/* ══ 로펌 제안서 부품 ══ */
.tools-brand { padding-left: 8px; color: rgba(255,255,255,.62); }

/* 결과물 줄 · 번호 배지 · 켜짐 */
.outs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 18px; }
.outs-k { font-size: var(--fs-small); color: var(--ink-3); margin-right: 4px; }
.outs ul { display: contents; }
.outs li { padding: 6px 12px; border-radius: 14px; font-size: 13px; color: rgba(255,255,255,.84); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.lk-no { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; font-style: normal; color: #fff; background: var(--red); margin-right: 8px; transition: transform 240ms var(--ease-out), box-shadow 240ms ease; }
[data-lk] { transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease, box-shadow 260ms ease; }
[data-lk].is-on { background: rgba(206,42,30,.16) !important; border-color: rgba(206,42,30,.6) !important; color: #fff !important; box-shadow: 0 0 30px rgba(206,42,30,.25); }
[data-lk].is-on .lk-no { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(206,42,30,.25); }

/* 실제 화면 상자: 카메라(shot-cam)가 이미지를 확대·이동, 지점(shot-mark)이 켜진다 */
.shot { margin: 0; min-width: 0; }
.shot-label { margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--red-text); text-align: left; }
.shot-view { position: relative; overflow: hidden; border-radius: 14px; background: #f4f4f4; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px rgba(0,0,0,.5); cursor: zoom-in; }
.shot-cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.shot-cam img { position: absolute; height: auto; max-width: none; user-select: none; }
.shot-mark { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 6px; border: 2px solid var(--red); opacity: 0; transition: opacity 300ms ease, box-shadow 300ms ease; pointer-events: none; }
.shot-mark b { position: absolute; left: -2px; top: -2px; transform: translate(-40%, -40%); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; background: var(--red); }
.shot-mark.is-on { opacity: 1; box-shadow: 0 0 0 4000px rgba(5,5,5,.28); }
.shot.is-done .shot-mark { opacity: .9; border-width: 1.5px; }
.shot figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--fs-small); color: var(--ink-3); text-align: left; }
.shot-zoom { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 12px; color: rgba(255,255,255,.84); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background-color 180ms ease; }
.shot-zoom:hover { background: rgba(255,255,255,.12); }
.shot-zoom svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cap-line { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-3); text-align: left; }

/* 두 단 배치 */
.split { display: grid; gap: 36px; align-items: center; margin-top: 30px; text-align: left; }
.split-shot { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.split-wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.split-geo { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; margin-top: 0; }
.split-land { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
.side { min-width: 0; }
.side-list { display: flex; flex-direction: column; gap: 8px; }
.side-list li { display: flex; align-items: center; min-height: 46px; padding: 10px 16px; border-radius: 16px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.86); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.side-num .ls-no { margin-right: 10px; }
.side-doc { padding: 6px 0 6px 18px; border-left: 2px solid rgba(206,42,30,.5); }
.reads { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.reads li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; font-size: 14px; font-weight: 700; border: 1px solid transparent; }
.rd-arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--red-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 02 흐름 위 점 */
.steps-flow .st-line { container-type: inline-size; }
.steps-flow .fl-dot { background: var(--red-text); box-shadow: 0 0 10px var(--red); }

/* 04 계단: 대 → 소 → 검색 → 문구 → 랜딩 */
.cascade { display: flex; flex-direction: column; gap: 10px; }
.cs-row { position: relative; margin-left: calc(var(--k) * 34px); }
.cs-row + .cs-row::before { content: ''; position: absolute; left: -16px; top: -24px; width: 12px; height: 42px; border-left: 1px solid rgba(206,42,30,.55); border-bottom: 1px solid rgba(206,42,30,.55); border-bottom-left-radius: 8px; }
.cs-bar { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 18px; border-radius: 14px; font-size: 15px; font-weight: 800; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.cs-bar.is-hot { background: var(--red-soft); border-color: rgba(206,42,30,.45); }
.cs-extra { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cs-extra li { padding: 4px 10px; border-radius: 10px; font-size: 12px; color: var(--ink-2); border: 1px dashed rgba(255,255,255,.18); }
.cs-cap { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-3); }

/* 05 결과물 열 이름 */
.ls-col { display: flex; flex-direction: column; }
.ls-k { margin-bottom: 8px; font-size: var(--fs-small); color: var(--ink-3); text-align: left; }

/* 06 접수 흐름 (설명 없는 짧은 카드) + 접수 기준 줄 */
.tline-s .tl-card { padding: 12px 14px; }
.tline-s .tl-card strong { font-size: 15px; }
.tline-s li.is-hot .tl-dot { width: 24px; height: 24px; margin: 1px 0 13px; }
.ledger { margin-top: 26px; border-radius: 16px; background: #0f0f0f; border: 1px solid rgba(206,42,30,.28); overflow: hidden; }
.lg-head { display: grid; grid-template-columns: repeat(5, 1fr); }
.lg-head li { padding: 14px 16px; font-size: 14px; font-weight: 800; text-align: left; border-right: 1px solid rgba(255,255,255,.06); background: rgba(206,42,30,.08); }
.lg-head li:last-child { border-right: 0; }
.lg-rows { display: block; padding: 10px 16px 12px; }
.lg-rows i { display: block; height: 10px; margin: 6px 0; border-radius: 5px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 calc(20% - 12px), transparent calc(20% - 12px) 20%); }

/* 07 행동 → 의미 표 + 대조 순서 */
.table-pair .tr { grid-template-columns: 200px 32px 1fr; }
.td-k { font-weight: 800; color: #fff; }
.tr-arrow { display: grid; place-items: center; }
.tr-arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.table-pair .tr.is-hot .td { background: var(--red-soft); border-color: rgba(206,42,30,.45); color: #fff; }
.table-pair .tr.is-hot .tr-arrow svg { stroke: var(--red-text); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; margin-top: 22px; }
.chips li { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 16px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.86); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.chips li + li { margin-left: 30px; position: relative; }
.chips li + li::before { content: ''; position: absolute; left: -24px; top: 50%; width: 18px; height: 1px; background: var(--red); }
.chips li + li::after { content: ''; position: absolute; left: -9px; top: calc(50% - 3px); border-left: 5px solid var(--red); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.chips-flow { margin-top: 26px; }
.chips-flow li.is-key { border-color: rgba(206,42,30,.45); background: rgba(206,42,30,.08); }

/* 09 칸 줄 */
.shot-wide { width: min(1024px, 100%); margin: 26px auto 0; }
.cells { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; margin-top: 18px; text-align: left; }
.cells li { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.cell-no { font-size: var(--fs-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cells strong { font-size: 14px; font-weight: 700; }

/* 11 지역 × 분야 × 상황 */
.formula { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 18px auto 0; padding: 8px 12px; border-radius: 20px; border: 1px solid transparent; }
.fm-chip { padding: 8px 16px; border-radius: 14px; font-size: 15px; font-weight: 800; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.fx { font-size: 18px; color: var(--red-text); font-weight: 300; }
.formula .lk-no { margin: 0 0 0 4px; }

/* 13 검색·AI */
.split-geo .head-left .title { margin-top: 14px; }
.split-geo .side-list { margin-top: 22px; }
.cycle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.cycle li { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 14px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.86); background: rgba(206,42,30,.08); border: 1px solid rgba(206,42,30,.28); }
.cycle li + li:not(.cy-loop)::before { content: '→'; margin-right: 8px; color: var(--red-text); font-weight: 400; }
.cycle .cy-loop { padding: 4px; background: none; border: 0; }
.cy-loop svg { width: 18px; height: 18px; fill: none; stroke: var(--red-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cycle .lk-no { margin-right: 6px; }

.geo-strip { margin: 0; display: flex; flex-direction: column; align-items: stretch; text-align: left; }
.crop { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.crop .lk-no { margin: 2px 0 0; }
.crop-view { position: relative; flex: 1; overflow: hidden; border-radius: 8px; background: #fff; }
.crop-view img { position: absolute; height: auto; max-width: none; }
.crop-q .crop-view { max-width: 360px; margin-left: auto; }
.crop-s .crop-view { max-width: 340px; }
.geo-link { align-self: center; width: 1px; height: 18px; background: linear-gradient(var(--red), rgba(206,42,30,.3)); }
.geo-strip figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--fs-small); color: var(--ink-3); }

/* 14 페이지 구성 도식 (위에서 아래로 쌓인 구간) */
.anatomy { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px; background: #0f0f0f; border: 1px solid rgba(255,255,255,.1); }
.anatomy li { display: flex; align-items: center; min-height: 52px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.anatomy li:first-child { min-height: 76px; background: rgba(255,255,255,.06); }
.anatomy li:last-child { background: rgba(206,42,30,.12); border-color: rgba(206,42,30,.4); }
.an-no { margin-right: 10px; font-size: var(--fs-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 15 셋째 단계에서 네 채널로 갈라짐 */
.fan { position: relative; margin-top: 40px; }
.fan .st-line { top: 32px; }
.fan-flow { display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.fan-flow li { display: flex; flex-direction: column; align-items: center; }
.fan-node { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #131313; border: 1px solid rgba(206,42,30,.16); }
.fan-node.is-hot { background: rgba(206,42,30,.12); border-color: var(--red-line); animation: glow var(--t-glow) ease-in-out infinite; }
.fan-flow strong { margin-top: 12px; font-size: 15px; font-weight: 800; }
.fan-lines { display: block; width: 100%; height: 56px; margin-top: 8px; overflow: visible; }
.fan-lines path { fill: none; stroke: rgba(206,42,30,.6); stroke-width: 1; }
.fan-out { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fan-out li { display: grid; place-items: center; min-height: 64px; padding: 12px; border-radius: 16px; font-size: 15px; font-weight: 800; text-align: center; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }

/* 16 보고서 한 장 */
.sheet { position: relative; margin-top: 34px; padding: 10px; border-radius: 20px; background: #101010; border: 1px solid rgba(255,255,255,.1); }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-grid li { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 14px; background: rgba(255,255,255,.03); text-align: left; }
.sheet-grid li:last-child { background: rgba(206,42,30,.1); }
.sh-no { font-size: var(--fs-label); color: var(--red-text); font-variant-numeric: tabular-nums; }
.sheet-grid strong { font-size: 18px; font-weight: 900; }
.sheet-grid span:last-child { font-size: 14px; color: var(--ink-2); }
.sheet-loop { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; background: #050505; border: 1px solid var(--red-line); animation: glow var(--t-glow) ease-in-out infinite; }
.sheet-loop svg { width: 24px; height: 24px; fill: none; stroke: var(--red-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 17 기간 이름 */
.tl-when { color: #fff; }

/* 18 마무리 */
.offer-close { margin-top: 30px; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choices li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; font-size: 16px; font-weight: 800; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.choices li.is-hot { background: var(--red-soft); border-color: rgba(206,42,30,.45); }
.ch-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); }
.choices li.is-hot .ch-dot { border-color: var(--red); background: radial-gradient(circle, var(--red) 0 3px, transparent 4px); }
.of-desc { margin-top: 16px; font-size: 15px; color: rgba(255,255,255,.86); }
.of-compact li { padding: 11px 16px; grid-template-rows: auto; align-items: center; }
.of-compact .of-check { grid-row: auto; }
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }

/* 목차 18 */
.toc-18 { grid-template-columns: repeat(3, 1fr); }
.toc-18 a { font-size: 15px; padding: 8px 10px; }
.toc-panel:has(.toc-18) { width: min(720px, 100%); }

/* 크게 보기 창 */
.lightbox { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: rgba(0,0,0,.9); }
.lb-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 24px; overflow: auto; }
.lb-body img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; background: #fff; cursor: zoom-in; }
/* 그림을 누르면 원래 크기로 커지고(누른 곳이 가운데), 다시 누르면 화면 맞춤으로 */
.lb-body.is-actual { display: block; place-items: start; justify-items: start; }
.lb-body.is-actual img { max-width: none; max-height: none; cursor: zoom-out; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.1); }
.lb-cap { font-size: 13px; color: var(--ink-2); }
body.is-zoom { overflow: hidden; }

@media (max-width: 899px) {
  .split, .split-shot, .split-wide, .split-geo, .split-land { grid-template-columns: 1fr; gap: 18px; }

  .split-geo .head-left { text-align: center; }
  .cascade .cs-row { margin-left: calc(var(--k) * 14px); }
  .cs-bar { font-size: 13px; }
  .table-pair .tr { grid-template-columns: 1fr; gap: 4px; }
  .tr-arrow { display: none; }
  .chips { flex-direction: column; align-items: stretch; gap: 22px; }
  .chips li { justify-content: center; }
  .chips li + li { margin-left: 0; }
  .chips li + li::before { left: 50%; top: -18px; width: 1px; height: 14px; }
  .chips li + li::after { left: calc(50% - 3.5px); top: -7px; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 5px solid var(--red); border-bottom: 0; }
  .lg-head { grid-template-columns: repeat(3, 1fr); }
  .lg-head li { padding: 12px 12px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .lg-head li:nth-child(3n) { border-right: 0; }
  .cells { grid-template-columns: 1fr; gap: 8px; }
  .cells li { padding: 12px 16px; }
  .formula { flex-wrap: wrap; }
  .fan-flow { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .fan .st-line, .fan-lines { display: none; }
  .fan-out { grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .sheet-grid { grid-template-columns: 1fr; }
  .sheet-loop { display: none; }
  .toc-18 { grid-template-columns: 1fr 1fr; }
  .lb-body { padding: 12px; }
  .shot figcaption { flex-wrap: wrap; }
  .shot-zoom { height: 44px; padding: 0 16px; border-radius: 22px; }
  .close-actions .btn { width: 100%; }
}

/* ══ 두 줄 항목 · 이름+설명 두 단 배치 ══ */
.pt { display: block; }
.td-parts { flex-direction: column; align-items: flex-start; gap: 2px; }
.table-wide { width: min(880px, 100%); }
.table-wide .tr { grid-template-columns: 250px 1fr; }
.nd { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.nd strong { font-size: 15px; font-weight: 800; color: #fff; }
.nd > span { font-size: 13px; font-weight: 500; color: var(--ink-2); line-height: 1.45; }
.ls-left li .nd strong { font-size: 14px; }
.reads li .nd strong { font-size: 14px; }
.cells li { align-items: flex-start; }
.cells li .nd strong { font-size: 15px; }
.anatomy li .nd strong { font-size: 14px; }
.fan-out li { place-items: center; }
.fan-out li .nd { align-items: center; text-align: center; }
.choices li .nd strong { font-size: 16px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.compare li { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.compare li.is-hot { background: var(--red-soft); border-color: rgba(206,42,30,.4); }
.compare .nd strong { font-size: 14px; }
.compare .nd > span { font-size: 12.5px; }
.chips-plain li + li { margin-left: 8px; }
.chips-plain li + li::before, .chips-plain li + li::after { content: none; }
.chips-plain { gap: 8px 0; margin-top: 18px; }
.ledger .lg-head { grid-template-columns: repeat(var(--n, 5), 1fr); }
.fm-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 6px; }
.formula-ex { margin: 0; padding: 0; gap: 6px; }
.fm-chip.is-ex { padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
.formula-ex .fx { font-size: 14px; }
.tl-parts .pt + .pt { margin-top: 2px; }
.cost-parts { display: flex; flex-wrap: wrap; gap: 0 4px; }
.cost-parts .pt { display: inline; }
.cost-parts .pt + .pt::before { content: '/ '; color: var(--ink-3); }
.offer-close .of-card { display: flex; flex-direction: column; gap: 14px; }
.sc-contact .head .sub { margin-top: 10px; }

/* ── 머리 로고: 제안서 틀(모든 장면·휴대폰). 정식 로고 파일 그대로 ── */
.tools-logo { display: inline-flex; align-items: center; height: 32px; padding: 0 6px; border-radius: 8px; }
.tools-logo img { display: block; width: 82px; height: auto; }
.tools-logo + .tools-deck { margin-left: 4px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.14); }

/* ── 10 검색어 → 본문 → HTML: 실제 화면 조각 + 같은 문구 붉은 테 ── */
.pf-key { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; height: 36px; padding: 0 18px 0 12px; border-radius: 18px; font-size: 15px; font-weight: 800; color: #111; background: #fff; box-shadow: 0 0 0 2px var(--red), 0 0 26px rgba(206,42,30,.35); }
.pf-key svg { width: 16px; height: 16px; fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; }
.proof { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; text-align: left; }
.pf-pair { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 6px; align-items: stretch; }
.pf-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 12px 14px 14px; border-radius: var(--radius-panel); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.pf-k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pf-no { font-size: var(--fs-label); font-weight: 700; color: var(--red-text); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.pf-k strong { font-size: 15px; font-weight: 800; }
.pf-d { font-size: 13px; color: var(--ink-2); }
.pf-k .shot-zoom { margin-left: auto; }
.pf-v { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-crop { position: relative; overflow: hidden; border-radius: 8px; background: #fff; min-width: 0; }
.pf-crop img { position: absolute; max-width: none; height: auto; }
.pf-q { flex: 0 0 300px; }
.pf-r { flex: 1 1 auto; }
.pf-h { flex: 1 1 auto; }
/* 결과 조각: PC 는 줄 전체, 휴대폰은 앞부분만 크게(전체는 화면 크게 보기) */
.pf-narrow { display: none; }
.pf-hl { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px solid var(--red); border-radius: 6px; box-shadow: 0 0 0 3px rgba(206,42,30,.16), 0 0 16px rgba(206,42,30,.32); pointer-events: none; }
/* 검색창과 결과 사이: 같은 화면의 중간을 뺐다는 생략 표시 */
.pf-skip { flex: none; display: flex; gap: 4px; padding: 0 2px; }
.pf-skip i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.45); }
.pf-arrow { display: grid; place-items: center; color: var(--red-text); }
.pf-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-src { flex: 1; display: flex; flex-direction: column; min-width: 0; border-radius: 8px; background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.pf-src-k { padding: 6px 12px; font-size: 11px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid rgba(255,255,255,.07); }
.pf-src pre { flex: 1; margin: 0; padding: 10px 12px; font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, "D2Coding", monospace; color: rgba(255,255,255,.88); white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; }
.pf-tag { color: rgba(255,255,255,.56); }
.pf-gap { color: var(--ink-3); }
.pf-src mark { margin: 0 1px; padding: 0; border-radius: 3px; color: #fff; background: rgba(206,42,30,.22); box-shadow: inset 0 0 0 1.5px var(--red); }
.pf-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 10px; font-size: var(--fs-small); color: var(--ink-3); }

/* ── 18 상담 신청: 왼쪽 큰 문장·운영 방식 / 오른쪽 신청 판 ── */
.close-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; text-align: left; }
.close-left .head { text-align: left; }
.close-left .close-title { font-size: min(var(--fs-close-big), 46px); }
.close-left .of-card { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.close-left .close-actions { justify-content: flex-start; margin-top: 18px; }
.inq { display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 18px; border-radius: var(--radius-panel); background: #111; border: 1px solid rgba(206,42,30,.24); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.inq-head h3 { font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
.inq-warn { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--red-text); line-height: 1.5; }
.inq-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.inq-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inq-k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.86); }
.inq-k em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--red-text); }
.inq-k em.is-opt { color: var(--ink-3); }
.inq input[type="text"], .inq input[type="tel"], .inq textarea {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 15px; color: #fff;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
/* 빈 제출 때 초점이 옮겨 가는 칸이 위 고정 막대에 가리지 않게 */
.inq input, .inq textarea { scroll-margin-top: 88px; }
.inq textarea { height: 66px; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.inq input:hover, .inq textarea:hover { border-color: rgba(255,255,255,.24); }
.inq input:focus-visible, .inq textarea:focus-visible { outline: none; border-color: var(--red); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(206,42,30,.25); }
.inq [aria-invalid="true"]:not([type="checkbox"]) { border-color: var(--red-text); }
.inq :disabled { cursor: default; }
.inq input:disabled, .inq textarea:disabled { opacity: .55; }
.inq-svc { min-width: 0; margin: 0; padding: 0; border: 0; }
.inq-svc legend { margin-bottom: 8px; padding: 0; }
.inq-svc ul { display: flex; flex-wrap: wrap; gap: 8px; }
/* 선택 칩: 칩 전체가 label 이라 어디를 눌러도 체크된다. 진짜 체크 상자는 보이지 않게 두고 초점·상태만 칩에 옮긴다 */
.chk { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 18px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.86); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; }
.chk input { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; opacity: 0; pointer-events: none; }
.chk .bx { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.4); transition: background-color 180ms ease, border-color 180ms ease; }
.chk .bx svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.chk input:checked + .bx { background: var(--red); border-color: var(--red); }
.chk input:checked + .bx svg { opacity: 1; }
.chk:has(input:checked) { background: var(--red-soft); border-color: rgba(206,42,30,.5); }
.chk:hover { border-color: rgba(255,255,255,.24); }
.chk:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.chk:has(input[aria-invalid="true"]) { border-color: var(--red-text); }
.chk:has(input:disabled) { opacity: .55; }
.inq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inq-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.inq-agree-box { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.chk-agree { min-height: 34px; padding: 0 12px 0 8px; background: transparent; }
.chk-agree em { margin-left: 6px; font-style: normal; font-size: 11px; color: var(--red-text); }
.inq-terms { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.inq-terms span:not(:last-child)::after { content: ' /'; }
.inq-submit { position: relative; min-width: 150px; }
.inq-submit:disabled { cursor: default; }
.inq-spin, .inq-done { display: none; }
.inq-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: inq-spin 800ms linear infinite; }
.inq-done svg { display: block; width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.inq[data-state="sending"] .inq-spin, .inq[data-state="done"] .inq-done { display: block; }
.inq[data-state="sending"] .inq-submit { background: #a8261b; box-shadow: none; }
.inq[data-state="done"] .inq-submit { background: #1d0908; border: 1px solid rgba(206,42,30,.5); box-shadow: none; }
.inq-status { min-height: 20px; font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.inq-status.is-fail { color: var(--red-text); }
.inq-status.is-done { color: #fff; }
@keyframes inq-spin { to { transform: rotate(360deg); } }

/* ══ 바탕 영상 슬롯 ══ */
.vslot { pointer-events: none; overflow: hidden; }
.vslot video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A 표지: 장면 전체 바탕. 글자 쪽은 어둡게 눌러 대비를 지킨다 */
.op-video { position: absolute; inset: 0; z-index: 0; }
.op-video::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(5,5,5,.5), rgba(5,5,5,.18) 70%, rgba(5,5,5,.05)); }
.sc-opening .op-main { z-index: 1; }
.js .sc-opening.is-built .op-video { animation: a-fade 1200ms var(--ease-std) both; }
/* B 전체 흐름: 단계 상자 뒤 띠. 영상 속 가로선(띠 높이의 49.3%)을 상자 가운데 선(위에서 40px)에 맞춘다 */
.steps-flow .flow-video { position: absolute; z-index: 0; left: 50%; width: min(1280px, 100vw); aspect-ratio: 1920 / 432; top: calc(40px - min(1280px, 100vw) * .1109); transform: translateX(-50%); opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 30%, #000 70%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-composite: intersect; }
/* 영상 띠가 위로 넘쳐도 제목·설명이 그 위에 오게 (띠는 위치 지정 요소라 그냥 두면 앞 글자를 덮는다) */
.sc-flow .head { position: relative; z-index: 2; }
.steps-flow .st-line, .steps-flow ol { z-index: 1; }
.steps-flow ol { position: relative; }
/* 영상이 돌 때는 단계 선을 광선이 한 줄로 모이는 때(약 3.6초)에 그린다 */
.js .sc-flow.has-video.is-built .steps-flow .st-line { animation-delay: 3600ms; }
.js .sc-flow.has-video.is-built .steps-flow .fl-dot { animation-delay: 4600ms; }
/* 멈춤/재생 단추 */
.vid-toggle { position: absolute; z-index: 3; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 12px; color: rgba(255,255,255,.78); background: rgba(5,5,5,.55); border: 1px solid rgba(255,255,255,.16); transition: background-color 180ms ease, color 180ms ease; }
.vid-toggle:hover { color: #fff; background: rgba(255,255,255,.1); }
.sc-opening > .vid-toggle { right: 128px; bottom: 16px; }
.steps-flow .vid-toggle { right: 0; bottom: -50px; }

@media (max-width: 899px) {
  .table-wide .tr { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .chips-plain { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .chips-plain li + li { margin-left: 0; }
  .ledger .lg-head { grid-template-columns: 1fr 1fr; }
  .ledger .lg-head li:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.06); }
  .ledger .lg-head li:nth-child(2n) { border-right: 0; }
  .fm-examples { flex-direction: column; align-items: center; }
  /* 10 검색어 → 본문 → HTML: 순서대로 한 줄씩 */
  .pf-pair { grid-template-columns: 1fr; gap: 10px; }
  .pf-arrow-mid { display: none; }
  .pf-v { flex-direction: column; align-items: stretch; }
  .pf-q { flex: none; width: 100%; max-width: 322px; }
  .pf-skip { align-self: center; padding: 2px 0; }
  .pf-wide { display: none; }
  .pf-narrow { display: block; }
  .pf-k .shot-zoom { margin-left: 0; height: 44px; padding: 0 16px; border-radius: 22px; }
  .tools-logo { height: 44px; }
  /* 18 상담 신청: 큰 문장 → 운영 방식 → 신청 판 → 링크 복사·처음부터 */
  .close-grid { grid-template-columns: 1fr; gap: 22px; }
  .close-left { display: contents; }
  .close-left .head { text-align: center; }
  .close-left .of-card { margin-top: 0; }
  .inq { order: 2; padding: 20px 16px 16px; }
  .close-left .close-actions { order: 3; justify-content: center; margin-top: 0; }
  .inq-row { grid-template-columns: 1fr; }
  .inq input[type="text"], .inq input[type="tel"] { height: 48px; font-size: 16px; }
  .inq textarea { font-size: 16px; }
  .chk { min-height: 44px; border-radius: 22px; }
  .inq-foot { grid-template-columns: 1fr; }
  .inq-submit { width: 100%; height: 50px; }
}

/* 휴대폰 영상 (기본 영상 규칙 뒤에 둔다) */
@media (max-width: 899px) {
  .sc-opening { position: relative; overflow: hidden; }
  /* 세로 영상의 위 붉은 선(영상 높이 28%)이 큰 제목 위로 지나가게 영상 상자를 조금 올린다 */
  .op-video { inset: auto; top: -16%; left: 0; right: 0; height: 124%; }
  .op-video::after { background: rgba(5,5,5,.42); }
  .sc-opening > .vid-toggle { right: 16px; bottom: 16px; min-height: 44px; padding: 0 16px; border-radius: 22px; }
  .steps-flow .flow-video { position: relative; left: auto; top: auto; transform: none; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 18px; opacity: 1; border-radius: 14px; -webkit-mask-image: none; mask-image: none; }
  .steps-flow .vid-toggle { position: static; display: inline-flex; align-items: center; margin-top: 12px; min-height: 44px; padding: 0 16px; border-radius: 22px; }
  .steps-flow .st-line { display: none; }
}

/* 스크립트가 없을 때: 장면이 흐름형으로 모두 보인다 */
html:not(.js) .scene { padding: 72px 20px; }
html:not(.js) .stage { width: min(var(--content), 100%); margin: 0 auto; }

/* 업종 카드 → 제안서 전환 (지원 브라우저만) */
::view-transition-group(deck-stage) { animation-duration: 640ms; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
::view-transition-old(root) { animation: 280ms var(--ease-std) both vt-out; }
::view-transition-new(root) { animation: 420ms var(--ease-std) 200ms both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* 동작 줄이기: 이동·반복 연출을 빼고 내용은 처음부터 보인다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .scene [data-a], .js .library [data-a], .js .sc-opening .op-main > *, .js .sc-opening .statement .sl, .js .sc-opening .rt, .js .sc-opening .rt-line { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; }
  .js .scene [data-a="draw"] { stroke-dashoffset: 0 !important; }
  .js .sc-opening .statement .sl-last { color: #fff; }
  .op-field, .op-beam, .ambient, .ripple, .fl-dot, .rt-flow, .ls-dots span { display: none !important; }
  .ls-dots span { opacity: 1; }
}