/* ══════════════════════════════════════════════════════════════
   두비전키즈 디자인 시스템  ·  2026-08-27
   본사 시안(DuVisionKids_HQ_Website_Images_2026-08-26)에서
   픽셀 단위로 추출한 값으로 구성했다. 전 페이지가 이 한 파일을 공유한다.

   ⚠ 색·라운드·그림자를 페이지에서 인라인으로 덮어쓰지 말 것.
     시안의 통일감은 "카드 한 종류, 버튼 두 종류"에서 나온다.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── 브랜드 (시안 실측) ───────────────────────────── */
  --navy:#012366;        /* 헤드라인 · 푸터 · 메인 버튼 */
  --navy-2:#0A2A6B;
  --navy-ink:#0F2247;
  --blue:#0B44CE;        /* 상담·가맹 CTA 버튼 */
  --blue-soft:#E6EFFA;
  --green:#4F9D24;       /* 새싹 · 강조어 · 아웃라인 버튼 */
  --green-deep:#2C7635;
  --green-soft:#EAF4E4;

  /* ── 배경 ─────────────────────────────────────────── */
  --bg:#FFFFFF;
  --bg-soft:#F1F7FD;
  --bg-blue:#E6EFFA;
  --line:#E4EAF3;

  /* ── 텍스트 ───────────────────────────────────────── */
  --ink:#0F2247;
  --body:#3D4A66;
  --muted:#7790B3;

  /* ── 프로그램 7색 (시안 4번 카드 톤) ─────────────────
     -x 는 카드 배경, -k 는 그 과목의 키 컬러(번호 배지·강조) */
  --p1:#FDF9EA; --p1k:#E0A317;   /* 창의력       노랑 */
  --p2:#F1F8EF; --p2k:#4F9D24;   /* 관찰력       그린 */
  --p3:#EEF6FA; --p3k:#2E7FB8;   /* 수리         블루 */
  --p4:#FBF4F7; --p4k:#C4568C;   /* 마음거울     핑크 */
  --p5:#F4F0FB; --p5k:#7B5BC4;   /* 스토리텔링   퍼플 */
  --p6:#FDF7EC; --p6k:#C98A2E;   /* 동화문해     크림 */
  --p7:#EFF7F1; --p7k:#3E9E77;   /* 봐봐그림일기 민트 */

  /* ── 형태 ─────────────────────────────────────────── */
  --r-card:16px; --r-sm:12px; --r-pill:999px;
  --shadow:0 2px 10px rgba(1,35,102,.06), 0 12px 32px rgba(1,35,102,.06);
  --shadow-up:0 6px 18px rgba(1,35,102,.10), 0 20px 44px rgba(1,35,102,.10);

  /* 헤더 높이. 앵커 보정이 이 값을 참조한다 */
  --nav-h:68px;
}

/* ── 리셋 ──────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo',
              system-ui,-apple-system,sans-serif;
  color:var(--body); background:var(--bg);
  font-size:16px; line-height:1.75; font-weight:500;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}

/* ── 레이아웃 ──────────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.wrap.narrow{max-width:960px}
section{padding:88px 0;position:relative;overflow:hidden}
section.soft{background:var(--bg-soft)}
section.tight{padding:64px 0}
.center{text-align:center}

/* 잎사귀 데코 — 시안 좌우 하단에 반복되는 연한 잎 */
.leaf{position:absolute;z-index:0;pointer-events:none;opacity:.55;user-select:none}
.leaf.l{left:-10px;bottom:40px;width:96px}
.leaf.r{right:-10px;bottom:56px;width:88px}

/* ── 타이포 ────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.8125rem;font-weight:800;letter-spacing:.12em;
  color:var(--green);text-transform:uppercase;margin-bottom:14px;
}
.eyebrow::before{content:'';width:14px;height:14px;flex:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234F9D24'%3E%3Cpath d='M12 22c0-6 3-9 9-9-1 6-4 9-9 9Z'/%3E%3Cpath d='M12 22c0-6-3-9-9-9 1 6 4 9 9 9Z' opacity='.65'/%3E%3C/svg%3E")}
.eyebrow.plain::before{display:none}

.h1{font-size:clamp(2.125rem,5.2vw,3.375rem);line-height:1.18;letter-spacing:-.035em;
    font-weight:900;color:var(--navy)}
.h2{font-size:clamp(1.625rem,3.6vw,2.5rem);line-height:1.25;letter-spacing:-.03em;
    font-weight:900;color:var(--navy)}
.h3{font-size:clamp(1.125rem,2.2vw,1.375rem);line-height:1.4;letter-spacing:-.02em;
    font-weight:800;color:var(--navy)}
.lead{font-size:clamp(1.0625rem,2vw,1.25rem);color:var(--body);font-weight:600;line-height:1.7}
.desc{font-size:1rem;color:var(--body);line-height:1.8}
.small{font-size:.875rem;color:var(--muted);line-height:1.7}
.note{font-size:.8125rem;color:var(--muted)}
.g{color:var(--green)}        /* 그린 강조어 */
.n{color:var(--navy)}
em{font-style:normal;color:var(--green);font-weight:900}

/* ── 버튼 (딱 두 종류) ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:54px;padding:0 30px;border-radius:var(--r-sm);
  font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#02306F;transform:translateY(-2px);box-shadow:0 10px 24px rgba(1,35,102,.25)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#0A3CB6;transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,68,206,.25)}
.btn-line{background:#fff;color:var(--green-deep);box-shadow:inset 0 0 0 1.5px var(--green)}
.btn-line:hover{background:var(--green-soft);transform:translateY(-2px)}
.btn-sm{height:44px;padding:0 20px;font-size:.9375rem;border-radius:10px}
.btn-full{width:100%}
.btn .arw{font-size:1.05em;line-height:1;transform:translateY(-1px)}

.btnrow{display:flex;flex-wrap:wrap;gap:12px}
.btnrow.center{justify-content:center}

/* ── 카드 (딱 한 종류) ─────────────────────────────── */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:26px;position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-up)}
.card h3{margin-bottom:8px}
.card .desc{font-size:.9375rem;color:var(--body)}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* 번호 배지 — 시안 3번 '01~04' */
.numb{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:26px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--navy);color:#fff;font-size:.8125rem;font-weight:900;letter-spacing:.02em;
}
.numb.g{background:var(--green);color:#fff}

/* 알약 배지 — '과목당 20~30분' 류 */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  font-size:.875rem;font-weight:700;color:var(--navy);
}

/* 네이비 띠 문장 — 시안 2·3번 하단 */
.band{
  background:var(--navy);color:#fff;border-radius:var(--r-pill);
  padding:18px 34px;display:inline-flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:10px;font-size:clamp(1rem,2.2vw,1.25rem);font-weight:800;
}
.band em{color:#8FD860}
.band.wide{border-radius:0;width:100%;padding:22px 24px;justify-content:center}

/* ── 스텝 흐름 (점선 커넥터) ───────────────────────── */
.steps{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);position:relative}
.steps .step{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 18px;position:relative;box-shadow:var(--shadow)}
.steps .step .k{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.steps .step h4{font-size:.9375rem;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.steps .step p{font-size:.8438rem;color:var(--muted);line-height:1.65}
/* 카드 사이 점선 화살표 */
.steps .step + .step::before{
  content:'';position:absolute;left:-16px;top:50%;width:16px;
  border-top:2px dotted var(--line);
}
.steps.flow4{grid-template-columns:repeat(4,1fr)}

/* 아이콘 원판 */
.disc{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-soft);font-size:1.5rem;flex:none}
.disc.g{background:var(--green-soft)}
.disc.b{background:var(--blue-soft)}

/* ── 상단 GNB ──────────────────────────────────────── */
.gnb{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.gnb .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:9px;font-size:1.25rem;font-weight:900;
  color:var(--navy);letter-spacing:-.03em}
.brand img,.brand svg{width:38px;height:auto}
.gnb nav{display:flex;align-items:center;gap:30px}
.gnb nav a{font-size:.9375rem;font-weight:700;color:var(--body);padding:6px 0;
  border-bottom:2px solid transparent;transition:color .18s}
.gnb nav a:hover{color:var(--navy)}
.gnb nav a.on{color:var(--navy);font-weight:800;border-bottom-color:var(--green)}
.burger{display:none;width:44px;height:44px;place-items:center}
.burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;
  position:relative;transition:.2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:22px;
  height:2px;background:var(--navy);border-radius:2px;transition:.2s}
.burger span::before{top:-7px}.burger span::after{top:7px}
body.navopen .burger span{background:transparent}
body.navopen .burger span::before{top:0;transform:rotate(45deg)}
body.navopen .burger span::after{top:0;transform:rotate(-45deg)}

.mobnav{position:fixed;inset:var(--nav-h) 0 auto 0;background:#fff;
  border-bottom:1px solid var(--line);padding:10px 24px 22px;
  transform:translateY(-12px);opacity:0;visibility:hidden;transition:.2s;z-index:49}
body.navopen .mobnav{transform:none;opacity:1;visibility:visible}
.mobnav a{display:block;padding:14px 4px;font-weight:700;color:var(--navy);
  border-bottom:1px solid var(--line)}
.mobnav .btn{margin-top:16px;width:100%}
.scrim{position:fixed;inset:0;background:rgba(15,34,71,.28);opacity:0;visibility:hidden;
  transition:.2s;z-index:48}
body.navopen .scrim{opacity:1;visibility:visible}
body.navopen{overflow:hidden}

/* ── 히어로 ────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,#fff 0%,#F5FAFE 45%,var(--bg-blue) 100%);
  padding:72px 0 0;overflow:visible}
.hero .hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.hero .copy{padding-bottom:56px}
.hero .h1{margin-bottom:18px}
.hero .lead{margin-bottom:30px}
.hero .art{position:relative;justify-self:center;align-self:end}
.hero .art img{max-height:520px;width:auto;margin:0 auto}

/* 히어로 하단 7과목 칩 바 */
.chipbar{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:10px 16px;box-shadow:var(--shadow);margin:0 auto;
  width:max-content;max-width:100%;
  transform:translateY(50%);position:relative;z-index:3;
}
.chipbar a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border-radius:var(--r-pill);font-size:.875rem;font-weight:700;color:var(--navy);
  transition:background .18s}
.chipbar a:hover{background:var(--bg-soft)}
.chipbar .dot{width:8px;height:8px;border-radius:50%;flex:none}

/* ── 프로그램 카드 그리드 (4 + 3) ──────────────────── */
.progs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.progs .p{grid-column:span 1}
/* 둘째 줄 3장을 가운데로 — 12칸 기준 재배치 */
.progs.r43{grid-template-columns:repeat(12,1fr)}
.progs.r43 > *:nth-child(-n+4){grid-column:span 3}
.progs.r43 > *:nth-child(n+5){grid-column:span 4}

.prog{display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;
  transition:transform .2s ease, box-shadow .2s ease}
.prog:hover{transform:translateY(-5px);box-shadow:var(--shadow-up)}
.prog .thumb{aspect-ratio:16/10;display:grid;place-items:center;padding:10px}
.prog .thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.prog .txt{padding:16px 18px 20px;text-align:center;background:#fff;flex:1}
.prog .txt h3{font-size:1.0625rem;margin-bottom:6px}
.prog .txt p{font-size:.875rem;color:var(--muted);line-height:1.6}
.prog .more{margin-top:10px;font-size:.8125rem;font-weight:800;color:var(--green-deep)}

/* ── BTS 4단계 계단 ────────────────────────────────── */
.stairs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end}
.stair{border-radius:var(--r-card);padding:22px 20px;position:relative;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.stair:nth-child(1){background:#EAF3FB;min-height:190px}
.stair:nth-child(2){background:#EAF6EC;min-height:220px}
.stair:nth-child(3){background:#FDF6E4;min-height:250px}
.stair:nth-child(4){background:#F1ECFB;min-height:280px}
.stair .tag{display:inline-block;background:var(--navy);color:#fff;font-size:.75rem;
  font-weight:900;letter-spacing:.06em;padding:5px 14px;border-radius:var(--r-pill);
  margin-bottom:10px}
.stair h3{font-size:1.1875rem;margin-bottom:6px}
.stair p{font-size:.875rem;color:var(--body);line-height:1.65}

/* ── 스펙 바 (과목당 20~30분 · 난이도 · BTS) ───────── */
.specbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 0;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);
  padding:18px 12px}
.specbar .s{flex:1 1 220px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:.9375rem;font-weight:800;color:var(--navy);position:relative}
.specbar .s + .s::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:22px;background:var(--line)}
.specbar .s .disc{width:36px;height:36px;font-size:1.0625rem;background:#fff}

/* ── 상담 3트랙 ────────────────────────────────────── */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.track{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:28px 24px;text-align:center;display:flex;
  flex-direction:column;align-items:center;gap:6px}
.track .disc{width:76px;height:76px;font-size:2rem;margin-bottom:6px}
.track .who{font-size:1rem;font-weight:900;color:var(--green-deep)}
.track h3{font-size:1.1875rem}
.track p{font-size:.875rem;color:var(--muted);line-height:1.6;margin-bottom:8px}
.track .btn{margin-top:auto;width:100%}

/* ── 폼 ────────────────────────────────────────────── */
.form{max-width:520px;margin:0 auto;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:28px}
.form label{display:block;font-size:.875rem;font-weight:800;color:var(--navy);
  margin:16px 0 7px}
.form label:first-of-type{margin-top:0}
.form input,.form select,.form textarea{
  width:100%;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-weight:600;color:var(--ink);background:#fff;transition:border-color .18s}
.form textarea{height:auto;padding:14px 16px;min-height:96px;line-height:1.6;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,157,36,.12)}
.form .btn{margin-top:22px}
.form .note{margin-top:12px;text-align:center}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{margin:0;flex:1 1 120px}
.radios input{position:absolute;opacity:0;width:0;height:0}
.radios span{display:flex;align-items:center;justify-content:center;height:46px;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:.9062rem;font-weight:700;
  color:var(--body);cursor:pointer;transition:.18s}
.radios input:checked + span{border-color:var(--green);background:var(--green-soft);
  color:var(--green-deep);font-weight:800}

/* ── 푸터 ──────────────────────────────────────────── */
footer{background:var(--navy);color:#fff;padding:44px 0 36px}
footer .top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;
  padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.16)}
footer .brand{color:#fff}
footer nav{display:flex;flex-wrap:wrap;gap:22px}
footer nav a{font-size:.9062rem;font-weight:700;color:rgba(255,255,255,.9)}
footer nav a:hover{color:#fff;text-decoration:underline}
footer .biz{margin-top:20px;font-size:.8125rem;line-height:1.9;color:rgba(255,255,255,.72)}
footer .biz a{color:rgba(255,255,255,.92);text-decoration:underline}
footer .cr{margin-top:14px;font-size:.8125rem;color:rgba(255,255,255,.6)}

/* ── 스크롤 리빌 ───────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}
.rv.d3{transition-delay:.21s}.rv.d4{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── 반응형 ────────────────────────────────────────── */
@media(max-width:1024px){
  .progs.r43{grid-template-columns:repeat(6,1fr)}
  .progs.r43 > *:nth-child(-n+4),
  .progs.r43 > *:nth-child(n+5){grid-column:span 2}
  .stairs{grid-template-columns:repeat(2,1fr)}
  .stair{min-height:0 !important}
  .steps,.steps.flow4{grid-template-columns:repeat(2,1fr)}
  .steps .step + .step::before{display:none}
}
@media(max-width:860px){
  .gnb nav{display:none}
  .burger{display:grid}
  .hero .hgrid{grid-template-columns:1fr;text-align:center}
  .hero .copy{padding-bottom:24px}
  .hero .btnrow{justify-content:center}
  .hero .art img{max-height:300px}
  .g3,.g4,.tracks{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
}
@media(max-width:600px){
  section{padding:64px 0}
  .wrap{padding:0 18px}
  .progs.r43{grid-template-columns:repeat(2,1fr)}
  .progs.r43 > *{grid-column:span 1 !important}
  .steps,.steps.flow4,.stairs{grid-template-columns:1fr}
  .chipbar{border-radius:var(--r-card);transform:translateY(28px)}
  .specbar .s + .s::before{display:none}
  .btn{width:100%}
  .btnrow{flex-direction:column}
  footer .top{flex-direction:column;align-items:flex-start}
}


/* ══ 프로그램 상세 페이지 ═══════════════════════════════════
   7페이지가 같은 골격을 쓴다. --tone(배경) / --key(키 컬러)만
   과목별로 바뀐다. scripts/gen-programs.mjs 가 인라인으로 주입한다. */
.phero{background:linear-gradient(180deg,#fff 0%,var(--tone,var(--bg-soft)) 100%);
  padding:56px 0 64px;overflow:visible}
.phero .hgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:28px;align-items:center}
.phero .eyebrow{color:var(--key,var(--green))}
.phero .eyebrow::before{display:none}
.pname{font-size:clamp(1.25rem,2.6vw,1.625rem);font-weight:900;color:var(--navy);
  letter-spacing:-.03em;margin-bottom:10px}
.phero .h1{margin-bottom:16px}
/* 직계 자식만 — 안에 .vid(영상 썸네일)를 넣는 페이지가 있는데,
   multiply 가 상속되면 검은 배경과 곱해져 썸네일이 새까맣게 된다. */
.phero .art > img{max-height:340px;width:auto;margin:0 auto;
  /* 카드 원본의 흰 배경을 톤 배경에 녹인다 — 흰 사각형이 뜨는 것을 막는다 */
  mix-blend-mode:multiply}

.pbody{display:grid;grid-template-columns:1.45fr 1fr;gap:28px;align-items:start}
.pbody .steps{grid-template-columns:repeat(2,1fr)}

/* 기르는 힘 — 아이콘 원판 3개 */
.powers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
.powers .pw .disc{margin:0 auto 8px;width:64px;height:64px;font-size:1.6rem;
  background:var(--tone,var(--bg-soft))}
.powers .pw b{font-size:.875rem;font-weight:800;color:var(--navy);letter-spacing:-.02em}

/* 활동 예시 박스 */
.exbox{margin-top:16px;background:var(--tone,var(--bg-soft));border:1px solid var(--line);
  border-radius:var(--r-card);padding:20px 22px}
.exbox h4{font-size:.9375rem;font-weight:900;color:var(--navy);margin-bottom:8px}
.exbox p{font-size:.9062rem;color:var(--body);line-height:1.7}
.exbox.plain{background:#fff}

/* 과목 간 이동 */
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.pnav a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px 22px;
  transition:transform .2s ease, box-shadow .2s ease}
.pnav a:hover{transform:translateY(-3px);box-shadow:var(--shadow-up)}
.pnav a.next{justify-content:flex-end;text-align:right}
.pnav .lb{font-size:.75rem;font-weight:800;color:var(--muted);letter-spacing:.06em}
.pnav .nm{font-size:1.0625rem;font-weight:900;color:var(--navy);letter-spacing:-.02em}

/* 9칸 장면기억법 / 도트카드 — 크롭 대신 마크업으로 그린다.
   시안 합성본에서 잘라낸 저해상 이미지보다 선명하고 반응형에도 강하다. */
.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:186px;
  background:var(--line);padding:6px;border-radius:12px}
.grid9 i{aspect-ratio:1;background:#fff;border-radius:8px;display:grid;place-items:center;
  font-size:1.125rem;font-style:normal}
.dotcards{display:flex;gap:10px;flex-wrap:wrap}
.dotcard{width:76px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:8px;text-align:center;box-shadow:var(--shadow)}
.dotcard .dg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:6px}
.dotcard .dg s{display:block;aspect-ratio:1;border-radius:50%;background:var(--key,var(--green))}
.dotcard .dg s.off{background:transparent}
.dotcard b{font-size:1rem;font-weight:900;color:var(--key,var(--navy))}

@media(max-width:1024px){
  .pbody{grid-template-columns:1fr}
}
@media(max-width:860px){
  .phero .hgrid{grid-template-columns:1fr;text-align:center}
  .phero .art img{max-height:250px}
  .powers{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .pnav{grid-template-columns:1fr}
  .pnav a.next{justify-content:flex-start;text-align:left}
}


/* ══ 교육 현장 페이지 (실사진·후기·영상·근거) ══════════════
   본사 지침은 "아동·교사 사람 이미지 미사용"이지만, 그건 메인 화면 구성안의
   기준이다. 실제 수업 사진과 학부모 후기는 전환의 핵심 자산이라 폐기하지 않고
   이 페이지로 분리해 보존한다. (설계서 §10 결정 A) */
.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.photos figure{margin:0;border-radius:var(--r-card);overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.photos figure.w2{grid-column:span 2}
.photos img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.photos figure.w2 img{aspect-ratio:16/9}
.photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;
  color:#fff;font-size:.8125rem;font-weight:700;line-height:1.4;
  background:linear-gradient(180deg,rgba(15,34,71,0),rgba(15,34,71,.72))}

.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shots figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);overflow:hidden}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.shots figcaption{padding:14px 16px;font-size:.875rem;color:var(--body);line-height:1.5}
.shots figcaption b{color:var(--navy);font-weight:900}

.videos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.shorts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vid{position:relative;border-radius:var(--r-card);overflow:hidden;cursor:pointer;
  background:#000;border:1px solid var(--line);box-shadow:var(--shadow)}
.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s ease}
.vid:hover img{transform:scale(1.04)}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.vid .play{position:absolute;inset:0;display:grid;place-items:center}
.vid .play span{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.94);
  box-shadow:0 6px 18px rgba(0,0,0,.28);display:grid;place-items:center}
/* 재생 삼각형 — 아이콘 파일 없이 border 로 그린다 */
.vid .play span::after{content:'';width:0;height:0;margin-left:5px;
  border-left:18px solid var(--navy);
  border-top:11px solid transparent;border-bottom:11px solid transparent}
.vid .vt{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;
  font-size:.8438rem;font-weight:700;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.66))}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:26px}
.quote .mk{font-size:2rem;line-height:1;color:var(--bg-blue);font-weight:900}
.quote p{font-size:.9375rem;color:var(--body);line-height:1.75;margin:6px 0 14px}
.quote .who{font-size:.8125rem;font-weight:800;color:var(--muted)}

.faq{max-width:840px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:800;
  color:var(--navy);font-size:1rem;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--green);font-weight:900;flex:none}
.faq details[open] summary::after{content:'−'}
.faq details > *:not(summary){padding:0 22px 20px;font-size:.9375rem;line-height:1.8}
.faq ol{padding-left:42px;list-style:decimal}
.faq ol li{margin-bottom:8px}
.disclaimer{max-width:840px;margin:22px auto 0;font-size:.8125rem;color:var(--muted);
  line-height:1.8;text-align:left}

@media(max-width:1024px){
  .photos{grid-template-columns:repeat(2,1fr)}
  .shots,.quotes{grid-template-columns:repeat(2,1fr)}
  .shorts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .photos,.shots,.quotes,.videos,.shorts{grid-template-columns:1fr}
  .photos figure.w2{grid-column:span 1}
}


/* ══ 가맹 · 방문교사 페이지 공통 컴포넌트 ═══════════════════ */

/* 네이비 섹션 — 시안의 띠(.band)를 섹션 크기로 확장한 것 */
section.dark{background:var(--navy);color:rgba(255,255,255,.86)}
section.dark .h1,section.dark .h2,section.dark .h3{color:#fff}
section.dark .lead,section.dark .desc{color:rgba(255,255,255,.82)}
section.dark .note,section.dark .small{color:rgba(255,255,255,.6)}
section.dark em{color:#8FD860}
section.dark .eyebrow{color:#8FD860}
section.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);
  box-shadow:none;color:rgba(255,255,255,.82)}
section.dark .card .h3,section.dark .card h3{color:#fff}
section.dark .btn-line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
section.dark .btn-line:hover{background:rgba(255,255,255,.12)}

/* 네이비 섹션 안의 흰 폼 카드는 위 규칙(흰 글씨)을 되돌려야 한다.
   되돌리지 않으면 제목·라벨·안내문이 흰 배경에 흰 글씨로 사라진다. */
section.dark .form{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
section.dark .form .h1,section.dark .form .h2,section.dark .form .h3,
section.dark .form h3,section.dark .form label{color:var(--navy)}
section.dark .form .note,section.dark .form .small{color:var(--muted)}
section.dark .form .desc,section.dark .form p{color:var(--body)}
section.dark .form input,section.dark .form select,section.dark .form textarea{
  background:#fff;color:var(--ink);border-color:var(--line)}

/* 숫자 통계 밴드 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{text-align:center;padding:22px 14px;border-radius:var(--r-card);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
section.dark .stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);box-shadow:none}
.stat .v{font-size:clamp(1.5rem,3.4vw,2.125rem);font-weight:900;color:var(--navy);
  letter-spacing:-.03em;line-height:1.15}
section.dark .stat .v{color:#fff}
.stat .v small{font-size:.5em;font-weight:800;margin-left:2px}
.stat .k{margin-top:8px;font-size:.8125rem;color:var(--muted);line-height:1.5;font-weight:600}
section.dark .stat .k{color:rgba(255,255,255,.66)}

/* 2열 비교표 */
.compare{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow);background:#fff}
.compare .r{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.compare .r:first-child{border-top:0}
.compare .r > div{padding:16px 20px;font-size:.9375rem;line-height:1.6}
.compare .r > div:first-child{color:var(--muted);border-right:1px solid var(--line)}
.compare .r > div:last-child{color:var(--navy);font-weight:700;background:#FAFCFF}
.compare .r.head > div{font-weight:900;color:var(--navy);background:var(--bg-soft);font-size:.875rem}
.compare .r.head > div:last-child{background:var(--green-soft);color:var(--green-deep)}

/* 3열 비교 카드 */
.vs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vs .c{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:24px}
.vs .c.on{border-color:var(--green);box-shadow:0 0 0 3px rgba(79,157,36,.10),var(--shadow)}
.vs .c h3{font-size:1.0625rem;font-weight:900;color:var(--navy);margin-bottom:14px}
.vs .c li{display:flex;gap:8px;font-size:.9062rem;color:var(--body);padding:6px 0}
.vs .c li::before{content:'\B7';color:var(--muted);font-weight:900;flex:none;width:12px}
.vs .c.on li::before{content:'\2713';color:var(--green);font-size:.875rem}

/* 세로 타임라인 */
.timeline{position:relative}
.timeline::before{content:'';position:absolute;left:27px;top:14px;bottom:14px;width:2px;
  background:var(--line)}
.timeline .t{display:flex;gap:20px;align-items:flex-start;padding:12px 0;position:relative}
.timeline .d{flex:none;width:56px;height:32px;border-radius:var(--r-pill);background:var(--navy);
  color:#fff;font-size:.8125rem;font-weight:900;display:grid;place-items:center;
  position:relative;z-index:1}
.timeline h3{font-size:1.0625rem;font-weight:900;color:var(--navy);margin-bottom:4px}
.timeline p{font-size:.9062rem;color:var(--body);line-height:1.65}

/* 비용 표 */
.costs{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);overflow:hidden;text-align:left}
section.dark .costs{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);box-shadow:none}
.costs .r{display:flex;justify-content:space-between;gap:16px;padding:16px 22px;
  border-top:1px solid var(--line);font-size:.9375rem}
section.dark .costs .r{border-top-color:rgba(255,255,255,.14)}
.costs .r:first-child{border-top:0}
.costs .r .k{color:var(--body);font-weight:600}
section.dark .costs .r .k{color:rgba(255,255,255,.78)}
.costs .r .v{color:var(--navy);font-weight:900;white-space:nowrap}
section.dark .costs .r .v{color:#fff}
.costs .r.sum{background:var(--bg-soft)}
section.dark .costs .r.sum{background:rgba(143,216,96,.12)}
.costs .r.sum .k,.costs .r.sum .v{color:var(--navy);font-weight:900}
section.dark .costs .r.sum .k,section.dark .costs .r.sum .v{color:#8FD860}

/* 적합도 체크리스트 */
.checks{display:grid;gap:10px}
.checks button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 20px;
  font-size:.9375rem;font-weight:600;color:var(--body);box-shadow:var(--shadow);transition:.18s}
.checks button::before{content:'';width:20px;height:20px;border-radius:6px;flex:none;
  border:1.5px solid var(--line);transition:.18s}
.checks button[aria-pressed="true"]{border-color:var(--green);background:var(--green-soft);
  color:var(--navy);font-weight:800}
.checks button[aria-pressed="true"]::before{background:var(--green);border-color:var(--green);
  box-shadow:inset 0 0 0 3px var(--green-soft)}
.checkout{margin-top:18px;background:var(--green-soft);border:1px solid var(--green);
  border-radius:var(--r-card);padding:22px;text-align:center}
.checkout p{font-size:.9375rem;color:var(--green-deep);font-weight:700;margin-bottom:14px}

/* 강조 안내 박스 (영업지역 · 미확정 항목 등) */
.callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--r-card);box-shadow:var(--shadow);padding:24px 26px}
section.dark .callout{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);
  border-left-color:#8FD860;box-shadow:none}
.callout h3{font-size:1.0625rem;font-weight:900;color:var(--navy);margin-bottom:10px}
section.dark .callout h3{color:#fff}
.callout li{font-size:.9375rem;line-height:1.8;padding-left:16px;position:relative}
.callout li::before{content:'\B7';position:absolute;left:2px;color:var(--green);font-weight:900}
.callout .cite{display:block;margin-top:12px;font-size:.8125rem;color:var(--muted)}
section.dark .callout .cite{color:rgba(255,255,255,.6)}

@media(max-width:1024px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .vs{grid-template-columns:1fr}
}
@media(max-width:600px){
  .stats{grid-template-columns:1fr}
  .compare .r{grid-template-columns:1fr}
  .compare .r > div:first-child{border-right:0;border-bottom:1px solid var(--line)}
}


/* ══ 본사 시안 컷(images/hq/*) 배치용 ═══════════════════════
   시안의 3D 렌더 아이콘·두비 컷을 그대로 얹는다.
   emoji 자리표시를 전부 이 이미지로 교체했다. */

/* 아이콘 — 시안 컷은 자체 배경(연한 원판)을 갖고 있어 원판을 덧대지 않는다 */
.ic{display:block;width:64px;height:64px;object-fit:contain;flex:none}
.ic.xs{width:36px;height:36px}
.ic.sm{width:46px;height:46px}
.ic.md{width:80px;height:80px}
.ic.lg{width:104px;height:104px}
.ic.c{margin-left:auto;margin-right:auto}

/* 사진이 얹힌 카드 (수업 형태 · 수업 속 변화) */
.card.photo{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.photo > img{width:100%;aspect-ratio:16/10;object-fit:cover;
  border-bottom:1px solid var(--line)}
.card.photo .body{padding:22px 22px 26px;flex:1}
.card.photo .body .h3{display:flex;align-items:center;gap:10px;margin-bottom:8px}

/* BTS 계단 — 두비가 블록 위에 올라선 시안 구도를 그대로 만든다 */
.stairs{padding-top:150px}
.stair{position:relative}
.stair .mascot{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  width:auto;max-height:140px;margin-bottom:6px;pointer-events:none}

/* 섹션 곁에 세우는 두비 */
.withdubi{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:end}
.withdubi > img{max-height:340px;width:auto;align-self:end}

@media(max-width:1024px){
  .stairs{padding-top:130px}
  .stair .mascot{max-height:118px}
}
@media(max-width:860px){
  .withdubi{grid-template-columns:1fr}
  .withdubi > img{max-height:220px;margin:0 auto}
}
@media(max-width:600px){
  .stairs{padding-top:0}
  .stair{padding-top:96px}
  .stair .mascot{bottom:auto;top:8px;margin-bottom:0;max-height:88px}
}


/* 프로그램 상세 — 시안 단계 삽화 / 활동 예시 컷 */
.steps .step .stepart{width:100%;height:92px;object-fit:contain;object-position:center;
  margin-bottom:12px;display:block}
.exbox .exrow{display:flex;gap:14px;align-items:center}
.exbox .exart{width:76px;height:76px;object-fit:contain;flex:none}
@media(max-width:600px){
  .exbox .exrow{flex-direction:column;align-items:flex-start}
}


/* ══ 두비전 (초등 이상) ═══════════════════════════════════════
   같은 브랜드 토큰을 쓰되 톤만 낮춘다. 근거: 신규사업 검토서 p7
   「초등 이상 = 차분한 교실·학습 중심 디자인 / 유아 캐릭터를
    과도하게 사용하지 않음」. 그래서 두비 마스코트와 파스텔
   과목 톤을 이 페이지에서는 쓰지 않는다. */

/* 브랜드 전환바 — 두비전 ↔ 두비전키즈 동선을 분리해 보여준다 */
.brandbar{background:linear-gradient(90deg,#012366 0%,#0A2A6B 60%,#123C93 100%);color:#fff}
.brandbar .bb{max-width:1180px;margin:0 auto;padding:0 24px;height:42px;
  display:flex;align-items:center;justify-content:center;gap:10px}
.brandbar .lead{font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.78)}
.brandbar .now{font-size:.8125rem;font-weight:900}
.brandbar a{display:inline-flex;align-items:center;gap:4px;padding:5px 14px;border-radius:999px;
  font-size:.75rem;font-weight:800;white-space:nowrap;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);transition:background .18s}
.brandbar a:hover{background:rgba(255,255,255,.26)}
.brandbar a.solid{background:#fff;color:#012366;box-shadow:none}
.brandbar a.solid:hover{background:rgba(255,255,255,.88)}
@media(max-width:640px){.brandbar .lead{display:none}.brandbar .bb{gap:8px;padding:0 16px}}
/* 브랜드바·시안바는 sticky 가 아니라 함께 스크롤된다.
   따라서 GNB 는 top:0 그대로, --nav-h(68px)도 그대로 맞는다. */

/* 진한 히어로 — 아이 사진 대신 문장과 데이터로 연다 */
.prohero{background:
    radial-gradient(1200px 500px at 78% 15%, rgba(143,216,96,.16), transparent 60%),
    linear-gradient(160deg,#012366 0%,#02205C 55%,#01173F 100%);
  color:rgba(255,255,255,.86);padding:84px 0 96px;overflow:hidden;position:relative}
.prohero .h1{color:#fff;letter-spacing:-.04em}
.prohero .lead{color:rgba(255,255,255,.80)}
.prohero .eyebrow{color:#8FD860}
.prohero .grid2{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.prohero .prolead{font-size:clamp(1.0625rem,2.1vw,1.25rem);font-weight:700;line-height:1.75;
  color:#fff;border-left:3px solid #8FD860;padding-left:20px;margin:26px 0 30px}
.prohero .prolead small{display:block;margin-top:10px;font-size:.8125rem;font-weight:600;
  color:rgba(255,255,255,.55)}
/* 진한 배경 위 버튼 두 종 */
.prohero .btn-primary{background:#fff;color:var(--navy)}
.prohero .btn-primary:hover{background:rgba(255,255,255,.9);transform:translateY(-2px)}
.prohero .btn-ghost{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.prohero .btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.proshot{background:#fff;border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.proshot img{width:100%;display:block}
.proshot .cap{padding:16px 20px;font-size:.8438rem;color:var(--body);line-height:1.6}
.proshot .cap b{color:var(--navy)}

/* 단계 라벨 — '이해의 계단' 5단계를 페이지에 그대로 새긴다 */
.stair-label{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:900;
  letter-spacing:.08em;color:var(--green-deep);background:var(--green-soft);
  border-radius:999px;padding:6px 14px;margin-bottom:14px}
section.dark .stair-label{color:#8FD860;background:rgba(143,216,96,.14)}

/* 세 기둥 (기억법 · 뉴로피드백 · 검사) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.pillar picture{display:block}
.pillar img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center;
  border-bottom:1px solid var(--line)}
.pillar .body{padding:24px;flex:1;display:flex;flex-direction:column}
.pillar .no{font-size:.75rem;font-weight:900;letter-spacing:.08em;color:var(--green-deep)}
.pillar h3{font-size:1.1875rem;font-weight:900;color:var(--navy);margin:8px 0 10px;
  letter-spacing:-.02em}
.pillar p{font-size:.9375rem;color:var(--body);line-height:1.75}
.pillar .facts{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.pillar .facts li{font-size:.875rem;color:var(--muted);padding:3px 0 3px 14px;position:relative}
.pillar .facts li::before{content:'';position:absolute;left:2px;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--green)}

/* 운영 기준 표 */
.opsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ops{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:22px 20px}
.ops .k{font-size:.8125rem;font-weight:700;color:var(--muted)}
.ops .v{font-size:1.25rem;font-weight:900;color:var(--navy);letter-spacing:-.02em;margin-top:6px}
.ops .n{font-size:.8125rem;color:var(--muted);margin-top:6px;line-height:1.6}

/* 미확정 표기 — 본사 회신 전 항목임을 화면에서도 숨기지 않는다 */
.tbd{display:inline-block;font-size:.6875rem;font-weight:900;letter-spacing:.04em;
  color:#B26A00;background:#FFF3DB;border:1px solid #FFE0A8;border-radius:6px;
  padding:2px 8px;margin-left:6px;vertical-align:2px}
section.dark .tbd{color:#FFD79A;background:rgba(255,196,90,.16);border-color:rgba(255,196,90,.35)}

/* 시안 워터마크 바 */
.draftbar{background:#FFF3DB;border-bottom:1px solid #FFE0A8;color:#7A4B00;
  font-size:.8125rem;font-weight:700;text-align:center;padding:10px 24px;line-height:1.6}
.draftbar b{font-weight:900}

@media(max-width:1024px){
  .pillars{grid-template-columns:1fr}
  .opsgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .prohero .grid2{grid-template-columns:1fr}
}
@media(max-width:600px){
  .opsgrid{grid-template-columns:1fr}
  .prohero{padding:56px 0 64px}
}

@media print{.gnb,.mobnav,.scrim,.leaf{display:none}}