/* ============================================================
   COLOR SYSTEM — 브랜드 컬러 확정 시 이 6개 값만 교체하면 됩니다.
   ============================================================ */
:root{
  /* 밝은 테마 — 이 값들만 바꾸면 전체 색이 바뀝니다 */
  --brand:    #1E90D2;   /* 하늘 파랑 */
  --accent:   #7CC142;   /* 연두 */
  --tint:     #E9F3FB;   /* 옅은 하늘 색면 */
  --tint-2:   #F2F8EA;   /* 옅은 연두 색면 */
  --dark:     #12283A;   /* 사진 확대 배경 등 최소한의 진한 면 */

  --ink:      #16262E;   /* 본문 최고 대비 */
  --ink-2:    #4E606B;   /* 보조 텍스트 */
  --ink-3:    #90A0AA;   /* 캡션 / 비활성 */
  --paper:    #FFFFFF;   /* 기본 배경 */
  --mist:     #F2F6F4;   /* 섹션 구분 배경 */

  --line:     rgba(22,38,46,.13);
  --line-inv: rgba(255,255,255,.24);

  --font-kr: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-en: "Schibsted Grotesk", var(--font-kr);

  --pad: clamp(20px, 5vw, 96px);
  --maxw: 1560px;

  --e: cubic-bezier(.22,.61,.36,1);
  --e-io: cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-kr); font-weight:400; line-height:1.7;
  letter-spacing:-.015em; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; word-break:keep-all;
}
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; border-radius:2px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- SCROLL SNAP (핵심 섹션만 부드럽게 고정) ---------- */
html{ scroll-snap-type:y proximity; }
.snap{ scroll-snap-align:start; scroll-snap-stop:normal; }
/* 손가락으로 넘기는 화면(태블릿 · 휴대폰)에서는 각 화면에 확실히 멈춥니다.
   마우스를 쓰는 화면은 자유롭게 스크롤되도록 그대로 둡니다. */
@media (hover:none) and (pointer:coarse){
  html{ scroll-snap-type:y mandatory; }
  .snap, .biz-body-wrap{ scroll-snap-stop:always; }
}

/* ---------- TYPE SCALE ---------- */
.eyebrow{
  font-weight:600; font-size:clamp(11.5px,1vw,13px);
  letter-spacing:.06em; color:var(--ink-3);
}
.display{
  font-size:clamp(34px,6.4vw,86px); line-height:1.1; font-weight:600;
  letter-spacing:-.045em; margin:0;
}
.h2{
  font-size:clamp(28px,4.2vw,58px); line-height:1.18; font-weight:600;
  letter-spacing:-.04em; margin:0;
}
.h3{
  font-size:clamp(21px,2.3vw,30px); line-height:1.3; font-weight:600;
  letter-spacing:-.03em; margin:0;
}
.lead{
  font-size:clamp(15.5px,1.35vw,19px); line-height:1.85; color:var(--ink-2);
  font-weight:400; margin:0;
}
.cap{
  font-size:clamp(12.5px,1vw,14px); line-height:1.6; color:var(--ink-3); margin:0;
}
.num{
  font-family:var(--font-en); font-weight:400; font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

/* ============================================================
   PHOTO COMPONENT
   ============================================================ */
.ph{
  position:relative; margin:0; overflow:hidden; background:var(--mist);
  aspect-ratio:var(--ar, 4/3);
}
.ph img{
  width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);
  transform:translate3d(0,var(--shift,0px),0) scale(calc(var(--scale,1) * var(--zoom,1)));
  transform-origin:center; will-change:transform;
}
.ph[data-empty="1"] img{ display:none; }
.ph-empty{
  position:absolute; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; padding:16px;
  background:
    repeating-linear-gradient(135deg, rgba(22,38,46,.055) 0 1px, transparent 1px 10px),
    #E6ECEA;
  box-shadow:inset 0 0 0 1px rgba(22,38,46,.16);
}
.ph[data-empty="1"] .ph-empty{ display:flex; }
.ph-key{ font-size:11.5px; letter-spacing:.02em; color:var(--ink-3); }
.ph-note{ font-size:12.5px; color:var(--ink-3); max-width:26ch; line-height:1.5; }
.ph-fill{ font-size:11px; color:var(--ink-3); opacity:.7; margin-top:2px; }
.ph--dark{ background:#1B3446; }
.ph--dark .ph-empty{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 11px), #0C2445;
  box-shadow:inset 0 0 0 1px var(--line-inv);
}
.ph--dark .ph-key,.ph--dark .ph-note{ color:rgba(255,255,255,.5); }

/* 9분할 텍스트 위치 */
.overlay{
  position:absolute; inset:0; display:grid; padding:clamp(22px,4.5vw,72px);
  pointer-events:none; z-index:2;
}
.overlay > *{ pointer-events:auto; max-width:min(640px,88%); }
[data-align="tl"]{ place-items:start start; }  [data-align="tc"]{ place-items:start center; text-align:center; }
[data-align="tr"]{ place-items:start end; text-align:right; }
[data-align="cl"]{ place-items:center start; } [data-align="cc"]{ place-items:center center; text-align:center; }
[data-align="cr"]{ place-items:center end; text-align:right; }
[data-align="bl"]{ place-items:end start; }    [data-align="bc"]{ place-items:end center; text-align:center; }
[data-align="br"]{ place-items:end end; text-align:right; }

/* 사진 위 글씨가 읽히도록 덮는 어둠.
   글자는 사진 아래에서 15~40% 높이에 놓이므로, 그 구간(.72~.48)이 가장 중요합니다.
   더 어둡게 하려면 앞쪽 숫자들을, 밝게 하려면 낮추세요. */
.scrim-b::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(8,22,38,.88) 0%, rgba(8,22,38,.72) 24%, rgba(8,22,38,.48) 44%, rgba(8,22,38,.22) 66%, rgba(8,22,38,0) 88%); }
.scrim-l::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right, rgba(8,22,38,.86) 0%, rgba(8,22,38,.66) 26%, rgba(8,22,38,.34) 48%, rgba(8,22,38,.10) 70%, rgba(8,22,38,0) 88%); }
/* 오른쪽에 글자를 얹을 때 — scrim-l의 좌우를 뒤집은 것입니다 */
.scrim-r::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to left, rgba(8,22,38,.86) 0%, rgba(8,22,38,.66) 26%, rgba(8,22,38,.34) 48%, rgba(8,22,38,.10) 70%, rgba(8,22,38,0) 88%); }
.on-photo{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 24px rgba(0,0,0,.5); }
.on-photo .eyebrow{ color:rgba(255,255,255,.78); }

/* ============================================================
   HEADER
   ============================================================ */
.head{
  position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:16px var(--pad);
  color:#fff; opacity:0; pointer-events:none;
  transition:background .45s var(--e), color .45s var(--e), box-shadow .45s var(--e), opacity .4s var(--e);
}
.head.is-solid{ background:rgba(255,255,255,.94); color:var(--ink); box-shadow:0 1px 0 var(--line);
  opacity:1; pointer-events:auto; }
.head-name{ font-size:14px; font-weight:600; letter-spacing:-.02em; }
.head-name span{ opacity:.62; font-weight:400; }
.head-name{ text-align:left; }
.head-menu{ display:flex; align-items:center; gap:12px; font-size:13.5px; font-weight:600; letter-spacing:.02em; }
.head-menu .bars{ display:flex; flex-direction:column; gap:5px; width:24px; }
.head-menu .bars i{ display:block; height:1.5px; background:currentColor; transition:transform .4s var(--e); }
.head-menu:hover .bars i:nth-child(1){ transform:translateX(4px); }
.head-menu:hover .bars i:nth-child(3){ transform:translateX(-4px); }

/* 처음으로 돌아가기 */
.to-top{
  position:fixed; z-index:70; right:clamp(16px,2.4vw,32px); bottom:clamp(16px,2.4vw,32px);
  display:flex; align-items:center; gap:9px; padding:12px 20px 12px 16px; border-radius:999px;
  background:rgba(7,26,56,.92); color:#fff; font-size:13.5px; font-weight:600; letter-spacing:-.02em;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 16px 34px -18px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .4s var(--e), transform .45s var(--e), visibility .4s, background .3s var(--e);
}
body.past-hero .to-top{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--brand); border-color:var(--brand); }
.to-top svg{ color:var(--accent); }
.to-top svg{ width:15px; height:15px; }
@media (max-width:520px){ .to-top{ padding:11px 16px 11px 13px; font-size:12.5px; } }

/* ============================================================
   01 HERO
   ============================================================ */
.hero{
  position:relative; height:100svh; min-height:620px; background:var(--paper); cursor:pointer;
  display:grid; grid-template-columns:clamp(238px,19.5vw,306px) minmax(0,1fr);
  /* 줄 높이를 화면 높이에 묶어 둡니다.
     이게 없으면 좌측 목록이 길어질 때 칸이 같이 늘어나 첫 화면 밖으로 삐져나갑니다. */
  grid-template-rows:minmax(0,1fr);
  transition:grid-template-columns .65s var(--e);
}

/* 목록 접기 */
.rail-toggle{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:13px clamp(20px,2vw,30px); border-top:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--ink-3);
  transition:color .3s var(--e), background .3s var(--e);
}
.rail-toggle:hover{ color:var(--brand); background:var(--mist); }
.rail-toggle svg{ width:15px; height:15px; flex:none; transition:transform .55s var(--e); }
body.rail-closed .hero{ grid-template-columns:clamp(62px,5.6vw,82px) minmax(0,1fr); }
body.rail-closed .rail-brand,
body.rail-closed .rail-label,
body.rail-closed .rail-sns,
body.rail-closed .hero-rail .sd .t,
body.rail-closed .hero-rail .sd .d,
body.rail-closed .rail-toggle span{ display:none; }
body.rail-closed .hero-rail .sd{ padding-left:0; padding-right:0; text-align:center; }
body.rail-closed .hero-rail .sd .num{ font-size:14px; font-weight:600; }
body.rail-closed .hero-rail li + li::before{ left:14px; right:14px; }
body.rail-closed .rail-toggle{ justify-content:center; padding-left:0; padding-right:0; }
body.rail-closed .rail-toggle svg{ transform:rotate(180deg); }
@media (max-width:960px){ .rail-toggle{ display:none; } body.rail-closed .hero{ grid-template-columns:1fr; } }

/* ---------- 좌측 목록 크기 ----------
   사업 7개가 어떤 화면에서도 한 화면에 들어오도록,
   여백과 글자를 '화면 높이(vh)'에 비례시켰습니다.
   화면이 낮아지면 자동으로 함께 줄어듭니다. 자바스크립트가 필요 없습니다.
   가운데 vh 값이 비율, 양옆 px는 최소·최대 한계입니다. */
.hero-rail .sd{ padding-top:clamp(6px,.95vh,24px); padding-bottom:clamp(6px,.95vh,24px); }
.hero-rail .sd .num{ font-size:clamp(10px,1.15vh,12.5px); }
.hero-rail .sd .t{ margin-top:clamp(2px,.5vh,6px); font-size:clamp(13.5px,1.7vh,21px); }
.hero-rail .sd .d{ margin-top:clamp(3px,.6vh,6px); font-size:clamp(10.5px,1.3vh,12.5px); }
.rail-brand{ padding-top:clamp(12px,1.9vh,32px); padding-bottom:clamp(10px,1.5vh,26px); }
.rail-brand b{ font-size:clamp(15px,2vh,21px); }
.rail-brand small{ font-size:clamp(10.5px,1.25vh,12.5px); }
.rail-toggle{ padding-top:clamp(8px,1.1vh,13px); padding-bottom:clamp(8px,1.1vh,13px); }
.rail-sns{ padding-top:clamp(8px,1.3vh,24px); padding-bottom:clamp(10px,1.6vh,30px); }
.rail-sns a{ width:clamp(24px,2.7vh,32px); height:clamp(24px,2.7vh,32px); }
/* 그래도 모자란 아주 낮은 화면에서는 한 줄 설명을 감춥니다 (js/site.js가 붙입니다) */
body.rail-slim .hero-rail .sd .d{ display:none; }


/* ---------- 좌측 솔리드 패널 ---------- */
.hero-rail{
  position:relative; z-index:5; color:var(--ink); background:var(--paper);
  box-shadow:inset -1px 0 0 var(--line);
  display:flex; flex-direction:column; cursor:default; min-height:0;
}
.rail-brand{
  padding:clamp(22px,2.3vw,32px) clamp(20px,2vw,30px) clamp(18px,2vw,26px);
}
.rail-brand small{ display:block; font-size:12.5px; color:var(--ink-3); letter-spacing:-.01em; }
.rail-brand b{ display:block; margin-top:3px; font-size:clamp(17px,1.45vw,21px); font-weight:700; letter-spacing:-.035em; }

.rail-label{ margin:clamp(16px,1.8vw,24px) clamp(20px,2vw,30px) 0; font-size:11.5px;
  letter-spacing:.02em; color:var(--ink-3); }
/* overflow는 넣지 마세요 — 선택 항목의 화살촉(.sd::after)이 목록 밖으로
   튀어나오는 구조라, overflow를 주면 가로 방향까지 잘려 화살촉이 사라집니다.
   높이가 모자랄 때는 아래 max-height 단계들이 항목을 줄여서 맞춥니다. */
/* 남은 높이를 사업 7개가 똑같이 나눠 갖습니다.
   칸이 늘 화면 안에서 나뉘므로 아래 '목록 접기'와 겹칠 수 없습니다.
   글자 크기는 아래 vh 값들이 화면 높이에 맞춰 함께 줄여 줍니다. */
.hero-rail ul{ list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column;
  min-height:0; }
.hero-rail li{ flex:1 1 auto; min-height:0; display:flex; }
.hero-rail .sd{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.hero-rail li{ position:relative; }
.hero-rail li + li::before{
  content:""; position:absolute; z-index:2; top:0; height:1px;
  left:clamp(20px,2vw,30px); right:clamp(20px,2vw,30px); background:var(--line);
}
.hero-rail .sd{
  position:relative; width:100%; text-align:left; color:var(--ink);
  padding:clamp(15px,1.75vw,24px) clamp(20px,2vw,30px);
  transition:background .45s var(--e), color .45s var(--e);
}
.hero-rail .sd .num{ display:block; font-family:var(--font-en); font-size:12.5px; letter-spacing:.08em; color:var(--ink-3); transition:color .45s var(--e); }
.hero-rail .sd .t{ display:block; margin-top:6px; font-size:clamp(16.5px,1.45vw,21px); font-weight:700; letter-spacing:-.038em; line-height:1.28; }
.hero-rail .sd .d{ display:block; margin-top:6px; font-size:12.5px; line-height:1.5; letter-spacing:-.015em; color:var(--ink-3); transition:color .45s var(--e); }

/* 선택 시 패널 밖으로 튀어나오는 화살촉 */
.hero-rail .sd::after{
  content:""; position:absolute; left:100%; top:0; height:100%; width:clamp(26px,2.8vw,44px);
  background:var(--brand); clip-path:polygon(0 0, 0 100%, 100% 50%);
  opacity:0; transform:translateX(-12px); pointer-events:none;
  transition:opacity .38s var(--e), transform .55s var(--e);
}
.hero-rail .sd:hover,
.hero-rail .sd.is-out{ background:var(--brand); color:#fff; }
.hero-rail .sd:hover .num, .hero-rail .sd.is-out .num{ color:rgba(255,255,255,.72); }
.hero-rail .sd:hover .d,   .hero-rail .sd.is-out .d{ color:rgba(255,255,255,.85); }
.hero-rail .sd:hover::after,
.hero-rail .sd.is-out::after{ opacity:1; transform:translateX(0); }

.rail-sns{ display:flex; gap:clamp(10px,1.2vw,18px); padding:clamp(16px,1.8vw,24px) clamp(20px,2vw,30px) clamp(20px,2.2vw,30px); }
.rail-sns a{ width:32px; height:32px; display:grid; place-items:center; color:var(--ink-3);
  transition:color .3s var(--e), transform .35s var(--e); }
.rail-sns a:hover{ color:var(--brand); transform:translateY(-2px); }
.rail-sns svg{ width:21px; height:21px; }

/* ---------- 우측 사진 영역 ---------- */
.hero-stage{
  position:relative; z-index:1; overflow:hidden;
  display:grid; grid-template-rows:minmax(0,1fr) auto;
  grid-template-columns:minmax(0,1fr); justify-content:stretch; justify-items:start;
  padding:clamp(64px,8vh,104px) clamp(26px,4vw,78px) clamp(24px,3.4vw,52px);
}
.hero-stage .ph{ position:absolute; inset:0; aspect-ratio:auto; }
/* 첫 화면 자동 전환용 층. 사진을 넣은 것만 차례로 나타납니다.
   전환 속도는 아래 1.4s, 넘어가는 간격은 js/site.js의 HERO_INTERVAL */
.hero-stage .hero-slide{ z-index:1; opacity:0; pointer-events:none;
  transition:opacity 1.4s var(--e); }
.hero-stage .hero-slide.is-on{ opacity:1; }

/* 좌측 목록에 올렸을 때 겹쳐 보여줄 사진. 평소에는 완전히 투명합니다.
   전환 속도를 바꾸려면 아래 .55s 값을 조절하세요. */
.hero-stage .hero-alt{ z-index:1; opacity:0; pointer-events:none;
  transition:opacity .55s var(--e); }
.hero-stage .hero-alt.is-on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .hero-stage .hero-alt{ transition-duration:.01ms; } }
.hero-veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  /* 사진이 밝으면 글자가 묻히므로 글자가 놓이는 왼쪽·아래를 충분히 눌러 줍니다.
     사진이 어두워서 답답하면 아래 숫자들을 조금씩 낮추세요. */
  background:
    linear-gradient(to right, rgba(8,20,34,.86) 0%, rgba(8,20,34,.68) 30%, rgba(8,20,34,.30) 64%, rgba(8,20,34,.38) 100%),
    linear-gradient(to top, rgba(8,20,34,.70) 0%, rgba(8,20,34,.20) 46%, rgba(8,20,34,0) 74%);
}
.hero-menu{
  position:absolute; z-index:6; top:clamp(20px,2.3vw,32px); right:clamp(22px,3vw,46px);
  display:flex; align-items:center; gap:13px; color:#fff;
  font-size:13.5px; font-weight:600; letter-spacing:.02em;
}
.hero-menu .bars{ display:flex; flex-direction:column; gap:6px; width:30px; }
.hero-menu .bars i{ display:block; height:1.5px; background:#fff; transition:transform .4s var(--e); }
.hero-menu:hover .bars i:nth-child(1){ transform:translateX(4px); }
.hero-menu:hover .bars i:nth-child(3){ transform:translateX(-4px); }

.hero-copy{ position:relative; z-index:5; align-self:center; justify-self:stretch;
  max-width:min(600px,56%); color:#fff; }
.hero-copy h1{
  margin:clamp(16px,1.8vw,26px) 0 0; font-size:clamp(35px,4.7vw,70px);
  font-weight:300; line-height:1.28; letter-spacing:-.05em;
  color:rgba(255,255,255,.90); text-shadow:0 1px 3px rgba(6,16,28,.55), 0 2px 30px rgba(6,16,28,.5);
}
/* 줄을 감싸는 span만 블록으로. 줄 안에 들어가는 조각까지 블록이 되면 안 됩니다 */
.hero-copy h1 > span{ display:block; }
/* 핵심 단어는 굵기와 밝기로만 구분 */
.hero-copy h1 b{ font-weight:700; color:#fff; letter-spacing:-.055em;
  text-shadow:0 1px 3px rgba(6,16,28,.6), 0 2px 26px rgba(6,16,28,.55); }
.hero-rule{ width:44px; height:1px; background:rgba(255,255,255,.5);
  margin:clamp(24px,2.8vw,40px) 0 clamp(18px,2vw,26px); }
.hero-desc{ margin:0; font-weight:400; font-size:clamp(13.5px,1.05vw,16.5px);
  line-height:1.9; color:rgba(255,255,255,.88); letter-spacing:-.02em;
  text-shadow:0 1px 3px rgba(6,16,28,.55), 0 1px 16px rgba(6,16,28,.5); }

.hero-scroll{
  position:relative; z-index:5; align-self:end; justify-self:end; margin-top:clamp(16px,2.6vh,30px);
  display:flex; flex-direction:column; align-items:center; gap:11px;
  color:rgba(255,255,255,.72); text-shadow:0 1px 14px rgba(6,16,28,.45);
}
.hero-scroll .line{ display:block; width:1px; height:46px; background:rgba(255,255,255,.32);
  position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:""; position:absolute; inset:0; background:#fff;
  transform:translateY(-100%); animation:sweep 2.8s var(--e-io) infinite; }
@keyframes sweep{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }
.hero-scroll .lbl{ font-size:12px; letter-spacing:.02em; }

/* ---------- 전체 메뉴 ---------- */
.menu-ov{
  position:fixed; inset:0; z-index:90; background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  padding:clamp(78px,11vh,132px) var(--pad) clamp(40px,7vh,76px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--e), visibility .5s;
}
.menu-ov.is-open{ opacity:1; visibility:visible; }
/* 목록 폭을 좁혀 구분선이 글자 옆에서 끝나게 합니다. 넓히려면 680px 값을 키우세요.
   화면이 낮으면 목록 안에서만 스크롤되고 '닫기' 버튼은 제자리에 남습니다. */
.menu-ov ul{ list-style:none; margin:0 auto; padding:0; width:100%; max-width:min(680px,100%);
  max-height:100%; overflow-y:auto; overscroll-behavior:contain; }
.menu-ov li{ border-top:1px solid var(--line);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--e), transform .5s var(--e); }
.menu-ov li:last-child{ border-bottom:1px solid var(--line); }
.menu-ov.is-open li{ opacity:1; transform:none; }
/* 열릴 때만 순서대로 — 닫을 때는 지연 없이 한 번에 사라집니다 */
.menu-ov.is-open li:nth-child(1){ transition-delay:.10s }
.menu-ov.is-open li:nth-child(2){ transition-delay:.15s }
.menu-ov.is-open li:nth-child(3){ transition-delay:.20s }
.menu-ov.is-open li:nth-child(4){ transition-delay:.25s }
.menu-ov.is-open li:nth-child(5){ transition-delay:.30s }
.menu-ov.is-open li:nth-child(6){ transition-delay:.35s }
.menu-ov.is-open li:nth-child(7){ transition-delay:.40s }
.menu-ov.is-open li:nth-child(8){ transition-delay:.45s }
.menu-ov.is-open li:nth-child(9){ transition-delay:.50s }
.menu-ov.is-open li:nth-child(10){ transition-delay:.55s }
.menu-ov.is-open li:nth-child(11){ transition-delay:.60s }
.menu-ov a{ display:flex; align-items:baseline; gap:clamp(12px,1.6vw,20px);
  padding:clamp(11px,1.6vh,19px) 2px; font-size:clamp(19px,1.9vw,28px); font-weight:600;
  letter-spacing:-.035em; color:var(--ink); transition:color .3s var(--e), padding-left .45s var(--e); }
.menu-ov a:hover{ color:var(--brand); padding-left:14px; }
.menu-ov a:hover .num{ color:var(--accent); }
.menu-ov a .num{ flex:0 0 auto; min-width:22px; font-size:11.5px; letter-spacing:.12em; color:var(--ink-3); }
.menu-close{ position:absolute; top:clamp(20px,2.3vw,32px); right:clamp(22px,3vw,46px); z-index:2;
  font-size:13px; font-weight:600; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:8px 16px; background:var(--paper);
  transition:color .3s var(--e), border-color .3s var(--e); }
.menu-close:hover{ color:var(--brand); border-color:var(--brand); }

@media (prefers-reduced-motion:reduce){
  .menu-ov li{ opacity:1; transform:none; }
}

/* ---------- 모바일 ---------- */
/* 창 높이가 낮을 때 */
@media (max-height:760px) and (min-width:961px){
  .hero-copy h1{ font-size:clamp(27px,3.3vw,44px); }
  .hero-rule{ margin:clamp(14px,2vh,22px) 0 clamp(12px,1.6vh,18px); }
  .hero-desc{ font-size:14px; line-height:1.75; }
  .hero-scroll .line{ height:32px; }
  .hero-rail .sd{ padding-top:clamp(9px,1.3vh,16px); padding-bottom:clamp(9px,1.3vh,16px); }
  .hero-rail .sd .d{ display:none; }
  .hero-rail .sd.is-out .d, .hero-rail .sd:hover .d{ display:block; }
}
@media (max-height:560px) and (min-width:961px){
  .hero-desc{ display:none; }
  .hero-copy h1{ font-size:clamp(24px,2.8vw,34px); }
}

@media (max-width:960px){
  .hero{ grid-template-columns:1fr; height:auto; min-height:100svh; }
  .hero-stage{ order:1; min-height:74svh; padding:96px var(--pad) clamp(24px,6vw,38px); }
  .hero-copy{ max-width:none; align-self:end; }
  .hero-scroll{ position:absolute; right:var(--pad); bottom:14px; margin:0;
    flex-direction:row; gap:10px; }
  .hero-scroll .line{ width:28px; height:1px; }
  .hero-scroll .line::after{ transform:translateX(-100%);
    animation:sweepX 2.8s var(--e-io) infinite; }
  @keyframes sweepX{ 0%{ transform:translateX(-100%) } 55%,100%{ transform:translateX(100%) } }
  .hero-menu, .rail-brand{ display:none; }
  .head{ opacity:1 !important; pointer-events:auto !important; }
  .hero-rail{ order:2; }
  .hero-rail ul{ flex:none; }
  .hero-rail .sd{ padding:15px var(--pad); }
  .hero-rail li + li::before{ left:var(--pad); right:var(--pad); }
  .hero-rail .sd::after{ display:none; }
  .hero-rail .sd.is-out{ background:var(--brand); color:#fff; }
  .rail-sns{ padding:18px var(--pad) 26px; }
  .rail-label{ margin:18px var(--pad) 4px; }
}

/* ============================================================
   02 ABOUT — 비대칭 그리드
   ============================================================ */
/* 위 여백을 아래보다 크게 — 첫 화면이 어둡고 꽉 찬 화면이라
   흰 배경으로 넘어올 때 숨 돌릴 자리가 필요합니다. 붙어 보이면 첫 숫자를 키우세요. */
/* 소개 — 한 화면을 채우고, 내용 폭은 다른 페이지와 똑같이 --maxw(1560px)입니다.
   세부사업 · 학교 연계도 같은 폭을 쓰므로 좌우 여백이 일정하게 맞습니다. */
.about{ min-height:100svh; display:grid; align-content:center;
  padding:clamp(96px,11vh,150px) var(--pad) clamp(72px,9vh,120px); }
.about-in{ max-width:var(--maxw); margin:0 auto; display:grid; gap:clamp(32px,4vw,72px);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; }
.about-copy{ display:flex; flex-direction:column; gap:clamp(16px,1.7vw,24px); }
.about-copy .lead{ max-width:48ch; }
.about-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.about-tags li{ list-style:none; font-size:13px; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; }
/* 사진 세 장의 비율을 4:3으로 맞춥니다.
   왼쪽 큰 사진은 두 줄 높이(작은 사진 2장 + 사이 여백)를 차지하므로,
   그 높이가 폭의 3/4이 되도록 칸 너비를 역산했습니다.
   비율을 바꾸려면 --ar 셋과 아래 계산식의 숫자를 함께 고쳐야 합니다. */
.about-grid{ display:grid; --gp:clamp(9px,1vw,15px); gap:var(--gp);
  --col:calc((100% - 2.334 * var(--gp)) / 3);
  grid-template-columns:calc(2 * var(--col) + 1.334 * var(--gp)) var(--col);
  grid-template-areas:"a b" "a c"; }
.about-grid .g-a{ grid-area:a; --ar:auto; height:100%; }
.about-grid .g-b{ grid-area:b; --ar:4/3; }
.about-grid .g-c{ grid-area:c; --ar:4/3; }
@media (max-width:900px){
  .about-in{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr 1fr; grid-template-areas:"a a" "b c"; }
  .about-grid .g-a{ --ar:4/3; height:auto; min-height:0; }
  .about-grid .g-b{ --ar:4/3; } .about-grid .g-c{ --ar:4/3; }
}

/* ============================================================
   사업 개요 + 현장 사진 (한 화면에 나란히)
   ============================================================ */
.biz-body{
  max-width:var(--maxw); margin:0 auto; padding:clamp(24px,3.5vh,56px) 0;
}
/* 세부사업도 한 화면을 채우고, 여기서 한 번 멈춥니다.
   이게 없으면 사진에서 다음 사업으로 곧장 넘어가 세부 내용을 볼 수 없습니다. */
/* 세부사업 영역 — 창 높이를 채우고 내용을 세로 가운데에 놓습니다.
   격자(display:grid)로 만들면 안쪽 표시가 사라지므로 세로 flex를 씁니다.
   이때 안쪽 .biz-body에 width:100%를 주지 않으면 폭이 '내용만큼'으로 줄어듭니다. */
.biz-body-wrap{ padding:clamp(48px,8vh,120px) var(--pad); background:var(--paper);
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  scroll-snap-align:start; scroll-snap-stop:normal; }
.biz-body-wrap > .biz-body{ width:100%; }
.biz-body-wrap.mist{ background:var(--mist); }
.biz-body-wrap.tint{ background:var(--tint); }
.biz-body-wrap.tint-2{ background:var(--tint-2); }
.spec{ margin-bottom:clamp(30px,3.6vw,52px); }
.spec-in{ display:flex; flex-direction:column; gap:clamp(16px,1.8vw,24px); }
.spec-head{ display:flex; flex-direction:column; gap:10px; }
.spec-head h3{ margin:0; font-size:clamp(19px,1.8vw,26px); font-weight:700; letter-spacing:-.035em; }
.spec-head .draft{
  align-self:flex-start; font-size:11.5px; font-weight:600; color:#B4741B;
  background:#FCF3E2; border:1px solid #EFD9AE; border-radius:999px; padding:6px 12px;
}
.spec-note{ font-size:13.5px; line-height:1.75; color:var(--ink-2); }
/* 세부 사업 카드 */
.sub-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(226px,1fr));
  gap:clamp(8px,1vw,14px); }
.sub-card{ background:var(--paper); border:1px solid var(--line); border-radius:13px;
  padding:clamp(16px,1.7vw,22px); display:flex; flex-direction:column; }
.sub-card h4{ margin:0; font-size:clamp(15px,1.25vw,17px); font-weight:700; letter-spacing:-.03em; }
.sub-card > p{ margin:7px 0 0; font-size:13px; line-height:1.65; color:var(--ink-2); }
.sub-meta{ margin-top:auto; padding-top:14px; display:grid; gap:6px; font-size:12.5px; }
.sub-meta div{ display:flex; gap:10px; align-items:baseline; }
.sub-meta b{ flex:0 0 30px; color:var(--ink-3); font-weight:600; }
.sub-meta span{ color:var(--ink); letter-spacing:-.02em; }

/* 공통 안내 */
.spec-common{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,32px); border-top:1px solid var(--line); padding-top:clamp(16px,1.8vw,22px); }
.spec-common b{ display:block; font-size:12px; font-weight:700; color:var(--ink-3); margin-bottom:6px; }
.spec-common span{ font-size:clamp(13.5px,1.05vw,15.5px); font-weight:500; letter-spacing:-.025em; line-height:1.55; }
@media (max-width:640px){ .spec-common{ grid-template-columns:1fr; gap:14px; } }

@media (max-width:900px){
  .biz-body{ padding:clamp(44px,9vw,68px) 0; }
}

/* 신청 절차 */
/* 신청 절차 — 순서가 있는 내용이라 카드 대신 이어지는 흐름으로 보여 줍니다.
   위의 네 가지 역할과 리듬이 겹치지 않게 하려는 목적입니다. */
.steps{ --step-gap:clamp(16px,2.4vw,34px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--step-gap);
  margin-top:clamp(24px,3vw,40px); }
.step{ position:relative; padding:40px 0 0; background:none; border:0; border-radius:0; }
.step .n{ position:absolute; top:0; left:0; display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--brand); color:#fff; font-size:12.5px; font-weight:700; }
/* 번호와 번호를 잇는 선 */
.step::after{ content:""; position:absolute; top:13px; left:38px;
  width:calc(100% - 38px + var(--step-gap)); height:1px; background:var(--line); }
.step:last-child::after{ display:none; }
.step h4{ margin:0 0 7px; font-size:clamp(15px,1.3vw,18px); font-weight:700; letter-spacing:-.03em; }
.step p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--ink-2); }
@media (max-width:900px){
  .steps{ grid-template-columns:1fr 1fr; }
  .step:nth-child(2n)::after{ display:none; }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .step::after{ display:none; }
}

/* 연간 일정 */
.sched-wrap{ margin-top:clamp(34px,4.4vw,64px); overflow-x:auto; }
.sched{ min-width:660px; }
.sched-row{ display:grid; grid-template-columns:clamp(96px,10vw,140px) repeat(12,1fr);
  align-items:center; border-top:1px solid var(--line); }
.sched-row:last-child{ border-bottom:1px solid var(--line); }
/* 월 표시 줄. 상단 고정 헤더의 .head와 이름이 겹치면 안 되므로 .sched-head를 씁니다 */
.sched-head{ border:0 !important; background:var(--mist); border-radius:8px 8px 0 0; }
.sched-head span{ font-size:12.5px; font-weight:600; color:var(--ink-2);
  text-align:center; padding:9px 0; letter-spacing:-.03em; }
.sched-head span + span{ box-shadow:inset 1px 0 0 var(--line); }
/* 분기가 바뀌는 1 · 4 · 7 · 10월은 조금 더 진한 세로선 */
.sched-head span.q{ box-shadow:inset 1px 0 0 color-mix(in srgb,var(--ink) 26%,transparent); }
.sched-cell.q{ border-left-color:color-mix(in srgb,var(--ink) 26%,transparent); }
/* --lanes : 기간이 겹치는 막대를 몇 줄로 쌓을지. js/site.js가 계산해 넣습니다. */
.sched-row{ grid-auto-rows:26px; row-gap:4px; padding:12px 0; }
.sched-row b{ grid-row:1 / -1; align-self:center;
  font-size:13.5px; font-weight:600; letter-spacing:-.03em; padding:0 12px 0 0; }
.sched-bar{ height:26px; border-radius:6px; background:var(--brand);
  color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center;
  justify-content:center; white-space:nowrap; padding:0 8px; margin:0 2px; overflow:hidden; }
.sched-bar.alt{ background:var(--accent); color:#20340F; }
.sched-cell{ grid-row:1 / -1; border-left:1px solid var(--line); }

/* ============================================================
   사업 안의 현장 사진 블록
   ============================================================ */
.biz-gal{ padding:0; background:none; }
.gal-head{ max-width:none; margin:0 0 clamp(14px,1.8vw,24px);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.gal-head .num{ font-size:12px; letter-spacing:.15em; color:var(--brand); }
.gal-head b::after{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--accent); margin-left:9px; vertical-align:middle; }
.gal-head b{ font-size:clamp(15px,1.35vw,20px); font-weight:600; letter-spacing:-.03em; }
.gal-head .cnt{ font-size:12.5px; color:var(--ink-3); margin-left:auto; }


.gal-filter{ max-width:none; margin:0 0 clamp(14px,1.6vw,22px);
  display:flex; gap:8px; flex-wrap:wrap; }
.gal-filter button{
  padding:9px 17px; border-radius:999px; border:1px solid var(--line);
  font-size:13.5px; font-weight:600; letter-spacing:-.02em; color:var(--ink-2); background:var(--paper);
  transition:background .3s var(--e), color .3s var(--e), border-color .3s var(--e);
}
.gal-filter button:hover{ color:var(--brand); border-color:var(--brand); }
.gal-filter button.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.gal-filter button.now:not(.on){
  border-color:var(--brand); color:var(--brand); background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--brand);
}

.gal{ max-width:none; margin:0; display:grid;
  grid-template-columns:repeat(6,1fr); grid-auto-flow:dense; gap:clamp(7px,.9vw,14px); }
.gal-t{
  position:relative; overflow:hidden; grid-column:span var(--sp,2); aspect-ratio:var(--ar,4/3);
  opacity:0; transform:translateY(34px);
  transition:opacity .85s var(--e), transform .95s var(--e);
}
.gal-t.in{ opacity:1; transform:none; }
/* 스크롤에 따라 사진이 프레임 안에서 천천히 위로 흐른다 */
.gal-t .ph{ position:absolute; inset:0; aspect-ratio:auto;
  transition:transform .75s var(--e), filter .75s var(--e), opacity .75s var(--e); }
.gal-t .ph img{ --zoom:1.10; will-change:transform; }
.gal-t img{ transition:transform 1.1s var(--e); }
.gal-t:hover img{ --zoom:1.17; }
.gal-t::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(10,28,44,.45), rgba(10,28,44,0) 55%);
  opacity:0; transition:opacity .45s var(--e); }
.gal-t:hover::after{ opacity:1; }
.gal-cap{
  position:absolute; z-index:3; top:12px; left:12px; font-size:11.5px; font-weight:600;
  letter-spacing:-.01em; color:#fff; padding:6px 12px; border-radius:999px;
  background:rgba(10,28,44,.55); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.gal-t .zoom{ position:absolute; z-index:3; left:14px; bottom:12px; font-size:12px; font-weight:600;
  color:#fff; opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--e), transform .45s var(--e); }
.gal-t:hover .zoom{ opacity:.92; transform:none; }
@media (max-width:900px){
  .gal{ grid-template-columns:repeat(4,1fr); }
  .gal-t{ grid-column:span var(--sp-m,2); }
}

/* 가로로 넘겨보는 갤러리 (국제교류) */
.gal.is-rail{
  display:flex; grid-template-columns:none; max-width:none;
  gap:clamp(10px,1.4vw,22px); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab;
  margin:0 calc(var(--pad) * -1) 0 0; padding:4px var(--pad) 22px 0;
}
.gal.is-rail::-webkit-scrollbar{ display:none; }
.gal.is-rail.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.gal.is-rail .gal-t{
  flex:0 0 clamp(280px,38vw,560px); grid-column:auto; scroll-snap-align:center; aspect-ratio:4/3;
}
@media (max-width:900px){ .gal.is-rail .gal-t{ flex:0 0 min(86vw,520px); } }
.gal.is-rail .gal-t .ph{
  transition:transform .75s var(--e), filter .75s var(--e), opacity .75s var(--e);
}
.gal.is-rail .gal-t[data-focus="0"] .ph{
  transform:scale(.92); filter:grayscale(.45) brightness(.82); opacity:.62;
}
.gal-swipe{
  max-width:none; margin:8px 0 0; font-size:12.5px; letter-spacing:.01em;
  color:var(--ink-3);
}


/* ============================================================
   04 사업 상세 — 사업마다 다른 레이아웃
   ============================================================ */
.sec-mark{ display:flex; align-items:center; gap:12px; }
.sec-mark .num{ font-size:12px; letter-spacing:.16em; color:var(--brand); }
.sec-mark .bar{ width:26px; height:2px; background:var(--accent); opacity:.9; border-radius:2px; }
.on-photo .sec-mark .num{ color:#fff; opacity:.85; }
.on-photo .sec-mark .bar{ background:#fff; }

.pts{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px; }
.pts li{ font-size:clamp(13px,1.05vw,15px); color:var(--ink-2); padding:7px 15px;
  border:1px solid var(--line); border-radius:999px; }
.on-photo .pts li{ color:rgba(255,255,255,.92); border-color:rgba(255,255,255,.32); }

/* --- 01 장학: 풀스크린 + 슬로우 줌 --- */
.sc-schol{ position:relative; height:100svh; min-height:540px; }
.sc-schol .ph{ position:absolute; inset:0; aspect-ratio:auto; }
.sc-schol .stack{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px); }

/* --- 02 진로: 좌우 스플릿 --- */
.sc-career{ padding:clamp(64px,7.4vw,112px) var(--pad); background:var(--mist); }
.sc-career-in{ max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:1.08fr .92fr; gap:clamp(28px,4vw,74px); align-items:center; }
.sc-career .col-txt{ display:flex; flex-direction:column; gap:clamp(16px,2vw,24px); }
.sc-career .p-main{ --ar:4/3; }
@media (max-width:900px){ .sc-career-in{ grid-template-columns:1fr; } }

/* --- 03 진학: 흐림에서 선명으로 (포커스 전환) --- */
.sc-adm{ position:relative; height:100svh; min-height:560px; }
.sc-adm .ph{ position:absolute; inset:0; aspect-ratio:auto; }
/* 처음에 흐렸다가 선명해지는 연출이 있었지만, 흐림을 풀어 주는 코드가 없어
   계속 흐린 채로 남았습니다. 연출을 걷어내고 처음부터 선명하게 보여 줍니다. */
.sc-adm .stack{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px); }

/* --- 04 국제교류: 풀블리드 + 패럴랙스 --- */
.sc-global{ position:relative; height:100svh; min-height:600px; overflow:hidden; }
.sc-global .ph{ position:absolute; inset:-14% 0; aspect-ratio:auto; height:auto; }
.sc-global .stack{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,22px); }

/* --- 06 포천학사: 좌우 스플릿 --- */
/* 시설 안내라 성격이 달라 다른 사업보다 차분한 배치를 씁니다 */
/* --- 04 학습코칭: 좌우 스플릿 (포천학사와 같은 배치, 배경만 다르게) --- */
.sc-learn{ padding:clamp(64px,7.4vw,112px) var(--pad); background:var(--mist); }
.sc-learn-in{ max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:1.08fr .92fr; gap:clamp(28px,4vw,74px); align-items:center; }
.sc-learn .col-txt{ display:flex; flex-direction:column; gap:clamp(16px,2vw,24px); }
.sc-learn .p-main{ --ar:4/3; }
@media (max-width:900px){ .sc-learn-in{ grid-template-columns:1fr; } }

.sc-dorm{ padding:clamp(64px,7.4vw,112px) var(--pad); background:var(--tint); }
.sc-dorm-in{ max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:1.08fr .92fr; gap:clamp(28px,4vw,74px); align-items:center; }
.sc-dorm .col-txt{ display:flex; flex-direction:column; gap:clamp(16px,2vw,24px); }
.sc-dorm .p-main{ --ar:4/3; }
@media (max-width:900px){ .sc-dorm-in{ grid-template-columns:1fr; } }

/* --- 05 창업: 겹쳐지는 두 장 --- */
.sc-start{ padding:clamp(64px,7.4vw,112px) var(--pad); background:var(--paper); }
.sc-start-in{ max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,74px); align-items:center; }
.sc-start .col-txt{ display:flex; flex-direction:column; gap:clamp(16px,2vw,24px); }
.sc-start .p-main{ --ar:4/3; }
.sc-start .p-sub{ --ar:4/3; width:44%; margin:-15% auto 0 0; position:relative; z-index:2;
  box-shadow:0 30px 62px -30px rgba(7,26,56,.55); }
@media (max-width:900px){
  .sc-start-in{ grid-template-columns:1fr; }
  .sc-start .p-sub{ width:56%; margin-top:-18%; }
}

/* ============================================================
   세부 사업 선택형 안내 — 목록 · 사진 · 신청 정보 통합
   ============================================================ */
.program-block{
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
}
.program-grid{ display:block; }
/* 세부사업 선택 줄 — 화면 폭에 관계없이 가로 탭입니다.
   예전에는 넓은 화면에서만 왼쪽 세로 목록이었는데, 항목이 3~4개뿐이라
   목록 아래가 크게 비고 가운데 사진도 좁아져서 가로로 통일했습니다. */
.program-nav{
  position:relative; z-index:2;
  padding:clamp(26px,3vw,42px) clamp(28px,3.8vw,58px) 0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
}
.program-nav-head{ margin:0 0 clamp(12px,1.4vw,18px);
  display:flex; align-items:baseline; gap:clamp(10px,1.2vw,16px); flex-wrap:wrap; }
.program-nav-head b{ font-size:clamp(16px,1.35vw,19px); font-weight:700; letter-spacing:-.035em; }
.program-nav-head span{ font-size:12.5px; line-height:1.6; color:color-mix(in srgb,var(--ink) 62%,transparent); }
.program-tabs{ display:flex; flex-direction:row; gap:8px;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  padding:2px 1px clamp(14px,1.6vw,20px); }
.program-tabs::-webkit-scrollbar{ display:none; }
.program-tab{
  position:relative; flex:0 0 auto; width:auto; min-width:max-content;
  padding:11px 18px; text-align:left; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  color:color-mix(in srgb,var(--ink) 68%,transparent);
  transition:background .28s var(--e),color .28s var(--e),border-color .28s var(--e);
}
.program-tab::before{ display:none; }
.program-tab:hover{ color:var(--ink); background:color-mix(in srgb,var(--brand) 9%,var(--paper)); }
.program-tab.is-shown{ background:var(--brand); color:var(--paper); border-color:var(--brand); }
.program-tab.is-fixed{ font-weight:700; }
.program-tab .program-no{ display:inline; margin-right:8px; font-size:11px; font-weight:700;
  letter-spacing:.08em; color:var(--brand); }
.program-tab.is-shown .program-no{ color:color-mix(in srgb,var(--paper) 82%,transparent); }
.program-tab .program-name{ display:inline; font-size:clamp(14px,1.1vw,16.5px); letter-spacing:-.03em; }
.program-tab.is-shown .program-name{ color:inherit; }

.program-deck{ position:relative; min-width:0; overflow:hidden; transition:height .42s var(--e); }
.program-pane{
  position:absolute; inset:0 auto auto 0; width:100%;
  padding:clamp(28px,3.4vw,52px) clamp(28px,3.8vw,58px);
  /* 사진 쪽을 넓게 — 가로 탭으로 바뀌며 확보된 폭을 사진에 씁니다 */
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr); gap:clamp(28px,3.4vw,54px); align-items:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .58s var(--e), visibility .58s;
}
.program-pane.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
.program-media{ min-width:0; }
.program-carousel{ position:relative; min-width:0; }
.program-photo-rail{
  display:flex; width:100%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; border-radius:18px; background:var(--mist); cursor:grab;
  box-shadow:0 22px 60px -44px color-mix(in srgb,var(--ink) 58%,transparent);
}
.program-photo-rail::-webkit-scrollbar{ display:none; }
.program-photo-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.program-slide{
  position:relative; flex:0 0 100%; width:100%; padding:0; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always;
  background:var(--mist); text-align:left;
}
.program-slide .ph{ --ar:16/10; }
.program-slide .ph img{ transition:transform .72s var(--e); }
.program-slide:hover .ph img{ --zoom:1.025; }
.program-main-label{
  position:absolute; left:16px; bottom:14px; z-index:3; padding:7px 12px; border-radius:999px;
  background:color-mix(in srgb,var(--paper) 88%,transparent); color:var(--ink);
  font-size:12px; font-weight:600;
}
.program-car-btn{
  position:absolute; z-index:5; top:50%; width:42px; height:42px; margin-top:-21px; border-radius:50%;
  display:grid; place-items:center; background:color-mix(in srgb,var(--paper) 90%,transparent);
  color:var(--ink); border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  box-shadow:0 10px 28px -18px color-mix(in srgb,var(--ink) 60%,transparent);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  opacity:.9; transition:opacity .22s var(--e), transform .22s var(--e), background .22s var(--e);
}
.program-car-btn:hover{ opacity:1; transform:scale(1.04); background:var(--paper); }
.program-car-btn.prev{ left:14px; }
.program-car-btn.next{ right:14px; }
.program-car-btn[disabled]{ opacity:.28; pointer-events:none; }
.program-car-btn svg{ width:17px; height:17px; }
.program-car-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; min-height:24px;
}
.program-car-dots{ display:flex; align-items:center; gap:7px; }
.program-car-dot{
  width:7px; height:7px; padding:0; border-radius:999px; background:color-mix(in srgb,var(--ink) 18%,transparent);
  transition:width .28s var(--e), background .28s var(--e);
}
.program-car-dot.is-active{ width:22px; background:var(--brand); }
.program-car-count{ font-size:12px; color:color-mix(in srgb,var(--ink) 52%,transparent); font-variant-numeric:tabular-nums; }
.program-car-hint{ font-size:12px; color:color-mix(in srgb,var(--ink) 48%,transparent); }

.program-info{ align-self:center; }
.program-info .eyebrow{ color:var(--brand); }
/* 제목이 길면 괄호 부분이 통째로 아랫줄로 내려가도록 줄을 고르게 나눕니다 */
.program-info h3{ margin:8px 0 0; font-size:clamp(27px,3vw,43px); line-height:1.18; letter-spacing:-.045em;
  text-wrap:balance; }
.program-desc{ margin:clamp(14px,1.5vw,20px) 0 0; max-width:42ch; font-size:clamp(14px,1.08vw,16px); line-height:1.8; color:color-mix(in srgb,var(--ink) 72%,transparent); }
.program-meta{
  margin:clamp(24px,2.5vw,34px) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
}
.program-meta div{ padding:13px 12px 13px 0; border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent); }
.program-meta div:nth-child(2n){ padding-left:14px; border-left:1px solid color-mix(in srgb,var(--ink) 12%,transparent); }
.program-meta dt{ margin:0; font-size:11.5px; font-weight:700; color:color-mix(in srgb,var(--ink) 52%,transparent); }
.program-meta dd{ margin:4px 0 0; font-size:13.5px; font-weight:600; line-height:1.55; letter-spacing:-.025em; }
.program-note{
  margin:16px 0 0; padding:13px 15px; border-radius:10px; background:color-mix(in srgb,var(--brand) 8%,var(--paper));
  font-size:13px; line-height:1.65; color:color-mix(in srgb,var(--ink) 76%,transparent);
}
.program-note b{ color:var(--brand); margin-right:7px; }
.program-mobile-hint{ display:none; margin:10px 0 0; font-size:11.5px; color:color-mix(in srgb,var(--ink) 50%,transparent); }

@media (max-width:1120px){
  .program-pane{ grid-template-columns:minmax(0,1fr) minmax(250px,.78fr); gap:28px; }
  .program-meta{ grid-template-columns:1fr; }
  .program-meta div:nth-child(2n){ padding-left:0; border-left:0; }
}
@media (max-width:820px){
  .program-nav{ padding:24px var(--pad) 0; }
  .program-nav-head{ margin-bottom:13px; }
  .program-nav-head span{ display:none; }
  .program-tabs{ gap:7px; padding:2px 1px 10px; }
  .program-tab{ padding:10px 15px; }
  .program-tab .program-no{ display:none; }
  .program-mobile-hint{ display:block; }
  .program-pane{ padding:clamp(26px,7vw,46px) var(--pad); grid-template-columns:1fr; align-items:start; }
  .program-media{ order:1; }
  .program-info{ order:2; }
}
@media (max-width:520px){
  .program-pane{ gap:24px; }
  .program-photo-rail{ border-radius:13px; }
  .program-car-btn{ width:38px; height:38px; margin-top:-19px; }
  .program-car-btn.prev{ left:10px; }
  .program-car-btn.next{ right:10px; }
  .program-car-hint{ display:none; }
  .program-meta{ margin-top:20px; }
}
@media (prefers-reduced-motion:reduce){
  .program-deck,.program-pane,.program-tab,.program-tab::before,.program-photo-rail,.program-car-dot,.program-car-btn{ transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   05 학교와의 연결
   ============================================================ */
/* 학교 연계도 다른 페이지와 같은 한 화면 높이 */
.benefit{ padding:clamp(64px,9vh,130px) var(--pad); min-height:100svh;
  display:grid; align-content:center; }
.benefit-in{ max-width:var(--maxw); margin:0 auto; }
.benefit-top{ display:grid; grid-template-columns:1fr minmax(0,40ch); gap:clamp(22px,3vw,54px);
  align-items:end; }
.benefit-aside{ display:flex; flex-direction:column; gap:clamp(18px,2vw,26px); }
/* 블록의 작은 제목. 위에 가로선을 두어 '여기서부터 새 덩어리'임을 알리고,
   아래 내용과는 바짝 붙여서 어느 블록의 제목인지 분명해지게 합니다.
   블록 사이 간격은 아래 margin-top 하나로 통일되어 있습니다. */
.sub-label{ margin:clamp(52px,6vw,84px) 0 0; padding-top:clamp(14px,1.5vw,19px);
  border-top:1px solid var(--line);
  font-weight:700; font-size:clamp(12.5px,1.05vw,14px);
  letter-spacing:.03em; color:var(--ink-2); }
/* 라벨 바로 다음 내용은 항상 같은 간격으로 붙습니다 */
.sub-label + *{ margin-top:clamp(20px,2.2vw,30px) !important; }

/* 학교 연계의 네 가지 역할 — 표처럼 칸을 가르지 않고 짧은 선으로만 구분합니다 */
.bene-grid{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(26px,3.4vw,64px); margin-top:clamp(30px,3.6vw,56px); }
.bene-cell{ padding:0; border:0; }
.bene-cell .num{ display:block; font-size:11.5px; letter-spacing:.16em; color:var(--brand); }
.bene-cell h3{ margin:12px 0 8px; font-size:clamp(17px,1.5vw,21px); font-weight:600; letter-spacing:-.025em; }
.bene-cell p{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.7; }

.stats{ display:flex; flex-wrap:wrap; gap:clamp(20px,2.6vw,40px); margin-top:0; }
.stat .num{ font-size:clamp(44px,5.4vw,84px); line-height:1; letter-spacing:-.045em; color:var(--brand); }
.stat p{ margin:10px 0 0; font-size:13.5px; color:var(--ink-2); }
/* 숫자가 하나뿐이면 큰 글씨가 허전해 보이므로 한 줄로 눕힙니다.
   js/config.js의 STATS에 값을 두 개 이상 채우면 자동으로 원래의 큰 숫자로 돌아갑니다. */
.stats.is-single .stat{ display:flex; align-items:baseline; gap:12px; }
.stats.is-single .stat .num{ font-size:clamp(30px,3.2vw,46px); }
.stats.is-single .stat p{ margin:0; }

@media (max-width:900px){
  .benefit-top{ grid-template-columns:1fr; }
  .bene-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){ .bene-grid{ grid-template-columns:1fr; } }

/* ============================================================
   06 CONTACT
   ============================================================ */
.contact{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, var(--tint) 0%, var(--paper) 60%); color:var(--ink); overflow:hidden; }
.contact .ph{ position:absolute; inset:0; aspect-ratio:auto; opacity:.16; }
.contact .ph::after{ content:""; position:absolute; inset:0; background:var(--paper); opacity:.35; }
.contact-in{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:clamp(96px,13vw,180px) var(--pad) clamp(30px,4vw,52px); }
/* 마지막 문장은 첫 화면 제목과 짝을 이룹니다 — 얇은 본문에 강조 단어만 굵게 */
.contact .display{ text-wrap:balance; font-weight:300; color:var(--ink-2); }
.contact .display b{ font-weight:700; color:var(--ink); letter-spacing:-.05em; }
.contact-grid{ margin-top:clamp(46px,6vw,90px); display:grid; gap:clamp(24px,3vw,48px);
  grid-template-columns:1.2fr 1fr auto; align-items:end; border-top:1px solid var(--line); padding-top:clamp(24px,3vw,40px); }
.contact-org b{ display:block; font-size:clamp(17px,1.5vw,21px); font-weight:600; letter-spacing:-.025em; }
.contact-org span{ color:var(--ink-3); font-size:14px; }
.info{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14.5px; }
.info li{ display:flex; gap:14px; align-items:baseline; }
.info .k{ font-size:11.5px; letter-spacing:.02em; color:var(--ink-3); flex:0 0 62px; }
.info .v{ color:var(--ink); }
.info .v[data-blank="1"]{ color:var(--ink-3); border-bottom:1px dashed var(--line); }
.qr{ width:clamp(88px,9vw,116px); aspect-ratio:1; display:grid; place-items:center; text-align:center;
  border:1px solid var(--line); font-size:11px; letter-spacing:.02em;
  color:var(--ink-3); padding:8px; background:var(--paper); }
.qr img{ width:100%; height:100%; object-fit:contain; }
.foot{ margin-top:clamp(40px,5vw,72px); display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-3); }
.foot-admin{
  font-size:11.5px; letter-spacing:.02em; color:var(--ink-3);
  border:1px solid var(--line); border-radius:5px; padding:6px 12px;
  transition:color .3s var(--e), border-color .3s var(--e);
}
.foot-admin:hover{ color:var(--brand); border-color:var(--brand); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; align-items:start; } }

/* ============================================================
   REVEAL MOTION
   ============================================================ */
/* --rv-d : 요소마다 순차 등장을 위한 지연값 (js/site.js에서 지정)
   --rv-dur / --rv-dist : 등장 속도와 올라오는 거리. 이 두 값만 바꾸면 전체 감도가 조절됩니다. */
:root{
  --rv-dur:  .9s;    /* 등장 시간 — 길게 하면 더 부드럽고 느긋해집니다 */
  --rv-dist: 30px;   /* 아래에서 올라오는 거리 */
}

.rv,.rv-x,.rv-xr,.rv-ph,.rv-fade,.rv-zoom{ transition-delay:var(--rv-d,0ms); }

.rv{ opacity:0; transform:translateY(var(--rv-dist));
  transition:opacity var(--rv-dur) var(--e), transform var(--rv-dur) var(--e); }
.rv.in{ opacity:1; transform:none; }
.rv-x{ opacity:0; transform:translateX(-42px); transition:opacity var(--rv-dur) var(--e), transform 1s var(--e); }
.rv-x.in{ opacity:1; transform:none; }
.rv-xr{ opacity:0; transform:translateX(42px); transition:opacity var(--rv-dur) var(--e), transform 1s var(--e); }
.rv-xr.in{ opacity:1; transform:none; }
/* 사진이 아래에서 위로 열립니다.
   clip-path를 figure 자신에게 걸면 브라우저가 '화면에 보이지 않는다'고 판단해
   등장 감지가 영영 일어나지 않습니다. 그래서 안쪽 요소에만 겁니다. */
.rv-ph{ opacity:0; transition:opacity .9s var(--e); }
.rv-ph.in{ opacity:1; }
.rv-ph > img, .rv-ph > .ph-empty{ clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--e-io); transition-delay:var(--rv-d,0ms); }
.rv-ph.in > img, .rv-ph.in > .ph-empty{ clip-path:inset(0 0 0 0); }

/* 순수 페이드 — 위치가 고정된 배경 사진, 표 한 줄처럼 움직이면 어색한 요소용 */
.rv-fade{ opacity:0; transition:opacity 1.05s var(--e); }
.rv-fade.in{ opacity:1; }

/* 페이드 + 아주 약한 줌 아웃 — 큰 대표 사진용 */
.rv-zoom{ opacity:0; transform:scale(1.05);
  transition:opacity 1.2s var(--e), transform 1.6s var(--e-io); }
.rv-zoom.in{ opacity:1; transform:none; }

/* 제목 등장 — 강조한 굵은 단어는 처음부터 그 자리에 있고,
   나머지 글자가 그 주위로 서서히 나타나 문장이 완성됩니다.
   js/site.js의 splitLines()가 제목을 .ln / .ln-i / .soft 구조로 바꿔 놓습니다. */
.rv-line .ln{ display:block; }
.rv-line .ln-i{ display:block; }
.rv-line .soft{ opacity:0; transition:opacity 1.2s var(--e);
  transition-delay:calc(var(--rv-d, 0ms) + var(--ln-d, 0ms)); }
.rv-line.in .soft{ opacity:1; }


/* 연간 일정 막대 — 기간을 나타내는 그래픽이라 왼쪽에서 오른쪽으로 채워집니다 */
.rv-sched .sched-bar{ clip-path:inset(0 100% 0 0);
  transition:clip-path .8s var(--e-io); transition-delay:var(--rv-d,0ms); }
.rv-sched.in .sched-bar{ clip-path:inset(0 0 0 0); }

/* 숫자 카운트업 중 자릿수가 늘며 옆이 밀리지 않도록 */
.stat .num{ display:inline-block; font-variant-numeric:tabular-nums; }

/* 첫 화면 사진이 로드 직후 천천히 자리를 잡습니다.
   --intro 값은 js/site.js가 1.08에서 1까지 줄여 줍니다. */
#hero .ph img{
  transform:translate3d(0,var(--shift,0px),0)
            scale(calc(var(--scale,1) * var(--zoom,1) * var(--intro,1)));
}

/* 문의 섹션 사진은 원래 흐리게 깔리는 배경이라 최종 농도를 유지합니다 */
.contact .ph.rv-fade{ opacity:0; }
.contact .ph.rv-fade.in{ opacity:.16; }

/* 스크롤 드리프트용 여유 배율 */
.drift img{ --zoom:1.10; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; scroll-snap-type:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .rv,.rv-x,.rv-xr,.rv-fade,.rv-zoom{ opacity:1; transform:none; }
  .rv-ph{ opacity:1; }
  .rv-ph > img, .rv-ph > .ph-empty{ clip-path:none; }
  .rv-line .soft{ opacity:1; }
  .rv-sched .sched-bar{ clip-path:none; }
  .ph img{ transform:none !important; }
  .gal-t{ opacity:1; transform:none; }
  .hero-scroll .line::after{ animation:none; transform:none; opacity:.45; }
}

/* ============================================================
   사진 크게 보기 (라이트박스)
   ============================================================ */
.fsv{
  position:fixed; inset:0; z-index:120; background:var(--dark);
  opacity:0; visibility:hidden; transition:opacity .5s var(--e), visibility .5s;
}
.fsv.is-open{ opacity:1; visibility:visible; }
.fsv .ph{ position:absolute; inset:0; aspect-ratio:auto; background:var(--dark); }
.fsv .ph img{ object-fit:contain; transform:none !important; }
.fsv-veil{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,28,44,.72) 0%, rgba(10,28,44,.12) 30%, rgba(10,28,44,0) 50%),
    linear-gradient(to bottom, rgba(10,28,44,.6) 0%, rgba(10,28,44,.1) 16%, rgba(10,28,44,0) 28%); }
.fsv-copy{
  position:absolute; left:var(--pad); bottom:clamp(26px,4vh,46px); z-index:3; color:#fff;
  display:flex; align-items:baseline; gap:14px;
}
.fsv-copy b{ font-size:clamp(16px,1.6vw,22px); font-weight:600; letter-spacing:-.03em; }
.fsv-copy span{ font-family:var(--font-en); font-size:13px; color:rgba(255,255,255,.62); }
.fsv-close{
  position:absolute; top:clamp(16px,2.2vw,28px); right:clamp(16px,3vw,40px); z-index:6;
  display:flex; align-items:center; gap:9px; padding:11px 20px 11px 15px; border-radius:999px;
  background:rgba(10,28,44,.62); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-size:14px; font-weight:600; letter-spacing:-.02em;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--e), color .3s var(--e), border-color .3s var(--e);
}
.fsv-close svg{ width:15px; height:15px; }
.fsv-close:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.fsv-tip{ position:absolute; top:clamp(16px,2.2vw,28px); left:var(--pad); z-index:6;
  font-size:12.5px; color:#fff; opacity:.7; padding:11px 0; }
@media (max-width:720px){ .fsv-tip{ display:none; } }
.fsv-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:clamp(44px,4vw,56px); height:clamp(44px,4vw,56px); border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:rgba(10,28,44,.5); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--e), color .3s var(--e), border-color .3s var(--e);
}
.fsv-nav:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.fsv-nav svg{ width:20px; height:20px; }
.fsv-prev{ left:clamp(12px,2vw,30px); }
.fsv-next{ right:clamp(12px,2vw,30px); }
.fsv-dots{ position:absolute; right:var(--pad); bottom:clamp(28px,4vh,48px); z-index:3;
  display:flex; gap:7px; }
.fsv-dots i{ display:block; width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.32); transition:background .35s var(--e), transform .35s var(--e); }
.fsv-dots i.on{ background:var(--accent); transform:scale(1.3); }
@media (max-width:720px){
  .fsv-nav{ top:auto; bottom:clamp(20px,4vh,36px); transform:none; }
  .fsv-dots{ display:none; }
  .fsv-copy{ bottom:clamp(82px,14vh,110px); }
}

/* 세부사업의 '학교별 현황'처럼 항목이 많은 표 — 칩으로 흘려 보여 줍니다 */
.program-tally{ margin-top:clamp(14px,1.6vw,20px); }
/* 접기·펼치기 줄 — 눌러야 학교 목록이 나옵니다 */
.program-tally-t{ margin:0; font-size:11.5px; font-weight:700;
  letter-spacing:.03em; color:color-mix(in srgb,var(--ink) 55%,transparent); }
.program-tally-fold summary{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:7px 13px; border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);
  border-radius:999px; background:var(--paper); list-style:none;
  transition:color .3s var(--e), border-color .3s var(--e); }
.program-tally-fold summary::-webkit-details-marker{ display:none; }
.program-tally-fold summary:hover{ color:var(--brand); border-color:var(--brand); }
.program-tally-fold summary::after{ content:""; width:6px; height:6px; margin-left:1px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--e); }
.program-tally-fold[open] summary::after{ transform:translateY(1px) rotate(-135deg); }
.program-tally ul{ list-style:none; margin:11px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.program-tally li{ display:flex; align-items:center; gap:7px;
  padding:5px 10px; border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);
  border-radius:999px; font-size:12px; line-height:1.2; background:var(--paper); }
.program-tally .tn{ color:var(--ink-2); }
.program-tally li b{ font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums; }

/* ════════════════════════════════════════════════════════════
   학교 연계 — 한 화면에 다 담기
   제목 · 역할 4개 · 신청 절차 · 연간 일정이 모두 들어가도록
   덩어리 사이 간격과 표 높이를 화면 높이(vh)에 맞춰 조입니다.
   화면이 낮아지면 함께 줄어듭니다.
   ════════════════════════════════════════════════════════════ */
.benefit{ padding:clamp(40px,5.5vh,88px) var(--pad); }
.benefit .sub-label{ margin-top:clamp(20px,3.2vh,46px); padding-top:clamp(9px,1.2vh,16px);
  font-size:clamp(11.5px,1.3vh,13.5px); }
.benefit .sub-label + *{ margin-top:clamp(12px,1.8vh,24px) !important; }
.benefit .bene-grid{ margin-top:clamp(14px,2vh,28px); gap:clamp(18px,2.4vw,52px); }
.benefit .bene-cell h3{ margin:clamp(5px,.9vh,11px) 0 clamp(4px,.7vh,8px);
  font-size:clamp(15px,1.9vh,20px); }
.benefit .bene-cell p{ font-size:clamp(12px,1.4vh,14px); line-height:1.6; }
.benefit .stat .num{ font-size:clamp(30px,4.6vh,68px); }
.benefit .steps{ --step-gap:clamp(12px,1.8vw,28px); }
.benefit .sched-wrap{ margin-top:clamp(14px,2vh,32px); }
.benefit .sched-row{ grid-auto-rows:clamp(17px,2.2vh,26px); row-gap:3px;
  padding:clamp(5px,.9vh,12px) 0; }
.benefit .sched-bar{ height:clamp(17px,2.2vh,26px); font-size:clamp(9.5px,1.15vh,11px); }
.benefit .sched-row b{ font-size:clamp(11.5px,1.45vh,13.5px); }
.benefit .sched-head span{ font-size:clamp(10.5px,1.3vh,12.5px); }

/* ════════════════════════════════════════════════════════════
   오른쪽 페이지 이동 눈금
   판을 깔지 않고 눈금만 놓았습니다. 색을 반전 합성해서
   밝은 사진 위에서는 어둡게, 어두운 사진 위에서는 밝게 보입니다.
   ════════════════════════════════════════════════════════════ */
.pager{ position:fixed; z-index:60; right:clamp(16px,1.5vw,28px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end; gap:clamp(7px,1vh,13px);
  mix-blend-mode:difference; color:#fff; }
.pager-dot{ display:flex; align-items:center; gap:10px; padding:4px 0; background:none; border:0;
  cursor:pointer; color:inherit; }
.pager-mark{ display:block; width:16px; height:1.5px; background:currentColor; opacity:.45;
  transition:width .3s var(--e), opacity .3s var(--e); }
.pager-name{ font-size:11px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  opacity:0; transform:translateX(5px);
  transition:opacity .26s var(--e), transform .26s var(--e); }
.pager-name i{ font-style:normal; font-family:var(--font-en); font-size:9.5px; margin-right:5px; opacity:.65; }
.pager-dot:hover .pager-mark{ width:26px; opacity:.95; }
.pager-dot:hover .pager-name, .pager-dot:focus-visible .pager-name{ opacity:.95; transform:none; }
.pager-dot.on .pager-mark{ width:30px; height:2px; opacity:1; }
.pager-dot.on .pager-name{ opacity:1; transform:none; }
@supports not (mix-blend-mode:difference){ .pager{ mix-blend-mode:normal; color:var(--ink-2); } }
@media (max-width:1100px){ .pager{ display:none; } }
@media (prefers-reduced-motion:reduce){ .pager-mark, .pager-name{ transition:none; } }

/* ════════════════════════════════════════════════════════════
   세부사업 화면도 한 화면 안에
   사진이 커서 아래가 잘리므로 사진 높이를 화면 높이에 묶고
   위아래 여백을 줄였습니다.
   ════════════════════════════════════════════════════════════ */

.program-nav{ margin-bottom:clamp(10px,1.6vh,22px); }
.program-pane{ padding:clamp(16px,2.4vh,38px) clamp(24px,3.2vw,52px);
  gap:clamp(20px,2.6vw,44px); }
/* ── 세부사업 사진 크기 ──
   사진 상자는 16:10 비율입니다. 높이를 직접 제한하면 브라우저가 비율을 지키려고
   폭까지 줄여서 오른쪽에 빈 자리가 생깁니다.
   그래서 '폭'만 제한합니다. 높이는 폭의 62.5%로 저절로 따라옵니다.
   사진을 키우려면 아래 46(화면 높이 %)이나 520(최대 px)을 올리세요. */
.program-carousel{ width:100%; max-width:calc(min(46svh, 520px) * 1.6); margin-inline:auto; }
/* 비율은 바깥 칸(슬라이드) 하나에만 둡니다.
   안쪽 사진 자리에도 따로 비율을 주면 둘이 각자 계산해 크기가 어긋나고,
   그 차이만큼 오른쪽·아래에 빈 띠가 생깁니다. */
.program-slide{ aspect-ratio:16/10; }
.program-slide .ph{ --ar:auto; height:100%; }
.program-info h3{ font-size:clamp(24px,3.6vh,43px); }
.program-desc{ font-size:clamp(13px,1.7vh,16px); }
.program-meta dt{ font-size:clamp(10.5px,1.25vh,12px); }
.program-meta dd{ font-size:clamp(12.5px,1.6vh,15px); }

/* 사진 위 글 묶음도 같은 폭 기준 안에 놓이도록 — 화면 끝에 붙지 않게 합니다 */
.overlay{ padding-left:max(var(--pad), calc((100vw - var(--maxw)) / 2));
  padding-right:max(var(--pad), calc((100vw - var(--maxw)) / 2)); }

/* 학교 신청 절차 — 한 줄 흐름 (공문 안내 → 학교 신청 → 사전 협의 → 운영·공유) */
.steps-line{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:clamp(10px,1.4vw,20px); }
.step-line{ display:flex; align-items:center; gap:9px; }
.step-line .n{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--brand); color:#fff; font-size:11px; font-weight:700;
  font-family:var(--font-en); flex:none; }
.step-line b{ font-size:clamp(13px,1.6vh,15.5px); font-weight:600; letter-spacing:-.025em; }
.step-line + .step-line::before{ content:""; width:clamp(14px,2vw,34px); height:1px;
  background:color-mix(in srgb,var(--ink) 22%,transparent); margin-right:9px; order:-1; }
@media (max-width:640px){
  .step-line + .step-line::before{ display:none; }
  .steps-line{ gap:8px 14px; }
}

/* ════════════════════════════════════════════════════════════
   손가락으로 넘기는 화면 — 페이지 높이를 dvh로
   svh는 '주소창이 보일 때'의 높이라, 스크롤 중 주소창이 숨으면
   페이지가 화면보다 짧아져 멈춤 위치가 위로 밀립니다.
   dvh는 지금 실제로 보이는 높이라 항상 정확히 한 화면이 됩니다.
   ════════════════════════════════════════════════════════════ */
@media (pointer:coarse){
  .hero{ height:100dvh; }
  .sc-schol, .sc-adm, .sc-global{ height:100dvh; }
  .about, .biz-body-wrap, .benefit, .contact{ min-height:100dvh; }
  .hero-stage{ min-height:74dvh; }
}

/* ════════════════════════════════════════════════════════════
   '사업 목차' 버튼 위에 뜨는 작은 목록
   전체 화면을 덮지 않고 버튼 바로 위에만 나타납니다.
   ════════════════════════════════════════════════════════════ */
.quick-nav{
  position:fixed; z-index:71;
  right:clamp(16px,2.4vw,32px); bottom:calc(clamp(16px,2.4vw,32px) + 58px);
  width:min(280px, calc(100vw - 32px)); max-height:min(64vh, 560px); overflow-y:auto;
  padding:8px; border-radius:16px;
  background:rgba(7,26,56,.96); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.7);
  animation:quickIn .22s var(--e) both;
}
@supports (backdrop-filter:blur(2px)){ .quick-nav{ backdrop-filter:blur(10px); } }
@keyframes quickIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.quick-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:rgba(255,255,255,.82); font-size:13.5px; font-weight:600; letter-spacing:-.025em;
  transition:background .18s var(--e), color .18s var(--e);
}
.quick-nav a:hover, .quick-nav a:focus-visible{ background:rgba(255,255,255,.1); color:#fff; }
.quick-nav .num{ font-family:var(--font-en); font-size:10.5px; font-weight:500;
  color:var(--accent); letter-spacing:.06em; flex:none; width:18px; }
body.quick-open .to-top{ background:var(--brand); border-color:var(--brand); }
@media (prefers-reduced-motion:reduce){ .quick-nav{ animation:none; } }

/* 목차 안의 세부사업 — 평소에는 접혀 있고, 사업을 누르면 펼쳐집니다 */
.quick-subs{ display:none; padding:2px 0 6px; }
.quick-group.is-open .quick-subs{ display:block; }
.quick-nav a.sub{ padding:7px 12px 7px 30px; font-size:12.5px; font-weight:500;
  color:rgba(255,255,255,.62); }
.quick-nav a.sub:hover, .quick-nav a.sub:focus-visible{ color:#fff; }
.quick-nav a.sub .num{ font-size:9.5px; color:rgba(255,255,255,.4); width:16px; }
/* 펼침 표시 화살표 */
.quick-nav a.has-sub{ position:relative; padding-right:30px; }
.quick-nav .caret{ position:absolute; right:13px; top:50%; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg); opacity:.5;
  transition:transform .25s var(--e), opacity .25s var(--e); }
.quick-group.is-open .caret{ transform:translateY(-30%) rotate(-135deg); opacity:.9; }
.quick-group.is-open > a.has-sub{ background:rgba(255,255,255,.08); color:#fff; }

/* 첫 화면 사진 층을 담는 상자 — 스스로는 자리를 차지하지 않습니다 */
.hero-slides{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-slides .hero-slide{ position:absolute; inset:0; }

/* 관리자에서 크기를 지정한 글자 */
.up{ font-style:normal; font-size:1.18em; font-weight:inherit; }
.dn{ font-style:normal; font-size:.85em; font-weight:inherit; }


/* 관리자 문구 편집기에서 저장한 최소 서식 */
[data-text] a,.program-desc a,.program-note-body a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
[data-text] u,.program-desc u,.program-note-body u{ text-underline-offset:3px; }
.program-desc ul,.program-desc ol,.program-note-body ul,.program-note-body ol{ margin:.45em 0 .45em 1.3em; padding:0; }
.program-desc li,.program-note-body li{ margin:.15em 0; }
.program-note-body{ display:inline; }