/* 메인 페이지 — 피그마 v6.4 (186:576) · 1920 기준, 본문 폭 1440 · 섹션 위 여백 140 */

.s { position: relative; padding: 126px 0; background: var(--bg); overflow: hidden; }
.s:nth-of-type(even) { background: var(--bg-2); }
/* 섹션 경계를 부드럽게: 위 140px 그라디언트 (v6.1) */
.s::before { content: ''; position: absolute; inset: 0 0 auto; height: 126px; background: linear-gradient(to bottom, rgba(20, 19, 17, 0.6), transparent); pointer-events: none; z-index: 0; }
.s > * { position: relative; z-index: 1; }
.s .sec-label { margin-bottom: 50.4px; }
.s .lead-q { margin-bottom: 18px; }
.s .h2 + .sub { margin-top: 18px; }

/* 오른쪽 진행 점 ------------------------------------------------------------ */
.dots { position: fixed; right: 39.6px; top: 50%; z-index: 40; transform: translateY(-50%); opacity: 0; transition: opacity var(--dur-s); }
.dots.is-on { opacity: 1; }
.dots ol { display: grid; gap: 12.6px; }
.dots a { position: relative; display: block; width: 5.4px; height: 5.4px; border-radius: 50%; background: rgba(239, 237, 230, 0.25); transition: all var(--dur-s) var(--ease-lux); }
.dots a.is-on { width: 9px; height: 9px; margin-left: -2px; background: var(--gold); }
.dots a span { position: absolute; right: 19.8px; top: 50%; transform: translate(5.4px, -50%); white-space: nowrap; font-size: 12px; color: var(--sub); opacity: 0; pointer-events: none; transition: all var(--dur-s) var(--ease-lux); }
.dots a:hover span { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 1100px) { .dots { display: none; } }

/* 01 히어로 ---------------------------------------------------------------- */
/* 01 히어로 v7.1: 가운데 정렬 · 배경 영상 · 3D 단어 드럼 · 주소 자동 타이핑 · 문서형 결과지 */
.s01 { position: relative; padding: calc(var(--header-h) + 90px) 0 0; background: #141311; overflow: hidden; }
.s01__bg { position: absolute; inset: 0; z-index: 0; }
.s01__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s01__video { filter: saturate(0.6) brightness(0.75) sepia(0.2); opacity: 0; transition: opacity 1200ms var(--ease-soft); }
.s01__video.is-ready { opacity: 1; }
.s01__grade { position: absolute; inset: 0; background: radial-gradient(55% 45% at 50% 32%, rgba(20, 19, 17, 0.62), transparent 70%), linear-gradient(to bottom, rgba(20, 19, 17, 0.35) 0%, rgba(20, 19, 17, 0.2) 45%, #141311 72%, #141311 100%); }
.s01__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.s01__eb { font-size: 14px; font-weight: 500; color: var(--gold); }
.s01__h { margin-top: 25px; font-size: clamp(40px, 4.8vw, 68px); line-height: 1.28; font-weight: 700; letter-spacing: -0.04em; }
.s01__row { display: flex; justify-content: center; align-items: baseline; gap: 0.28em; font-weight: 300; }
.s01__drum { position: relative; display: inline-block; min-width: max-content; text-align: left; white-space: nowrap; transition: width 460ms var(--ease-lux); }
.s01__face { display: inline-block; color: var(--gold); font-weight: 700; }
.s01__face .ch { display: inline-block; transition: transform 400ms var(--ease-lux), opacity 400ms var(--ease-lux), filter 400ms var(--ease-lux); }
.s01__drum::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 3px; background: rgba(200, 169, 126, 0.6); }
/* 단어 교체: 한 글자씩 흩어졌다 모인다 */
.s01__face .ch { transition-delay: calc(var(--k) * 32ms); }
.s01__face.is-out .ch { transform: translateY(-0.35em); opacity: 0; filter: blur(6px); }
.s01__face.is-pre .ch { transform: translateY(0.35em); opacity: 0; filter: blur(6px); transition: none; }
.s01__line { display: block; }
.s01__sub { margin-top: 28px; font-size: 18px; line-height: 1.7; color: var(--sub); }
.s01__bar { display: flex; align-items: center; gap: 14px; width: min(792px, 100%); margin-top: 40px; padding: 9px 9px 9px 25px; border-radius: 11px; background: var(--ivory); text-align: left; transition: transform var(--dur-s) var(--ease-lux), box-shadow var(--dur-s) var(--ease-lux); }
.s01__bar:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(200, 169, 126, 0.18); }
.s01__url { flex: 1; display: flex; align-items: center; min-width: 0; font-size: 18px; color: #1f1d1a; font-weight: 500; white-space: nowrap; overflow: hidden; }
.s01__pre { color: #6c675f; font-weight: 400; margin-right: 2px; }
.s01__url .caret { width: 2px; height: 22px; margin-left: 2px; background: var(--gold); animation: blink 1s steps(1) infinite; }
.s01__go { flex: none; padding: 15px 24px; border-radius: 6px; background: #211f1c; color: var(--ivory); font-size: 16px; font-weight: 700; transition: background 180ms var(--ease-soft); }
.s01__bar:hover .s01__go { background: #1d1b18; }
.s01__go .arr { display: none; }
/* 결과지 미리보기: 인쇄된 문서 한 장, 아래는 페이드 */
.s01__doc { width: min(1008px, 100%); margin-top: 64px; padding: 0 65px 40px; background: #fafaf8; color: #1f1d1a; border-radius: 4px 4px 0 0; text-align: left; -webkit-mask-image: linear-gradient(to bottom, #1d1b18 58%, transparent 100%); mask-image: linear-gradient(to bottom, #1d1b18 58%, transparent 100%); max-height: 612px; overflow: hidden; }
.d-top { display: flex; justify-content: space-between; padding: 23px 0 20px; border-bottom: 1px solid #1f1d1a; font-size: 12px; color: #625d55; }
.d-top i { margin: 0 6px; font-style: normal; color: #c9c3b8; }
.d-verdict { padding: 36px 0 32px; border-bottom: 1px solid #ddd8cd; font-size: 36px; line-height: 1.32; font-weight: 400; letter-spacing: -0.04em; }
.d-verdict b { font-weight: 700; }
.d-verdict em { font-style: normal; color: #7a5e2f; }
.d-h { margin-top: 27px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.d-nums { display: grid; grid-template-columns: repeat(4, 1fr); margin: 16px 0 0; }
.d-nums div { padding: 4px 22px; border-left: 1px solid #ddd8cd; }
.d-nums div:first-child { padding-left: 0; border-left: 0; }
.d-nums dt { font-size: 12px; color: #625d55; }
.d-nums dd { margin: 4px 0 0; font-family: var(--f-num); font-weight: 400; font-size: 40px; line-height: 1.1; }
.d-nums dd small { font-size: 16px; color: #625d55; }
.d-nums .is-g { color: #4a7c59; } .d-nums .is-r { color: #9a4b41; }
.d-tbl { width: 100%; margin-top: 20px; border-collapse: collapse; border-top: 1px solid #1f1d1a; font-size: 14px; }
.d-tbl th, .d-tbl td { padding: 11px 0; border-bottom: 1px solid #ddd8cd; text-align: left; font-weight: 400; color: #3a3631; }
.d-tbl thead th { font-size: 13px; color: #625d55; font-weight: 500; }
.d-tbl tbody th { font-weight: 700; color: #1f1d1a; }
.d-tbl .is-r { color: #9a4b41; } .d-tbl .is-g { color: #4a7c59; } .d-tbl .is-gold { color: #7a5e2f; font-weight: 700; }
/* 영상 보정: 채도↓ · 골드 톤 · 밝기↓ · 왼쪽 글자 영역 어둡게 (피그마 보정 레이어 3장) */
b.s01__line { font-weight: 700; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* 02 결과 ---------------------------------------------------------------- */
.s02__view { display: grid; grid-template-columns: 306px minmax(0, 1fr); margin-top: 50.4px; border: 1px solid var(--line); background: var(--panel); }
.s02__tabs { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.s02__tabs button { display: flex; align-items: center; gap: 12.6px; padding: 19.8px 21.6px; border: 0; border-bottom: 1px solid var(--line); background: none; font-size: 15px; color: var(--mute); text-align: left; transition: background var(--dur-s), color var(--dur-s); }
.s02__tabs button .num { font-size: 11px; color: var(--dim); }
.s02__tabs button img { width: 19.8px; height: 19.8px; border-radius: 4.5px; filter: grayscale(0.8) opacity(0.6); transition: filter var(--dur-s); }
.s02__tabs button i { margin-left: auto; font-style: normal; color: var(--gold); opacity: 0; }
.s02__tabs button[aria-selected='true'] { background: #1f1d19; color: var(--ivory); font-weight: 500; }
.s02__tabs button[aria-selected='true'] img { filter: none; }
.s02__tabs button[aria-selected='true'] i { opacity: 1; }
.s02__tabs button:hover { color: var(--ivory); }
.s02__q { margin-top: auto; padding: 21.6px; }
.s02__q-k { font-size: 11px; color: var(--gold); }
.s02__q-v { margin-top: 7.2px; font-size: 15px; line-height: 1.55; }
.s02__q-d { margin-top: 9px; font-size: 11px; color: var(--dim); }
.s02__screen { position: relative; min-height: 385.2px; background: #1d1b18; overflow: hidden; }
.s02__rec { position: absolute; inset: 0 0 79.2px; width: 100%; height: calc(100% - 79.2px); object-fit: contain; opacity: 0; transition: opacity var(--dur-s) var(--ease-soft); }
.s02__rec.is-on { opacity: 1; }
.s02__rec--empty { display: grid; place-items: center; color: var(--dim); font-size: 13px; }
.s02__band { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 36px; height: 79.2px; padding: 0 28.8px; border-top: 1px solid rgba(200, 169, 126, 0.35); background: linear-gradient(90deg, rgba(20, 19, 17, 0.94), rgba(20, 19, 17, 0.8)); backdrop-filter: blur(16.2px); }
.s02__band-who { padding-right: 36px; border-right: 1px solid rgba(239, 237, 230, 0.12); }
.s02__band-who p { display: flex; align-items: center; gap: 5.4px; font-size: 10px; letter-spacing: 0.18em; color: var(--gold); }
.s02__band-who p i { width: 5.4px; height: 5.4px; border-radius: 50%; background: var(--gold); }
.s02__band-who b { font-size: 15px; font-weight: 500; }
.s02__band-num > p:first-child { font-size: 12px; color: var(--mute); }
.s02__band-row { display: flex; align-items: baseline; gap: 12.6px; }
.s02__band-row .from { font-size: 20px; font-weight: 300; color: rgba(239, 237, 230, 0.55); }
.s02__band-row .to-arr { font-size: 20px; color: var(--gold); }
.s02__band-row b { font-size: 31px; font-weight: 700; color: var(--gold); }
.s02__band-row em { padding: 2px 10.8px; border-radius: 89.1px; background: var(--gold); color: var(--gold-dk); font-style: normal; font-size: 14px; font-weight: 700; }
.s02__band-src { font-size: 11px; color: var(--dim); }
.s02__row { display: flex; justify-content: center; margin-top: 79.2px; text-align: center; }
.s02__h3 { font-size: 32px; line-height: 1.45; font-weight: 300; }
.s02__h3 b { font-weight: 700; }
.s02__arrows { display: flex; gap: 9px; }
.s02__arrows button { width: 50.4px; height: 50.4px; border: 1px solid rgba(239, 237, 230, 0.25); border-radius: 50%; background: none; color: var(--ivory); transition: border-color var(--dur-xs), background var(--dur-xs); }
.s02__arrows button:hover { border-color: var(--gold); background: var(--gold-soft); }
.s02__note { margin-top: 36px; font-size: 12px; color: var(--dim); }

/* 3D 곡면 캐러셀: 가운데 100% · 양옆 0.78 / 0.62 */
.car { position: relative; height: 610px; margin-top: 36px; perspective: 1260px; user-select: none; touch-action: pan-y; }
.car__track { position: absolute; inset: 0; }
.car__item { position: absolute; left: 50%; top: 18px; width: 380px; margin-left: -190px; border-radius: 14.4px; overflow: hidden; box-shadow: 0 27px 54px rgba(28, 25, 22, 0.55); transition: transform 800ms var(--ease-lux), opacity 800ms var(--ease-lux), filter 800ms; cursor: grab; }
.car__item img { width: 100%; pointer-events: none; }
.car__pips { display: flex; gap: 7.2px; }
.car__ctl { position: absolute; left: 50%; bottom: 0; display: flex; align-items: center; gap: 24px; transform: translateX(-50%); z-index: 20; }
.car__ctl button { width: 46px; height: 46px; border: 1px solid rgba(239, 237, 230, 0.25); border-radius: 50%; background: none; color: var(--ivory); transition: border-color var(--dur-xs), background var(--dur-xs); }
.car__ctl button:hover { border-color: var(--gold); background: var(--gold-soft); }
.car__pips i { width: 7.2px; height: 2.7px; background: rgba(239, 237, 230, 0.25); transition: all var(--dur-s); }
.car__pips i.is-on { width: 25.2px; background: var(--gold); }

/* 03 단언 ---------------------------------------------------------------- */
.s03 { padding-bottom: 144px; }
.s03__bg { position: absolute; inset: 0; z-index: 0; }
.s03__bg img { width: 100%; height: 115%; object-fit: cover; opacity: 0.22; filter: grayscale(0.4) sepia(0.3); will-change: transform; }
.s03__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, #141311 0%, rgba(20, 19, 17, 0.55) 30%, rgba(20, 19, 17, 0.75) 80%, #141311 100%); }
.s03__eight { display: flex; align-items: center; gap: 21.6px; margin-top: 36px; }
.s03__8 { font-size: 135px; line-height: 1; font-weight: 300; color: var(--gold); }
.s03__eight div p { font-size: 12px; color: var(--mute); }
.s03__eight div p.num { letter-spacing: 0.3em; color: var(--sub); }
.s03__said { margin-top: 43.2px; font-size: 27px; line-height: 1.55; font-weight: 300; }
.s03__said b { font-weight: 700; }
.s03__band { position: relative; display: grid; gap: 27px; margin-top: 57.6px; padding: 30.6px 0; border-top: 1px solid rgba(239, 237, 230, 0.12); border-bottom: 1px solid rgba(239, 237, 230, 0.12); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #1d1b18 10%, #1d1b18 90%, transparent); mask-image: linear-gradient(90deg, transparent, #1d1b18 10%, #1d1b18 90%, transparent); }
.s03__marquee { display: flex; width: max-content; animation: marquee var(--dur, 90s) linear infinite; }
.s03__marquee.is-rev { animation-direction: reverse; }
.s03__marquee img { height: 36px; width: auto; max-width: none; opacity: 0.78; }
@keyframes marquee { to { transform: translateX(-50%); } }
.s03__band-cap { margin-top: 14.4px; font-size: 12px; color: var(--dim); }
.s03__but { margin-top: 86.4px; font-size: 20px; font-weight: 500; color: var(--gold); }
.s03__big { margin-top: 18px; font-size: clamp(57.6px, 7vw, 108px); line-height: 1.18; letter-spacing: -0.045em; font-weight: 300; }
.s03__big-l { display: block; }
b.s03__big-l { font-weight: 700; }
.s03__big-l[data-reveal] { transition-duration: 900ms; }
.s03__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; margin-top: 86.4px; }
.s03__read { font-size: 27px; font-weight: 500; }
.s03__not { padding-left: 21.6px; border-left: 2px solid var(--gold); font-size: 18px; color: var(--sub); }
.s03__not b { color: var(--gold); }

/* 04 판의 변화 ------------------------------------------------------------- */
.s04__grid { display: grid; grid-template-columns: minmax(0, 1fr) 486px; gap: 64.8px; align-items: end; }
.s04__stats { margin-top: 43.2px; border-top: 1px solid var(--line); }
.s04__stats li { display: grid; grid-template-columns: 43.2px 207px 1fr; align-items: center; gap: 21.6px; padding: 21.6px 0; border-bottom: 1px solid var(--line); }
.s04__stats img { width: 43.2px; height: 43.2px; border-radius: 9px; }
.s04__stats b { font-size: 40px; font-weight: 300; }
.s04__stats p { font-size: 15px; color: var(--sub); }
.s04__stats small { display: block; font-size: 11px; color: var(--dim); }
.s04__chat { padding: 28.8px; border: 1px solid var(--line); border-radius: 16.2px; background: var(--panel); }
.s04__chat-h { font-size: 12px; color: var(--mute); }
.s04__msg { margin-top: 19.8px; }
.s04__q { width: fit-content; margin-left: auto; padding: 10.8px 19.8px; border-radius: 14.4px 14.4px 3.6px 14.4px; background: var(--gold); color: var(--gold-dk); font-size: 14px; font-weight: 500; }
.s04__a { display: flex; align-items: center; gap: 10.8px; margin-top: 10.8px; }
.s04__a img { width: 23.4px; height: 23.4px; border-radius: 5.4px; }
.typing { display: flex; gap: 4.5px; padding: 10.8px 16.2px; border-radius: 14.4px; background: #262420; }
.typing i { width: 5.4px; height: 5.4px; border-radius: 50%; background: var(--sub); animation: dot 1.2s var(--ease-soft) infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-2.7px); } }
.s04__msg { opacity: 0; transform: translateY(10.8px); transition: all 600ms var(--ease-lux); }
.s04__chat.is-in .s04__msg { opacity: 1; transform: none; }
.s04__chat.is-in .s04__msg:nth-of-type(3) { transition-delay: 500ms; }
.s04__chat.is-in .s04__msg:nth-of-type(4) { transition-delay: 1000ms; }
.s04__end { display: flex; align-items: center; gap: 21.6px; margin-top: 79.2px; font-size: 25px; font-weight: 300; }
.s04__end i { width: 57.6px; height: 1px; background: var(--gold); }
.s04__end b { font-weight: 700; }

/* 05 문제 ---------------------------------------------------------------- */
.s05__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 21.6px; margin-top: 57.6px; }
.s05__card { padding: 28.8px; border: 1px solid var(--line); border-radius: 14.4px; background: var(--panel); }
.s05__card.is-after { border-color: rgba(200, 169, 126, 0.45); }
.s05__tag { display: flex; align-items: center; gap: 10.8px; font-size: 16px; font-weight: 500; }
.s05__tag span { padding: 2.7px 10.8px; border-radius: 89.1px; font-family: var(--f-num); font-size: 10px; letter-spacing: 0.14em; background: #2a2825; color: var(--mute); }
.is-after .s05__tag span { background: var(--gold); color: var(--gold-dk); }
.s05__shot { margin-top: 18px; aspect-ratio: 642 / 200; border-radius: 9px; overflow: hidden; background: #1d1b18; }
.s05__shot img { width: 100%; height: 100%; object-fit: cover; }
.is-before .s05__shot img { transition: filter 0.2s linear, opacity 0.2s linear; filter: blur(calc(var(--fade, 0) * 5.4px)) grayscale(var(--fade, 0)); opacity: calc(1 - var(--fade, 0) * 0.55); }
.s05__k { margin-top: 18px; font-size: 12px; color: var(--mute); }
.s05__rows li { display: flex; justify-content: space-between; padding: 12.6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.s05__rows em { font-style: normal; transition: color 500ms, opacity 500ms; }
.is-before .s05__rows em { color: var(--mute); }
.is-after .s05__rows em { color: var(--dim); }
.is-after.is-lit .s05__rows li:nth-child(1) em { color: var(--gold); transition-delay: 0ms; }
.is-after.is-lit .s05__rows li:nth-child(2) em { color: var(--gold); transition-delay: 120ms; }
.is-after.is-lit .s05__rows li:nth-child(3) em { color: var(--gold); transition-delay: 240ms; }
.is-after.is-lit .s05__rows li:nth-child(4) em { color: var(--gold); transition-delay: 360ms; }
.s05__end { margin-top: 50.4px; font-size: 22px; color: var(--sub); }
.s05__end b { color: var(--ivory); }

/* 06 선점 ---------------------------------------------------------------- */
.s06__grid { display: grid; grid-template-columns: 576px minmax(0, 1fr); gap: 57.6px; margin-top: 50.4px; align-items: center; }
.s06__chart { position: relative; padding: 32.4px 32.4px 25.2px; border: 1px solid var(--line); border-radius: 16.2px; background: var(--panel); }
.s06__eb { font-size: 11px; letter-spacing: 0.22em; color: var(--gold); }
.s06__ct { margin-top: 5.4px; font-size: 18px; font-weight: 700; }
.s06__cs { font-size: 12px; color: var(--mute); }
.s06__chart svg { margin-top: 14.4px; width: 100%; height: auto; overflow: visible; }
.s06__chart .grid line { stroke: rgba(239, 237, 230, 0.07); stroke-dasharray: 3 5; }
.s06__chart .line-a, .s06__chart .line-b { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms var(--ease-lux); }
.s06__chart.is-play .line-a { stroke-dashoffset: 0; }
.s06__chart.is-play .line-b { stroke-dashoffset: 0; transition-delay: 700ms; }
.s06__chart .line-a { stroke: var(--gold); stroke-width: 3; }
.s06__chart .line-b { stroke: #8a8378; stroke-width: 2; }
.s06__chart .area-a { opacity: 0; transition: opacity 1200ms var(--ease-soft) 600ms; }
.s06__chart.is-play .area-a { opacity: 1; }
.s06__chart .pt-a { fill: var(--gold); opacity: 0; transition: opacity 400ms 1500ms; }
.s06__chart.is-play .pt-a { opacity: 1; }
.s06__chart .pt-b { fill: #8a8378; opacity: 0; transition: opacity 400ms 2200ms; }
.s06__chart.is-play .pt-b { opacity: 1; }
/* 라벨, '최소 2배': SVG 안의 글자 (화면 폭과 함께 커지고 줄어든다) */
.s06__chart .lab text { font-size: 15px; font-weight: 700; fill: var(--ivory); font-family: var(--f-sans); }
.s06__chart .lab .sub { font-size: 13px; font-weight: 400; fill: var(--mute); }
.s06__chart .lab-a text:first-child { fill: var(--gold); }
.s06__chart .lab { opacity: 0; transition: opacity 600ms var(--ease-soft) 1600ms; }
.s06__chart .lab-b { transition-delay: 2300ms; }
.s06__chart.is-play .lab { opacity: 1; }
.s06__chart .gap line { stroke: var(--gold); stroke-width: 1.5; }
.s06__chart .gap rect { fill: #2a251d; }
.s06__chart .gap text { font-size: 13px; font-weight: 700; fill: var(--gold); font-family: var(--f-sans); }
.s06__chart .gap { opacity: 0; transition: opacity 500ms var(--ease-lux); }
.s06__chart.is-done .gap { opacity: 1; }
.s06__chart .xl text { font-size: 12px; }
.s06__legend { display: none; }
.s06__chart .m-pt { display: none; }
.s06__src { margin-top: 7.2px; font-size: 11px; color: var(--dim); }
.s06__steps li { display: grid; grid-template-columns: 86.4px 1fr; gap: 0 25.2px; padding: 25.2px 0; border-bottom: 1px solid var(--line); opacity: 0.2; transform: translateY(14.4px); transition: opacity 900ms var(--ease-lux), transform 900ms var(--ease-lux); }
.s06__steps li:last-child { border-bottom: 0; }
.s06__steps li.is-on { opacity: 1; transform: none; }
.s06__steps .num { font-size: 25px; color: var(--gold); }
.s06__steps em { grid-row: 2; font-style: normal; font-size: 12px; color: var(--mute); }
.s06__steps p { grid-row: 1 / span 2; grid-column: 2; font-size: 19px; line-height: 1.6; }
.s06__steps b { color: var(--gold); }
.s06__band { display: grid; grid-template-columns: minmax(0, 1fr) 504px; gap: 57.6px; align-items: center; margin-top: 57.6px; padding: 36px 43.2px; border: 1px solid var(--line); border-radius: 14.4px; background: var(--panel); }
.s06__k { font-size: 12px; letter-spacing: 0.08em; color: var(--gold); }
.s06__opp { margin-top: 9px; font-size: 17px; line-height: 1.7; color: var(--sub); }
.s06__opp b { color: var(--ivory); }
.s06__re { padding-left: 25.2px; border-left: 2px solid var(--gold); font-size: 27px; line-height: 1.45; font-weight: 300; }
.s06__re b { font-weight: 700; color: var(--gold); }

/* 07 무료 비교 ------------------------------------------------------------- */
.s07__grid { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 64.8px; align-items: start; }
.s07__sub { font-size: 16px; }
.s07__live { display: flex; align-items: center; gap: 9px; margin-top: 25.2px; font-size: 12px; color: var(--mute); }
.s07__live img { width: 30.6px; height: 30.6px; border-radius: 7.2px; }
.s07__live span { margin-left: 7.2px; }
.s07__form { margin-top: 25.2px; display: grid; gap: 9px; }
.fld { display: grid; gap: 2px; padding: 10.8px 16.2px; border: 1px solid #36332e; border-radius: 5.4px; background: #0e0d0b; transition: border-color var(--dur-xs); }
.fld:focus-within { border-color: var(--gold); }
.fld span { font-size: 11px; color: var(--mute); }
.fld input { width: 100%; padding: 3.6px 0; border: 0; outline: 0; background: none; font-size: 15px; }
.fld input::placeholder { color: #6b6862; }
.fld.is-err { border-color: #d98b5f; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.fld-row.is-single { grid-template-columns: 1fr; }
/* 고객이 있는 곳: 특정 지역 / 전국 (지역을 고르면 지역 입력칸이 열린다) */
.scope { display: grid; gap: 6px; }
.scope__k { font-size: 11px; color: var(--mute); }
.scope__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.scope__opts button { display: grid; gap: 2px; padding: 10.8px 16.2px; border: 1px solid #36332e; border-radius: 5.4px; background: #0e0d0b; color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: border-color var(--dur-xs), color var(--dur-xs); }
.scope__opts button small { font-size: 11px; color: var(--mute); }
.scope__opts button:hover { border-color: #5a554c; }
.scope__opts button[aria-checked='true'] { border-color: var(--gold); color: var(--gold); }
.scope__opts button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.scope.is-err .scope__opts button { border-color: #d98b5f; }
.s07__go { width: 100%; min-height: 58px; margin-top: 5.4px; font-size: 16px; }
.s07__msg { min-height: 18px; font-size: 13px; color: inherit; }
.s07__more { display: grid; margin-top: 8px; }
.s07__demo { width: 100%; min-height: 50px; }
.s07__ex { padding: 25.2px 28.8px; border: 1px solid var(--line); border-radius: 16.2px; background: var(--panel); }
.s07__ex-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.s07__ex-top span { display: flex; align-items: center; gap: 5.4px; font-size: 10px; letter-spacing: 0.2em; color: var(--ok); }
.s07__ex-top span i { width: 5.4px; height: 5.4px; border-radius: 50%; background: var(--ok); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.s07__ex-q { margin-top: 18px; padding: 10.8px 16.2px; border-radius: 7.2px; background: #2a2825; font-size: 13px; }
.s07__tbl { width: 100%; margin-top: 14.4px; border-collapse: collapse; font-size: 14px; }
.s07__tbl th, .s07__tbl td { padding: 14.4px 9px; text-align: center; border-bottom: 1px solid var(--line); }
.s07__tbl thead th { border-bottom: 0; }
.s07__tbl thead img { width: 19.8px; height: 19.8px; margin: 0 auto; border-radius: 4.5px; }
.s07__tbl tbody th { text-align: left; font-weight: 400; color: var(--sub); }
.s07__tbl tr.is-us { background: #1f1d19; }
.s07__tbl tr.is-us th { font-weight: 700; color: var(--ivory); }
.s07__tbl td { opacity: 0; transition: opacity 400ms; }
.s07__tbl.is-in td { opacity: 1; }
.s07__tbl td.no { color: #d98b5f; }
.s07__tbl td.yes { color: var(--gold); }
.s07__ex-say { margin-top: 18px; padding: 16.2px 19.8px; border-radius: 9px; background: #2a241c; font-size: 14px; }
.s07__ex-say p { margin-top: 3.6px; font-size: 12px; color: var(--sub); }
.s07__ex-note { margin-top: 16.2px; font-size: 11px; color: var(--dim); }

/* 07 결과 펼침 (02A) */
.s07r { padding: 108px 0; background: #070707; }
.s07r[hidden] { display: none; }
.s07r.is-open { animation: unfold 700ms var(--ease-lux); }
@keyframes unfold { from { opacity: 0; transform: translateY(21.6px); } }
.s07r__grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 57.6px; align-items: start; }
.r-side { position: sticky; top: calc(var(--header-h) + 21.6px); }
.r-ok { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--mute); }
.r-ok i, .r-paper__top i { margin: 0 8px; font-style: normal; color: #4a4741; }
.r-title { margin-top: 16px; font-size: 34px; line-height: 1.34; font-weight: 400; letter-spacing: -0.04em; }
.r-title b { font-weight: 700; color: var(--gold); }
.r-title strong { font-weight: 700; }
.r-desc { margin-top: 14.4px; font-size: 14px; line-height: 1.7; color: var(--sub); }
.r-sum { margin-top: 24px; border-top: 1px solid var(--line); }
.r-sum li { display: grid; grid-template-columns: 76px 1fr; gap: 10.8px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.65; opacity: 0; transform: translateY(7.2px); transition: all 500ms var(--ease-lux); }
.r-sum.is-in li { opacity: 1; transform: none; }
.r-sum.is-in li:nth-child(2) { transition-delay: 120ms; }
.r-sum.is-in li:nth-child(3) { transition-delay: 240ms; }
.r-sum span { padding-top: 2px; font-size: 13px; color: var(--mute); }
.r-sum li:nth-child(2) span { color: #e0a57f; }
.r-acts { display: grid; gap: 8px; margin-top: 26px; }
.r-acts .btn { width: 100%; }
.r-acts__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.r-acts__row .btn { min-height: 46px; padding: 0 12px; font-size: 14px; }
.r-fine { margin-top: 6px; font-size: 12px; color: var(--dim); }
/* 결과지: 히어로 미리보기와 같은 인쇄 문서 한 장. 카드, 미니 막대, 영어 라벨 없이 괘선과 숫자로 읽힌다 */
.r-paper { padding: 0 44px 36px; border-radius: 4px; background: #fafaf8; color: #1f1d1a; box-shadow: 0 30px 80px rgba(28, 25, 22, 0.45); }
.r-paper__top { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0 18px; border-bottom: 1px solid #1f1d1a; font-size: 12px; color: #625d55; }
.r-paper__top i { color: #c9c3b8; }
.r-sec { padding-top: 30px; }
.r-sec + .r-sec { margin-top: 34px; border-top: 1px solid #ddd8cd; }
.r-k { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; color: #7a5e2f; }
.r-k h4 { font: inherit; }
.r-k span { font-size: 13px; font-weight: 500; color: #56514a; }
.r-h { margin-top: 8px; font-size: 26px; line-height: 1.4; font-weight: 400; letter-spacing: -0.035em; }
.r-h b { font-weight: 700; }
.r-nums { display: grid; grid-template-columns: repeat(4, 1fr); margin: 20px 0 0; border-top: 1px solid #1f1d1a; }
.r-num { padding: 14px 18px 4px; border-left: 1px solid #ddd8cd; }
.r-num:first-child { padding-left: 0; border-left: 0; }
.r-num dt { font-size: 12px; color: #625d55; }
.r-num dd { margin: 6px 0 0; font-family: var(--f-num); font-size: 40px; line-height: 1.05; font-weight: 400; }
.r-num dd small { margin-left: 2px; font-size: 15px; color: #57524b; }
.r-num.is-down dd { color: #b5453c; }
.r-num p { margin-top: 8px; font-size: 12px; color: #625d55; }
.r-num.is-up dd { color: #4a7c59; }
.r-bars { display: grid; gap: 6px; margin-top: 12px; }
.r-bars p { display: grid; grid-template-columns: 52px 1fr 30px; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: #57524b; }
.r-bars i { position: relative; height: 5px; border-radius: 99px; background: #ece7dd; overflow: hidden; }
.r-bars i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: #b3ab9e; transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease-lux) 200ms; }
.r-bars .is-us i::after { background: linear-gradient(90deg, #dcc39c, #b8955c); }
.r-bars em { font-style: normal; text-align: right; font-family: var(--f-num); color: #56514a; }
.r-paper.is-in .r-bars i::after { transform: none; }
.r-tbl { width: 100%; margin-top: 18px; border-collapse: collapse; border-top: 1px solid #1f1d1a; font-size: 14px; }
.r-tbl th, .r-tbl td { padding: 12px 0; border-bottom: 1px solid #ddd8cd; text-align: left; font-weight: 400; color: #3a3631; }
.r-tbl thead th { padding: 9px 0; font-size: 13px; font-weight: 500; color: #625d55; }
.r-tbl tbody th { width: 34%; padding-right: 16px; }
.r-tbl td:last-child { width: 64px; text-align: right; font-family: var(--f-num); }
.r-tbl td i { display: block; height: 8px; border-radius: 99px; background: #ece7dd; overflow: hidden; }
.r-tbl td i::after { content: ''; display: block; width: var(--w); height: 100%; border-radius: inherit; background: #b3ab9e; transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease-lux) 200ms; }
.r-paper.is-in .r-tbl td i::after { transform: none; }
.r-tbl tr.is-us th, .r-tbl tr.is-us td { color: #7a5e2f; font-weight: 700; }
.r-tbl tr.is-us td i::after { background: linear-gradient(90deg, #dcc39c, #b8955c); }
.r-fact { margin-top: 14px; font-size: 13px; line-height: 1.6; color: #56514a; }
.r-more { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 34px; padding-top: 22px; border-top: 1px solid #1f1d1a; }
.r-more p { font-size: 13px; line-height: 1.6; color: #56514a; }
.r-more__btn { flex: none; min-height: 48px; background: #211f1c; color: var(--ivory); }
.r-more__btn:hover { background: #1d1b18; }

/* 08 만드는 사람 ------------------------------------------------------------ */
.s08__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 21.6px; margin-top: 50.4px; }
.s08__card { border: 1px solid var(--line); border-radius: 14.4px; background: var(--panel); overflow: hidden; }
.s08__photo { position: relative; height: 288px; display: grid; place-items: end center; background: radial-gradient(ellipse 60% 70% at 50% 60%, rgba(200, 169, 126, 0.2), transparent 70%), #1b1a17; overflow: hidden; }
.s08__photo::after { content: ''; position: absolute; inset: auto 0 0; height: 108px; background: linear-gradient(transparent, var(--panel)); }
.s08__photo img { width: auto; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.05); transition: filter 600ms var(--ease-soft); }
.s08__card:hover .s08__photo img { filter: grayscale(0.1) saturate(0.85); }
.s08__photo.is-empty p { position: absolute; top: 32.4px; font-size: 11px; color: var(--dim); }
.s08__sil { display: grid; justify-items: center; gap: 12.6px; margin-bottom: -5.4px; }
.s08__sil i { width: 86.4px; height: 86.4px; border-radius: 50%; background: #2a2825; }
.s08__sil b { width: 216px; height: 144px; border-radius: 108px 108px 0 0; background: #2a2825; }
.s08__body { padding: 7.2px 36px 32.4px; }
.s08__role { display: flex; align-items: baseline; gap: 10.8px; font-size: 23px; font-weight: 700; }
.s08__role .num { font-size: 11px; letter-spacing: 0.2em; font-weight: 400; color: var(--gold); }
.s08__one { margin-top: 10.8px; font-size: 15px; line-height: 1.6; }
.s08__body dl { margin-top: 18px; border-top: 1px solid var(--line); }
.s08__body dl div { display: flex; justify-content: space-between; gap: 18px; padding: 14.4px 0; border-bottom: 1px solid var(--line); font-size: 14px; opacity: 0; transform: translateY(5.4px); transition: all 500ms var(--ease-lux); }
.s08__card.is-in dl div { opacity: 1; transform: none; }
.s08__card.is-in dl div:nth-child(2) { transition-delay: 120ms; }
.s08__card.is-in dl div:nth-child(3) { transition-delay: 240ms; }
.s08__body dt { flex: none; white-space: nowrap; color: var(--mute); }
.s08__body dd { text-align: right; }
.s08__body dd.is-gold { color: var(--gold); }

/* 09 4주 과정 (유일한 스크롤 고정 구간 · 화면 높이의 1.5배) ------------------------------ */
.s09 { overflow: visible; }
.s09__pin { position: relative; }
.s09__track { position: relative; margin-top: 50.4px; }
.s09__track::before { content: ''; position: absolute; left: 5.4px; right: 5.4px; top: 5.4px; height: 2px; background: #2e2c29; }
.s09__fill { position: absolute; left: 5.4px; right: 5.4px; top: 5.4px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.s09__fill.is-play { transform: scaleX(1); transition: transform 2600ms cubic-bezier(0.45, 0, 0.25, 1); }
.s09__marks { position: relative; display: flex; justify-content: space-between; }
.s09__marks li { display: grid; justify-items: start; gap: 9px; font-size: 12px; color: var(--mute); }
.s09__marks li::before { content: ''; width: 12.6px; height: 12.6px; border-radius: 50%; background: #3a3833; transition: background var(--dur-s); }
.s09__marks li.is-on::before { background: var(--ivory); }
.s09__marks li:last-child { justify-items: end; color: var(--gold); }
.s09__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32.4px; margin-top: 43.2px; }
.s09__steps li { position: relative; padding: 25.2px; border: 1px solid var(--line); border-radius: 12.6px; background: var(--panel); opacity: 0; transform: translateY(28.8px); transition: opacity 900ms var(--ease-lux), transform 900ms var(--ease-lux), border-color 600ms 600ms; }
.s09__steps li.is-on { opacity: 1; transform: none; }
.s09__steps li:last-child.is-on { border-color: rgba(200, 169, 126, 0.5); }
.s09__steps li + li::before { content: '›'; position: absolute; left: -21.6px; top: 50%; color: var(--gold); }
.s09__steps .num { font-size: 11px; letter-spacing: 0.2em; color: var(--gold); }
.s09__steps h3 { margin-top: 10.8px; font-size: 20px; }
.s09__steps .s09__body p { margin-top: 9px; font-size: 14px; color: var(--sub); }
/* 데스크톱: 머리글 버튼은 그냥 제목처럼 보인다 (누를 필요 없음) */
.s09__head { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; pointer-events: none; }
.s09__head i { display: none; }
.s09__steps span { display: inline-block; margin-top: 16.2px; padding: 5.4px 10.8px; border-radius: 89.1px; background: #2a2825; font-size: 11px; color: var(--mute); }
.s09__steps span b { color: var(--gold); font-weight: 500; }

/* 10 오픈 후 ------------------------------------------------------------- */
.s10__bg { position: absolute; inset: 0; z-index: 0; }
.s10__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.16; }
.s10__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#141311, rgba(20, 19, 17, 0.6) 30%, rgba(20, 19, 17, 0.8) 80%, #141311); }
.s10__sub { max-width: 810px; font-size: 17px; }
.s10__nums { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 50.4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.s10__nums li { padding: 32.4px 28.8px; }
.s10__nums li + li { border-left: 1px solid var(--line); }
.s10__nums b { font-size: 54px; font-weight: 300; line-height: 1.1; }
.s10__nums li:first-child b { color: var(--gold); }
.s10__nums b small { margin-left: 5.4px; font-size: 18px; color: var(--sub); }
.s10__nums p { margin-top: 10.8px; font-size: 15px; font-weight: 500; }
.s10__nums li > small { font-size: 12px; color: var(--mute); }
.s10__loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25.2px; margin-top: 50.4px; }
.s10__loop > li { position: relative; padding: 28.8px; border: 1px solid var(--line); border-radius: 14.4px; background: rgba(22, 21, 18, 0.85); }
/* 10 카드: 한 장씩 천천히, 카드 안 항목도 한 줄씩 */
.s10__loop > li[data-reveal] { transform: translateY(43.2px); transition-duration: 1100ms; transition-delay: calc(var(--i, 0) * 520ms); }
.s10__loop > li[data-reveal].is-in { transform: none; }
.s10__loop ul li { opacity: 0; transform: translateY(9px); transition: opacity 700ms var(--ease-lux), transform 700ms var(--ease-lux); }
.s10__loop > li.is-in ul li { opacity: 1; transform: none; }
.s10__loop > li.is-in ul li:nth-child(1) { transition-delay: calc(var(--i, 0) * 520ms + 500ms); }
.s10__loop > li.is-in ul li:nth-child(2) { transition-delay: calc(var(--i, 0) * 520ms + 640ms); }
.s10__loop > li.is-in ul li:nth-child(3) { transition-delay: calc(var(--i, 0) * 520ms + 780ms); }
.s10__loop > li.is-in ul li:nth-child(4) { transition-delay: calc(var(--i, 0) * 520ms + 920ms); }
.s10__loop > li + li::before { content: '→'; position: absolute; left: -19.8px; top: 39.6px; color: var(--gold); opacity: 0; transition: opacity 600ms; }
.s10__loop > li + li.is-in::before { opacity: 1; transition-delay: calc(var(--i, 0) * 520ms + 300ms); }
.s10__loop .num { font-size: 12px; letter-spacing: 0.2em; color: var(--gold); }
.s10__loop h3 { margin-top: 9px; font-size: 28px; }
.s10__one { margin-top: 5.4px; font-size: 14px; color: var(--sub); }
.s10__loop ul { margin-top: 16.2px; }
.s10__loop ul li { position: relative; padding: 13.5px 0 13.5px 16.2px; border-top: 1px solid var(--line); font-size: 16px; }
.s10__loop ul li b { color: var(--gold); font-weight: 700; }
.s10__loop ul li::before { content: ''; position: absolute; left: 0; top: 19.8px; width: 5.4px; height: 5.4px; background: var(--gold); transform: rotate(45deg); }
.s10__end { margin-top: 36px; font-size: 20px; }

/* 11 약속 --------------------------------------------------------------- */
.s11__quote { position: relative; margin-top: 10.8px; padding-bottom: 50.4px; border-bottom: 1px solid var(--line); }
.s11__mark { display: block; font-family: var(--f-serif); font-size: 65px; line-height: 0.8; color: var(--gold); }
.s11__quote p { margin-top: 21.6px; font-family: var(--f-serif); font-size: 40px; line-height: 1.45; font-weight: 300; letter-spacing: -0.02em; }
.s11__quote cite { display: block; margin-top: 16.2px; font-style: normal; font-size: 14px; color: var(--mute); }
.s11__grid { display: grid; grid-template-columns: minmax(0, 1fr) 504px; gap: 86.4px; align-items: center; margin-top: 0; }
.s11__promise { margin-top: 32.4px; padding-left: 25.2px; border-left: 2px solid var(--gold); font-size: 18px; color: var(--sub); }
.s11__promise b { display: block; margin-top: 5.4px; font-size: 29px; color: var(--gold); }
.s11__cond { margin-top: 32.4px; border-top: 1px solid var(--line); }
.s11__cond div { display: grid; grid-template-columns: 108px 1fr; padding: 16.2px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.s11__cond dt { font-size: 13px; color: var(--mute); }
.s11__paper { padding: 39.6px 43.2px; background: #ede7da; color: #2a2620; box-shadow: 0 27px 63px rgba(28, 25, 22, 0.5); }
.s11__pt { padding-bottom: 18px; border-bottom: 1px solid #cfc6b4; text-align: center; font-family: var(--f-serif); font-size: 18px; }
.s11__ln { display: block; height: 3.6px; margin-top: 16.2px; border-radius: 2px; background: #d8d0bf; }
.s11__ln.is-s { width: 70%; }
.s11__ln.is-m { display: none; }
.s11__art { position: relative; margin: 21.6px -10.8px; padding: 18px 10.8px; font-family: var(--f-serif); }
.s11__hl { position: absolute; inset: 0; background: #f3d9a0; transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-lux) 300ms; }
.s11__paper.is-in .s11__hl { transform: scaleX(1); }
.s11__art b, .s11__art p { position: relative; }
.s11__art b { font-size: 15px; font-weight: 600; }
.s11__art p { margin-top: 7.2px; font-size: 13px; line-height: 1.8; }
.s11__sign { display: flex; justify-content: space-between; margin-top: 39.6px; font-family: var(--f-serif); font-size: 13px; color: #6b6356; }
.s11__paper[data-reveal] { transform: translateY(54px); }
.s11__paper[data-reveal].is-in { transform: rotate(1deg); }
.s11__end { display: flex; flex-wrap: wrap; gap: 21.6px; margin-top: 57.6px; padding-top: 39.6px; border-top: 1px solid var(--line); font-size: 22px; }
.s11__end span { font-weight: 300; color: var(--mute); }

/* 12 남은 자리 ------------------------------------------------------------- */
.s12__bg { position: absolute; inset: 0; z-index: 0; }
.s12__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; animation: silk 30s var(--ease-soft) infinite alternate; }
@keyframes silk { to { transform: scale(1.08) translateX(-2%); } }
.s12__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #141311 20%, rgba(20, 19, 17, 0.6)); }
.s12__pre { font-size: 16px; font-weight: 500; color: var(--gold); }
.s12__box { margin-top: 50.4px; border: 1px solid #36332e; border-radius: 14.4px; background: rgba(18, 17, 15, 0.9); backdrop-filter: blur(10.8px); }
.s12__pick { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 14.4px; padding: 25.2px; border-bottom: 1px solid #2e2c29; }
.sel { display: grid; gap: 2px; padding: 9px 14.4px; border: 1px solid #3a3833; border-radius: 5.4px; background: #0e0d0b; }
.sel > span { font-size: 10px; color: var(--mute); }
.sel select { appearance: none; border: 0; outline: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b0aca3' fill='none'/%3E%3C/svg%3E") right center no-repeat; padding: 3.6px 16.2px 3.6px 0; font-size: 15px; }
.sel select option { background: #1e1c19; }
.s12__res { display: flex; justify-content: space-between; align-items: flex-end; gap: 21.6px; padding: 28.8px 36px; }
.s12__where { font-size: 13px; color: var(--sub); }
.s12__big { display: flex; align-items: baseline; gap: 16.2px; margin-top: 7.2px; }
.s12__big > span:first-child { font-size: 32px; font-weight: 300; color: var(--sub); }
.s12__big b { font-size: 126px; line-height: 0.9; font-weight: 300; color: var(--gold); }
.s12__big b.is-rolling { filter: blur(2.7px); opacity: 0.6; }
.s12__big > span:last-child { font-size: 31px; font-weight: 700; }
.s12__big.is-full b { color: var(--dim); }
.s12__res[data-state='idle'] .s12__done, .s12__res[data-state='idle'] .s12__act { display: none; }
.s12__res[data-state='done'] .s12__idle { display: none; }
.s12__res[data-state='done'] .s12__done, .s12__res[data-state='done'] .s12__act { animation: seat-in 700ms var(--ease-lux) both; }
@keyframes seat-in { from { opacity: 0; transform: translateY(10.8px); } to { opacity: 1; transform: none; } }
.s12__ask { margin-top: 9px; font-size: 23px; line-height: 1.5; font-weight: 300; color: var(--sub); }
.s12__ask b { font-weight: 500; color: var(--ivory); }
.sel > span small { font-size: 9px; color: var(--dim); margin-left: 3.6px; }
.sel--combo { position: relative; }
.sel--combo label { font-size: 10px; color: var(--mute); }
.sel--combo input { width: 100%; border: 0; outline: 0; background: transparent; padding: 3.6px 0; font-size: 15px; color: var(--ivory); }
.sel--combo input::placeholder { color: var(--dim); }
.sel--combo input.is-bad { color: #e0a58a; }
.sel:focus-within, .sel.is-open { border-color: var(--gold); }
.sel .dd__btn { padding: 3.6px 0; font-size: 15px; font-weight: 500; color: var(--ivory); }
.sel:hover { border-color: #57524a; }
.combo { position: absolute; left: -1px; right: -1px; top: calc(100% + 5.4px); z-index: 20; max-height: 288px; overflow: auto; margin: 0; padding: 5.4px; list-style: none; border: 1px solid #3a3833; border-radius: 7.2px; background: #1e1c19; box-shadow: 0 21.6px 54px rgba(28, 25, 22, 0.5); }
.combo li { padding: 9px 10.8px; border-radius: 5.4px; font-size: 14px; color: var(--sub); cursor: pointer; }
.combo li b { color: var(--gold); font-weight: 500; }
.combo li[aria-selected='true'], .combo li[role='option']:hover { background: #221f1a; color: var(--ivory); }
.combo__none { cursor: default !important; color: var(--mute) !important; font-size: 12px !important; }
.s12__act { display: grid; justify-items: end; gap: 10.8px; }
.s12__act p { font-size: 13px; color: var(--sub); }
.s12__act small { font-size: 11px; color: var(--dim); }

/* 13 자주 묻는 질문 ---------------------------------------------------------- */
.s13__head { display: flex; justify-content: space-between; align-items: flex-end; }
.s13__aside { text-align: right; font-size: 15px; color: var(--sub); }
.faq { margin-top: 50.4px; border-top: 1px solid var(--line); }
.faq__q { display: grid; grid-template-columns: 57.6px 1fr 28.8px; align-items: center; width: 100%; padding: 27px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 20px; transition: color var(--dur-xs); }
.faq__q .num { font-size: 13px; color: var(--dim); }
.faq__q i { justify-self: end; font-style: normal; font-size: 20px; color: var(--gold); }
.faq__q:hover { color: var(--gold-hi); }
.faq__item.is-open .faq__q { color: var(--ivory); border-bottom-color: transparent; }
.faq__item.is-open .faq__q .num { color: var(--gold); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-s) var(--ease-lux); border-bottom: 1px solid var(--line); }
.faq__item:not(.is-open) .faq__a { border-bottom: 0; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__in { display: grid; grid-template-columns: 57.6px 324px 1fr; gap: 0 28.8px; padding: 0 0 32.4px; }
.faq__in .k { grid-column: 2; font-family: var(--f-num); font-size: 10px; letter-spacing: 0.24em; color: var(--gold); }
.faq__in h4 { grid-column: 2; margin-top: 9px; font-size: 23px; line-height: 1.4; color: var(--gold); }
.faq__in p { grid-column: 3; grid-row: 1 / span 2; font-size: 15px; color: var(--sub); }
.faq__in p + p { grid-row: auto; margin-top: 9px; }
.faq__in .faq__cond { grid-column: 3; grid-row: 1 / span 2; margin: 0; border-top: 1px solid var(--line); }
.faq__cond div { display: grid; grid-template-columns: 72px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ivory); }
.faq__cond dt { padding-top: 2px; font-size: 13px; color: var(--mute); }
.faq__cond dd { margin: 0; }
.faq__in .faq__cond + p { grid-row: auto; margin-top: 14px; }

/* 14 마무리 ------------------------------------------------------------- */
.s14 { padding: 162px 0 144px; text-align: center; }
.s14__bg { position: absolute; inset: 0; z-index: 0; }
.s14__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; filter: sepia(0.25); transform: scale(1); transition: transform 12s linear; }
.s14.is-in .s14__bg img { transform: scale(1.05); }
.s14__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(200, 169, 126, 0.16), transparent 60%), linear-gradient(#141311, rgba(20, 19, 17, 0.45) 30%, rgba(20, 19, 17, 0.7)); }
.s14__pre { font-size: 16px; font-weight: 500; color: var(--gold); }
.s14__h { margin-top: 21.6px; font-size: clamp(36px, 4vw, 64.8px); line-height: 1.35; font-weight: 300; letter-spacing: -0.04em; }
.s14__h b { font-weight: 700; }
.s14__sub { margin-top: 25.2px; font-size: 17px; color: var(--sub); }
.s14__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10.8px; margin-top: 39.6px; }

@keyframes glow { 50% { box-shadow: 0 0 0 5.4px rgba(200, 169, 126, 0.18), 0 0 36px rgba(200, 169, 126, 0.35); } }
.s14__fine { margin-top: 18px; font-size: 12px; color: var(--mute); }

/* 하단 고정 바 ------------------------------------------------------------ */
.bar { position: fixed; inset: auto 0 0; z-index: 45; border-top: 1px solid var(--line); background: rgba(20, 19, 17, 0.92); backdrop-filter: blur(10.8px); transform: translateY(100%); transition: transform var(--dur-s) var(--ease-lux); }
.bar.is-on { transform: none; }
.bar__in { display: flex; justify-content: space-between; align-items: center; height: 72px; }
.bar__in p { display: flex; gap: 16.2px; font-size: 14px; color: var(--sub); }
.bar__in p b { color: var(--gold); }
.bar__in div { display: flex; gap: 9px; }
.bar .btn { min-height: 42px; padding: 0 18px; font-size: 14px; }

/* 조회 진행 모달 */
.mp-bar { height: 5.4px; margin-top: 21.6px; border-radius: 89.1px; background: #26241f; overflow: hidden; }
.mp-bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-lux); }
.mp-steps { margin-top: 18px; display: grid; gap: 14.4px; }
.mp-steps li { display: grid; grid-template-columns: 21.6px 1fr auto; align-items: center; gap: 12.6px; color: var(--dim); }
.mp-steps li > i { width: 21.6px; height: 21.6px; border-radius: 50%; border: 1.5px solid #3a3833; transition: all var(--dur-s); }
.mp-steps b { font-size: 14px; font-weight: 500; }
.mp-steps p { font-size: 12px; color: var(--mute); }
.mp-steps em { font-style: normal; font-size: 12px; }
.mp-steps li.is-doing { color: var(--ivory); }
.mp-steps li.is-doing > i { border-color: var(--gold); animation: pulse 1.2s infinite; }
.mp-steps li.is-doing em, .mp-steps li.is-done em { color: var(--gold); }
.mp-steps li.is-done { color: var(--ivory); }
.mp-steps li.is-done > i { border-color: var(--gold); background: var(--gold); }
.mp-alarm { width: 100%; min-height: 44px; margin-top: 10px; font-size: 14px; }
.mp-live { margin-top: 20px; padding-top: 14px; border-top: 1px solid #2a2824; }
.mp-live__h { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); }
.mp-live__h b { color: var(--ivory); font-weight: 700; font-family: var(--f-num); }
.mp-live__h span:last-child { font-family: var(--f-num); }
.mp-kws { display: grid; gap: 2px; min-height: 150px; margin-top: 10px; }
.mp-kws li { padding: 6px 0; font-size: 14px; color: var(--sub); animation: kw-in 420ms var(--ease-lux); }
.mp-kws li:first-child { color: var(--ivory); }
.mp-kws li:nth-child(4) { opacity: 0.55; } .mp-kws li:nth-child(5) { opacity: 0.25; }
@keyframes kw-in { from { opacity: 0; transform: translateY(-6px); } }
.mp-note { margin-top: 10.8px; padding: 10.8px 14.4px; border-radius: 5.4px; background: #1d1b18; font-size: 12px; color: var(--sub); }

/* 반응형 (데스크톱 우선 · 좁은 화면은 한 줄로) ------------------------------------------ */
@media (max-width: 1280px) {
  .s04__grid, .s07__grid, .s11__grid, .s06__grid, .s07r__grid { grid-template-columns: 1fr; }
  .s06__band { grid-template-columns: 1fr; }
  /* 06 차트: 오른쪽 라벨을 접고 선을 끝까지 편다 (viewBox는 home.js가 바꾼다) → 범례는 아래로 */
  .s06__chart { padding: 24px 20px 20px; }
  .s06__chart .lab { display: none; }
  .s06__chart .xl text { font-size: 17px; }
  .s06__chart .gap text { font-size: 17px; }
  .s06__legend { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }
  .s06__legend li { display: flex; align-items: center; gap: 8px; }
  .s06__legend i { flex: none; width: 14px; height: 3px; border-radius: 2px; background: #8a8378; }
  .s06__legend .is-a i { background: var(--gold); }
  .s06__legend b { color: var(--ivory); font-weight: 700; }
  .s06__legend .is-a b { color: var(--gold); }
  .r-side { position: static; }
}
@media (max-width: 860px) {
  :root { --header-h: 108px; }
  .s { padding: 96px 0; }
  .s01 { padding-top: calc(var(--header-h) + 48px); }
  .s01__row { flex-direction: column; align-items: center; gap: 0; }
  .s01__bar { padding-left: 16px; }
  .s01__go { padding: 13px 14px; font-size: 14px; }
  .s01__go-x { display: none; }
  .s01__url { font-size: 15px; }
  .s01__doc { padding: 0 20px 30px; }
  .d-nums { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .d-nums div { padding: 4px 0 4px 16px; }
  .d-nums div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .d-tbl { font-size: 12px; }
  .car { height: 520px; }
  .car__item { width: 300px; margin-left: -150px; }
  .s02__view { grid-template-columns: 1fr; }
  /* 02 탭: 옆으로 잘리지 않게 2×2 격자로 네 개를 모두 보여 준다 */
  .s02__tabs { display: grid; grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--line); }
  .s02__tabs button { gap: 8px; padding: 14px 14px; border-bottom: 0; font-size: 14px; white-space: nowrap; }
  .s02__tabs button:nth-child(odd) { border-right: 1px solid var(--line); }
  .s02__tabs button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .s02__tabs button i { display: none; }
  .s02__q { display: none; }
  .s02__band { grid-template-columns: 1fr; height: auto; gap: 6px; padding: 14px 18px; }
  .s02__band-who { border: 0; padding: 0; }
  .s02__rec { inset: 0; height: 100%; }
  .s02__screen { aspect-ratio: auto; height: 420px; }
  .s05__cmp, .s08__cards, .s10__loop, .s09__steps { grid-template-columns: 1fr; }
  .r-nums { grid-template-columns: 1fr 1fr; }
  .r-num:nth-child(3) { padding-left: 0; border-left: 0; }
  .r-paper { padding: 0 20px 28px; }
  .r-paper__top, .r-more { flex-direction: column; align-items: flex-start; }
  .s10__nums { grid-template-columns: 1fr 1fr; }
  .s09 { height: auto; }
  .s09__pin { position: relative; z-index: 1; height: auto; padding: 96px 0; }
  .s09__steps li { opacity: 1; transform: none; }
  .s12__pick { grid-template-columns: 1fr; }
  .s12__res, .s03__foot, .s13__head { flex-direction: column; align-items: flex-start; }
  .s12__act { justify-items: start; }
  .faq__in { grid-template-columns: 1fr; }
  .faq__in .k, .faq__in h4, .faq__in p, .faq__in .faq__cond { grid-column: 1; grid-row: auto; }
  .faq__in .faq__cond { margin-top: 14px; }
  .s04__stats li { grid-template-columns: 40px 1fr; }
  .s04__stats p { grid-column: 2; }
  .fld-row { grid-template-columns: 1fr; }
  /* 09 모바일: 4주 일정 카드를 아코디언으로. 처음에는 '원장님 인터뷰'만 펼친다 */
  .s09__steps { gap: 10px; }
  .s09__steps li + li::before { display: none; }
  .s09__steps li { padding: 0; }
  .s09__head { position: relative; padding: 18px 48px 18px 20px; pointer-events: auto; cursor: pointer; }
  .s09__head h3 { margin-top: 6px; font-size: 18px; }
  .s09__head i { display: block; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border: solid var(--mute); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 260ms var(--ease-soft), margin 260ms var(--ease-soft); }
  .s09__steps li.is-open .s09__head i { transform: rotate(-135deg); margin-top: -2px; border-color: var(--gold); }
  .s09__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-soft); }
  .s09__body > div { overflow: hidden; padding: 0 20px; }
  .s09__steps li.is-open .s09__body { grid-template-rows: 1fr; }
  .s09__steps li.is-open .s09__body > div { padding-bottom: 20px; }
  .s09__steps .s09__body p { margin-top: 0; }
  .bar__in p { display: none; }
  .bar__in > div { width: 100%; }
  .bar .btn { flex: 1; min-height: 44px; padding: 0 8px; font-size: 13px; white-space: nowrap; }
}

/* 모바일: 데스크톱 기준(0.9배)으로 줄여 둔 작은 글자를 12px 이상으로 올린다 */
@media (max-width: 860px) {
  .s02__tabs button .num { font-size: 12px; }
  .s02__q-k { font-size: 12px; }
  .s02__q-d { font-size: 12px; }
  .s02__band-who p { font-size: 12px; }
  .s02__band-num > p:first-child { font-size: 13px; }
  .s02__band-src { font-size: 12px; }
  .s02__note { font-size: 13px; }
  .s03__eight div p { font-size: 13px; }
  .s03__band-cap { font-size: 13px; }
  .s04__stats small { font-size: 12px; }
  .s04__chat-h { font-size: 13px; }
  .s05__tag span { font-size: 12px; }
  .s05__k { font-size: 13px; }
  .s06__eb { font-size: 12px; }
  .s06__cs { font-size: 13px; }
  .s06__src { font-size: 12px; }
  .s06__steps em { font-size: 13px; }
  .s06__k { font-size: 13px; }
  .s07__live { font-size: 13px; }
  .fld span { font-size: 12px; }
  .s07__ex-top span { font-size: 12px; }
  .s07__ex-say p { font-size: 13px; }
  .s07__ex-note { font-size: 12px; }
  .s08__photo.is-empty p { font-size: 12px; }
  .s08__role .num { font-size: 12px; }
  .s09__marks li { font-size: 13px; }
  .s09__steps .num { font-size: 12px; }
  .s09__steps span { font-size: 12px; }
  .s10__nums li > small { font-size: 13px; }
  .sel > span { font-size: 12px; }
  .sel > span small { font-size: 12px; }
  .sel--combo label { font-size: 12px; }
  .combo__none { font-size: 13px; }
  .s12__act small { font-size: 12px; }
  .faq__in .k { font-size: 12px; }
  .s14__fine { font-size: 13px; }
  .mp-steps p { font-size: 13px; }
  .mp-steps em { font-size: 13px; }
  .mp-note { font-size: 13px; }
}

/* 모바일 글자 크기: 피그마 모바일 시안(296:497) 값에 맞춘다 */
@media (max-width: 860px) {
  .s01__h { font-size: 36px; }
  .s01__sub, .sub, .lead-q { font-size: 16px; line-height: 1.6; }
  .d-verdict { font-size: 26px; }
  .s02__h3 { font-size: 26px; }
  .s03__said { font-size: 22px; line-height: 1.55; }
  .s03__but { font-size: 17px; }
  .s03__big { font-size: 40px; line-height: 1.2; }
  .s04__stats .num { font-size: 38px; }
  .s04__end { font-size: 21px; line-height: 1.5; }
  .s05__end { font-size: 18px; line-height: 1.5; }
  .s05__end b { font-size: 24px; line-height: 1.4; }
  .s06__steps li p { font-size: 16px; line-height: 1.6; }
  .s06__re { font-size: 22px; line-height: 1.45; }
  .s11__quote p { font-size: 28px; }
  .s11__promise b { font-size: 26px; }
  .s11__end span { font-size: 19px; }
  .s12__ask { font-size: 21px; }
  .faq__q { font-size: 17px; }
  .s14__h { font-size: 32px; }
}

/* 모바일 배치: 피그마 모바일 시안(296:497)에 맞춘 섹션별 레이아웃 */
@media (max-width: 860px) {
  /* 04 숫자: 아이콘 오른쪽에 숫자와 설명을 바로 붙인다 */
  .s04__stats li { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-items: start; column-gap: 18px; row-gap: 6px; padding: 22px 0; }
  .s04__stats img { grid-row: 1 / span 2; width: 40px; height: 40px; margin-top: 4px; }
  .s04__stats b { grid-column: 2; line-height: 1.15; }
  .s04__stats p { grid-column: 2; line-height: 1.5; }
  /* 04 맺음말: 금색 선 아래에 두 줄로 쌓는다 */
  .s04__end { display: block; margin-top: 56px; }
  .s04__end i { display: block; width: 48px; margin-bottom: 22px; }
}
@media (max-width: 860px) {
  /* 01 검색창: 주소가 잘리지 않게 (시안 14px) */
  .s01__url { font-size: 14px; }
  .s01__url .caret { height: 16px; }
  /* 01 결과지 윗줄: 두 줄로 쌓는다 */
  .d-top { flex-direction: column; gap: 2px; }
  /* 01 결과지 숫자 2×2: 시안처럼 칸 사이 세로선 없이 */
  .d-nums div, .d-nums div:nth-child(odd) { padding: 4px 0; border-left: 0; }
}

/* ======================================================================
   v7.2 모바일 시안 정합 (피그마 296:497 · 390) — 섹션별로 시안 값 그대로
   ====================================================================== */
@media (max-width: 860px) {
  .s .h2 + .sub { margin-top: 16px; }
  .sub { line-height: 1.6; letter-spacing: -0.01em; }

  /* 01 첫 화면 */
  .s01__eb { font-size: 14px; line-height: 1.4; }
  /* 390에서 시안 36px, 더 좁은 폰에서는 폭에 맞춰 줄인다 ('몰래 선점하고 있습니다.'가 한 줄에 들어가게) */
  .s01__h { margin-top: 22px; font-size: min(36px, 9.23vw); letter-spacing: -0.04em; }
  .s01__sub { margin-top: 24px; line-height: 1.7; }
  .s01__bar { height: 60px; margin-top: 32px; padding: 9px 9px 9px 16px; gap: 10px; }
  .s01__go { padding: 13px 14px; line-height: 1.2; font-size: 14px; }
  .s01__url { line-height: 1.3; }
  .s01__doc { margin-top: 48px; padding: 0 20px 30px; max-height: 560px; -webkit-mask-image: linear-gradient(to bottom, #1d1b18 68%, transparent 100%); mask-image: linear-gradient(to bottom, #1d1b18 68%, transparent 100%); }
  .d-top { gap: 2px; padding: 22px 0 18px; border-bottom: 2px solid #bdb8ae; line-height: 1.5; color: #77726a; }
  .d-verdict { padding: 28px 0 26px; border-bottom-color: rgba(26, 26, 26, 0.12); font-size: 26px; line-height: 1.35; font-weight: 300; letter-spacing: -0.03em; }
  .d-verdict em { color: #8a6d3b; }
  .d-h { margin-top: 24px; font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; }
  .d-nums { gap: 12px 16px; row-gap: 12px; margin-top: 16px; }
  .d-nums div, .d-nums div:nth-child(odd) { padding: 0; }
  .d-nums dt { line-height: 1.5; color: #77726a; }
  .d-nums dd { margin-top: 2px; font-size: 34px; line-height: 1.2; font-weight: 300; }
  .d-nums dd small { font-size: 15px; font-weight: 300; color: #77726a; }
  .d-tbl { margin-top: 24px; border-top: 1px solid rgba(26, 26, 26, 0.25); table-layout: fixed; }
  .d-tbl th, .d-tbl td { padding: 11px 0; line-height: 1.4; font-size: 12px; border-bottom-color: rgba(26, 26, 26, 0.1); white-space: nowrap; }
  .d-tbl thead th { font-size: 12px; color: #77726a; border-bottom-color: rgba(26, 26, 26, 0.25); }
  .d-tbl th:nth-child(1) { width: 80px; } .d-tbl th:nth-child(2) { width: 52px; } .d-tbl th:nth-child(3) { width: 40px; } .d-tbl th:nth-child(4) { width: 74px; }
  .d-tbl .is-gold { color: #8a6d3b; }

  /* 02 결과 */
  .s02__view { margin-top: 36px; border-radius: 12px; background: #0d0c0b; overflow: hidden; }
  .s02__tabs button { min-height: 52px; font-size: 14px; }
  .s02__tabs button .num { font-family: var(--f-num); font-weight: 400; color: var(--dim); }
  .s02__tabs button img { border-radius: 4.84px; }
  .s02__tabs button[aria-selected='true'] { background: #24221e; box-shadow: inset 0 -2px 0 var(--gold); }
  .s02__screen { height: 420px; }
  .s02__rec { inset: 0 0 auto; height: 288px; }
  .s02__band { gap: 6px; padding: 14px 18px; background: rgba(20, 19, 17, 0.92); backdrop-filter: none; }
  .s02__band-who { display: grid; gap: 6px; }
  .s02__band-who p { gap: 6px; font-size: 12px; line-height: 1.3; letter-spacing: 0.08em; }
  .s02__band-who p i { width: 6px; height: 6px; }
  .s02__band-who b { font-size: 15px; line-height: 1.3; }
  .s02__band-num > p:first-child { font-size: 12px; line-height: 1.4; }
  .s02__band-row { align-items: center; gap: 12px; }
  .s02__band-row .from { font-size: 19px; line-height: 1.3; color: var(--ivory); }
  .s02__band-row .to-arr { font-size: 19px; line-height: 1.3; }
  .s02__band-row b { font-size: 30px; line-height: 1.2; }
  .s02__band-row em { padding: 2px 10px; font-family: var(--f-num); font-size: 13px; font-weight: 500; line-height: 1.3; }
  .s02__band-src { font-size: 12px; line-height: 1.4; }
  .s02__row { margin-top: 64px; }
  .s02__h3 { font-size: 26px; line-height: 1.4; letter-spacing: -0.03em; }
  .car { height: 486px; margin-top: 28px; }
  .car__item { top: 23px; border-radius: 15px; }
  .car__ctl { gap: 24px; }
  .car__ctl button { font-size: 15px; }
  .car__pips { gap: 8px; }
  .car__pips i { width: 8px; height: 3px; }
  .car__pips i.is-on { width: 28px; }
  .s02__note { margin-top: 40px; font-size: 12px; line-height: 1.5; }
  /* 03 단언 */
  .s03 { padding-bottom: 96px; }
  .s03__said { margin-top: 0; font-size: 22px; line-height: 1.55; letter-spacing: -0.02em; }
  .s03__band { gap: 20px; margin-top: 40px; padding: 15px 0; border-color: rgba(239, 237, 230, 0.1); }
  .s03__marquee img { height: 30px; }
  .s03__band-cap { margin-top: 14px; font-size: 12px; line-height: 1.5; }
  .s03__but { margin-top: 72px; font-size: 17px; line-height: 1.5; }
  .s03__big { margin-top: 14px; font-size: 40px; line-height: 1.2; letter-spacing: -0.04em; }

  /* 04 판의 변화 */
  .s04__stats { margin-top: 32px; }
  .s04__stats li { column-gap: 18px; row-gap: 4px; padding: 22px 0; }
  .s04__stats img { margin-top: 0; border-radius: 10.6px; }
  .s04__stats b { font-size: 38px; line-height: 1.15; font-weight: 300; letter-spacing: -0.02em; }
  .s04__stats p { font-size: 15px; line-height: 1.5; }
  .s04__stats small { margin-top: 4px; font-size: 12px; line-height: 1.4; }
  .s04__chat { margin-top: 40px; padding: 20px; border-radius: 16px; background: #141312; }
  .s04__chat-h { font-size: 12px; line-height: 1.4; }
  .s04__msg { margin-top: 14px; }
  .s04__q { padding: 11px 16px; border-radius: 20px; font-size: 15px; line-height: 1.4; }
  .s04__a { gap: 10px; margin-top: 14px; }
  .s04__a img { width: 26px; height: 26px; border-radius: 6.2px; }
  .typing { gap: 6px; padding: 10px 16px; border-radius: 99px; background: #2a2825; }
  .typing i { width: 5px; height: 5px; background: rgba(239, 237, 230, 0.7); }
  .s04__end { margin-top: 48px; font-size: 21px; line-height: 1.5; letter-spacing: -0.02em; }
  .s04__end i { height: 2px; margin-bottom: 18px; }
  /* 05 문제 */
  .s05__cmp { gap: 16px; margin-top: 36px; }
  .s05__card { display: grid; gap: 16px; padding: 20px; border-radius: 16px; background: #1e1c19; }
  .s05__card.is-after { border-color: rgba(200, 169, 126, 0.55); }
  .s05__tag { font-size: 16px; line-height: 1.5; }
  .s05__shot { margin-top: 0; aspect-ratio: 308 / 112; border: 1px solid var(--line); border-radius: 10px; }
  .s05__k { margin-top: 0; font-size: 12px; line-height: 1.5; }
  .s05__card > .s05__rows { margin-top: -16px; }
  .s05__rows li { gap: 12px; padding: 12px 0; font-size: 15px; line-height: 1.5; }
  .is-before .s05__rows em { color: var(--mute); }
  .is-after .s05__rows em { font-weight: 500; }
  .s05__end { margin-top: 48px; font-size: 18px; line-height: 1.5; }
  .s05__end b { display: block; margin-top: 6px; font-size: 24px; line-height: 1.4; letter-spacing: -0.03em; }

  /* 06 선점 */
  .s06 .lead-q { margin-bottom: 14px; font-size: 16px; line-height: 1.5; color: var(--mute); }
  .s06 .h2 + .sub { margin-top: 14px; }
  .s06__grid { gap: 28px; margin-top: 36px; }
  .s06__chart { display: grid; gap: 6px; padding: 20px; border-radius: 16px; background: #131211; }
  .s06__eb { font-size: 12px; line-height: 1.4; letter-spacing: 0.1em; }
  .s06__ct { margin-top: 0; font-size: 18px; line-height: 1.4; }
  .s06__cs { font-size: 12px; line-height: 1.4; }
  .s06__chart svg { margin-top: 0; }
  .s06__chart .xl text { font-size: 18px; fill: var(--dim); }
  .s06__chart .gap text { font-size: 18px; }
  .s06__chart .grid line { stroke: #33322e; stroke-width: 1; stroke-dasharray: none; }
  .s06__chart .grid line:last-child { stroke: #474540; }
  .s06__chart .line-a { stroke-width: 3; }
  .s06__chart .line-b { stroke: #8c8a82; stroke-width: 2; }
  .s06__chart .m-pt { display: inline; }
  .s06__legend { gap: 6px; margin-top: 0; padding-top: 14px; font-size: 13px; line-height: 1.5; }
  .s06__legend b { margin-right: 0; }
  .s06__legend li { gap: 8px; }
  .s06__src { margin-top: 0; font-size: 12px; line-height: 1.4; }
  .s06__steps li { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px 12px; padding: 22px 0; }
  .s06__steps .num { grid-column: 1; grid-row: 1; font-size: 25px; line-height: 1.2; }
  .s06__steps em { grid-column: 2; grid-row: 1; font-size: 12px; line-height: 1.4; }
  .s06__steps li p { grid-column: 1 / -1; grid-row: 2; font-size: 16px; line-height: 1.6; }
  .s06__band { gap: 24px; margin-top: 36px; padding: 24px 22px; border-radius: 14px; background: #1e1c19; }
  .s06__opp { margin-top: 0; font-size: 15px; line-height: 1.7; }
  .s06__re { padding: 2px 0 2px 20px; font-size: 22px; line-height: 1.45; letter-spacing: -0.01em; }
  .s06__re b { display: block; margin-top: 4px; }
  /* 07 내 병원 진단 */
  .s07__grid { gap: 40px; }
  .s07__sub { font-size: 16px; }
  .s07__live { gap: 9px; margin-top: 24px; font-size: 12px; line-height: 1.4; }
  .s07__live img { width: 30px; height: 30px; border-radius: 7px; }
  .s07__live span { margin-left: 0; }
  .s07__form { gap: 9px; margin-top: 24px; }
  .fld { gap: 4px; padding: 14px 18px; border-color: var(--line); border-radius: 8px; background: #1b1a17; }
  .fld span { font-size: 12px; line-height: 1.4; }
  .fld input { padding: 0; font-size: 16px; line-height: 1.5; }
  .fld input::placeholder { color: var(--dim); }
  .fld-row { gap: 9px; }
  .scope__k { font-size: 12px; line-height: 1.4; }
  .scope__opts button { gap: 4px; padding: 14px 18px; border-color: var(--line); border-radius: 8px; background: #1b1a17; font-size: 16px; line-height: 1.5; }
  .scope__opts button small { font-size: 12px; line-height: 1.4; }
  .s07__go { min-height: 58px; margin-top: 5px; font-size: 16px; }
  .s07__msg:empty { min-height: 0; margin-top: -9px; }
  .s07__more { margin-top: -1px; }
  .s07__demo { min-height: 50px; font-size: 15px; }
  .s07__demo .btn__meta { font-size: 13px; }
  .s07__ex { padding: 24px 20px; border-radius: 16px; background: #1e1c19; }
  .s07__ex-top { font-size: 14px; line-height: 1.4; }
  .s07__ex-top b { font-weight: 700; }
  .s07__ex-top span { gap: 6px; font-size: 12px; letter-spacing: -0.01em; line-height: 1.3; }
  .s07__ex-top span i { width: 6px; height: 6px; }
  .s07__ex-q { margin-top: 18px; padding: 11px 16px; border-radius: 7px; font-size: 13px; line-height: 1.5; }
  .s07__tbl { margin-top: 10px; table-layout: fixed; font-size: 14px; line-height: 1.4; }
  .s07__tbl thead th { padding: 12px 0; height: 46px; }
  .s07__tbl thead th:first-child { width: 105px; }
  .s07__tbl thead img { width: 20px; height: 20px; border-radius: 5.7px; }
  .s07__tbl tbody th, .s07__tbl tbody td { padding: 14px 0; }
  .s07__tbl tr.is-us th { padding-left: 8px; }
  .s07__ex-say { margin-top: 18px; padding: 16px 18px; border-radius: 9px; font-size: 14px; line-height: 1.5; }
  .s07__ex-say p { margin-top: 4px; font-size: 12px; line-height: 1.5; }
  .s07__ex-note { margin-top: 16px; font-size: 12px; line-height: 1.5; }

  /* 08 만드는 사람: 사진이 카드 위쪽 전체를 채우고 아래로 흐려진다 (모바일은 컬러) */
  .s08__cards { gap: 16px; margin-top: 36px; }
  .s08__card { border-radius: 20px; background: #1e1c19; }
  .s08__photo { display: block; height: 220px; background: radial-gradient(ellipse 60% 70% at 50% 60%, rgba(200, 169, 126, 0.2), transparent 70%), #1b1a17; }
  .s08__photo::after { height: 83px; background: linear-gradient(rgba(22, 21, 20, 0), #1e1c19); }
  .s08__photo img { position: absolute; left: -26.6%; top: -12px; width: 161%; max-width: none; height: auto; object-fit: initial; filter: none; }
  .s08__card:hover .s08__photo img { filter: none; }
  .s08__photo.is-empty { display: grid; place-items: end center; }
  .s08__photo.is-empty p { top: 28px; left: 15px; right: 0; font-size: 12px; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; color: var(--mute); text-align: left; }
  .s08__sil { gap: 10px; margin-bottom: -32px; }
  .s08__sil i { width: 66px; height: 66px; background: #33302b; }
  .s08__sil b { width: 165px; height: 110px; border-radius: 83px 83px 0 0; background: #33302b; }
  .s08__body { padding: 24px 20px 16px; }
  .s08__role { font-size: 22px; line-height: 1.4; }
  .s08__one { margin-top: 12px; font-size: 15px; line-height: 1.65; }
  .s08__body dl { margin-top: 12px; border-top: 0; }
  .s08__body dl div { gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 0; font-size: 14px; line-height: 1.5; }
  /* 09 4주 과정 */
  .s09 { padding: 0; }
  .s09__pin { padding: 96px 0; }
  .s09__track { margin-top: 36px; }
  .s09__marks li { gap: 10px; font-size: 12px; font-weight: 500; line-height: 1.4; }
  .s09__marks li:last-child { font-weight: 700; }
  .s09__steps { gap: 10px; margin-top: 28px; }
  .s09__steps li { border-radius: 16px; background: #1e1c19; }
  .s09__head { padding: 18px 52px 18px 20px; }
  .s09__steps .num { font-family: var(--f-sans); font-size: 12px; line-height: 1.4; letter-spacing: -0.01em; }
  .s09__head h3 { margin-top: 2px; font-size: 18px; line-height: 1.5; }
  .s09__head i { right: 22px; width: 9px; height: 9px; }
  .s09__body > div { display: grid; justify-items: start; gap: 12px; }
  .s09__steps .s09__body p { font-size: 14px; line-height: 1.65; }
  .s09__steps span { margin-top: 0; padding: 6px 12px; border-radius: 999px; font-size: 12px; line-height: 1.4; }
  .s09__steps span b { margin-left: 2px; }

  /* 10 오픈 후 */
  .s10__sub { font-size: 16px; }
  .s10__loop { gap: 14px; margin-top: 36px; }
  .s10__loop > li { padding: 24px 20px 10px; border-radius: 16px; background: #1e1c19; }
  .s10__loop .num { font-size: 12px; line-height: 1.4; letter-spacing: 0; }
  .s10__loop h3 { margin-top: 0; font-size: 28px; line-height: 1.4; }
  .s10__one { margin-top: 0; font-size: 14px; line-height: 1.5; }
  .s10__loop ul { margin-top: 16px; }
  .s10__loop ul li { padding: 13px 0 13px 18px; font-size: 15px; line-height: 1.5; }
  .s10__loop ul li::before { top: 21px; width: 6px; height: 6px; transform: none; }
  /* 11 약속 */
  .s11__quote { margin-top: 0; padding-bottom: 48px; }
  .s11__mark { font-family: var(--f-sans); font-size: 64px; line-height: 1; font-weight: 300; }
  .s11__quote p { margin-top: 0; font-family: var(--f-serif); font-size: 28px; line-height: 1.45; font-weight: 300; letter-spacing: -0.02em; }
  .s11__quote cite { margin-top: 14px; font-size: 14px; line-height: 1.5; }
  .s11__grid { gap: 40px; margin-top: 0; }
  .s11__promise { display: grid; gap: 8px; margin-top: 28px; padding: 4px 0 4px 20px; font-size: 16px; line-height: 1.5; }
  .s11__promise br:not(.mb) { display: none; }
  .s11__promise b { margin-top: 0; font-size: 26px; line-height: 1.4; letter-spacing: -0.02em; }
  .s11__cond { margin-top: 28px; }
  .s11__cond div { grid-template-columns: 72px 1fr; align-items: center; padding: 16px 0; font-size: 15px; line-height: 1.5; }
  .s11__cond dt { font-size: 13px; line-height: 1.5; }
  .s11__paper { padding: 36px 24px; background: #ede8de; color: #1f1c1a; }
  .s11__paper[data-reveal].is-in { transform: none; }
  .s11__pt { padding-bottom: 12px; border-bottom-color: #bfb8a8; font-size: 18px; line-height: 1.5; }
  .s11__ln { height: 6px; margin-top: 12px; border-radius: 0; background: #d6cfc2; }
  .s11__ln.is-m { display: block; }
  .s11__pt + .s11__ln { margin-top: 12px; }
  .s11__art { margin: 12px 0; padding: 18px; background: #f2d99e; }
  .s11__hl { display: none; }
  .s11__art b { font-size: 15px; font-weight: 400; line-height: 1.5; }
  .s11__art p { margin-top: 8px; font-size: 14px; line-height: 1.7; font-weight: 300; }
  .s11__sign { margin-top: 12px; padding-top: 24px; font-size: 14px; line-height: 1.5; font-weight: 300; color: #1f1c1a; }
  .s11__end { display: grid; gap: 6px; margin-top: 48px; padding-top: 28px; font-size: 21px; line-height: 1.45; }
  .s11__end span { font-size: 19px; line-height: 1.5; }

  /* 12 남은 자리 */
  .s12__box { margin-top: 36px; border-radius: 14px; background: rgba(18, 17, 15, 0.9); }
  .s12__pick { gap: 10px; padding: 18px; }
  .s12__pick .sel { min-height: 68px; align-content: center; gap: 2px; padding: 12px 16px; border-color: #36332e; border-radius: 8px; background: #1e1c19; }
  .sel > span, .sel--combo label { font-size: 12px; line-height: 1.4; }
  .sel > span small, .sel--combo label small { font-size: 12px; color: var(--dim); }
  .sel--combo input, .sel .dd__btn { padding: 0; font-size: 15px; line-height: 1.5; }
  .s12__pick .btn { min-height: 52px; font-size: 15px; }
  .s12__res { gap: 8px; padding: 22px 20px; }
  .s12__where { font-size: 13px; line-height: 1.5; }
  .s12__ask { margin-top: 8px; font-size: 21px; line-height: 1.5; letter-spacing: -0.02em; }
  /* 13 자주 묻는 질문 */
  .s13__head { gap: 18px; }
  .s13__aside { text-align: left; font-size: 15px; line-height: 1.6; }
  .faq { margin-top: 36px; }
  .faq__q { grid-template-columns: 26px minmax(0, 1fr) 12px; gap: 14px; align-items: start; padding: 22px 0; font-size: 17px; line-height: 1.5; font-weight: 400; }
  .faq__q .num { font-size: 13px; line-height: 1.9; }
  .faq__q i { font-size: 20px; line-height: 1.2; }
  .faq__in { gap: 12px 0; padding: 0 0 28px; }
  .faq__in .k { font-size: 12px; line-height: 1.4; letter-spacing: 0.18em; }
  .faq__in h4 { margin-top: 0; font-size: 21px; line-height: 1.4; letter-spacing: -0.02em; }
  .faq__in p { font-size: 15px; line-height: 1.7; }
  .faq__in p + p, .faq__in .faq__cond + p { margin-top: 0; }
  .faq__in .faq__cond { margin-top: 0; }

  /* 14 마무리 */
  .s14 { padding: 104px 0; }
  .s14__h { margin-top: 0; font-size: 32px; line-height: 1.35; letter-spacing: -0.03em; }
  .s14__sub { margin-top: 18px; font-size: 16px; line-height: 1.6; }
  .s14__cta { flex-direction: column; align-items: center; gap: 10px; margin-top: 32px; }
  .s14__cta .btn { min-height: 52px; padding: 0 26px; font-size: 15px; }

  /* 하단 고정 바 */
  .bar__in { height: 72px; }
  .bar__in > div { gap: 9px; }
  .bar .btn { min-height: 44px; font-size: 13px; line-height: 1.2; }
  .bar .btn--line { font-weight: 500; }
  /* 07 결과 펼침 (02A · 피그마 310:1681) */
  .s07r { padding: 56px 0 64px; background: radial-gradient(120% 60% at 50% 0%, #1b1814, #141311 70%); }
  .s07r__grid { gap: 40px; }
  .r-ok { font-size: 13px; color: #6c675f; }
  .r-title { margin-top: 16px; font-size: 30px; line-height: 1.34; font-weight: 300; letter-spacing: -0.04em; }
  .r-desc { margin-top: 14px; font-size: 15px; line-height: 1.7; }
  .r-sum { margin-top: 24px; }
  .r-sum li { grid-template-columns: 80px minmax(0, 1fr); gap: 10.8px; padding: 15px 0; font-size: 15px; line-height: 1.65; font-weight: 400; }
  .r-sum span { padding-top: 0; font-size: 13px; line-height: 1.65; color: #6c675f; }
  .r-acts { margin-top: 26px; }
  .r-acts > .btn { min-height: 56px; font-size: 15px; }
  .r-acts__row .btn { min-height: 52px; font-size: 14px; font-weight: 500; }
  .r-paper { padding: 0 16px 24px; }
  .r-paper__top { gap: 4px; padding: 18px 0 14px; font-size: 13px; line-height: 1.25; color: #57524b; }
  .r-sec { padding-top: 32px; }
  .r-sec + .r-sec { margin-top: 36px; }
  .r-k, .r-k span { font-size: 13px; line-height: 1.25; }
  .r-h { margin-top: 8px; font-size: 22px; line-height: 1.4; letter-spacing: -0.03em; }
  .r-nums { margin-top: 24px; }
  .r-num { padding: 16px 10px 14px 0; }
  .r-num:nth-child(even) { padding: 16px 0 14px 14px; border-left: 1px solid #ddd8cd; }
  .r-num:nth-child(n+3) { border-top: 1px solid #ddd8cd; }
  .r-num dt { font-size: 13px; line-height: 1.25; color: #57524b; }
  .r-num dd { margin-top: 8px; font-size: 40px; line-height: 1.05; }
  .r-num dd small { font-size: 15px; color: #3b3833; }
  .r-num p { margin-top: 10px; font-size: 13px; line-height: 1.25; color: #57524b; }
  .r-bars { gap: 6px; margin-top: 10px; }
  .r-bars p { grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 6px; font-size: 13px; line-height: 1.25; }
  .r-tbl { display: block; margin-top: 20px; }
  .r-tbl thead, .r-tbl tbody { display: block; }
  .r-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid #ddd8cd; }
  .r-tbl thead tr { grid-template-columns: 60px 1fr; gap: 0; padding: 10px 0; }
  .r-tbl thead th:last-child { display: none; }
  .r-tbl th, .r-tbl td { padding: 0; border: 0; }
  .r-tbl thead th { padding: 0; font-size: 13px; line-height: 1.25; }
  .r-tbl tbody th { width: auto; padding: 0; grid-column: 1; grid-row: 1; font-size: 15px; line-height: 1.25; color: #3a3631; }
  .r-tbl td:last-child { grid-column: 2; grid-row: 1; width: auto; font-size: 15px; line-height: 1.25; }
  .r-tbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .r-tbl tr.is-us td:last-child { font-weight: 500; }
  .r-fact { margin-top: 16px; font-size: 13px; line-height: 1.6; }
  .r-more { gap: 16px; margin-top: 36px; padding-top: 24px; align-items: stretch; }
  .r-more p { font-size: 13px; line-height: 1.6; }
  .r-more__btn { width: 100%; min-height: 56px; font-size: 15px; }
}


/* 섹션 배경: 피그마처럼 짝수 섹션(02, 04 … 14)은 #1b1a17, 홀수는 #141311.
   (예전 :nth-of-type 규칙은 07 뒤에 숨은 결과 섹션(07r)까지 세서 08부터 순서가 뒤집혔다) */
.s.s03, .s.s05, .s.s07, .s.s09, .s.s11, .s.s13 { background-color: #141311; }
.s.s02, .s.s04, .s.s06, .s.s08, .s.s10, .s.s12, .s.s14 { background-color: #1b1a17; }
/* 톤 계단: 섹션 경계를 그라데이션 없이 "면"으로 나눈다. 두 검정의 명도 차이를 키워 선 없이도 경계가 보이게
   깊은 검정 #161513 (04, 06, 08) · 따뜻한 숯색 #221f1c (02, 05, 09, 11, 13). 11은 사진이 깔린 10과 붙어 보여서 숯색으로 (2026-09-22) · 07 진단은 아래 킥 섹션 */
.s.s04, .s.s06, .s.s08 { background-color: #161513; }
.s.s02, .s.s05, .s.s09, .s.s11, .s.s13 { background-color: #221f1c; }
/* 밝아진 면 위의 카드는 한 단계 밝게 (바탕에 묻히지 않게) */
.s.s02, .s.s05, .s.s09, .s.s11 { --panel: #221f1b; --line: #36322c; }

/* 모바일 배경: 피그마 모바일 시안(296:497) 섹션별 금빛 번짐 (좌표, 크기, 불투명도 그대로) */
@media (max-width: 860px) {
  .s.s02 { background-image: radial-gradient(195px 779px at 39px 234px, rgba(200, 169, 126, 0.08), rgba(200, 169, 126, 0)); }
  .s.s04 { background-image: radial-gradient(175px 585px at 331px 260px, rgba(200, 169, 126, 0.09), rgba(200, 169, 126, 0)); }
  .s.s05 { background-image: radial-gradient(195px 726px at 47px 1233px, rgba(200, 169, 126, 0.08), rgba(200, 169, 126, 0)); }
  .s.s06 { background-image: radial-gradient(175px 782px at 78px 695px, rgba(200, 169, 126, 0.12), rgba(200, 169, 126, 0)); }
  .s.s07 { background-image: radial-gradient(175px 658px at 331px 731px, rgba(200, 169, 126, 0.10), rgba(200, 169, 126, 0)); }
  .s.s08 { background-image: radial-gradient(214px 814px at 195px 222px, rgba(200, 169, 126, 0.08), rgba(200, 169, 126, 0)); }
  .s.s09 { background-image: radial-gradient(175px 401px at 39px 267px, rgba(200, 169, 126, 0.08), rgba(200, 169, 126, 0)); }
  .s.s11 { background-image: radial-gradient(195px 876px at 312px 1051px, rgba(200, 169, 126, 0.09), rgba(200, 169, 126, 0)); }
  .s.s13 { background-image: radial-gradient(195px 779px at 39px 311px, rgba(200, 169, 126, 0.07), rgba(200, 169, 126, 0)); }
  /* 사진 배경 섹션: 사진 불투명도와 덮는 층(가로, 세로 그라데이션)과 번짐을 시안 값으로 */
  .s03__bg img { opacity: 0.42; filter: none; }
  .s03__bg::after { background: radial-gradient(195px 384px at 351px 614px, rgba(200, 169, 126, 0.10), rgba(200, 169, 126, 0)), linear-gradient(to bottom, rgba(20, 19, 17, 0.85), rgba(20, 19, 17, 0) 25%, rgba(20, 19, 17, 0) 75%, rgba(20, 19, 17, 0.9)), linear-gradient(to right, rgba(20, 19, 17, 0.96), rgba(20, 19, 17, 0.82) 50%, rgba(20, 19, 17, 0.5)); }
  .s10__bg img { opacity: 0.22; }
  .s10__bg::after { background: radial-gradient(195px 704px at 351px 141px, rgba(200, 169, 126, 0.10), rgba(200, 169, 126, 0)), linear-gradient(to bottom, rgba(27, 26, 23, 0.2), rgba(27, 26, 23, 0.85) 45%, #1b1a17), linear-gradient(to right, #1b1a17, rgba(27, 26, 23, 0.9) 55%, rgba(27, 26, 23, 0.35)); }
  .s12__bg img { opacity: 0.55; }
  .s12__bg::after { background: radial-gradient(175px 452px at 351px 502px, rgba(200, 169, 126, 0.10), rgba(200, 169, 126, 0)), linear-gradient(to bottom, rgba(27, 26, 23, 0.9), rgba(27, 26, 23, 0) 20%, rgba(27, 26, 23, 0) 80%, rgba(27, 26, 23, 0.95)), linear-gradient(to right, #1b1a17, rgba(27, 26, 23, 0.85) 50%, rgba(27, 26, 23, 0.3)); }
  .s14__bg img { opacity: 0.18; filter: none; }
  .s14__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(214px 304px at 195px 498px, rgba(200, 169, 126, 0.14), rgba(200, 169, 126, 0)), rgba(20, 19, 17, 0.6); }
}

/* ======================================================================
   v7.2 태블릿 시안 정합 (피그마 296:498 · 768): 모바일과 같은 한 줄 배치, 글자와 여백만 크게
   ====================================================================== */
@media (min-width: 600px) and (max-width: 860px) {
  .s { padding: 112px 0; }
  .s::before { height: 112px; }
  .s .h2 + .sub { margin-top: 16px; }

  /* 01 */
  .s01 { padding-top: calc(var(--header-h) + 56px); }
  .s01__eb { font-size: 14px; }
  .s01__h { margin-top: 24px; font-size: 52px; }
  .s01__sub { margin-top: 28px; font-size: 18px; line-height: 1.7; }
  .s01__bar { height: 67px; margin-top: 40px; padding: 9px 9px 9px 24px; }
  .s01__url { font-size: 18px; }
  .s01__url .caret { height: 22px; }
  .s01__go { padding: 15px 24px; font-size: 16px; }
  .s01__doc { margin-top: 56px; padding: 0 40px 30px; max-height: 600px; }
  .d-top { flex-direction: row; justify-content: space-between; gap: 12px; }
  .d-verdict { font-size: 34px; }
  .d-h { font-size: 20px; }
  .d-nums dd { font-size: 40px; }
  .d-tbl th, .d-tbl td, .d-tbl thead th { font-size: 13px; }
  .d-tbl th:nth-child(1) { width: 158px; } .d-tbl th:nth-child(2) { width: 103px; } .d-tbl th:nth-child(3) { width: 79px; } .d-tbl th:nth-child(4) { width: 145px; }

  /* 02: 태블릿은 탭 네 개가 한 줄에 다 들어간다 */
  .s02__tabs { display: flex; flex-direction: row; }
  .s02__tabs button { flex: none; padding: 16px 18px; gap: 10px; font-size: 15px; border-right: 0 !important; border-bottom: 0 !important; }
  .s02__screen { height: 460px; }
  .s02__rec { height: 340px; }
  .s02__h3 { font-size: 32px; }
  .car { height: 566px; }
  .car__item { top: 27px; width: 340px; margin-left: -170px; border-radius: 17px; }

  /* 03 */
  .s03__said { font-size: 24px; }
  .s03__band { gap: 24px; padding: 26px 0; }
  .s03__marquee img { height: 30px; }
  .s03__but { font-size: 20px; }
  .s03__big { font-size: 72px; }

  /* 04 */
  .s04__stats li { grid-template-columns: 44px 1fr; column-gap: 20px; }
  .s04__stats img { width: 44px; height: 44px; border-radius: 10.56px; }
  .s04__stats b { font-size: 44px; }
  .s04__stats p { font-size: 16px; }
  .s04__chat { padding: 28px; }
  .s04__chat-h { font-size: 13px; }
  .s04__q { padding: 12px 18px; font-size: 16px; }
  .s04__a img { width: 28px; height: 28px; }
  .typing { padding: 11px 18px; }
  .s04__end { font-size: 26px; }
  .s04__end i { width: 56px; }

  /* 05 */
  .s05__cmp { gap: 20px; margin-top: 40px; }
  .s05__card { gap: 18px; padding: 28px; }
  .s05__card > .s05__rows { margin-top: -18px; }
  .s05__tag { font-size: 17px; }
  .s05__shot { aspect-ratio: 630 / 202; }
  .s05__k { font-size: 13px; }
  .s05__rows li { font-size: 16px; }
  .s05__end { margin-top: 56px; font-size: 20px; }
  .s05__end b { font-size: 32px; }

  /* 06: 차트 오른쪽 라벨을 그대로 두고, 단계는 왼쪽 번호 칸 + 오른쪽 문장 */
  .s06 .lead-q { font-size: 18px; }
  .s06__grid { gap: 32px; margin-top: 40px; }
  .s06__chart { padding: 32px; }
  .s06__ct { font-size: 20px; }
  .s06__cs { font-size: 13px; }
  .s06__chart .lab { display: inline; }
  .s06__chart .lab text { font-size: 16px; }
  .s06__chart .lab .sub { font-size: 13px; }
  .s06__chart .xl text { font-size: 13px; }
  .s06__chart .gap text { font-size: 14px; }
  .s06__legend { display: none; }
  .s06__steps li { grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 6px 28px; padding: 26px 0; }
  .s06__steps .num { grid-column: 1; grid-row: 1; font-size: 28px; line-height: 1.1; }
  .s06__steps em { grid-column: 1; grid-row: 2; font-size: 13px; font-weight: 500; }
  .s06__steps li p { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; line-height: 1.65; }
  .s06__band { gap: 28px; padding: 36px 40px; }
  .s06__opp { font-size: 17px; }
  .s06__re { padding-left: 24px; font-size: 28px; }

  /* 07 */
  .s07__grid { gap: 48px; }
  .s07__sub { font-size: 18px; }
  .s07__live { gap: 10px; font-size: 13px; }
  .s07__live img { width: 32px; height: 32px; }
  .s07__form { gap: 10px; margin-top: 28px; }
  .fld { padding: 14px 20px; }
  .fld input { font-size: 17px; }
  .fld-row { gap: 10px; }
  .scope__opts { gap: 10px; }
  .scope__opts button { padding: 14px 20px; font-size: 17px; }
  .s07__go { margin-top: 4px; }
  .s07__msg:empty { margin-top: -10px; }
  .s07__more { margin-top: -2px; }
  .s07__demo { min-height: 52px; }
  .s07__ex { padding: 28px 32px; }
  .s07__ex-top { font-size: 15px; }
  .s07__ex-q { padding: 12px 18px; font-size: 14px; }
  .s07__tbl { font-size: 15px; }
  .s07__tbl thead th { height: 48px; }
  .s07__tbl thead th:first-child { width: 212px; }
  .s07__tbl thead img { width: 24px; height: 24px; }
  .s07__tbl tbody th, .s07__tbl tbody td { padding: 15px 0; }
  .s07__ex-say { padding: 18px 20px; font-size: 16px; }
  .s07__ex-say p { font-size: 14px; }

  /* 08 */
  .s08__cards { gap: 20px; margin-top: 40px; }
  .s08__photo { height: 300px; }
  .s08__photo::after { height: 113px; }
  .s08__photo img { left: -3.2%; top: -16px; width: 112%; }
  .s08__photo.is-empty p { left: 0; right: 0; top: 38px; text-align: center; }
  .s08__sil { gap: 13px; margin-bottom: -43px; }
  .s08__sil i { width: 90px; height: 90px; }
  .s08__sil b { width: 225px; height: 150px; border-radius: 113px 113px 0 0; }
  .s08__body { padding: 28px 32px 24px; }
  .s08__role { font-size: 26px; }
  .s08__one { margin-top: 14px; font-size: 16px; }
  .s08__body dl { margin-top: 14px; }
  .s08__body dl div { padding: 13px 0; font-size: 15px; line-height: 1.6; }

  /* 09: 태블릿은 네 단계를 모두 펼쳐 둔다 (누를 필요 없음) */
  .s09__pin { padding: 112px 0; }
  .s09__track { margin-top: 40px; }
  .s09__marks li { font-size: 14px; }
  .s09__marks li::before { width: 14px; height: 14px; }
  .s09__steps { gap: 14px; margin-top: 32px; }
  .s09__head { padding: 26px 28px 0; pointer-events: none; cursor: default; }
  .s09__head i { display: none; }
  .s09__head h3 { margin-top: 10px; font-size: 22px; line-height: 1.4; }
  .s09__body, .s09__steps li .s09__body { grid-template-rows: 1fr; }
  .s09__body > div, .s09__steps li.is-open .s09__body > div { gap: 10px; padding: 10px 28px 26px; }
  .s09__steps .s09__body p { font-size: 15px; }
  .s09__steps span { padding: 7px 12px; font-size: 12px; }
  .s09__steps span b { font-size: 13px; }

  /* 10 */
  .s10__sub { font-size: 18px; }
  .s10__loop { gap: 16px; margin-top: 40px; }
  .s10__loop > li { padding: 28px 32px 14px; }
  .s10__loop h3 { font-size: 30px; }
  .s10__one { font-size: 16px; }
  .s10__loop ul { margin-top: 18px; }
  .s10__loop ul li { padding: 14px 0 14px 18px; font-size: 16px; line-height: 1.7; }
  .s10__loop ul li::before { top: 25px; }

  /* 11 */
  .s11__mark { font-size: 80px; }
  .s11__quote p { font-size: 40px; }
  .s11__quote cite { margin-top: 16px; font-size: 15px; }
  .s11__quote { padding-bottom: 56px; }
  .s11__grid { gap: 48px; margin-top: 56px; }
  .s11__promise { margin-top: 32px; padding-left: 24px; font-size: 20px; }
  .s11__promise b { font-size: 32px; }
  .s11__cond { margin-top: 32px; }
  .s11__cond div { grid-template-columns: 120px 1fr; padding: 18px 0; font-size: 18px; }
  .s11__cond dt { font-size: 14px; }
  .s11__paper { padding: 56px; }
  .s11__pt { padding-bottom: 16px; font-size: 22px; }
  .s11__ln, .s11__pt + .s11__ln { margin-top: 16px; }
  .s11__art { margin: 16px 0; }
  .s11__art b { font-size: 17px; }
  .s11__art p { font-size: 15px; }
  .s11__sign { margin-top: 16px; }
  .s11__end { gap: 6px; margin-top: 56px; padding-top: 32px; font-size: 24px; }
  .s11__end span { font-size: 24px; line-height: 1.45; }

  /* 12 */
  .s12__box { margin-top: 40px; }
  .s12__pick { gap: 12px; padding: 24px; }
  .s12__pick .sel { min-height: 75px; padding: 14px 20px; }
  .sel--combo input, .sel .dd__btn { font-size: 17px; }
  .s12__pick .btn { min-height: 56px; font-size: 16px; }
  .s12__res { gap: 10px; padding: 32px 36px; }
  .s12__where { font-size: 13px; }
  .s12__ask { font-size: 26px; }

  /* 13 */
  .s13__aside { font-size: 16px; }
  .faq { margin-top: 40px; }
  .faq__q { grid-template-columns: 28px minmax(0, 1fr) 13px; gap: 16px; padding: 24px 0; font-size: 19px; }
  .faq__q .num { line-height: 2.2; }
  .faq__q i { font-size: 22px; }
  .faq__in { padding: 4px 0 32px 44px; }
  .faq__in h4 { font-size: 24px; }
  .faq__in p { font-size: 16px; }

  /* 14 */
  .s14 { padding: 128px 0; }
  .s14__h { font-size: 44px; }
  .s14__sub { margin-top: 20px; font-size: 18px; }
  .s14__cta { flex-direction: row; gap: 12px; margin-top: 36px; }

  /* 하단 고정 바: 태블릿은 버튼 폭을 글자에 맞춘다 */
  .bar .btn { flex: none; padding: 0 14px; }

  /* 02A 결과 */
  .r-title { font-size: 34px; }
  .r-paper { padding: 0 28px 28px; }
}

/* 모바일 글자 결: 피그마 모바일 시안의 자간, 행간, 굵기 (제목 -3%, 본문 -1%) */
@media (max-width: 860px) {
  .h2 { line-height: 1.38; letter-spacing: -0.03em; }
  .sub, .s01__sub, .lead-q { letter-spacing: -0.01em; }
  /* 10 카드: 목록 글자를 가볍게, 줄 간격을 넉넉하게 (행 49px, 카드 위 24px) */
  .s10__loop > li { padding: 24px 20px 10px; border-radius: 16px; }
  .s10__loop .num { letter-spacing: 0; }
  .s10__loop h3 { margin-top: 6px; font-size: 28px; line-height: 1.4; letter-spacing: -0.01em; }
  .s10__loop > li > p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: #b0aca3; }
  .s10__loop ul { margin-top: 16px; }
  .s10__loop ul li { padding: 13px 0 13px 18px; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; }
  .s10__loop ul li b { font-weight: 500; }
  .s10__loop ul li::before { top: 21px; width: 5px; height: 5px; }
  /* 11 인용문: 모바일은 세리프 대신 Noto Sans KR Light 28px (시안) */
  .s11__quote p { font-family: var(--f-serif); font-weight: 300; font-size: 28px; line-height: 1.45; letter-spacing: -0.02em; }
}

/* 08 모바일 인물 사진: 피그마 시안(298:3169)을 그대로 내보낸 이미지 (배경 빛, 아래 흐림 포함) */
@media (max-width: 600px) {
  .s08__photo picture { display: contents; }
  .s08__photo:not(.is-empty) { height: auto; aspect-ratio: 350 / 220; background: none; }
  .s08__photo:not(.is-empty)::after { display: none; }
  .s08__photo:not(.is-empty) img { position: static; width: 100%; height: 100%; max-width: none; object-fit: cover; left: auto; top: auto; }
}

/* 히어로 제목: 나눔명조 (무료, SIL OFL). 밑줄 없이 "원장님들이"는 보통, 돌아가는 단어와 마지막 줄은 굵게 */
.s01__h { font-family: 'Nanum Myeongjo', var(--f-serif); letter-spacing: -0.03em; line-height: 1.32; }
.s01__row { font-weight: 400; }
.s01__face { font-weight: 700; }
.s01__drum::after { display: none; }
@media (max-width: 860px) { .s01__h { font-size: min(34px, 7.6vw); } .s01__row { flex-direction: row; gap: 0.28em; flex-wrap: nowrap; white-space: nowrap; } }

/* 데스크톱 배경 (피그마 256:293): 섹션마다 금빛 번짐 한 겹 + 위 126px(시안 140px × 0.9)는 앞 섹션 색에서 이어지는 그라데이션.
   번짐 값은 시안 gradientTransform 그대로 환산 (가운데 위치, 반지름 = 섹션 폭·높이 대비 %) */
@media (min-width: 861px) {
  .s.s02 { --glow: radial-gradient(50% 50% at 10% 15%, rgba(200, 169, 126, 0.08), rgba(200, 169, 126, 0)); }
  .s.s03 { --glow: radial-gradient(50% 50% at 90% 80%, rgba(200, 169, 126, 0.10), rgba(200, 169, 126, 0)); }
  .s.s04 { --glow: radial-gradient(45% 45% at 85% 20%, rgba(200, 169, 126, 0.09), rgba(200, 169, 126, 0)); }
  .s.s05 { --glow: radial-gradient(50% 50% at 12% 85%, rgba(200, 169, 126, 0.08), rgba(200, 169, 126, 0)); }
  .s.s06 { --glow: radial-gradient(45% 45% at 20% 40%, rgba(200, 169, 126, 0.12), rgba(200, 169, 126, 0)); }
  .s.s07 { --glow: radial-gradient(45% 45% at 85% 50%, rgba(200, 169, 126, 0.10), rgba(200, 169, 126, 0)); }
  .s.s08 { --glow: radial-gradient(55% 55% at 50% 15%, rgba(200, 169, 126, 0.08), rgba(200, 169, 126, 0)); }
  .s.s09 { --glow: radial-gradient(45% 45% at 10% 30%, rgba(200, 169, 126, 0.08), rgba(200, 169, 126, 0)); }
  .s.s10 { --glow: radial-gradient(50% 50% at 90% 10%, rgba(200, 169, 126, 0.10), rgba(200, 169, 126, 0)); }
  .s.s11 { --glow: radial-gradient(50% 50% at 80% 60%, rgba(200, 169, 126, 0.09), rgba(200, 169, 126, 0)); }
  .s.s12 { --glow: radial-gradient(45% 45% at 90% 50%, rgba(200, 169, 126, 0.10), rgba(200, 169, 126, 0)); }
  .s.s13 { --glow: radial-gradient(50% 50% at 10% 20%, rgba(200, 169, 126, 0.07), rgba(200, 169, 126, 0)); }
  .s.s14 { --glow: radial-gradient(55% 55% at 50% 90%, rgba(200, 169, 126, 0.14), rgba(200, 169, 126, 0)); }
  .s.s02, .s.s04, .s.s05, .s.s06, .s.s07, .s.s08, .s.s09, .s.s11, .s.s13 { background-image: var(--glow); }

  /* 사진 배경 섹션: 사진 불투명도, 가로·세로 덮개, 번짐을 시안 순서대로 */
  .s03__bg img { opacity: 0.42; filter: none; }
  .s03__bg::after { background: var(--glow), linear-gradient(to bottom, rgba(20, 19, 17, 0.85), rgba(20, 19, 17, 0) 25%, rgba(20, 19, 17, 0) 75%, rgba(20, 19, 17, 0.9)), linear-gradient(to right, rgba(20, 19, 17, 0.96), rgba(20, 19, 17, 0.82) 50%, rgba(20, 19, 17, 0.5)); }
  .s10__bg img { opacity: 0.22; }
  .s10__bg::after { background: var(--glow), linear-gradient(to bottom, rgba(27, 26, 23, 0.2), rgba(27, 26, 23, 0.85) 45%, #1b1a17), linear-gradient(to right, #1b1a17, rgba(27, 26, 23, 0.9) 55%, rgba(27, 26, 23, 0.35)); }
  .s12__bg img { opacity: 0.55; }
  .s12__bg::after { background: var(--glow), linear-gradient(to bottom, rgba(27, 26, 23, 0.9), rgba(27, 26, 23, 0) 20%, rgba(27, 26, 23, 0) 80%, rgba(27, 26, 23, 0.95)), linear-gradient(to right, #1b1a17, rgba(27, 26, 23, 0.85) 50%, rgba(27, 26, 23, 0.3)); }
  .s14__bg img { opacity: 0.18; filter: none; }
  .s14__bg::after { background: var(--glow), rgba(20, 19, 17, 0.6); }
}

/* 06 차트 (피그마 256:1799): 점선 눈금 + 실선 바닥선, 두 선의 시작점, B 아래 옅은 면, 오른쪽 라벨 */
.s06__chart .grid line { stroke: #33322e; stroke-width: 1; stroke-dasharray: 3 5; }
.s06__chart .grid .base { stroke: #474540; stroke-dasharray: none; }
.s06__chart .area-b { opacity: 0; transition: opacity 1200ms var(--ease-soft) 1300ms; }
.s06__chart.is-play .area-b { opacity: 1; }
.s06__chart .line-b { stroke: #8c8a82; }
.s06__chart .m-pt { display: inline; opacity: 0; transition: opacity 500ms var(--ease-soft) 300ms; }
.s06__chart.is-play .m-pt { opacity: 1; }
.s06__chart .pt-b { fill: #8c8a82; }
.s06__chart .lab-a .sub { fill: #b0aca3; }
.s06__chart .lab-b text:first-child { fill: #b0aca3; }
.s06__chart .lab-b .sub { fill: #8f8c85; }
.s06__chart .xl text { fill: #615e59; }
.s06__chart .gap line { stroke-width: 1; stroke-dasharray: 2 3; }
.s06__chart .gap rect { fill: #29221a; }
.s06__src { color: #615e59; }
/* 작은 데스크톱(861~1280)은 차트가 한 줄을 다 쓰므로 오른쪽 라벨을 그대로 보인다 */
@media (min-width: 861px) and (max-width: 1280px) {
  .s06__chart { padding: 36px; }
  .s06__chart .lab { display: inline; }
  .s06__chart .xl text { font-size: 12px; }
  .s06__chart .gap text { font-size: 13px; }
  .s06__legend { display: none; }
}
@media (max-width: 860px) { .s06__chart .grid line { stroke-dasharray: none; } }
@media (max-width: 599px) {
  .s06__chart .xl text:last-child { text-anchor: end; }
  .s06__chart .xl text { fill: var(--dim); }
}

/* 섹션 사이 이음은 쓰지 않는다 (톤 계단으로 면이 바뀐다). 첫 화면의 윗부분 어둡게 하기만 남긴다 */
.s:not(.s01)::before { display: none; }

/* ─────────────────────────────────────────────────────────────
   07 내 병원 진단 = 킥 섹션: "여기서 진단한다"가 바로 보이게
   입력칸은 아이보리 진단지 카드(첫 화면 검색창과 같은 재질), 예시는 리포트와 같은 종이 결과지.
   바탕은 깊은 검정 + 카드 뒤에만 은은한 조명 (띠 모양 그라데이션 없음)
   ───────────────────────────────────────────────────────────── */
.s.s07 {
  background-color: #141311;
  background-image: radial-gradient(60% 45% at 30% 62%, rgba(200, 169, 126, 0.16), rgba(200, 169, 126, 0));
}
@media (max-width: 860px) {
  .s.s07 { background-image: radial-gradient(90% 40% at 50% 48%, rgba(200, 169, 126, 0.18), rgba(200, 169, 126, 0)); }
}
.s07__form {
  margin-top: 28px; padding: 22px 20px 20px; gap: 10px; border-radius: 16px;
  background: #fafaf8; color: #1f1d1a;
  box-shadow: 0 30px 70px rgba(28, 25, 22, 0.55), 0 0 0 1px rgba(200, 169, 126, 0.35);
}
.s07__form::before { content: '내 사업 노출 진단'; display: block; margin: 0 2px 6px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #1f1d1a; }
.s07 .fld { background: #fafaf8; border-color: #ddd5c6; }
.s07 .fld:focus-within { border-color: #8a6a35; }
.s07 .fld.is-err { border-color: #b5453c; }
.s07 .fld span { color: #57524b; }
.s07 .fld input { color: #1f1d1a; }
.s07 .fld input::placeholder { color: #a39d92; }
/* 고객이 있는 곳 (특정 지역 / 전국): 입력칸과 같은 밝은 카드 톤 */
.s07 .scope__k { color: #57524b; margin: 2px 2px 0; }
.s07 .scope__opts button { background: #fafaf8; border-color: #ddd5c6; color: #1f1d1a; }
.s07 .scope__opts button small { color: #57524b; }
.s07 .scope__opts button:hover { border-color: #b9ad97; }
.s07 .scope__opts button[aria-checked='true'] { border-color: #8a6a35; background: #f3ecdd; color: #1f1d1a; box-shadow: inset 0 0 0 1px #8a6a35; }
.s07 .scope__opts button:focus-visible { outline-color: #8a6a35; }
.s07 .scope.is-err .scope__opts button { border-color: #b5453c; }
.fld[hidden] { display: none; }
.s07 .s07__go { background: #221f1c; color: #fafaf8; border-color: #221f1c; }
.s07 .s07__go:hover { background: #1d1b18; }
.s07 .s07__demo { border-color: rgba(26, 23, 20, 0.28); color: #1f1d1a; background: transparent; }
.s07 .s07__demo:hover { border-color: rgba(26, 23, 20, 0.6); background: rgba(26, 23, 20, 0.04); }
.s07 .s07__demo .btn__meta { color: #57524b; }
.s07__msg { color: #1f1d1a; }
.s07__msg:empty { display: none; }
/* 예시 결과지: 리포트 종이 톤 */
.s07 .s07__ex { background: #fafaf8; border-color: transparent; color: #1f1d1a; box-shadow: 0 30px 70px rgba(28, 25, 22, 0.5); }
.s07__ex-top b { color: #1f1d1a; }
.s07__ex-top span { color: #2f7a4a; }
.s07__ex-top span i { background: #2f7a4a; }
.s07 .s07__ex-q { background: #ebe5d9; color: #1f1d1a; }
.s07__tbl th, .s07__tbl td { border-bottom-color: #e3dccf; }
.s07__tbl tbody th { color: #3b3833; }
.s07 .s07__tbl tr.is-us { background: #efe6d4; }
.s07__tbl tr.is-us th { color: #1f1d1a; }
.s07__tbl td.no { color: #b5453c; font-weight: 700; }
.s07__tbl td.yes { color: #7a5e2f; }
.s07 .s07__ex-say { background: #221f1c; color: #fafaf8; }
.s07__ex-say p { color: #c9c2b4; }
.s07__ex-note { color: #8a8479; }
@media (max-width: 860px) {
  .s07 .s07__ex { background: #fafaf8; }
  .s07 .fld { background: #fafaf8; }
  .s07 .scope__opts button { background: #fafaf8; }
  .s07 .scope__opts button[aria-checked='true'] { background: #f3ecdd; }
}
@media (min-width: 861px) {
  .s06__eb { letter-spacing: 0; }
  .s06__ct { font-weight: 500; }
}

/* 결과: 검색 기준 한 줄 (어느 위치, 어떤 화면으로 받은 결과인지) */
.r-basis { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--dim); }
@media (max-width: 860px) { .r-basis { font-size: 13px; } }
/* 톤 계단: 모바일은 카드 색이 따로 박혀 있어 숯색 섹션 위 카드도 한 단계 밝게 */
@media (max-width: 860px) {
  .s05 .s05__card, .s09 .s09__steps li { background: #221f1b; }
  .s02 .s02__view { background: #141210; }
}

/* 08 인물 사진: 흑백으로 어둡다가 올리면 밝아지는 움직임 없이, 원래 밝은 톤으로 고정 */
.s08__photo img, .s08__card:hover .s08__photo img { filter: none; transition: none; }

/* ─────────────────────────────────────────────────────────────
   12 남은 자리: 07 진단과 같은 "도구" 카드. 아이보리 카드 안에서 고르고, 결과도 같은 카드 안 종이 칸에 나온다
   ───────────────────────────────────────────────────────────── */
.s12 .s12__box {
  border: 0; background: #fafaf8; color: #1f1d1a; backdrop-filter: none;
  box-shadow: 0 30px 70px rgba(28, 25, 22, 0.55), 0 0 0 1px rgba(200, 169, 126, 0.35);
}
.s12__box::before { content: '남은 자리 확인'; display: block; padding: 22px 25px 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #1f1d1a; }
.s12 .s12__pick { border-bottom-color: #e3dccf; padding-top: 14px; }
.s12 .s12__pick .sel, .s12 .sel { background: #fafaf8; border-color: #ddd5c6; }
.s12 .sel:hover { border-color: #c9bfae; }
.s12 .sel:focus-within, .s12 .sel.is-open { border-color: #8a6a35; }
.s12 .sel > span, .s12 .sel--combo label { color: #57524b; }
.s12 .sel > span small, .s12 .sel--combo label small { color: #8a8479; }
.s12 .sel--combo input, .s12 .sel .dd__btn { color: #1f1d1a; }
.s12 .sel--combo input::placeholder { color: #a39d92; }
.s12 .sel--combo input.is-bad { color: #b5453c; }
.s12 .dd { --dd-bg: #fafaf8; --dd-line: #ddd5c6; --dd-fg: #3b3833; --dd-strong: #1f1d1a; --dd-hover: #f1ece2; --dd-empty: #a39d92; --dd-mark: #7a5e2f; }
.s12 .combo { background: #fafaf8; border-color: #ddd5c6; box-shadow: 0 16px 40px rgba(28, 25, 22, 0.18); }
.s12 .combo li { color: #3b3833; }
.s12 .combo li b { color: #7a5e2f; }
.s12 .combo li[aria-selected='true'], .s12 .combo li[role='option']:hover { background: #f1ece2; color: #1f1d1a; }
.s12 .s12__pick .btn { background: #221f1c; color: #fafaf8; border-color: #221f1c; }
.s12 .s12__pick .btn:hover { background: #1d1b18; }
/* 결과 칸 */
.s12 .s12__where { color: #57524b; }
.s12 .s12__ask { color: #3b3833; }
.s12 .s12__ask b { color: #1f1d1a; }
.s12 .s12__big > span:first-child { color: #57524b; }
.s12 .s12__big b { color: #7a5e2f; }
.s12 .s12__big.is-full b { color: #a39d92; }
.s12 .s12__big > span:last-child { color: #1f1d1a; }
.s12 .s12__act p { color: #3b3833; }
.s12 .s12__act small { color: #8a8479; }
.s12 .s12__act .btn { background: #221f1c; color: #fafaf8; border-color: #221f1c; }
@media (max-width: 860px) {
  .s12 .s12__box { background: #fafaf8; }
  .s12__box::before { padding: 18px 18px 0; }
  .s12 .s12__pick { padding-top: 12px; }
}
/* 남은 자리 결과: "지금"이 세로로 꺾이지 않게 (좁은 화면에서는 숫자 뒤 문장만 줄바꿈) */
.s12__big > span:first-child { flex: none; white-space: nowrap; }
.s12__big b { flex: none; }
@media (max-width: 599px) {
  .s12__big { gap: 10px; }
  .s12__big > span:first-child { font-size: 22px; }
  .s12__big b { font-size: 84px; }
  .s12__big > span:last-child { font-size: 22px; line-height: 1.35; }
}

/* 10 오픈 후 (2026-09-22 v3): 색 판 위의 작업 화면이 녹화처럼 재생되고, 아래 세 칸이 탭 (레퍼런스: 채널톡, Aside) */
.s10y { margin-top: 56px; }
.s10y__canvas { position: relative; height: 560px; padding: 56px 72px 0; border-radius: 28px; overflow: hidden; background: var(--cv); transition: background 600ms var(--ease-soft); }
.s10y__canvas[data-step='1'] { --cv: radial-gradient(90% 120% at 15% 0%, #f6ecd6 0%, #e7d3ad 45%, #cdb28a 100%); }
.s10y__canvas[data-step='2'] { --cv: radial-gradient(90% 120% at 15% 0%, #eef1e6 0%, #d5dcc6 45%, #b5bfa4 100%); }
.s10y__canvas[data-step='3'] { --cv: radial-gradient(90% 120% at 15% 0%, #e9eef4 0%, #cfd8e3 45%, #aebccc 100%); }
.s10y__canvas::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.4px); background-size: 14px 14px; mask: linear-gradient(90deg, #000 0 8%, transparent 20% 80%, #000 92%); opacity: 0.7; pointer-events: none; }
/* 작업 화면 창 (아래쪽은 판 밖으로 잘린다) */
.yw { position: relative; max-width: 1000px; height: 560px; margin: 0 auto; border-radius: 16px 16px 0 0; background: #fbfaf7; box-shadow: 0 30px 70px rgba(40, 30, 10, 0.28), 0 0 0 1px rgba(40, 30, 10, 0.08); overflow: hidden; color: #26231f; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; letter-spacing: -0.01em; }
.yw__top { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; border-bottom: 1px solid #ece8df; }
.yw__dots { display: flex; gap: 6px; }
.yw__dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2ddd2; }
.yw__brand { font-size: 13px; font-weight: 700; }
.yw__seg { display: flex; gap: 2px; margin: 0 auto; padding: 3px; border-radius: 9px; background: #f0ede6; }
.yw__seg b { padding: 5px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; color: #8a857c; transition: all 300ms; }
.yw__seg b.on { background: #fff; color: #26231f; box-shadow: 0 1px 2px rgba(40, 30, 10, 0.12); }
.yw__who { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #57524b; }
.yw__who i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #26231f; color: #efe4cc; font-style: normal; font-size: 9px; font-weight: 700; }
.yw__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); height: calc(100% - 46px); }
.yw__side { padding: 16px 12px; border-right: 1px solid #ece8df; background: #f7f5f0; }
.yw__sh { margin: 14px 8px 6px; font-size: 11px; font-weight: 600; color: #9d968a; }
.yw__sh:first-child { margin-top: 2px; }
.yw__si { display: flex; justify-content: space-between; padding: 7px 8px; border-radius: 7px; font-size: 13px; color: #57524b; }
.yw__si b { font-weight: 700; color: #26231f; font-variant-numeric: tabular-nums; }
.yw__si.is-on { background: #fff; box-shadow: 0 1px 2px rgba(40, 30, 10, 0.08); }
.yw__q { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; color: #57524b; }
.yw__q i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #c9c2b5; }
.yw__q.is-done i { border: 0; background: #b8955f; }
.yw__q.is-now { font-weight: 700; color: #26231f; }
.yw__q.is-now i { border-color: #b8955f; box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.25); }
.yw__main { padding: 22px 28px; overflow: hidden; }
.yw__main[hidden] { display: none; }
/* 1: 작업 기록 */
.yl-ask { display: flex; align-items: center; gap: 10px; width: fit-content; min-width: 320px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e6e1d6, 0 4px 14px rgba(40, 30, 10, 0.06); font-size: 14px; font-weight: 600; }
.yl-ask img, .yt__tr img { width: 18px; height: 18px; border-radius: 4px; }
.yl-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: -6px; background: #26231f; animation: s10y-blink 0.9s steps(2) infinite; }
.is-typed > .yl-caret { display: none; }
@keyframes s10y-blink { 50% { opacity: 0; } }
.yl-step { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: #57524b; }
.yl-step i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; }
.yl-step svg, .yc__ok svg { width: 17px; height: 17px; fill: none; stroke: #8a857c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.yl-step em { flex: none; white-space: nowrap; margin-left: auto; padding: 2px 8px; border-radius: 99px; background: #f0ede6; font-style: normal; font-size: 12px; font-weight: 600; color: #57524b; }
.yl-step.is-done { color: #26231f; font-weight: 600; }
.yl-step.is-done svg { stroke: #8a6526; }
.yl-step em.yl-gold { background: #26231f; color: #efe4cc; font-family: var(--f-num); }
.yl-card { margin: 10px 0 0 32px; padding: 6px 14px 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e6e1d6; }
.yl-card__h { display: flex; justify-content: space-between; padding: 6px 0; font-size: 11px; color: #9d968a; }
.yl-r { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0ece4; font-size: 13px; }
.yl-r small { font-size: 12px; color: #8a857c; }
.yl-dots { display: flex; gap: 4px; }
.yl-dots i { width: 9px; height: 9px; border-radius: 3px; background: #ebe7df; }
.yl-dots i.on { background: #8a857c; }
.yl-r.is-us { margin: 0 -8px; padding: 9px 8px; border-radius: 8px; background: #f7ece8; border-top-color: transparent; }
.yl-r.is-us b { color: #8f4a40; }
.yl-r.is-us small { color: #a86a60; }
.yl-r.is-us .yl-dots i { background: #ecd3cc; }
/* 2: 페이지 편집 + 점검 */
.yw__main.is-doc { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; }
.yw__main.is-doc[hidden] { display: none; }
.yd__path { font-size: 12px; color: #8a857c; }
.yd__path span { margin: 0 4px; color: #c9c2b5; }
.yd__path b { font-weight: 600; color: #26231f; }
.yd__t { display: flex; align-items: center; min-height: 34px; margin-top: 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.yd__t .yl-caret { margin-left: 2px; }
.yd__by { margin-top: 2px; font-size: 12px; color: #8a857c; }
.yd__qa { margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e6e1d6; }
.yd__qa b { font-size: 14px; }
.yd__qa p { min-height: 20px; margin-top: 5px; font-size: 13px; line-height: 1.6; color: #57524b; }
.yd__qa:first-of-type { box-shadow: 0 0 0 1.5px #c8a97e, 0 6px 16px rgba(200, 169, 126, 0.2); }
.yc { align-self: start; padding: 14px; border-radius: 12px; background: #f7f5f0; box-shadow: 0 0 0 1px #ece8df; }
.yc__h { font-size: 12px; font-weight: 700; }
.yc__i { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid #ece8df; font-size: 13px; color: #57524b; margin-top: 8px; }
.yc__i + .yc__i { margin-top: 0; }
.yc__sw { position: relative; width: 30px; height: 18px; border-radius: 99px; background: #ddd7cb; transition: background 250ms; }
.yc__sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 250ms var(--ease-lux); }
.yc__i.is-on .yc__sw { background: #b8955f; }
.yc__i.is-on .yc__sw::after { transform: translateX(12px); }
.yc__ok { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding: 9px; border-radius: 9px; background: #26231f; color: #efe4cc; font-size: 13px; font-weight: 700; }
.yc__ok svg { stroke: #dcc39c; }
/* 3: 다시 확인 기록 (표) */
.yt-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.yt-h b { font-size: 15px; }
.yt-h span { font-size: 12px; color: #8a857c; }
.yt { margin-top: 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e6e1d6; overflow: hidden; }
.yt__th, .yt__tr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 70px 80px; align-items: center; padding: 0 16px; }
.yt__th { height: 36px; background: #f7f5f0; font-size: 12px; color: #8a857c; }
.yt__tr { height: 46px; border-top: 1px solid #f0ece4; font-size: 14px; }
.yt__tr span { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.yt__tr code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 13px; color: #6c675f; }
.yt__th span:nth-child(n + 3), .yt__tr > i { text-align: center; font-style: normal; }
.yt__tr .x { font-size: 13px; font-weight: 600; color: #a86a60; }
.yt__m em { display: inline-block; font-style: normal; font-size: 13px; font-weight: 600; color: #9d968a; opacity: 0; }
.yt__m em.ok { padding: 2px 10px; border-radius: 99px; background: #26231f; color: #efe4cc; }
.yt__m em { transform: scale(0.85); transition: opacity 300ms, transform 320ms var(--ease-lux); }
.yt__m.is-on em { opacity: 1; transform: none; }

/* 순서대로 나타나기 */
.s10y .a { opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--ease-lux), transform 420ms var(--ease-lux); }
.s10y .a.is-on { opacity: 1; transform: none; }
@keyframes s10y-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes s10y-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.s10y.is-still .a, .s10y.is-still .yt__m em { opacity: 1; animation: none; }
.s10y.is-still .yc__sw { background: #b8955f; }
.s10y.is-still .yc__sw::after { transform: translateX(12px); }

/* 아래 세 칸 탭 (위쪽 진행 막대) */
.s10y__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.s10y__tabs button { display: block; padding: 0 4px 0 0; border: 0; background: none; color: var(--dim); text-align: left; font: inherit; cursor: pointer; transition: color 300ms; }
.s10y__tabs button:hover { color: var(--mute); }
.s10y__tabs button[aria-selected='true'] { color: var(--ivory); }
.s10y__tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 4px; }
.s10y__bar { display: block; height: 2px; margin-bottom: 22px; background: rgba(239, 237, 230, 0.12); }
.s10y__bar i { display: block; width: 0; height: 100%; background: var(--gold); }
.s10y__tabs button[aria-selected='true'] .s10y__bar i { width: 100%; }
.s10y.is-run .s10y__tabs button[aria-selected='true'] .s10y__bar i { width: 0; animation: s10y-bar var(--len, 8s) linear forwards; }
@keyframes s10y-bar { to { width: 100%; } }
.s10y__tabs b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.s10y__tabs p { margin-top: 10px; font-size: 16px; line-height: 1.6; }
.s10y__tabs ul { display: grid; gap: 6px; margin-top: 14px; }
.s10y__tabs li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.55; }
.s10y__tabs li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.s10y__tabs button[aria-selected='true'] li { color: var(--sub); }
.s10y__tabs button[aria-selected='true'] li::before { background: var(--gold); opacity: 1; }
.s10y__mob { display: none; }

/* 휴대폰: 판은 낮게, 사이드바는 빼고, 탭은 이름만 한 줄로 (설명은 아래에 따로) */
@media (max-width: 900px) {
  .s10y { margin-top: 32px; }
  .s10y__canvas { height: 430px; padding: 28px 14px 0; border-radius: 20px; }
  .yw { height: 430px; border-radius: 12px 12px 0 0; }
  .yw__top { height: 40px; gap: 8px; padding: 0 12px; }
  .yw__brand, .yw__who { display: none; }
  .yw__seg b { padding: 4px 12px; font-size: 12px; }
  .yw__body { grid-template-columns: minmax(0, 1fr); height: calc(100% - 40px); }
  .yw__side { display: none; }
  .yw__main { padding: 16px 14px; }
  .yl-ask { min-width: 0; width: 100%; font-size: 13px; }
  .yl-step { font-size: 13px; }
  .yl-step.is-opt { display: none; }
  .yl-card { margin-left: 0; }
  .yl-r { grid-template-columns: 88px minmax(0, 1fr) auto; font-size: 13px; }
  .yw__main.is-doc { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .yc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 10px 12px; }
  .yc__h, .yc__ok { grid-column: 1 / -1; }
  .yc__i:nth-of-type(n + 4) { display: none; }
  .yd__t { font-size: 18px; }
  .yt__th, .yt__tr { grid-template-columns: minmax(0, 1fr) 54px 60px; padding: 0 12px; }
  .yt__th span:nth-child(2), .yt__tr code { display: none; }
  .yt__tr { font-size: 13px; }
  .s10y__tabs { gap: 8px; margin-top: 20px; }
  .s10y__tabs b { font-size: 16px; text-align: center; }
  .s10y__bar { margin-bottom: 12px; }
  .s10y__tabs p, .s10y__tabs ul { display: none; }
  .s10y__mob { display: block; margin-top: 18px; }
  .s10y__mob p { font-size: 16px; line-height: 1.6; color: var(--ivory); }
  .s10y__mob ul { display: grid; gap: 6px; margin-top: 12px; }
  .s10y__mob li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.55; color: var(--sub); }
  .s10y__mob li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
}

/* 10 오픈 후 v3 보강: 예시 표시, 요약 칩, 점검 보조 글, 결과 요약 */
.s10y__ex { position: absolute; top: 18px; right: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(251, 250, 247, 0.7); font-size: 12px; font-weight: 600; color: #57524b; }
.s10y__ex i { width: 6px; height: 6px; border-radius: 50%; background: #b5453c; animation: s10y-blink 1.4s steps(2) infinite; }
.yd__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding: 11px 13px; border-radius: 12px; background: #f1e7d2; }
.yd__sum b { width: 100%; margin-bottom: 2px; font-size: 12px; color: #8a6526; }
.yd__sum span { padding: 4px 10px; border-radius: 99px; background: #fbfaf7; font-size: 13px; font-weight: 600; color: #3b3833; }
.yd__qa:first-of-type { box-shadow: 0 0 0 1px #e6e1d6; }
.yd__sum + .yd__qa { box-shadow: 0 0 0 1.5px #c8a97e, 0 6px 16px rgba(200, 169, 126, 0.2); }
.yc__i span small { display: block; margin-top: 1px; font-size: 11px; color: #9d968a; }
.yk { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.yk p { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e6e1d6; }
.yk p:first-child { background: #26231f; box-shadow: none; }
.yk span { display: block; font-size: 12px; color: #8a857c; }
.yk b { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.yk b i { font-style: normal; color: #b8955f; }
.yk small { display: block; margin-top: 2px; font-size: 12px; color: #8a857c; }
.yk p:first-child span, .yk p:first-child small { color: #b0aca3; }
.yk p:first-child b { color: #efe4cc; }
@media (max-width: 900px) {
  .s10y__ex { top: 10px; right: 12px; font-size: 11px; }
  /* 점검 목록: 두 칸이 같은 줄에서 시작하게 */
  .yc { row-gap: 0; }
  .yc__i, .yc__i + .yc__i { margin-top: 0; padding: 8px 0; align-items: center; }
  .yc__h { margin-bottom: 6px; }
  .yc__i:nth-of-type(n + 4) { display: none; }
  .yd__sum span { font-size: 12px; padding: 3px 8px; }
  .yd > .yd__qa:last-child { display: none; }
  .yk b { font-size: 17px; }
}
@media (max-width: 900px) {
  .s10y__canvas, .yw { height: 480px; }
  .yd__by, .yt-h span { display: none; }
  .yd__t { margin-top: 8px; }
  .yd__sum { margin-top: 10px; padding: 9px 11px; }
  .yd__qa { margin-top: 10px; padding: 11px 13px; }
  .yd__sum { display: none; }
  .yd__sum + .yd__qa { margin-top: 12px; }
  .yt__tr { height: 42px; }
}

/* 11 약속 (2026-09-22 v2): 계약서를 문서 검토 화면처럼. 조항에 형광펜, 조건 네 가지는 옆 메모, 마지막에 도장 */
.s11x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.s11x__promise { margin-top: 36px; font-size: 18px; line-height: 1.6; color: var(--sub); }
.s11x__promise b { display: block; margin-top: 6px; font-size: 34px; line-height: 1.35; font-weight: 700; letter-spacing: -0.03em; color: var(--gold-hi); }
.s11x__src { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--mute); }
.s11x__canvas { position: relative; padding: 44px 44px 0; border-radius: 28px; background: radial-gradient(90% 120% at 15% 0%, #f6ecd6 0%, #e7d3ad 45%, #cdb28a 100%); overflow: hidden; }
.s11x__canvas::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.4px); background-size: 14px 14px; mask: linear-gradient(90deg, #000 0 8%, transparent 20% 80%, #000 92%); opacity: 0.7; pointer-events: none; }
.cw { position: relative; border-radius: 16px 16px 0 0; background: #fbfaf7; box-shadow: 0 30px 70px rgba(40, 30, 10, 0.28), 0 0 0 1px rgba(40, 30, 10, 0.08); overflow: hidden; color: #26231f; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }
.cw__top { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid #ece8df; font-size: 13px; color: #57524b; }
.cw__dots { display: flex; gap: 6px; }
.cw__dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2ddd2; }
.cw__file { font-weight: 600; color: #26231f; }
.cw__pg { margin-left: auto; padding: 2px 9px; border-radius: 99px; background: #f0ede6; font-size: 12px; }
.cw__body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; }
.cw__page { padding: 30px 32px 34px; font-family: var(--f-serif); }
.cw__ln { display: block; height: 5px; margin-top: 12px; border-radius: 3px; background: #e6e1d6; }
.cw__ln.is-s { width: 62%; } .cw__ln.is-m { width: 84%; }
.cw__art { margin: 22px 0; }
.cw__art b { font-size: 16px; font-weight: 600; }
.cw__art p { margin-top: 10px; font-size: 15px; line-height: 2; color: #3b3833; }
.cw__art mark { padding: 2px 1px; background: linear-gradient(#f3d9a0, #f3d9a0) no-repeat 0 100% / 0% 100%; color: inherit; transition: background-size 700ms var(--ease-lux); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cw__art mark.is-on { background-size: 100% 100%; }
.cw__sign { display: flex; justify-content: space-between; margin-top: 26px; font-size: 14px; color: #57524b; }
.cw__sign em { font-style: normal; }
.cw__stamp { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; vertical-align: middle; border: 2px solid #b5453c; border-radius: 50%; color: #b5453c; font-size: 13px; font-weight: 700; opacity: 0; transform: scale(1.6) rotate(-12deg); transition: opacity 200ms, transform 380ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.cw__stamp.is-on { opacity: 0.85; transform: scale(1) rotate(-12deg); }
.cw__notes { display: grid; align-content: start; gap: 10px; padding: 22px 16px; border-left: 1px solid #ece8df; background: #f7f5f0; }
.cw__n { padding: 11px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e6e1d6, 0 4px 12px rgba(40, 30, 10, 0.05); opacity: 0; transform: translateX(8px); transition: opacity 360ms var(--ease-lux), transform 360ms var(--ease-lux); }
.cw__n.is-on { opacity: 1; transform: none; }
.cw__who i { display: inline-block; padding: 1px 8px; border-radius: 99px; background: #f1e7d2; font-style: normal; font-size: 12px; font-weight: 700; color: #8a6526; }
.cw__n p:last-child { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.s11x.is-still .cw__art mark { background-size: 100% 100%; transition: none; }
.s11x.is-still .cw__n, .s11x.is-still .cw__stamp { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .s11x { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .s11x__promise { margin-top: 24px; font-size: 16px; }
  .s11x__promise b { font-size: 26px; }
  .s11x__canvas { padding: 22px 14px 0; border-radius: 20px; }
  .cw__body { grid-template-columns: minmax(0, 1fr); }
  .cw__page { padding: 22px 18px 24px; }
  .cw__art p { font-size: 14px; line-height: 1.9; }
  .cw__notes { grid-template-columns: 1fr 1fr; padding: 14px; border-left: 0; border-top: 1px solid #ece8df; }
  .cw__n { transform: translateY(6px); }
}

/* 3 8년의 결론 (2026-09-22 W1 확정): 현장 사진 위의 가운데 성명서 */
.s03__bg picture { display: block; width: 100%; height: 100%; }
.s03--m { padding: 176px 0 176px; text-align: center; }
.s03--m .s03__bg img { height: 118%; opacity: 0.55; filter: grayscale(0.35) contrast(1.05) brightness(0.8); }
.s03--m .s03__bg::after { background: radial-gradient(70% 60% at 50% 45%, rgba(20, 19, 17, 0.35), rgba(20, 19, 17, 0.85) 75%), linear-gradient(#141311, rgba(20, 19, 17, 0.2) 18%, rgba(20, 19, 17, 0.2) 82%, #141311); }
.s03--m .s03__said { font-family: var(--f-serif); font-size: 30px; line-height: 1.7; font-weight: 300; }
.s03--m .s03__said b { display: inline-block; margin: 6px 0; font-size: 1.35em; font-weight: 600; color: var(--gold-hi); }
.s03--m .s03__band { margin-left: auto; margin-right: auto; max-width: 980px; }
.s03--m .s03__band-cap { text-align: center; }
.s03__rule { display: block; width: 2px; height: 110px; margin: 72px auto 0; background: linear-gradient(transparent, var(--gold), transparent); }
.s03--m .s03__but { margin-top: 48px; font-family: var(--f-serif); font-size: 22px; font-weight: 400; }
.s03--m .s03__big { margin-top: 20px; font-size: clamp(56px, 7.4vw, 116px); }
.s03--m .s03__big b { color: var(--gold-hi); }
@media (max-width: 860px) {
  .s03--m { padding: 112px 0; }
  .s03--m .s03__said { font-size: 21px; }
  .s03__rule { height: 72px; margin-top: 48px; }
  .s03--m .s03__but { margin-top: 32px; font-size: 18px; }
  .s03--m .s03__big { font-size: 42px; }
}
/* 6 왜 지금인가: 은빛 그라데이션(피그마 애셋 B-008)을 검정과 금색 두 색으로 다시 칠한 입자 결, 글 쪽은 어둡게 */
.s06 > .s06__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.s06__bg picture, .s06__bg img { display: block; width: 100%; height: 100%; }
.s06__bg img { object-fit: cover; object-position: 50% 40%; opacity: 1; }
.s06__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 26, 23, 0.92) 0%, rgba(27, 26, 23, 0.6) 40%, rgba(27, 26, 23, 0.15) 75%, rgba(27, 26, 23, 0.25)), linear-gradient(#1b1a17, transparent 18%, transparent 78%, #1b1a17); }
@media (max-width: 860px) { .s06__bg img { object-position: 60% 50%; opacity: 0.3; } }

/* 11 약속 (2026-09-22 v4): 세미나 현장 사진 위, 가운데 조항 액자. 원본 카피만 */
.s11.k2 { padding: 168px 0 150px; background: #0f0e0d; text-align: center; overflow: hidden; }
.k2 > .k2__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.k2__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0.6; filter: blur(1.5px) grayscale(0.35) sepia(0.25) brightness(0.62); transform: scale(1.08); transition: transform 6s cubic-bezier(0.2, 0.6, 0.2, 1); }
.k2.is-in .k2__bg img { transform: scale(1); }
.k2__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 40% at 50% 45%, rgba(15, 14, 13, 0.55), rgba(15, 14, 13, 0.25) 75%), linear-gradient(#0f0e0d, rgba(15, 14, 13, 0.2) 14%, rgba(15, 14, 13, 0.35) 45%, rgba(15, 14, 13, 0.88) 68%, #0f0e0d 88%); }
.k2__h { font-family: var(--f-serif); font-size: clamp(34px, 4vw, 58px); line-height: 1.42; font-weight: 300; letter-spacing: -0.02em; color: #efede6; }
.k2__h b { font-weight: 600; color: var(--gold-hi); }
.k2__promise { margin-top: 36px; font-size: 18px; line-height: 1.6; color: var(--sub); }
.k2__promise b { display: block; margin-top: 8px; font-size: clamp(28px, 2.8vw, 38px); font-weight: 700; letter-spacing: -0.03em; color: #efede6; }
/* 조항 액자: 금색 테두리가 네 변을 따라 그려지고, 안의 글이 한 줄씩 */
.k2__art { position: relative; max-width: 820px; margin: 72px auto 0; padding: 52px 64px 44px; background: rgba(20, 19, 17, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.k2__frame { position: absolute; inset: 0; pointer-events: none; }
.k2__frame::before, .k2__frame::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(200, 169, 126, 0.7); clip-path: inset(0 100% 100% 0); transition: clip-path 1600ms cubic-bezier(0.6, 0, 0.3, 1); }
.k2__frame::after { inset: 8px; border-color: rgba(200, 169, 126, 0.3); transition-delay: 300ms; }
.k2__art.is-on .k2__frame::before, .k2__art.is-on .k2__frame::after { clip-path: inset(0 0 0 0); }
.k2__art > p { opacity: 0; transform: translateY(10px); transition: opacity 900ms var(--ease-lux), transform 900ms var(--ease-lux); }
.k2__art.is-on > p { opacity: 1; transform: none; }
.k2__art.is-on .k2__doc { transition-delay: 700ms; }
.k2__art.is-on .k2__no { transition-delay: 1000ms; }
.k2__art.is-on .k2__clause { transition-delay: 1300ms; }
.k2__art.is-on .k2__sign { transition-delay: 1900ms; }
.k2__doc { font-family: var(--f-serif); font-size: 13px; letter-spacing: 0.32em; color: var(--gold); }
.k2__no { margin-top: 22px; font-family: var(--f-serif); font-size: 22px; font-weight: 600; color: #efede6; }
.k2__clause { margin-top: 16px; font-family: var(--f-serif); font-size: 20px; line-height: 1.9; font-weight: 300; color: #e4dfd3; }
.k2__sign { display: flex; justify-content: center; gap: 64px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(200, 169, 126, 0.25); font-family: var(--f-serif); font-size: 14px; color: var(--mute); }
.k2__terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1000px; margin: 64px auto 0; border-top: 1px solid rgba(200, 169, 126, 0.4); border-bottom: 1px solid rgba(200, 169, 126, 0.4); }
.k2__terms div { padding: 24px 16px; }
.k2__terms div + div { border-left: 1px solid rgba(200, 169, 126, 0.2); }
.k2__terms dt { font-size: 13px; letter-spacing: 0.2em; color: var(--gold); }
.k2__terms dd { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ivory); }
.k2__end { justify-content: center; text-align: center; }
.k2.is-still .k2__art > p { opacity: 1; transform: none; transition: none; }
.k2.is-still .k2__frame::before, .k2.is-still .k2__frame::after { clip-path: none; transition: none; }
.k2.is-still .k2__bg img { transform: none; }
@media (max-width: 860px) {
  .s11.k2 { padding: 104px 0 88px; }
  .k2__h { font-size: 28px; }
  .k2__promise { font-size: 16px; }
  .k2__promise b { font-size: 24px; }
  .k2__art { margin-top: 48px; padding: 36px 22px 30px; }
  .k2__no { font-size: 18px; }
  .k2__clause { font-size: 16px; line-height: 1.85; }
  .k2__sign { gap: 28px; font-size: 13px; }
  .k2__terms { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .k2__terms div:nth-child(3) { border-left: 0; }
  .k2__terms div:nth-child(n + 3) { border-top: 1px solid rgba(200, 169, 126, 0.2); }
  .k2__terms dd { font-size: 15px; }
}

/* 4, 9 텍스처 배경 (피그마 애셋 13 배경: B-001 검은 실크, B-006 금빛 실크) */
.s > .tx-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tx-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tx-bg.is-fabric img { object-position: 70% 40%; opacity: 0.55; transform: scaleX(-1); }
.tx-bg.is-fabric::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #141311 20%, rgba(20, 19, 17, 0.4) 70%, rgba(20, 19, 17, 0.2)), linear-gradient(#141311, transparent 20%, transparent 80%, #141311); }
.tx-bg.is-silk img { opacity: 0.07; filter: saturate(0.7); }
.tx-bg.is-silk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#141311, transparent 30%, transparent 60%, #141311 96%); }
@media (max-width: 860px) { .tx-bg.is-fabric img { opacity: 0.35; } }

/* 9 타임라인: 점 다섯 개를 같은 간격으로 (글자 폭과 상관없이). 글자는 점 가운데, 양 끝만 바깥쪽 정렬 */
.s09__marks { padding: 0 6.3px; }
.s09__marks li { position: relative; flex: 0 0 0; display: block; height: 34px; }
.s09__marks li::before { position: absolute; left: 0; top: 0; transform: translateX(-50%); }
.s09__marks li span { position: absolute; left: 0; top: 22px; transform: translateX(-50%); white-space: nowrap; }
.s09__marks li:first-child span { transform: translateX(-6.3px); }
.s09__marks li:last-child span { transform: translateX(calc(-100% + 6.3px)); }
@media (max-width: 860px) { .s09__marks li span { top: 24px; } .s09__marks li { height: 38px; } }

/* ======================================================================
   좁은 화면 (360, 375) 마무리: 잘리는 곳 보정. 다른 규칙보다 뒤에 두어야 한다
   ====================================================================== */
@media (max-width: 400px) {
  /* 01 검색창: 좁은 화면에서는 https:// 를 빼고 주소만 (그래야 .kr 까지 다 보인다) */
  .s01__pre { display: none; }
  /* 01 결과지 표: 좁은 화면에서는 월 검색량 칸을 접는다 (오른쪽 병원 이름이 잘리지 않게) */
  .d-tbl th:nth-child(2), .d-tbl td:nth-child(2) { display: none; }
  .d-tbl th:nth-child(1) { width: 84px; } .d-tbl th:nth-child(3) { width: 42px; } .d-tbl th:nth-child(4) { width: 88px; }
  .s02__tabs button { font-size: 13px; }
}

/* 10 작업실 화면: 폰에서 읽히는 크기로 (최소 12px), 탭은 손가락 크기로 */
@media (max-width: 860px) {
  .yw__sh, .yl-card__h, .yt__th, .yc__i span small, .yk span, .yk small, .cw__pg, .cw__who i, .s10y__ex { font-size: 12px; }
  .yw__who i { font-size: 10px; }
  .yt__th, .yt__tr { padding: 0 12px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) 62px 72px; }
  .yt__th { height: 36px; }
  .yt__tr { height: 43px; }
  /* 마지막 CTA: 두 버튼 폭을 같게 (손가락 크기도 확보) */
  .s14__cta { width: 100%; }
  .s14__cta .btn { width: min(320px, 100%); }
  /* 섹션 상하 여백을 96px 로 맞춘다 (히어로 제외) */
  .s03, .s11.k2, .s14 { padding-top: 96px; padding-bottom: 96px; }
  /* 글자를 키운 만큼 화면 틀도 넉넉하게 */
  .s10y__canvas, .yw { height: 500px; }
  .s10y__tabs { gap: 20px; }
  .s10y__tabs button { padding: 0 4px 10px 0; }
  .s10y__bar { margin-bottom: 14px; }
}