/* =========================================================
   C 결 하위 페이지를 메인(D) 컨셉으로 — 흰 배경 · 파랑 포인트 · 메인과 같은 헤더/푸터
   sub-c-base.css(C 기본) → sub-c.css(하위 페이지) 위에 덧씌운다
   ========================================================= */
:root{
  --gnb:76px;--side:clamp(20px,5vw,72px);
  --blue:#3182f6;--blue-d:#1b64da;--blue-l:#e8f3ff;--sub:#4e5968;--mute:#8b95a1;--gray2:#f9fafb;--gray3:#f2f4f6;
}
body{background:#fff;font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.01em}
.progress{display:none}

/* ---------- 헤더: 메인과 같은 모양 (처음부터 테두리 없음) ---------- */
.gnb{position:fixed;inset:0 0 auto;height:var(--gnb);z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;padding:0 var(--side);background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}
.gnb .logo{grid-column:1;justify-self:start;display:flex;align-items:center;color:#00074e}
.logo-svg{display:block;height:42px;width:auto}
.logo-svg .lw{fill:currentColor}
.gnb nav{grid-column:2;display:flex;gap:30px;font-size:16px;font-weight:500;color:var(--ink-2)}
.gnb nav a{transition:color .2s}
.gnb nav a:hover,.gnb nav a.on{color:var(--blue)}
.gnb nav a.on{font-weight:700}
.gnb-cta{grid-column:3;justify-self:end;height:44px;padding:0 22px;border-radius:12px;background:var(--blue);color:#fff;font-size:16px;font-weight:700;display:inline-flex;align-items:center;transition:background .2s}
.gnb-cta:hover{background:var(--blue-d)}
@media (max-width:1100px){.gnb nav{display:none}}
@media (max-width:760px){
  :root{--gnb:64px}
  .gnb{gap:12px}
  .logo-svg{height:34px}
  .gnb-cta{height:40px;padding:0 16px;font-size:15px}
}
.chap{top:calc(var(--gnb) + 6px);background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px -12px rgba(2,32,71,.22)}
.chap a{color:var(--sub)}
.chap a:hover{color:var(--ink)}
.chap a.on{color:#fff}
.chap-ind{background:var(--blue)}

/* ---------- 글자: 메인과 같은 크기 · 굵기 ---------- */
.eyebrow{font-size:15px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--blue)}
.eyebrow::before{display:none}
.sec-title{font-size:clamp(30px,3.4vw,52px);line-height:1.3;font-weight:700;letter-spacing:-.035em}
.sec-title .g{color:var(--faint,#b0b8c1)}
.sec-desc{color:var(--sub);font-size:16.5px;line-height:1.7}
.statement{font-weight:700;line-height:1.2}
.tcard h3,.first-sem h3,.tier b{font-weight:700}

/* ---------- 버튼: 검정 → 파랑 ---------- */
.btn-dark{background:var(--blue);color:#fff;--fill:var(--blue-d)}
.btn-dark .arrow{background:#fff;color:var(--blue)}

/* ---------- 섹션: 배경색은 모두 흰색 (상자로 구분하는 곳은 상자만) ---------- */
section{padding:clamp(56px,7vw,104px) 0}
.sys-sec,.report-sec,.result-sec,.parents,.family,.others-sec,.cta-sec,.feat-sec,.roadmap{background:#fff}

/* ---------- 히어로: 헤더 바로 아래부터 사진 (틈 없음) · 스크롤하면 전체화면 ---------- */
.hero{padding:0}
.hero-photo,.sub-hero .hero-photo{margin:0;border-radius:0;height:100vh;height:100svh;min-height:620px;will-change:clip-path}
/* 스크립트 전에도 같은 모양 (카드 윗변 = 헤더 아랫변) */
.sub-hero .hero-photo{clip-path:inset(var(--gnb) clamp(14px,1.6vw,24px) clamp(14px,1.6vw,24px) clamp(14px,1.6vw,24px) round 32px)}
@media (max-width:760px){.sub-hero .hero-photo{clip-path:inset(var(--gnb) 10px 10px 10px round 22px)}}
.sub-hero .facts{padding-top:calc(var(--gnb) + clamp(22px,2.6vw,36px))}
.hero-grid{padding-bottom:clamp(36px,3.6vw,56px)}
.hero-photo .facts b{font-weight:800}
.hero-copy .btn-light{background:var(--blue);color:#fff;--fill:var(--blue-d)}
.hero-copy .btn-light .arrow{background:#fff;color:var(--blue)}
.hero-copy .btn-light:hover .arrow{background:#fff;color:var(--blue)}

/* ---------- 01 수업 방식 ---------- */
/* 원어민 카드: '+ 한 반'(밝은 파랑)보다 어두운 파랑 + 수업 사진이 연하게 비침 */
.tcard.nt{background:#123a86;color:#fff;isolation:isolate}
.tcard.nt::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../img/d/real/dot-board.jpg) 50% 40%/cover no-repeat;opacity:.2;mix-blend-mode:luminosity;pointer-events:none}
.tcard.nt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,58,134,.2),rgba(18,58,134,.75) 70%);pointer-events:none}
.tcard.nt .tag{background:rgba(255,255,255,.16);color:#fff}
.tcard.nt .big{opacity:.08}
/* '+ 한 반': 밝은 파랑 + 흰 테두리, 그림자는 중성색 */
.duo-knot{background:var(--blue);box-shadow:0 0 0 6px #fff,0 18px 40px -16px rgba(2,32,71,.4)}

/* ---------- 03 로드맵: 검정 배경 → 흰 배경 ---------- */
.roadmap{color:var(--ink)}
.roadmap .eyebrow{color:var(--blue)}
.roadmap .sec-desc{color:var(--sub)}
.tabs button{border-color:var(--line);color:var(--sub)}
.tabs button:hover{border-color:#b0b8c1;color:var(--ink)}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tab-ind{background:var(--ink)}
.tabs.has-ind button.on{color:#fff}
.stage .card{background:var(--gray2);border-color:var(--line);color:var(--ink)}
.stage .card p,.stage .card li{color:var(--sub)}
.track::before{background:var(--line)}
.stage .dot{background:#fff;border-color:#d1d6db;color:var(--sub)}
.track.live .stage .dot{background:#fff;border-color:#d1d6db;color:var(--sub)}
.track.live .stage.past .dot{background:var(--blue-l);border-color:var(--blue-l);color:var(--blue)}
.track.live .stage.on .card{background:#fff;border-color:var(--blue);box-shadow:0 14px 34px -14px rgba(49,130,246,.35)}
.roadmap .steps li{border-top-color:var(--ink);color:var(--ink)}
.roadmap .steps span{color:var(--sub)}
.first-sem{border-top:0;padding-top:0}
.stage .card:hover{border-color:#b0b8c1}
.stage .card ul{color:var(--sub)}
.stage .card li::before{color:#b0b8c1}
.stage .card .test{color:var(--mute)}
/* '가장 중요한 전환기': 카드 윗선에 걸친 태그 */
.stage .card .flag{position:absolute;top:-13px;right:14px;left:auto;z-index:2;font-size:12px;font-weight:800;color:#fff;background:var(--blue);padding:4px 10px;border-radius:99px;white-space:nowrap}

/* ---------- 04 성과 · 기타 진한 점 → 파랑 ---------- */
.msg-h span,.flow4 li::before,.certs span::before,.rp-chip{background:var(--blue)}
.yr-bar i{background:var(--blue)}

/* ---------- 08 겨울특강: 검정 섹션 → 연한 파랑 상자 ---------- */
.feat-sec{color:var(--ink)}
.feat-sec .feat-grid{width:calc(100% - 2 * var(--pad));max-width:calc(1600px - 2 * var(--pad));margin:0 auto;padding:clamp(28px,4.4vw,64px);border-radius:28px;background:var(--blue-l)}
@media (max-width:760px){.feat-sec .feat-grid{width:calc(100% - 20px);padding:28px 20px}}
.feat-sec .eyebrow{color:var(--blue)}
.feat-sec .sec-title .g{color:#8fb6f0}
.feat-sec .sec-desc{color:var(--sub)}
/* 기간 막대 */
.period{margin:26px 0 30px;max-width:460px}
.pd-top{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--sub)}
.pd-top b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.pd-bar{display:flex;gap:3px;height:10px;margin-top:8px;border-radius:99px;background:#d6e6fb;overflow:hidden}
.pd-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.4,0,.2,1)}
.pd-bar .s1{flex:21;background:#7fb0f8}
.pd-bar .s2{flex:23;background:var(--blue);transition-delay:.7s}
.period.in .pd-bar i{transform:none}
.pd-lab{display:flex;gap:3px;margin-top:10px;font-size:13px;color:var(--sub)}
.pd-lab span{display:flex;align-items:center;gap:6px}
.pd-lab .l1{flex:21}.pd-lab .l2{flex:23}
.pd-lab em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--blue)}
.feat-sec .btn-light{background:var(--blue);color:#fff;--fill:var(--blue-d)}
.feat-sec .btn-light .arrow{background:#fff;color:var(--blue)}
.tiers{border-top-color:var(--ink)}
.tier{border-bottom-color:#c9dcf7}
.tier em{color:var(--blue)}
.tier p{color:var(--sub)}

/* ---------- 마무리 상담: 파랑 상자 (섹션 배경은 흰색, 위 섹션과 거리 줄임) ---------- */
.cta-sec{padding-top:clamp(24px,3vw,48px);padding-bottom:clamp(64px,8vw,112px)}
/* 상담 상자: B의 짙은 남색 + 아이들 사진이 연하게 비침 */
.cta{position:relative;isolation:isolate;overflow:hidden;background:#0b1736}
.cta::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/d/real/dot-girls.jpg) 75% 30%/cover no-repeat;opacity:.38}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,23,54,.96) 0%,rgba(11,23,54,.86) 45%,rgba(11,23,54,.55) 100%)}
@media (min-width:761px){.cta h2 .g{display:block}}
.cta h2{color:#fff;font-weight:800;font-size:clamp(32px,4vw,60px);line-height:1.2}
.cta h2 span{color:inherit}
.cta p{color:rgba(255,255,255,.86)}
.cta .btn-dark{background:#fff;color:var(--ink);--fill:var(--ink)}
.cta .btn-dark .arrow{background:var(--blue);color:#fff}
.cta .btn-dark{background:var(--blue);color:#fff;--fill:#fff}
.cta .btn-dark .arrow{background:#fff;color:var(--blue)}
.cta .btn-dark:hover{color:var(--ink)}
.cta .btn-dark:hover .arrow{background:var(--blue);color:#fff}
.cta .btn-dark:hover{color:#fff}
.cta .btn-dark:hover .arrow{background:#fff;color:var(--blue)}
.cta-side li span{color:rgba(255,255,255,.75)}
.cta-side ul,.cta-side li{border-color:rgba(255,255,255,.18)}

/* ---------- 푸터: 메인과 같은 모양 (우주 대신 짙은 남색) · 폭은 본문(.wrap)과 같게 ---------- */
.ftr-d{background:#0b1020;color:rgba(255,255,255,.5)}
.ftr-d footer.footer{background:none;margin:0 auto;padding:48px var(--pad) 56px;max-width:1600px;overflow:visible;color:rgba(255,255,255,.5);font-size:13px;line-height:1.8}
.ftr-d .f-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:28px;padding:0;border:0}
.ftr-d .f-top .logo{color:#fff}
.ftr-d .f-links{display:flex;gap:20px;flex-wrap:wrap;color:rgba(255,255,255,.75);font-weight:600}
.ftr-d .f-links a:first-child{color:#fff}
.ftr-d .f-acad{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:16px;color:rgba(255,255,255,.62)}
.ftr-d .f-family{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.ftr-d .f-family a{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.65)}
@media (max-width:760px){.ftr-d .logo-svg{height:34px}}

/* ---------- 08 자주 묻는 질문: 왼쪽 제목 · 오른쪽 질문 목록 ---------- */
#faq .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,96px);align-items:start}
#faq .sec-head{position:sticky;top:calc(var(--gnb) + 80px);margin:0}
#faq .qa{max-width:none}
#faq .sec-title .g{display:block}
/* 열고 닫힘: 부드러운 높이 변화 */
.acc-panel{transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1)}
.qa .acc-body p{transition:opacity .45s ease .1s,translate .55s cubic-bezier(.4,0,.2,1) .05s}
@media (max-width:900px){
  #faq .wrap{grid-template-columns:1fr;gap:24px}
  #faq .sec-head{position:static}
}

/* ---------- 02 관리 시스템: 선 → 면(카드), 기울어짐 없음, 열리면 [사진 | 설명 · 칩 · 정보] ---------- */
#acc{border-top:0;display:grid;gap:10px}
#acc .acc-item{border:0;border-radius:24px;background:var(--gray2);transition:background-color .35s,box-shadow .35s}
#acc .acc-item::after,#acc .acc-btn::before{display:none}
#acc .acc-item.open{background:#fff;box-shadow:0 0 0 1px var(--line) inset,0 18px 44px -24px rgba(2,32,71,.22)}
#acc .acc-btn{padding:22px 28px}
#acc .acc-si,#acc .acc-item.open .acc-si,#acc .acc-item:not(.open) .acc-btn:hover .acc-si{transform:none}
#acc .acc-item:not(.open) .acc-btn:hover .acc-name{translate:none}
#acc .acc-item:not(.open):hover{background:var(--gray3)}
#acc .acc-si{background:#fff;box-shadow:none}
#acc .acc-item.open .acc-si{background:var(--blue-l)}
#acc .acc-name{font-size:clamp(22px,2.2vw,32px)}
#acc .acc-tag{background:#fff;border-color:var(--line)}
#acc .acc-ic{border-color:#d1d6db}
#acc .acc-item.open .acc-ic{background:var(--blue);border-color:var(--blue)}
#acc .acc-body{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"ph text" "ph info";gap:20px clamp(24px,3vw,44px);padding:4px 28px 28px;align-items:start}
#acc .acc-body .ph{grid-area:ph;aspect-ratio:4/3;border-radius:18px}
#acc .acc-body .ph.blank{aspect-ratio:4/3;min-height:0;background:var(--gray2)}
#acc .acc-text{grid-area:text}
#acc .acc-text p{font-size:17px;line-height:1.75;color:var(--ink-2)}
#acc .info{grid-area:info;align-self:end;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;border:0;background:none}
#acc .info div{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:0;border-radius:14px;background:var(--gray2)}
#acc .info dt{font-size:12.5px;color:var(--mute)}
#acc .info dd{font-size:15px;font-weight:600;color:var(--ink);text-align:left}
@media (max-width:760px){
  #acc .acc-btn{padding:18px 18px}
  #acc .acc-body{grid-template-columns:1fr;grid-template-areas:"ph" "text" "info";padding:0 18px 20px;gap:16px}
}

/* ---------- 섹션 제목: 검정 + 파랑 (메인과 같은 조합) ---------- */
.sec-title .g,.first-sem h3 .g,.feat-sec .sec-title .g,.manifesto .g{color:var(--blue)}
.cta h2 .g{color:#8fbcff}

/* ---------- 들어가는 말: PC에서는 문장마다 한 줄씩, 두 줄로 ---------- */
.mf-q{font-size:clamp(26px,3.25vw,52px);max-width:none}
@media (min-width:901px){.mf-s{white-space:nowrap}}
@media (max-width:900px){.mf-br{display:none}}

/* 어떤 섹션이든 제목 강조는 파랑 (베이스의 섹션별 회색 규칙보다 우선) */
.roadmap .sec-title .g,.feat-sec .sec-title .g,.report-sec .sec-title .g,.family .sec-title .g,#faq .sec-title .g{color:var(--blue)}

/* 단계 카드: 같은 줄의 카드 높이를 똑같이, 아래 안내 줄도 같은 선에 */
.track{align-items:stretch}
.stage{display:flex;flex-direction:column}
.stage .card{flex:1 1 auto;display:flex;flex-direction:column}
.stage .card .test{margin-top:auto}

/* 상담 서랍 · 어두운 막은 헤더(100) 위로 */
.dim{z-index:110}
.drawer{z-index:120}

/* 서랍을 열고 닫을 때 가로 스크롤 · 화면 흔들림 방지: 가로 넘침은 항상 잘라 두고(clip은 스크롤 영역을 만들지 않음), 스크롤바 자리는 고정 */
html{overflow-x:clip;scrollbar-gutter:stable}
body{overflow-x:clip}
html.lenis-stopped{overflow-y:hidden}

/* 빠른 상담(서랍): 꼭 필요한 항목만 */
.quick-form .qf-lead{font-size:14.5px;line-height:1.6;color:var(--sub)}
.quick-form .lbl small{font-weight:500;color:var(--mute)}
.quick-form .qf-more{display:block;text-align:center;font-size:13.5px;color:var(--sub);padding:4px 0}
.quick-form .qf-more b{color:var(--blue);font-weight:700}
.quick-form .qf-more:hover b{text-decoration:underline}

/* 상담 상자 안 링크 한 줄 (다른 페이지로 안내) */
.cta-link{display:block;margin-top:14px;font-size:14px;font-weight:600;color:rgba(255,255,255,.82)}
.cta-link:hover{color:#fff;text-decoration:underline}

/* 서랍 폼 가로 스크롤 방지: 칩 속 숨긴 체크박스를 칩 안에 가두고, 폼은 가로로 넘치지 않게 */
.opts label{position:relative}
.opts input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.drawer form{overflow-x:hidden}

/* 화면에는 숨기고 화면 낭독기만 읽는 글 */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

/* 페이지 안 이동 시 헤더에 가리지 않게 */
section[id],[id].sec-anchor{scroll-margin-top:calc(var(--gnb) + 20px)}