/* ═══════════════════════════════════════════════════════════════════════
   새 페이지를 만드는 분께 — 틀과 공통 부품 안내
   ═══════════════════════════════════════════════════════════════════════

   사이트는 늘 흰 바탕입니다(어두운 모드 전환 없음). 색은 네 가지만 씁니다.
     남색 --navy #1A264B (로고 · 진한 띠)   빨강 --red #E63346 (강조 포인트)
     카카오 노랑 --kakao #FEE500 (상담 버튼)  연회색 --soft (옅은 띠·상자 바탕)
   글꼴은 프리텐다드 한 가지(<head>에서 불러옴). 못 불러오면 기기 기본 고딕으로 보입니다.

   ① 새 페이지는 `freetalking/index.html`을 본뜹니다.
      그 파일의 머리(<head>: 설정 칸 <script>const 설정 = {…}</script>, 제목·설명·공유 그림 메타,
      프리텐다드 불러오기), 로고 줄과 메뉴(<header class="topbar">), 맨 아래(<footer>),
      떠 있는 상담 버튼(<a class="kakao-float">), 맨 밑의 "설정 반영 장치"와 "나타나는 효과"
      스크립트를 그대로 가져오고, <main> 안의 본문만 새로 씁니다.
      · <body>에는 아무것도 달지 않습니다(예전의 페이지별 띠 색 고르기는 없어졌습니다).
      · 설정 칸의 페이지주소, og:url, canonical 은 모두 `https://ohgenki.pages.dev/<주소 이름>/`
        (끝에 / 를 붙임). og:image·twitter:image 는 `https://ohgenki.pages.dev/images/share.jpg`.
      · 본문 영역은 <section class="wrap reveal">, 안쪽 폭을 좁히려면 <div class="narrow">.
        머리말은 <div class="eyebrow"><span class="label">…</span></div>.
      · 영역 바탕: 아무것도 안 달면 흰색, class="soft"(또는 예전 이름 tint)면 연회색 띠,
        class="navy"면 남색 띠(글자는 흰색으로 저절로 바뀜). 띠는 화면 양끝까지 닿습니다.
          <section class="wrap reveal navy"><div class="narrow">…</div></section>

   ② 로고 줄 + 메뉴 — 아래 블록을 글자 하나 바꾸지 않고 복사합니다(열두 페이지의 메뉴가 같아야 함).
      지금 페이지 표시: 그 페이지의 <a …>에 class="now"를 달고, 하위 항목 페이지라면
      그 묶음의 <button …>에도 class="now"를 답니다(예: /fee/ 는 수강료 <a>와 고객지원 <button>).

   <a id="top"></a>
   <header class="topbar">
     <div class="wrap">
       <a class="brand-logo" href="/" aria-label="오겡끼 홈스쿨 — 홈으로">
         <img src="/images/logo-wide.png" alt="오겡끼 홈스쿨" width="560" height="92"
              onerror="this.closest('.brand-logo').classList.add('no-img')">
         <b class="brand-fallback" aria-hidden="true">오겡끼 홈스쿨</b>
       </a>
       <button class="menu-btn" type="button" aria-label="메뉴 열기" onclick="this.closest('.topbar').classList.toggle('open')">메뉴</button>
       <nav aria-label="사이트 메뉴">
         <a href="/">홈</a>
         <a href="/company/">회사 소개</a>
         <a href="/book/">교재·인강</a>
         <div class="menu-group">
           <button type="button" aria-expanded="false" aria-controls="menu-lessons">수업 소개</button>
           <div class="menu-list" id="menu-lessons">
             <a href="/hanip/">한입 일본어란?</a>
             <a href="/speaking/">말하기 교실</a>
             <a href="/basic/">1:1 기초회화</a>
             <a href="/freetalking/">프리토킹</a>
             <a href="/jlpt/">JLPT</a>
           </div>
         </div>
         <div class="menu-group">
           <button type="button" aria-expanded="false" aria-controls="menu-programs">프로그램</button>
           <div class="menu-list" id="menu-programs">
             <a href="/challenge/">100일 챌린지</a>
             <a href="/hiragana/">히라가나</a>
           </div>
         </div>
         <div class="menu-group">
           <button type="button" aria-expanded="false" aria-controls="menu-support">고객지원</button>
           <div class="menu-list" id="menu-support">
             <a href="/fee/">수강료</a>
             <a href="/terms/">규정 및 약관</a>
           </div>
         </div>
       </nav>
     </div>
     <script>
     // 묶음 메뉴 — 묶음 단추를 누르면 하위 항목이 펼쳐지고, 다시 누르거나 Esc·바깥 클릭·초점 이탈로 접힙니다.
     // 마우스로 올렸을 때 펼쳐지는 것은 style.css가 맡습니다. 휴대폰 폭(760px 이하)에서는 "메뉴" 단추 안에
     // 하위 항목이 늘 펼쳐져 있어 묶음 단추는 제목 구실만 합니다. 이 아래는 고치지 않으셔도 됩니다.
     (function(){
       var nav=document.querySelector('.topbar nav'); if(!nav) return;
       var 폰=window.matchMedia('(max-width:760px)');
       var 단추들=nav.querySelectorAll('.menu-group > button');
       function 접기(){ 단추들.forEach(function(b){ b.setAttribute('aria-expanded', 폰.matches ? 'true' : 'false'); }); }
       접기();
       if(폰.addEventListener) 폰.addEventListener('change', 접기); else 폰.addListener(접기);
       단추들.forEach(function(b){
         b.addEventListener('click', function(){
           if(폰.matches) return;
           var 열려있음 = b.getAttribute('aria-expanded')==='true';
           접기(); if(!열려있음) b.setAttribute('aria-expanded','true');
         });
       });
       nav.addEventListener('keydown', function(e){
         if(e.key!=='Escape' || 폰.matches) return;
         var g=e.target.closest('.menu-group'); if(!g) return;
         var b=g.querySelector('button'); if(b.getAttribute('aria-expanded')!=='true') return;
         접기(); b.focus(); e.preventDefault();
       });
       nav.addEventListener('focusout', function(e){
         if(폰.matches) return;
         var g=e.target.closest('.menu-group'); if(!g) return;
         if(!e.relatedTarget || !g.contains(e.relatedTarget)) 접기();
       });
       document.addEventListener('click', function(e){ if(!폰.matches && !nav.contains(e.target)) 접기(); });
     })();
     </script>
   </header>

   ③ 맨 아래 + 떠 있는 상담 버튼 — 둘째 줄(오겡끼 홈스쿨 · …)만 페이지 이름으로 바꿉니다.
      링크 네 개와 떠 있는 버튼은 그대로.

   <footer>
     <div class="wrap">
       <img class="foot-logo" src="/images/logo-stack.png" alt="오겡끼 홈스쿨" width="309" height="260" loading="lazy" onerror="this.remove()">
       오겡끼 홈스쿨 · (이 페이지 이름)<br>
       <a href="https://cafe.naver.com/ohgenki" target="_blank" rel="noopener">수강생 찐 후기 보러 가기</a>
       <div class="foot-links">
         <a href="https://pf.kakao.com/_DQsMK/chat" target="_blank" rel="noopener">카카오톡 상담</a>
         <a href="https://www.instagram.com/ohgenki_homeschool" target="_blank" rel="noopener">인스타그램</a>
         <a href="https://www.youtube.com/@ohgenkihomeschool" target="_blank" rel="noopener">유튜브</a>
         <a href="https://cafe.naver.com/ohgenki" target="_blank" rel="noopener">네이버 카페</a>
       </div>
     </div>
   </footer>
   <a class="kakao-float" href="https://pf.kakao.com/_DQsMK/chat" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3.2c-5.3 0-9.6 3.4-9.6 7.6 0 2.7 1.8 5.1 4.5 6.4l-1 3.6c-.1.4.3.7.6.5l4.3-2.8c.4 0 .8.1 1.2.1 5.3 0 9.6-3.4 9.6-7.6S17.3 3.2 12 3.2z"/></svg><span>카카오톡 상담</span></a>

   ④ 새 부품 (이 파일 맨 끝 "새 디자인 부품" 절에 정의. 휴대폰 폭에서 가로로 넘치지 않습니다.
      남색 띠(.navy) 안에 넣어도 저절로 맞는 색이 됩니다.)

      .btn-kakao — 큰 노란 카카오톡 상담 버튼(말풍선 그림이 앞에 붙음). 더 크게는 .btn-lg 를 함께.
        <a class="btn btn-kakao btn-lg" href="https://pf.kakao.com/_DQsMK/chat" target="_blank" rel="noopener">카카오톡으로 상담하기</a>

      .hero — 첫 화면. 글 왼쪽, 아리 그림 오른쪽(휴대폰은 위아래). 아리 뒤에 동그란 색면이 깔립니다.
        <section class="hero wrap"><div class="hero-grid">
          <div class="hero-text"><div class="kicker">…</div><h1>…</h1><p class="lead">…</p><div class="cta-row">…</div></div>
          <div class="hero-art ari-plain ari-hero"><img class="ari" src="/images/ari-hero.png" alt="…"></div>
        </div></section>
        남색 첫 화면은 <section class="hero wrap navy">.

      .worry-answer — "이런 고민 ✕ / 오겡끼의 답 ✓" 두 상자(휴대폰은 위아래로 쌓임).
        <div class="worry-answer">
          <div class="worry"><h3>이런 고민 있으셨죠?</h3><ul><li>…</li><li>…</li></ul></div>
          <div class="answer"><h3>오겡끼는 이렇게 해요</h3><ul><li>…</li><li>…</li></ul></div>
        </div>

      ol.bigsteps — 큰 번호 동그라미가 붙는 순서 안내(넓은 화면은 가로, 휴대폰은 세로).
        <ol class="bigsteps"><li><b>상담</b>카카오톡으로 지금 실력과 목표를 이야기해요.</li>…</ol>

      .stats — 숫자를 크게 보여주는 칸(이미 사이트에 있는 숫자만 씁니다).
        <div class="stats">
          <div class="stat-tile"><b class="stat-num">88<small>%</small></b><span class="stat-label">유지율</span></div>
          …
        </div>

      .review-cards — 테두리·그림자가 있는 후기 카드. 그림(후기 캡처)이든 글이든 넣을 수 있습니다.
        <div class="review-cards">
          <figure class="review-card"><img src="/images/review-1.png" alt="…"><figcaption>…</figcaption></figure>
          <div class="review-card"><p class="quote">…</p><p class="who">…</p></div>
        </div>

      .cta-band — 마무리 상담 띠(남색 영역 안 가운데 정렬 묶음). 노란 버튼과 함께 씁니다.
        <section class="wrap reveal navy"><div class="cta-band">
          <img class="ari" src="/images/ari-hello.png" alt=""><h2>…</h2><p>…</p>
          <a class="btn btn-kakao btn-lg" …>카카오톡으로 상담하기</a></div></section>

      .center — 글 가운데 정렬.  .accent — 빨강 강조 글자.  .hl — 노란 밑줄 강조.

   ⑤ 예전부터 있던 부품 (모두 새 모양으로 다듬어져 있습니다)

      .chips — 짧은 문구 여러 개를 나란히(옛 사이트의 "원 안 문구"). .chips.round 면 남색 동그라미.
        <ul class="chips"><li>담임제</li><li>매일 과제</li><li>월말 평가</li></ul>

      .vs — 둘을 견주는 칸. 두 번째 칸에 class="ours"를 달면 우리 쪽으로 강조됩니다.
        <div class="vs"><div><h3>과외·학원</h3><ul><li>…</li></ul></div>
                        <div class="ours"><h3>오겡끼</h3><ul><li>…</li></ul></div></div>

      .flow — →로 이어지는 순서 띠(휴대폰에서는 ↓로 세로 쌓임).
        <ol class="flow"><li>상담</li><li>레벨 확인</li><li>수업 시작</li></ol>

      .pics — 그림 여러 장 묶음(후기·미리보기). 칸 최소 폭은 style="--pic-min:160px"로 조절.
        <div class="pics"><figure><img src="/images/hanip-02.jpg" alt="…"><figcaption>…</figcaption></figure>…</div>

      .video — 16:9 영상 틀.
        <div class="video"><iframe src="https://www.youtube.com/embed/…" title="…" allowfullscreen></iframe></div>

      .doc + .doc-links — 바깥 문서 틀(높이는 style="--doc-h:80vh"). 아래 줄에 "새 창에서 열기".
        <div class="doc"><iframe src="…" title="…"></iframe>
          <div class="doc-links"><a href="…" target="_blank" rel="noopener">새 창에서 열기 ↗</a></div></div>

      .fee-wrap > table.fee — 금액 표. 기본은 옆으로 미는 표. .fee-wrap.stack 을 달고 각 <td>에
        data-th="열 이름"을 적으면 휴대폰 폭에서 줄줄이 쌓입니다. 숫자 칸은 <td class="num">.
        <div class="fee-wrap"><table class="fee"><thead><tr><th>과정</th><th>수강료</th></tr></thead>
          <tbody><tr><td>…</td><td class="num">…원</td></tr></tbody></table></div>

      그 밖에 .cards/.card(.card-line), ol.steps, .kv, .note-box, .prose, details(접기),
      .btn .btn-primary(빨강) .btn-ghost(테두리), .stat/.stat-cap, .final(남색 마무리 상자)도 그대로 씁니다.

   ⑥ 색은 아래 :root 의 새 색 이름(남색 --navy, 빨강 --red, 카카오 노랑 --kakao, 연노랑 --kakao-soft,
      연회색 --soft 등)만 씁니다. 예전 파스텔 색 이름은 모두 지웠습니다.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:only light;
  /* ── 새 색 ── */
  --navy:#1A264B; --navy-2:#2A3A6B; --navy-deep:#121B38;
  --red:#E63346; --red-strong:#D01F35; --red-ink:#C21A2F; --red-soft:#FDECEE;
  --kakao:#FEE500; --kakao-ink:#191600; --kakao-hover:#F5DC00; --kakao-soft:#FFF3A3;
  --white:#FFFFFF; --soft:#F4F6FA; --soft-2:#EAEEF5;
  /* 글꼴 */
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --font-ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,var(--font);

  /* ── 공통 이름 (부품들이 쓰는 이름) ── */
  --paper:#FFFFFF; --card:#FFFFFF; --card-2:var(--soft);
  --ink:#1A264B; --ink-2:#465071; --ink-3:#5F6885;
  --line:#E3E7EF; --line-2:#CDD3E0;
  --brand:var(--red);            /* 포인트 (색면, 큰 글자) */
  --brand-strong:var(--red-strong); /* 빨강 버튼 바탕 (흰 글자와 4.5:1 이상) */
  --brand-ink:var(--red-ink);    /* 흰 바탕 위 빨강 글자 (4.5:1 이상) */
  --on-brand:#FFFFFF;
  --shadow:0 1px 2px rgba(26,38,75,.06),0 10px 28px -12px rgba(26,38,75,.18);
  --shadow-lift:0 2px 4px rgba(26,38,75,.07),0 18px 40px -16px rgba(26,38,75,.28);
  --r:18px; --r-sm:12px;

  --card-line:var(--line);       /* .card-line 카드 윗선 기본색 */
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth;background:#FFFFFF}
body{
  background:#FFFFFF; color:var(--ink);
  font-family:var(--font);
  font-weight:400; line-height:1.75; -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:700px;margin:0 auto}
section{padding:84px 0}
/* 영역마다 위아래 숨 쉴 자리. (.wrap이 section의 여백을 눌러 0으로 만들던 것을 되돌림) */
section.wrap{padding-top:clamp(48px,7vw,80px);padding-bottom:clamp(48px,7vw,80px)}
h1,h2,h3{font-family:var(--font);color:var(--ink);
  font-weight:800;text-wrap:balance;line-height:1.35;letter-spacing:-.02em;word-break:keep-all}
h2{font-size:clamp(25px,3.4vw,36px);margin-bottom:14px}
h3{font-size:19px;font-weight:700;margin-bottom:8px;line-height:1.45;letter-spacing:-.01em}
p{color:var(--ink-2)}
a{color:inherit}
b,strong{font-weight:700}

/* 머리말 — 빨강 꼬리표 */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.eyebrow .label{display:inline-block;font-family:var(--font);font-size:13px;font-weight:700;
  color:var(--brand-ink);background:var(--red-soft);letter-spacing:.06em;white-space:nowrap;
  padding:5px 13px;border-radius:999px;line-height:1.5}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;background:#FFFFFF;border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px -8px rgba(26,38,75,.18)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{font-family:var(--font);font-weight:800;font-size:16px;letter-spacing:-.01em}
.brand small{font-family:var(--font);font-weight:500;font-size:11px;color:var(--ink-3);letter-spacing:.1em;margin-left:8px}
.topbar nav{display:flex;gap:22px;font-size:14.5px;font-weight:600;color:var(--ink)}
.topbar nav a{text-decoration:none}
.topbar nav a:hover{color:var(--brand-ink)}
@media(max-width:760px){.topbar nav{display:none}}
/* 페이지 안 `#` 이동이 상단 바 아래에서 멈추게 한다(상단 바가 붙박이라 그냥 두면 제목이 바 뒤로 들어간다).
   좁은 화면은 메뉴가 접혀 상단 바가 한 줄 → 112px. 넓은 화면은 말하기 교실에만 둘째 줄 메뉴가 있어 → 140px. */
html{scroll-padding-top:112px}
@media(min-width:761px){html{scroll-padding-top:140px}}

/* notice — 맨 위 알림 띠 */
.notice{background:var(--navy);color:#FFFFFF;text-align:center;font-size:14px;font-weight:500;padding:11px 24px;letter-spacing:.01em}
.notice b{font-weight:700;color:var(--kakao)}

/* hero — 첫 화면 */
.hero{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(48px,7vw,84px);border-top:none}
section.hero{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(48px,7vw,84px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:28px}}
.hero .kicker{display:inline-block;font-size:14px;letter-spacing:.06em;color:var(--brand-ink);font-weight:800;margin-bottom:16px}
.hero h1{font-size:clamp(30px,4.9vw,54px);line-height:1.25;margin-bottom:22px;max-width:20ch;word-break:keep-all;font-weight:900;letter-spacing:-.03em}
.hero h1 .strike{white-space:nowrap;color:var(--ink-3);font-weight:700;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--brand)}
.speak{position:relative;display:inline-block;color:var(--brand);white-space:nowrap}
.speak svg{position:absolute;left:50%;transform:translateX(-50%);bottom:-5px;width:126%;min-width:54px;height:10px}
.speak path{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.4s .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero p.lead{font-size:clamp(16px,1.6vw,18px);max-width:44ch;margin-bottom:30px}
/* 아리 뒤 동그란 색면 */
.hero-art{position:relative;isolation:isolate}
.hero-art::before{content:"";position:absolute;z-index:-1;left:50%;top:52%;width:92%;aspect-ratio:1/1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle closest-side,var(--red-soft) 0 86%,transparent 86.5%),
             radial-gradient(circle closest-side,transparent 0 95%,var(--soft-2) 95.5% 98%,transparent 98.5%)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:999px;
  font-family:var(--font);font-size:15px;font-weight:700;text-decoration:none;line-height:1.4;text-align:center;
  border:1.5px solid transparent;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn-primary{background:var(--brand-strong);color:var(--on-brand);box-shadow:var(--shadow)}
.btn-primary:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--soft)}
.btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts div{background:var(--card);padding:20px 18px}
.facts dt{font-size:12px;letter-spacing:.08em;color:var(--ink-3);margin-bottom:6px}
.facts dd{font-family:var(--font);font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
@media(max-width:700px){.facts{grid-template-columns:repeat(2,1fr)}}

/* problem quotes */
.quotes{display:grid;gap:14px;margin-top:30px}
.quotes li{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 22px 18px 26px;font-family:var(--font);font-weight:600;font-size:16.5px;color:var(--ink);position:relative;box-shadow:var(--shadow)}
.quotes li::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;background:var(--brand);border-radius:0 4px 4px 0}
.verdict{margin-top:34px;font-family:var(--font);font-weight:800;font-size:clamp(20px,2.8vw,27px);
  line-height:1.55;color:var(--ink);text-wrap:balance;letter-spacing:-.02em}
.verdict em{font-style:normal;color:var(--brand-ink);box-shadow:inset 0 -.38em 0 var(--kakao-soft)}

/* letter */
.letter{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,5vw,48px);box-shadow:var(--shadow)}
.letter p{font-family:var(--font);font-size:16.5px;color:var(--ink-2);margin-bottom:18px;line-height:1.9}
.letter p:last-of-type{margin-bottom:0}
.letter strong{color:var(--ink);font-weight:700}
.sign{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}
.seal{width:44px;height:44px;flex:none;display:block}
.sign b{font-family:var(--font);font-weight:800;font-size:15px;display:block;color:var(--ink)}
.sign span{font-size:12.5px;color:var(--ink-3)}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
@media(max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow);transition:transform .2s ease}
.pillar:hover{transform:translateY(-2px)}
.pillar .jp{font-family:var(--font);font-size:12.5px;font-weight:700;color:var(--brand-ink);letter-spacing:.08em;margin-bottom:12px}
.pillar p{font-size:15px;line-height:1.75}

/* benefits table */
.bene{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.bene table{width:100%;border-collapse:collapse;font-size:15px}
.bene td{padding:15px 20px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink)}
.bene tr:last-child td{border-bottom:none}
.bene td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.bene .total td{background:var(--navy);font-weight:800;color:#FFFFFF;font-family:var(--font);font-size:16.5px}
.bene .total td:last-child{color:var(--kakao)}
.bene .free td:last-child{color:var(--brand-ink);font-weight:700}

/* steps (div.step) */
.steps{counter-reset:s;display:grid;gap:0;margin-top:8px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:24px 4px;border-bottom:1px solid var(--line);align-items:start}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--font);font-size:28px;font-weight:900;color:var(--brand);
  font-variant-numeric:tabular-nums;line-height:1.2}
.step p{font-size:15px}
@media(max-width:600px){.step{grid-template-columns:44px 1fr;gap:14px}}

/* teachers — 말하기 교실 담임 선생님 소개 */
.teachers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.teachers{grid-template-columns:1fr}}
.teacher{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow)}
.teacher .name{font-family:var(--font);font-size:20px;font-weight:800;margin-bottom:4px;color:var(--ink)}
.teacher .motto{font-size:14.5px;color:var(--ink-2);margin-bottom:16px;line-height:1.7}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags span{font-size:12px;font-weight:600;background:var(--red-soft);color:var(--red-ink);padding:5px 11px;border-radius:999px}

/* faq / 접기 */
details{border-bottom:1px solid var(--line);padding:18px 0}
details summary{cursor:pointer;font-family:var(--font);font-size:16.5px;font-weight:700;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--soft);color:var(--brand-ink);font-size:20px;font-weight:600;font-family:var(--font);line-height:1;transition:transform .2s ease,background .2s ease}
details[open] summary::after{transform:rotate(45deg);background:var(--red-soft)}
details p{margin-top:12px;font-size:15px}
details summary:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:4px}

/* final cta — 남색 마무리 상자 (글자는 흰색) */
.final{background:var(--navy);border:0;border-radius:28px;box-shadow:var(--shadow-lift);
  padding:clamp(36px,6vw,64px) clamp(24px,5vw,60px);text-align:center;color:#FFFFFF}
.final h2{margin-bottom:12px}
.final p{margin-bottom:28px;font-size:16px}
.final .cta-row{justify-content:center;margin-bottom:0}
:is(.final,.center,.cta-band) .eyebrow,.eyebrow.center{justify-content:center}

footer{padding:56px 0 120px;font-size:13px;color:var(--ink-3);text-align:center;border-top:1px solid var(--line);background:var(--soft)}
footer a{color:var(--ink-2)}

/* ── 로고 ── */
.brand-logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.brand-logo img{display:block;width:auto;height:32px}
.brand-fallback{display:none;font-family:var(--font);font-weight:800;font-size:18px;color:var(--ink);line-height:1.4}
.brand-logo.no-img img{display:none !important}
.brand-logo.no-img .brand-fallback{display:inline-block}
.brand-logo small{font-family:var(--font);font-weight:600;font-size:12px;
  color:var(--ink-3);letter-spacing:.04em;margin-left:10px;line-height:1.6;white-space:nowrap}
@media(max-width:420px){.brand-logo img{height:26px}.brand-logo small{display:none}}
footer .foot-logo{display:block;height:74px;width:auto;margin:0 auto 18px}
/* 예전 어두운 모드용 그림 — 사이트는 늘 밝은 화면이라 언제나 숨긴다 */
img.dark-only{display:none !important}

/* ── 아리 ── */
.ari{display:block;width:100%;height:auto}
.ari-plain{line-height:0}
.ari-hero{max-width:440px;width:100%;margin-left:auto}
.ari-side{max-width:230px}
.ari-mini{max-width:126px}
@media(max-width:900px){
  .ari-hero{max-width:300px;margin:0 auto}
}
@media(max-width:760px){
  .ari-side{max-width:180px;margin:0 auto}
}

/* ── 첫 화면 보조 문구 ── */
.sub-cta{font-size:14px;color:var(--ink-3);font-weight:500}
.sub-cta a{color:var(--ink-2);text-underline-offset:3px}
.sub-cta a:hover{color:var(--brand-ink)}
.hero-note{font-size:14px;color:var(--ink-2);margin:-26px 0 40px}
.hero-note b{font-family:var(--font);font-weight:800;color:var(--ink)}
.final-sub{font-size:14px;color:var(--ink-3);margin:20px 0 0}
.final-sub a{color:var(--ink-2);text-underline-offset:3px}

/* ── 수강료 ── */
.price{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.price-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:26px 24px}
.price-cell{text-align:center}
.price-cell .lab{font-size:12px;letter-spacing:.08em;color:var(--ink-3);margin-bottom:8px;font-weight:600}
.price-cell .num{font-family:var(--font);font-weight:900;font-size:clamp(26px,4.4vw,34px);
  font-variant-numeric:tabular-nums;line-height:1.2;color:var(--ink);letter-spacing:-.02em}
.price-cell.worth .num{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--ink-3)}
.price-cell.fee .num{color:var(--brand-ink)}
.price-eq{font-family:var(--font);font-weight:800;font-size:26px;color:var(--ink-3);flex:none}
.price-foot{border-top:1px solid var(--line);background:var(--soft);padding:14px 24px;
  display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:14px;color:var(--ink-2)}
.price-foot b{font-family:var(--font);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.price-note{margin-top:14px;font-size:13.5px;color:var(--ink-3);text-align:center}
@media(max-width:620px){
  .price-row{grid-template-columns:1fr;gap:6px;padding:22px 20px}
  .price-eq{transform:rotate(90deg);font-size:18px}
}

/* ── 실물 — 교재와 단어장 ── */
.real{display:grid;gap:18px;margin-top:22px}
.real-books,.real-card.real-books{flex-direction:row;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.real-books .book-shot{width:250px;flex:none}
.real-books .book-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:12px}
.real-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.real-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:20px;display:flex;flex-direction:column;gap:12px}
.real-card h3{font-family:var(--font);font-size:17.5px;font-weight:800;color:var(--ink)}
.real-card .lead{font-size:14px;color:var(--ink-2);line-height:1.75}
.real-card .from{font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}
.book-shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;line-height:0;box-shadow:var(--shadow)}
.book-shot img{display:block;width:100%;height:auto}
.vt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.vt{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.6}
.vt th{background:var(--navy);color:#FFFFFF;font-size:12px;letter-spacing:.06em;
  font-weight:700;text-align:left;padding:9px 12px;white-space:nowrap}
.vt td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink)}
.vt td.mean{color:var(--ink-2);white-space:nowrap}
.vt td.memo{color:var(--brand-ink);font-size:12.5px}
.vt .word,.vt .gram{font-family:var(--font-ja);white-space:nowrap}
.vt td.gram{color:var(--ink-2)}
.vt td.lesson{color:var(--ink-3);font-size:12px;white-space:nowrap}
@media(max-width:820px){
  .real-pair{grid-template-columns:1fr}
  .real-books,.real-card.real-books{flex-direction:column;align-items:stretch}
  .real-books .book-shot{width:100%;max-width:320px;margin:0 auto}
}
/* 좁은 화면에서는 표를 줄줄이 쌓는다 — 세 칸을 밀어 넣으면 글자가 잘린다 */
@media(max-width:560px){
  .vt-wrap{border:none;border-radius:0;overflow:visible}
  .vt thead{display:none}
  .vt,.vt tbody{display:block}
  .vt tr{display:block;background:var(--soft);border:1px solid var(--line);
    border-radius:10px;padding:11px 13px;margin-bottom:8px}
  .vt tr:last-child{margin-bottom:0}
  .vt td{display:block;border:none;padding:0;white-space:normal}
  .vt td:empty{display:none}
  .vt td.word{font-size:14.5px}
  .vt td.mean{font-size:13px;margin-top:3px;white-space:normal}
  .vt td.gram{font-size:13px;white-space:normal;margin:0 0 8px;padding-bottom:8px;
    border-bottom:1px dashed var(--line-2)}
  .vt td.gram::before{content:"이 강의 문법";display:block;font-size:11px;
    letter-spacing:.08em;color:var(--ink-3);margin-bottom:3px}
  .vt td.lesson{font-size:11.5px;letter-spacing:.06em;margin-bottom:5px}
  .vt td.memo{font-size:12.5px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2)}
}

/* ── 일정 · 시간표 ── */
.sched{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:8px;box-shadow:var(--shadow)}
.sched-row{background:var(--card);display:grid;grid-template-columns:150px 1fr;gap:16px;padding:17px 22px;align-items:baseline}
.sched-row dt{font-size:12.5px;letter-spacing:.08em;color:var(--ink-3);font-weight:600}
.sched-row dd{font-family:var(--font);font-size:17px;font-weight:800;color:var(--ink)}
.sched-row dd .thin{font-family:var(--font);font-weight:400;font-size:15px;color:var(--ink-2)}
.klass{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline}
.klass .kname{font-size:12px;background:var(--navy);color:#FFFFFF;padding:4px 11px;border-radius:999px;font-family:var(--font);font-weight:700}
@media(max-width:600px){.sched-row{grid-template-columns:1fr;gap:4px}}

/* ── 후기 ── */
/* 후기 캡처 — 수강생 단톡방 대화를 원형 그대로 보여준다 */
.vshots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px;margin-bottom:16px;align-items:start}
.vshot-wide{grid-column:1/-1;max-width:470px;width:100%;margin:0 auto}
.vshot{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;line-height:0;box-shadow:var(--shadow)}
.vshot img{display:block;width:100%;height:auto}
@media(max-width:760px){.vshots{grid-template-columns:1fr}}
.voices{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
@media(max-width:760px){.voices{grid-template-columns:1fr}}
.voice{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 20px;box-shadow:var(--shadow)}
.voice .body{font-family:var(--font);font-weight:500;font-size:16px;line-height:1.8;color:var(--ink)}
.voice .body::before{content:"“";color:var(--brand);font-size:30px;font-weight:900;line-height:0;margin-right:2px;vertical-align:-4px}
.voice .who{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--ink-3)}
.voice .who .nm{color:var(--ink-2);font-weight:600}
.voice .who .kl{background:var(--red-soft);color:var(--red-ink);font-weight:600;padding:3px 9px;border-radius:999px;font-size:12px}

/* ── 사진 자리 ── */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:760px){.shots{grid-template-columns:1fr}}
figure.shot{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--soft);box-shadow:var(--shadow)}
figure.shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
figure.shot figcaption{padding:11px 16px;font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);background:var(--card)}
.tshot{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--soft);border:1px solid var(--line);margin-bottom:14px}
.tshot img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
/* 선생님 선 그림 — 틀 없이 바탕에 그대로 얹힌다 */
.tface{margin-bottom:10px;line-height:0}
.tface img{display:block;width:auto;height:128px}
@media(max-width:420px){.tface img{height:110px}}

/* ── 레벨 확인 ── */
.level-head{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-bottom:20px}
.level-head p{flex:1}
.level-head .ari-mini{max-width:112px;margin-top:-56px}
@media(max-width:600px){.level-head .ari-mini{max-width:84px;margin-top:-36px}}
.quiz{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,36px);box-shadow:var(--shadow-lift);margin-top:8px;color:var(--ink)}
.q-step{font-size:12.5px;letter-spacing:.08em;color:var(--brand-ink);font-weight:800;margin-bottom:14px}
.q-ask{font-size:14px;color:var(--ink-3);margin-bottom:8px}
.q-ko{font-family:var(--font);font-weight:800;font-size:clamp(19px,2.6vw,24px);
  line-height:1.5;color:var(--ink);margin-bottom:22px;word-break:keep-all}
#q-gate .q-ask{font-family:var(--font);font-weight:800;font-size:clamp(19px,2.6vw,24px);color:var(--ink);margin-bottom:22px}
.opts{display:grid;gap:9px}
.opt{display:block;width:100%;text-align:left;padding:15px 18px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:#FFFFFF;color:var(--ink);font-size:16px;font-weight:500;
  font-family:var(--font-ja);
  line-height:1.6;word-break:normal;overflow-wrap:normal;
  cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease}
#q-gate .opt{font-family:var(--font);font-size:15.5px}
.opt:hover{border-color:var(--brand);background:var(--red-soft)}
.opt:active{transform:scale(.995)}
.opt:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.q-up{font-family:var(--font);font-weight:800;font-size:19px;color:var(--ink);margin-bottom:18px}
#q-result h3{font-size:clamp(21px,3vw,26px);margin-bottom:10px}
#q-result > p{font-size:15px;color:var(--ink-2);margin-bottom:20px}
.classes{list-style:none;display:grid;gap:9px;margin:0 0 4px}
.classes li{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 18px}
.classes .cname{font-family:var(--font);font-weight:800;font-size:16.5px;color:var(--ink);display:block;margin-bottom:3px}
.classes .cmeta{font-size:13.5px;color:var(--ink-2)}
.classes .cwhen{font-size:13.5px;color:var(--brand-ink);font-weight:700;margin-left:8px}
.r-note{font-size:14px;color:var(--ink-3);margin-top:12px}
.quiz-reset{background:none;border:none;padding:0;font:inherit;font-size:14px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:16px}
.quiz-reset:hover{color:var(--brand-ink)}

.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  .speak path{animation:none;stroke-dashoffset:0}
  html{scroll-behavior:auto}
}

/* ── 사이트 공통 상단 메뉴·바닥글 (여러 페이지가 함께 씁니다) ── */
.topbar .wrap{flex-wrap:wrap;height:auto;min-height:64px;padding-top:8px;padding-bottom:8px;row-gap:6px}
.topbar nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.topbar nav a.now{color:var(--brand-ink);font-weight:800}
.menu-btn{display:none;border:1.5px solid var(--line-2);background:#FFFFFF;color:var(--ink);
  border-radius:999px;padding:7px 15px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.subnav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;font-weight:600;color:var(--ink-3);
  padding:8px 0 0;width:100%;border-top:1px dashed var(--line)}
.subnav a{text-decoration:none;color:var(--ink-3)}
.subnav a:hover{color:var(--brand-ink)}
@media(max-width:760px){
  .topbar nav{display:none;width:100%;flex-direction:column;gap:2px;padding:6px 0 4px}
  .topbar nav a{padding:9px 4px;border-bottom:1px solid var(--line)}
  .topbar.open nav{display:flex}
  .menu-btn{display:inline-block}
  .subnav{display:none}
}
footer .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:14px;font-weight:600}
footer .foot-links a{text-decoration:none}
footer .foot-links a:hover{color:var(--brand-ink)}

/* ── 묶음 메뉴 ── 수업 소개·프로그램·고객지원은 페이지가 아니라 펼치는 단추다.
   컴퓨터 폭: 마우스를 올리면(CSS) 또는 단추를 누르면(페이지 안 스크립트, aria-expanded) 펼쳐지고,
   하위 항목에 초점이 있는 동안(focus-within) 열려 있다. 휴대폰 폭: "메뉴" 단추 안에 늘 펼쳐져 있다. */
.topbar nav{align-items:center}
.menu-group{position:relative;display:inline-flex;align-items:center}
.menu-group > button{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;line-height:inherit}
.menu-group > button::after{content:"▾";font-size:11px;color:var(--ink-3);transition:transform .15s ease}
.menu-group > button:hover,.menu-group > button[aria-expanded="true"]{color:var(--brand-ink)}
.menu-group > button[aria-expanded="true"]::after{transform:rotate(180deg)}
.topbar nav .now{color:var(--brand-ink);font-weight:800}
.topbar nav a:focus-visible,.menu-group > button:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
.menu-list{display:none;position:absolute;top:100%;left:-10px;z-index:60;min-width:172px;margin-top:8px;padding:8px;
  background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lift)}
/* 단추와 목록 사이 틈을 건너는 동안 마우스가 빠지지 않게 보이지 않는 다리를 둔다 */
.menu-list::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.menu-list a{display:block;padding:8px 12px;border-radius:8px;white-space:nowrap;color:var(--ink);font-size:14px;font-weight:600}
.menu-list a:hover{background:var(--soft);color:var(--brand-ink)}
.menu-list a.now{background:var(--red-soft)}
@media(min-width:761px){
  .menu-group:hover > .menu-list,
  .menu-group > button[aria-expanded="true"] + .menu-list,
  .menu-list:focus-within{display:block}
}
@media(max-width:760px){
  .topbar nav{align-items:stretch}
  .menu-group{display:block;position:static}
  .menu-group > button{display:block;width:100%;text-align:left;cursor:default;
    padding:12px 4px 4px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-3)}
  .menu-group > button::after,.menu-list::before{content:none}
  .menu-group > button[aria-expanded="true"]{color:var(--ink-3)}
  .menu-group > button.now,.menu-group > button.now[aria-expanded="true"]{color:var(--brand-ink)}
  .menu-list{display:block;position:static;min-width:0;margin:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
  .menu-list a{padding:9px 4px 9px 14px;border-radius:0;white-space:normal;font-size:14px}
  .menu-list a:hover{background:none}
  .menu-list a.now{background:none}
  .topbar.open nav{display:flex}
}

/* ── 여러 페이지가 함께 쓰는 조각들 (홈·수업 소개 페이지) ── */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.card:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card .kind{font-size:12.5px;letter-spacing:.06em;color:var(--brand-ink);font-weight:800}
.card h3{font-family:var(--font);font-size:20px;font-weight:800;color:var(--ink)}
.card p{font-size:14.5px;color:var(--ink-2);line-height:1.7;margin:0}
.card .go{margin-top:auto;font-size:14px;color:var(--brand-ink);font-weight:800}
@media(max-width:700px){.cards{grid-template-columns:1fr}}
.feature{text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:26px 24px;margin-top:22px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.feature .tag{display:inline-block;background:var(--red-soft);color:var(--red-ink);font-weight:700;padding:4px 11px;border-radius:999px;font-size:12.5px;margin-bottom:10px}
.feature h3{color:var(--ink);font-family:var(--font);font-weight:800;font-size:22px;margin-bottom:6px}
.feature p{font-size:15px;color:var(--ink-2);line-height:1.7}
@media(max-width:620px){.feature{grid-template-columns:1fr}}
ol.steps{display:grid;gap:12px;margin-top:20px;counter-reset:s}
ol.steps li{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px 20px 18px 66px;position:relative;font-size:15px;line-height:1.7;color:var(--ink-2)}
ol.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:16px;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#FFFFFF;font-family:var(--font);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
ol.steps li b{color:var(--ink);display:block;margin-bottom:2px;font-size:16px;font-weight:800}
.kv{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:18px}
.kv div{background:var(--card);display:grid;grid-template-columns:120px 1fr;gap:14px;padding:14px 20px;font-size:15px;align-items:baseline}
.kv dt{font-size:12.5px;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
.kv dd{color:var(--ink);line-height:1.6}
@media(max-width:520px){.kv div{grid-template-columns:1fr;gap:3px}}
.kana{width:100%;border-collapse:collapse;font-size:15px;margin-top:14px;table-layout:fixed}
.kana th,.kana td{border:1px solid var(--line);padding:9px 4px;text-align:center;line-height:1.35}
.kana th{background:var(--navy);font-size:12px;color:#FFFFFF;font-weight:700}
.kana td{background:var(--card)}
.kana .k{font-family:var(--font-ja);font-size:20px;color:var(--ink);display:block}
.kana .r{font-size:12px;color:var(--ink-3);display:block}
.kana-wrap{overflow-x:auto}
.note-box{background:var(--soft);border-left:4px solid var(--navy);border-radius:var(--r-sm);padding:18px 22px;margin-top:18px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.note-box b{color:var(--ink)}
.prose p{font-size:15.5px;line-height:1.85;color:var(--ink-2);margin-top:12px}
.prose h3{font-family:var(--font);font-weight:800;font-size:20px;margin-top:30px;color:var(--ink)}
.stat{font-family:var(--font);font-weight:900;font-size:48px;color:var(--brand-ink);line-height:1;letter-spacing:-.03em}
.stat-cap{font-size:14px;color:var(--ink-3);margin-top:8px}

/* ── 홈 ── 창업 계기 세 물음 · 스토리 · 맺음말 · 수업 카드의 모집 표시 ── */
.ask-list{display:grid;gap:16px;margin:30px 0 48px}
.ask-list li{list-style:none;position:relative;padding:0 0 0 38px;
  font-family:var(--font);font-weight:700;
  font-size:17.5px;line-height:1.75;color:var(--ink)}
.ask-list li::before{content:"?";position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;
  background:var(--red);color:#FFFFFF;font-family:var(--font);font-weight:900;font-size:14px;
  display:flex;align-items:center;justify-content:center}
@media(max-width:520px){.ask-list li{font-size:16px;padding-left:34px}}

.story{background:var(--soft);border-radius:var(--r);padding:30px 26px;margin-top:34px;text-align:center;
  font-size:16.5px;font-weight:600;line-height:2;color:var(--ink)}
@media(max-width:520px){.story{font-size:15px;padding:26px 20px}}

.closing{margin:34px 0 48px;text-align:center;font-size:16.5px;font-weight:600;line-height:2;color:var(--ink)}
@media(max-width:520px){.closing{font-size:15px}}

.card .card-tag{align-self:flex-start;background:var(--red);color:#FFFFFF;font-weight:700;
  padding:3px 10px;border-radius:999px;font-size:12px;line-height:1.5}

/* ── 원본 톤 ── 구분선+심볼 · 후기 캡처 · 상세 커리큘럼 ── */
.divider{display:flex;align-items:center;max-width:1080px;margin:34px auto 40px;padding:0 24px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-2)}
.divider img{width:34px;height:auto;flex:none;opacity:.9;margin:0 14px}

.rev-tall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;align-items:start}
.rev-tall figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow);color:var(--ink)}
.rev-tall img{display:block;width:100%;height:auto}
.rev-tall figcaption{font-size:13px;font-weight:600;color:var(--ink-2);padding:10px 12px;line-height:1.55}
@media(max-width:700px){.rev-tall{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}

.rev-sq{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:24px}
.rev-sq img{display:block;width:100%;height:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
@media(max-width:520px){.rev-sq{grid-template-columns:1fr 1fr}}

.curri{margin-top:22px}
.curri details{border-bottom:1px solid var(--line);padding:14px 0}
.curri details > div{display:grid;gap:12px;margin-top:16px}
.curri-item{padding-left:12px;border-left:3px solid var(--red-soft)}
.curri-ja{display:block;font-family:var(--font-ja);font-size:15px;font-weight:600;color:var(--ink);line-height:1.65;
  word-break:normal;overflow-wrap:anywhere}
.curri-ko{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:3px}

/* ── 띠(바탕을 칠한 영역) ──────────────────────────────────────────────
   class="soft"(예전 이름 tint) → 연회색 띠,  class="navy" → 남색 띠(글자 흰색).
   색이 화면 양끝까지 닿아야 한다. 상자를 옆으로 넓히거나 100vw를 쓰면 좁은 화면에서 가로 스크롤이
   생기므로, 반대로 상자의 폭 제한을 풀어 화면 전체를 차지하게 하고 글을 안쪽 여백으로 밀어
   가운데 1080px를 그대로 재현한다. */
.tint,.soft{position:relative;background:var(--soft);isolation:isolate}
.navy{position:relative;background:var(--navy);color:#FFFFFF;isolation:isolate}
section.tint.wrap,section.soft.wrap,section.navy.wrap{max-width:none;
  padding-left:max(24px,calc(50% - 516px));
  padding-right:max(24px,calc(50% - 516px));
  padding-top:clamp(56px,8vw,88px);padding-bottom:clamp(56px,8vw,88px)}
section.hero.tint,section.hero.soft,section.hero.navy{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(48px,7vw,84px)}

/* 남색 위에서는 글자 색 이름을 흰 계열로 갈아 끼운다 — 부품들이 저절로 맞는다 */
.navy,.final{
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.86); --ink-3:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.18); --line-2:rgba(255,255,255,.4);
  --brand-ink:#FF9AA5; --soft:rgba(255,255,255,.08); --soft-2:rgba(255,255,255,.14); --red-soft:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.06); --card-2:rgba(255,255,255,.1);
}
.navy .eyebrow .label,.final .eyebrow .label{color:var(--kakao);background:rgba(255,255,255,.1)}
.navy .btn-ghost:hover,.final .btn-ghost:hover{border-color:#FFFFFF;color:#FFFFFF;background:rgba(255,255,255,.1)}
.navy .speak,.navy .speak path{color:#FF9AA5;stroke:#FF9AA5}
/* 남색 띠 안의 흰 상자(카드·후기·표 등)는 밝은 글자 색 이름으로 되돌린다 */
.navy :is(.card,.feature,.voice,.vshot,.review-card,.worry,.vs > div,.note-box,.letter,.quiz,.pillar,.teacher,
  .real-card,.price,.bene,.kv,.sched,.fee-wrap,.doc,.pics figure,.rev-tall figure,.rev-sq,.book-shot,
  .chips:not(.round) li,ol.steps li,ol.flow li,.story,.bigsteps li,.vt-wrap,.kana-wrap,.ask-list,.closing),
.final :is(.card,.quiz,.note-box,.vs > div,.chips:not(.round) li){
  --ink:#1A264B; --ink-2:#465071; --ink-3:#5F6885;
  --line:#E3E7EF; --line-2:#CDD3E0; --brand-ink:var(--red-ink);
  --soft:#F4F6FA; --soft-2:#EAEEF5; --red-soft:#FDECEE; --card:#FFFFFF; --card-2:#F4F6FA;
  color:var(--ink);
}
.navy :is(.card,.feature,.voice,.vshot,.review-card,.vs > div,.letter,.quiz,.pillar,.teacher,.real-card,.price,.bene,
  .chips:not(.round) li,ol.steps li,ol.flow li,.bigsteps li){background:#FFFFFF}
.navy .note-box,.navy .story{background:#FFFFFF}
.navy :is(.ask-list,.closing){background:#FFFFFF;border-radius:var(--r);padding:24px 26px}

/* 띠는 처음부터 칠해져 있고, 나타나는 것은 글이다. .reveal이 영역 자체에 붙어 있어 그냥 두면
   색판이 통째로 떠오른다 — 효과를 바로 아래 자식으로 옮긴다. */
:is(.tint,.soft,.navy).reveal,:is(.tint,.soft,.navy).reveal.in{opacity:1;transform:none;transition:none}
:is(.tint,.soft,.navy).reveal > *{opacity:0;transform:translateY(14px)}
:is(.tint,.soft,.navy).reveal.in > *{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  :is(.tint,.soft,.navy).reveal > *,:is(.tint,.soft,.navy).reveal.in > *{opacity:1;transform:none;transition:none}
}
/* 연회색 띠 위의 연회색 조각은 흰색으로 갈아 끼운다 */
:is(.tint,.soft) :is(.note-box,.story){background:#FFFFFF}
:is(.tint,.soft) .ask-list li::before{background:var(--red)}
:is(.tint,.soft) .chips li{background:#FFFFFF}

/* 점 장식 — 영역 사이에 하나씩 떨어뜨려 놓는 작은 장식 */
.dots{width:104px;height:26px;margin:16px auto;
  background-image:radial-gradient(circle,var(--line-2) 1.7px,transparent 1.8px);
  background-size:13px 13px;background-position:center}

/* 아리 자리 — 틀도 카드도 테두리도 없이 바탕에 그대로 얹는다.
   좁은 화면에서 글을 밀어내지 않도록 폭에 상한을 둔다. */
.ari-spot{display:block;width:100%;max-width:150px;margin:0 auto;line-height:0;
  background:none;border:none}
.ari-spot img{display:block;width:100%;height:auto}
@media(max-width:520px){.ari-spot{max-width:110px}}

/* 카드 윗선 — 수업 카드 위에 얹는 색 선. 색은 카드마다 style="--card-line:var(--navy)"로 넘긴다. */
.card-line{background-image:linear-gradient(var(--card-line),var(--card-line));
  background-repeat:no-repeat;background-size:100% 5px;background-position:top center}

/* ── 작은 선 그림 ── 글 옆에 놓는 장식. 색은 옆 글자를 그대로 따라간다 ── */
.ico{
  width:1.15em; height:1.15em; flex:none;
  display:inline-block; vertical-align:-.2em; margin-right:.4em;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico:last-child{margin-right:0}


/* ── 여러 페이지가 함께 쓰는 부품 ── 쓰는 법은 이 파일 맨 위 안내 ⑤ ──────────
   어느 것도 상자 밖으로 가로로 넘치지 않는다(긴 표만 자기 상자 안에서 옆으로 민다). */

/* 1) 짧은 문구 묶음 — 옛 사이트의 "원 안 문구" */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding:0}
.chips li{background:var(--card);border:1.5px solid var(--line-2);border-radius:999px;padding:9px 18px;
  font-family:var(--font);font-weight:700;font-size:15px;
  color:var(--ink);line-height:1.5;text-align:center}
.chips.round{justify-content:center;gap:14px}
.chips.round li{width:min(132px,40vw);aspect-ratio:1/1;border-radius:50%;padding:12px;
  display:flex;align-items:center;justify-content:center;font-size:14.5px;line-height:1.45;
  background:var(--navy);border-color:var(--navy);color:#FFFFFF;box-shadow:var(--shadow)}
.navy .chips.round li{background:#FFFFFF;border-color:#FFFFFF;color:var(--navy)}

/* 2) 둘을 견주는 칸 — 왼쪽은 남, 오른쪽(.ours)은 우리 */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.vs > div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 18px;min-width:0}
.vs > div > h3{font-family:var(--font);font-weight:800;font-size:18px;
  color:var(--ink-2);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.vs > .ours{border:2px solid var(--navy);box-shadow:var(--shadow-lift)}
.vs > .ours > h3{color:var(--navy)}
.vs ul{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.vs li{position:relative;padding-left:22px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.vs li::before{content:"·";position:absolute;left:6px;top:0;color:var(--ink-3);font-weight:800}
.vs > .ours li{color:var(--ink)}
.vs > .ours li::before{content:"✓";color:var(--brand);font-size:13px;font-weight:900;top:1px;left:2px}
.vs p{font-size:15px;line-height:1.7}
@media(max-width:620px){.vs{grid-template-columns:1fr}}

/* 3) 순서 띠 — →로 이어지는 단계. 좁은 화면에서는 ↓로 세로 쌓임 */
ol.flow{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 4px;margin-top:20px;padding:0;counter-reset:f}
ol.flow li{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  border-radius:999px;padding:9px 16px 9px 10px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.5;min-width:0}
ol.flow li::before{counter-increment:f;content:counter(f);flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:#FFFFFF;font-family:var(--font);font-weight:800;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center}
ol.flow li:not(:last-child)::after{content:"→";color:var(--brand);font-weight:800;font-size:16px;margin:0 2px 0 8px}
@media(max-width:520px){
  ol.flow{flex-direction:column;align-items:stretch}
  ol.flow li{border-radius:var(--r-sm);position:relative;margin-bottom:22px}
  ol.flow li:last-child{margin-bottom:0}
  ol.flow li:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);margin:0}
}

/* 4) 그림 여러 장 묶음 — 후기·미리보기. 칸 최소 폭은 --pic-min(기본 220px) */
.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--pic-min,220px),100%),1fr));gap:14px;margin-top:22px;align-items:start}
.pics figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;min-width:0;box-shadow:var(--shadow)}
.pics img{display:block;width:100%;height:auto}
.pics figcaption{font-size:13px;color:var(--ink-2);padding:9px 12px;line-height:1.55;border-top:1px solid var(--line)}

/* 5) 영상 틀 — 16:9 */
.video{position:relative;width:100%;aspect-ratio:16/9;margin-top:22px;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* 6) 바깥 문서 틀 — 긴 iframe + "새 창에서 열기" 줄. 높이는 --doc-h(기본 72vh) */
.doc{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.doc iframe{display:block;width:100%;height:var(--doc-h,72vh);min-height:400px;border:0;background:#FFFFFF}
.doc-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px;padding:10px 16px;
  border-top:1px solid var(--line);background:var(--soft);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.doc-links a{color:var(--ink-2);text-decoration:none;text-underline-offset:3px}
.doc-links a:hover{color:var(--brand-ink);text-decoration:underline}

/* 7) 금액 표 — 자기 상자 안에서 옆으로 밀고, .stack 이면 좁은 화면에서 줄줄이 쌓인다 */
.fee-wrap{margin-top:22px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);box-shadow:var(--shadow)}
table.fee{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6}
table.fee th{background:var(--navy);color:#FFFFFF;font-size:12.5px;letter-spacing:.04em;font-weight:700;
  text-align:left;padding:11px 14px;white-space:nowrap;border-bottom:0}
table.fee td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink);white-space:nowrap}
table.fee tbody tr:nth-child(even) td{background:var(--soft)}
table.fee tr:first-child td{border-top:0}
table.fee .num{text-align:right;font-variant-numeric:tabular-nums}
table.fee th.num{text-align:right}
table.fee .total td{background:var(--red-soft);font-weight:800}
table.fee caption{caption-side:top;text-align:left;padding:10px 14px;font-size:13.5px;color:var(--ink-3)}
@media(max-width:560px){
  .fee-wrap.stack{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
  .fee-wrap.stack thead{display:none}
  .fee-wrap.stack table,.fee-wrap.stack tbody,.fee-wrap.stack tr,.fee-wrap.stack td{display:block;white-space:normal}
  .fee-wrap.stack tr{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:8px;box-shadow:var(--shadow)}
  .fee-wrap.stack td,table.fee tbody tr:nth-child(even) td{background:none}
  .fee-wrap.stack td{padding:3px 0;border:0;text-align:left;display:flex;justify-content:space-between;gap:12px}
  .fee-wrap.stack td[data-th]::before{content:attr(data-th);flex:none;font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)}
  .fee-wrap.stack .total tr,.fee-wrap.stack tr.total{background:var(--red-soft)}
}


/* ═══ 새 디자인 부품 ═══ 쓰는 법은 이 파일 맨 위 안내 ④ ═══════════════════════════ */

.center{text-align:center}
.center .cta-row,.cta-row.center{justify-content:center}
.accent{color:var(--brand-ink)}
.hl{box-shadow:inset 0 -.4em 0 var(--kakao-soft)}
.navy .hl{box-shadow:inset 0 -.4em 0 rgba(254,229,0,.35)}

/* 8) 큰 노란 카카오톡 상담 버튼 */
.btn-kakao{background:var(--kakao);color:var(--kakao-ink);border-color:var(--kakao);font-weight:800;box-shadow:var(--shadow)}
.btn-kakao::before{content:"";flex:none;width:1.25em;height:1.25em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c-5.3 0-9.6 3.4-9.6 7.6 0 2.7 1.8 5.1 4.5 6.4l-1 3.6c-.1.4.3.7.6.5l4.3-2.8c.4 0 .8.1 1.2.1 5.3 0 9.6-3.4 9.6-7.6S17.3 3.2 12 3.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c-5.3 0-9.6 3.4-9.6 7.6 0 2.7 1.8 5.1 4.5 6.4l-1 3.6c-.1.4.3.7.6.5l4.3-2.8c.4 0 .8.1 1.2.1 5.3 0 9.6-3.4 9.6-7.6S17.3 3.2 12 3.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-kakao:hover{background:var(--kakao-hover);border-color:var(--kakao-hover);color:var(--kakao-ink);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-lg{padding:18px 34px;font-size:18px;border-radius:16px}
@media(max-width:520px){.btn-lg{width:100%;padding:17px 22px;font-size:17px}}

/* 9) 떠 있는 카카오톡 상담 버튼 — 오른쪽 아래. 휴대폰에서는 작은 동그라미(글자는 화면 읽기용으로만) */
.kakao-float{position:fixed;right:20px;bottom:20px;z-index:45;display:inline-flex;align-items:center;gap:8px;
  background:var(--kakao);color:var(--kakao-ink);text-decoration:none;font-family:var(--font);font-weight:800;font-size:15px;
  padding:12px 20px 12px 16px;border-radius:999px;box-shadow:0 6px 20px -6px rgba(26,38,75,.45),0 2px 6px rgba(26,38,75,.12);
  transition:transform .15s ease,box-shadow .2s ease}
.kakao-float svg{width:24px;height:24px;flex:none;fill:currentColor}
.kakao-float:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(26,38,75,.5)}
.kakao-float:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
@media(max-width:600px){
  .kakao-float{right:14px;bottom:14px;width:52px;height:52px;padding:0;justify-content:center}
  .kakao-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media print{.kakao-float{display:none}}

/* 10) 고민 ✕ / 답 ✓ 비교 상자 */
.worry-answer{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;align-items:stretch}
.worry,.answer{border-radius:var(--r);padding:26px 24px 22px;min-width:0}
.worry{background:var(--soft-2);border:1px solid var(--line)}
.answer{background:var(--navy);color:#FFFFFF;box-shadow:var(--shadow-lift)}
.navy .answer{background:#FFFFFF;color:var(--navy)}
.worry h3,.answer h3{font-size:19px;font-weight:800;margin-bottom:14px}
.worry h3{color:var(--ink-2)}
.answer h3{color:inherit}
.worry ul,.answer ul{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.worry li,.answer li{position:relative;padding-left:34px;font-size:15.5px;line-height:1.65}
.worry li{color:var(--ink-2)}
.answer li{color:inherit;font-weight:600}
.worry li::before,.answer li::before{position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;line-height:1}
.worry li::before{content:"✕";background:#FFFFFF;color:var(--red);border:1.5px solid #F2B8BF}
.answer li::before{content:"✓";background:var(--kakao);color:var(--navy)}
.navy .answer li::before{background:var(--red);color:#FFFFFF}
.worry p,.answer p{font-size:15px;line-height:1.7;color:inherit}
@media(max-width:700px){.worry-answer{grid-template-columns:1fr}}

/* 11) 큰 번호 동그라미 순서 안내 */
ol.bigsteps{list-style:none;counter-reset:bs;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:18px;margin-top:26px;padding:0}
ol.bigsteps li{counter-increment:bs;position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:62px 20px 20px;font-size:15px;line-height:1.7;color:var(--ink-2);text-align:center;min-width:0}
ol.bigsteps li::before{content:counter(bs);position:absolute;left:50%;top:-22px;transform:translateX(-50%);
  width:60px;height:60px;border-radius:50%;background:var(--navy);color:#FFFFFF;border:4px solid #FFFFFF;
  box-shadow:var(--shadow);font-family:var(--font);font-weight:900;font-size:24px;display:flex;align-items:center;justify-content:center}
ol.bigsteps li:nth-child(even)::before{background:var(--red)}
ol.bigsteps li b{display:block;color:var(--ink);font-size:17px;font-weight:800;margin-bottom:6px}
ol.bigsteps{padding-top:22px}
.navy ol.bigsteps li::before{background:var(--kakao);color:var(--navy);border-color:var(--navy)}
@media(max-width:520px){
  ol.bigsteps{gap:30px}
  ol.bigsteps li{padding:56px 18px 18px}
}

/* 12) 숫자 자랑 칸 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:14px;margin-top:24px}
.stat-tile{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:26px 18px 22px;text-align:center;min-width:0}
.stat-num{display:block;font-family:var(--font);font-weight:900;font-size:clamp(40px,6vw,58px);line-height:1.05;
  color:var(--navy);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-num small{font-size:.5em;font-weight:800;color:var(--brand);margin-left:2px;letter-spacing:0}
.stat-label{display:block;margin-top:10px;font-size:15px;font-weight:700;color:var(--ink-2);line-height:1.5}
.navy .stat-tile{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.navy .stat-num{color:#FFFFFF}
.navy .stat-num small{color:var(--kakao)}
.navy .stat-label{color:rgba(255,255,255,.86)}
@media(max-width:520px){.stat-tile{padding:20px 10px 16px}.stat-num{font-size:clamp(32px,10vw,44px)}.stat-label{font-size:13.5px}}

/* 13) 후기 카드 */
.review-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:18px;margin-top:24px;align-items:start}
.review-card{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-lift);color:var(--ink);min-width:0;display:flex;flex-direction:column}
.review-card > img{display:block;width:100%;height:auto}
.review-card figcaption,.review-card .who{padding:12px 16px;font-size:13.5px;font-weight:700;color:var(--ink-2);line-height:1.55;border-top:1px solid var(--line)}
.review-card .quote{padding:24px 22px 8px;font-size:16px;font-weight:500;line-height:1.8;color:var(--ink)}
.review-card .quote::before{content:"“";display:block;font-size:44px;font-weight:900;line-height:.8;color:var(--brand);margin-bottom:6px}
.review-card .quote + .who{border-top:0;padding-top:4px;color:var(--ink-3)}

/* 14) 마무리 상담 묶음 — 남색 띠 안 가운데 */
.cta-band{text-align:center;max-width:720px;margin:0 auto}
.cta-band .ari{max-width:150px;margin:0 auto 14px}
.cta-band h2{font-size:clamp(26px,3.8vw,40px)}
.cta-band p{font-size:16.5px;margin:0 auto 28px;max-width:46ch}
.cta-band .cta-row{justify-content:center;margin-bottom:0}