/* fonts.css — 시안 서체 자체 호스팅 (Noto Sans CJK KR · SIL OFL 1.1) · INTERNAL MODULE
   실제로 쓰인 글자만 추린 서브셋이다. 외부 CDN 응답에 첫 페인트를 묶지 않는다.
   라이선스: build/assets/fonts/LICENSE-OFL.txt */
@font-face{font-family:"Noto Sans KR";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/notosanskr_400.woff2") format("woff2")}
@font-face{font-family:"Noto Sans KR";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/notosanskr_500.woff2") format("woff2")}
@font-face{font-family:"Noto Sans KR";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/notosanskr_700.woff2") format("woff2")}
@font-face{font-family:"Noto Sans KR";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/notosanskr_700.woff2") format("woff2")}
/* tokens.css — 시안이 정의한 값만 적는다(발명 금지) · INTERNAL MODULE */
:root{
  /* 색 — Figma 시안 실측 */
  --c-brand:#20459d;            /* 주 브랜드 블루 (헤더 CTA·강조·푸터 밴드) */
  --c-brand-dark:#17347a;
  --c-ink:#111418;              /* 본문 */
  --c-ink-2:#4b5563;            /* 보조 본문 */
  --c-ink-3:#8b93a1;            /* 캡션 */
  --c-line:#e5e8ee;
  --c-bg:#ffffff;
  --c-bg-soft:#f5f7fa;
  --c-white:#ffffff;

  /* 타이포 — Noto Sans KR (시안 지정 · assets/fonts 에 자체 호스팅 · OFL) */
  --ff:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --fs-hero:52px; --fs-h1:44px; --fs-h2:36px; --fs-h3:26px;
  --fs-lead:22px; --fs-body:18px; --fs-sm:16px; --fs-xs:14px;
  /* 한글 줄높이 — 역할별로 다르다(TY6) */
  --lh-display:1.28; --lh-heading:1.36; --lh-body:1.7; --lh-tight:1.4;
  --ls-display:-0.02em; --ls-body:-0.01em;

  /* 레이아웃 — 시안 1920 기준 · 콘텐츠 1680 + 좌우 120 */
  --design-w:1920px;
  --container:1920px;   /* 시안 폭 그대로 — 콘텐츠는 1400(=1920-260*2) */
  --gutter:260px;
  --gutter-xl:120px;
  --gutter-lg:80px;
  --gutter-ml:60px;
  --gutter-md:40px;
  --gutter-sm:20px;

  /* 간격 */
  --s-2:2px; --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px;
  --s-24:24px; --s-32:32px; --s-40:40px; --s-56:56px; --s-80:80px; --s-120:120px;

  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --shadow-card:0 6px 24px rgba(17,20,24,.08);
  --z-header:100; --z-drawer:200; --z-overlay:300;
}
/* base.css — 리셋 + 한글 타이포 기본 · INTERNAL MODULE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;font-family:var(--ff);font-size:var(--fs-body);line-height:var(--lh-body);
  letter-spacing:var(--ls-body);color:var(--c-ink);background:var(--c-bg);
  word-break:keep-all;overflow-wrap:break-word;overflow-x:clip}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{line-height:var(--lh-heading);letter-spacing:var(--ls-display);font-weight:700}
.reveal_item{opacity:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--c-brand);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 스킵 링크 — **문서 폭 밖으로 치우지 않는다**(left:-9999px 은 '문서 폭 밖 텍스트'로
   잡히고, 일부 스크린리더/번역기에서 위치 계산이 깨진다). sr-only 와 같은 clip 방식. */
/* 스킵 링크는 마크업에서 `class="skip sr-only"` 로 쓴다 — 숨김은 공용 .sr-only 가 맡고
   여기서는 포커스 시 노출만 정의한다(별도 clip 규칙을 만들면 '가려진 텍스트' 로 잡힌다). */
.skip:focus{position:fixed;left:var(--s-16);top:var(--s-16);width:auto;height:auto;margin:0;z-index:999;
  clip:auto;overflow:visible;z-index:var(--z-overlay);background:#fff;color:var(--c-ink);
  padding:var(--s-12) var(--s-20);border-radius:var(--r-sm);box-shadow:var(--shadow-card)}
/* 고정 헤더 아래로 목표가 숨지 않게 스크롤 여백을 둔다(앵커 이동·scrollIntoView) */
html{scroll-padding-top:96px}
@media (max-width:1023px){html{scroll-padding-top:72px}}
/* layout.css — 유동 골격 · INTERNAL MODULE
   시안 폭 1920 은 전사(transcribe), 그 사이 폭은 규칙으로 흐른다.
   콘텐츠 폭: 상한 1680 + 가운데(사용자 선택) */
/* 시안 1920 에서 콘텐츠 1400 · 좌우 260.
   padding % 는 부모 너비 기준. min(100%, 1920) 으로 계산해야
   윈도우 스크롤바(약 15px)가 있어도 본문 1400 이 유지된다.
   260+260 을 1920 뷰포트에 고정하면 clientWidth 1905 → 본문 1385 가 된다. */
.container{width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:calc((min(100%,var(--container)) - (var(--container) - var(--gutter)*2)) / 2)}
@media (max-width:1919px){.container{padding-inline:var(--gutter-xl)}}
@media (max-width:1439px){.container{padding-inline:var(--gutter-lg)}}
@media (max-width:1279px){.container{padding-inline:var(--gutter-ml)}}
@media (max-width:1023px){.container{padding-inline:var(--gutter-md)}}
@media (max-width:639px){.container{padding-inline:var(--gutter-sm)}}
.section{padding-block:var(--s-120)}
@media (max-width:1023px){.section{padding-block:var(--s-80)}}
@media (max-width:639px){.section{padding-block:var(--s-56)}}

/* 헤더 — 시안: 투명 오버레이 + 스크롤 시 축약 */
.hdr{position:fixed;inset-inline:0;top:0;z-index:var(--z-header);padding-block:var(--s-4);
  transition:background-color .28s ease,box-shadow .28s ease,backdrop-filter .28s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
/* ★ 아래로 스크롤하면 헤더를 접는다. 시안은 헤더의 **모양**을 정했고 스크롤 거동은
   정의하지 않았다(추론 허용 영역). 고정 헤더가 본문 컨트롤을 덮는 상태를 없앤다
   — probe-interactive 가 768·2560 폭에서 실제로 잡았다(버튼이 헤더 뒤로 들어감). */
.hdr.is-up{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.hdr{transition:background-color .28s ease}.hdr.is-up{transform:none}}
.hdr__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-24);padding-inline:var(--gutter-lg);width:100%}
.hdr__logo{display:block;flex:0 0 auto;width:240px;max-width:38vw}
.hdr__logo a{position:relative;display:block}
.hdr__logo img{width:100%;height:auto;transition:opacity .28s ease}
.hdr__logo .logo--black{position:absolute;left:0;top:0;opacity:0}
.hdr.is-solid .logo--white{opacity:0}
.hdr.is-solid .logo--black{opacity:1}
/* ★ flex 축소를 막지 않으면 좁은 폭에서 로고가 23px 로 눌린다(실측 390px) */
@media (max-width:767px){.hdr__logo{width:180px}}
@media (max-width:389px){.hdr__logo{width:150px}}
.hdr__nav{display:flex;align-items:center}
.gnb__item{position:relative}
.gnb__link{display:flex;align-items:center;justify-content:center;gap:6px;height:80px;width:160px;white-space:nowrap;
  font-size:var(--fs-body);font-weight:600;color:var(--c-white);line-height:var(--lh-tight)}
.gnb__caret{display:none;flex:0 0 auto;width:8px;height:8px;margin-top:-2px;
  border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(225deg);transition:transform .25s ease;transform-origin:center}
.drawer .gnb__caret{display:inline-block}
.gnb__item:hover .gnb__caret,.gnb__item:focus-within .gnb__caret,
.drawer__item.is-open .gnb__caret{transform:rotate(45deg)}
.gnb__sub{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);
  min-width:max(100%,200px);padding:8px 0;margin:0;
  background:rgba(51,51,51,.95);box-shadow:0 8px 24px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;z-index:2}
.gnb__sub::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:8px}
.gnb__item:hover .gnb__sub,.gnb__item:focus-within .gnb__sub{
  opacity:1;visibility:visible;pointer-events:auto}
.gnb__sub a{display:flex;align-items:center;justify-content:center;padding:12px 20px;
  font-size:var(--fs-sm);font-weight:500;color:var(--c-white);white-space:nowrap;line-height:var(--lh-tight)}
.gnb__sub a:hover{background:rgba(255,255,255,.08)}
@media (prefers-reduced-motion:reduce){
  .gnb__caret,.gnb__sub,.drawer__sub{transition:none}
}
.hdr__aside{display:flex;align-items:center;gap:var(--s-40);flex:0 0 auto}
.hdr__tel{display:inline-flex;align-items:center;gap:10px;background:var(--c-brand);
  color:var(--c-white);font-weight:700;padding:10px 20px;border-radius:var(--r-pill);
  white-space:nowrap;transition:background-color .2s ease,color .2s ease,transform .2s ease}
  /* 1440 에서 "031-499-" / "6178" 로 접히던 결함(실측) */
.hdr__tel:hover{background:var(--c-brand-dark)}
.hdr__tel img{flex:0 0 auto}
.hdr__hours{color:var(--c-white);font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-tight)}
.hdr.is-solid{background:rgba(255,255,255,.86);box-shadow:0 1px 0 var(--c-line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hdr.is-solid .gnb__link,.hdr.is-solid .hdr__hours{color:var(--c-ink)}
.hdr.is-solid .gnb__sub{background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.hdr.is-solid .gnb__sub a{color:var(--c-ink)}
.hdr.is-solid .gnb__sub a:hover{background:rgba(17,20,24,.06)}
.hdr__burger{display:none;width:34px;height:44px;padding:0;align-items:center;justify-content:center;color:var(--c-white)}
/* 아이콘 줄은 첫 span 만. sr-only 형제에도 막대가 그려지면 세 줄 폭이 어긋난다. */
.hdr__burger > span:first-child{display:block;width:22px;height:2px;background:currentColor;
  box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
.hdr.is-solid .hdr__burger{color:var(--c-ink)}
@media (max-width:1599px){.hdr__inner{padding-inline:var(--gutter-md)}.gnb__link{width:auto;padding-inline:var(--s-20)}.hdr__aside{gap:var(--s-20)}}
/* ★ 좁은 폭에서 로고+전화+버거가 들어가지 않아 **버거가 화면 밖으로 밀려났다**(실측 390px:
   burger left 431 > vw 390 — 클릭 불가). 전화 라벨을 접고 여백을 줄인다.
   전화번호와 운영시간은 드로어 안에 그대로 남는다(정보 손실 없음). */
.drawer__contact{margin-top:var(--s-24);padding-top:var(--s-20);border-top:1px solid var(--c-line)}
.drawer__tel{display:inline-flex;align-items:center;padding:var(--s-8) var(--s-20);border-radius:var(--r-pill);
  background:var(--c-brand);color:var(--c-white);font-weight:700}
.drawer__hours{margin-top:var(--s-12);color:var(--c-ink-2);font-size:var(--fs-sm);line-height:var(--lh-tight)}
@media (max-width:1279px){
  .hdr__inner{padding-inline:var(--gutter-md);min-height:80px}
  .hdr__nav,.hdr__hours{display:none}
  .hdr__burger{display:flex}
  /* 로고 | 여백 | 전화+버거 — space-between 3칸이면 전화가 가운데 뜬다 */
  .hdr__aside{margin-left:auto;gap:var(--s-8)}
}
@media (max-width:767px){
  .hdr__aside{gap:2px}
  .hdr__tel{padding:var(--s-8);gap:0}
  .hdr__tel-num{display:none}
}
@media (max-width:639px){
  .hdr__inner{padding-inline:var(--gutter-sm);gap:var(--s-8)}
  /* 막대를 오른쪽(콘텐츠 거터)에 붙인다 */
  .hdr__burger{justify-content:flex-end}
}
/* 모바일 드로어 — 데스크톱 가로 메뉴의 전이(학습 Champion: horizontal-menu→drawer) */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);background:rgba(17,20,24,.5);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.drawer[aria-hidden="false"]{opacity:1;visibility:visible}
.drawer__panel{position:absolute;inset-block:0;right:0;width:min(86vw,380px);background:#fff;
  padding:104px var(--s-24) var(--s-24);transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1);overflow-y:auto}
.drawer[aria-hidden="false"] .drawer__panel{transform:none}
/* ★ 닫기 버튼은 **버거와 같은 자리**에 둔다.
   드로어가 열리면 패널이 버거를 덮으므로, 사용자가 같은 곳을 다시 누르면 닫히는 것이
   기대 동작이다(probe-interactive 도 그 좌표를 다시 누른다). 헤더 좌우 여백과 맞춘다.
   헤더를 드로어보다 위로 올리는 방법은 **닫기 버튼이 로고·전화에 가려져** 못 쓴다(실측). */
.drawer__close{position:absolute;top:calc(var(--s-4) + 18px);right:var(--gutter-md);
  width:34px;height:44px;font-size:24px;line-height:1}
@media (max-width:639px){.drawer__close{right:var(--gutter-sm)}}
.drawer__toggle,.drawer__link{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:var(--s-16) var(--s-8);font-size:var(--fs-lead);font-weight:600;border-bottom:1px solid var(--c-line);text-align:left}
.drawer__toggle .gnb__caret{margin-top:0;flex:0 0 auto}
.drawer__sub{overflow:hidden;max-height:0;opacity:0;visibility:hidden;
  transition:max-height .3s ease,opacity .25s ease,visibility .25s ease;background:var(--c-bg-soft)}
.drawer__item.is-open .drawer__sub{max-height:480px;opacity:1;visibility:visible}
.drawer__sub a{display:block;padding:12px var(--s-20);font-size:var(--fs-body);font-weight:500;color:var(--c-ink-2)}
.drawer__sub a:hover{color:var(--c-brand)}

/* 푸터 — 시안: 어두운 밴드 #333 · 좌(로고+사업자정보) 우(정책링크+copyright) */
.ftr{display:flex;align-items:center;min-height:280px;background:#333;color:#fff;padding-block:var(--s-20)}
.ftr__inner{width:100%}
.ftr__inner{display:flex;gap:var(--s-40);justify-content:space-between;align-items:flex-start}
.ftr__left{display:flex;flex-wrap:wrap;column-gap:var(--s-80);row-gap:var(--s-16);align-items:flex-start}
.ftr__logo{width:260px;flex:0 0 auto}
@media (max-width:767px){.ftr__logo{width:180px}}
@media (max-width:389px){.ftr__logo{width:150px}}
.ftr__info li{color:#fff;font-size:var(--fs-sm);line-height:1.875}
.ftr__right{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-4)}
.ftr__links{display:flex;flex-wrap:wrap;column-gap:var(--s-56);row-gap:var(--s-8)}
.ftr__links a{font-size:var(--fs-xs);color:#fff;line-height:1.875}
.ftr__privacy{font-weight:700}
.ftr__links a:hover,.ftr__links a[aria-current="page"]{text-decoration:underline}
.ftr__copy{color:#999;font-size:var(--fs-sm);font-weight:700;line-height:2.2}
@media (max-width:1500px){
  .ftr__left{flex-direction:column}
}
@media (max-width:1023px){
  .ftr{padding-block:40px}
  .ftr__inner{flex-wrap:wrap;align-items:flex-end}
  .ftr__left{gap:var(--s-24)}
  .ftr__right{align-items:flex-start}
  .ftr__links{gap:10px 20px}
}
/* components.css — 반복 부품 · INTERNAL MODULE */
.btn{display:inline-flex;align-items:center;gap:var(--s-8);padding:var(--s-16) var(--s-32);
  border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm);transition:background-color .2s ease,color .2s ease,transform .2s ease}
.btn--primary{background:var(--c-brand);color:var(--c-white)}
.btn--primary:hover{background:var(--c-brand-dark)}
.btn--ghost{border:1px solid var(--c-line);color:var(--c-ink)}
.btn--ghost:hover{border-color:var(--c-brand);color:var(--c-brand)}

.eyebrow{color:var(--c-brand);font-size:var(--fs-lead);font-weight:600;line-height:var(--lh-tight)}
.h-display{font-size:var(--fs-hero);line-height:var(--lh-display)}
.h-sec{font-size:var(--fs-h2);line-height:var(--lh-heading)}
.lead{font-size:var(--fs-lead);color:var(--c-ink-2)}
@media (max-width:1023px){:root{--fs-hero:40px;--fs-h1:34px;--fs-h2:28px;--fs-h3:22px;--fs-lead:18px;--fs-body:17px}}
@media (max-width:639px){:root{--fs-hero:30px;--fs-h1:26px;--fs-h2:22px;--fs-h3:19px;--fs-lead:16px;--fs-body:16px}}

/* 페이지 히어로(서브 공통) */
.phero{position:relative;min-height:380px;display:flex;align-items:flex-end;padding-block:80px var(--s-120);color:var(--c-white)}
.phero__bg{position:absolute;inset:0;overflow:hidden}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 15%,rgba(0,0,0,.15) 100%),linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.2))}
.phero__in{position:relative}
.phero__in{display:flex;flex-direction:column;align-items:center;gap:var(--s-20);text-align:center}
.phero h1{font-size:48px;line-height:var(--lh-tight)}
.crumb{display:flex;align-items:center;justify-content:center;gap:var(--s-8);font-size:var(--fs-xs);color:rgba(255,255,255,.92)}
.crumb img{width:16px;height:16px}
.crumb li{display:flex;align-items:center;gap:var(--s-8)}
.crumb li::before{content:">";padding-inline:var(--s-4);color:rgba(255,255,255,.7)}
.crumb li:first-child::before{content:none}
@media (max-width:1023px){.phero{min-height:300px;padding-block:72px var(--s-56)}.phero h1{font-size:34px}}
@media (max-width:639px){.phero{min-height:240px;padding-block:64px var(--s-32)}.phero h1{font-size:26px}}

/* 서브 메뉴(2차 내비) — 넘치면 Swiper, 맞으면 가운데 정렬 */
.submenu,.submenu.swiper{position:sticky;top:0;z-index:90;width:100%;max-width:100%;border-bottom:1px solid #ddd;background:#fff;overflow:hidden;
  --swiper-scrollbar-bg-color:transparent;--swiper-scrollbar-drag-bg-color:#000;
  --swiper-scrollbar-bottom:0;--swiper-scrollbar-sides-offset:0;--swiper-scrollbar-size:3px;
  touch-action:pan-x pan-y}
.submenu ul{display:flex;justify-content:center;margin-inline:auto}
.submenu li{display:flex;width:auto;height:auto}
.submenu a{display:inline-flex;align-items:center;justify-content:center;position:relative;height:60px;
  padding-inline:var(--s-40);font-size:var(--fs-body);font-weight:500;color:#444;white-space:nowrap;
  -webkit-user-drag:none;user-select:none}
.submenu li+li a::before{content:"";position:absolute;left:0;top:50%;width:1px;height:18px;margin-top:-9px;background:#ccc}
.submenu a:hover{color:var(--c-brand)}
.submenu a[aria-current="page"]{color:var(--c-brand);font-weight:600}
.submenu.is-overflow{cursor:grab}
.submenu.is-overflow:active{cursor:grabbing}
.submenu .swiper-wrapper{align-items:stretch;justify-content:center}
.submenu.is-overflow .swiper-wrapper{justify-content:flex-start}
.submenu .swiper-slide{width:auto}
.submenu .swiper-scrollbar{left:0;width:100%;height:3px;bottom:0;border-radius:0;background:transparent}
.submenu .swiper-scrollbar-drag{background:#000;border-radius:0}
.submenu::before,.submenu::after{content:"";position:absolute;top:0;bottom:0;width:48px;
  z-index:2;pointer-events:none;opacity:0;transition:opacity .2s}
.submenu::before{left:0;background:linear-gradient(to right,#fff,transparent)}
.submenu::after{right:0;background:linear-gradient(to left,#fff,transparent)}
.submenu.has-prev::before,.submenu.has-next::after{opacity:1}
@media (max-width:1279px){.submenu a{padding-inline:var(--s-24);font-size:var(--fs-sm)}}

/* 카드 그리드 — 칸수는 페이지 CSS 가 정한다(학습 Champion 근거) */
.grid{display:grid;gap:var(--s-24)}
.card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.card__media{aspect-ratio:16/10;background:var(--c-bg-soft)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:var(--s-24)}
.card__title{font-size:var(--fs-h3)}
.card__desc{margin-top:var(--s-8);color:var(--c-ink-2);font-size:var(--fs-sm)}

/* 규격 표 */
.spec{border-top:2px solid var(--c-ink)}
.spec th,.spec td{padding:var(--s-16);border-bottom:1px solid var(--c-line);font-size:var(--fs-sm);text-align:left}
.spec th{background:var(--c-bg-soft);font-weight:700;white-space:nowrap}
.spec-wrap{overflow-x:auto}

/* CTA 밴드 */
.cta{background:var(--c-brand);color:var(--c-white)}
.cta__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-32)}
.cta h2{font-size:var(--fs-h2)}
.cta__list li{font-size:var(--fs-sm);opacity:.92;line-height:2}