/* ============================================================
   라이브 홈페이지 전용 — tokens.css(정본) · brand.css(지점값) · site.css(공통 골격) 위에 얹는다
   Craft: 에디토리얼 타이포·과감한 여백·2겹 섀도우 / Motion: .reveal / Trust: 증거밴드·안심문구
   ============================================================ */

/* ★스크롤 등장(opacity:0 → in) 은 쓰지 않는다.
   관찰자·타이머가 멈추는 환경(백그라운드 탭·일부 인앱 브라우저)에서 본문이 통째로 안 보였다.
   학부모가 여는 페이지라 «가끔 백지»는 애니메이션과 바꿀 수 없다. .reveal 은 무해한 표식으로만 남긴다. */
.reveal{opacity:1;transform:none}   /* tokens.css 의 .reveal(opacity:0) 무력화 — HTML 에서도 클래스를 뺐다 */

/* 지점값을 JS 가 실제 텍스트로 채운 뒤에는 ::before 를 끈다(중복 방지) */
[data-filled]::before{content:none!important}

/* 개원 준비 리본 — 학부모에게 «준비 중»임을 한 줄로 */
.ribbon{background:var(--ink);color:#fff;font-size:var(--fs-cap);font-weight:var(--fw-semi);
  text-align:center;padding:9px var(--s4);letter-spacing:.01em}
.ribbon b{color:var(--pink);font-weight:var(--fw-black)}

/* 상단바 로고는 홈으로 */
.topbar a.home{display:flex;align-items:center}

/* ── 히어로: 텍스트 + 실화면 ── */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:var(--s6)}}
.hero .kicker-line{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-cap);font-weight:var(--fw-black);
  letter-spacing:.12em;color:var(--accent);text-transform:uppercase;margin-bottom:var(--s4)}
.hero .kicker-line::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
h1,h2,h3,.lead,.sub,p{word-break:keep-all;overflow-wrap:anywhere}   /* 한글 어절 중간에서 끊기지 않게 */
.hero h1{font-size:clamp(2.2rem,4.3vw,3.6rem);letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
@media(max-width:720px){.hero h1{font-size:clamp(2rem,8vw,2.4rem)}}
.hero .sub b{color:var(--ink)}
.hero .ctas{margin-top:var(--s6)}
.hero .assure{margin-top:var(--s3);font-size:var(--fs-cap);color:var(--g40)}

/* 실화면 프레임 — 왜곡 없이(비율 유지) · 2겹 소프트 섀도우 */
.shot{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--g08);
  border:1px solid var(--g15);box-shadow:var(--sh-3)}
.shot img{display:block;width:100%;height:auto}
.shot .cap{position:absolute;left:12px;bottom:12px;background:rgba(26,26,26,.78);color:#fff;
  font-size:.72rem;font-weight:var(--fw-semi);padding:5px 10px;border-radius:var(--r-pill);
  backdrop-filter:blur(6px);letter-spacing:.01em}
.shot.tall{max-width:360px;margin:0 auto}
.shots-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s6);align-items:start}
@media(max-width:720px){.shots-2{grid-template-columns:1fr}}

/* ── 증거밴드 (tokens .statband 위에 라벨만 보강) ── */
.statband .l small{display:block;color:var(--g40);font-weight:var(--fw-reg);margin-top:2px}
.evidence{font-size:var(--fs-cap);color:var(--g40);margin-top:var(--s3)}

/* ── 섹션 골격 ── */
.narrow{max-width:800px}
.kicker{font-size:var(--fs-h2);font-weight:var(--fw-black);letter-spacing:var(--ls-head)}
@media(max-width:720px){.kicker{font-size:var(--fs-h3)}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center;margin-top:var(--s6)}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:var(--s5)}}
.two.flip>.txt{order:2}
@media(max-width:860px){.two.flip>.txt{order:0}}
.src{font-size:var(--fs-cap);color:var(--g40);margin-top:var(--s4)}
.soft-red{background:var(--red-soft)}

/* 공식 */
.formula{text-align:center;margin:var(--s6) 0 0;padding:var(--s6) var(--s5);border:2px solid var(--accent);
  border-radius:var(--r-xl);background:var(--white);box-shadow:var(--sh-2)}
.formula .f{font-size:var(--fs-h3);font-weight:var(--fw-black);letter-spacing:var(--ls-head);line-height:1.5}
.formula .f em{font-style:normal;color:var(--accent)}
.formula .x{color:var(--g40);margin:0 8px;font-weight:var(--fw-reg)}
.formula p{color:var(--g70);font-size:var(--fs-sm);margin:var(--s4) auto 0;max-width:46ch}
@media(max-width:620px){.formula .f{font-size:var(--fs-h4)}}

/* 실험 비교 */
.exp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s6)}
@media(max-width:620px){.exp{grid-template-columns:1fr}}
.exp>div{border-radius:var(--r-lg);padding:var(--s5);border:1px solid var(--g15);background:var(--white)}
.exp .keep{background:var(--red-soft);border-color:var(--pink)}
.exp h4{font-size:var(--fs-sm);color:var(--g70);font-weight:var(--fw-bold);margin-bottom:var(--s3)}
.exp .n{font-size:var(--fs-h2);font-weight:var(--fw-black);letter-spacing:var(--ls-display);line-height:1}
.exp .fall .n{color:var(--g40)}.exp .keep .n{color:var(--accent)}
.exp .arrow{font-size:var(--fs-lg);color:var(--g40);margin:0 6px}

/* 타임라인(배우는 순서) */
.rail{list-style:none;padding:0;margin:var(--s7) 0 0;border-left:2px solid var(--pink)}
.rail li{position:relative;padding:0 0 var(--s6) var(--s6)}
.rail li:last-child{padding-bottom:0}
.rail li::before{content:"";position:absolute;left:-9px;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:3px solid var(--white);box-shadow:0 0 0 2px var(--pink)}
.rail h3{font-size:var(--fs-h4);font-weight:var(--fw-bold)}
.rail p{color:var(--g70);margin-top:var(--s2)}
.rail .who{display:inline-block;margin-top:var(--s3);font-size:var(--fs-cap);font-weight:var(--fw-bold);
  background:var(--red-soft);color:var(--red-dark);border-radius:var(--r-pill);padding:3px 11px}

/* 등급 · 분기 */
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s5)}
@media(max-width:620px){.grades{grid-template-columns:repeat(2,1fr)}}
.gr{border:1px solid var(--g15);border-radius:var(--r-md);padding:var(--s4);text-align:center;background:var(--white)}
.gr b{display:block;font-size:var(--fs-h3);font-weight:var(--fw-black);line-height:1}
.gr span{display:block;font-size:var(--fs-cap);color:var(--g70);margin-top:var(--s2)}
.gr.on{border-color:var(--accent);background:var(--red-soft)}.gr.on b{color:var(--accent)}
.fork{border:1px solid var(--g15);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s5);background:var(--white)}
.fork .r{display:grid;grid-template-columns:130px 1fr;gap:var(--s4);padding:var(--s4) var(--s5);border-bottom:1px solid var(--g08);align-items:center}
.fork .r:last-child{border:0}
.fork .r b{font-weight:var(--fw-black);color:var(--accent)}
.fork .r span{color:var(--g70);font-size:var(--fs-sm)}
@media(max-width:620px){.fork .r{grid-template-columns:1fr;gap:var(--s1)}}

/* 숫자 스탯(다크) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s7)}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding:var(--s5) var(--s3);border-radius:var(--r-lg);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.stat b{display:block;font-size:var(--fs-h2);font-weight:var(--fw-black);letter-spacing:var(--ls-display);line-height:1;color:#fff}
.stat span{display:block;font-size:var(--fs-sm);color:rgba(255,255,255,.66);margin-top:var(--s3)}
.stat em{display:block;font-style:normal;font-size:var(--fs-cap);color:rgba(255,255,255,.4);margin-top:var(--s2)}
.dark .eyebrow{color:#FF6B85}   /* RED 의 다크배경용 밝기 보정 — 임의색 아님(대비 확보) */

/* 공간 평면 다이어그램 */
.plan{margin-top:var(--s6);border:1px solid var(--g15);border-radius:var(--r-xl);background:var(--white);padding:var(--s4);box-shadow:var(--sh-2)}
.plan svg{width:100%;height:auto;display:block}
.plan .legend{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3);font-size:var(--fs-cap);color:var(--g70)}
.plan .legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* 시간표 편성 방향 */
.tt{margin-top:var(--s5);border:1px solid var(--g15);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.tt table{margin:0}
.tt td b{font-weight:var(--fw-black)}

/* 리포트 화면 짝 */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s6)}
@media(max-width:720px){.pair{grid-template-columns:1fr}}
.pair figure{margin:0}
.pair figcaption{font-size:var(--fs-cap);color:var(--g70);margin-top:var(--s2);font-weight:var(--fw-semi)}
.habit{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--s4)}
.habit span{background:var(--g08);border-radius:var(--r-pill);padding:5px 13px;font-size:var(--fs-cap);font-weight:var(--fw-bold);color:var(--g70)}

/* FAQ */
.faq{margin-top:var(--s6);border-top:1px solid var(--g15)}
.faq details{border-bottom:1px solid var(--g15)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s5) var(--s2);font-weight:var(--fw-black);font-size:var(--fs-lg);
  display:flex;justify-content:space-between;gap:var(--s4);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:var(--fw-reg);font-size:1.4rem;line-height:1;transition:transform var(--t-base) var(--e-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 var(--s2) var(--s5);color:var(--g70);max-width:62ch}

/* 원장·개원 카드 */
.person{display:grid;grid-template-columns:120px 1fr;gap:var(--s5);align-items:center}
@media(max-width:560px){.person{grid-template-columns:1fr}}
.person .ph{width:120px;height:120px;border-radius:50%;background:var(--red-soft);display:grid;place-items:center;
  color:var(--red-dark);font-weight:var(--fw-black);font-size:var(--fs-h3);border:1px solid var(--pink)}

/* 신청 폼 */
.lead-form{margin-top:var(--s6);max-width:560px}
.f{margin-bottom:var(--s4)}
.f label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:var(--s2)}
.f input,.f select,.f textarea{width:100%;padding:14px var(--s4);border:1px solid var(--g15);border-radius:var(--r-md);
  font-family:var(--font);font-size:var(--fs-base);color:var(--ink);background:var(--white);box-shadow:var(--sh-1)}
.f input:focus,.f select:focus,.f textarea:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.f textarea{min-height:104px;resize:vertical}
.f .opt{font-weight:var(--fw-reg);color:var(--g40)}
.consent{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--fs-cap);color:var(--g70);margin:var(--s5) 0}
.consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button.cta{border:none;cursor:pointer;font-family:var(--font)}
.formmsg{margin-top:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:var(--fw-semi)}
.formmsg.ok{background:#E8F5EC;color:#146B3A}
.formmsg.err{background:var(--red-soft);color:var(--red-dark)}

/* 닫는 문장 · 푸터 */
.closing{background:var(--grad-red);color:#fff;text-align:center;padding:var(--s9) 0}
.closing p{font-size:var(--fs-h2);font-weight:var(--fw-black);letter-spacing:var(--ls-head);line-height:1.35}
@media(max-width:620px){.closing p{font-size:var(--fs-h3)}}
footer.site{background:var(--ink);color:rgba(255,255,255,.72);padding:var(--s8) 0 calc(var(--s8) + 72px);font-size:var(--fs-sm)}
footer.site img{height:23px;width:auto;display:block;margin-bottom:var(--s4)}
footer.site a{color:rgba(255,255,255,.72)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6)}
@media(max-width:720px){footer.site .cols{grid-template-columns:1fr}}
footer.site .cols b{display:block;color:#fff;margin-bottom:var(--s2)}
footer.site .legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.12);font-size:var(--fs-cap);color:rgba(255,255,255,.45)}

/* 하단 고정 CTA (tokens .bottom-cta) — 데스크톱에서는 숨긴다 */
@media(min-width:861px){.bottom-cta{display:none}}
.bottom-cta .btn-primary{border-radius:var(--r-pill)}