/* ════════════════════════════════════════════════════════════
   VODA — 서브페이지 스타일 (voda.css 다음에 로드)
   ════════════════════════════════════════════════════════════ */

/* ── 서브 히어로 ─────────────────────────────────────────── */
.subhero{
  position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;
  padding:76px 0 68px;
}
.subhero .hero-bg img{opacity:.24}
.subhero-in{position:relative;z-index:2}
.crumb{
  display:flex;align-items:center;gap:9px;margin-bottom:16px;
  font-size:var(--fs-caption);letter-spacing:.04em;color:rgba(255,255,255,.62);
}
.crumb a:hover{color:var(--gold-soft)}
.crumb svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;opacity:.6}
.subhero h1{font-size:var(--fs-headline-lg);letter-spacing:-.035em}
.subhero .lead{margin-top:12px;font-size:var(--fs-body-md);opacity:.78;max-width:60ch}

/* ── 좌측 로컬 내비 + 본문 ───────────────────────────────── */
/* .wrap 과 함께 쓰이므로 좌우 여백을 0 으로 덮지 않는다.
   덮으면 뷰포트가 --container 보다 좁을 때 본문이 화면 끝에 붙는다. */
.page{display:grid;grid-template-columns:232px minmax(0,1fr);gap:56px;padding:var(--section-gap) var(--margin)}
.lnb{position:sticky;top:100px;align-self:start}
.lnb h2{
  font-size:var(--fs-headline-md);color:var(--navy-deep);
  padding-bottom:16px;border-bottom:2px solid var(--navy-deep);margin-bottom:8px;
}
.lnb li a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-radius:var(--r);
  font-size:var(--fs-label);font-weight:600;color:var(--on-surface-variant);
  border-bottom:1px solid var(--outline-variant);transition:.2s;
}
.lnb li a:hover{background:var(--surface-gray);color:var(--navy-deep)}
.lnb li a.on{background:var(--navy-deep);color:#fff;border-bottom-color:transparent}
.lnb li a.on::after{content:"";width:6px;height:6px;border-radius:var(--r-full);background:var(--gold)}

/* ── 본문 타이포 ─────────────────────────────────────────── */
.prose h2{
  font-size:26px;color:var(--navy-deep);margin:0 0 20px;
  padding-left:16px;border-left:4px solid var(--gold);letter-spacing:-.03em;
}
.prose h3{font-size:19px;color:var(--primary-container);margin:36px 0 12px;letter-spacing:-.02em}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 16px;font-size:var(--fs-body-md);line-height:1.85;color:#33363d}
.prose p:last-child{margin-bottom:0}
.prose li{
  position:relative;padding-left:20px;margin-bottom:10px;
  font-size:var(--fs-body-md);line-height:1.8;color:#33363d;
}
.prose li::before{
  content:"";position:absolute;left:2px;top:12px;
  width:6px;height:6px;border-radius:var(--r-full);background:var(--gold);
}
.prose img{margin:28px 0;border-radius:var(--r-lg);box-shadow:var(--shadow-2);width:100%}
.prose hr{margin:36px 0;border:0;border-top:1px solid var(--outline-variant)}
.prose a{color:var(--primary-container);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--gold)}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:var(--fs-label)}
.prose th,.prose td{border:1px solid var(--outline-variant);padding:12px 14px;text-align:left}
.prose th{background:var(--surface-gray);color:var(--navy-deep);font-weight:700}

.sign{
  margin-top:32px;padding-top:24px;border-top:1px solid var(--outline-variant);
  font-size:var(--fs-body-md);font-weight:700;color:var(--navy-deep);text-align:right;
}

/* ── 연혁 타임라인 ───────────────────────────────────────── */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--outline-variant)}
.tl li{position:relative;padding:0 0 24px;margin:0}
.tl li::before{
  content:"";position:absolute;left:-30px;top:7px;width:12px;height:12px;
  border-radius:var(--r-full);background:#fff;border:3px solid var(--gold);
}
.tl .y{
  display:inline-block;min-width:92px;margin-right:14px;font-family:var(--font-en);
  font-size:15px;font-weight:800;color:var(--primary-container);letter-spacing:-.01em;
}
.tl .t{font-size:var(--fs-body-md);color:#33363d;line-height:1.7}
.tl li.major::before{background:var(--gold);width:14px;height:14px;left:-31px}
.tl li.major .t{font-weight:700;color:var(--navy-deep)}

/* ── 정관 조문 ───────────────────────────────────────────── */
.art{
  padding:22px 26px;margin-bottom:12px;background:#fff;
  border:1px solid #E9ECEF;border-radius:var(--r-md);box-shadow:var(--shadow-1);
}
.art h3{margin:0 0 10px;font-size:17px;color:var(--navy-deep)}
.art p{margin:0 0 10px;font-size:15px;line-height:1.8;color:#41444b}
.art p:last-child{margin-bottom:0}
.chap{
  display:inline-block;margin:26px 0 14px;padding:6px 16px;border-radius:var(--r-full);
  background:var(--navy-deep);color:#fff;font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;
}
.chap:first-child{margin-top:0}

/* ── 섹션 랜딩 카드 ──────────────────────────────────────── */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}
.pcard{
  display:block;padding:30px 26px;background:#fff;border:1px solid #E9ECEF;
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);transition:.3s cubic-bezier(.4,0,.2,1);
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-3);border-color:var(--gold)}
.pcard .n{
  font-family:var(--font-en);font-size:var(--fs-caption);font-weight:800;
  letter-spacing:.18em;color:var(--gold);
}
.pcard h3{margin:10px 0 8px;font-size:20px;color:var(--navy-deep)}
.pcard p{font-size:var(--fs-label);color:var(--text-muted);line-height:1.6}
.pcard .go{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:var(--fs-label);font-weight:700;color:var(--primary-container);
}
.pcard .go svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .24s}
.pcard:hover .go svg{transform:translateX(4px)}

/* ── 제휴 교육기관 ───────────────────────────────────────── */
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.partner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;background:#fff;border:1px solid #E9ECEF;border-radius:var(--r-md);
  font-size:var(--fs-body-md);font-weight:700;color:var(--navy-deep);
  box-shadow:var(--shadow-1);transition:.26s;
}
.partner:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-2);color:var(--primary-container)}
.partner svg{width:16px;height:16px;stroke:var(--gold);stroke-width:2.2;fill:none;flex:0 0 auto}

/* ── 갤러리 ──────────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.gallery img{margin:0;border-radius:var(--r-md)}

/* ── 지도 / 오시는길 ─────────────────────────────────────── */
.mapwrap{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2);border:1px solid var(--outline-variant)}
.mapwrap iframe{display:block;width:100%;height:420px;border:0}
.infoTbl{width:100%;border-collapse:collapse;border-top:2px solid var(--navy-deep);margin-top:28px}
.infoTbl th,.infoTbl td{padding:16px 18px;border-bottom:1px solid var(--outline-variant);font-size:var(--fs-body-md);text-align:left}
.infoTbl th{width:150px;background:var(--surface-gray);color:var(--navy-deep);font-weight:700}

/* ── 외부 임베드 ─────────────────────────────────────────── */
.embedwrap{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2);border:1px solid var(--outline-variant);background:#fff}
.embedwrap iframe{display:block;width:100%;height:760px;border:0}
.embed-note{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:14px 18px;
  background:#fff8e1;border:1px solid #f0dfa8;border-radius:var(--r);
  font-size:var(--fs-label);line-height:1.65;color:#6b5613;
}
.embed-note svg{width:18px;height:18px;stroke:#b8912a;stroke-width:2;fill:none;flex:0 0 auto;margin-top:3px}
/* 텍스트는 반드시 하나의 플렉스 아이템으로 묶는다.
   그러지 않으면 <strong> 등이 개별 아이템이 되어 문장이 여러 칸으로 쪼개진다. */
.embed-note > span{flex:1 1 auto;min-width:0}

/* ── 준비 중 ─────────────────────────────────────────────── */
.empty{
  padding:72px 32px;text-align:center;background:#fff;
  border:1px dashed var(--outline-variant);border-radius:var(--r-lg);
}
.empty svg{width:46px;height:46px;stroke:var(--outline);stroke-width:1.5;fill:none;margin:0 auto 18px}
.empty h3{font-size:20px;color:var(--navy-deep);margin-bottom:10px}
.empty p{font-size:var(--fs-label);color:var(--text-muted);line-height:1.7}

/* ── 외부 사이트 링크 카드 ───────────────────────────────── */
/* 카드 전체가 <a> 다. 안쪽 요소는 전부 <span> 이라 기본 display 가 inline 이므로
   block/flex 를 직접 지정해 준다 — 빠뜨리면 줄이 통째로 흐른다. */
.wlink{
  display:block;margin-top:24px;overflow:hidden;
  border:1px solid var(--outline-variant);border-radius:var(--r-lg);
  background:var(--navy-deep);box-shadow:var(--shadow-1);
  transition:box-shadow .3s,transform .3s;
}
.wlink:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
/* .prose img 가 여백·모서리·그림자를 주는데 카드 안에서는 전부 방해가 된다.
   .prose 를 앞에 붙여야 그쪽(0,1,1)을 이긴다.

   height:auto 가 핵심이다. <img> 의 height 속성은 presentational hint 로
   height:672px 처럼 작용해서, 그대로 두면 height 가 auto 가 아니라는 이유로
   aspect-ratio 가 통째로 무시된다. 속성 자체는 남겨 둔다 — 로딩 중 자리를 잡아 준다. */
.prose .wlink__img{
  display:block;width:100%;height:auto;aspect-ratio:1536/560;
  object-fit:cover;object-position:center 62%;
  margin:0;border-radius:0;box-shadow:none;
  transition:transform .5s ease;
}
/* 확대는 이미지에만 준다. 카드에 주면 글자까지 흐려진다 */
.wlink:hover .wlink__img{transform:scale(1.03)}
.wlink__body{display:block;padding:26px 30px 28px}
.wlink__eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-soft);
}
.wlink__eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:0 0 auto}
.wlink__title{
  display:block;margin-top:10px;
  font-size:21px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.3;
}
/* keep-all 이 없으면 한글이 아무 데서나 끊긴다 — '인천' 이 '인 / 천' 으로 갈라졌다 */
.wlink__desc{
  display:block;margin-top:10px;max-width:60ch;word-break:keep-all;
  font-size:var(--fs-label);line-height:1.75;color:rgba(255,255,255,.74);
}
/* .btn-line 을 그대로 못 쓴다 — 그쪽은 밝은 배경 기준이라 여기서는 글자가 묻힌다 */
.wlink__cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:12px 26px;
  border:1.5px solid rgba(255,255,255,.34);border-radius:var(--r-full);
  font-size:var(--fs-label);font-weight:700;color:#fff;transition:.26s;
}
.wlink:hover .wlink__cta{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.wlink__cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;flex:0 0 auto}

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width:900px){
  .page{grid-template-columns:1fr;gap:32px;padding:44px var(--margin)}
  .lnb{position:static}
  .lnb ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
  .lnb li a{border-bottom:1px solid var(--outline-variant);border-radius:var(--r)}
  .subhero{padding:52px 0 46px}
  .prose h2{font-size:22px}
  .embedwrap iframe{height:520px}
  .mapwrap iframe{height:320px}
  .tl .y{display:block;margin-bottom:2px}
  /* 좁은 화면에서는 가로로 더 눕힌다. 세로로 길면 사진이 화면을 다 먹는다 */
  .prose .wlink__img{aspect-ratio:16/9}
  .wlink__body{padding:22px 20px 24px}
  .wlink__title{font-size:19px}
  .wlink__cta{width:100%;justify-content:center}
}