@charset "utf-8";
/* =========================================================================
   학원 랜딩 프리미엄 양식 — style.css
   Art Direction : "데이터로 증명하는 사립 명문 — 잉크와 골드의 격"
   Base : 잉크/페이퍼 중립 78%  ·  Accent(주색·강조색·보조색) 합계 22% 이내
   테마 교체 = :root 색 토큰만 (js/render.js 의 THEMES 가 주입)
   ========================================================================= */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* ink & paper */
  --ink-950:#14181B;  --ink-700:#3C4247;  --ink-500:#6B7378;
  --paper:#FAF9F5;    --paper-2:#F1EEE5;  --paper-3:#FFFFFF;

  /* 주색(pri) · 강조색(acc) · 보조색(sec) — 프리셋은 js/render.js THEMES */
  --pri-900:#0E5D5F; --pri-700:#1F6B6D; --pri-500:#3E9A9C; --pri-100:#E1F0EF;
  --soft-rgb:97,192,195; --pri9-rgb:14,93,95; --pri5-rgb:62,154,156; --sec-rgb:235,101,130; --sec5-rgb:194,88,111; --acc-rgb:252,209,84;
  --acc-light:#FFEDB6; --acc-dark:#E5B341; --acc-hover:#FFDE7C; --on-acc:#3A2B08;
  --hero-1:#E9F6F6; --hero-2:#FBFAF3; --hero-3:#FFF7E6; --hero-4:#FDF0F3; --contact-1:#0B4A4D;
  /* 다크 밴드 베이스 — 순검정이 아니라 주색 계열 딥톤 */
  --deep:#0E3F43;    --deep-2:#0A2E31;
  --acc-800:#7C5C15; --acc-700:#9C7423; --acc-400:#FCD154;
  --sec-700:#9C3B52; --sec-500:#C2586F; --sec-100:#F5E7EB;
  --ink-ind:#4B4696; --ink-moss:#3F6B47;

  /* lines & shadows (ink 계열로 통일) */
  --line:rgba(20,24,27,.09);
  --line-2:rgba(20,24,27,.16);
  --line-d:rgba(255,255,255,.12);
  --line-d2:rgba(255,255,255,.22);
  --sh-1:0 1px 3px rgba(20,24,27,.05);
  --sh-2:0 12px 24px -8px rgba(20,24,27,.14);
  --sh-3:0 24px 48px -12px rgba(20,24,27,.22);

  /* radius ladder */
  --r-xs:8px; --r-s:12px; --r-m:18px; --r-l:24px; --r-xl:32px;

  /* metrics */
  --wrap:1200px; --hdr-h:78px; --gut:26px;

  /* easing */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-std:cubic-bezier(.4,0,.2,1);
  --e-num:cubic-bezier(.22,1,.36,1);

  /* type scale */
  --sans:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,-apple-system,sans-serif;
  --fs-dxl:clamp(36px,4.2vw + 8px,64px);
  --fs-dl:clamp(28px,2.4vw + 14px,44px);
  --fs-dm:clamp(20px,1.2vw + 14px,26px);
  --fs-bl:clamp(17px,.4vw + 15px,19px);
  --fs-bm:16px;
  --fs-bs:14px;
  --fs-lb:13px;
  --fs-num:clamp(32px,2.4vw + 20px,52px);
}

/* ── 2. BASE ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;background:var(--paper);color:var(--ink-950);
  font-family:var(--sans);font-size:var(--fs-bm);line-height:1.7;
  letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:3px solid var(--pri-700);outline-offset:3px;border-radius:6px}
@media (forced-colors:active){
  :focus-visible{outline:3px solid ButtonText;outline-offset:3px}
}
.band :focus-visible,.contact :focus-visible,.ftr :focus-visible,
.quote :focus-visible,.bhero :focus-visible,.sci-card.lead :focus-visible{outline-color:var(--acc-400)}
sup{font-size:.58em;vertical-align:super;line-height:0;font-weight:600;opacity:.75;margin-left:1px}
svg.i{width:1.05em;height:1.05em;fill:currentColor;flex:0 0 auto}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:860px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:14px;top:-64px;z-index:400;background:var(--ink-950);color:#fff;padding:12px 20px;border-radius:var(--r-xs);font-weight:700;transition:top .2s}
.skip:focus{top:14px}
.tbd{color:var(--sec-700);font-weight:700}

/* scroll progress */
.sprog{position:fixed;inset:0 0 auto 0;height:2px;z-index:300;background:transparent;pointer-events:none}
.sprog span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pri-700),var(--acc-400));transition:width .1s linear}

/* ── 3. SECTION FRAME ──────────────────────────────────────────────────── */
.sec{padding:clamp(72px,7vw,120px) 0;position:relative}
.sec.tint{background:var(--paper-2)}
.sec-head{max-width:760px;margin:0 auto clamp(40px,4vw,64px);text-align:center}
.kicker{
  display:inline-block;font-size:var(--fs-lb);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pri-900);margin-bottom:16px;
}
.kicker::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-right:9px;opacity:.6}
.kicker.gold{color:var(--acc-400)}
.sec-head h2,.about h2{
  font-size:var(--fs-dl);font-weight:700;letter-spacing:-.04em;line-height:1.28;
}
.sec-head h2 em,.about h2 em{font-style:normal;color:var(--pri-900)}
.band .sec-head h2 em,.contact .sec-head h2 em{color:var(--acc-400)}
.sec-head .sub{margin-top:18px;font-size:var(--fs-bl);line-height:1.75;color:var(--ink-700)}
.band .sec-head h2,.contact .sec-head h2{color:var(--paper)}
.band .sec-head .sub,.contact .sec-head .sub{color:rgba(250,249,245,.86)}
.fine{font-size:13.5px;line-height:1.72;color:var(--ink-500);letter-spacing:-.005em}
.sec-head .sec-note{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);text-align:left}
/* tint(#F1EEE5) 배경 위에서는 ink-500이 4.16:1로 AA 미달 → ink-700(9.5:1) */
.sec.tint .fine{color:var(--ink-700)}
.fine b{color:var(--ink-700);font-weight:700}

/* ── 4. BUTTONS ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:-.015em;
  white-space:nowrap;border:1px solid transparent;
  transition:transform .18s var(--e-std),box-shadow .18s var(--e-std),background .18s var(--e-std),color .18s var(--e-std),border-color .18s var(--e-std);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.08s}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-lg{padding:16px 32px;font-size:16.5px}
.btn-primary{background:var(--pri-700);color:#fff;box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--pri-900);box-shadow:var(--sh-2)}
.btn-gold{background:var(--acc-400);color:var(--on-acc);box-shadow:var(--sh-1)}
.btn-gold:hover{background:var(--acc-hover);box-shadow:var(--sh-2)}
.btn-ghost{background:transparent;color:var(--ink-950);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--pri-700);color:var(--pri-900);background:var(--pri-100)}
.btn-line{background:transparent;color:currentColor;border-color:currentColor}
.btn-line:hover{background:rgba(255,255,255,.1)}

/* ── 5. HEADER ─────────────────────────────────────────────────────────── */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:200;height:var(--hdr-h);
  background:rgba(250,249,245,.88);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);color:var(--ink-950);
  transition:background .3s var(--e-std),border-color .3s var(--e-std),color .3s var(--e-std),box-shadow .3s var(--e-std);
}
.hdr-in{height:100%;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;flex:0 0 auto;border-radius:var(--r-xs);padding:7px 14px;margin-left:-14px;background:transparent;transition:background .3s var(--e-std),box-shadow .3s var(--e-std)}
.brand img{width:184px;height:auto}
.brand{gap:10px}
.brand .bm{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;letter-spacing:-.03em;background:linear-gradient(140deg,var(--pri-700),var(--pri-900));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),var(--sh-1)}
.brand .bt{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.brand .bt b{font-size:18px;font-weight:800;letter-spacing:-.045em;color:var(--ink-950);white-space:nowrap}
.brand .bt i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500);white-space:nowrap}
/* 다크 히어로 위 — 로고는 색 변형 금지, 옅은 페이퍼 칩으로 대비 확보 */
.hdr.over{background:rgba(255,255,255,.55);border-bottom-color:transparent;color:var(--ink-950);backdrop-filter:saturate(180%) blur(10px)}
.hdr.over .brand{background:transparent;box-shadow:none}
.hdr.is-scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px -16px rgba(20,24,27,.4)}

.gnb{display:flex;gap:2px;margin-left:auto}
.gnb a{
  position:relative;display:block;padding:9px 13px;font-size:15px;font-weight:600;
  letter-spacing:-.02em;color:inherit;opacity:.78;transition:opacity .18s var(--e-std),color .18s var(--e-std);
}
.gnb a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--e-out);
}
.gnb a:hover{opacity:1}
.gnb a:hover::after,.gnb a.is-active::after{transform:scaleX(1)}
.gnb a.is-active{opacity:1;color:var(--pri-900)}
.hdr.over .gnb a.is-active{color:var(--pri-900)}

.hdr-cta{display:flex;gap:8px;flex:0 0 auto;margin-left:8px}
.hdr:not(.over) .hdr-cta .btn-line{color:var(--ink-700);border-color:var(--line-2)}
.hdr:not(.over) .hdr-cta .btn-line:hover{background:var(--pri-100);color:var(--pri-900);border-color:var(--pri-700)}

.navtog{display:none;width:44px;height:44px;margin-left:auto;border-radius:var(--r-xs);position:relative}
.navtog span{position:absolute;left:11px;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--e-out),opacity .2s}
.navtog span:nth-child(1){top:15px}
.navtog span:nth-child(2){top:21px}
.navtog span:nth-child(3){top:27px}
.navtog[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtog[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtog[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mnav{
  position:fixed;left:0;right:0;top:var(--hdr-h);z-index:199;background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-3);
  max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .32s var(--e-std),visibility .32s var(--e-std);
}
.mnav.is-open{max-height:640px;visibility:visible}
.mnav ul{padding:6px 0 12px}
.mnav a{display:flex;align-items:center;min-height:52px;padding:12px 0;font-size:17px;font-weight:600;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.mnav-cta{display:flex;gap:10px;padding:16px 0 22px}
.mnav-cta .btn{flex:1}
.mnav-cta .btn-line{color:var(--ink-700);border-color:var(--line-2)}
.mnav-cta .btn-line:hover{background:var(--pri-100);color:var(--pri-900);border-color:var(--pri-700)}

/* ── 6. HERO (밝은 브랜드 워시 — 로고 3색을 배경으로) ────────────────── */
.hero{
  position:relative;color:var(--ink-950);overflow:hidden;
  background:linear-gradient(158deg,var(--hero-1) 0%,var(--hero-2) 40%,var(--hero-3) 72%,var(--hero-4) 100%);
  padding:calc(var(--hdr-h) + clamp(56px,6vw,96px)) 0 0;
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg .orb{position:absolute;filter:blur(120px);will-change:transform}
.hero-bg .o1{width:60vw;height:60vw;max-width:820px;max-height:820px;right:-14vw;top:-22vw;background:rgba(var(--soft-rgb),.42);border-radius:58% 42% 47% 53%/46% 54% 46% 54%}
.hero-bg .o2{width:38vw;height:38vw;max-width:520px;max-height:520px;left:-10vw;bottom:-14vw;background:rgba(var(--sec-rgb),.20);border-radius:44% 56% 62% 38%/55% 41% 59% 45%}
.hero-bg .o3{width:30vw;height:30vw;max-width:420px;max-height:420px;left:40%;top:26%;background:rgba(var(--acc-rgb),.34);border-radius:52% 48% 39% 61%/48% 57% 43% 52%}
.hero-bg .mesh{display:none}                     /* 그레인은 다크 밴드 전용 */
.hero-wm{position:absolute;right:-2%;top:12%;font-size:min(34vw,420px);font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--pri-900);opacity:.05;pointer-events:none;user-select:none;white-space:nowrap}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,4vw,64px);align-items:center;padding-bottom:clamp(56px,6vw,92px)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(var(--pri9-rgb),.28);background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--pri-900);box-shadow:var(--sh-1);
}
.eyebrow i{font-style:normal;opacity:.45;margin:0 2px}
.eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--sec-500);box-shadow:0 0 0 4px rgba(var(--sec5-rgb),.18)}

.hero h1{margin-top:26px;font-size:var(--fs-dxl);font-weight:800;letter-spacing:-.045em;line-height:1.18}
.hero h1 .l1{display:block;font-size:.36em;font-weight:600;letter-spacing:-.02em;color:var(--ink-700);margin-bottom:14px}
.hero h1 .l2{display:block}
/* 강조어 — 주색 + 강조색 밑줄 */
.hero h1 em{font-style:normal;color:var(--pri-700);box-shadow:inset 0 -.2em 0 rgba(var(--acc-rgb),.42)}
.hero-lede{margin-top:24px;max-width:600px;font-size:var(--fs-bl);line-height:1.78;color:var(--ink-700)}
.hero-lede b{color:var(--pri-900);font-weight:700;box-shadow:inset 0 -.42em 0 rgba(var(--soft-rgb),.34)}
.hero-lede sup a{color:inherit;border-bottom:1px dotted currentColor}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-note{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:var(--fs-bs);color:var(--ink-700)}

/* hero 성과 패널 — 흰 카드 + 골드 상단 룰 */
.hpanel{
  position:relative;border:1px solid var(--line);border-radius:var(--r-xl);
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  padding:26px 28px 22px;box-shadow:var(--sh-2);overflow:hidden;
}
.hpanel::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--pri-500),var(--acc-400) 55%,var(--sec-500))}
.hp-head{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink-700)}
.hp-head .dot{width:6px;height:6px;border-radius:50%;background:var(--acc-700)}
.hp-list{margin-top:6px}
.hp-list li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.hp-list li:last-child{border-bottom:0}
.hp-list .k{font-size:14.5px;font-weight:500;color:var(--ink-700)}
.hp-list .v{display:flex;align-items:baseline;gap:3px;font-weight:800;letter-spacing:-.02em;color:var(--deep)}
.hp-list .v b{font-size:clamp(22px,1.4vw + 16px,28px);font-weight:800;letter-spacing:-.02em}
.hp-list .v i{font-style:normal;font-size:13px;font-weight:600;color:var(--pri-700)}
.hp-foot{margin-top:14px;font-size:12.5px;color:var(--ink-700)}
.hp-foot a{border-bottom:1px solid var(--line-2);padding-bottom:1px}
.hp-foot a:hover{color:var(--pri-900);border-color:var(--pri-700)}

/* hero 학교 마퀴 */
.hero-mq{position:relative;z-index:1;border-top:1px solid var(--line);padding:22px 0 26px;overflow:hidden}
.mq-cap{max-width:var(--wrap);margin:0 auto 14px;padding:0 var(--gut);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-700)}
.mq-cap b{color:var(--pri-900);font-weight:700}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite;will-change:transform}
.hero-mq:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;gap:10px;padding-right:10px}
.mq-set i{
  font-style:normal;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  padding:9px 18px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--ink-700);background:rgba(255,255,255,.55);white-space:nowrap;
}
.mq-set i.hi{border-color:rgba(var(--pri9-rgb),.34);color:var(--pri-900);background:rgba(225,240,239,.75)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 7. ABOUT ──────────────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,4.5vw,72px);align-items:start}
.about-copy .kicker{margin-bottom:14px}
.about-copy h2{margin-bottom:22px}
.about-copy > p{font-size:var(--fs-bl);line-height:1.8;color:var(--ink-700)}
.about-copy > p + p{margin-top:16px}
.about-copy b{color:var(--pri-900);font-weight:700}

.pillars{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.pillars li{background:var(--paper);padding:22px 22px 20px;transition:background .22s var(--e-std)}
.pillars li:hover{background:var(--paper-3)}
.pillars .n{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--pri-900);margin-bottom:8px}
.pillars b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.025em;color:var(--ink-950)}
.pillars i{display:block;margin-top:5px;font-style:normal;font-size:14px;line-height:1.6;color:var(--ink-500)}

.about-fig{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);background:var(--paper-3)}
.about-fig img{width:100%;aspect-ratio:966/502;object-fit:cover}
.about-fig figcaption{padding:14px 20px;font-size:13.5px;color:var(--ink-500);border-top:1px solid var(--line);background:var(--paper-3)}

.quote{
  position:relative;margin-top:22px;padding:30px 30px 26px;border-radius:var(--r-l);
  background:var(--deep);color:var(--paper);box-shadow:var(--sh-2);overflow:hidden;
}
.quote::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--acc-400),var(--pri-500));
}
.quote::after{
  content:"”";position:absolute;right:20px;top:10px;font-size:96px;line-height:.8;
  color:rgba(var(--acc-rgb),.16);font-weight:800;pointer-events:none;
}
.quote p{position:relative;font-size:17.5px;line-height:1.78;font-weight:500;letter-spacing:-.02em;color:rgba(250,249,245,.94)}
.quote-sign{display:block;margin-top:20px;width:96px;height:26px;opacity:.72}
.quote-sign path{fill:none;stroke:var(--acc-400);stroke-width:1.6;stroke-linecap:round}
.quote cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:rgba(250,249,245,.78)}
.quote cite b{color:var(--acc-400);font-weight:700;letter-spacing:.02em;margin-right:4px}

/* ── 8. RESULTS BAND ───────────────────────────────────────────────────── */
.band{background:var(--deep);color:var(--paper);overflow:hidden}
.band-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.42;
  background:
    radial-gradient(60% 50% at 84% 6%,rgba(var(--acc-rgb),.20),transparent 70%),
    radial-gradient(52% 46% at 8% 96%,rgba(var(--soft-rgb),.22),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.band .wrap{position:relative;z-index:1}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.figs li{
  position:relative;padding:26px 24px 24px;border-radius:var(--r-m);
  border:1px solid var(--line-d);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);
  overflow:hidden;
}
.figs li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--acc-400),rgba(var(--acc-rgb),0))}
.figs .lab{display:block;font-size:14px;font-weight:600;color:rgba(250,249,245,.82);letter-spacing:-.015em}
.figs .val{display:flex;align-items:baseline;gap:4px;margin-top:12px}
.figs .val b{
  font-size:var(--fs-num);font-weight:800;line-height:1.05;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--acc-light),var(--acc-400) 62%,var(--acc-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.figs .val i{font-style:normal;font-size:15px;font-weight:700;color:rgba(var(--acc-rgb),.8)}
.figs .bar{display:block;margin-top:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.figs .bar::after{
  content:"";display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--pri-500),var(--acc-400));
  transition:width 1.1s var(--e-num) .15s;
}
.figs li.is-in .bar::after{width:var(--p)}
.figs .bar.rev::after{background:linear-gradient(90deg,var(--acc-400),var(--pri-500))}
.figs .scale{display:block;margin-top:9px;font-size:11.5px;letter-spacing:-.01em;color:rgba(250,249,245,.74)}
.figs .note{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.16);font-size:11px;line-height:1.5;color:rgba(250,249,245,.76)}

.band-foot{margin-top:32px;padding-top:26px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;justify-content:space-between}
.band-foot .fine{flex:1 1 460px;color:rgba(250,249,245,.78)}
.band-foot .fine b{color:rgba(var(--acc-rgb),.85)}

/* ── 9. SYSTEM ─────────────────────────────────────────────────────────── */
.sys{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.sys-card{
  position:relative;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-1);transition:box-shadow .22s var(--e-out),transform .22s var(--e-out);
}
.sys-card:hover{box-shadow:var(--sh-2);transform:translateY(-4px)}
.sys-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px}
.sys-card.a::before{background:var(--pri-700)}
.sys-card.b::before{background:var(--acc-700)}
.sys-card.c::before{background:var(--sec-700)}
.sys-card > header{padding:28px 30px 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sys-card .tag{
  font-size:11.5px;font-weight:800;letter-spacing:.12em;padding:5px 11px;border-radius:999px;
  background:transparent;border:1px solid currentColor;
}
.sys-card.a .tag{color:var(--pri-900)}
.sys-card.b .tag{color:var(--acc-800)}
.sys-card.c .tag{color:var(--sec-700)}
.sys-card h3{font-size:var(--fs-dm);font-weight:700;letter-spacing:-.03em}
.sys-card h3 .new{
  display:inline-block;margin-left:8px;font-size:12px;font-weight:700;letter-spacing:-.01em;
  padding:4px 10px;border-radius:999px;background:var(--sec-100);color:var(--sec-700);vertical-align:middle;
}
.sys-card .in{padding:24px 30px 30px}
.sys-card .in.two{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.blk + .blk{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.in.two .blk + .blk{margin-top:0;padding-top:0;border-top:0}
.blk h4{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);margin-bottom:14px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{
  font-size:14px;font-weight:600;letter-spacing:-.02em;padding:7px 13px;border-radius:var(--r-xs);
  border:1px solid var(--line-2);color:var(--ink-950);background:var(--paper);
  transition:background .18s var(--e-std),border-color .18s var(--e-std),color .18s var(--e-std);
}
.chips span:hover{background:var(--pri-100);border-color:var(--pri-700);color:var(--pri-900)}
.chips.lg span{font-size:15px;padding:9px 16px}

.rail{position:relative;padding-left:26px;counter-reset:r}
.rail::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--line-2)}
.rail li{position:relative;counter-increment:r;padding:0 0 16px}
.rail li:last-child{padding-bottom:0}
.rail li::before{
  content:counter(r);position:absolute;left:-26px;top:1px;width:17px;height:17px;border-radius:50%;
  background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink-500);
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.sys-card.a .rail li::before{border-color:var(--pri-700);color:var(--pri-900)}
.sys-card.b .rail li::before{border-color:var(--acc-800);color:var(--acc-800)}
.rail b{display:block;font-size:16px;font-weight:700;letter-spacing:-.025em}
.rail i{display:block;margin-top:3px;font-style:normal;font-size:14px;color:var(--ink-500);line-height:1.6}

.dots li{position:relative;padding-left:16px;font-size:15.5px;color:var(--ink-700);line-height:1.68}
.dots li + li{margin-top:9px}
.dots li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--pri-500)}
.sys-card.c .dots li::before{background:var(--sec-500)}
.sys-card.wide{grid-column:1 / -1}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.steps li{
  position:relative;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-m);
  padding:26px 24px;box-shadow:var(--sh-1);transition:transform .22s var(--e-out),box-shadow .22s var(--e-out);
}
.steps li:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.steps .sn{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--pri-900);
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line-2);
}
.steps b{display:block;font-size:17px;font-weight:700;letter-spacing:-.03em}
.steps i{display:block;margin-top:8px;font-style:normal;font-size:14px;line-height:1.66;color:var(--ink-500)}

/* ── 10. SCIENCE ───────────────────────────────────────────────────────── */
.sci{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px}
.sci-card{
  position:relative;border-radius:var(--r-l);padding:34px 32px;overflow:hidden;
  background:var(--paper-3);border:1px solid var(--line);box-shadow:var(--sh-1);
}
.sci-card.lead{background:var(--deep);color:var(--paper);border-color:transparent;border-radius:var(--r-xl)}
.sci-card.lead::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(64% 60% at 88% 4%,rgba(var(--pri5-rgb),.28),transparent 70%),radial-gradient(48% 44% at 4% 100%,rgba(var(--acc-rgb),.12),transparent 70%);
}
.sci-card > *{position:relative;z-index:1}
.sci-card .badge{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;padding:5px 12px;border-radius:999px;
  background:rgba(var(--acc-rgb),.14);color:var(--acc-400);border:1px solid rgba(var(--acc-rgb),.3);
}
.sci-card .badge.alt{background:var(--pri-100);color:var(--pri-900);border-color:transparent}
.sci-card h3{margin-top:16px;font-size:var(--fs-dm);font-weight:700;letter-spacing:-.03em}
.sci-card .addr{margin-top:6px;font-size:14px;font-weight:600;color:rgba(250,249,245,.78)}
.sci-card:not(.lead) .addr{color:var(--ink-500)}
.sci-card p:not(.addr):not(.mini){margin-top:18px;font-size:16px;line-height:1.78;color:rgba(250,249,245,.9)}
.sci-card:not(.lead) p:not(.addr):not(.mini){color:var(--ink-700)}
.sci-card .mini{
  margin-top:18px;padding:12px 16px;border-radius:var(--r-s);background:var(--paper-2);
  font-size:14px;font-weight:600;color:var(--ink-700);border-left:3px solid var(--acc-700);
}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.flow li{
  position:relative;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-m);
  padding:26px 24px;box-shadow:var(--sh-1);transition:transform .22s var(--e-out),box-shadow .22s var(--e-out);
}
.flow li:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.flow .fn{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-2);font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--pri-900);
}
.flow h4{margin:14px 0 8px;font-size:17px;font-weight:700;letter-spacing:-.03em}
.flow p{font-size:14.5px;line-height:1.66;color:var(--ink-500)}

/* ── 11. SCHOOLS ───────────────────────────────────────────────────────── */
.schools{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sch{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-l);padding:32px 30px;box-shadow:var(--sh-1);transition:transform .22s var(--e-out),box-shadow .22s var(--e-out)}
.sch:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.sch header{display:flex;align-items:center;gap:12px}
.sch h3{font-size:var(--fs-dm);font-weight:700;letter-spacing:-.03em}
.sch .pill{font-size:12px;font-weight:800;letter-spacing:.04em;padding:5px 12px;border-radius:999px;background:transparent;border:1px solid currentColor;color:var(--pri-900)}
.sch.hi .pill{color:var(--sec-700)}
.sch > p{margin-top:10px;font-size:15.5px;color:var(--ink-500)}
.sch .alias{display:block;margin-top:6px;font-size:13px;color:var(--ink-500)}
.sch .chips{margin-top:20px}
.sch.hi .chips span:hover{background:var(--sec-100);border-color:var(--sec-700);color:var(--sec-700)}

.books{margin-top:20px;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-l);padding:32px 30px;box-shadow:var(--sh-1)}
.books-head h3{font-size:var(--fs-dm);font-weight:700;letter-spacing:-.03em}
.books-head p{margin-top:8px;font-size:15px;color:var(--ink-500)}
.book-list{margin-top:22px;border-top:1px solid var(--line)}
.book-list li{
  display:grid;grid-template-columns:170px 130px 1fr;gap:16px;align-items:baseline;
  padding:14px 4px;border-bottom:1px solid var(--line);transition:background .18s var(--e-std);
}
.book-list li:hover{background:var(--paper)}
.book-list b{font-size:16px;font-weight:700;letter-spacing:-.025em}
.book-list .en{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--acc-800)}
.book-list i{font-style:normal;font-size:15px;color:var(--ink-700)}
.books .fine{margin-top:18px}

/* ── 12. BLOG PREVIEW ──────────────────────────────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{
  display:flex;flex-direction:column;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--r-l);padding:26px 24px;box-shadow:var(--sh-1);min-height:206px;
  transition:transform .22s var(--e-out),box-shadow .22s var(--e-out),border-color .22s var(--e-out);
}
.cat:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.cat .ct{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.1em;padding:5px 11px;border-radius:999px;background:transparent;border:1px solid currentColor}
.cat.c1 .ct{color:var(--pri-900)}
.cat.c2 .ct{color:var(--acc-800)}
.cat.c3 .ct{color:var(--sec-700)}
.cat.c4 .ct{color:var(--ink-700)}
.cat h3{margin-top:14px;font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.4}
.cat p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--ink-500);flex:1}
.cat .go{margin-top:16px;font-size:14px;font-weight:700;color:var(--pri-900);display:inline-flex;align-items:center;gap:6px}
.cat .go::after{content:"→";transition:transform .22s var(--e-out)}
.cat:hover .go::after{transform:translateX(4px)}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.pcol{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-l);padding:26px 26px 20px;box-shadow:var(--sh-1)}
.pcol h4{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);padding-bottom:14px;border-bottom:1px solid var(--line)}
.pcol a{display:block;padding:13px 0;border-bottom:1px solid var(--line);transition:color .18s var(--e-std)}
.pcol a:last-of-type{border-bottom:0}
.pcol a:hover{color:var(--pri-900)}
.pcol a span{display:block;font-size:15px;font-weight:600;letter-spacing:-.025em;line-height:1.55}
.pcol a time{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-500)}
.pcol .col-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--ink-500)}
.mid-cta{text-align:center;margin-top:36px}

/* ── 13. CAMPUS ────────────────────────────────────────────────────────── */
.camps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.camp{
  display:flex;flex-direction:column;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--r-l);padding:28px 26px;box-shadow:var(--sh-1);
  transition:transform .22s var(--e-out),box-shadow .22s var(--e-out),border-color .22s var(--e-out);
}
.camp:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.camp .badge{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.08em;padding:5px 13px;border-radius:999px;background:transparent;border:1px solid currentColor;color:var(--pri-900)}
.camp .badge svg{width:12px;height:12px;fill:currentColor}
.camp.b .badge{color:var(--acc-800)}
.camp.c .badge{color:var(--sec-700)}
.camp h3{margin-top:16px;font-size:19px;font-weight:700;letter-spacing:-.03em}
.camp .addr{margin-top:10px;font-size:15px;line-height:1.68;color:var(--ink-700);flex:1}
.camp .addr .note{color:var(--ink-500);font-size:13.5px}
.camp .lines{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:10px}
.camp .lines a{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:600;letter-spacing:-.02em}
.camp .lines a:hover{color:var(--pri-900)}
.camp .lines em{font-style:normal;font-size:13px;font-weight:500;color:var(--ink-500)}
.camp .ic{
  flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-xs);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-700);background:transparent;
}
.camp .ic svg{width:14px;height:14px;fill:currentColor}
.camp .lines a:hover .ic{border-color:var(--pri-700);color:var(--pri-900)}
.camp-note{
  margin-top:22px;padding:18px 24px;border-radius:var(--r-m);background:var(--pri-100);
  color:var(--pri-900);font-size:15px;font-weight:600;text-align:center;letter-spacing:-.02em;
}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.gal li{margin:0}
.gal .g-wide{grid-column:span 2}
.gbtn{
  display:block;width:100%;position:relative;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-3);box-shadow:var(--sh-1);
  transition:transform .28s var(--e-out),box-shadow .28s var(--e-out);
}
.gbtn:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.gbtn img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--e-out)}
.gal .g-wide .gbtn img{aspect-ratio:16/9}
.gbtn:hover img{transform:scale(1.045)}
.gbtn .cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  font-size:13.5px;font-weight:600;color:#fff;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(20,24,27,.86));
}
.gbtn::after{
  content:"";position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(20,24,27,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10 4a6 6 0 1 0 3.5 10.9l4.8 4.8 1.4-1.4-4.8-4.8A6 6 0 0 0 10 4m0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8m-1 1v2H7v2h2v2h2v-2h2V9h-2V7z'/%3E%3C/svg%3E") center/17px no-repeat;
  opacity:0;transform:scale(.85);transition:opacity .22s var(--e-out),transform .22s var(--e-out);
}
.gbtn:hover::after,.gbtn:focus-visible::after{opacity:1;transform:scale(1)}

/* ── 14. FAQ ───────────────────────────────────────────────────────────── */
.acc{border-top:1px solid var(--line-2)}
.acc details{border-bottom:1px solid var(--line-2)}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:56px;padding:20px 4px;font-size:17px;font-weight:700;letter-spacing:-.03em;cursor:pointer;
  list-style:none;transition:color .18s var(--e-std);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";flex:0 0 auto;width:11px;height:11px;border-right:2px solid var(--ink-500);border-bottom:2px solid var(--ink-500);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .28s var(--e-out),border-color .18s;
}
.acc summary:hover{color:var(--pri-900)}
.acc summary:hover::after{border-color:var(--pri-700)}
.acc details[open] summary{color:var(--pri-900)}
.acc details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px);border-color:var(--pri-700)}
.ac-in{padding:0 4px 24px;font-size:15.5px;line-height:1.8;color:var(--ink-700);animation:acc .34s var(--e-out)}
.ac-in a{color:var(--pri-900);font-weight:700;border-bottom:1px solid currentColor}
@keyframes acc{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── 15. CONTACT ───────────────────────────────────────────────────────── */
.contact{background:linear-gradient(155deg,var(--contact-1) 0%,var(--pri-900) 55%,var(--contact-1) 100%);color:var(--paper);overflow:hidden}
.contact-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(56% 52% at 12% 4%,rgba(var(--pri5-rgb),.26),transparent 70%),
    radial-gradient(50% 46% at 92% 98%,rgba(var(--acc-rgb),.14),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.contact .wrap{position:relative;z-index:1}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct-card{
  border:1px solid rgba(255,255,255,.34);border-radius:var(--r-l);padding:32px 30px;
  background:rgba(255,255,255,.10);backdrop-filter:blur(12px);
  transition:background .22s var(--e-std),border-color .22s var(--e-std);
}
.ct-card:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.48)}
.ct-card h3{font-size:var(--fs-dm);font-weight:700;letter-spacing:-.03em}
.ct-card .sub{margin-top:6px;font-size:14.5px;color:var(--paper)}
.ct-card .tel{
  display:inline-block;margin-top:18px;font-size:clamp(28px,2.6vw,38px);font-weight:800;
  letter-spacing:-.03em;color:var(--acc-400);
}
.ct-card .tel:hover{text-decoration:underline;text-underline-offset:5px}
.ct-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-d);display:grid;gap:7px;font-size:14.5px;color:var(--paper)}
.ct-meta a{border-bottom:1px solid rgba(250,249,245,.3);padding-bottom:1px}
.ct-meta a:hover{color:var(--acc-400);border-color:var(--acc-400)}
.ct-hours{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:24px;
  padding:16px 22px;border-radius:var(--r-m);border:1px solid var(--line-d);
  background:rgba(255,255,255,.05);font-size:15.5px;font-weight:600;color:rgba(250,249,245,.86);
}

/* ── 16. FOOTER ────────────────────────────────────────────────────────── */
.ftr{background:var(--deep-2);color:rgba(250,249,245,.6);padding:60px 0 40px;font-size:14.5px;border-top:1px solid rgba(255,255,255,.07)}
.ftr-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:36px;align-items:start}
/* 로고 색 변형 금지 — 페이퍼 칩으로 대비 확보 */
.ftr-brand img{width:184px;background:var(--paper);padding:10px 16px;border-radius:var(--r-s)}
.ftr-brand .brand{padding:0;margin:0}
.ftr-brand .bm{background:var(--acc-400);color:var(--deep-2);box-shadow:none}
.ftr-brand .bt b{color:var(--paper)}
.ftr-brand .bt i{color:rgba(250,249,245,.62)}
.ftr-brand p{margin-top:16px;font-size:14px;line-height:1.7;color:rgba(250,249,245,.7)}
.ftr-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ftr-nav h4{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--acc-rgb),.72);margin-bottom:14px}
.ftr-nav a{display:block;padding:6px 0;font-size:14.5px;color:rgba(250,249,245,.78);transition:color .18s var(--e-std)}
.ftr-nav a:hover{color:var(--paper)}
.ftr-info{margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:9px}
.ftr-info > div{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px}
.ftr-info dt{font-weight:700;color:rgba(250,249,245,.8);min-width:150px}
.ftr-info dd{margin:0;color:rgba(250,249,245,.72)}
.ftr-info a:hover{color:var(--paper);text-decoration:underline}
.ftr-biz{margin-top:22px;font-size:13px;line-height:1.7;color:rgba(250,249,245,.7)}
.ftr-biz .tbd{color:var(--acc-400)}
.ftr-disc{margin-top:8px;font-size:12.5px;line-height:1.7;color:rgba(250,249,245,.68)}
.ftr-copy{margin-top:20px;font-size:12.5px;color:rgba(250,249,245,.68)}

/* ── 17. FLOATING · MOBILE BAR · LIGHTBOX ──────────────────────────────── */
.fab{position:fixed;right:22px;bottom:26px;z-index:150}
.f-top{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--paper-3);border:1px solid var(--line-2);box-shadow:var(--sh-2);color:var(--ink-700);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .26s var(--e-std),visibility .26s,transform .26s var(--e-out),background .18s;
}
.f-top svg{width:20px;height:20px;fill:currentColor}
.f-top.is-on{opacity:1;visibility:visible;transform:none}
.f-top:hover{background:var(--pri-100);color:var(--pri-900)}

.mobar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:160;
  background:rgba(250,249,245,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns:repeat(4,1fr);gap:4px;
}
.mobar a{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:var(--r-s);
  font-size:11.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink-700);
}
.mobar a svg{width:20px;height:20px;fill:currentColor}
.mobar a.prim{background:var(--pri-700);color:#fff}
.mobar a:active{background:var(--paper-2)}
.mobar a.prim:active{background:var(--pri-900)}

.lbox{
  position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  background:rgba(12,15,17,.94);backdrop-filter:blur(6px);padding:56px 20px;
  animation:fade .24s var(--e-std);
}
.lbox[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb-fig{max-width:1080px;width:100%;text-align:center}
.lb-fig img{max-width:100%;max-height:calc(100vh - 168px);width:auto;margin:0 auto;border-radius:var(--r-m);box-shadow:var(--sh-3)}
.lb-fig figcaption{margin-top:16px;font-size:14.5px;font-weight:600;color:rgba(250,249,245,.8)}
.lbox button{
  position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:background .18s var(--e-std),transform .18s var(--e-std);
}
.lbox button:hover{background:rgba(255,255,255,.2);transform:scale(1.06)}
.lb-close{top:18px;right:18px;width:46px;height:46px;font-size:17px}
.lb-prev,.lb-next{top:50%;margin-top:-26px;width:52px;height:52px;font-size:30px;line-height:1;padding-bottom:5px}
.lb-prev{left:18px}
.lb-next{right:18px}

/* ── 18. REVEAL ────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.rv.is-in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}
.rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}

/* ── 19. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:1120px){
  .hero-in{grid-template-columns:1fr;gap:38px}
  .hpanel{max-width:520px}
  .figs{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .steps,.flow{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr;gap:40px}
  .about-side{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .quote{margin-top:0}
}
@media (max-width:960px){
  .gnb,.hdr-cta{display:none}
  .navtog{display:block}
  .sys,.sci,.schools,.ct-grid{grid-template-columns:1fr}
  .sys-card .in.two{grid-template-columns:1fr;gap:0}
  .in.two .blk + .blk{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
  .camps{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr;gap:30px}
  .book-list li{grid-template-columns:150px 1fr;row-gap:4px}
  .book-list .en{grid-column:2;grid-row:1;justify-self:start}
  .book-list i{grid-column:1 / -1}
}
@media (max-width:760px){
  :root{--hdr-h:64px;--gut:18px}
  body{padding-bottom:88px}
  .mobar{display:grid}
  .fab{bottom:88px;right:16px}
  .brand img{width:150px}
  .hdr.over .brand{padding:6px 11px}
  .about-side{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr}
  .steps,.flow,.cats,.camps{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}
  .gal .g-wide{grid-column:span 2}
  .sec-head{text-align:left}
  .sec-head .sub{margin-left:0}
  .hero-act .btn{flex:1 1 100%}
  .band-foot{flex-direction:column;align-items:stretch}
  .band-foot .btn{align-self:flex-start}
  .sys-card > header,.sys-card .in{padding-left:22px;padding-right:22px}
  .sch,.books,.pcol,.camp,.ct-card,.sci-card{padding-left:22px;padding-right:22px}
  .lb-prev,.lb-next{width:44px;height:44px;font-size:26px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
}
@media (max-width:420px){
  .gal{grid-template-columns:1fr}
  .gal .g-wide{grid-column:span 1}
  .book-list li{grid-template-columns:1fr}
  .book-list .en{grid-column:1;grid-row:auto}
}

/* ── 20. MOTION / PRINT ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .mq-track{animation:none}
  .figs li .bar::after{width:var(--p)}
}
@media print{
  .hdr,.mnav,.fab,.mobar,.lbox,.hero-bg,.band-bg,.contact-bg,.hero-mq,.sprog{display:none !important}
  body{background:#fff;color:#000;font-size:11pt;padding-bottom:0}
  .band,.contact,.ftr,.quote,.sci-card.lead{background:#fff !important;color:#000 !important}
  .band *,.contact *,.ftr *,.quote *,.sci-card.lead *{color:#000 !important;background-color:transparent !important;border-color:#bbb !important}
  .figs li,.hpanel,.ct-card,.bstats li{border:1px solid #bbb !important;backdrop-filter:none !important}
  .figs .val b{-webkit-text-fill-color:#000;color:#000}
  .sec{padding:18px 0;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}


/* ── 21. 양식팩 추가 컴포넌트 (강사 · 후기 · 링크 · 자리표시 그림) ───────── */
.ph{display:block;width:100%;height:100%;object-fit:cover}
.about-fig .ph{aspect-ratio:966/502}
.gbtn .ph{aspect-ratio:4/3}
.gal .g-wide .gbtn .ph{aspect-ratio:16/9}

.team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tm{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-l);padding:28px 26px;box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:transform .22s var(--e-out),box-shadow .22s var(--e-out)}
.tm:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.tm .av{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:800;color:#fff;background:linear-gradient(140deg,var(--pri-500),var(--pri-900));overflow:hidden;box-shadow:0 0 0 4px var(--pri-100)}
.tm .av img{width:100%;height:100%;object-fit:cover}
.tm h3{margin-top:18px;font-size:19px;font-weight:700;letter-spacing:-.03em}
.tm .role{margin-top:4px;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--pri-900)}
.tm p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--ink-700)}
.tm .tags{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px}
.tm .tags span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--pri-100);color:var(--pri-900)}

.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rvw{position:relative;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-l);padding:30px 26px 24px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.rvw::before{content:"\201C";position:absolute;right:18px;top:4px;font-size:60px;line-height:1;font-weight:800;color:rgba(var(--acc-rgb),.45)}
.rvw p{position:relative;padding-top:20px;font-size:16px;line-height:1.78;color:var(--ink-950);letter-spacing:-.02em;flex:1}
.rvw cite{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-style:normal;font-size:13.5px;color:var(--ink-700)}
.rvw cite b{color:var(--pri-900);font-weight:700}
.rvw-note{margin-top:18px;text-align:center}

.ct-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.ct-links a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.08);font-size:15px;font-weight:700;color:var(--paper);transition:background .18s var(--e-std),border-color .18s var(--e-std)}
.ct-links a:hover{background:rgba(255,255,255,.18);border-color:var(--acc-400);color:var(--acc-400)}
.ct-links a.k{background:var(--acc-400);border-color:var(--acc-400);color:var(--on-acc)}
.ct-links a.k:hover{background:var(--acc-hover);color:var(--on-acc)}
.ftr-links{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 18px}
.ftr-links a{font-size:13.5px;color:rgba(250,249,245,.78);border-bottom:1px solid rgba(250,249,245,.25)}
.ftr-links a:hover{color:var(--paper)}
.tuition{margin-top:10px;font-size:13px;line-height:1.7;color:rgba(250,249,245,.78)}
.tuition a{color:var(--acc-400);border-bottom:1px solid currentColor;font-weight:700}
.tbd-chip{display:inline-block;padding:1px 8px;border-radius:6px;background:var(--sec-100);color:var(--sec-700);font-weight:800;font-size:.92em}
.mid-cta.two{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

@media (max-width:960px){.team,.revs{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .team,.revs{grid-template-columns:1fr}
  .tm,.rvw{padding-left:22px;padding-right:22px}
  .brand .bt b{font-size:16.5px}
  .brand .bm{width:36px;height:36px}
  .ct-links a{flex:1 1 100%}
}
@media print{
  .team,.revs{display:block}
  .tm,.rvw,.camp,.sys-card,.sch{break-inside:avoid;margin-bottom:10px}
}

/* ── 22. 교습비·교습과정 표 ───────────────────────────────────────────── */
.tt-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper-3);box-shadow:var(--sh-1)}
.tt{width:100%;border-collapse:collapse;font-size:15px}
.tt th,.tt td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tt thead th{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--ink-700);background:var(--paper-2)}
.tt tbody th{font-weight:700;letter-spacing:-.02em;color:var(--ink-950)}
.tt tbody tr:last-child th,.tt tbody tr:last-child td{border-bottom:0}
.tt td.fee{font-weight:800;color:var(--pri-900);white-space:nowrap}
.tt-extra{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.tt-extra li{display:flex;gap:10px;align-items:baseline;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper-3);font-size:14.5px}
.tt-extra b{font-weight:700}
.tt-img img{margin:0 auto;border-radius:var(--r-m);border:1px solid var(--line)}
.tt-miss{padding:22px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-l);background:var(--paper-3)}
.tt-note{margin-top:18px}
@media (max-width:760px){
  .tt-wrap{border:0;background:transparent;box-shadow:none;overflow:visible}
  .tt,.tt tbody,.tt tr,.tt th,.tt td{display:block;width:100%}
  .tt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tt tr{margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper-3);padding:6px 4px;box-shadow:var(--sh-1)}
  .tt th,.tt td{border-bottom:0;padding:8px 16px}
  .tt td[data-l]::before,.tt th[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--ink-500);margin-bottom:2px}
  .tt td:empty{display:none}
}

/* ── 23. 모바일 메뉴 스크롤 · 터치 영역 44px · 인쇄 ───────────────────── */
.mnav.is-open{
  max-height:calc(100vh - var(--hdr-h));
  max-height:calc(100dvh - var(--hdr-h));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom);
}
.btn-sm{min-height:44px}
.brand{min-height:44px}
.ftr-nav a{display:flex;align-items:center;min-height:44px;padding:0}
.ftr-info a{display:inline-flex;align-items:center;min-height:44px}
.ftr-links a{display:inline-flex;align-items:center;min-height:44px}
.ct-meta a{display:inline-flex;align-items:center;min-height:44px}
.ct-meta li{display:flex;align-items:center}
.hp-foot a{display:inline-flex;align-items:center;min-height:44px}
.pcol a{min-height:44px}
.tt-extra li{min-height:44px;align-items:center}
@media (max-width:760px){
  .band-foot .fine{flex:0 0 auto}
}
@media print{
  .rv,.rv.d1,.rv.d2,.rv.d3,.rv.d4{opacity:1 !important;transform:none !important;transition:none !important}
  .figs li .bar::after{width:var(--p) !important}
  .mq-track{animation:none}
  .tt-wrap{overflow:visible}
  .gal{grid-template-columns:repeat(3,1fr) !important;gap:8px}
  .gal .g-wide{grid-column:auto !important}
  .gal .gbtn img,.gal .g-wide .gbtn img{aspect-ratio:4/3 !important}
  .brand{min-height:0}
}

/* ── 24. 갤러리 6칸 격자(마지막 줄 빈칸 없음) · 푸터 번호 줄바꿈 ─────── */
.gal{grid-template-columns:repeat(6,1fr)}
.gal li{grid-column:span 2}
.gal .g-wide{grid-column:span 4}
.gal .g-full{grid-column:1 / -1}
.gal .g-half{grid-column:span 3}
.gal .g-full .gbtn .ph,.gal .g-full .gbtn img{aspect-ratio:21/9}
.nw{white-space:nowrap}
@media (max-width:760px){
  .gal{grid-template-columns:1fr 1fr}
  .gal li,.gal .g-half{grid-column:span 1}
  .gal .g-wide,.gal .g-full{grid-column:span 2}
  .gal .g-full .gbtn .ph,.gal .g-full .gbtn img{aspect-ratio:16/9}
}
@media (max-width:420px){
  .gal{grid-template-columns:1fr}
  .gal li,.gal .g-wide,.gal .g-full,.gal .g-half{grid-column:span 1}
}
@media print{
  .gal li,.gal .g-wide,.gal .g-full,.gal .g-half{grid-column:auto !important}
}
/* 갤러리: 같은 줄의 사진 높이를 맞춘다(큰 사진 기준으로 늘리고 잘라서 채움) */
.gal li{display:flex}
.gal .gbtn{height:100%}
.gal .gbtn img{height:100%}
.gal .g-full .gbtn .ph,.gal .g-full .gbtn img{aspect-ratio:32/9}
@media (max-width:760px){
  .gal .g-full .gbtn .ph,.gal .g-full .gbtn img{aspect-ratio:16/9}
}