/* ─────────────────────────────────────────────
   테마 4 · 카운터 (Data Bento)
   색: 딥 페트롤 그린 바탕 + 크림 + 아쿠아 액센트(수치·현재상태 전용)
   서체: IBM Plex Sans KR(제목·본문) / IBM Plex Mono(숫자·라틴 라벨)
        — Plex Mono에는 한글 글리프가 없다. 한글이 시스템 고정폭으로 떨어지지 않도록
          mono 스택 2순위에 Plex Sans KR를 넣어, 숫자·라틴만 고정폭으로 렌더한다.
   리듬: 6열 벤토. 타일의 열 수 = 그 정보의 비중. 모바일 2열에서도 비중을 유지한다.
   수치: 오도미터(자릿수 롤링) + 원형 게이지. 게이지와 숫자는 같은 시점·같은 길이로 움직인다.
   ───────────────────────────────────────────── */

:root {
  --bg:     #07302E;
  --bg-2:   #0A3B38;
  --tile:   #0D4441;
  --tile-2: #10514C;
  --line:   #17605A;
  --line-2: #1E7168;
  --cream:  #E7F0EC;
  --cream-2:#AEC8C1;
  --cream-3:#7D9E97;
  --aqua:   #2FD0AE;
  --aqua-2: #1DA98C;
  --ink:    #04211F;

  --sans: "IBM Plex Sans KR", sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Sans KR", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --r-tile: 4px;
  --r-sm: 2px;
  --r-pill: 999px;

  --gap: 12px;
  --sec-y: clamp(56px, 7.4vw, 96px);
}
@media (min-width: 820px) { :root { --gap: 14px; } }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 78rem; margin: 0 auto; padding: 0 20px; }
@media (min-width: 820px) { .wrap { padding: 0 28px; } }

:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.skip { background: var(--aqua); color: var(--ink); font-weight: 600; border-radius: var(--r-sm); }

.link { color: var(--aqua); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s var(--ease); }
.link:hover { color: var(--cream); }

/* 라틴/숫자 전용 고정폭 라벨. 한글이 섞여도 자간이 무너지지 않도록 letter-spacing은 자제. */
.mono, .eyebrow, .sec__no, .tile__idx, .kpi__label, .kpi__src, .badge, .pending,
.hero__src, .tile__src, .news__date, .news__from, .loop__kind, .loop__dl dt, .loop__caption,
.teacher__role, .spec dt, .quote cite, .gauge__sub, .stats__src, .sec__foot, .foot__theme,
.slot__idx, .foot__ttl, .photo__tag, .photo__desc, .btn span, .fee thead th {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.kpi__num, .gauge__val, .count__big, .dday__num, .dday__clock, .btn b, .fee tbody td, .newscta__link b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 구분점·슬래시만 아쿠아로 떨어뜨려 라벨에 계측기 눈금 느낌을 준다 */
.eyebrow i, .sec__no i, .loop__kind i { font-style: normal; color: var(--aqua-2); padding: 0 .15em; }

.badge {
  display: inline-block; font-size: 10.5px; letter-spacing: .02em;
  padding: 2px 9px; border: 1px solid var(--aqua-2); color: var(--aqua); border-radius: var(--r-pill);
  white-space: nowrap; line-height: 1.65; vertical-align: 1px;
}
.badge--mini { font-size: 9.5px; padding: 1px 7px; border-color: var(--line-2); color: var(--cream-3); }
.pending { font-size: 13px; color: var(--aqua); }

/* ── 등장 모션 ─────────────────────────
   짧게(360ms), 낮게(10px), 스케일 없이. 스크롤을 따라가는 반응이지 로딩 연출이 아니다. */
[data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .36s var(--ease), transform .36s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── 상단 바 ──────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40; background: rgba(7,48,46,.96);
  border-bottom: 1px solid var(--line);
}
.topbar__in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 8px; }
@media (min-width: 1020px) { .topbar__in { padding-top: 12px; padding-bottom: 12px; } }

.brand { display: flex; align-items: center; gap: 9px; color: var(--aqua); }
.brand__text { font-size: 16px; font-weight: 400; color: var(--cream); letter-spacing: -.015em; }
.brand__text b { font-weight: 600; }
.brand:hover .brand__mark { color: var(--cream); }
.brand__mark { transition: color .25s var(--ease); }

/* D-day: 남은 일수 + 실시간 잔여 시분초 */
.dday { margin-left: auto; display: flex; align-items: center; gap: 7px; min-width: 0; }
.dday__label { font-family: var(--mono); font-size: 11px; color: var(--cream-3); white-space: nowrap; }
.dday__num {
  font-weight: 600; font-size: 15px; color: var(--ink);
  background: var(--aqua); padding: 1px 8px; border-radius: var(--r-sm); white-space: nowrap;
}
.dday__clock {
  font-size: 11.5px; color: var(--aqua); letter-spacing: .02em;
  border-left: 1px solid var(--line-2); padding-left: 7px; white-space: nowrap;
}
.dday__flag { display: none; }
@media (min-width: 1240px) { .dday__flag { display: inline-block; } }
@media (max-width: 419px) { .dday__yr { display: none; } .dday__clock { display: none; } }

/* 스크롤 진행 게이지 — 헤더 아래 1px 눈금 */
.topbar__gauge { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; display: block; pointer-events: none; }
.topbar__gauge i { display: block; height: 100%; background: var(--aqua); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* 네비: 모바일에서는 가로 스크롤 칩 줄, 데스크톱에서는 인라인 메뉴 */
.topnav {
  order: 3; width: 100%; display: flex; gap: 6px; overflow-x: auto;
  font-size: 12.5px; color: var(--cream-2); padding-bottom: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  flex: none; padding: 4px 11px; border: 1px solid var(--line); border-radius: var(--r-pill);
  white-space: nowrap; transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.topnav a:hover { color: var(--aqua); border-color: var(--aqua-2); }
.topnav a.is-current { color: var(--ink); background: var(--aqua); border-color: var(--aqua); }
@media (min-width: 1020px) {
  .topnav { order: 0; width: auto; margin-left: auto; gap: 2px; overflow: visible; }
  .topnav a { border: 0; border-radius: 0; padding: 3px 10px; position: relative; }
  .topnav a::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 1px;
    background: var(--aqua); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
  }
  .topnav a:hover::after, .topnav a.is-current::after { transform: scaleX(1); }
  .topnav a.is-current { color: var(--aqua); background: none; }
  .dday { margin-left: 0; order: 4; }
}

/* ── 벤토 그리드 ────────────────────────
   기본 2열(모바일). 타일은 기본으로 두 칸을 다 쓰고, "보조 정보" 타일만 한 칸으로 줄여
   모바일에서도 크기 위계가 남게 한다. 820px부터 6열. */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); align-items: stretch; }
@media (min-width: 820px) { .bento { grid-template-columns: repeat(6, 1fr); } }

.tile {
  background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-tile);
  padding: 22px 20px 24px; grid-column: span 2;
  transition: border-color .28s var(--ease), background .28s var(--ease);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
/* 타일 상단 액센트 — 상시 짧은 눈금으로 보이고, 포인터가 닿으면 폭 전체로 늘어난다 */
.tile::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--aqua); transform: scaleX(.14); transform-origin: left;
  transition: transform .42s var(--ease-out);
}
.tile:hover, .tile:focus-within { border-color: var(--aqua-2); background: var(--tile-2); }
.tile:hover::after, .tile:focus-within::after { transform: scaleX(1); }
.tile--pending::after { background: var(--cream-3); transform: scaleX(.14); }
.tile--pending { border-style: dashed; background: transparent; }
.tile--pending:hover { background: var(--tile); }

/* ── 히어로 ───────────────────────────── */
.hero { padding: clamp(26px, 4vw, 44px) 0 6px; }
@media (min-width: 820px) {
  .bento--hero .tile--head { grid-column: span 4; grid-row: span 2; }
  .bento--hero .tile--cta  { grid-column: span 2; grid-row: span 2; }
  .bento--hero .tile--photo { grid-column: span 4; }
  .bento--hero .tile--kpis { grid-column: span 2; }
}
.tile--head { justify-content: center; padding: clamp(26px, 3.4vw, 40px) clamp(20px, 2.6vw, 32px); }
.eyebrow { font-size: 11.5px; letter-spacing: .06em; color: var(--aqua); margin-bottom: 14px; }
.hero__h1 { font-size: clamp(1.85rem, 4.7vw, 3.15rem); font-weight: 600; line-height: 1.3; letter-spacing: -.038em; }
.hero__h1 .em { color: var(--aqua); }
.hero__src { margin-top: 16px; font-size: 11.5px; color: var(--cream-3); }

.tile--cta { gap: 9px; justify-content: center; }
.btn {
  display: flex; flex-direction: column; gap: 1px; padding: 13px 17px;
  border: 1px solid var(--aqua); border-radius: var(--r-sm);
  transition: background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.btn span { font-size: 11px; letter-spacing: .04em; opacity: .78; }
.btn b { font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; }
.btn--solid { background: var(--aqua); color: var(--ink); }
.btn--solid:hover { background: var(--cream); border-color: var(--cream); box-shadow: 0 0 0 3px rgba(47,208,174,.22); }
.btn--ghost {
  border-style: dashed; border-color: var(--line-2); color: var(--cream-3);
  cursor: not-allowed; padding: 10px 17px;
}
.btn--ghost b { font-weight: 400; font-size: 13.5px; }
.cta__note { margin-top: 2px; font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--cream-3); }

/* 사진 자리 — 타일 전체를 채워 빈 하단이 남지 않게 한다 */
.tile--photo, .tile--portrait, .tile--map { padding: 10px; }
.photo__ph {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: clamp(168px, 21vw, 250px);
  border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  background-image: repeating-linear-gradient(45deg, transparent 0 11px, rgba(47,208,174,.055) 11px 12px);
}
.photo__tag { font-size: 10.5px; letter-spacing: .1em; color: var(--aqua); border: 1px solid var(--aqua-2); padding: 3px 11px; border-radius: var(--r-pill); }
.photo__desc { font-size: 11px; color: var(--cream-3); text-align: center; padding: 0 12px; }

/* KPI 두 줄 — 히어로에서는 보조 수치이므로 사진 타일 옆 2칸에 묶는다 */
.tile--kpis { justify-content: space-between; gap: 14px; }
.tile--kpis .kpi + .kpi { padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 819px) {
  .tile--kpis { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .tile--kpis .kpi + .kpi { padding-top: 0; border-top: 0; border-left: 1px solid var(--line); padding-left: 16px; }
  .tile--kpis .kpi__src { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line); }
}
.kpi__label { font-size: 10.5px; letter-spacing: .04em; color: var(--cream-3); }
.kpi__num { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.6rem); color: var(--aqua); line-height: 1.05; }
.kpi__num em { font-style: normal; font-size: .38em; color: var(--cream-2); }
.kpi__src { font-size: 10px; color: var(--cream-3); }

/* 오도미터 — 자릿수마다 0~9 릴을 여러 바퀴 굴려 목표 숫자에 착지시킨다.
   오른쪽 자릿수일수록 더 많이·더 오래 돈다(실제 계수기와 같은 순서). */
.odo { display: inline-flex; }
.odo-slot { display: inline-block; height: 1.06em; overflow: hidden; line-height: 1.06; }
.odo-reel { display: block; transform: translateY(0); }
.odo-digit { display: block; height: 1.06em; line-height: 1.06; }
.odo-sep { display: inline-block; }

/* ── 섹션 ─────────────────────────────── */
.sec { padding: var(--sec-y) 0; }
.sec--alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: calc(var(--sec-y) * 1.12) 0; }
.sec__head { max-width: 47rem; margin-bottom: clamp(22px, 3vw, 34px); }
.sec__no { font-size: 11px; letter-spacing: .12em; color: var(--aqua); margin-bottom: 9px; }
.sec__h2 { font-size: clamp(1.55rem, 3.5vw, 2.2rem); font-weight: 600; letter-spacing: -.038em; line-height: 1.32; }
.sec__lead { margin-top: 11px; font-size: 14.5px; color: var(--cream-2); }
.sec__foot { margin-top: 16px; font-size: 11.5px; color: var(--cream-3); }

/* ── 01 시스템: 확정 2개는 크게, 미확정 1개는 넓고 낮게 ── */
@media (min-width: 820px) {
  .bento--sys .tile--sys-a { grid-column: span 3; }
  .bento--sys .tile--sys-b { grid-column: span 3; }
  .bento--sys .tile--sys-c { grid-column: span 6; }
}
.tile--sys-a, .tile--sys-b { padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 30px); }
.tile--sys-c { padding: 18px 20px 20px; }
@media (min-width: 820px) {
  .tile--sys-c { display: grid; grid-template-columns: 3.2rem 12rem 1fr auto; align-items: baseline; column-gap: 20px; }
  .tile--sys-c .tile__name { margin: 0; }
  .tile--sys-c .tile__src { margin-top: 0; }
}
.tile__idx { font-size: 11px; letter-spacing: .14em; color: var(--cream-3); }
.tile__name { font-size: 1.3rem; font-weight: 600; letter-spacing: -.032em; margin: 8px 0 10px; }
.tile--sys-a .tile__name, .tile--sys-b .tile__name { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.tile__desc { font-size: 14.5px; color: var(--cream-2); flex: 1; }
.tile__src { margin-top: 16px; font-size: 10.5px; color: var(--cream-3); }

/* ── 02 순환 ──────────────────────────── */
.loop { display: grid; gap: var(--gap); }
@media (min-width: 880px) { .loop { grid-template-columns: 1fr 170px 1fr; align-items: stretch; } }
.loop__node { background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-tile); padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 26px); }
.loop__node--b { background: transparent; border-color: var(--aqua-2); }
.loop__kind { font-size: 10.5px; letter-spacing: .12em; color: var(--aqua); }
.loop__name { font-size: clamp(1.4rem, 2.6vw, 1.7rem); font-weight: 600; letter-spacing: -.038em; margin: 5px 0 16px; }
.loop__dl > div { display: grid; grid-template-columns: 4.6rem 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.loop__dl dt { font-size: 10.5px; letter-spacing: .04em; color: var(--cream-3); padding-top: 3px; }
.loop__dl dd { font-size: 14.5px; color: var(--cream); }
.loop__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--aqua); padding: 8px; }
.loop__ring { width: 84px; height: 84px; }
.loop__arc { transition: stroke-dashoffset 1.1s var(--ease-out); }
.loop__head {
  opacity: 0; transform-box: view-box; transform-origin: 36px 36px; transform: rotate(0deg);
  transition: opacity .25s var(--ease) .18s, transform 1.1s var(--ease-out);
}
.loop__link.is-drawn .loop__arc { stroke-dashoffset: 32.5; }
.loop__link.is-drawn .loop__head { opacity: 1; transform: rotate(300deg); }
.loop__caption { font-size: 10.5px; letter-spacing: .02em; text-align: center; color: var(--cream-2); line-height: 1.65; }

/* ── 03 원장 ──────────────────────────── */
@media (min-width: 820px) {
  .bento--teacher .tile--portrait { grid-column: span 2; grid-row: span 2; }
  .bento--teacher .tile--quote { grid-column: span 4; }
  .bento--teacher .tile--spec { grid-column: span 2; }
  .bento--teacher .tile--note { grid-column: span 2; }
}
.tile--quote { justify-content: center; padding: clamp(24px, 2.8vw, 34px) clamp(20px, 2.4vw, 30px); }
.teacher__role { font-size: 11px; letter-spacing: .14em; color: var(--aqua); }
.teacher__name { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.045em; margin-bottom: 16px; }
.quote p { font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-weight: 400; line-height: 1.5; letter-spacing: -.032em; color: var(--cream); }
.quote p::before { content: "“"; color: var(--aqua-2); }
.quote p::after { content: "”"; color: var(--aqua-2); }
.quote cite { display: block; margin-top: 10px; font-size: 10.5px; font-style: normal; color: var(--cream-3); }
.tile--spec .spec { margin-top: 10px; }
.spec > div { display: grid; grid-template-columns: 5.2rem 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.spec > div:first-child { border-top: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 0; }
.spec dt { font-size: 11px; letter-spacing: .02em; color: var(--cream-3); padding-top: 3px; }
.spec--wide > div { grid-template-columns: 3.8rem 1fr; }
.teacher__note { margin-top: 10px; font-size: 14px; color: var(--cream-2); flex: 1; }
.teacher__flag { margin-top: 12px; font-size: 12.5px; line-height: 1.65; color: var(--cream-3); }

/* ── 04 게이지 ────────────────────────── */
@media (min-width: 820px) {
  .bento--stats .tile--gauge-lg { grid-column: span 4; }
  .bento--stats .tile--gauge-md { grid-column: span 2; }
  .bento--stats .tile--gauge-sm { grid-column: span 2; }
  .bento--stats .tile--count   { grid-column: span 1; }
  .bento--stats .tile--srcnote { grid-column: span 3; }
}
@media (max-width: 819px) {
  .bento--stats .tile--gauge-md, .bento--stats .tile--gauge-sm { grid-column: span 1; }
}
.tile--gauge, .tile--count {
  align-items: center; justify-content: center; gap: 14px; color: var(--aqua);
  padding: clamp(20px, 2.4vw, 28px) 16px;
}
/* 대표 지표 한 개만 가로형으로 크게 — 나머지는 같은 문법의 축소판 */
.tile--gauge-lg {
  flex-direction: row; justify-content: center; align-items: center;
  gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 38px);
}
.tile--gauge-lg figcaption { align-items: flex-start; text-align: left; }
@media (max-width: 559px) {
  .tile--gauge-lg { flex-direction: column; justify-content: center; gap: 16px; }
  .tile--gauge-lg figcaption { align-items: center; text-align: center; }
}
.tile--count { flex-direction: row; gap: 14px; justify-content: center; }
.tile--count figcaption { align-items: flex-start; text-align: left; }
@media (min-width: 820px) { .tile--count { flex-direction: column; gap: 10px; } .tile--count figcaption { align-items: center; text-align: center; } }
.gauge { position: relative; display: grid; place-items: center; }
.gauge svg { width: 100%; height: auto; grid-area: 1 / 1; }
.gauge__val { grid-area: 1 / 1; font-weight: 600; color: var(--cream); line-height: 1; letter-spacing: -.02em; }
.gauge__val em { font-style: normal; font-size: .5em; color: var(--cream-2); margin-left: 1px; }
.gauge__track { stroke: currentColor; opacity: .16; }
.gauge__ticks { opacity: .32; }
.gauge__arc { stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.15s var(--ease-out); }

.tile--gauge-lg .gauge { width: clamp(150px, 18vw, 196px); flex: none; }
.tile--gauge-lg .gauge__val { font-size: clamp(2.4rem, 4.4vw, 3.2rem); }
.tile--gauge-md .gauge { width: clamp(112px, 12vw, 132px); }
.tile--gauge-md .gauge__val { font-size: clamp(1.7rem, 2.6vw, 1.95rem); }
.tile--gauge-sm .gauge { width: clamp(96px, 11vw, 118px); }
.tile--gauge-sm .gauge__val { font-size: clamp(1.5rem, 2.2vw, 1.75rem); }

.tile--gauge figcaption, .tile--count figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.gauge__label { font-size: 13px; color: var(--cream); letter-spacing: -.01em; }
.gauge__sub { font-family: var(--mono); font-size: 10.5px; color: var(--cream-3); }
.tile--gauge-lg .gauge__label { font-size: 14.5px; }
.count__big { font-weight: 600; font-size: clamp(3rem, 5vw, 3.8rem); line-height: 1; color: var(--aqua); display: flex; align-items: baseline; gap: 2px; }
.count__big em { font-style: normal; font-size: .32em; color: var(--cream-2); }

/* 출처 타일 — 대성학원식 "n년 기준" 표기를 수치와 같은 층에 둔다 */
.tile--srcnote { padding: 20px 20px 22px; justify-content: space-between; }
.srcnote { margin-top: 10px; }
.srcnote > div { display: grid; grid-template-columns: 5.4rem 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.srcnote dt { font-family: var(--mono); font-size: 11px; color: var(--aqua); }
.srcnote dd { font-size: 13px; color: var(--cream-2); }
.srcnote__foot { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--cream-3); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tags li { font-size: 12.5px; padding: 5px 13px 5px 5px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--cream-2); display: flex; align-items: center; gap: 8px; }
.tags b { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--aqua); background: rgba(47,208,174,.1); border-radius: var(--r-pill); padding: 2px 9px; }

.slot { margin-top: 26px; padding: 22px 22px 24px; border: 1px dashed var(--line-2); border-radius: var(--r-tile); background-image: repeating-linear-gradient(45deg, transparent 0 11px, rgba(231,240,236,.028) 11px 12px); }
.slot__idx { font-size: 10.5px; letter-spacing: .14em; color: var(--cream-3); margin-bottom: 8px; }
.slot__title { font-size: 1.05rem; font-weight: 600; color: var(--cream-2); letter-spacing: -.025em; }
.slot__desc { margin-top: 7px; font-size: 13.5px; color: var(--cream-3); max-width: 46rem; }

/* ── 05 표 ────────────────────────────── */
.feegrid { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 940px) { .feegrid { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.tile--feenote { grid-column: auto; padding: 20px 20px 22px; }
.tile--feenote .teacher__flag { margin-top: 14px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-tile); }
.fee { min-width: 460px; font-size: 15px; }
.fee__c1 { width: 42%; } .fee__c2 { width: 28%; } .fee__c3 { width: 30%; }
.fee th, .fee td { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.fee thead th { font-size: 11px; letter-spacing: .06em; color: var(--cream-3); font-weight: 400; background: var(--bg); text-align: left; }
.fee thead th:nth-child(n+2) { text-align: right; }
.fee tbody th { font-weight: 400; text-align: left; }
.fee tbody td { text-align: right; color: var(--cream-2); }
.fee tbody td:last-child { color: var(--aqua); font-weight: 600; }
.fee tbody tr:last-child th, .fee tbody tr:last-child td { border-bottom: 0; }
.fee tbody tr { transition: background .18s var(--ease); }
.fee tbody tr:hover { background: var(--tile); }
.fee tbody tr:hover td:last-child { color: var(--cream); }

/* ── 06 소식 ──────────────────────────── */
@media (min-width: 820px) {
  .bento--news .tile--news-lead { grid-column: span 4; }
  .bento--news .tile--pending { grid-column: span 2; }
  .bento--news .tile--newscta { grid-column: span 4; }
}
@media (max-width: 819px) {
  .bento--news .tile--pending { grid-column: span 1; }
}
.news__date { font-size: 11px; letter-spacing: .04em; color: var(--aqua); }
.tile--pending .news__date { color: var(--cream-3); }
.news__title { font-size: 1.02rem; font-weight: 500; line-height: 1.55; letter-spacing: -.028em; margin: 8px 0 12px; flex: 1; }
.tile--news-lead { padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.2vw, 28px); }
.tile--news-lead .news__title { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; }
.news__from { font-size: 10.5px; color: var(--cream-3); }
.tile--newscta { justify-content: space-between; }
.newscta__link { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; color: var(--aqua); }
.newscta__link span { font-family: var(--mono); font-size: 11px; color: var(--cream-2); }
.newscta__link b { font-weight: 600; font-size: clamp(1rem, 1.9vw, 1.25rem); letter-spacing: -.02em; }
.tile--newscta:hover .newscta__link b { color: var(--cream); }
.newscta__link b::after { content: " →"; }

/* ── 07 오시는 길 ─────────────────────── */
@media (min-width: 820px) {
  .bento--visit .tile--info { grid-column: span 3; }
  .bento--visit .tile--map { grid-column: span 3; }
}
.tile--info { justify-content: space-between; padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px); }

/* ── 푸터 ─────────────────────────────── */
.foot { padding: clamp(38px, 5vw, 58px) 0 clamp(44px, 5vw, 62px); background: var(--bg-2); border-top: 1px solid var(--line); }
.foot__in { display: grid; gap: 26px; padding-bottom: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .foot__in { grid-template-columns: 1.4fr .7fr 1.4fr; gap: 32px; } }
.foot__brand { font-size: 1.1rem; font-weight: 600; letter-spacing: -.03em; }
.foot__addr { font-size: 13.5px; color: var(--cream-2); margin-top: 6px; }
.foot__ttl { font-size: 10.5px; letter-spacing: .14em; color: var(--cream-3); margin-bottom: 8px; }
.foot__links { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.foot__note { font-size: 12.5px; line-height: 1.7; color: var(--cream-3); }
.foot__theme { font-size: 11px; color: var(--cream-3); }

/* ── 모션 최소화 대응 ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .loop__arc { stroke-dashoffset: 32.5; }
  .loop__head { opacity: 1; transform: rotate(300deg); }
  .tile::after { transform: scaleX(.14); }
}