/* 보이스첵 공통 스타일 — 1차 리디자인(docs/landing-proposals → 2026-10-30 적용) 랜딩 CSS + 하위 페이지 공통.
   페이지마다 다른 스타일은 public/css/site/<페이지>.css 에 둔다. */
/* ─────────────────────────────────────────────
   voicecheck 메인 v2 — 코발트 모노 · Wanted Sans
   대담함은 한 곳: 고민을 고를수록 채워지는 체크 파형
   ───────────────────────────────────────────── */
:root {
    --cobalt: #2A4BE8; --cobalt-hover: #1E3BC9; --navy: #14205C;
    --peri: #8A9EF5; --peri-soft: #DCE3FC; --tint: #EEF1FD;
    --mist: #F3F5FA; --white: #FFFFFF;
    --ink: #141B2A; --ink-2: #3E4757; --slate: #5B6478; --line: #E3E7EF; --line-2: #EDF0F5;
    --logo-mint: #12A386;
    /* VCI 유형 — 1 위험·회복 우선 → 4 확장·표현 가능, 단계가 오를수록 짙은 블루 */
    --t1: #B7C4FA; --t2: #7D93F3; --t3: #2A4BE8; --t4: #14205C;
    --font: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
    --wrap: 1160px; --gut: clamp(20px, 4vw, 40px);
    /* 글자 크기 — 1.25 비율 (2026-10-28 글자 위계)
       fine 13 작은 글씨: 고지문 · 바닥 아래 줄 · 저작권 · 결제 고지 (.fine)
       xs 14 메타: 날짜 · 시간 · 개수 · 출처 · 칩 · 범례 — 500 · slate
       s 15 보조 문장 · 라벨 · 작은 버튼 | m 17 본문 · 줄 제목 · 큰 버튼 | l 21 항목 제목 | xl 27 블록 제목
       2xl 28~36 페이지 제목 | 3xl 32~44 섹션 제목 | 4xl 36~56 표지
       굵기: 400 본문 · 500 메타 · 큰 인용 · 650 강조 · 라벨 · 버튼 · 줄 제목 · 700 제목 · 750 표지 · 핵심 숫자 */
    --fs-fine: 13px; --fs-xs: 14px; --fs-s: 15px; --fs-m: 17px; --fs-l: 21px; --fs-xl: 27px; --fs-2xl: clamp(28px, 3vw, 36px); --fs-3xl: clamp(32px, 3.8vw, 44px); --fs-4xl: clamp(36px, 4.6vw, 56px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 var(--fs-m)/1.75 var(--font); letter-spacing: -.012em; word-break: keep-all; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.band { padding: clamp(88px, 10vw, 136px) 0; }
.band.mist { background: var(--mist); }
.title { font-size: var(--fs-3xl); line-height: 1.28; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; }
.lede { margin-top: 18px; font-size: var(--fs-m); line-height: 1.8; color: var(--ink-2); max-width: 34em; }
.link { font-weight: 650; color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (hover: hover) { .link:hover { color: var(--cobalt-hover); } }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 26px; border-radius: 14px; font: 650 var(--fs-m)/1 var(--font); letter-spacing: -.02em; transition: background .15s, border-color .15s; }
.btn-main { background: var(--cobalt); color: #fff; } @media (hover: hover) { .btn-main:hover { background: var(--cobalt-hover); } }
.btn-quiet { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } @media (hover: hover) { .btn-quiet:hover { box-shadow: inset 0 0 0 1px var(--slate); } }
.tick { flex: none; width: 18px; height: 18px; color: var(--cobalt); }

/* ── 머리: 떠 있는 캡슐 ── */
.gnb { position: sticky; top: 14px; z-index: 50; margin: 14px 0 -78px; }
.gnb-in { height: 64px; padding: 0 12px 0 24px; display: flex; align-items: center; gap: 32px; border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 10px 30px rgba(20, 27, 42, .07), 0 0 0 1px rgba(20, 27, 42, .05); }
.gnb .logo img { height: 25px; }
.gnb nav { display: flex; gap: 4px; margin: 0 auto; }
.gnb nav a, .gnb .login { padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
@media (hover: hover) { .gnb nav a:hover, .gnb .login:hover { background: var(--mist); color: var(--ink); } }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; position: relative; border-radius: 999px; }
.burger span { position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 26px; }

/* ── 첫 화면 ── */
.hero { padding: calc(78px + clamp(48px, 6vw, 88px)) 0 clamp(24px, 3vw, 40px); background: linear-gradient(180deg, var(--mist), var(--white) 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hero h1 { font-size: var(--fs-4xl); line-height: 1.2; font-weight: 750; letter-spacing: -.05em; }
.hero h1 span { display: block; }
.hero .lede { margin-top: 24px; font-size: clamp(17px, 1.3vw, 19px); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-size: var(--fs-s); font-weight: 500; color: var(--ink-2); }
.facts li { display: flex; align-items: center; gap: 8px; }
.hero-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--peri-soft); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }

/* ── 누가 듣나 ── */
.coach { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.portrait { width: 112px; height: 112px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; }
.portrait img { width: 52%; }
.coach .name { margin-top: 22px; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; }
.coach .role { margin-top: 2px; font-size: var(--fs-s); color: var(--slate); }
.coach .photo-note { margin-top: 10px; font-size: var(--fs-xs); color: var(--slate); }
.nums { margin-top: 32px; display: grid; gap: 18px; }
.nums div { display: flex; align-items: baseline; gap: 12px; }
.nums strong { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; color: var(--cobalt); font-variant-numeric: tabular-nums; min-width: 3.4em; }
.nums span { font-size: var(--fs-s); color: var(--ink-2); }
.coach blockquote { font-size: var(--fs-2xl); line-height: 1.5; font-weight: 500; letter-spacing: -.035em; text-wrap: pretty; }
.history { margin-top: 40px; border-top: 1px solid var(--line); }
.history li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-s); color: var(--ink-2); }
.history li time { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.coach .link { display: inline-block; margin-top: 24px; }

/* ── 내 고민 체크 (이 페이지의 한 장면) ── */
.check { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "head list" "meter list"; column-gap: clamp(40px, 6vw, 96px); row-gap: 44px; align-items: start; }
.check-head { grid-area: head; } .check-list { grid-area: list; } .meter { grid-area: meter; }
.meter { padding: 32px; border-radius: 24px; background: var(--white); }
.meter svg { width: min(300px, 86%); height: auto; display: block; }
.meter rect { fill: var(--peri-soft); transition: fill .25s ease; }
.meter rect.on { fill: var(--cobalt); }
.meter:has(.btn:hover, .btn:focus-visible) rect.done { fill: var(--logo-mint); }
.meter p { margin-top: 22px; font-size: var(--fs-l); font-weight: 650; letter-spacing: -.03em; min-height: 1.6em; }
.meter p small { display: block; margin-top: 4px; font-size: var(--fs-s); font-weight: 400; color: var(--slate); letter-spacing: -.01em; }
.meter .btn { margin-top: 22px; }
.concerns { border-top: 1px solid var(--line); }
.concern { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: var(--fs-m); font-weight: 500; letter-spacing: -.02em; }
.concern i { flex: none; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #C9D1DF; display: grid; place-items: center; color: transparent; transition: background .15s, box-shadow .15s; }
@media (hover: hover) { .concern:hover i { box-shadow: inset 0 0 0 1.5px var(--cobalt); } }
.concern[aria-pressed="true"] i { background: var(--cobalt); box-shadow: none; color: #fff; }
.concern { align-items: flex-start; } .concern i { margin-top: 1px; }
.c-t { display: grid; gap: 8px; }
.c-axes { display: none; flex-wrap: wrap; gap: 6px; }
.concern[aria-pressed="true"] .c-axes { display: flex; }
.c-axes span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--tint); color: var(--cobalt); font-size: var(--fs-xs); font-weight: 500; letter-spacing: -.01em; }
.c-axes small { flex-basis: 100%; font-size: var(--fs-xs); font-weight: 500; color: var(--slate); line-height: 1.5; }
.criteria .mine { display: inline-flex; align-items: center; height: 24px; margin-left: 8px; padding: 0 9px; border-radius: 999px; background: var(--cobalt); color: #fff; font-size: var(--fs-xs); line-height: 1; font-weight: 650; letter-spacing: 0; vertical-align: 2px; }
.c-note { display: none; gap: 8px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--white); font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-2); }   /* 모바일 전용 — PC는 카드 안에 */
.c-note svg { flex: none; margin-top: 3px; color: var(--slate); }
.who { margin-top: 28px; font-size: var(--fs-s); color: var(--slate); line-height: 1.9; }
.who b { color: var(--ink-2); font-weight: 650; }

/* ── 상품 ── */
.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.criteria { margin-top: 44px; border-top: 1px solid var(--line); }
.criteria div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 24px; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.criteria dt { font-size: var(--fs-m); font-weight: 650; letter-spacing: -.025em; }
.criteria dt small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--slate); letter-spacing: 0; }
.criteria dd { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.7; }
.criteria dd span { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--slate); }
.criteria .pain dd span { color: var(--cobalt); font-weight: 650; }
.buy { position: sticky; top: 100px; border-radius: 24px; background: var(--white); padding: 30px; box-shadow: 0 1px 0 var(--line), 0 24px 60px rgba(42, 75, 232, .10), 0 0 0 1px var(--line); }
.buy h3 { font-size: var(--fs-l); font-weight: 700; letter-spacing: -.03em; }
.buy .kind { margin-top: 2px; font-size: var(--fs-s); color: var(--slate); }
.buy .price { margin-top: 20px; font-size: 44px; line-height: 1; font-weight: 750; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.buy .price small { margin-left: 4px; font-size: var(--fs-m); font-weight: 500; color: var(--slate); }
.buy .note { margin-top: 10px; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.65; }
.buy ul { margin: 22px 0; padding: 20px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); display: grid; gap: 10px; font-size: var(--fs-s); }
.buy li { display: flex; gap: 10px; align-items: center; }
.buy dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: var(--fs-s); margin-bottom: 24px; }
.buy dt { color: var(--slate); } .buy dd { font-weight: 650; text-align: right; }
.buy .btn { width: 100%; }
.buy .fine { margin-top: 12px; font-size: var(--fs-fine); color: var(--slate); text-align: center; }

/* ── 진행 (순서) ── */
.steps { margin-top: 56px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.steps::before { content: ""; position: absolute; left: 20px; right: 20px; top: 20px; height: 2px; background: var(--peri-soft); }
.steps li { position: relative; padding-right: 24px; }
.steps .n { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--white); box-shadow: inset 0 0 0 2px var(--peri-soft); font-weight: 700; color: var(--cobalt); }
.steps li:first-child .n { background: var(--cobalt); color: #fff; box-shadow: none; }
.steps h3 { margin-top: 20px; font-size: var(--fs-l); font-weight: 700; letter-spacing: -.03em; }
.steps p { margin-top: 8px; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.7; }
.lines { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.lines h4 { font-size: var(--fs-s); font-weight: 650; }
.lines h4 span { color: var(--slate); font-size: var(--fs-xs); font-weight: 500; margin-left: 6px; }
.lines p { margin-top: 4px; font-size: var(--fs-s); color: var(--ink-2); }

/* ── 결과 ── */
.results { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 56px); row-gap: 0; }
.fig { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.fig .frame { border-radius: 20px; background: var(--mist); padding: 20px 20px 16px; display: flex; flex-direction: column; }
.fig .radar { width: 100%; max-width: 420px; margin: auto; }
.fig figcaption { margin-top: 16px; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.7; }
.fig figcaption b { display: block; color: var(--ink); font-size: var(--fs-m); font-weight: 650; margin-bottom: 4px; }
.coach-note { margin-top: 14px; padding-left: 16px; box-shadow: inset 2px 0 0 var(--cobalt); font-size: var(--fs-s); line-height: 1.7; color: var(--ink); }
.coach-note small { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--slate); }
.shift { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 650; }
.typ { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--white); }
.typ i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; color: #fff; }
.typ i.t1 { background: var(--t1); color: var(--navy); } .typ i.t2 { background: var(--t2); color: var(--navy); }
.typ i.t3 { background: var(--t3); } .typ i.t4 { background: var(--t4); }
.radar { position: relative; }
.radar .ax rect { fill: transparent; }
.radar [role="button"] { cursor: pointer; outline: none; }
.radar [role="button"]:focus-visible rect { stroke: var(--cobalt); stroke-width: 2; }
.radar .ax text { transition: opacity .2s; }
.radar .ax text:last-of-type { font-size: 15px; }   /* 단계 글자 — 그래프가 줄어도 메타 14 아래로 가지 않게 */
.radar[data-on] .ax:not(.on) text { opacity: .38; }
.radar .axl.on { stroke: var(--cobalt); stroke-width: 2; }
.radar .dot { transition: r .15s; }
.radar .dot.on { r: 7.5; }
.rread { min-height: 3.4em; margin: 2px auto 0; max-width: 28em; font-size: var(--fs-s); line-height: 1.6; text-align: center; color: var(--ink-2); }
.rread b { color: var(--ink); font-weight: 650; }
.legend { display: flex; justify-content: center; gap: 18px; margin-top: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--slate); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 18px; border-top: 2.5px solid; } .legend i.dash { border-top-style: dashed; }
.after-note { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: var(--fs-fine); color: var(--slate); }
.intensity { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-xs); }
.intensity span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--slate); }
.intensity i { width: 9px; height: 9px; border-radius: 50%; }

/* ── 점검 다음 ── */
.track { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--peri-soft); }
.track li { padding: 22px 24px 0 0; position: relative; }
.track li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--peri); }
.track li:first-child::before { background: var(--cobalt); box-shadow: none; }
.track .n { font-size: var(--fs-xs); font-weight: 650; color: var(--cobalt); }
.track h3 { margin-top: 4px; font-size: var(--fs-l); font-weight: 700; letter-spacing: -.03em; }
.track p { margin-top: 6px; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.7; }
.track .prod { display: inline-block; margin-top: 10px; font-size: var(--fs-xs); font-weight: 500; color: var(--slate); }
.programs { margin-top: 72px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.prog { padding: 32px 28px; border-radius: 24px; display: flex; flex-direction: column; background: var(--white); }
.prog .k { margin-top: 4px; font-size: var(--fs-s); font-weight: 500; color: var(--slate); }
.prog h3 { margin-top: 0; font-size: var(--fs-xl); line-height: 1.3; font-weight: 700; letter-spacing: -.035em; }
.prog > p { margin-top: 12px; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.75; }
.prog ul { margin: 20px 0 28px; display: grid; gap: 8px; font-size: var(--fs-s); }
.prog li { display: flex; gap: 10px; }
.prog .link { margin-top: auto; align-self: flex-start; }
.prog.dark { background: var(--cobalt); color: #fff; }
.prog.dark .k, .prog.dark > p, .prog.dark ul { color: rgba(255, 255, 255, .82); }
.prog.dark .tick { color: #fff; }
.prog.dark .link { color: #fff; }
.small-print { margin-top: 28px; font-size: var(--fs-s); color: var(--ink-2); }

/* ── 후기 ── */
.voices { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); }
.voices blockquote { margin-top: 20px; font-size: var(--fs-l); line-height: 1.65; font-weight: 500; letter-spacing: -.03em; text-wrap: pretty; }
.voices .by { margin-top: 18px; font-size: var(--fs-xs); color: var(--slate); }
.voices .by b { color: var(--ink); font-weight: 650; }
.voices .typ { background: var(--mist); }

/* ── 영상 ── */
.reel-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.reel { margin-top: 40px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.clip .th { position: relative; aspect-ratio: 9 / 14; border-radius: 16px; overflow: hidden; background: var(--ink); }
.clip .th img { width: 100%; height: 100%; object-fit: cover; }
.clip .pl { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); }
.clip h3 { margin-top: 12px; font-size: var(--fs-s); line-height: 1.5; font-weight: 650; letter-spacing: -.02em; }
.clip span { display: inline-block; margin-top: 4px; font-size: var(--fs-xs); font-weight: 650; color: var(--cobalt); }

/* ── FAQ ── */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 24px 4px; font-size: var(--fs-m); font-weight: 650; letter-spacing: -.025em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; margin-left: auto; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.faq-list details[open] summary::after { transform: translateY(3px) rotate(225deg); }
.faq-list .a { padding: 0 4px 26px; font-size: var(--fs-s); line-height: 1.85; color: var(--ink-2); max-width: 40em; }
.faq-list .a p + p { margin-top: 10px; }
.faq .link { display: inline-block; margin-top: 24px; }

/* ── 마무리 ── */
.closing { background: var(--cobalt); color: #fff; padding: clamp(96px, 11vw, 144px) 0; }
.closing-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: end; }
.closing h2 { font-size: var(--fs-4xl); line-height: 1.22; font-weight: 750; letter-spacing: -.05em; }
.closing p { margin-top: 18px; font-size: var(--fs-m); color: rgba(255, 255, 255, .82); }
.closing .actions { display: grid; gap: 10px; }
.closing .btn-white { background: #fff; color: var(--cobalt); } @media (hover: hover) { .closing .btn-white:hover { background: var(--tint); } }
.closing .btn-line { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); color: #fff; } @media (hover: hover) { .closing .btn-line:hover { box-shadow: inset 0 0 0 1px #fff; } }
.closing .facts { color: rgba(255, 255, 255, .85); margin-top: 32px; }
.closing .tick { color: #fff; }
.disclaimer { padding: 28px var(--gut) 32px; font-size: var(--fs-fine); line-height: 1.75; color: var(--slate); }
.disclaimer b { color: var(--ink-2); font-weight: 650; }
.foot { background: var(--mist); padding: 56px 0 96px; font-size: var(--fs-s); color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 32px; }
.foot .logo img { height: 26px; }
.foot-brand p { margin-top: 16px; max-width: 22em; }
.foot h4 { margin-bottom: 12px; font-size: var(--fs-s); font-weight: 650; color: var(--ink); }
.foot li { padding: 3px 0; }
.foot-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: var(--fs-fine); color: var(--slate); }
.foot-bottom a + a { margin-left: 18px; }

.kakao { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 14px 20px 14px 16px; border-radius: 999px; background: #FEE500; color: #191919; font-size: var(--fs-s); font-weight: 700; box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }
.mbar { display: none; }

/* ── 반응형 ── */
@media (max-width: 1080px) {
    .gnb nav a { padding: 9px 10px; font-size: 14px; }
    .steps { grid-template-columns: 1fr; gap: 28px; }
    .steps::before { left: 20px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
    .steps li { display: grid; grid-template-columns: 42px 1fr; column-gap: 20px; padding: 0; }
    .steps .n { grid-row: span 2; }
    .steps h3 { margin-top: 8px; }
    .programs { grid-template-columns: 1fr; }
    .reel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .gnb { top: 10px; margin: 10px 0 -66px; } .gnb-in { height: 56px; padding: 0 6px 0 18px; } .gnb nav, .gnb .login { display: none; } .burger { display: block; } .gnb .logo img { height: 21px; }
    .hero { padding-top: calc(66px + 36px); }
    .hero-grid, .coach, .product, .results, .faq, .closing-in { grid-template-columns: 1fr; }
    .check { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "head" "list"; row-gap: 28px; }
    .check .meter { display: none; }
    .concern { padding: 14px 4px; }
    .fig + .fig { margin-top: 48px; }
    .track { border-top: 0; grid-template-columns: 1fr; row-gap: 28px; margin-left: 5px; padding-left: 0; box-shadow: inset 2px 0 0 var(--peri-soft); }
    .track li { padding: 0 0 0 28px; }
    .track li::before { top: 4px; left: -5px; }
    .voices { row-gap: 48px; }
    .foot-info { grid-column: 1 / -1; }
    .hero-photo { aspect-ratio: 5 / 4; }
    .hero-photo img { object-position: 50% 30%; }
    .buy { position: static; }
    .criteria div { grid-template-columns: 1fr; }
    .lines { grid-template-columns: 1fr; }
    .voices { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; }
    .kakao { bottom: 88px; padding: 14px; } .kakao span { display: none; }
    .mbar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--line); }
    .mbar div { flex: 1; min-width: 0; } .mbar small { display: block; font-size: var(--fs-xs); line-height: 1.4; color: var(--slate); } .mbar small.is-on { color: var(--cobalt); font-weight: 650; } .mbar b { display: block; font-size: var(--fs-l); line-height: 1.3; font-weight: 750; letter-spacing: -.03em; }
    .mbar .btn { height: 48px; padding: 0 20px; font-size: var(--fs-s); }
}
@media (max-width: 560px) {
    .hero .actions .btn { width: 100%; }
    .reel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); margin: 32px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 6px; }
    .clip { flex: 0 0 44%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ── 머리: '교육 과정' 펼침 메뉴 — 누른 버튼과 목록이 한 장의 흰 판으로 (실제 사이트와 같은 네 가지 + 전체) ── */
.gnb-dd { position: relative; }
.gnb-dd > button { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px 9px 14px; border: 0; border-radius: 999px; background: none; font: 500 14.5px/1.75 var(--font); color: var(--ink-2); cursor: pointer; }
.gnb-dd > button svg { transition: transform .2s; }
@media (hover: hover) { .gnb-dd > button:hover { background: var(--mist); color: var(--ink); } }
.gnb-dd > button[aria-expanded="true"] { background: var(--mist); color: var(--ink); }
.gnb-dd > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.gnb-dd > button.is-current { background: var(--tint); color: var(--cobalt); font-weight: 650; }
.dd-panel { position: absolute; z-index: 1; top: -6px; left: -6px; min-width: calc(100% + 12px); width: max-content; padding: 56px 6px 6px; border-radius: 24px; background: #fff; box-shadow: 0 16px 40px rgba(20, 27, 42, .14), 0 0 0 1px rgba(20, 27, 42, .05); }
.dd-panel ul { margin: 0; padding: 0; list-style: none; }
.dd-panel li + li { border-top: 1px solid var(--line-2); margin: 0 12px; }
.dd-panel li:first-child, .dd-panel li + li { margin: 0 12px; }
.gnb .dd-panel a { display: block; padding: 13px 6px; border-radius: 0; background: none; font-size: 15px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
@media (hover: hover) { .gnb .dd-panel a:hover { background: none; color: var(--cobalt); } }
.gnb .dd-panel a:focus-visible { background: none; color: var(--cobalt); }
@media (max-width: 1080px) { .gnb-dd > button { padding: 9px 8px 9px 10px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .gnb-dd > button svg { transition: none; } }

/* ════════ 공용 손질 (모든 시안 페이지가 이 CSS를 가져간다) — PC 1440 모습은 그대로 ════════
   --bar-h: 화면 아래 고정 바 높이 하나로 본문 끝 여백 · 앵커 멈춤 위치 · 카카오 버튼 · 알림(.toast) 자리를 같이 맞춘다.
   하단 신청 바(.mbar)가 있는 페이지만 값이 생긴다 (없으면 0). 아이폰 홈 막대 자리(safe-area)까지 더한다 */
:root { --bar-h: 0px; }
@media (max-width: 860px) {
    :root:has(body > .mbar) { --bar-h: calc(72px + env(safe-area-inset-bottom)); }
    html { scroll-padding-top: 76px; scroll-padding-bottom: var(--bar-h); }
    body { padding-bottom: var(--bar-h); }
    .kakao { bottom: calc(var(--bar-h) + 16px); }
    .toast { bottom: calc(var(--bar-h) + 16px); }
    .mbar { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
    /* 머리 캡슐 위 틈으로 본문 글자가 비치지 않게 — 캡슐 뒤에 흰 판 */
    .gnb::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -10px; height: 40px; background: linear-gradient(var(--white) 10px, rgba(255, 255, 255, 0)); pointer-events: none; }
    .gnb.is-open::before { display: none; }   /* 모바일 메뉴가 열려 화면이 어두워지면 흰 판은 치운다 */
    /* 바닥 링크 누름 면적 — 위아래 10px */
    .foot { padding-bottom: 72px; }   /* 하단 바 자리는 body 여백이 맡는다 — 카카오 버튼 자리만 */
    .foot li { padding: 0; }
    .foot li a, .foot-bottom a { display: inline-block; padding: 10px 0; }
}
/* 가로로 돌린 아이폰 — 노치 쪽 여백 (viewport-fit=cover). PC에선 env() 가 0 이라 그대로 */
.wrap { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.disclaimer { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
@media (max-width: 560px) { .band { padding: 56px 0; } }
@media (max-width: 380px) { .mbar { gap: 10px; } .mbar .btn { padding: 0 13px; } .mbar small { letter-spacing: -.025em; } }
/* 누를 때 — 터치에선 hover 가 없으니 눌림이 보이게 */
.btn, .concern, .faq-list summary, .clip { -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px); }
.btn-main:active { background: var(--cobalt-hover); }
.btn-quiet:active { background: var(--mist); }
.closing .btn-white:active { background: var(--tint); }
.closing .btn-line:active { box-shadow: inset 0 0 0 1px #fff; }
.concern:active i { box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.concern:active { background: rgba(42, 75, 232, .04); }
.faq-list summary:active { color: var(--cobalt); }
.clip:active .th { opacity: .86; }
.gnb nav a:active, .gnb .login:active, .gnb .dd-panel a:active { color: var(--cobalt); }

/* ════════ 모바일 정보 다이어트 — 랜딩 전용 (body.home 아래만, 이 CSS를 가져가는 다른 페이지엔 닿지 않는다) ════════
   PC(861px~)는 그대로. 모바일은 섹션 6개 남짓:
   · 주 버튼은 하단 신청 바 하나 — 섹션 안의 같은 신청 버튼은 뺀다
   · 자세한 설명은 제집에서: 진행 순서 → 보이스첵, 과정 → 교육 과정, 질문 → 자주 묻는 질문 (여기엔 한 줄 + 링크). 대표 이야기 · 걸어온 길은 남긴다
   · 기준 설명은 접어 두고(이름 칩 + 펼치기), 결과 그래프 둘은 탭으로 하나씩, 후기는 옆으로 넘기기 */
.crit-m, .r-tabs, .buy-more, .reel-m { display: none; }
@media (max-width: 860px) {
    .home .hero .btn-main { display: none; }
    /* 누가 듣나 — 사진 · 이름 · 경력 한 줄, 대표 이야기 · 걸어온 길(작게) + 회사 소개 */
    .home #founder { padding: 36px 0 40px; }
    .home #founder .coach { gap: 14px; }
    .home #founder .coach > div:first-child { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; }
    .home #founder .portrait { grid-row: span 2; width: 56px; height: 56px; }
    .home #founder .photo-note, .home #founder .nums div + div { display: none; }
    /* 대표 이야기 · 걸어온 길은 모바일에서도 남긴다 — 이 서비스의 신뢰는 '누가 듣나'에서 나온다 (사용자 요청 2026-10-28) */
    .home #founder blockquote { margin-top: 18px; font-size: var(--fs-l); line-height: 1.6; font-weight: 500; letter-spacing: -.03em; }
    .home #founder .history { margin-top: 18px; }
    .home #founder .history li { grid-template-columns: 52px 1fr; gap: 12px; padding: 12px 0; }
    .home #founder .coach .link { margin-top: 18px; }
    .home #founder .name { margin-top: 0; font-size: var(--fs-l); line-height: 1.35; }
    .home #founder .role { margin-top: 0; line-height: 1.5; }
    .home #founder .nums { grid-column: 1 / -1; margin-top: 16px; }
    .home #founder .nums div { gap: 10px; }
    .home #founder .nums strong { min-width: 0; font-size: var(--fs-l); }
    /* 내 고민 체크 — 대상 설명은 리드 문장이 이미 말한다. 여덟 고민은 2열 선택 카드 (한 줄씩 늘어놓으면 설문지처럼 길다).
       고르면 카드가 코발트로 채워진다 — PC 파형 막대가 채워지는 것과 같은 말 */
    .home #for-you .who { display: none; }
    .home .concerns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 0; }
    .home .concern { height: 100%; gap: 8px; padding: 13px 12px 14px; border: 0; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
        font-size: var(--fs-s); line-height: 1.45; word-break: keep-all; transition: background .15s, color .15s, box-shadow .15s; }
    .home .concern i { width: 20px; height: 20px; border-radius: 6px; }
    .home .concern i svg { width: 12px; height: 12px; }
    .home .concern[aria-pressed="true"] { background: var(--cobalt); color: #fff; box-shadow: none; }
    .home .concern[aria-pressed="true"] i { background: #fff; color: var(--cobalt); }
    /* 고민에 붙는 주의 문구(성대 결절·수술)는 카드 안이 아니라 카드 아래 한 줄로 — 카드 안에서 펼치면 옆 카드까지 같이 길어진다 */
    .home .concern .c-axes { display: none; }
    .home .concerns:has(> .concern:nth-child(8)[aria-pressed="true"]) ~ .c-note[data-i="7"] { display: flex; }
    .home .concern:active { background: var(--tint); }
    .home .concern[aria-pressed="true"]:active { background: var(--cobalt); }
    /* 상품 — 다섯 기준은 이름 칩, 바로 아래 설명 칸은 늘 열려 있다. 칩을 누르면 그 기준의 뜻으로 바뀐다 (결과 그래프의 '항목을 누르면 단계 뜻'과 같은 방식).
       채운 칩 = 지금 보는 기준, 점 = 고른 고민과 이어진 기준. 이어진 고민은 설명 칸에 문장으로 */
    .home #crit { display: none; }
    .home .crit-m { display: block; margin-top: 28px; }
    .home .cm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .home .cm-chips button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--mist); font-size: var(--fs-s); font-weight: 650; letter-spacing: -.02em; color: var(--ink); transition: background .15s, color .15s; }
    .home .cm-chips button.is-mine { background: var(--tint); color: var(--cobalt); }
    .home .cm-chips button.is-mine::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .home .cm-chips button[aria-pressed="true"] { background: var(--cobalt); color: #fff; }
    .home .cm-key { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: var(--fs-xs); color: var(--slate); }
    .home .cm-key[hidden] { display: none; }
    .home .cm-key i { width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); }
    .home .cm-panel { margin-top: 12px; padding: 18px 20px; border-radius: 18px; background: var(--mist); }
    .home .cm-panel h3 { font-size: var(--fs-m); font-weight: 650; letter-spacing: -.02em; }
    .home .cm-panel p { margin-top: 4px; font-size: var(--fs-s); line-height: 1.65; color: var(--ink-2); }
    .home .cm-panel .cm-sub { margin-top: 8px; font-size: var(--fs-xs); color: var(--slate); }
    .home .cm-panel .cm-mine { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.6; color: var(--ink); }
    .home .cm-panel .cm-mine .tick { width: 16px; height: 16px; margin-top: 2px; }
    .home .cm-panel .cm-mine b { font-weight: 650; color: var(--cobalt); }
    /* 리드 문장은 핵심 한 문장만 (빠진 문장의 내용은 바로 아래 칩 · 탭이 보여 준다) */
    .home .lede .m-cut { display: none; }
    /* 상품 카드 — 이름과 금액을 한 줄에, 설명 문장은 빼고(다시 받으면 비교는 결과 섹션의 '재점검 비교' 탭), 사실 네 줄은 촘촘히 */
    .home .buy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: end; padding: 22px 22px 20px; }
    .home .buy > * { grid-column: 1 / -1; }
    .home .buy h3 { grid-column: 1; grid-row: 1; }
    .home .buy .kind { grid-column: 1; grid-row: 2; }
    .home .buy .price { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 34px; }
    .home .buy .note, .home .buy ul, .home .buy > .btn { display: none; }
    .home .buy dl { margin: 16px 0 0; padding-top: 14px; gap: 6px 16px; border-top: 1px solid var(--line-2); }
    .home .buy-more { display: inline-block; justify-self: start; margin-top: 12px; padding: 8px 0; }
    .home .buy .fine { margin-top: 10px; text-align: left; }
    /* 진행 순서 — 상품 카드의 한 줄(녹음 · 결과 · 가입) + 보이스첵 링크가 대신한다 */
    .home #process { display: none; }
    /* 결과 — 최초 점검 / 재점검 비교를 탭으로 하나씩 (바탕은 앞뒤 섹션과 번갈아 연회색) */
    .home #result { background: var(--mist); }
    .home #result .fig .frame { background: var(--white); }
    .home #result .typ { background: var(--mist); }
    .home .r-tabs { display: flex; gap: 4px; margin-top: 28px; padding: 4px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
    .home .r-tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 11px; background: none; font-size: var(--fs-s); font-weight: 650; color: var(--slate); }
    .home .r-tabs button[aria-selected="true"] { background: var(--cobalt); color: #fff; }
    .home .r-tabs button:focus-visible { outline-offset: 2px; }
    .home .results { margin-top: 14px; }
    .home .results .fig.is-off { display: none; }
    .home .fig + .fig { margin-top: 0; }
    .home .fig figcaption b { display: none; }
    .home .fig figcaption { margin-top: 12px; }
    .home #rf-0 figcaption { display: none; }   /* 최초 점검 설명 한 줄은 리드 문장과 같은 말 — 재점검 비교 쪽 설명은 남긴다 (리드에서 뺀 비교 이야기를 여기서 한다) */
    .home #result .intensity { display: none; }
    /* 그래프 글자 — 휴대폰 폭에서 13px 아래로 줄지 않게, 항목 누름 면적도 키운다 */
    .home #result .fig .frame { padding: 16px 12px 12px; }
    .home .radar .ax text:first-of-type { font-size: 21px; }
    .home .radar .ax text:last-of-type { font-size: 19.5px; transform: translateY(5px); }
    .home .radar .ax rect { transform-box: fill-box; transform-origin: center; transform: scale(1.1, 1.4); }
    .home #result .after-note { margin-top: 20px; }
    /* 점검 다음 — 네 단계는 PC처럼 가로 한 줄(이름만), 과정은 이름 + 링크 카드 (자세한 건 교육 과정 페이지) */
    .home #journey { background: var(--white); }
    .home .track { margin: 36px 0 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; border-top: 2px solid var(--peri-soft); box-shadow: none; }
    .home .track li { padding: 16px 6px 0 0; }
    .home .track li::before { top: -7px; left: 0; }
    .home .track .n, .home .track p, .home .track .prod { display: none; }
    .home .track h3 { margin-top: 0; font-size: var(--fs-s); line-height: 1.45; }
    .home .programs { margin-top: 32px; gap: 10px; }
    .home .prog { position: relative; padding: 20px 22px; border-radius: 18px; background: var(--mist); }
    .home .prog > p:not(.k), .home .prog ul { display: none; }
    .home .prog h3 { margin-top: 0; font-size: var(--fs-l); }
    .home .prog .link { margin-top: 10px; padding: 4px 0; }
    .home .prog .link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
    .home .prog.dark { background: var(--cobalt); }
    .home .small-print { display: none; }
    /* 후기 — 쌓지 않고 옆으로 넘기기 (다음 카드 끝이 보인다) */
    .home #voices { background: var(--mist); }
    .home .voices { display: flex; gap: 12px; margin: 32px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); overscroll-behavior-x: contain; }
    .home .voices figure { flex: 0 0 min(84%, 400px); display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 22px; background: var(--white); scroll-snap-align: start; }
    .home .voices blockquote { margin-top: 16px; font-size: var(--fs-m); line-height: 1.7; }
    .home .voices .by { margin-top: auto; padding-top: 16px; }
    .home .voices:focus-visible { outline-offset: -2px; border-radius: 22px; }
    /* 영상 — 모바일에선 뺀다 (PC 그대로) */
    /* 영상 — 카드는 빼고, 그 자리에 채널 링크 한 줄만 (채널은 신뢰 자산) */
    .home #videos { padding: 0 0 44px; }
    .home #videos .reel-head, .home #videos .reel { display: none; }
    .home .reel-m { display: inline-block; padding: 10px 0; font-size: var(--fs-s); }
    /* 자주 묻는 질문 — 한 줄 + 전체 질문 링크 */
    .home #faq { padding: 56px 0; }
    .home #faq .faq-list { display: none; }
    .home #faq .lede { margin-top: 8px; }
    .home #faq .link { margin-top: 8px; padding: 8px 0; }
    /* 마무리 — 신청은 하단 바, 여기엔 기관 문의만. 사실 세 줄은 첫 화면과 하단 바가 이미 말한다 */
    .home .closing { padding: 72px 0; }
    .home .closing .btn-white, .home .closing .facts { display: none; }
}
@media (prefers-reduced-motion: reduce) { .home .cm-chips button { transition: none; } }

/* 모바일 누르는 자리 44px — 보이는 모양 · 자리는 그대로 (2026-10-28 마무리 점검) */
.gnb .logo { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 860px) {
    .foot-brand .logo { display: inline-flex; align-items: center; min-height: 44px; }
    .home #founder .coach .link { padding-block: 7px; margin-top: 11px; margin-bottom: -7px; }
}

/* ════════ 하위 페이지 공통 ════════ */
[hidden] { display: none !important; }
:root { --i0: #D9473A; --i1: #E2872F; --i2: #D9A92B; --i3: #3E9D6A; --field: #CDD4E1; --err: #C8322B; }
.gnb nav a[aria-current="page"] { background: var(--tint); color: var(--cobalt); font-weight: 650; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: var(--fs-xs); color: var(--slate); }
.crumb a:hover { color: var(--ink); }
.crumb [aria-current]::before, .crumb a + a::before { content: "›"; margin-right: 8px; color: #A3ABBB; }
/* 페이지 머리 — 랜딩 첫 화면과 같은 위치에서 시작 */
.p-head { padding: calc(78px + clamp(48px, 6vw, 88px)) 0 clamp(56px, 7vw, 96px); background: linear-gradient(180deg, var(--mist), var(--white) 80%); }
.p-head h1 { font-size: var(--fs-4xl); line-height: 1.2; font-weight: 750; letter-spacing: -.05em; text-wrap: balance; }
.p-head .lede { margin-top: 20px; font-size: clamp(17px, 1.3vw, 19px); }
.p-head-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: end; }
.band.tight { padding: clamp(64px, 7vw, 96px) 0; }
.sec-title { font-size: var(--fs-2xl); line-height: 1.3; font-weight: 700; letter-spacing: -.04em; }
.note { font-size: var(--fs-s); color: var(--slate); }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.closing :focus-visible, .first :focus-visible { outline-color: #fff; }
@media (max-width: 860px) { .p-head { padding-top: calc(66px + 36px); } .p-head-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .crumb a { display: inline-block; padding: 10px; margin: -10px; } }   /* 누르는 자리 44px 높이 — 보이는 자리는 그대로 */

/* ════════ 실제 사이트 공통 (2026-10-30 적용) ════════ */
/* 로고 — img 의 width·height 속성은 자리 잡기용, 실제 크기는 위의 height 로 (모바일 21px 에서 찌그러지지 않게) */
.logo img { width: auto; }
/* Livewire 로딩 버튼 · 숨김 — 보일러플레이트 규칙(d-none 토글) */
.d-none { display: none !important; }
.spin { display: inline-block; width: 1em; height: 1em; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vc-spin .7s linear infinite; vertical-align: -2px; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 1.6s; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* 알림 띠 (세션 메시지) */
.flash { position: fixed; left: 50%; top: 92px; z-index: 70; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); padding: 14px 20px; border-radius: 14px; background: var(--ink); color: #fff; font-size: var(--fs-s); line-height: 1.5; box-shadow: 0 14px 34px rgba(20, 27, 42, .22); animation: flash-in .25s ease-out; }
.flash.is-error { background: var(--err); }
@keyframes flash-in { from { opacity: 0; transform: translate(-50%, -8px); } }
/* 입력 오류 */
.field-err { margin-top: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--err); }
/* 페이지 번호 (목록) */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.pager a:hover { background: var(--tint); color: var(--cobalt); }
.pager [aria-current="page"] { background: var(--cobalt); color: #fff; }
.pager .is-off { color: #A3ABBB; }
/* ════════ 음성 플레이어 · 녹음기 (js/voice.js 가 그리는 마크업) ════════
   voice.js 는 운영 화면(Tabler)과 같이 쓰므로 마크업 안의 Tabler 보조 클래스를 여기서 플레이어 · 녹음기 안에서만 채운다 */
.vc-player { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: #fff; }
.vc-player .d-flex { display: flex; } .vc-player .align-items-center { align-items: center; } .vc-player .gap-3 { gap: 14px; }
.vc-player .flex-fill { flex: 1 1 auto; min-width: 0; } .vc-player .w-100 { width: 100%; }
.vc-player .vc-wave { min-height: 64px; cursor: pointer; }
.vc-player .vc-play { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; background: var(--cobalt); color: #fff; cursor: pointer; }
.vc-player .vc-play:hover { background: var(--cobalt-hover); }
.vc-player .vc-time { min-width: 84px; text-align: right; font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--slate); }
.vc-player.compact .vc-wave { min-height: 40px; } .vc-player.compact .vc-play { width: 36px; height: 36px; }
.vc-recorder { border: 2px dashed var(--field); border-radius: 20px; padding: 24px 20px; text-align: center; background: var(--mist); }
.vc-recorder.recording { border-color: var(--cobalt); background: var(--tint); }
.vc-recorder .fw-bold { font-weight: 650; } .vc-recorder .mt-1 { margin-top: 4px; } .vc-recorder .mt-2 { margin-top: 8px; } .vc-recorder .mt-3 { margin-top: 14px; }
.vc-recorder .mb-2 { margin-bottom: 8px; } .vc-recorder .mb-3 { margin-bottom: 14px; } .vc-recorder .w-100 { width: 100%; }
.vc-recorder .small { font-size: var(--fs-xs); } .vc-recorder .text-secondary { color: var(--slate); } .vc-recorder .text-danger { color: var(--err); } .vc-recorder .text-coral { color: var(--cobalt); }
.vc-rec-btn { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--cobalt); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(42, 75, 232, .3); cursor: pointer; transition: transform .15s ease; }
.vc-rec-btn:hover { transform: scale(1.04); }
.vc-rec-btn.stop { background: var(--ink); box-shadow: 0 8px 20px rgba(20, 27, 42, .28); }
.vc-rec-timer { font-size: 28px; font-weight: 750; font-variant-numeric: tabular-nums; }
.vc-level { height: 8px; max-width: 260px; margin: 0 auto; border-radius: 4px; background: var(--line); overflow: hidden; }
.vc-level span { display: block; width: 0; height: 100%; background: var(--cobalt); transition: width .08s linear; }
.vc-recorder .btn-outline-secondary { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 12px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--field); font: 650 var(--fs-s)/1 var(--font); color: var(--ink); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .vc-rec-btn { transition: none; } .vc-level span { transition: none; } }
@media print { .gnb, .foot, .mbar, .kakao, .disclaimer, .flash { display: none !important; } }

/* ════════ 모바일 덜어내기 (시안 _m.py, 하위 페이지 공통) — 761px 이상에는 아무 영향 없음. 동작은 js/site.js ════════
   .m-hide 모바일에서 숨김 · .m-dup 하단 바(.mbar)와 같은 버튼(860px 이하 숨김)
   .m-tg 접는 제목(<h3><span class="m-pc">제목</span><button class="m-tg" aria-expanded aria-controls>제목</button></h3>, 내용은 .m-body)
   .m-more 더 보기([data-m-fold] 안의 .m-x 를 펼침) · .m-snap 가로로 넘기는 줄 */
.m-tg, .m-more { display: none; }
@media (max-width: 860px) { .m-dup { display: none !important; } }
@media (max-width: 760px) {
    .m-hide, .m-pc { display: none !important; }
    .m-tg { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 12px 2px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
    .m-tg::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
    .m-tg[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
    .m-body:not(.is-open) { display: none !important; }
    .m-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--cobalt); font: 650 var(--fs-s)/1.3 var(--font); letter-spacing: -.01em; cursor: pointer; }
    .m-more .m-chev { transition: transform .2s; }
    .m-more[aria-expanded="true"] .m-chev { transform: rotate(180deg); }
    [data-m-fold]:not(.is-open) .m-x { display: none !important; }
    .m-snap { display: flex !important; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
    .m-snap::-webkit-scrollbar { display: none; }
    .m-snap > * { flex: 0 0 min(82%, 320px); scroll-snap-align: start; }
    .m-snap:focus-visible { outline-offset: -2px; border-radius: 0; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) { .m-snap { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .m-tg::after, .m-more .m-chev { transition: none; } }
/* 자주 묻는 질문 답 — 문단 안의 줄바꿈(결석·보강·휴강·환불 기준의 번호 소제목과 줄 등)을 그대로 보인다 */
.faq-list .a p { white-space: pre-line; }

/* 바닥글 패밀리 사이트 (2026-11-02) */
.foot-family { margin-top: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--slate); }
.foot-family > span { font-weight: 650; letter-spacing: .02em; }
.foot-family a { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 600; }
@media (hover: hover) { .foot-family a:hover { color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); } }
.foot-family + .foot-bottom { margin-top: 20px; }

/* 네이버 톡톡 상담 — 운영 설정에 네이버 톡톡 주소가 있으면 카카오톡 버튼 대신 (App\Support\Consult, 2026-11-02) */
.btn-talk { gap: 8px; background: #03C75A; color: #fff; }
@media (hover: hover) { .btn-talk:hover { background: #02B351; } }
.btn-talk svg { flex: none; }
.kakao.is-talk { background: #03C75A; color: #fff; }