@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
/* 센터 홈페이지 디자인 틀 A (기업형 · 영어 전문) — 홈피MAKE 10-11
   색은 --c-primary(대표색) · --c-accent(강조색) 두 개만 center.json theme 에서 받고, 나머지는 여기서 만든다.
   크기: 휴대폰 ~767 / 패드 768~1199 / PC 1200+ (본문 최대 폭 1240) */

:root {
  --c-primary: #14213D;
  --c-accent: #C9A24B;
  /* 색이 섞이지 않는 옛 브라우저용 기본값 */
  --c-primary-dark: #0D1629;
  --c-primary-soft: #E8EAEF;
  --c-tint: #F5F6F8;
  --c-accent-soft: #F7F1E4;
  --c-ink: #191D26;
  --c-text: #3D4452;
  --c-muted: #6B7280;
  --c-faint: #9AA1AD;
  --c-line: #E3E5EA;
  --c-line-strong: #C9CDD5;
  --c-bg: #FFFFFF;
  --c-err: #B42318;
  --c-err-bg: #FEF3F2;
  /* 메인 2차: 관별 색 · 바탕 칸 색 */
  --c-elem: #1F8A84;
  --c-mid: #4B4FA8;
  --c-high: var(--c-primary);
  --c-cream: #FAF6EC;
  --c-sky: #EEF2F8;
  --c-accent-deep: #9C7B33;
  /* 10-11 대비 강조색 두 개(center.json theme.pop1 · pop2) — 칸마다 한 군데 이하: 배지(D-n·NEW), 간담회 예약 단추, 마우스 올림 빛 */
  --c-pop1: #E8735A;   /* 산호 — 따뜻한 대비. 글자는 어두운 색(#2B0F08)으로 */
  --c-pop2: #3BA7E8;   /* 하늘 — 시원한 대비. 빛·선·점에만 */
  --c-pop1-ink: #2B0F08;
  --shadow: 0 1px 2px rgba(13, 22, 41, .04), 0 10px 28px rgba(13, 22, 41, .06);
  --shadow-up: 0 2px 4px rgba(13, 22, 41, .05), 0 18px 40px rgba(13, 22, 41, .10);
  --gold-lines: repeating-linear-gradient(115deg, rgba(201, 162, 75, .07) 0 1px, transparent 1px 28px);

  --f: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* 글자 크기 단계 */
  --fs-xs: .8125rem;  /* 13 */
  --fs-sm: .9375rem;  /* 15 */
  --fs-md: 1.0625rem; /* 17 본문 */
  --fs-lg: 1.25rem;   /* 20 */
  --fs-xl: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);   /* 카드·관 제목 */
  --fs-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);   /* 칸 제목 h2 */
  --fs-3xl: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem);  /* 첫 화면 h1 */
  /* 여백 단계 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: 20px;
  --sec-y: var(--s8);
  --head-h: 64px;
  --radius: 8px;
  --radius-lg: 12px;
  --ease: cubic-bezier(.2, .6, .2, 1);
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --c-primary-dark: color-mix(in srgb, var(--c-primary) 80%, #000);
    --c-primary-soft: color-mix(in srgb, var(--c-primary) 9%, #fff);
    --c-tint: color-mix(in srgb, var(--c-primary) 3.5%, #fff);
    --c-accent-soft: color-mix(in srgb, var(--c-accent) 13%, #fff);
    --c-accent-deep: color-mix(in srgb, var(--c-accent) 76%, #000);
    --gold-lines: repeating-linear-gradient(115deg, color-mix(in srgb, var(--c-accent) 8%, transparent) 0 1px, transparent 1px 28px);
    --c-ink: color-mix(in srgb, var(--c-primary) 30%, #111);
    --c-line: color-mix(in srgb, var(--c-primary) 10%, #e9e9ea);
    --c-line-strong: color-mix(in srgb, var(--c-primary) 22%, #d4d4d6);
  }
}
@media (min-width: 768px) { :root { --gutter: 32px; --sec-y: var(--s9); --head-h: 72px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; --sec-y: var(--s10); --head-h: 80px; } }

/* ───── 바탕 ───── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--f); font-size: var(--fs-md); line-height: 1.7; font-weight: 400;
  letter-spacing: -.01em; word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; color: var(--c-ink); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
main:focus { outline: none; }
.wrap { width: min(100% - var(--gutter) * 2, 1240px); margin-inline: auto; }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 100; padding: var(--s3) var(--s4); background: var(--c-primary); color: #fff; border-radius: var(--radius); }
.skip:focus { top: var(--s4); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.note-check { display: inline; font-size: var(--fs-xs); font-weight: 400; color: var(--c-faint); letter-spacing: 0; }
p.note-check { display: block; margin-bottom: var(--s5); }

/* ───── 단추 ───── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s6); border: 1px solid transparent; border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-ghost { background: transparent; color: var(--c-primary); border-color: var(--c-line-strong); }
.btn-ghost:hover { border-color: var(--c-primary); }
.btn:disabled { opacity: .55; cursor: progress; }

/* 영문 작은 머리말: 금색 짧은 선 + 글자 */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-primary);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--c-accent); }
.lead { font-size: var(--fs-lg); line-height: 1.65; color: var(--c-muted); }
.more { margin-top: var(--s6); text-align: right; font-size: var(--fs-sm); font-weight: 600; }
.more a:not(.btn) { color: var(--c-primary); border-bottom: 1px solid var(--c-line-strong); padding-bottom: 2px; }
.more a:not(.btn)::after { content: " →"; }
.more a:not(.btn):hover { border-color: var(--c-primary); }

/* ───── 머리줄 · 메뉴 ───── */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--c-line); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s5); height: var(--head-h); }
.brand { display: flex; align-items: center; gap: var(--s3); margin-right: auto; min-width: 0; }
.brand-mark img { width: 36px; height: 36px; }
.brand-name { font-size: 1.1875rem; font-weight: 700; color: var(--c-ink); letter-spacing: -.03em; white-space: nowrap; }
.brand-slogan { display: none; padding-left: var(--s3); border-left: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; }
.site-header .btn { min-height: 40px; padding: 0 var(--s4); font-size: var(--fs-xs); }
.gnb-toggle {
  order: 3; min-height: 40px; padding: 0 var(--s4); background: none; cursor: pointer;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink);
}
.gnb-toggle[aria-expanded="true"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.gnb { display: none; }
.gnb.is-open {
  display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%;
  padding: var(--s2) var(--gutter) var(--s5); background: #fff; border-bottom: 1px solid var(--c-line);
}
.gnb.is-open a { padding: var(--s4) 0; border-bottom: 1px solid var(--c-line); font-weight: 600; color: var(--c-ink); }
.gnb.is-open a:last-child { border-bottom: 0; }
.gnb a.is-current { color: var(--c-primary); }
.gnb.is-open a.is-current::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--s3) 2px 0; background: var(--c-accent); vertical-align: middle; }
@media (max-width: 479px) { .site-header .btn-primary { display: none; } }
@media (min-width: 1024px) {
  .gnb-toggle { display: none; }
  .gnb, .gnb.is-open { display: flex; position: static; flex-direction: row; gap: var(--s1); padding: 0; border: 0; background: none; }
  .gnb a, .gnb.is-open a { position: relative; padding: var(--s2) var(--s3); border: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); transition: color .15s; }
  .gnb a:hover { color: var(--c-ink); }
  .gnb a.is-current, .gnb.is-open a.is-current { color: var(--c-ink); font-weight: 700; }
  .gnb a.is-current::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: calc((var(--head-h) - 40px) / -2 - 1px); height: 2px; background: var(--c-accent); }
  .gnb.is-open a.is-current::before { display: none; }
  .site-header .btn { margin-left: var(--s3); }
}
@media (min-width: 1200px) {
  .brand-slogan { display: inline; }
  .brand-name { font-size: 1.3125rem; }
  .brand-mark img { width: 40px; height: 40px; }
  .gnb a, .gnb.is-open a { padding: var(--s2) var(--s4); }
  .gnb a.is-current::after { left: var(--s4); right: var(--s4); }
  .site-header .btn { min-height: 44px; padding: 0 var(--s5); }
}

/* ───── 첫 화면 · 쪽 머리 ───── */
.hero { padding: var(--s7) 0 var(--s8); border-bottom: 1px solid var(--c-line); }
.hero .wrap { display: grid; gap: var(--s7); align-items: center; }
.hero h1 { font-size: var(--fs-3xl); line-height: 1.22; letter-spacing: -.035em; }
.hero .lead { margin-top: var(--s5); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.hero-media .ph, .hero-media .ph-img { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .hero { padding: var(--s9) 0; } }
@media (min-width: 1200px) {
  .hero { padding: var(--s9) 0 var(--s10); }
  .hero .wrap { grid-template-columns: 6fr 5fr; gap: var(--s9); }
  .hero-media .ph, .hero-media .ph-img { aspect-ratio: 5 / 4; }
}
.page-hero { padding: var(--s8) 0 var(--s7); background: var(--c-tint); border-bottom: 1px solid var(--c-line); }
.page-hero h1 { font-size: var(--fs-3xl); letter-spacing: -.035em; }
.page-hero .lead { margin-top: var(--s4); max-width: 40em; }
@media (min-width: 1200px) { .page-hero { padding: var(--s9) 0 var(--s8); } }

/* ───── 칸 ───── */
.sec { padding: var(--sec-y) 0; }
.sec-alt { background: var(--c-tint); border-block: 1px solid var(--c-line); }
.sec-alt + .sec-alt { border-top: 0; }
.sec-head { max-width: 760px; margin-bottom: var(--s7); }
.sec-head h2 { font-size: var(--fs-2xl); }
.sec-head p:not(.eyebrow) { margin-top: var(--s4); color: var(--c-muted); }
@media (min-width: 1200px) { .sec-head { margin-bottom: var(--s8); } }
section[id] { scroll-margin-top: calc(var(--head-h) + 16px); }

/* 사진 자리 · 사진 */
.ph {
  position: relative; display: flex; align-items: flex-end; width: 100%; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--c-primary-soft), var(--c-tint)); border-radius: var(--radius); overflow: hidden;
}
.ph::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--c-line); border-radius: inherit; }
.ph span { position: relative; padding: var(--s3) var(--s4); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .04em; color: var(--c-faint); }
.ph-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--c-tint); }

/* 숫자 띠 */
.sec-stats { padding: var(--s7) 0; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--c-ink); }
.stat { padding: var(--s5) var(--s4) var(--s5) 0; border-bottom: 1px solid var(--c-line); }
.stat:nth-child(odd) { border-right: 1px solid var(--c-line); }
.stat:nth-child(even) { padding-left: var(--s4); }
.stat-num { font-size: var(--fs-xl); font-weight: 700; color: var(--c-ink); letter-spacing: -.03em; line-height: 1.3; }
.stat-label { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat, .stat:nth-child(even) { padding: var(--s6) var(--s5); border-right: 1px solid var(--c-line); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; }
  .stat-num { font-size: var(--fs-2xl); }
}
.about-intro + .stats { margin-top: var(--s8); }

/* 카드 */
.cards { display: grid; gap: var(--s4); }
.card { display: block; padding: var(--s6); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
.card h3 { font-size: var(--fs-lg); }
.card h3::before { content: ""; display: block; width: 20px; height: 2px; margin-bottom: var(--s5); background: var(--c-accent); }
.card p { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--c-muted); }
@media (min-width: 768px) { .cards.cols-3 { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 1200px) { .cards.cols-3 { grid-template-columns: repeat(3, 1fr); } .card { padding: var(--s7) var(--s6); } }

/* 관 맛보기 카드: 사진 위 · 글 아래 */
.division-teaser .card { padding: 0; overflow: hidden; transition: border-color .2s var(--ease); }
.division-teaser .card .ph, .division-teaser .card .ph-img { border-radius: 0; aspect-ratio: 3 / 2; }
.division-teaser .card .ph::before { border: 0; border-bottom: 1px solid var(--c-line); }
.division-teaser .card h3, .division-teaser .card p { padding-inline: var(--s6); }
.division-teaser .card h3 { margin-top: var(--s6); font-size: var(--fs-xl); }
.division-teaser .card h3::before { display: none; }
.division-teaser .card h3 small { margin-left: var(--s2); font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); letter-spacing: 0; }
.division-teaser .card p { padding-bottom: var(--s6); }
.division-teaser .card p::after { content: "자세히 보기 →"; display: block; margin-top: var(--s5); font-size: var(--fs-xs); font-weight: 600; color: var(--c-primary); }
.division-teaser .card:hover { border-color: var(--c-primary); }
@media (min-width: 768px) and (max-width: 1199px) { .cards.division-teaser { grid-template-columns: repeat(3, 1fr); } .division-teaser .card h3, .division-teaser .card p { padding-inline: var(--s5); } }

/* 수업 단계 · 내신 대비 단계 */
.steps, .naesin-steps { display: grid; gap: 0; counter-reset: none; }
.step, .naesin-steps > li { position: relative; padding: var(--s5) 0 var(--s5) var(--s7); border-top: 1px solid var(--c-line); }
.step:last-child, .naesin-steps > li:last-child { border-bottom: 1px solid var(--c-line); }
.step-num { position: absolute; left: 0; top: var(--s5); font-size: var(--fs-sm); font-weight: 700; color: var(--c-accent); letter-spacing: .04em; line-height: 1.7; }
.step h3, .naesin-steps h3 { font-size: var(--fs-lg); }
.step p:not(.step-num), .naesin-steps li p:not(.step-num) { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--c-muted); }
@media (min-width: 768px) {
  .steps, .naesin-steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s5); }
  .step, .naesin-steps > li, .step:last-child, .naesin-steps > li:last-child { padding: var(--s6) 0 0; border-top: 1px solid var(--c-ink); border-bottom: 0; }
  .step-num { position: static; margin-bottom: var(--s4); }
}
@media (min-width: 1200px) { .steps, .naesin-steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s6); } .naesin-steps > li:not(:last-child)::after { right: -32px; width: 32px; } }
/* 내신 대비 판: 흰 판 위에 가로 흐름선 + 점 */
.naesin-steps { padding: var(--s6); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
@media (min-width: 768px) {
  .naesin-steps { padding: var(--s7) var(--s6); }
  .naesin-steps > li { border-top: 1px solid var(--c-line-strong); }
  .naesin-steps > li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent); }
  .naesin-steps > li:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: -1px; width: 24px; height: 1px; background: var(--c-line-strong); }
}

/* 소식 목록 */
.news-list { border-top: 1px solid var(--c-ink); }
.news-item { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); align-items: center; padding: var(--s5) 0; border-bottom: 1px solid var(--c-line); }
.news-tag { padding: 2px var(--s2); border: 1px solid var(--c-line-strong); border-radius: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-primary); white-space: nowrap; }
.news-title { grid-column: 1 / -1; font-weight: 600; color: var(--c-ink); transition: color .15s; }
.news-item time { grid-row: 1; grid-column: 2; font-size: var(--fs-xs); color: var(--c-faint); font-variant-numeric: tabular-nums; }
.news-item:hover .news-title { color: var(--c-primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (min-width: 768px) {
  .news-item { grid-template-columns: 72px 1fr 110px; gap: var(--s6); padding: var(--s6) 0; }
  .news-tag { justify-self: start; }
  .news-title { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .news-item time { grid-row: auto; grid-column: 3; text-align: right; font-size: var(--fs-sm); }
}

/* 설명회 목록 */
.event-list { border-top: 1px solid var(--c-ink); }
.event { display: grid; gap: var(--s2); padding: var(--s6) 0; border-bottom: 1px solid var(--c-line); }
.event time { font-size: var(--fs-sm); font-weight: 700; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.event h3 { font-size: var(--fs-lg); }
.event p { font-size: var(--fs-sm); color: var(--c-muted); }
@media (min-width: 768px) { .event { grid-template-columns: 160px 1fr; column-gap: var(--s6); } .event time { grid-row: span 2; } }

/* 상담 띠 */
.cta-band { background: var(--c-primary); color: rgba(255, 255, 255, .78); }
.cta-band .wrap { display: grid; gap: var(--s4); }
.cta-band h2 { color: #fff; font-size: var(--fs-2xl); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.cta-band .btn-primary { background: #fff; color: var(--c-primary); }
.cta-band .btn-primary:hover { background: var(--c-accent-soft); }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.cta-band .btn-ghost:hover { border-color: #fff; }
@media (min-width: 1200px) {
  .cta-band { padding: var(--s9) 0; }
  .cta-band .wrap { grid-template-columns: 1fr auto; grid-template-areas: "h a" "p a"; column-gap: var(--s8); align-items: center; }
  .cta-band h2 { grid-area: h; } .cta-band .wrap > p:not(.cta-actions) { grid-area: p; }
  .cta-actions { grid-area: a; margin: 0; }
}

/* ───── 학원 소개 ───── */
.about-intro { display: grid; gap: var(--s6); align-items: center; }
.about-intro h2 { font-size: var(--fs-2xl); }
.about-intro .lead { margin-top: var(--s4); }
@media (min-width: 1200px) { .about-intro { grid-template-columns: 6fr 5fr; gap: var(--s9); } }

/* ───── 교육 과정 ───── */
.division-nav {
  position: sticky; top: var(--head-h); z-index: 20; display: flex; gap: var(--s6); overflow-x: auto;
  background: #fff; border-bottom: 1px solid var(--c-line); scrollbar-width: none;
}
.division-nav::-webkit-scrollbar { display: none; }
.division-nav a { padding: var(--s4) 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.division-nav a:hover { color: var(--c-ink); border-color: var(--c-accent); }
.division-head { display: grid; gap: var(--s6); align-items: end; padding-bottom: var(--s7); margin-bottom: var(--s7); border-bottom: 1px solid var(--c-line); }
.division-head h2 { font-size: var(--fs-2xl); }
.division-target { margin-top: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent); letter-spacing: .02em; }
.division-head p:not(.division-target) { margin-top: var(--s4); color: var(--c-muted); }
.course-list { display: grid; gap: var(--s4); }
.course { padding: var(--s5) 0 0; border-top: 1px solid var(--c-ink); }
.course h3 { font-size: var(--fs-lg); }
.course p { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--c-muted); }
@media (min-width: 768px) { .course-list { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); } .division-head { grid-template-columns: 5fr 6fr; gap: var(--s7); } }
@media (min-width: 1200px) { .course-list { grid-template-columns: repeat(3, 1fr); gap: var(--s7) var(--s6); } .division-head { gap: var(--s9); } }

/* ───── 시간표 ───── */
.tt-wrap { display: none; overflow-x: auto; border-top: 1px solid var(--c-ink); }
table.tt { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tt th, .tt td { padding: var(--s4) var(--s3); border-bottom: 1px solid var(--c-line); text-align: center; vertical-align: middle; }
.tt td + td, .tt th + td, .tt thead th + th { border-left: 1px solid var(--c-line); }
.tt thead th { background: var(--c-tint); font-weight: 700; color: var(--c-ink); }
.tt tbody th { width: 180px; font-weight: 500; color: var(--c-muted); white-space: nowrap; text-align: left; }
.tt thead th:first-child { text-align: left; }
.tt td { font-weight: 600; color: var(--c-ink); }
.tt td.empty { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--c-tint) 6px 7px); }
.tt-cards { display: grid; gap: var(--s4); }
.tt-card { padding: var(--s5); border: 1px solid var(--c-line); border-radius: var(--radius); }
.tt-card h3 { padding-bottom: var(--s3); margin-bottom: var(--s2); border-bottom: 1px solid var(--c-line); font-size: var(--fs-lg); }
.tt-card li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; font-size: var(--fs-sm); }
.tt-time { color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-class { font-weight: 600; color: var(--c-ink); text-align: right; }
.tt-card > p { font-size: var(--fs-sm); color: var(--c-faint); }
.tt-extra { margin-top: var(--s6); padding: var(--s5) var(--s5) var(--s5) var(--s6); background: var(--c-tint); border-radius: var(--radius); font-size: var(--fs-sm); }
.tt-extra li { position: relative; padding: var(--s1) 0; }
.tt-extra li::before { content: ""; position: absolute; left: calc(var(--s4) * -1); top: .85em; width: 4px; height: 4px; background: var(--c-accent); }
.tt-note { margin-bottom: var(--s5); font-size: var(--fs-sm); color: var(--c-muted); }
.tt-note a, p.note-check a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .tt-wrap { display: block; } .tt-cards { display: none; } }

/* 관리 일정 표 (매일/매주/매달/학기 × 무엇을) — table 또는 div 둘 다 */
.care-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--c-ink); font-size: var(--fs-sm); }
.care-table th, .care-table td { padding: var(--s4) var(--s3); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.care-table thead th { background: var(--c-tint); font-weight: 700; color: var(--c-ink); }
.care-table tbody th { width: 120px; font-weight: 700; color: var(--c-primary); white-space: nowrap; }
.care-table tbody th::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--s2) 2px 0; background: var(--c-accent); vertical-align: middle; }
.care-table td { color: var(--c-text); }
@media (max-width: 767px) {
  .care-table, .care-table tbody, .care-table tr, .care-table th, .care-table td { display: block; width: auto; }
  .care-table thead { display: none; }
  .care-table tr { padding: var(--s4) 0; border-bottom: 1px solid var(--c-line); }
  .care-table th, .care-table td { padding: var(--s1) 0; border: 0; }
}
@media (min-width: 1200px) { .care-table th, .care-table td { padding: var(--s5) var(--s5); } .care-table tbody th { width: 160px; } }

/* 레벨 테스트 안내: dl 표 + 예약 단추 */
.leveltest { display: grid; gap: var(--s6); padding: var(--s6); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
.leveltest h2 { font-size: var(--fs-xl); }
.leveltest dl { display: grid; grid-template-columns: 96px 1fr; border-top: 1px solid var(--c-ink); }
.leveltest dt, .leveltest dd { padding: var(--s4) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.leveltest dt { font-weight: 600; color: var(--c-muted); }
.leveltest dd { color: var(--c-ink); }
.leveltest .btn { justify-self: start; }
@media (min-width: 1200px) {
  .leveltest { grid-template-columns: 1fr auto; align-items: end; gap: var(--s6) var(--s8); padding: var(--s7); }
  .leveltest h2 { grid-column: 1 / -1; }
  .leveltest h2 { font-size: var(--fs-xl); }
.leveltest dl { grid-template-columns: 140px 1fr; }
}

/* ───── 오시는 길 ───── */
.contact-grid { display: grid; gap: var(--s7); }
.map .ph { aspect-ratio: 16 / 10; }
.map > p { margin-top: var(--s4); font-size: var(--fs-sm); }
.contact-info dl { display: grid; grid-template-columns: 88px 1fr; border-top: 1px solid var(--c-ink); }
.contact-info dt, .contact-info dd { padding: var(--s4) 0; border-bottom: 1px solid var(--c-line); }
.contact-info dt { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.contact-info dd { color: var(--c-ink); }
.contact-info dd a { font-size: var(--fs-lg); font-weight: 700; color: var(--c-primary); }
@media (min-width: 1200px) { .contact-grid { grid-template-columns: 7fr 5fr; gap: var(--s8); } .contact-info dl { grid-template-columns: 112px 1fr; } }

/* ───── 상담 폼 ───── */
.consult { position: relative; display: grid; gap: var(--s5); max-width: 880px; padding: var(--s6) var(--s5); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
.consult[aria-busy="true"] { opacity: .7; cursor: progress; }
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { display: block; margin-bottom: var(--s2); padding: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.req { font-size: var(--fs-xs); font-weight: 500; color: var(--c-accent); }
.consult input[type="text"], .consult input[type="tel"], .consult select, .consult textarea {
  display: block; width: 100%; min-height: 52px; padding: var(--s3) var(--s4); background: #fff;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-size: 1rem; color: var(--c-ink);
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.consult textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.consult select {
  padding-right: var(--s7); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7280' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.consult input::placeholder { color: var(--c-faint); }
.consult input:focus, .consult select:focus, .consult textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.count { margin-top: var(--s1); text-align: right; font-size: var(--fs-xs); color: var(--c-faint); font-variant-numeric: tabular-nums; }
/* 단추형 고르기: 동그라미 숨기고 글자칸을 단추로 */
.seg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: #fff;
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); transition: background-color .15s, border-color .15s, color .15s;
}
.seg label:hover span { border-color: var(--c-primary); }
.seg input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.agree { padding: var(--s4) var(--s5); background: var(--c-tint); border-radius: var(--radius); font-size: var(--fs-sm); }
.agree > label { display: flex; align-items: flex-start; gap: var(--s3); font-weight: 600; color: var(--c-ink); cursor: pointer; }
.agree input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--c-primary); }
.agree details { margin-top: var(--s3); padding-left: 32px; }
.agree summary { display: inline; font-size: var(--fs-xs); color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.agree summary::-webkit-details-marker { display: none; }
.agree details ul, .agree details p { margin-top: var(--s3); font-size: var(--fs-xs); line-height: 1.7; color: var(--c-muted); }
.agree details li + li { margin-top: var(--s1); }
.consult button[type="submit"] { width: 100%; min-height: 56px; font-size: var(--fs-md); }
.form-msg:empty { display: none; }
.form-msg { padding: var(--s4) var(--s5); border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; }
.form-msg.is-ok { background: var(--c-primary-soft); color: var(--c-primary); }
.form-msg.is-err { background: var(--c-err-bg); color: var(--c-err); }
@media (min-width: 768px) {
  .consult { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); padding: var(--s7); }
  .consult > :nth-child(n+5) { grid-column: 1 / -1; }
  .consult button[type="submit"] { width: auto; min-width: 280px; justify-self: start; }
}

/* ───── 바닥글 ───── */
.site-footer { padding: var(--s8) 0 var(--s7); background: var(--c-primary-dark); color: rgba(255, 255, 255, .62); font-size: var(--fs-sm); line-height: 1.8; }
.site-footer .wrap { display: grid; gap: var(--s1); }
.site-footer a { color: rgba(255, 255, 255, .88); }
.site-footer a:hover { color: #fff; }
.footer-name { margin-bottom: var(--s3); font-size: var(--fs-lg); font-weight: 700; color: #fff; letter-spacing: -.02em; }
/* 등록번호 · 교습과목 · 교습비 한 묶음 */
.footer-legal { font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); }
p:not(.footer-legal) + .footer-legal { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-blog { margin-top: var(--s4); }
.footer-blog a { display: inline-block; padding: var(--s1) var(--s3); border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius); font-size: var(--fs-xs); }
.footer-hub { margin-top: var(--s5); font-size: var(--fs-xs); color: rgba(255, 255, 255, .38); letter-spacing: .02em; }
.site-footer .note-check { color: rgba(255, 255, 255, .4); }

/* ───── 고정 상담 단추 (패드·PC 오른쪽) · 아래 고정 줄 (휴대폰) ───── */
.fab-consult {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 40; display: none; align-items: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5); background: var(--c-primary); color: #fff; border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600; box-shadow: 0 6px 20px rgba(13, 22, 41, .18); transition: background-color .18s;
}
.fab-consult::before { content: ""; width: 6px; height: 6px; background: var(--c-accent); border-radius: 50%; }
.fab-consult:hover { background: var(--c-primary-dark); }
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--c-line);
}
.bottom-bar a { display: flex; align-items: center; justify-content: center; min-height: 56px; font-size: var(--fs-md); font-weight: 700; color: var(--c-primary); }
.bottom-bar a + a { background: var(--c-primary); color: #fff; }
body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
@media (max-width: 359px) { .bottom-bar a { font-size: var(--fs-sm); } }
@media (min-width: 768px) {
  .bottom-bar { display: none; }
  body { padding-bottom: 0; }
  .fab-consult { display: inline-flex; }
}
@media (min-width: 1200px) { .fab-consult { right: var(--s6); bottom: var(--s6); } }
body[data-page="contact"] .fab-consult { display: none; }

/* ═════ 메인 2차 (10-11 원장님: 색감 더 · 많이 보이게 · 학원이 커 보이게) ═════ */

/* 칸 바탕 리듬: 흰색 → 크림 → 연하늘회 → 남색 */
.sec-alt { background: var(--c-sky); border-block: 0; }
.sec-cream { background: var(--c-cream); }
.sec-sky { background: var(--c-sky); }
.sec.sec-navy { background: var(--gold-lines), var(--c-primary); color: rgba(255, 255, 255, .78); }
.sec-navy h2, .sec-navy h3 { color: #fff; }
.sec-navy .eyebrow { color: var(--c-accent); }
.sec-navy .sec-head p:not(.eyebrow) { color: rgba(255, 255, 255, .7); }
.sec-alt:has(.feature-split), .sec-alt:has(.news-cards) { background: var(--c-cream); }
body[data-page="home"] .sec:has(> .wrap > ol.steps) { background: var(--gold-lines), var(--c-primary); color: rgba(255, 255, 255, .78); }
body[data-page="home"] .sec:has(> .wrap > ol.steps) :is(h2, h3) { color: #fff; }
body[data-page="home"] .sec:has(> .wrap > ol.steps) .eyebrow { color: var(--c-accent); }
body[data-page="home"] .sec:has(> .wrap > ol.steps) .step p:not(.step-num) { color: rgba(255, 255, 255, .7); }
body[data-page="home"] .sec:has(> .wrap > ol.steps) .step-num { background: rgba(201, 162, 75, .12); color: var(--c-accent); }
body[data-page="home"] .sec:has(> .wrap > ol.steps) .step { border-color: rgba(255, 255, 255, .18); }
.sec-head h2::after { content: ""; display: block; width: 40px; height: 2px; margin-top: var(--s5); background: var(--c-accent); }

/* 공통: 둥근 모서리 · 아주 옅은 그림자 */
.card, .tt-card, .leveltest, .consult, .naesin-steps { border-radius: var(--radius-lg); }
.card { box-shadow: var(--shadow); border-color: transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.card:hover { box-shadow: var(--shadow-up); }
a.card:hover { transform: translateY(-3px); }

/* 머리 위 얇은 알림 띠 */
.notice-bar { background: var(--c-primary-dark); color: rgba(255, 255, 255, .82); font-size: var(--fs-xs); }
.notice-bar .wrap { display: flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 40px; text-align: center; }
.notice-label { flex: none; padding: 1px var(--s2); border: 1px solid var(--c-accent); border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--c-accent); }
.notice-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-bar a { flex: none; color: var(--c-accent); font-weight: 600; border-bottom: 1px solid currentColor; }
.notice-bar a::after { content: " →"; }
@media (max-width: 767px) { .notice-bar .wrap { justify-content: flex-start; text-align: left; } }

/* 첫 화면 (남색 전체 폭) */
.hero-rich {
  position: relative; overflow: hidden; padding: var(--s8) 0; border: 0; color: rgba(255, 255, 255, .78);
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(201, 162, 75, .16), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(255, 255, 255, .06), transparent 60%),
    var(--gold-lines),
    linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
}
.hero-rich::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); opacity: .6; }
.hero-rich h1 { color: #fff; }
.hero-rich .eyebrow { color: var(--c-accent); }
.hero-rich .lead { color: rgba(255, 255, 255, .74); }
.hero-rich .btn-primary { background: var(--c-accent); color: var(--c-primary-dark); }
.hero-rich .btn-primary:hover { background: #fff; }
.hero-rich .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero-rich .btn-ghost:hover { border-color: #fff; }
.hero-rich .hero-media { position: relative; }
.hero-rich .hero-media img, .hero-rich .hero-media .ph {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-lg);
  border: 1px solid rgba(201, 162, 75, .35); box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.hero-rich .hero-media::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid rgba(201, 162, 75, .3); border-radius: calc(var(--radius-lg) + 4px); pointer-events: none; }
@media (max-width: 767px) { .hero-rich .hero-media::before { inset: -8px 8px 8px -8px; } }
@media (min-width: 768px) { .hero-rich { padding: var(--s9) 0; } }
@media (min-width: 1200px) {
  .hero-rich { display: flex; align-items: center; min-height: min(80vh, 920px); }
  .hero-rich .wrap { grid-template-columns: 7fr 4fr; gap: var(--s9); }
  .hero-rich h1 { font-size: clamp(2.75rem, 1.9rem + 1.6vw, 3.4rem); }
}

/* 관 바로가기 3개 (첫 화면 안) */
.hero-quick { display: grid; gap: var(--s3); margin-top: var(--s7); }
.quick {
  --k: var(--c-accent); position: relative; display: grid; gap: 2px; padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 4px);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius);
  color: rgba(255, 255, 255, .7); font-size: var(--fs-xs); line-height: 1.5; transition: background-color .2s, border-color .2s, transform .25s var(--ease);
}
.quick::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--k); }
.quick > :first-child { font-size: var(--fs-md); font-weight: 700; color: #fff; }
.quick-target { font-size: var(--fs-xs); font-weight: 600; color: var(--c-accent); }
.quick-line { color: rgba(255, 255, 255, .68); }
.quick::after { content: "→"; position: absolute; right: var(--s4); top: var(--s4); color: rgba(255, 255, 255, .45); transition: transform .2s var(--ease), color .2s; }
.quick:hover::after { color: var(--c-accent); transform: translateX(3px); }
.quick:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .28); transform: translateY(-2px); }
.q-elem { --k: #3FC1B8; }
.q-mid { --k: #8E92EA; }
.q-high { --k: var(--c-accent); }
@supports (color: color-mix(in srgb, red, blue)) {
  .q-elem { --k: color-mix(in srgb, var(--c-elem) 70%, #fff); }
  .q-mid { --k: color-mix(in srgb, var(--c-mid) 60%, #fff); }
}
.hero-rich .hero-quick { margin-top: 0; }
@media (min-width: 560px) { .hero-quick { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .hero-rich .hero-quick { grid-column: 1 / -1; gap: var(--s5); margin-top: calc(var(--s5) * -1); } .quick { padding: var(--s5) var(--s6) var(--s5) calc(var(--s6) + 4px); } }

/* 숫자 띠 (금색 숫자, 첫 화면에 반쯤 걸친 흰 판) */
.stats-band-wrap { position: relative; padding: 0 0 var(--s7); background: linear-gradient(var(--c-primary-dark) 0 50%, transparent 50%); }
.sec-schools { padding-top: 0; }
.stats.stats-band { padding: var(--s4) var(--s5); background: #fff; border-top: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-up); }
.stats-band .stat-num { color: var(--c-accent-deep); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); font-variant-numeric: tabular-nums; }
.stats-band .stat:nth-last-child(-n+2) { border-bottom: 0; }
.sec-navy .stat-num, .hero-rich .stat-num { color: var(--c-accent); }
@media (min-width: 768px) {
  .stats.stats-band { padding: var(--s5) var(--s6); }
  .stats-band .stat { border-bottom: 0; }
  .stats-band .stat, .stats-band .stat:nth-child(even) { padding: var(--s6); }
  .stats-band .stat:first-child { padding-left: var(--s4); }
}

/* 칩 (학교 · 차량 지역) */
.school-chips { display: grid; gap: var(--s4); padding: var(--s6); background: var(--c-cream); border: 1px solid rgba(201, 162, 75, .25); border-radius: var(--radius-lg); }
.school-chips h3, .school-chips strong { font-size: var(--fs-md); font-weight: 700; color: var(--c-ink); }
.school-chips > p { font-size: var(--fs-sm); color: var(--c-muted); }
.mid-line b { margin-right: var(--s2); color: var(--c-primary); }
.school-chips ul, .bus-chips, .bus-chips ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
.school-chips li, .bus-chips li, .chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4);
  background: #fff; border: 1px solid var(--c-line-strong); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary);
}
.school-chips li::before { content: ""; width: 6px; height: 6px; margin-right: var(--s2); border-radius: 50%; background: var(--c-accent); }
.bus-chips li, .bus-chips .chip { background: var(--c-sky); border-color: transparent; }
@media (min-width: 1200px) {
  .school-chips { grid-template-columns: 300px 1fr; align-items: center; column-gap: var(--s7); padding: var(--s6) var(--s7); }
  .school-chips > :not(ul) { grid-column: 1; }
  .school-chips > ul { grid-column: 2; grid-row: 1 / span 3; }
}

/* 강점 카드 아이콘 동그라미 */
.card.has-icon h3::before { display: none; }
.card .icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s5);
  border-radius: 50%; background: var(--c-accent-soft); color: var(--c-primary); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .35);
}
.card .icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card.has-icon:nth-child(even) .icon { background: var(--c-sky); box-shadow: inset 0 0 0 1px var(--c-line); }

/* 관 패널 3개 (위 색 띠) */
.div-panels { display: grid; gap: var(--s5); }
.div-panel { --k: var(--c-primary); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s var(--ease); }
.div-panel:hover { box-shadow: var(--shadow-up); transform: translateY(-3px); }
.div-panel > :first-child { padding: var(--s6); background: var(--gold-lines), var(--k); color: rgba(255, 255, 255, .8); font-size: var(--fs-sm); }
.div-panel > :first-child h3, .div-panel > :first-child strong, .div-panel > h3:first-child { display: block; font-size: var(--fs-xl); color: #fff; }
.div-panel > :first-child span, .div-panel > :first-child small { display: block; margin-top: var(--s1); font-size: var(--fs-sm); font-weight: 500; color: rgba(255, 255, 255, .78); }
.div-panel > :not(:first-child) { padding-inline: var(--s6); }
.div-panel ul { display: grid; gap: var(--s2); padding-block: var(--s5); }
.div-panel li { position: relative; padding-left: var(--s5); font-size: var(--fs-sm); color: var(--c-text); }
.div-panel li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 4px; border: solid var(--k); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.div-panel > a:last-child, .div-panel > .more { margin-top: auto; padding-block: var(--s4) var(--s5); border-top: 1px solid var(--c-line); text-align: left; font-size: var(--fs-sm); font-weight: 700; color: var(--k); }
.div-panel > a:last-child::after { content: " →"; }
.dp-elem { --k: var(--c-elem); }
.dp-mid { --k: var(--c-mid); }
.dp-high { --k: var(--c-high); }
.dp-high > :first-child { box-shadow: inset 0 -3px 0 var(--c-accent); }
.dp-high li::before { border-color: var(--c-accent-deep); }
@media (min-width: 768px) { .div-panels { grid-template-columns: repeat(3, 1fr); } .div-panel > :first-child, .div-panel > :not(:first-child) { padding-inline: var(--s5); } }
@media (min-width: 1200px) { .div-panels { gap: var(--s6); } .div-panel > :first-child { padding: var(--s7) var(--s6) var(--s6); } .div-panel > :not(:first-child) { padding-inline: var(--s6); } }

/* 2단 판: 수능 180분 막대 | 내신 5단계 */
.feature-split { display: grid; gap: var(--s5); }
.feature-split > * { padding: var(--s6); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.feature-split h3 { font-size: var(--fs-xl); }
.feature-split h3 + p { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--c-muted); }
.feature-split .naesin-steps { display: block; margin-top: var(--s5); padding: 0; background: none; border: 0; box-shadow: none; }
.feature-split .naesin-steps > li, .feature-split .naesin-steps > li:last-child { padding: var(--s3) 0 var(--s3) 56px; border-top: 1px solid var(--c-line); border-bottom: 0; }
.feature-split .naesin-steps > li::before, .feature-split .naesin-steps > li::after { display: none; }
.feature-split .naesin-steps .step-num { position: absolute; left: 0; top: var(--s3); margin: 0; width: 40px; height: 40px; }
.feature-split .naesin-steps h3, .feature-split .naesin-steps h4 { margin: 0; font-size: var(--fs-md); line-height: 40px; color: var(--c-ink); }
.feature-split .naesin-steps p:not(.step-num) { margin-top: 2px; }
@media (min-width: 1200px) { .feature-split { grid-template-columns: 1fr 1fr; gap: var(--s6); } .feature-split > * { padding: var(--s7); } }
.timeline { display: flex; gap: 3px; margin-top: var(--s6); }
.timeline > * {
  flex: var(--m, 1) 1 0; min-width: 0; display: grid; align-content: end; gap: 2px; min-height: 104px; padding: var(--s3);
  background: var(--k, var(--c-primary)); color: rgba(255, 255, 255, .85); font-size: var(--fs-xs); line-height: 1.4;
}
.timeline > :first-child { border-radius: var(--radius) 0 0 var(--radius); }
.timeline > :last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.timeline > :nth-child(1) { --k: var(--c-elem); --m: 70; }
.timeline > :nth-child(2) { --k: var(--c-mid); --m: 20; }
.timeline > :nth-child(3) { --k: var(--c-high); --m: 90; box-shadow: inset 0 -3px 0 var(--c-accent); }
.tl-min { font-size: var(--fs-lg); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.tl-name { overflow: hidden; text-overflow: ellipsis; }
.feature h3 b { color: var(--c-accent-deep); }
.feature > .more { margin-top: var(--s5); text-align: left; }
@media (max-width: 559px) {
  .timeline { flex-direction: column; gap: 2px; }
  .timeline > *, .timeline > :first-child, .timeline > :last-child { flex: none !important; min-height: 0; display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: 0; }
  .timeline > :first-child { border-radius: var(--radius) var(--radius) 0 0; }
  .timeline > :last-child { border-radius: 0 0 var(--radius) var(--radius); }
  .tl-min { min-width: 48px; }
}
.timeline-total, .timeline + p { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--c-muted); }

/* 수업 방식: 번호 금색 동그라미 */
.step-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-accent-deep); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .5);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
.step, .naesin-steps > li { padding-left: 60px; }
@media (min-width: 768px) {
  .step, .naesin-steps > li, .step:last-child, .naesin-steps > li:last-child { padding-left: 0; }
  .steps .step { border-top: 1px solid var(--c-line-strong); }
  .steps .step::after { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--c-accent); }
  .step-num { width: 48px; height: 48px; font-size: var(--fs-sm); }
}
.sec-navy .step-num { background: rgba(201, 162, 75, .12); color: var(--c-accent); }
.sec-navy .steps .step { border-color: rgba(255, 255, 255, .18); }
.sec-navy .step p:not(.step-num) { color: rgba(255, 255, 255, .7); }

/* 관리 일정 짧은 판 */
.care-table { background: #fff; border-radius: var(--radius-lg); overflow: hidden; border-top: 0; box-shadow: var(--shadow); }
.care-table thead th { background: var(--c-primary); color: #fff; }
.care-table thead th:first-child { box-shadow: inset 3px 0 0 var(--c-accent); }
.care-table tr:last-child > * { border-bottom: 0; }
@media (max-width: 767px) { .care-table tr { padding: var(--s4) var(--s5); } }

/* 설명회 카드 (날짜 크게) */
.event-card {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s6); align-items: center;
  padding: var(--s6); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); border-left: 4px solid var(--c-accent);
}
.event-card .event-date { display: grid; place-items: center; min-width: 104px; padding: var(--s4) var(--s3);
  background: var(--gold-lines), var(--c-primary); color: var(--c-accent); border-radius: var(--radius);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; text-align: center; font-variant-numeric: tabular-nums;
}
.ed-month { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .75); }
.ed-day { display: block; }
.event-body { display: grid; gap: var(--s2); min-width: 0; }
.event-badge { justify-self: start; padding: 2px var(--s3); border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent-deep); font-size: var(--fs-xs); font-weight: 700; }
.event-card.is-past { border-left-color: var(--c-line-strong); }
.event-card.is-past .event-date { background: var(--c-faint); color: #fff; }
.event-card.is-past .event-badge { background: var(--c-tint); color: var(--c-muted); }
.event-cards { display: grid; gap: var(--s4); }
@media (min-width: 1200px) { .event-cards { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
.event-card h3 { font-size: var(--fs-xl); }
.event-card p { font-size: var(--fs-sm); color: var(--c-muted); }
.event-card .btn { justify-self: start; margin-top: var(--s2); }
@media (max-width: 399px) { .event-card { grid-template-columns: 1fr; } .event-card .event-date { justify-self: start; } }
.cta-band { background: radial-gradient(60% 120% at 100% 0%, rgba(201, 162, 75, .18), transparent 60%), var(--gold-lines), linear-gradient(160deg, var(--c-primary), var(--c-primary-dark)); }
div.cta-band { display: grid; gap: var(--s3); margin-top: var(--s6); padding: var(--s7) var(--s6); border-radius: var(--radius-lg); }
div.cta-band h2 { color: #fff; font-size: var(--fs-xl); }
@media (min-width: 1200px) {
  div.cta-band { grid-template-columns: 1fr auto; grid-template-areas: "h a" "p a"; column-gap: var(--s8); align-items: center; padding: var(--s8) var(--s8); }
  div.cta-band h2 { grid-area: h; font-size: var(--fs-2xl); } div.cta-band > p:not(.cta-actions) { grid-area: p; } div.cta-band .cta-actions { grid-area: a; margin: 0; }
}
.cta-band .btn-primary { background: var(--c-accent); color: var(--c-primary-dark); }
.cta-band .btn-primary:hover { background: #fff; }

/* 소식 카드 */
.news-cards { display: grid; gap: var(--s4); }
.news-card {
  display: flex; flex-direction: column; gap: var(--s3); min-height: 188px; padding: var(--s6);
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.news-card .news-tag { align-self: flex-start; padding: 3px var(--s3); border: 0; border-radius: 999px; background: var(--c-sky); }
.news-card h3 { font-size: var(--fs-md); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.news-card:hover h3 { color: var(--c-primary); }
.news-card time { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-faint); font-variant-numeric: tabular-nums; }
.news-tag.tag-공지 { background: var(--c-accent-soft); color: var(--c-accent-deep); border-color: transparent; }
.news-tag.tag-초등관 { background: #E3F3F2; color: var(--c-elem); border-color: transparent; }
.news-tag.tag-중등관 { background: #EBECF8; color: var(--c-mid); border-color: transparent; }
.news-tag.tag-고등관 { background: var(--c-high); color: #fff; border-color: transparent; }
@media (min-width: 768px) { .news-cards.cols-3 { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 1200px) { .news-cards.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* 오시는 길 짧은 판 */
.visit-mini { display: grid; gap: var(--s6); padding: var(--s6); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.visit-mini dl { display: grid; grid-template-columns: 88px 1fr; }
.visit-mini dt, .visit-mini dd { padding: var(--s3) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.visit-mini dt { font-weight: 600; color: var(--c-muted); }
.visit-mini dd { color: var(--c-ink); }
.visit-mini dd a[href^="tel"] { font-size: var(--fs-lg); font-weight: 700; color: var(--c-primary); }
.visit-mini h3 { margin-bottom: var(--s3); font-size: var(--fs-lg); }
.bus-note { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--c-faint); }
.visit-mini > .more { margin-top: 0; text-align: left; }
@media (min-width: 1200px) { .visit-mini > .more { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .visit-mini { grid-template-columns: 1fr 1fr; gap: var(--s8); padding: var(--s7); } }

/* 다른 쪽 머리도 남색 */
.page-hero { position: relative; overflow: hidden; border: 0; color: rgba(255, 255, 255, .75); background: radial-gradient(50% 100% at 90% 0%, rgba(201, 162, 75, .16), transparent 60%), var(--gold-lines), linear-gradient(160deg, var(--c-primary), var(--c-primary-dark)); }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); opacity: .6; }
.page-hero h1 { color: #fff; }
.page-hero .eyebrow { color: var(--c-accent); }
.page-hero .lead { color: rgba(255, 255, 255, .72); }
.page-hero .note-check { color: rgba(255, 255, 255, .45); }
@media (min-width: 1200px) { .page-hero { padding: var(--s10) 0 var(--s9); } }

/* 스크롤 때 살짝 떠오르기 (app.js 가 .reveal → .is-in). 움직임 줄이기면 처음부터 보임 */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
  .reveal.is-in { opacity: 1; transform: none; }
}
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* ═════ 3차 (10-11 원장님: 화면 전체 움직임 · 공지 게시판 · 원장 전용방) ═════ */

/* ── 첫 화면 배경: 흐르는 금색 빛 3개 + 흐르는 사선 무늬 (.hero-bg > span.orb ×3, app.js) ── */
.hero-rich > .wrap, .page-hero > .wrap { position: relative; z-index: 1; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg::before { content: ""; position: absolute; inset: 0 -60px 0 -60px; background: var(--gold-lines); opacity: .9; }
.orb {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; opacity: .55;
  background: radial-gradient(closest-side, rgba(233, 180, 85, .30), rgba(233, 180, 85, .10) 55%, transparent);
  will-change: transform;
}
.orb:nth-child(1) { left: 48%; top: -22%; }
.orb:nth-child(2) { left: -16%; top: 38%; width: 36vmax; height: 36vmax; background: radial-gradient(closest-side, rgba(120, 150, 220, .20), transparent); }
.orb:nth-child(3) { left: 70%; top: 55%; width: 28vmax; height: 28vmax; opacity: .45; }
/* 쪽 머리: 흐르는 빛 하나 (가상 요소) */
.page-hero::before { content: ""; position: absolute; z-index: 0; right: -10vmax; top: -20vmax; width: 44vmax; height: 44vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 180, 85, .22), transparent); pointer-events: none; will-change: transform; }

/* ── 로고 판 기울기 (.tilt + --rx --ry, app.js) ── */
.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); will-change: transform; }
.hero-media.tilt::after, .tilt .hero-shine {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .14) 48%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0;
}

/* ── 머리줄: 내리면 얇아지고 그림자 (.is-scrolled, app.js) ── */
.site-header { transition: box-shadow .3s var(--ease), background-color .3s; }
.site-header .wrap { transition: height .3s var(--ease); }
.site-header.is-scrolled { --head-h: 56px; box-shadow: 0 6px 24px rgba(13, 22, 41, .08); background: rgba(255, 255, 255, .98); }
@media (min-width: 768px) { .site-header.is-scrolled { --head-h: 60px; } }
@media (min-width: 1200px) { .site-header.is-scrolled { --head-h: 64px; } }
.brand-mark img { transition: transform .3s var(--ease); }
.site-header.is-scrolled .brand-mark img { transform: scale(.86); }

/* ── 위로 가기 단추 ── */
.to-top {
  position: fixed; right: var(--s4); bottom: calc(56px + var(--s4) + env(safe-area-inset-bottom)); z-index: 39;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--c-primary); border: 1px solid var(--c-line-strong); box-shadow: var(--shadow);
  font-size: 0; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease), border-color .2s;
}
.to-top::before { content: ""; width: 10px; height: 10px; margin-top: 4px; border: solid currentColor; border-width: 2px 0 0 2px; transform: rotate(45deg); }
.to-top.is-on, .to-top.is-show, .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--c-accent); color: var(--c-accent-deep); }
.to-top[hidden] { display: none; }
@media (min-width: 768px) { .to-top { right: var(--s5); bottom: calc(var(--s5) + 52px + var(--s3)); } }
@media (min-width: 1200px) { .to-top { right: var(--s6); bottom: calc(var(--s6) + 52px + var(--s3)); } }
body[data-page="contact"] .to-top { bottom: calc(56px + var(--s4)); }
@media (min-width: 768px) { body[data-page="contact"] .to-top { bottom: var(--s5); } }

/* ── 카드: 떠오르기 + 금색 테 빛 ── */
.card, .div-panel, .news-card { position: relative; }
.card::after, .div-panel::after, .news-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .55), 0 0 0 4px rgba(201, 162, 75, .10); opacity: 0; transition: opacity .3s var(--ease);
}
.card:hover::after, .div-panel:hover::after, .news-card:hover::after, .card:focus-within::after { opacity: 1; }
.card:hover, .news-card:hover { transform: translateY(-4px); }
.quick:hover { border-color: rgba(201, 162, 75, .6); box-shadow: 0 0 0 4px rgba(201, 162, 75, .08); }

/* 숫자 다 오르면 금색 반짝 (app.js 가 .is-done) */
.stat-num.is-done { animation: gold-flash 1.1s var(--ease) 1; }

/* ── 공지 게시판 ── */
.board { display: grid; gap: var(--s5); }
.board-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.board-cats { display: flex; flex-wrap: wrap; gap: var(--s2); }
button.chip { cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600; transition: background-color .2s, color .2s, border-color .2s; }
button.chip:hover { border-color: var(--c-primary); }
button.chip[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.board-search, .admin-login input, .notice-editor input:not([type="checkbox"]):not([type="radio"]), .notice-editor select, .notice-editor textarea, .admin-panel select, .admin-panel input[type="text"], .admin-panel input[type="search"] {
  min-height: 44px; padding: var(--s2) var(--s4); background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  font-size: 1rem; color: var(--c-ink); transition: border-color .15s, box-shadow .15s;
}
.board-search {
  width: 100%; max-width: 320px; padding-left: 40px; border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7280' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 16px center;
}
.board-search:focus, .admin-login input:focus, .notice-editor :is(input, select, textarea):focus, .admin-panel :is(input, select):focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
@media (max-width: 767px) { .board-search { max-width: none; } .board-cats { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; } .board-cats > * { flex: none; } }
.board-list { background: #fff; border-top: 2px solid var(--c-primary); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow); }
.board-item { border-bottom: 1px solid var(--c-line); }
.board-item:last-child { border-bottom: 0; }
.board-item.is-pin { background: var(--c-cream); }
.bi-head {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--s2) var(--s3);
  width: 100%; padding: var(--s4); background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background-color .15s;
}
.bi-head:hover { background: var(--c-tint); }
.board-item.is-pin .bi-head:hover { background: #F5EEDC; }
.bi-cat { grid-column: 1; padding: 2px var(--s3); border-radius: 999px; background: var(--c-sky); font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary); white-space: nowrap; }
.board-item.is-pin .bi-cat { background: var(--c-primary); color: #fff; }
.board-item.is-pin .bi-cat::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--c-accent); vertical-align: middle; }
.bi-new { grid-column: 2; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.bi-head time { grid-column: 4; grid-row: 1; font-size: var(--fs-xs); color: var(--c-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bi-title { grid-column: 1 / -1; font-weight: 600; color: var(--c-ink); }
.bi-head[aria-expanded="true"] .bi-title { color: var(--c-primary); }
.bi-head::after { content: ""; grid-column: 4; grid-row: 2; justify-self: end; width: 8px; height: 8px; border: solid var(--c-faint); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .25s var(--ease); }
.bi-head[aria-expanded="true"]::after { transform: rotate(-135deg); }
.bi-body { padding: var(--s2) var(--s4) var(--s6); font-size: var(--fs-sm); line-height: 1.8; color: var(--c-text); }
.bi-body p + p { margin-top: var(--s3); }
.bi-body a { color: var(--c-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bi-body[hidden] { display: none; }
@media (min-width: 768px) {
  .bi-head { grid-template-columns: 88px 1fr auto 104px 16px; gap: var(--s4); padding: var(--s5) var(--s6); }
  .bi-cat { justify-self: start; }
  .bi-title { grid-column: 2; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bi-new { grid-column: 3; grid-row: 1; }
  .bi-head time { grid-column: 4; text-align: right; font-size: var(--fs-sm); }
  .bi-head::after { grid-column: 5; grid-row: 1; }
  .bi-body { padding: 0 var(--s6) var(--s7) calc(88px + var(--s6) + var(--s4)); }
}
.board-empty { padding: var(--s8) var(--s4); text-align: center; color: var(--c-faint); }
.board-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); }
.board-pager :is(a, button) {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 var(--s2); background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--radius); font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); cursor: pointer;
}
.board-pager :is(a, button):hover { border-color: var(--c-primary); }
.board-pager [aria-current], .board-pager .is-current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.board-pager :disabled { opacity: .4; cursor: default; }
/* 홈 「학원 공지」 짧은 판 */
.notice-mini { padding: var(--s5) var(--s6); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); border-top: 3px solid var(--c-accent); }
.notice-mini h3 { margin-bottom: var(--s3); font-size: var(--fs-lg); }
.notice-mini li { border-bottom: 1px solid var(--c-line); }
.notice-mini li:last-child { border-bottom: 0; }
.notice-mini li > a { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; font-size: var(--fs-sm); color: var(--c-ink); }
.notice-mini li > a:hover { color: var(--c-primary); }
.notice-mini li > a > :not(time):not(.bi-cat):not(.bi-new) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-mini time { margin-left: auto; font-size: var(--fs-xs); color: var(--c-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.notice-mini + * { margin-top: var(--s6); }

/* ── 원장 전용방 ── */
body[data-page="admin"] { padding-bottom: 0; background: var(--c-tint); }
body[data-page="admin"] :is(.fab-consult, .bottom-bar, .notice-bar) { display: none !important; }
.admin-login { display: grid; gap: var(--s4); width: min(100%, 420px); margin: var(--s8) auto; padding: var(--s7) var(--s6); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-up); border-top: 3px solid var(--c-accent); }
.admin-login h1, .admin-login h2 { font-size: var(--fs-xl); }
.admin-login label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.admin-login input { width: 100%; min-height: 52px; }
.admin-login .btn { width: 100%; }
.admin-login p { font-size: var(--fs-xs); color: var(--c-muted); }
.admin-app { display: grid; gap: var(--s5); padding-block: var(--s6) var(--s8); }
.admin-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.admin-tabs { display: flex; gap: var(--s5); overflow-x: auto; border-bottom: 1px solid var(--c-line-strong); scrollbar-width: none; }
.admin-tabs button { position: relative; flex: none; padding: var(--s4) 0; background: none; border: 0; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); cursor: pointer; }
.admin-tabs button:hover { color: var(--c-ink); }
.admin-tabs button[aria-selected="true"] { color: var(--c-ink); }
.admin-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-accent); }
.admin-panel { min-width: 0; }
.admin-panel[hidden] { display: none; }
.admin-panel h2 { font-size: var(--fs-xl); margin-bottom: var(--s4); }
/* 견본 띠 · 꼬리표 */
.demo-banner, .demo-note, .admin-panel .is-demo-note {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); margin-bottom: var(--s4);
  background: var(--c-accent-soft); border: 1px dashed rgba(201, 162, 75, .7); border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent-deep);
}
.demo-tag, .tag-demo, .is-demo .badge { display: inline-block; padding: 1px var(--s2); border: 1px dashed var(--c-accent); border-radius: 3px; font-size: 11px; font-weight: 700; color: var(--c-accent-deep); vertical-align: middle; white-space: nowrap; }
.is-demo { --demo: 1; }
tr.is-demo > :first-child { box-shadow: inset 3px 0 0 rgba(201, 162, 75, .55); }
.consult-cards > .is-demo { border-left: 3px solid rgba(201, 162, 75, .55); }
/* 상담 목록: PC 표 · 휴대폰 카드 */
.consult-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); font-size: var(--fs-sm); }
.consult-table th, .consult-table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.consult-table thead th { position: sticky; top: 0; background: var(--c-primary); color: #fff; font-weight: 600; white-space: nowrap; }
.consult-table tbody tr { transition: background-color .15s; }
.consult-table tbody tr:hover { background: var(--c-tint); }
.consult-table td a[href^="tel"] { font-weight: 700; color: var(--c-primary); white-space: nowrap; }
.consult-table time, .consult-table .when { white-space: nowrap; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.consult-table input[type="text"] { width: 100%; min-width: 140px; min-height: 36px; font-size: var(--fs-sm); }
.consult-cards { display: grid; gap: var(--s3); }
.consult-cards > * { display: grid; gap: var(--s2); padding: var(--s5); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); font-size: var(--fs-sm); }
.consult-cards dl { display: grid; grid-template-columns: 72px 1fr; gap: var(--s1) var(--s3); }
.consult-cards dt { color: var(--c-muted); }
.consult-cards dd { color: var(--c-ink); }
.consult-cards a[href^="tel"] { font-size: var(--fs-md); font-weight: 700; color: var(--c-primary); }
.consult-cards input[type="text"] { width: 100%; }
.consult-table-wrap { overflow-x: auto; }
@media (max-width: 1023px) { .consult-table, .consult-table-wrap { display: none; } }
@media (min-width: 1024px) { .consult-cards { display: none; } }
/* 상태 꼬리표 (span 또는 select) */
.status-chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--s3); border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; background: var(--c-tint); color: var(--c-muted);
}
select.status-chip { -webkit-appearance: none; appearance: none; padding-right: 26px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.status-chip.st-new { background-color: var(--c-accent-soft); color: var(--c-accent-deep); border-color: rgba(201, 162, 75, .5); }
.status-chip.st-called { background-color: var(--c-sky); color: var(--c-primary); }
.status-chip.st-joined { background-color: #E3F3F2; color: var(--c-elem); }
.status-chip.st-hold { background-color: #F1F2F4; color: var(--c-muted); }
/* 공지 쓰기 */
.notice-editor { display: grid; gap: var(--s4); padding: var(--s6); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.notice-editor label { display: grid; gap: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.notice-editor label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: var(--s2); }
.notice-editor input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-primary); }
.notice-editor textarea { min-height: 200px; resize: vertical; line-height: 1.7; }
.notice-editor .actions, .notice-editor > p:last-child { display: flex; flex-wrap: wrap; gap: var(--s2); }
.btn-danger { background: #fff; color: var(--c-err); border-color: rgba(180, 35, 24, .35); }
.btn-danger:hover { background: var(--c-err-bg); }
@media (min-width: 768px) { .notice-editor { grid-template-columns: 160px 1fr; align-items: start; padding: var(--s7); } .notice-editor > :not(label):not(select), .notice-editor > label:has(textarea), .notice-editor > label:has(> input[type="checkbox"]) { grid-column: 1 / -1; } }
.footer-admin { margin-top: var(--s2); font-size: 11px; }
.footer-admin a, .site-footer a[href*="admin"] { font-size: 11px; color: rgba(255, 255, 255, .3); }

/* ══ 움직임 (움직임 줄이기 설정이면 아래 전부 꺼짐) ══ */
@media (prefers-reduced-motion: no-preference) {
  /* 첫 화면 칸 전체 떠오르기는 줄 단위 움직임으로 바꿈 */
  main > .hero-rich:first-child .wrap { animation: none; }
  .orb:nth-child(1) { animation: orb-a 22s ease-in-out infinite alternate; }
  .orb:nth-child(2) { animation: orb-b 28s ease-in-out infinite alternate; }
  .orb:nth-child(3) { animation: orb-c 18s ease-in-out infinite alternate; }
  .hero-bg::before { animation: lines-flow 30s linear infinite; }
  .page-hero::before { animation: orb-a 20s ease-in-out infinite alternate; }
  .hero-media.tilt::after { animation: shine 7s ease-in-out 1.2s infinite; }

  /* 제목 줄마다 차례로 + 금색 밑줄 그리기 */
  .hero-rich h1 .line { display: block; animation: line-up .9s var(--ease) both; }
  .hero-rich h1 .line:nth-child(1) { animation-delay: .10s; }
  .hero-rich h1 .line:nth-child(2) { animation-delay: .24s; }
  .hero-rich h1 .line:nth-child(3) { animation-delay: .38s; }
  .hero-rich h1 .line:nth-child(4) { animation-delay: .52s; }
  .hero-rich h1::after { content: ""; display: block; width: 88px; height: 2px; margin-top: var(--s5); background: linear-gradient(90deg, var(--c-accent), rgba(201, 162, 75, .2)); transform-origin: left; animation: draw-x 1s var(--ease) .7s both; }
  .hero-rich .eyebrow { animation: fade-up .8s var(--ease) both; }
  .hero-rich .lead { animation: fade-up .9s var(--ease) .5s both; }
  .hero-rich .hero-actions { animation: fade-up .9s var(--ease) .65s both; }
  .hero-rich .hero-media { animation: zoom-in 1.2s var(--ease) .2s both; }
  .hero-rich .quick { animation: fade-up .8s var(--ease) both; }
  .hero-rich .quick:nth-child(1) { animation-delay: .8s; }
  .hero-rich .quick:nth-child(2) { animation-delay: .9s; }
  .hero-rich .quick:nth-child(3) { animation-delay: 1s; }
  .page-hero h1 { animation: line-up .9s var(--ease) .1s both; }
  .page-hero .lead { animation: fade-up .9s var(--ease) .3s both; }

  /* .reveal 종류 */
  .reveal.r-left { transform: translateX(-36px); }
  .reveal.r-right { transform: translateX(36px); }
  .reveal.r-zoom { transform: scale(.94); }
  .reveal.is-in { transform: none; }

  /* 학교·차량 칩: 끝없이 흐르는 띠 */
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee-track { display: flex; flex-wrap: nowrap; width: max-content; animation: marquee 36s linear infinite; }
  .marquee-track > *, .marquee-track > ul > * { flex: none; margin-right: var(--s2); }
  .marquee-track > ul { display: flex; flex-wrap: nowrap; gap: 0; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }

  /* 수능 막대: 왼쪽부터 차오르기 */
  .timeline > * { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease); }
  .reveal:not(.is-in) .timeline > *, .timeline.reveal:not(.is-in) > * { clip-path: inset(0 100% 0 0); }
  .timeline > :nth-child(2) { transition-delay: .45s; }
  .timeline > :nth-child(3) { transition-delay: .7s; }
  .timeline > :nth-child(1) { transition-delay: .2s; }

  /* 단계: 흐름선 그리기 + 번호 차례로 켜짐 */
  :is(.steps, .naesin-steps) > li:nth-child(1) { --n: 0; } :is(.steps, .naesin-steps) > li:nth-child(2) { --n: 1; }
  :is(.steps, .naesin-steps) > li:nth-child(3) { --n: 2; } :is(.steps, .naesin-steps) > li:nth-child(4) { --n: 3; }
  :is(.steps, .naesin-steps) > li:nth-child(5) { --n: 4; } :is(.steps, .naesin-steps) > li:nth-child(6) { --n: 5; }
  :is(.steps, .naesin-steps) .step-num { transition: opacity .5s, transform .6s cubic-bezier(.3, 1.5, .5, 1), background-color .4s; transition-delay: calc(var(--n, 0) * .16s + .25s); }
  :is(.reveal:not(.is-in) :is(.steps, .naesin-steps), :is(.steps, .naesin-steps).reveal:not(.is-in)) .step-num { opacity: .2; transform: scale(.6); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .steps .step::after { width: 100%; transform-origin: left; transition: transform .9s var(--ease); transition-delay: calc(var(--n, 0) * .16s); }
  :is(.reveal:not(.is-in) .steps, .steps.reveal:not(.is-in)) .step::after { transform: scaleX(0); }
  .naesin-steps > li::before { transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(var(--n, 0) * .16s + .2s); }
  .naesin-steps > li:not(:last-child)::after { transform-origin: left; transition: transform .5s var(--ease); transition-delay: calc(var(--n, 0) * .16s + .35s); }
  :is(.reveal:not(.is-in) .naesin-steps, .naesin-steps.reveal:not(.is-in)) > li::before { transform: scale(0); }
  :is(.reveal:not(.is-in) .naesin-steps, .naesin-steps.reveal:not(.is-in)) > li:not(:last-child)::after { transform: scaleX(0); }
}
/* 움직임 없을 때: 흐르는 띠는 그냥 줄바꿈 목록, 복제본 숨김 */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .marquee-track > ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .marquee-track > [aria-hidden="true"], .marquee-track [aria-hidden="true"] { display: none; }
  .tilt { transform: none !important; }
}
.school-chips > .marquee { min-width: 0; }
@media (min-width: 1200px) { .school-chips > .marquee { grid-column: 2; grid-row: 1 / span 3; } }

@keyframes orb-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-14vmax, 8vmax, 0) scale(1.15); } }
@keyframes orb-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(18vmax, -10vmax, 0) scale(.9); } }
@keyframes orb-c { from { transform: translate3d(0, 0, 0) scale(.9); } to { transform: translate3d(-10vmax, -14vmax, 0) scale(1.1); } }
@keyframes lines-flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(60px, 0, 0); } }
@keyframes shine { 0%, 70% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes line-up { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes gold-flash { 0% { text-shadow: none; } 35% { text-shadow: 0 0 18px rgba(233, 180, 85, .75); color: var(--c-accent); } 100% { text-shadow: none; } }

/* ── ⑤ 상담 신청 현황 판 (제목만 · 이름·번호 없음) ── */
.consult-board { background: #fff; border-top: 2px solid var(--c-primary); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.consult-board > h3 { padding: var(--s4) var(--s5) var(--s2); font-size: var(--fs-lg); }
.cb-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--s1) var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.cb-item:last-child { border-bottom: 0; }
.cb-lock { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-sky); color: var(--c-muted); }
.cb-lock svg { width: 14px; height: 14px; }
.cb-lock:empty { background: var(--c-sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236B7280' stroke-width='1.6'%3E%3Crect x='2.5' y='6.5' width='9' height='6' rx='1.2'/%3E%3Cpath d='M4.5 6.5V4.5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") no-repeat center; }
.cb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--c-ink); }
.cb-state { justify-self: end; padding: 2px var(--s3); border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; background: var(--c-accent-soft); color: var(--c-accent-deep); }
.cb-state.is-done, .cb-state.st-done, .cb-item.is-done .cb-state, .cb-state[data-state="done"] { background: #E3F3F2; color: var(--c-elem); }
.cb-item time { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--c-faint); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .cb-item { grid-template-columns: 28px 1fr auto 96px; padding: var(--s4) var(--s6); }
  .cb-item time { grid-column: 4; text-align: right; }
}

/* ── ⑥ 한 화면씩 넘어가기 (fullpage-lite.js, PC·패드 1024+, 켜지면 html 또는 body 에 .fp-on) ── */
@media (min-width: 1024px) {
  :is(html.fp-on, body.fp-on) main > section:not(.stats-band-wrap) { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--head-h)); }
  :is(html.fp-on, body.fp-on) main > section > .wrap { flex: none; }
}
.fp-dots { position: fixed; right: var(--s5); top: 50%; z-index: 45; display: grid; gap: 14px; padding: var(--s3) 6px; transform: translateY(-50%); }
.fp-dot { position: relative; display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(20, 33, 61, .22); transition: background-color .3s, transform .3s var(--ease); }
.fp-dot:hover, .fp-dot:focus-visible { background: var(--c-primary); transform: scale(1.2); }
.fp-dot[aria-current] { background: var(--c-accent); }
.fp-focus { position: absolute; left: 50%; top: 0; width: 20px; height: 20px; margin: -5px 0 0 -10px; border: 1.5px solid var(--c-accent); border-radius: 50%; pointer-events: none; transition: transform .9s cubic-bezier(.16, 1, .3, 1), top .9s cubic-bezier(.16, 1, .3, 1); }
.fp-label {
  position: absolute; right: calc(100% + 14px); top: 50%; padding: 4px var(--s3); border-radius: var(--radius);
  background: var(--c-primary); color: #fff; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translate(8px, -50%); pointer-events: none; transition: opacity .25s, transform .25s var(--ease);
}
.fp-dot:hover .fp-label, .fp-dot:focus-visible .fp-label { opacity: 1; transform: translate(0, -50%); }
.fp-next {
  position: fixed; left: 50%; bottom: var(--s5); z-index: 44; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s2) var(--s4); transform: translateX(-50%); background: none; border: 0; font: inherit; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
  color: var(--c-muted); cursor: pointer; transition: color .3s, opacity .3s;
}
.fp-next::after { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.fp-next:hover { color: var(--c-accent-deep); }
.fp-next[hidden] { display: none; }
.fp-hint { position: absolute; left: 50%; bottom: var(--s6); z-index: 2; display: grid; justify-items: center; gap: var(--s2); transform: translateX(-50%); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); pointer-events: none; }
.fp-hint::after { content: ""; width: 1px; height: 36px; background: linear-gradient(var(--c-accent), transparent); }
/* 남색 칸 위에서 밝게 */
body.fp-dark .fp-dot { background: rgba(255, 255, 255, .35); }
body.fp-dark .fp-dot:hover { background: #fff; }
body.fp-dark .fp-dot[aria-current] { background: var(--c-accent); }
body.fp-dark .fp-label { background: #fff; color: var(--c-primary); }
body.fp-dark .fp-next { color: rgba(255, 255, 255, .7); }
body.fp-dark .fp-next:hover { color: var(--c-accent); }
@media (max-width: 1023px) { .fp-dots, .fp-next, .fp-hint { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .cb-item.is-new { animation: cb-in .7s var(--ease) both; }
  .fp-hint { animation: hint-bob 2.2s ease-in-out infinite; }
  .fp-next::after { animation: next-bob 2s ease-in-out infinite; }
  /* 칸에 들어올 때 차례로: 홀수 칸 아래에서, 짝수 칸 왼쪽에서 (0.08초씩) */
  :is(html.fp-on, body.fp-on) main > section:not(.fp-in):not(:first-child) :is(.sec-head > *, .wrap > :not(.sec-head) > *) { opacity: 0; }
  main > section.fp-in:not(:first-child) :is(.sec-head > *, .wrap > :not(.sec-head) > *) { animation: fp-up .9s cubic-bezier(.16, 1, .3, 1) both; }
  main > section.fp-in:not(:first-child):nth-of-type(even) :is(.sec-head > *, .wrap > :not(.sec-head) > *) { animation-name: fp-left; }
  main > section.fp-in .sec-head > :nth-child(2) { animation-delay: .08s; }
  main > section.fp-in .sec-head > :nth-child(3) { animation-delay: .16s; }
  main > section.fp-in .wrap > :not(.sec-head) > :nth-child(1) { animation-delay: .24s; }
  main > section.fp-in .wrap > :not(.sec-head) > :nth-child(2) { animation-delay: .32s; }
  main > section.fp-in .wrap > :not(.sec-head) > :nth-child(3) { animation-delay: .40s; }
  main > section.fp-in .wrap > :not(.sec-head) > :nth-child(4) { animation-delay: .48s; }
  main > section.fp-in .wrap > :not(.sec-head) > :nth-child(5) { animation-delay: .56s; }
  main > section.fp-in .wrap > :not(.sec-head) > :nth-child(6) { animation-delay: .64s; }
  main > section.fp-in .wrap > :not(.sec-head) > :nth-child(n+7) { animation-delay: .72s; }
}
@keyframes cb-in { from { opacity: 0; transform: translateY(-12px); background-color: var(--c-accent-soft); } to { opacity: 1; transform: none; background-color: transparent; } }
@keyframes hint-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@keyframes next-bob { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(4px) rotate(45deg); } }
@keyframes fp-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fp-left { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }

/* ───── 움직임은 아주 조금 ───── */
@media (prefers-reduced-motion: no-preference) {
  main > section:first-child .wrap { animation: rise .6s var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 인쇄 */
@media print {
  .site-header, .fab-consult, .bottom-bar, .division-nav, .cta-band, .consult { display: none !important; }
  body { padding: 0; } .sec { padding: 24px 0; }
}

/* 내신 분석 자료실 (naesin.html · naesin.js · 홈 .sec-naesin-home) — 스킬 center-naesin-archive */
/* 홈: 학교 7개 가로 띠 */
.sec-naesin-home { padding-top: var(--s7); }
.naesin-band { margin-inline: calc(var(--gutter) * -1); }
.nb-track { display: flex; gap: var(--s4); overflow-x: auto; padding: var(--s2) var(--gutter) var(--s5); scroll-snap-type: x mandatory; scrollbar-width: thin; }
.nb-track > li { flex: 0 0 min(78vw, 280px); scroll-snap-align: start; }
.nb-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s2); height: 100%; padding: var(--s5) var(--s5) var(--s4);
  background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-accent); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.nb-card:hover, .nb-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-up); border-color: var(--c-accent); }
.nb-tag { align-self: flex-start; padding: 2px var(--s3); border-radius: 999px; background: var(--c-high); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.nb-card strong { font-size: var(--fs-xl); color: var(--c-ink); letter-spacing: -.03em; }
.nb-sum { font-size: var(--fs-sm); color: var(--c-text); line-height: 1.55; }
.nb-stat { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-muted); }
.nb-stat b { margin-right: var(--s1); font-size: var(--fs-lg); color: var(--c-accent-deep); font-variant-numeric: tabular-nums; }
.nb-go { font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); }
.nb-go::after { content: " →"; transition: margin .2s; }
.nb-card:hover .nb-go::after { margin-left: 4px; }
@media (min-width: 768px) { .naesin-band { margin-inline: 0; } .nb-track { padding-inline: 0; } .nb-track > li { flex-basis: 260px; } }
@media (min-width: 1200px) {
  .nb-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); overflow: visible; padding-bottom: 0; }
  .nb-track > li { flex: none; }
  .nb-card { padding: var(--s5) var(--s4) var(--s4); }
  .nb-card strong { font-size: var(--fs-lg); }
  .nb-sum { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* 홈 학교 칩이 링크가 됨 */
.school-chips li.has-link { padding: 0; }
.school-chips li.has-link::before { display: none; }
.school-chips li.has-link a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4); border-radius: inherit; }
.school-chips li.has-link a::before { content: ""; width: 6px; height: 6px; margin-right: var(--s2); border-radius: 50%; background: var(--c-accent); }
.school-chips li.has-link:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* 자료실 쪽: 고르기 칩 */
.nx-tools { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.nx-grades, .nx-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.nx-grades .chip { min-height: 32px; font-size: var(--fs-xs); }
.nx-grades .chip:disabled { cursor: default; opacity: .55; }
.nx-grades small { margin-left: var(--s1); font-size: 11px; font-weight: 400; }
@media (max-width: 767px) { .nx-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; } .nx-chips > * { flex: none; } }

/* 학교 카드 격자 */
.nx-grid { display: grid; gap: var(--s4); }
@media (min-width: 560px) { .nx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nx-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
@media (min-width: 1200px) { .nx-grid { grid-template-columns: repeat(4, 1fr); } }
.nx-card {
  display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow); cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s, background-color .25s;
}
.nx-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); border-color: var(--c-accent); }
.nx-card.is-on { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary), var(--shadow-up); background: var(--c-tint); }
.nx-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.nx-card-top strong { font-size: var(--fs-xl); color: var(--c-ink); letter-spacing: -.03em; }
.nx-grade { flex: none; padding: 2px var(--s3); border-radius: 999px; background: var(--c-high); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.nx-card-sum { font-size: var(--fs-sm); line-height: 1.55; color: var(--c-text); }
.nx-stat { display: flex; align-items: baseline; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--c-line); }
.nx-stat b { flex: none; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; color: var(--c-accent-deep); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.nx-stat span { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.4; }
.nx-card-tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
.nx-card-tags span { padding: 2px var(--s2); border-radius: 4px; background: var(--c-cream); color: var(--c-accent-deep); font-size: var(--fs-xs); font-weight: 600; }
.nx-go { margin-top: auto; font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); }
.nx-go::after { content: " →"; }
.nx-card.is-on .nx-go::after { content: " ↓"; }

/* 비율 막대(카드 작은 막대 · 상세 큰 막대) */
.nx-mini, .nx-mix { display: grid; gap: 6px; }
.nx-bar-label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.nx-bar { display: flex; overflow: hidden; height: 10px; border-radius: 999px; background: var(--c-line); }
.nx-bar .seg { display: block; min-width: 4px; }
.nx-bar .seg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nx-bar .s0 { background: var(--c-primary); }
.nx-bar .s1 { background: var(--c-accent); }
.nx-bar .s2 { background: var(--c-elem); }
.nx-bar-cap { font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.nx-mini { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s2); }
.nx-mini .nx-bar-cap { grid-column: 1 / -1; }
.nx-mix { margin-top: var(--s4); }
.nx-mix .nx-bar { height: 28px; border-radius: 6px; }
.nx-mix .nx-bar .seg { position: relative; display: flex; align-items: center; padding-inline: var(--s3); }
.nx-mix .nx-bar .seg span { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: var(--fs-xs); font-weight: 700; color: #fff; }
.nx-mix .nx-bar .s1 span { color: var(--c-primary-dark); }
.nx-mix .nx-bar-label { font-size: var(--fs-sm); color: var(--c-ink); }
@media (prefers-reduced-motion: no-preference) {
  .nx-card.is-in .nx-bar .seg, .nx-detail.nx-open .nx-bar .seg { animation: nx-grow .9s var(--ease) both; transform-origin: left; }
  .nx-card.is-in .nx-bar .s1, .nx-detail.nx-open .nx-bar .s1 { animation-delay: .15s; }
  .nx-detail.nx-open .nx-types i { animation: nx-grow .9s var(--ease) both; transform-origin: left; }
  .nx-detail.nx-open { animation: nx-open .5s var(--ease) both; }
}
@keyframes nx-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes nx-open { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 상세 */
.nx-detail { margin-top: var(--s7); padding: var(--s6) var(--s5); background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-up); scroll-margin-top: calc(var(--head-h) + 16px); }
.nx-detail:focus { outline: none; }
.nx-detail[hidden] { display: none; }
.nx-head { display: grid; gap: var(--s3); padding-bottom: var(--s5); border-bottom: 1px solid var(--c-line); }
.nx-head h3 { font-size: var(--fs-2xl); letter-spacing: -.035em; }
.nx-sum { font-size: var(--fs-lg); color: var(--c-ink); line-height: 1.5; }
.nx-tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.nx-tags li { padding: 4px var(--s3); border-radius: 999px; background: var(--c-cream); border: 1px solid rgba(201, 162, 75, .3); color: var(--c-accent-deep); font-size: var(--fs-xs); font-weight: 700; }
.nx-meta { font-size: var(--fs-xs); color: var(--c-faint); }
.nx-facts { display: grid; grid-template-columns: 96px 1fr; margin-top: var(--s5); }
.nx-facts dt, .nx-facts dd { padding: var(--s3) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.nx-facts dt { font-weight: 600; color: var(--c-muted); }
.nx-figs { display: grid; gap: var(--s5); margin-top: var(--s5); }
.nx-fig { padding: var(--s5); background: var(--c-sky); border-radius: var(--radius-lg); }
.nx-fig h4, .nx-box h4 { font-size: var(--fs-md); color: var(--c-ink); }
.nx-fig h4::before, .nx-box h4::before { content: ""; display: inline-block; width: 16px; height: 2px; margin: 0 var(--s2) 5px 0; background: var(--c-accent); vertical-align: middle; }
.nx-types { display: grid; gap: var(--s2); margin-top: var(--s4); }
.nx-types li { display: grid; grid-template-columns: 7.5em 1fr 2em; align-items: center; gap: var(--s3); font-size: var(--fs-sm); }
.nx-type-name { color: var(--c-text); }
.nx-type-bar { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .9); overflow: hidden; }
.nx-type-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c-primary); }
.nx-types b { text-align: right; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.nx-boxes { display: grid; gap: var(--s4); margin-top: var(--s5); }
.nx-box { padding: var(--s5); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; }
.nx-box ul, .nx-box ol { display: grid; gap: var(--s2); margin-top: var(--s3); }
.nx-box li { position: relative; padding-left: var(--s5); font-size: var(--fs-sm); line-height: 1.65; }
.nx-box ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.nx-box ol { counter-reset: nx; }
.nx-box ol li { counter-increment: nx; }
.nx-box ol li::before { content: counter(nx); position: absolute; left: 0; top: .15em; width: 18px; height: 18px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.nx-box.box-killer { background: var(--c-cream); border-color: rgba(201, 162, 75, .35); }
.nx-box.box-killer li::before { background: var(--c-err); }
.nx-box.box-academy { background: var(--gold-lines), linear-gradient(160deg, var(--c-primary), var(--c-primary-dark)); border: 0; }
.nx-box.box-academy h4 { color: #fff; }
.nx-box.box-academy li { color: rgba(255, 255, 255, .85); }
.nx-box.box-academy ol li::before { background: var(--c-accent); color: var(--c-primary-dark); }
.nx-comment { margin: var(--s5) 0 0; padding: var(--s5); border-left: 3px solid var(--c-accent); background: var(--c-tint); border-radius: 0 var(--radius) var(--radius) 0; }
.nx-comment p { font-size: var(--fs-sm); color: var(--c-ink); }
.nx-comment p + p { margin-top: var(--s2); }
.nx-comment .nx-comment-h { margin-bottom: var(--s2); font-size: var(--fs-xs); font-weight: 700; color: var(--c-accent-deep); }
.nx-note { margin-top: var(--s5); font-size: var(--fs-xs); color: var(--c-faint); }
.nx-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
@media (max-width: 559px) { .nx-actions .btn { width: 100%; } .nx-types li { grid-template-columns: 6.5em 1fr 1.5em; gap: var(--s2); } }
.nx-empty { padding: var(--s6); background: var(--c-tint); border-radius: var(--radius-lg); color: var(--c-muted); }
@media (min-width: 768px) {
  .nx-detail { padding: var(--s7) var(--s6); }
  .nx-boxes { grid-template-columns: repeat(2, 1fr); }
  .nx-box.box-academy { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .nx-detail { padding: var(--s8) var(--s7); }
  .nx-head { grid-template-columns: 1fr auto; column-gap: var(--s7); }
  .nx-head > :not(.nx-tags) { grid-column: 1; }
  .nx-head .nx-tags { grid-column: 2; grid-row: 1 / span 4; align-self: center; flex-direction: column; align-items: flex-end; }
  .nx-figs { grid-template-columns: 1fr 1fr; }
  .nx-figs > .nx-fig:only-child { grid-column: 1 / -1; }
  .nx-boxes { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .nx-boxes > .box-trend { grid-column: span 2; }
}
@media print { .nx-tools, .nx-grid, .nx-actions { display: none !important; } .nx-detail { box-shadow: none; border: 0; } }

/* 커리큘럼 지도 (courses #roadmap · 홈 #rm-strip, curriculum.js) — 스킬 center-homepage references/curriculum.md
   관 색: 초등 청록 --c-elem · 중등 남보라 --c-mid · 고등 남색 --c-high. PC·패드 = 가로 사다리(왼쪽 낮고 오른쪽 높게), 휴대폰 = 세로 타임라인 */
.rm-elem { --k: var(--c-elem); }
.rm-mid { --k: var(--c-mid); }
.rm-high { --k: var(--c-high); }
.rm-bands, .rm-strip-bands { display: grid; grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); gap: var(--s2); }
.rm-band { padding-top: var(--s2); border-top: 3px solid var(--k); font-size: var(--fs-xs); font-weight: 700; color: var(--k); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-steps { list-style: none; margin: 0; padding: 0; }
.rm-btn { display: flex; width: 100%; text-align: left; font: inherit; color: var(--c-ink); background: #fff; border: 1px solid var(--c-line); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.rm-btn:hover { border-color: var(--k); }
.rm-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--k) 35%, transparent); outline-offset: 2px; }
.rm-grade { font-weight: 700; color: var(--k); font-variant-numeric: tabular-nums; }
.rm-stage { font-size: var(--fs-xs); line-height: 1.4; color: var(--c-muted); }
.rm-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--k); }
.rm-step.is-on .rm-btn { background: var(--k); border-color: var(--k); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--k) 28%, transparent); }
.rm-step.is-on .rm-grade, .rm-step.is-on .rm-stage { color: #fff; }
.rm-step.is-on .rm-dot { background: var(--c-accent); border-color: #fff; }
.rm-divname { display: none; }
.rm-move { margin-top: var(--s5); font-size: var(--fs-sm); color: var(--c-muted); }
.rm-move::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--s2) 2px 0; border-radius: 50%; background: var(--c-accent); vertical-align: middle; }

/* 상세 */
.rm-detail { margin-top: var(--s5); padding: var(--s6) var(--s5); background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--k, var(--c-primary)); border-radius: var(--radius-lg); box-shadow: var(--shadow); scroll-margin-top: calc(var(--head-h) + 16px); }
.rm-detail[hidden] { display: none; }
.rm-detail:focus { outline: none; }
.rm-d-head { display: grid; gap: var(--s2); padding-bottom: var(--s4); border-bottom: 1px solid var(--c-line); }
.rm-d-tag { justify-self: start; padding: 3px var(--s3); border-radius: 999px; background: color-mix(in srgb, var(--k) 12%, #fff); color: var(--k); font-size: var(--fs-xs); font-weight: 700; }
.rm-d-head h3 { font-size: var(--fs-xl); letter-spacing: -.03em; }
.rm-d-goal { font-size: var(--fs-md); color: var(--c-ink); }
.rm-d-body { display: grid; gap: var(--s4); margin-top: var(--s4); }
.rm-d-box h4 { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; }
.rm-d-points { display: grid; gap: var(--s2); margin-top: var(--s3); }
.rm-d-points li { position: relative; padding-left: var(--s5); font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text); }
.rm-d-points li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--k); transform: rotate(45deg); }
.rm-d-classes { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.rm-d-classes li { padding: 5px var(--s3); border: 1px solid color-mix(in srgb, var(--k) 35%, #fff); border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink); background: color-mix(in srgb, var(--k) 5%, #fff); }
.rm-d-next { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--c-cream); font-size: var(--fs-sm); color: var(--c-ink); }
.rm-d-next b { margin-right: var(--s2); color: var(--c-accent-deep); }
.rm-d-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
@media (prefers-reduced-motion: no-preference) {
  .rm-detail.rm-open { animation: rm-open .45s var(--ease) both; }
  .rm-step.is-on .rm-dot { animation: rm-pulse 1.6s var(--ease) infinite; }
}
@keyframes rm-open { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rm-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 55%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }

/* 휴대폰: 세로 타임라인 (왼쪽 세로줄 + 점) */
@media (max-width: 767px) {
  .rm-bands { display: none; }
  .rm-steps { position: relative; display: grid; gap: var(--s2); padding-left: 22px; }
  .rm-steps::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(var(--c-elem), var(--c-mid) 60%, var(--c-high)); opacity: .35; }
  .rm-step.rm-first:not(:first-child) { margin-top: var(--s4); }
  .rm-divname { display: block; margin: 0 0 var(--s2) -22px; padding-left: 22px; font-size: var(--fs-sm); font-weight: 700; color: var(--k); }
  .rm-divname small { margin-left: var(--s1); font-size: var(--fs-xs); font-weight: 500; color: var(--c-faint); }
  .rm-btn { position: relative; align-items: baseline; gap: var(--s3); min-height: 48px; padding: var(--s3) var(--s4); border-radius: var(--radius); }
  .rm-dot { position: absolute; left: -21px; top: 50%; margin-top: -5px; }
  .rm-grade { flex: none; width: 2.4em; font-size: var(--fs-md); }
  .rm-stage { font-size: var(--fs-sm); color: var(--c-text); }
  .rm-step .rm-detail { margin-top: var(--s2); padding: var(--s5) var(--s4); box-shadow: none; }
  .rm-d-actions .btn { width: 100%; }
}
/* 패드·PC: 가로 사다리 — 칸마다 조금씩 높아짐(--i) */
@media (min-width: 768px) {
  .rm-bands { margin-bottom: var(--s3); }
  .rm-steps { display: grid; grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); gap: var(--s2); align-items: end; }
  .rm-step { position: relative; }
  .rm-btn { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--s2); min-height: calc(76px + var(--i, 0) * 7px); padding: var(--s3) var(--s2); border-radius: var(--radius) var(--radius) 2px 2px; border-top: 3px solid var(--k); background: color-mix(in srgb, var(--k) 4%, #fff); }
  .rm-dot { order: -1; margin-bottom: auto; }
  .rm-grade { font-size: var(--fs-lg); }
  .rm-stage { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rm-btn:hover { transform: translateY(-3px); }
  .rm-step.is-on .rm-btn { transform: translateY(-6px); }
  .rm-step.is-on::after { content: ""; position: absolute; left: 50%; bottom: -14px; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--k); }
  .rm-detail { margin-top: var(--s6); padding: var(--s7) var(--s6); }
  .rm-d-body { grid-template-columns: 3fr 2fr; gap: var(--s6); }
}
@media (min-width: 1024px) {
  .rm-btn { min-height: calc(112px + var(--i, 0) * 9px); padding: var(--s3); }
  .rm-stage { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; word-break: keep-all; }
}
@media (min-width: 1200px) {
  .rm-btn { min-height: calc(124px + var(--i, 0) * 10px); padding: var(--s4) var(--s3); }
  .rm-stage { font-size: .8125rem; }
  .rm-detail { padding: var(--s8) var(--s7); }
  .rm-d-head { grid-template-columns: auto 1fr; column-gap: var(--s4); align-items: center; }
  .rm-d-head .rm-d-goal { grid-column: 1 / -1; }
}

/* 홈: 관 3개 위 12칸 띠 (COURSES 칸 안, 한 줄) */
.rm-strip { margin-bottom: var(--s6); }
.rm-strip-bands { margin-bottom: var(--s2); }
.rm-strip-bands .rm-band { padding-top: 6px; border-top-width: 2px; font-size: 12px; }
.rm-strip-cells { display: grid; grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.rm-cell { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 6px; background: color-mix(in srgb, var(--k) 10%, #fff); color: var(--k); font-size: 12px; font-weight: 700; letter-spacing: -.02em; transition: background-color .2s, color .2s, transform .2s; }
.rm-cell:hover, .rm-cell:focus-visible { background: var(--k); color: #fff; transform: translateY(-2px); }
@media (min-width: 768px) { .rm-cell { height: 44px; font-size: var(--fs-sm); } .rm-strip-cells { gap: var(--s2); } .rm-strip-bands .rm-band { font-size: var(--fs-xs); } }
@media (prefers-reduced-motion: no-preference) {
  .rm-strip.reveal:not(.is-in) .rm-cell { opacity: 0; transform: translateY(10px); }
  .rm-strip.reveal .rm-cell { transition: opacity .5s var(--ease), transform .5s var(--ease), background-color .2s, color .2s; }
}
@media print { .rm-steps, .rm-bands, .rm-d-actions { display: none !important; } .rm-detail { box-shadow: none; } }

/* 자주 묻는 질문 (faq.html #faq-root · 홈 #faq-mini, faq.js) — 스킬 center-homepage references/faq.md */
.fq-tools { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
.fq-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fq-search { display: block; }
.fq-input { max-width: none; }
.fq-count { margin-bottom: var(--s3); font-size: var(--fs-xs); color: var(--c-faint); }
.fq-list { border-top: 1px solid var(--c-ink); }
.fq-item { border-bottom: 1px solid var(--c-line); scroll-margin-top: calc(var(--head-h) + 16px); }
.fq-item[hidden] { display: none; }
.fq-q { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s1); cursor: pointer; list-style: none; }
.fq-q::-webkit-details-marker { display: none; }
.fq-q:hover .fq-text { color: var(--c-primary); }
.fq-q:focus-visible { outline: 3px solid var(--c-primary-soft); outline-offset: -3px; border-radius: var(--radius); }
.fq-cat { flex: none; padding: 3px var(--s2); border: 1px solid var(--c-line-strong); border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.fq-text { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); line-height: 1.5; }
.fq-text::before { content: "Q"; margin-right: var(--s2); font-weight: 700; color: var(--c-accent); }
.fq-mark { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-line-strong); transition: background-color .2s, border-color .2s, transform .3s var(--ease); }
.fq-mark::before, .fq-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: var(--c-ink); border-radius: 1px; transition: transform .3s var(--ease), background-color .2s; }
.fq-mark::after { transform: rotate(90deg); }
.fq-item[open] .fq-mark { background: var(--c-primary); border-color: var(--c-primary); transform: rotate(180deg); }
.fq-item[open] .fq-mark::before, .fq-item[open] .fq-mark::after { background: #fff; }
.fq-item[open] .fq-mark::after { transform: rotate(0deg); }
.fq-a { position: relative; margin: 0 0 var(--s5); padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 18px); background: var(--c-tint); border-radius: var(--radius); }
.fq-a::before { content: "A"; position: absolute; left: var(--s5); top: var(--s4); font-weight: 700; color: var(--c-primary); }
.fq-a p { font-size: var(--fs-sm); line-height: 1.75; color: var(--c-text); }
.fq-a p + p { margin-top: var(--s2); }
.fq-a .fq-more { margin-top: var(--s3); }
.fq-link { font-weight: 600; color: var(--c-primary); border-bottom: 1px solid var(--c-line-strong); padding-bottom: 1px; }
.fq-link::after { content: " →"; }
.fq-link:hover { border-color: var(--c-primary); }
.fq-empty { padding: var(--s6); background: var(--c-tint); border-radius: var(--radius-lg); color: var(--c-muted); text-align: center; }
.fq-list + .fq-empty { margin-top: var(--s4); }
@media (prefers-reduced-motion: no-preference) { .fq-item[open] .fq-a { animation: fq-in .35s var(--ease) both; } }
@keyframes fq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .fq-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
  .fq-chips::-webkit-scrollbar { display: none; }
  .fq-chips > * { flex: none; }
  .fq-q { flex-wrap: wrap; row-gap: var(--s2); padding: var(--s4) 0; }
  .fq-text { order: 1; flex-basis: calc(100% - 44px); }
  .fq-mark { order: 2; }
  .fq-a { padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 18px); }
  .fq-a::before { left: var(--s4); }
}
@media (min-width: 768px) { .fq-tools { grid-template-columns: 1fr minmax(240px, 320px); align-items: center; } }
@media (min-width: 1200px) { .fq-list:not(.is-mini) .fq-a { margin-left: 104px; } }
/* 홈 짧은 판: 4개, PC 2열 */
.fq-list.is-mini { border-top: 0; display: grid; gap: var(--s3); }
.fq-list.is-mini .fq-item { padding: 0 var(--s5); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); transition: border-color .2s; }
.fq-list.is-mini .fq-item[open] { border-color: var(--c-primary); }
.fq-list.is-mini .fq-a { margin-inline: calc(var(--s3) - var(--s5)); }
@media (min-width: 1024px) { .fq-list.is-mini { grid-template-columns: 1fr 1fr; align-items: start; } }

/* 머리 메뉴 9개(자주 묻는 질문 더함) — 1024~1439 에서 좁게 */
@media (min-width: 1024px) and (max-width: 1279px) { .gnb a, .gnb.is-open a { padding: var(--s2) 10px; font-size: .875rem; } .site-header .wrap { gap: var(--s3); } }
@media (min-width: 1200px) and (max-width: 1439px) { .brand-slogan { display: none; } }
@media (min-width: 1280px) and (max-width: 1439px) { .gnb a, .gnb.is-open a { padding: var(--s2) var(--s3); } }

/* 교육 뉴스 (edunews.html #edunews-root · 홈 #en-mini, edunews.js · 원장방 #panel-e) — 스킬 center-homepage references/edunews.md */
.en-tools { margin-bottom: var(--s4); }
.en-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.en-count { margin-bottom: var(--s3); font-size: var(--fs-xs); color: var(--c-faint); }
.en-list { display: grid; gap: var(--s3); }
.en-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--head-h) + 16px); transition: border-color .2s, box-shadow .2s; }
.en-item[hidden] { display: none; }
.en-item:hover { border-color: var(--c-line-strong); }
.en-item[open] { border-color: var(--c-primary); box-shadow: var(--shadow); }
.en-item.is-pin { border-left: 3px solid var(--c-accent); }
.en-head { position: relative; display: grid; gap: var(--s2); padding: var(--s5) calc(var(--s5) + 40px) var(--s5) var(--s5); cursor: pointer; list-style: none; }
.en-head::-webkit-details-marker { display: none; }
.en-head:focus-visible { outline: 3px solid var(--c-primary-soft); outline-offset: -3px; border-radius: var(--radius-lg); }
.en-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: var(--fs-xs); color: var(--c-muted); }
.en-cat { padding: 2px var(--s2); background: var(--c-primary-soft); border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--c-primary); white-space: nowrap; }
.en-pin { padding: 2px var(--s2); background: var(--c-accent-soft); border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--c-accent-deep); }
.en-source { color: var(--c-faint); }
.en-title { font-size: var(--fs-md); font-weight: 700; line-height: 1.45; color: var(--c-ink); letter-spacing: -.01em; }
.en-head:hover .en-title { color: var(--c-primary); }
.en-lead { font-size: var(--fs-sm); line-height: 1.65; color: var(--c-text); }
.en-item:not([open]) .en-lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.en-mark { position: absolute; right: var(--s5); top: var(--s5); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-line-strong); transition: background-color .2s, border-color .2s, transform .3s var(--ease); }
.en-mark::before, .en-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: var(--c-ink); border-radius: 1px; transition: transform .3s var(--ease), background-color .2s; }
.en-mark::after { transform: rotate(90deg); }
.en-item[open] .en-mark { background: var(--c-primary); border-color: var(--c-primary); transform: rotate(180deg); }
.en-item[open] .en-mark::before, .en-item[open] .en-mark::after { background: #fff; }
.en-item[open] .en-mark::after { transform: rotate(0deg); }
.en-body { margin: 0 var(--s5) var(--s5); padding: var(--s4) var(--s5); background: var(--c-tint); border-radius: var(--radius); }
.en-sum { display: grid; gap: var(--s2); }
.en-sum li { position: relative; padding-left: var(--s4); font-size: var(--fs-sm); line-height: 1.7; color: var(--c-text); }
.en-sum li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }
.en-src { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-muted); }
.en-body > .en-src:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.en-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4); background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-weight: 700; color: var(--c-primary); }
.en-link::after { content: "\2197"; margin-left: 6px; }
.en-link:hover { border-color: var(--c-primary); }
.en-empty { padding: var(--s6); background: var(--c-tint); border-radius: var(--radius-lg); color: var(--c-muted); text-align: center; }
.en-note { margin-top: var(--s5); font-size: var(--fs-xs); color: var(--c-faint); }
@media (prefers-reduced-motion: no-preference) { .en-item[open] .en-body { animation: fq-in .35s var(--ease) both; } }
@media (max-width: 767px) {
  .en-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
  .en-chips::-webkit-scrollbar { display: none; }
  .en-chips > * { flex: none; }
  .en-head { padding: var(--s4) calc(var(--s4) + 36px) var(--s4) var(--s4); }
  .en-mark { right: var(--s4); top: var(--s4); }
  .en-body { margin: 0 var(--s3) var(--s3); padding: var(--s4); }
  .en-src { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1200px) { .en-list { max-width: 960px; } }
/* 홈 짧은 판: 3개(패드·PC 3열) */
.en-mini-list { display: grid; gap: var(--s3); }
.en-mini-card { display: grid; align-content: start; gap: var(--s2); padding: var(--s5); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.en-mini-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.en-mini-card .en-lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--c-muted); }
.en-mini-card .en-source { margin-top: var(--s2); font-size: var(--fs-xs); }
.en-mini-card .en-source::after { content: " \00B7  \C790\C138\D788  \2192"; color: var(--c-primary); font-weight: 600; }
@media (min-width: 768px) { .en-mini-list { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .en-mini-card:hover { transform: none; } }
/* 원장방 「교육 뉴스」 탭 */
.admin-edunews > .note { margin: var(--s2) 0 var(--s4); font-size: var(--fs-sm); color: var(--c-muted); }
.an-count { margin-bottom: var(--s3); font-size: var(--fs-xs); color: var(--c-faint); }
.admin-edunews-list { border-top: 1px solid var(--c-ink); }
.admin-edunews-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--c-line); }
.admin-edunews-list .bi-title { flex: 1 1 240px; font-weight: 600; color: var(--c-ink); }
.admin-edunews-list .en-src-mini { font-size: var(--fs-xs); color: var(--c-faint); }
.admin-edunews-list .an-ctl { display: flex; gap: var(--s2); }
.admin-edunews-list .btn { min-height: 34px; padding: 0 var(--s3); font-size: var(--fs-xs); }
.admin-edunews-list li.is-hidden .bi-title, .admin-edunews-list li.is-hidden .bi-cat { opacity: .45; }
.en-hidden-tag { display: inline-block; margin-left: var(--s2); padding: 1px 6px; border-radius: 4px; background: var(--c-err-bg); color: var(--c-err); font-size: 11px; font-weight: 700; vertical-align: middle; }

/* 2단 메뉴 (center.json menu 의 4번째 칸 = 자식 메뉴, app.js navHtml) — 「소식」 아래 블로그 소식 · 학원 공지 · 교육 뉴스 */
.gnb-group { position: relative; }
.gnb-sub-toggle { position: relative; width: 36px; height: 36px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--c-ink); }
.gnb-sub-toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -6px 0 0 -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease), margin .25s var(--ease); }
.gnb-group.is-open > .gnb-sub-toggle::before { transform: rotate(225deg); margin-top: -2px; }
.gnb-sub-toggle:focus-visible { outline: 3px solid var(--c-primary-soft); border-radius: var(--radius); }
/* 휴대폰·패드(열린 세로 메뉴): 부모 줄 + 펼침 단추, 펼치면 자식이 들여 써짐 */
@media (max-width: 1023px) {
  .gnb.is-open .gnb-group { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--c-line); }
  .gnb.is-open .gnb-group > .gnb-parent { border-bottom: 0; }
  .gnb.is-open .gnb-group:last-child { border-bottom: 0; }
  .gnb-sub { display: none; grid-column: 1 / -1; padding: 0 0 var(--s3) var(--s4); margin-left: 2px; border-left: 2px solid var(--c-accent-soft); }
  .gnb-group.is-open > .gnb-sub { display: grid; }
  .gnb.is-open .gnb-sub a { padding: var(--s3) 0; border-bottom: 0; font-weight: 500; color: var(--c-text); }
  .gnb.is-open .gnb-sub a.is-current { color: var(--c-primary); font-weight: 700; }
  .gnb.is-open .gnb-group.is-current > .gnb-parent::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--s3) 2px 0; background: var(--c-accent); vertical-align: middle; }
}
/* PC: 올리거나 초점이 가면 아래로 펼침 */
@media (min-width: 1024px) {
  .gnb-group { display: flex; align-items: center; }
  .gnb .gnb-group > .gnb-parent { padding-right: 2px; }
  .gnb-sub-toggle { width: 22px; height: 32px; margin-right: var(--s1); color: var(--c-muted); }
  .gnb-sub-toggle::before { width: 6px; height: 6px; margin: -5px 0 0 -3px; }
  .gnb-sub { position: absolute; left: 0; top: calc(100% + (var(--head-h) - 40px) / 2); z-index: 60; display: grid; min-width: 180px; padding: var(--s2); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-up);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s var(--ease), visibility 0s .18s; }
  .gnb-sub::before { content: ""; position: absolute; left: 0; right: 0; top: calc((var(--head-h) - 40px) / -2 - 2px); height: calc((var(--head-h) - 40px) / 2 + 2px); }
  .gnb-group:hover > .gnb-sub, .gnb-group:focus-within > .gnb-sub, .gnb-group.is-open > .gnb-sub { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s var(--ease), visibility 0s; }
  .gnb-group:hover > .gnb-sub-toggle::before, .gnb-group:focus-within > .gnb-sub-toggle::before { transform: rotate(225deg); margin-top: -1px; }
  .gnb .gnb-sub a, .gnb.is-open .gnb-sub a { padding: var(--s3) var(--s4); border-radius: var(--radius); font-size: var(--fs-sm); white-space: nowrap; }
  .gnb .gnb-sub a:hover { background: var(--c-tint); color: var(--c-primary); }
  .gnb .gnb-sub a.is-current { background: var(--c-primary-soft); color: var(--c-primary); }
  .gnb .gnb-sub a.is-current::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gnb-sub, .gnb-sub-toggle::before { transition: none !important; } }

/* 명예의 전당 (hall.html #hall-root · 홈 #hall-mini, hall.js) — 스킬 center-homepage references/hall-of-fame.md. 학생 이름 없음, 대학 로고 그림 대신 글자 배지 */
.hf-years { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.hf-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-bottom: var(--s4); background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; }
.hf-stat { padding: var(--s5) var(--s4); background: #fff; }
.hf-num { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--c-accent-deep); font-variant-numeric: tabular-nums; }
.hf-label { margin-top: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.hf-sub { margin-top: var(--s1); font-size: var(--fs-xs); color: var(--c-faint); line-height: 1.5; }
@media (min-width: 1024px) { .hf-band { grid-template-columns: repeat(4, 1fr); } .hf-band:has(> .hf-stat:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }
.hf-note { margin-bottom: var(--s6); font-size: var(--fs-sm); color: var(--c-muted); }
.hf-h { display: flex; align-items: baseline; gap: var(--s2); margin: var(--s7) 0 var(--s4); font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); }
.hf-h-n { font-size: var(--fs-xs); font-weight: 500; color: var(--c-faint); }
.hf-uni { display: grid; gap: var(--s3); }
@media (min-width: 768px) { .hf-uni { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .hf-uni { grid-template-columns: repeat(3, 1fr); } }
.hf-uni-card { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); transition: border-color .2s, box-shadow .2s; }
.hf-uni-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow); }
.hf-badge { flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 4px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: .8125rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-align: center; word-break: keep-all; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c-accent) 70%, transparent); }
.hf-uni-card.is-hs .hf-badge { background: var(--c-accent-soft); color: var(--c-accent-deep); box-shadow: inset 0 0 0 2px var(--c-accent); }
.hf-uni-body { flex: 1; min-width: 0; }
.hf-uni-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.hf-kind-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--c-faint); }
.hf-count { padding: 2px 10px; border-radius: 999px; background: var(--c-primary-soft); font-size: var(--fs-xs); font-weight: 800; color: var(--c-primary); }
.hf-uni-name { display: block; margin: 2px 0 var(--s2); font-size: var(--fs-md); font-weight: 700; color: var(--c-ink); line-height: 1.35; }
.hf-uni-body li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); padding: 5px 0; border-top: 1px dashed var(--c-line); font-size: var(--fs-sm); color: var(--c-text); }
.hf-field { padding: 0 6px; border-radius: 4px; background: var(--c-tint); font-size: 11px; font-weight: 600; color: var(--c-muted); }
.hf-from { margin-left: auto; font-size: var(--fs-xs); color: var(--c-faint); }
.hf-table-wrap { overflow-x: auto; border-top: 2px solid var(--c-ink); }
.hf-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hf-table th, .hf-table td { padding: var(--s3); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.hf-table thead th { background: var(--c-tint); font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); white-space: nowrap; }
.hf-table td strong { color: var(--c-ink); }
.hf-table td a { color: var(--c-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hf-table td[data-th="수"] { white-space: nowrap; font-weight: 700; color: var(--c-ink); }
@media (max-width: 767px) {
  .hf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hf-table, .hf-table tbody, .hf-table tr, .hf-table td { display: block; width: 100%; }
  .hf-table tr { padding: var(--s3) 0; border-bottom: 1px solid var(--c-line); }
  .hf-table td { display: grid; grid-template-columns: 76px 1fr; gap: var(--s2); padding: 3px 0; border: 0; }
  .hf-table td::before { content: attr(data-th); font-size: var(--fs-xs); color: var(--c-faint); }
  .hf-from { margin-left: 0; width: 100%; }
}
.hf-empty { padding: var(--s6); background: var(--c-tint); border-radius: var(--radius-lg); color: var(--c-muted); text-align: center; }
.hf-consent { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
/* 홈: 숫자 띠 한 줄(남색 띠) */
.sec-hall-home { padding-block: var(--s6); background: var(--c-primary); }
.hf-strip { display: grid; gap: var(--s4); align-items: center; color: #fff; }
.hf-strip-y { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: color-mix(in srgb, #fff 70%, transparent); }
.hf-strip-t { font-size: var(--fs-lg); font-weight: 800; color: #fff; letter-spacing: -.01em; }
.hf-strip ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s4); }
.hf-strip li { display: grid; gap: 2px; padding-left: var(--s3); border-left: 2px solid var(--c-accent); }
.hf-strip li b { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 800; line-height: 1.15; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.hf-strip li span { font-size: var(--fs-xs); color: color-mix(in srgb, #fff 82%, transparent); line-height: 1.45; }
.hf-strip-go { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border: 1px solid color-mix(in srgb, #fff 45%, transparent); border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 700; color: #fff; white-space: nowrap; transition: background-color .2s; }
.hf-strip-go::after { content: "\2192"; margin-left: 6px; }
.hf-strip-go:hover { background: color-mix(in srgb, #fff 12%, transparent); }
@media (min-width: 1024px) { .hf-strip { grid-template-columns: 150px 1fr auto; gap: var(--s6); } .hf-strip ul { grid-template-columns: repeat(4, 1fr); } }

/* 학사 일정 (calendar.html #cal-root · 홈 #cal-mini, calendar.js) — 스킬 center-homepage references/academic-calendar.md. 분류 색 = --cc */
.cal-c-open { --cc: var(--c-primary); --cc-soft: var(--c-primary-soft); }
.cal-c-special { --cc: var(--c-accent-deep); --cc-soft: var(--c-accent-soft); }
.cal-c-info { --cc: var(--c-elem); --cc-soft: color-mix(in srgb, var(--c-elem) 12%, #fff); }
.cal-c-exam { --cc: var(--c-mid); --cc-soft: color-mix(in srgb, var(--c-mid) 11%, #fff); }
.cal-c-closed { --cc: var(--c-err); --cc-soft: var(--c-err-bg); }
.cal-bar { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-bottom: var(--s4); }
.cal-title { min-width: 9ch; font-size: var(--fs-xl); font-weight: 800; text-align: center; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.cal-prev, .cal-next { position: relative; width: 44px; height: 44px; padding: 0; background: #fff; border: 1px solid var(--c-line-strong); border-radius: 50%; cursor: pointer; transition: border-color .2s, background-color .2s; }
.cal-prev::before, .cal-next::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-left: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); transform: translate(-30%, -50%) rotate(45deg); }
.cal-next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.cal-prev:hover:not(:disabled), .cal-next:hover:not(:disabled) { border-color: var(--c-primary); background: var(--c-tint); }
.cal-prev:disabled, .cal-next:disabled { opacity: .35; cursor: default; }
.cal-prev:focus-visible, .cal-next:focus-visible, .cal-months button:focus-visible { outline: 3px solid var(--c-primary-soft); outline-offset: 2px; }
.cal-months { display: flex; gap: 6px; margin-bottom: var(--s4); overflow-x: auto; padding: 2px; scrollbar-width: none; }
.cal-months::-webkit-scrollbar { display: none; }
.cal-months button { flex: 1 0 auto; display: grid; justify-items: center; min-width: 52px; min-height: 44px; padding: 4px 8px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.cal-m-y { font-size: 10px; font-weight: 500; color: var(--c-faint); }
.cal-months button:hover { border-color: var(--c-primary); }
.cal-months button[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.cal-months button[aria-pressed="true"] .cal-m-y { color: color-mix(in srgb, #fff 70%, transparent); }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.cal-legend .chip { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .chip[aria-pressed="true"] { background: var(--cc-soft); border-color: var(--cc); color: var(--c-ink); }
.cal-legend .chip[aria-pressed="false"] { background: #fff; color: var(--c-faint); text-decoration: line-through; }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc); }
.cal-none { font-size: 11px; font-weight: 500; color: var(--c-faint); }
/* PC·패드: 7열 격자 */
.cal-grid-wrap { display: none; }
.cal-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.cal-table th { padding: var(--s2); background: var(--c-tint); border-bottom: 1px solid var(--c-line); font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); }
.cal-table td { height: 104px; padding: 6px; border: 1px solid var(--c-line); vertical-align: top; overflow: hidden; }
.cal-table .is-sun, .cal-table th.is-sun { color: var(--c-err); }
.cal-table .is-sat, .cal-table th.is-sat { color: var(--c-mid); }
.cal-table td.is-out { background: var(--c-tint); }
.cal-day { display: inline-grid; place-items: center; min-width: 26px; height: 26px; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-cell.is-today .cal-day { background: var(--c-accent); border-radius: 50%; color: #fff; }
.cal-cell.is-today { background: var(--c-accent-soft); }
.cal-evs { display: grid; gap: 3px; margin-top: 2px; }
.cal-ev { position: relative; padding: 2px 6px 2px 14px; border-radius: 4px; background: var(--cc-soft); font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev::before { content: ""; position: absolute; left: 5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--cc); }
.cal-ev-more { font-size: 11px; color: var(--c-faint); }
.cal-ranges { display: grid; gap: 2px; margin: 4px -7px 0; }
.cal-rng { display: block; min-height: 16px; padding: 0 6px; background: var(--cc-soft); border-top: 2px solid var(--cc); font-size: 11px; font-weight: 600; line-height: 14px; color: var(--cc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-rng.is-start { margin-left: 6px; border-top-left-radius: 4px; }
.cal-rng.is-end { margin-right: 6px; border-top-right-radius: 4px; }
@media (min-width: 768px) { .cal-grid-wrap { display: block; margin-bottom: var(--s6); } }
@media (min-width: 1200px) { .cal-table td { height: 118px; } }
/* 이달 목록(휴대폰은 이것만) */
.cal-list-h { margin-bottom: var(--s3); font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); }
.cal-list { display: grid; gap: var(--s3); }
.cal-li { display: grid; grid-template-columns: 1fr; gap: var(--s2); padding: var(--s4) var(--s4) var(--s4) var(--s5); background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--cc); border-radius: var(--radius); }
.cal-li.is-past { opacity: .6; }
.cal-li.is-check { border-left-style: dashed; }
.cal-li-date { font-size: var(--fs-sm); font-weight: 800; color: var(--cc); font-variant-numeric: tabular-nums; }
.cal-li-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: 4px; }
.cal-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--cc-soft); font-size: 11px; font-weight: 700; color: var(--cc); }
.cal-past { font-size: 11px; color: var(--c-faint); }
.cal-li h4 { font-size: var(--fs-md); font-weight: 700; color: var(--c-ink); line-height: 1.4; }
.cal-li-meta { margin-top: 2px; font-size: var(--fs-sm); color: var(--c-text); }
.cal-li-note { margin-top: 2px; font-size: var(--fs-xs); color: var(--c-muted); }
.cal-src { display: inline-block; margin-top: var(--s2); font-size: var(--fs-xs); font-weight: 600; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .cal-li { grid-template-columns: 170px 1fr; gap: var(--s4); } }
.cal-empty { padding: var(--s6); background: var(--c-tint); border-radius: var(--radius-lg); color: var(--c-muted); text-align: center; }
.cal-closed { margin-top: var(--s5); font-size: var(--fs-xs); color: var(--c-muted); }
/* 홈 「다가오는 일정」 3개 */
.cal-mini-list { display: grid; gap: var(--s3); }
@media (min-width: 768px) { .cal-mini-list { grid-template-columns: repeat(3, 1fr); } }
.cal-mini-card { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4); background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--cc); border-radius: var(--radius-lg); color: inherit; transition: box-shadow .2s, transform .2s var(--ease); }
.cal-mini-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.cal-mini-date { flex: none; display: grid; justify-items: center; width: 56px; padding: 6px 0; border-radius: var(--radius); background: var(--cc-soft); color: var(--cc); }
.cm-m { font-size: 11px; font-weight: 700; }
.cm-d { font-size: 1.625rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cm-w { font-size: 11px; }
.cal-mini-body { display: grid; gap: 4px; min-width: 0; }
.cal-mini-body .cal-tag { justify-self: start; }
.cal-mini-body strong { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); line-height: 1.4; }
.cal-mini-meta { font-size: var(--fs-xs); color: var(--c-muted); }
@media (prefers-reduced-motion: reduce) { .cal-mini-card:hover { transform: none; } }
/* 머리 메뉴: 2단 묶음이 3개(학원 소개 · 시간표 · 소식)가 되어 1024~1199 에서 조금 더 좁게 */
@media (min-width: 1024px) and (max-width: 1199px) { .gnb a, .gnb.is-open a { padding: var(--s2) 7px; font-size: .84rem; } .gnb-sub-toggle { width: 18px; margin-right: 2px; } .site-header .btn { padding: 0 var(--s4); } }

/* 학원 둘러보기 (tour.html #tour-root · 홈 #tour-mini, tour.js) — 스킬 center-homepage references/tour.md. 사진 없는 자리는 회색 .ph, center.json photosTemp 면 「임시 사진」 */
.tour-chips { display: flex; gap: var(--s2); margin-bottom: var(--s4); overflow-x: auto; padding: 2px; scrollbar-width: none; }
.tour-chips::-webkit-scrollbar { display: none; }
.tour-chips .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
.tour-chip-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--c-tint); font-size: 11px; font-weight: 700; color: var(--c-muted); }
.tour-chips .chip[aria-pressed="true"] .tour-chip-n { background: rgba(255, 255, 255, .2); color: #fff; }
.tour-stage { position: relative; border-radius: var(--radius-lg); background: var(--c-primary-dark); overflow: hidden; outline: none; }
.tour-stage:focus-visible { box-shadow: 0 0 0 3px var(--c-accent); }
.tour-frame { position: relative; aspect-ratio: 4 / 3; touch-action: pan-y; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.tour-frame.is-empty { cursor: default; }
.tour-img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; animation: tourIn .35s var(--ease); }
@keyframes tourIn { from { opacity: .3; } to { opacity: 1; } }
.tour-frame .ph, .tour-lb .ph { width: 100%; height: 100%; border-radius: 0; }
.tour-frame .ph span { font-size: var(--fs-sm); }
.tour-temp { position: absolute; left: var(--s3); top: var(--s3); padding: 2px 8px; border-radius: 999px; background: rgba(13, 22, 41, .62); font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .02em; pointer-events: none; }
.tour-zoom-hint { position: absolute; right: var(--s3); bottom: var(--s3); padding: 3px 10px; border-radius: 999px; background: rgba(13, 22, 41, .55); font-size: 11px; font-weight: 600; color: #fff; pointer-events: none; }
.tour-prev, .tour-next { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); box-shadow: var(--shadow); cursor: pointer; transition: background-color .2s; }
.tour-prev { left: var(--s3); } .tour-next { right: var(--s3); }
.tour-prev::before, .tour-next::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-left: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); transform: translate(-30%, -50%) rotate(45deg); }
.tour-next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.tour-prev:hover, .tour-next:hover { background: #fff; }
.tour-prev:focus-visible, .tour-next:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.tour-count { position: absolute; left: 50%; bottom: var(--s3); transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: rgba(13, 22, 41, .55); font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
.tour-cap { display: grid; gap: 4px; padding: var(--s4) 0 var(--s3); }
.tour-zone-name { font-size: var(--fs-xs); font-weight: 700; color: var(--c-accent-deep); letter-spacing: .02em; }
.tour-cap-t { font-size: var(--fs-lg); font-weight: 800; color: var(--c-ink); line-height: 1.35; }
.tour-desc { font-size: var(--fs-sm); color: var(--c-text); }
.tour-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin: var(--s2) 0 var(--s3); }
.tour-dots button { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.tour-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c-line-strong); transition: width .2s, background-color .2s, margin .2s; }
.tour-dots button[aria-current="true"]::before { width: 20px; margin-left: -10px; border-radius: 4px; background: var(--c-primary); }
.tour-thumbs { display: flex; gap: var(--s2); overflow-x: auto; padding: 2px 2px var(--s2); scroll-snap-type: x proximity; scrollbar-width: thin; }
.tour-thumbs li { flex: none; scroll-snap-align: center; }
.tour-thumb { position: relative; display: block; width: 92px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: var(--radius); background: var(--c-tint); overflow: hidden; cursor: pointer; opacity: .72; transition: opacity .2s, border-color .2s; }
.tour-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tour-thumb-ph { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--c-primary-soft), var(--c-tint)); font-size: 11px; font-weight: 600; color: var(--c-faint); }
.tour-thumb:hover { opacity: 1; }
.tour-thumb[aria-current="true"] { border-color: var(--c-accent); opacity: 1; }
.tour-thumb:focus-visible { outline: 3px solid var(--c-primary-soft); outline-offset: 1px; }
.tour-note { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--c-muted); }
.tour-empty { padding: var(--s6); background: var(--c-tint); border-radius: var(--radius-lg); color: var(--c-muted); text-align: center; }
@media (min-width: 768px) {
  .tour-frame { aspect-ratio: 16 / 10; }
  .tour-thumb { width: 120px; }
  .tour-prev { left: var(--s4); } .tour-next { right: var(--s4); }
}
@media (min-width: 1200px) {
  .tour { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "chips chips" "stage cap" "dots cap" "thumbs thumbs" "note note"; column-gap: var(--s6); }
  .tour-chips { grid-area: chips; } .tour-stage { grid-area: stage; } .tour-dots { grid-area: dots; } .tour-thumbs { grid-area: thumbs; } .tour-note { grid-area: note; }
  .tour-cap { grid-area: cap; align-self: start; padding: var(--s5); background: var(--c-tint); border-radius: var(--radius-lg); }
  .tour-cap-t { font-size: var(--fs-xl); }
}
/* 전체 화면 보기 */
.tour-lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 56px var(--s4) 64px; background: rgba(8, 12, 22, .94); }
.tour-lb[hidden] { display: none; }
.tour-lb-body { position: relative; display: grid; place-items: center; width: 100%; height: 100%; touch-action: pan-y; }
.tour-lb-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); }
.tour-lb-body .tour-temp { left: 50%; top: 0; transform: translateX(-50%); }
.tour-lb-close { position: absolute; right: var(--s3); top: var(--s3); width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: transparent; cursor: pointer; }
.tour-lb-close::before, .tour-lb-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: #fff; transform: rotate(45deg); }
.tour-lb-close::after { transform: rotate(-45deg); }
.tour-lb-close:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.tour-lb-cap { position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s4); font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); text-align: center; }
body.tour-lb-open { overflow: hidden; }
/* 홈: 오시는 길 칸 안 사진 띠 */
.tour-mini { margin-bottom: var(--s6); }
.tour-mini-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.tour-mini-head h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--c-ink); }
.tour-mini-head a { font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.tour-mini-list { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); scrollbar-width: none; }
.tour-mini-list::-webkit-scrollbar { display: none; }
.tour-mini-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-tint); scroll-snap-align: start; }
.tour-mini-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tour-mini-card:hover img { transform: scale(1.04); }
.tour-mini-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s5) var(--s4) var(--s3); background: linear-gradient(transparent, rgba(13, 22, 41, .72)); font-size: var(--fs-sm); font-weight: 700; color: #fff; }
@media (min-width: 768px) { .tour-mini-list { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } }
.about-tour { margin-top: var(--s4); }
@media (prefers-reduced-motion: reduce) { .tour-img { animation: none; } .tour-mini-card:hover img { transform: none; } }

/* 레벨 테스트 예약 (contact #leveltest · leveltest.html #lt-root, leveltest.js · 원장방 #panel-l) — 스킬 center-homepage references/leveltest-booking.md. 숫자 적는 칸 없음: 날짜 띠 가로 밀기 · 시간 바퀴 위아래 굴리기 */
.leveltest.has-lt { align-items: start; }
.leveltest.has-lt .lt-info { display: grid; gap: var(--s4); align-content: start; }
.lt-info-note { font-size: var(--fs-xs); color: var(--c-muted); }
@media (min-width: 1200px) { .leveltest.has-lt { grid-template-columns: 4fr 7fr; align-items: start; } }
.lt { display: grid; gap: var(--s5); min-width: 0; }
.lt-loading, .lt-none { padding: var(--s5); background: var(--c-tint); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--c-muted); text-align: center; }
.lt-pickers { display: grid; gap: var(--s5); min-width: 0; }
.lt-step { min-width: 0; }
.lt-h { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-md); font-weight: 800; color: var(--c-ink); }
.lt-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-primary); font-size: 12px; color: #fff; }
.lt-wheel-day { font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent-deep); }
.lt-hint { margin: 2px 0 var(--s3); font-size: var(--fs-xs); color: var(--c-muted); }
/* 날짜 띠 */
.lt-dates-wrap { position: relative; display: flex; align-items: center; gap: var(--s1); }
.lt-dates { flex: 1; display: flex; gap: var(--s2); overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; outline: none; overscroll-behavior-x: contain; }
.lt-dates::-webkit-scrollbar { display: none; }
.lt-dates.is-drag { cursor: grabbing; scroll-snap-type: none; }
.lt-dates:focus-visible { box-shadow: 0 0 0 3px var(--c-primary-soft); border-radius: var(--radius); }
.lt-date { flex: none; display: grid; justify-items: center; align-content: start; gap: 1px; width: 66px; min-height: 92px; padding: 6px 4px 8px; background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg); font: inherit; color: var(--c-ink); cursor: pointer; scroll-snap-align: center; user-select: none; -webkit-user-select: none; transition: border-color .2s, background-color .2s, color .2s, transform .2s var(--ease); }
.lt-dm { min-height: 15px; font-size: 11px; font-weight: 700; color: var(--c-accent-deep); }
.lt-dd { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lt-dw { font-size: 12px; font-weight: 600; color: var(--c-muted); }
.lt-ds { margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--c-elem); white-space: nowrap; }
.lt-date.is-sun .lt-dw { color: var(--c-err); } .lt-date.is-sat .lt-dw { color: var(--c-mid); }
.lt-date:hover:not(.is-off) { border-color: var(--c-primary); }
.lt-date[aria-selected="true"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; transform: translateY(-2px); }
.lt-date[aria-selected="true"] .lt-dw, .lt-date[aria-selected="true"] .lt-ds { color: rgba(255, 255, 255, .82); }
.lt-date[aria-selected="true"] .lt-dm { color: var(--c-accent); }
.lt-date.is-off { background: var(--c-tint); border-style: dashed; border-color: var(--c-line); color: var(--c-faint); cursor: not-allowed; }
.lt-date.is-off .lt-ds, .lt-date.is-off .lt-dw { color: var(--c-faint); }
.lt-nav { flex: none; position: relative; display: none; width: 36px; height: 36px; padding: 0; background: #fff; border: 1px solid var(--c-line-strong); border-radius: 50%; cursor: pointer; }
.lt-nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-left: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); transform: translate(-30%, -50%) rotate(45deg); }
.lt-nav-next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.lt-nav:hover { border-color: var(--c-primary); }
@media (min-width: 768px) and (pointer: fine) { .lt-nav { display: block; } }
/* 시간 바퀴: 줄 높이 44px(leveltest.js 는 실제 높이를 잼), 가운데 띠 = 고른 시간 */
.lt-wheel-box { position: relative; max-width: 420px; height: 220px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.lt-wheel { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; outline: none; cursor: grab;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.lt-wheel::-webkit-scrollbar { display: none; }
.lt-wheel.is-drag { cursor: grabbing; scroll-snap-type: none; }
.lt-wheel-box:focus-within { box-shadow: 0 0 0 3px var(--c-primary-soft); border-color: var(--c-primary); }
.lt-pad { height: 88px; }
.lt-time { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: 44px; padding: 0 var(--s5); scroll-snap-align: center; font-size: var(--fs-md); color: var(--c-text); cursor: pointer; user-select: none; -webkit-user-select: none; }
.lt-tt { font-weight: 600; font-variant-numeric: tabular-nums; }
.lt-ts { font-size: var(--fs-xs); font-weight: 600; color: var(--c-elem); }
.lt-time[aria-selected="true"] { color: #fff; }
.lt-time[aria-selected="true"] .lt-tt { font-weight: 800; }
.lt-time[aria-selected="true"] .lt-ts { color: rgba(255, 255, 255, .85); }
.lt-time.is-off { color: var(--c-faint); cursor: not-allowed; }
.lt-time.is-off .lt-tt { text-decoration: line-through; text-decoration-color: var(--c-line-strong); }
.lt-time.is-off .lt-ts { color: var(--c-faint); }
.lt-wheel-band { position: absolute; left: 6px; right: 6px; top: 50%; height: 44px; margin-top: -22px; border-radius: var(--radius); background: var(--c-primary); pointer-events: none; }
.lt-wheel-band::after { content: ""; position: absolute; right: -6px; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; border-right-color: var(--c-accent); }
/* 고른 것 · 폼 */
.lt-form.consult { max-width: none; padding: var(--s5); gap: var(--s4); }
.lt-pick { padding: var(--s3) var(--s4); background: var(--c-accent-soft); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--c-text); }
.lt-pick b { font-size: var(--fs-md); font-weight: 800; color: var(--c-ink); }
.lt-fields { display: grid; gap: var(--s4); }
@media (min-width: 768px) { .lt-fields { grid-template-columns: 1fr 1fr; } .lt-fields .field:first-child { grid-column: 1 / -1; max-width: 240px; } }
.lt-form button[type=submit]:disabled { opacity: .5; cursor: not-allowed; }
.lt-done { display: grid; justify-items: center; gap: var(--s3); padding: var(--s7) var(--s5); background: var(--c-tint); border-radius: var(--radius-lg); text-align: center; outline: none; }
.lt-done-mark { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--c-elem); }
.lt-done-mark::after { content: ""; position: absolute; left: 50%; top: 46%; width: 22px; height: 12px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: translate(-50%, -50%) rotate(-45deg); }
.lt-done-h { font-size: var(--fs-lg); font-weight: 800; color: var(--c-ink); }
.lt-done-act { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
@media (prefers-reduced-motion: reduce) { .lt-date { transition: none; } .lt-date[aria-selected="true"] { transform: none; } }
/* 원장방 「레벨 테스트」 탭 · 상담 목록 꼬리표 */
.status-chip.st-lt, .lt-tag { background-color: color-mix(in srgb, var(--c-mid) 11%, #fff); color: var(--c-mid); border-color: color-mix(in srgb, var(--c-mid) 35%, #fff); }
.lt-tag { display: inline-block; padding: 1px var(--s2); border: 1px solid; border-radius: 3px; font-size: 11px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.lt-row-note { display: block; margin-top: 4px; font-size: 11px; color: var(--c-faint); }
.consult-table tr.is-lt td { background: color-mix(in srgb, var(--c-mid) 4%, #fff); }
.admin-lt { display: grid; gap: var(--s5); }
.admin-lt h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--c-ink); }
.lta-days { display: grid; gap: var(--s3); }
@media (min-width: 768px) { .lta-days { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.lta-day { padding: var(--s4); background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-mid); border-radius: var(--radius); }
.lta-day h4 { margin-bottom: var(--s2); font-size: var(--fs-md); font-weight: 800; color: var(--c-ink); }
.lta-day h4 span { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.lta-day li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); }
.lta-day li time { min-width: 7.5em; font-weight: 700; color: var(--c-mid); font-variant-numeric: tabular-nums; }
.lta-day li .btn { min-height: 34px; margin-left: auto; padding: 0 var(--s3); font-size: var(--fs-xs); }
.lt-admin-slots { display: grid; gap: var(--s4); padding: var(--s5); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.lts-grid { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); gap: 2px 3px; max-width: 760px; touch-action: none; user-select: none; -webkit-user-select: none; }
.lts-wd { padding-bottom: 4px; font-size: var(--fs-xs); font-weight: 800; color: var(--c-ink); text-align: center; }
.lts-wd.is-sun { color: var(--c-err); } .lts-wd.is-sat { color: var(--c-mid); }
.lts-time { position: relative; top: -7px; font-size: 11px; color: var(--c-muted); white-space: nowrap; }
.lts-cell { height: 18px; padding: 0; border: 1px solid var(--c-line); border-radius: 3px; background: var(--c-tint); cursor: crosshair; }
.lts-cell[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); }
.lts-cell:hover { border-color: var(--c-accent); }
.lts-cell:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.lts-tools { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lts-tools .btn { min-height: 40px; }
.lts-lab { display: block; margin-bottom: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.lts-lab small { font-weight: 500; color: var(--c-muted); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; }
.stepper button { width: 44px; height: 44px; padding: 0; border: 0; background: var(--c-tint); font-size: 1.25rem; font-weight: 700; color: var(--c-ink); cursor: pointer; }
.stepper button:hover { background: var(--c-primary-soft); }
.stepper output { min-width: 64px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.lts-closed { display: flex; gap: 4px; overflow-x: auto; padding-bottom: var(--s2); }
.lts-day { flex: none; display: grid; justify-items: center; width: 52px; padding: 4px 0; background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font: inherit; font-size: 11px; color: var(--c-text); cursor: pointer; }
.lts-day span:first-child { font-size: 12px; font-weight: 700; color: var(--c-ink); }
.lts-day.is-sun span:last-child { color: var(--c-err); } .lts-day.is-sat span:last-child { color: var(--c-mid); }
.lts-day[aria-pressed="true"] { background: var(--c-err-bg); border-color: var(--c-err); }
.lts-day[aria-pressed="true"] span { color: var(--c-err); text-decoration: line-through; }
/* 머리 메뉴: 2단 묶음 4개(오시는 길·상담 더함) — 1024~1199 조금 더 좁게 */
@media (min-width: 1024px) and (max-width: 1199px) { .gnb a, .gnb.is-open a { padding: var(--s2) 6px; font-size: .82rem; } .gnb-sub-toggle { width: 16px; } }

/* ═════ 메인 2차 화려하게 (10-11 밤) ═════ */
/* 메인 2차 화려하게 (10-11 밤) — 메인(index)만. 남색·금색 틀 그대로 + 칸마다 포인트 색 + 칸마다 다른 움직임. home-fx.js · app.js home() 와 짝.
   숨기는 「들어오기 전」 모양은 모두 html.hfx(home-fx.js 가 붙임) + 움직임 줄이기 아님일 때만 → JS·파일이 없어도, 움직임 줄이기여도 내용은 다 보임.
   칸 불 켜짐 = section.is-lit(home-fx.js) 또는 section.fp-in(한 화면씩 넘기기·화면 찍기 도구가 붙임). 움직임은 transform·opacity 위주. */
.btn-pop { background: var(--c-pop1); color: var(--c-pop1-ink); border-color: transparent; font-weight: 700; }
.btn-pop:hover { background: #F08C74; }
@supports (color: color-mix(in srgb, red, blue)) { .btn-pop:hover { background: color-mix(in srgb, var(--c-pop1) 82%, #fff); } }
/* 관별 그라데이션(관 패널 · 학년 칩 · 레벨 테스트 카드에서 같이 씀) */
.dp-elem, .rm-elem, .lr-elem { --g: linear-gradient(135deg, #17706B, #3FC1B8); --k2: #5ED3CB; }
.dp-mid, .rm-mid, .lr-mid { --g: linear-gradient(135deg, #3B3F92, #8E92EA); --k2: #A9ACF2; }
.dp-high, .rm-high, .lr-high { --g: linear-gradient(135deg, #0D1629 0%, #2B3A66 62%, #9C7B33 130%); --k2: #E9C47A; }
@supports (color: color-mix(in srgb, red, blue)) {
  .dp-elem, .rm-elem, .lr-elem { --g: linear-gradient(135deg, color-mix(in srgb, var(--c-elem) 85%, #000), color-mix(in srgb, var(--c-elem) 55%, #fff)); --k2: color-mix(in srgb, var(--c-elem) 45%, #fff); }
  .dp-mid, .rm-mid, .lr-mid { --g: linear-gradient(135deg, color-mix(in srgb, var(--c-mid) 85%, #000), color-mix(in srgb, var(--c-mid) 55%, #fff)); --k2: color-mix(in srgb, var(--c-mid) 40%, #fff); }
  .dp-high, .rm-high, .lr-high { --g: linear-gradient(135deg, var(--c-primary-dark) 0%, color-mix(in srgb, var(--c-primary) 75%, #fff 25%) 62%, var(--c-accent-deep) 130%); --k2: color-mix(in srgb, var(--c-accent) 70%, #fff); }
}

/* ── 「다음: ○○」 알약 · 「스크롤」은 왼쪽 아래 세로 글자(겹치지 않게) ── */
.fp-next { flex-direction: row; gap: var(--s2); bottom: 18px; padding: 7px var(--s4) 8px; background: rgba(255, 255, 255, .94); border: 1px solid var(--c-line); border-radius: 999px; box-shadow: 0 6px 18px rgba(13, 22, 41, .12); color: var(--c-text); }
.fp-next svg { display: none; }
.fp-next::after { margin-top: -4px; }
.fp-next b { color: var(--c-ink); }
body.fp-dark .fp-next { background: rgba(13, 22, 41, .78); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8); }
body.fp-dark .fp-next b { color: #fff; }
.fp-hint { left: var(--s4); bottom: var(--s6); transform: none; writing-mode: vertical-rl; letter-spacing: .3em; }
:is(html.fp-on, body.fp-on) main > section { padding-bottom: max(var(--sec-y), 96px); }
:is(html.fp-on, body.fp-on) main > section.stats-band-wrap { padding-bottom: var(--s7); }

/* ── 첫 화면 큰 제목이 바뀜(h1.ht) — 가장 긴 문구 높이로 고정(겹쳐 쌓기) ── */
.hero-rich h1.ht .ht-stack { display: grid; }
.hero-rich h1.ht .ht-item { grid-area: 1 / 1; display: block; }
.hero-rich h1.ht .line { display: block; }
.hero-rich h1.ht .ht-item:not(.is-on):not(.is-out) { visibility: hidden; }

/* ── 10-2 명예의 전당: 무대 조명 + 벽 사진 + 올라오는 합격 카드 + 숫자 띠 ── */
.sec-hall-home { position: relative; overflow: hidden; padding-block: var(--s8); background-color: var(--c-primary-dark);
  background-image: radial-gradient(70% 55% at 50% 0%, rgba(201, 162, 75, .18), transparent 70%), linear-gradient(180deg, #0A1122 0%, var(--c-primary) 58%, #0E1830 100%); }
.sec-hall-home > .wrap { position: relative; z-index: 1; display: grid; gap: var(--s6); }
.hall-lights { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hall-lights span { position: absolute; top: -4%; width: 44%; height: 96%; transform-origin: 50% 0;
  background: conic-gradient(from 166deg at 50% 0%, transparent 0deg, rgba(246, 221, 160, .26) 14deg, rgba(246, 221, 160, .34) 14deg 14.5deg, rgba(246, 221, 160, .26) 15deg, transparent 28deg);
  -webkit-mask-image: linear-gradient(#000 10%, transparent 92%); mask-image: linear-gradient(#000 10%, transparent 92%); }
.hall-lights span:nth-child(1) { left: -4%; transform: rotate(-14deg); }
.hall-lights span:nth-child(2) { left: 28%; }
.hall-lights span:nth-child(3) { left: 60%; transform: rotate(14deg); }
.hall-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 26%; background: linear-gradient(100deg, transparent, rgba(255, 236, 190, .08) 45%, rgba(255, 236, 190, .14) 50%, rgba(255, 236, 190, .08) 55%, transparent); transform: translateX(-120%); }
.hall-show { display: grid; gap: var(--s5); align-items: center; }
.hall-wall { margin: 0; }
.hw-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: #0A1122; border: 1px solid rgba(201, 162, 75, .45); box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 0 6px rgba(201, 162, 75, .07); }
.hw-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.hw-blur { filter: blur(7px) saturate(.9) brightness(.85); transform: scale(1.08); }
.hw-sharp { clip-path: inset(0 0 58% 0); }
.hw-glow { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(10, 17, 34, .25) 60%, rgba(10, 17, 34, .7)), radial-gradient(60% 40% at 50% 26%, rgba(246, 221, 160, .22), transparent 70%); }
.hall-wall figcaption { margin-top: var(--s3); font-size: var(--fs-xs); color: rgba(255, 255, 255, .7); }
.hw-temp { display: inline-block; margin-left: var(--s2); padding: 1px var(--s2); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; font-size: 11px; color: rgba(255, 255, 255, .6); }
.hall-cards { display: grid; gap: var(--s3); }
.hc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font-size: var(--fs-sm); color: rgba(255, 255, 255, .7); }
.hc-y { font-size: var(--fs-lg); font-weight: 800; color: #fff; letter-spacing: -.02em; }
.hc-y::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 var(--s2) 3px 0; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); }
.hc-count { font-variant-numeric: tabular-nums; }
.hc-count b { font-size: var(--fs-lg); color: var(--c-accent); }
.hc-stack { display: grid; padding-bottom: 16px; }
.hc-card { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--s5); min-height: 148px; padding: var(--s5) var(--s6); border-radius: 16px;
  background: linear-gradient(135deg, #25335E, #172343); border: 1px solid rgba(201, 162, 75, .5); box-shadow: 0 22px 44px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  opacity: 0; visibility: hidden; transform: translateY(70%) scale(.96); transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .6s var(--ease), visibility 0s linear .8s; }
.hc-card.is-on { z-index: 2; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hc-card.is-next { z-index: 1; opacity: .4; visibility: visible; transform: translateY(16px) scale(.93); transition-delay: 0s; }
.hc-card.is-out { z-index: 3; opacity: 0; visibility: visible; transform: translateY(-45%) scale(.98); transition-delay: 0s, 0s, .8s; }
.hc-badge { flex: none; display: grid; place-items: center; width: 80px; height: 80px; padding: 6px; border-radius: 50%; text-align: center; line-height: 1.15;
  background: radial-gradient(circle at 30% 25%, #F8E3AE, var(--c-accent) 58%, var(--c-accent-deep)); color: var(--c-primary-dark); font-size: 15px; font-weight: 800; letter-spacing: -.04em;
  box-shadow: 0 0 0 4px rgba(201, 162, 75, .18), 0 0 30px rgba(233, 180, 85, .35); }
.hc-body { display: grid; gap: 2px; min-width: 0; }
.hc-kind { font-size: var(--fs-xs); font-weight: 700; color: var(--c-accent); letter-spacing: .04em; }
.hc-body strong { font-size: var(--fs-xl); color: #fff; letter-spacing: -.03em; }
.hc-detail { font-size: var(--fs-sm); font-weight: 600; color: rgba(255, 255, 255, .88); }
.hc-from { font-size: var(--fs-xs); color: rgba(255, 255, 255, .58); }
.sec-hall-home .hall-show + .hall-mini { padding-top: var(--s6); border-top: 1px solid rgba(201, 162, 75, .28); }
@media (min-width: 900px) { .hall-show { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); } .hc-card { min-height: 168px; padding: var(--s6) var(--s7); } .hc-badge { width: 92px; height: 92px; font-size: 16px; } }
@media (max-width: 479px) { .hc-card { gap: var(--s4); padding: var(--s4) var(--s5); } .hc-badge { width: 64px; height: 64px; font-size: 13px; } }

/* ── 10-3 초등관·중등관·고등관: 진한 그라데이션 바탕 + 관별 색 칩 + 빛 테 ── */
.sec-courses-home { position: relative; overflow: hidden; color: rgba(255, 255, 255, .8); background-color: var(--c-primary);
  background-image: radial-gradient(48% 60% at 88% 8%, rgba(201, 162, 75, .24), transparent 70%), radial-gradient(42% 55% at 4% 96%, rgba(63, 193, 184, .16), transparent 70%), var(--gold-lines), linear-gradient(150deg, var(--c-primary) 0%, #2A2F6E 100%); }
.sec-courses-home .sec-head h2 { color: #fff; }
.sec-courses-home .eyebrow { color: var(--c-accent); }
.sec-courses-home .sec-head p:not(.eyebrow) { color: rgba(255, 255, 255, .72); }
.sec-courses-home .rm-band { color: var(--k2); border-top-color: var(--k2); }
.sec-courses-home .rm-cell { background: var(--g); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 14px rgba(0, 0, 0, .18); }
.sec-courses-home .rm-high .rm-cell { box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .7), 0 6px 14px rgba(0, 0, 0, .2); }
.sec-courses-home .rm-cell:hover, .sec-courses-home .rm-cell:focus-visible { background: var(--g); color: #fff; transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 3px rgba(59, 167, 232, .45), 0 10px 26px rgba(0, 0, 0, .35); }
@supports (color: color-mix(in srgb, red, blue)) { .sec-courses-home .rm-cell:hover, .sec-courses-home .rm-cell:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 3px color-mix(in srgb, var(--c-pop2) 55%, transparent), 0 10px 26px rgba(0, 0, 0, .35); } }
.sec-courses-home .div-panel { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 22px 46px rgba(0, 0, 0, .28); }
.sec-courses-home .div-panel > :first-child { position: relative; overflow: hidden; background: var(--gold-lines), var(--g); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(201, 162, 75, .32); }
.sec-courses-home .div-panel > :first-child::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); transform: translateX(-140%); pointer-events: none; }
.sec-courses-home .dp-high > :first-child { box-shadow: inset 0 -3px 0 var(--c-accent), inset 0 0 0 1px rgba(201, 162, 75, .45); }
.sec-courses-home .div-panel ul { margin: var(--s4) var(--s4) 0; padding: var(--s4) var(--s5); background: rgba(255, 255, 255, .93); border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.sec-courses-home .div-panel > a:last-child { margin-top: auto; border-top-color: rgba(255, 255, 255, .14); color: #fff; }
.sec-courses-home .div-panel > a:last-child::after { color: var(--c-accent); }
.sec-courses-home .div-panel:hover > :first-child::after { transform: translateX(320%); transition: transform 1s var(--ease); }

/* ── 10-4 수능과 내신: 금빛 크림 바탕 + 180분 원형 시계 + 내려갈수록 색이 바뀌는 5단계 ── */
.sec-program-home { position: relative; background-color: var(--c-cream);
  background-image: radial-gradient(45% 60% at 0% 0%, rgba(233, 180, 85, .26), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgba(201, 162, 75, .22), transparent 70%), linear-gradient(160deg, #FFF8E6 0%, var(--c-cream) 45%, #F3E4BD 100%); }
.sec-program-home .feature-split > * { position: relative; border: 1px solid rgba(201, 162, 75, .4); box-shadow: 0 0 0 5px rgba(201, 162, 75, .08), var(--shadow-up); transition: box-shadow .3s var(--ease), border-color .3s; }
.sec-program-home .feature-split > :hover { border-color: var(--c-accent); box-shadow: 0 0 0 6px rgba(201, 162, 75, .16), 0 26px 50px rgba(13, 22, 41, .14); }
.sn-body { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s5); align-items: center; margin-top: var(--s5); }
.sn-clock { width: 148px; height: 148px; overflow: visible; }
.sn-bg { fill: none; stroke: var(--c-line); stroke-width: 18; }
.sn-arc { fill: none; stroke-width: 18; stroke-dasharray: var(--len) 180; stroke-dashoffset: var(--off); transform: rotate(-90deg); transform-origin: 80px 80px; }
.sn-a1 { stroke: var(--c-elem); } .sn-a2 { stroke: var(--c-mid); } .sn-a3 { stroke: var(--c-accent); }
.sn-num { font-size: 40px; font-weight: 800; fill: var(--c-primary); letter-spacing: -.04em; font-family: var(--f); }
.sn-unit { font-size: 14px; font-weight: 600; fill: var(--c-muted); font-family: var(--f); }
.sn-flow { display: grid; gap: var(--s2); }
.sn-flow li { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s3); padding: var(--s2) var(--s3); border-left: 3px solid var(--k); border-radius: 0 var(--radius) var(--radius) 0; background: rgba(255, 255, 255, .6); }
.sn-flow li b { grid-row: span 2; align-self: center; font-size: var(--fs-lg); color: var(--k); font-variant-numeric: tabular-nums; }
.sn-flow li span { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }
.sn-flow li small { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }
.sn-f1 { --k: var(--c-elem); } .sn-f2 { --k: var(--c-mid); } .sn-f3 { --k: var(--c-accent-deep); }
.f-suneung .timeline { margin-top: var(--s5); }
.f-suneung .timeline > * { min-height: 72px; }
@media (max-width: 559px) { .sn-body { grid-template-columns: 1fr; justify-items: center; } .sn-flow { width: 100%; } .sn-clock { width: 132px; height: 132px; } }
.sec-program-home .naesin-steps.mini > li { --k: var(--c-primary); margin-top: 6px; padding: var(--s3) var(--s4) var(--s3) 68px; border: 0; border-left: 4px solid var(--k); border-radius: 0 var(--radius) var(--radius) 0; background: #fff; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.sec-program-home .naesin-steps.mini > li .step-num { left: 14px; top: 50%; margin-top: -20px; background: var(--k); color: #fff; box-shadow: 0 4px 10px rgba(13, 22, 41, .18); }
.sec-program-home .naesin-steps.mini > li:nth-child(1) { --k: var(--c-elem); }
.sec-program-home .naesin-steps.mini > li:nth-child(2) { --k: #3586A0; }
.sec-program-home .naesin-steps.mini > li:nth-child(3) { --k: var(--c-mid); }
.sec-program-home .naesin-steps.mini > li:nth-child(4) { --k: #303A78; }
.sec-program-home .naesin-steps.mini > li:nth-child(5) { --k: var(--c-primary); }
.sec-program-home .naesin-steps.mini > li:nth-child(5) .step-num { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-accent); }
@supports (color: color-mix(in srgb, red, blue)) {
  .sec-program-home .naesin-steps.mini > li { background: color-mix(in srgb, var(--k) 7%, #fff); }
  .sec-program-home .naesin-steps.mini > li:nth-child(2) { --k: color-mix(in srgb, var(--c-elem) 50%, var(--c-mid)); }
  .sec-program-home .naesin-steps.mini > li:nth-child(4) { --k: color-mix(in srgb, var(--c-mid) 50%, var(--c-primary)); }
  .sec-program-home .naesin-steps.mini > li:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 22%, transparent), 0 10px 24px color-mix(in srgb, var(--k) 20%, transparent); }
}
.sec-program-home .naesin-steps.mini > li:hover { transform: translateX(4px); }
.sec-program-home .naesin-steps.mini h4 { line-height: 1.5; }

/* ── 10-5 수업은 이렇게: 남색→남보라 + 오른쪽에서 들어오는 선 그림 + 「지금 단계」 불 ── */
body[data-page="home"] .sec.sec-method-home:has(> .wrap > ol.steps), .sec-method-home { position: relative; overflow: hidden; color: rgba(255, 255, 255, .78); background-color: var(--c-primary);
  background-image: radial-gradient(45% 55% at 92% 20%, rgba(59, 167, 232, .14), transparent 70%), radial-gradient(50% 60% at 10% 100%, rgba(201, 162, 75, .16), transparent 70%), var(--gold-lines), linear-gradient(155deg, var(--c-primary) 0%, #262A66 100%); }
.sec-method-home :is(h2, h3) { color: #fff; }
.sec-method-home .eyebrow { color: var(--c-accent); }
.method-art { width: min(100%, 260px); margin: 0 0 var(--s5) auto; }
.method-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.method-art .ma-grid path { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.method-art :is(.ma-book, .ma-check) :is(path, circle) { stroke: var(--c-accent); stroke-width: 3.5; }
.method-art .ma-arrow path { stroke: var(--c-pop2); stroke-width: 3.5; }
.method-art [pathLength="1"] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.method-art .ma-dots circle { fill: #F6DDA0; stroke: none; }
.sec-method-home .step-ic { position: absolute; right: 0; top: var(--s5); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .07); color: #F3CF83; box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .35); }
.sec-method-home .step-ic svg { width: 20px; height: 20px; }
.sec-method-home .step { position: relative; }
@media (max-width: 767px) { .sec-method-home .step { padding-right: 52px; } }
.sec-method-home .steps .step::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: linear-gradient(90deg, #F6DDA0, var(--c-accent)); transform: scaleX(0); transform-origin: left; z-index: 1; }
.steps-live.is-live .step:not(.is-now) > * { opacity: .42; }
.steps-live .step > :not(.step-num) { transition: opacity .5s var(--ease); }
.steps-live .step.is-now::before { transform: scaleX(1); transition: transform 1.9s linear; }
.steps-live .step.is-now .step-num { background: var(--c-accent); color: var(--c-primary-dark); box-shadow: 0 0 0 6px rgba(201, 162, 75, .18), 0 0 26px rgba(233, 180, 85, .55); }
.steps-live .step.is-now .step-ic { background: rgba(201, 162, 75, .2); color: #fff; }
.steps-live .step.is-now p:not(.step-num) { color: rgba(255, 255, 255, .92); }
@media (min-width: 768px) {
  .sec-method-home .steps .step::after { background: rgba(201, 162, 75, .32); }
  .sec-method-home .step-ic { top: var(--s6); }
}
@media (min-width: 1024px) {
  .sec-method-home .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); column-gap: var(--s8); align-items: end; }
  .sec-method-home .sec-head { grid-column: 1; grid-row: 1; }
  .sec-method-home .method-art { grid-column: 2; grid-row: 1; width: 100%; margin: 0 0 var(--s6); }
  .sec-method-home .steps { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── 10-7 다가오는 일정: 청록·남색 바탕 + 빛나는 선 위 가로 타임라인 + D-n 배지 ── */
.sec-cal-home { position: relative; overflow: hidden; color: rgba(255, 255, 255, .8); background-color: var(--c-primary);
  background-image: radial-gradient(45% 60% at 100% 0%, rgba(94, 211, 203, .2), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(201, 162, 75, .16), transparent 70%), linear-gradient(150deg, #0D5C63 0%, #133A5C 48%, var(--c-primary) 100%); }
.sec-cal-home .sec-head h2 { color: #fff; }
.sec-cal-home .eyebrow { color: #7FE0D8; }
.sec-cal-home .eyebrow::before { background: #7FE0D8; }
.sec-cal-home .sec-head p:not(.eyebrow) { color: rgba(255, 255, 255, .72); }
:is(.sec-cal-home, .sec-event-home) .cal-c-info { --cc: var(--c-accent-deep); --cc-soft: var(--c-accent-soft); --cg: linear-gradient(150deg, #EBC170, var(--c-accent-deep)); }
:is(.sec-cal-home, .sec-event-home) .cal-c-open { --cc: var(--c-elem); --cc-soft: #E3F3F2; --cg: linear-gradient(150deg, #3FC1B8, var(--c-elem)); }
:is(.sec-cal-home, .sec-event-home) .cal-c-special { --cc: var(--c-mid); --cc-soft: #EBECF8; --cg: linear-gradient(150deg, #8E92EA, var(--c-mid)); }
:is(.sec-cal-home, .sec-event-home) .cal-c-exam { --cc: var(--c-primary); --cc-soft: var(--c-primary-soft); --cg: linear-gradient(150deg, #3A4A78, var(--c-primary)); }
.sec-cal-home .cal-mini-card { position: relative; border: 0; border-top: 3px solid var(--cc); box-shadow: 0 16px 34px rgba(0, 0, 0, .22); }
.sec-cal-home .cal-mini-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 3px rgba(255, 255, 255, .3), 0 22px 44px rgba(0, 0, 0, .3); }
.sec-cal-home .cal-mini-date { width: 62px; background: var(--cg, var(--cc)); color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.sec-cal-home .cal-mini-card.has-dday .cal-mini-body { padding-right: 56px; }
.cal-dday { position: absolute; top: var(--s3); right: var(--s3); padding: 2px 9px; border-radius: 999px; background: var(--c-pop1); color: var(--c-pop1-ink); font-size: 12px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sec-cal-home .more a:not(.btn) { color: #fff; border-color: rgba(255, 255, 255, .4); }
.cal-mini-list.is-timeline { position: relative; padding-left: 26px; }
.cal-mini-list.is-timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #7FE0D8, var(--c-accent)); box-shadow: 0 0 12px rgba(127, 224, 216, .55); transform-origin: top; }
.cal-mini-list.is-timeline > .cal-mini-card::before { content: ""; position: absolute; left: -24px; top: 22px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--cc), 0 0 14px rgba(255, 255, 255, .7); }
@media (min-width: 768px) {
  .cal-mini-list.is-timeline { padding: 40px 0 0; }
  .cal-mini-list.is-timeline::before { left: 4px; right: 4px; top: 12px; bottom: auto; width: auto; height: 3px; background: linear-gradient(90deg, #7FE0D8, #F6DDA0 60%, var(--c-accent)); transform-origin: left; }
  .cal-mini-list.is-timeline > .cal-mini-card::before { left: 22px; top: -35px; }
}

/* ── 10-6 설명회·간담회: 크림+금빛 · 왼쪽 일정 | 오른쪽 간담회 예약 ── */
.sec-event-home { background-color: var(--c-cream);
  background-image: radial-gradient(55% 70% at 100% 0%, rgba(201, 162, 75, .24), transparent 65%), radial-gradient(40% 50% at 0% 100%, rgba(233, 180, 85, .14), transparent 70%), linear-gradient(170deg, #FFFDF6 0%, var(--c-cream) 55%, #F4E6C3 100%); }
.ev-grid { display: grid; gap: var(--s6); align-items: start; }
.ev-h { margin-bottom: var(--s4); font-size: var(--fs-lg); }
.ev-cards { display: grid; gap: var(--s3); }
.ev-card { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); border-left: 4px solid var(--c-accent); }
.ev-date { flex: none; display: grid; justify-items: center; width: 62px; padding: 6px 0; border-radius: var(--radius); background: linear-gradient(150deg, #EBC170, var(--c-accent-deep)); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.3; box-shadow: 0 6px 14px rgba(156, 123, 51, .3); }
.ev-date b { font-size: 1.625rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ev-body { display: grid; gap: 2px; min-width: 0; }
.ev-body strong { font-size: var(--fs-sm); color: var(--c-ink); line-height: 1.45; }
.ev-meta { font-size: var(--fs-xs); color: var(--c-muted); }
.ev-dday { justify-self: start; padding: 0 8px; border: 1px solid var(--c-primary); border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.ev-none { padding: var(--s4) var(--s5); background: rgba(255, 255, 255, .7); border: 1px dashed rgba(201, 162, 75, .6); border-radius: var(--radius-lg); font-size: var(--fs-sm); color: var(--c-text); }
.ev-past { margin-top: var(--s5); }
.ev-past h4 { margin-bottom: var(--s2); font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); letter-spacing: .04em; }
.ev-past li { padding: var(--s2) 0; border-top: 1px solid rgba(201, 162, 75, .25); font-size: var(--fs-xs); color: var(--c-muted); }
.ev-past time { margin-right: var(--s2); font-weight: 700; color: var(--c-faint); font-variant-numeric: tabular-nums; }
.sec-event-home .event-cards { grid-template-columns: 1fr; }
.gd-box { position: relative; overflow: hidden; padding: var(--s6) var(--s5); border-radius: 18px; color: rgba(255, 255, 255, .8); border: 1px solid rgba(201, 162, 75, .5);
  background: radial-gradient(70% 55% at 100% 0%, rgba(233, 180, 85, .28), transparent 65%), var(--gold-lines), linear-gradient(160deg, var(--c-primary), #2A2F6E); box-shadow: 0 30px 60px rgba(20, 33, 61, .28), 0 0 0 6px rgba(201, 162, 75, .1); }
.gd-kicker { display: inline-block; padding: 2px var(--s3); border: 1px solid var(--c-accent); border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-accent); letter-spacing: .06em; }
.gd-title { margin: var(--s3) 0 var(--s5); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); line-height: 1.3; color: #fff; letter-spacing: -.035em; }
.gd-fallback { color: rgba(255, 255, 255, .78); }
.gd-fallback a { color: var(--c-accent); font-weight: 700; }
.gd-form { display: grid; gap: var(--s4); padding: var(--s5); background: #fff; border-radius: var(--radius-lg); color: var(--c-text); }
.gd-form[aria-busy="true"] { opacity: .7; }
.gd-pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.gd-pick legend, .gd-form .field > label, .gd-form .field > legend { display: block; margin-bottom: var(--s2); padding: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }
.gd-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gd-chip { position: relative; cursor: pointer; }
.gd-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gd-chip span { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 10px var(--s4); border: 1px solid var(--c-line-strong); border-radius: 999px; background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s; }
.gd-chip b { font-size: var(--fs-xs); color: var(--c-accent-deep); font-variant-numeric: tabular-nums; }
.gd-chip:hover span { border-color: var(--c-primary); }
.gd-chip input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 0 0 3px rgba(201, 162, 75, .45); }
.gd-chip input:checked + span b { color: var(--c-accent); }
.gd-chip input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.gd-sel { margin-top: var(--s2); font-size: var(--fs-xs); color: var(--c-muted); }
.gd-sel:empty { display: none; }
.gd-fields { display: grid; gap: var(--s3); }
.gd-form :is(input[type="text"], input[type="tel"], select) { display: block; width: 100%; min-height: 48px; padding: var(--s2) var(--s4); background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-size: 1rem; color: var(--c-ink); -webkit-appearance: none; appearance: none; }
.gd-form select { padding-right: var(--s7); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7280' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; cursor: pointer; }
.gd-form :is(input, select):focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.gd-form .seg span { min-height: 40px; font-size: var(--fs-xs); }
.gd-form .agree { padding: var(--s3) var(--s4); }
.gd-form button[type="submit"] { width: 100%; min-height: 54px; font-size: var(--fs-md); box-shadow: 0 10px 24px rgba(232, 115, 90, .3); }
.gd-done { padding: var(--s6) var(--s5); background: #fff; border-radius: var(--radius-lg); color: var(--c-text); text-align: center; }
.gd-done-h { margin-bottom: var(--s2); font-size: var(--fs-xl); font-weight: 800; color: var(--c-primary); }
.gd-done-h::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto var(--s3); border-radius: 50%; background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%230D1629' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 11.5 4 4 8-9'/%3E%3C/svg%3E") no-repeat center; }
@media (min-width: 600px) { .gd-fields { grid-template-columns: 1fr 1fr; } .gd-fields > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .ev-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s8); }
  .gd-box { padding: var(--s7); }
  .gd-fields { grid-template-columns: 1fr 1fr 1fr; } .gd-fields > :last-child { grid-column: auto; }
}

/* ── 10-8 레벨 테스트 띠: 글·단추 | 관별 과정 카드(3초마다 옆으로) ── */
.sec-lt-home { position: relative; overflow: hidden; padding-block: var(--s8); }
.sec-lt-home .wrap.lt-band { display: grid; gap: var(--s6); align-items: center; grid-template-areas: none; }
.lt-band-text h2 { color: #fff; font-size: var(--fs-2xl); }
.lt-band-text > p:not(.cta-actions) { margin-top: var(--s3); }
.lt-band-text .cta-actions { margin-top: var(--s5); }
.lt-rot { display: grid; gap: var(--s4); }
.lt-rot:empty { display: none; }
.lr-track { display: grid; }
.lr-card { position: relative; grid-area: 1 / 1; display: grid; align-content: start; gap: var(--s3); padding: var(--s6); border-radius: 18px; color: rgba(255, 255, 255, .8);
  border: 2px solid transparent; background: linear-gradient(160deg, #1D2A52, #121B36) padding-box, var(--g) border-box; box-shadow: 0 26px 54px rgba(0, 0, 0, .38);
  opacity: 0; visibility: hidden; transform: translateX(70px); transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .5s var(--ease), visibility 0s linear .8s; }
.lr-card::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 36px 2px rgba(201, 162, 75, .32); opacity: 0; pointer-events: none; }
.lr-card.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lr-card.is-out { visibility: visible; transform: translateX(-70px); transition-delay: 0s, 0s, .8s; }
.lr-tag { display: flex; align-items: baseline; gap: var(--s2); }
.lr-tag b { padding: 3px var(--s3); border-radius: 999px; background: var(--g); font-size: var(--fs-sm); font-weight: 800; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.lr-tag span { font-size: var(--fs-xs); font-weight: 700; color: var(--k2); }
.lr-card h3 { font-size: var(--fs-xl); color: #fff; }
.lr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-chips li { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px var(--s3); border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); font-size: var(--fs-xs); color: rgba(255, 255, 255, .88); }
.lr-chips li b { color: var(--k2); font-weight: 800; }
.lr-go { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s2); padding: 0 var(--s5); border-radius: 999px; background: #fff; color: var(--c-primary-dark); font-size: var(--fs-sm); font-weight: 700; transition: box-shadow .2s, transform .2s var(--ease); }
.lr-go::after { content: "\2192"; margin-left: 6px; }
.lr-go:hover { box-shadow: 0 0 0 4px rgba(59, 167, 232, .4); transform: translateY(-2px); }
.lr-dots { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lr-dot { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s3); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: none; color: rgba(255, 255, 255, .75); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.lr-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.lr-dot[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary-dark); }
.lr-dot[aria-pressed="true"]::before { background: var(--c-primary-dark); }
@media (min-width: 1024px) { .sec-lt-home .wrap.lt-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s8); } .lr-card { padding: var(--s7); } }

/* ── 10-9 마지막 4칸: 칸마다 다른 바탕 ── */
/* 최신 소식 = 크림 + 금빛, 카드 위 색 띠 · 진한 꼬리표 · NEW */
.sec-news-home { background-color: var(--c-cream); background-image: radial-gradient(55% 70% at 0% 0%, rgba(233, 180, 85, .24), transparent 65%), linear-gradient(180deg, #FFF8EA, var(--c-cream)); }
.sec-news-home .news-card { --tc: var(--c-accent); border-top: 4px solid var(--tc); }
.sec-news-home .news-card:has(.tag-초등관) { --tc: var(--c-elem); }
.sec-news-home .news-card:has(.tag-중등관) { --tc: var(--c-mid); }
.sec-news-home .news-card:has(.tag-고등관) { --tc: var(--c-primary); }
.sec-news-home .news-card:hover { box-shadow: 0 0 0 2px var(--tc), 0 20px 42px rgba(13, 22, 41, .14); }
.sec-news-home .news-tag.tag-공지 { background: var(--c-accent); color: var(--c-primary-dark); }
.sec-news-home .news-tag.tag-초등관 { background: var(--c-elem); color: #fff; }
.sec-news-home .news-tag.tag-중등관 { background: var(--c-mid); color: #fff; }
.news-new { align-self: flex-start; margin-top: -6px; padding: 1px 8px; border-radius: 999px; background: var(--c-pop1); color: var(--c-pop1-ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
/* 교육 뉴스 = 남보라 → 남색 */
.sec-edunews-home { color: rgba(255, 255, 255, .8); background-color: var(--c-mid); background-image: radial-gradient(45% 60% at 100% 0%, rgba(201, 162, 75, .2), transparent 70%), linear-gradient(150deg, var(--c-mid) 0%, #2C3070 45%, var(--c-primary) 100%); }
.sec-edunews-home .sec-head h2 { color: #fff; }
.sec-edunews-home .eyebrow { color: var(--c-accent); }
.sec-edunews-home .sec-head p:not(.eyebrow) { color: rgba(255, 255, 255, .72); }
.sec-edunews-home .en-mini-card { border: 0; box-shadow: inset 0 4px 0 var(--c-accent), 0 18px 38px rgba(0, 0, 0, .25); }
.sec-edunews-home .en-mini-card:hover { box-shadow: inset 0 4px 0 var(--c-accent), 0 0 0 3px rgba(201, 162, 75, .55), 0 24px 46px rgba(0, 0, 0, .32); }
.sec-edunews-home .more a:not(.btn) { color: #fff; border-color: rgba(255, 255, 255, .4); }
/* 자주 묻는 질문 = 청록 옅은 그라데이션 */
.sec-faq-home { background-color: #EEF8F7; background-image: radial-gradient(45% 60% at 0% 100%, rgba(31, 138, 132, .14), transparent 70%), linear-gradient(160deg, #E3F4F2 0%, #F3FAF9 50%, #E8EEF8 100%); }
.sec-faq-home .eyebrow::before { background: var(--c-elem); }
.sec-faq-home .fq-list.is-mini .fq-item { border-color: rgba(31, 138, 132, .22); box-shadow: 0 6px 16px rgba(31, 138, 132, .07); transition: border-color .2s, box-shadow .2s; }
.sec-faq-home .fq-list.is-mini .fq-item:hover { border-color: var(--c-elem); box-shadow: 0 0 0 3px rgba(31, 138, 132, .14), 0 10px 24px rgba(31, 138, 132, .12); }
.sec-faq-home .fq-list.is-mini .fq-item[open] { border-color: var(--c-elem); box-shadow: inset 4px 0 0 var(--c-elem), 0 10px 24px rgba(31, 138, 132, .12); }
/* 오시는 길 = 남색 + 지도 느낌 선 무늬, 차량 칩 그라데이션, 그림 약도 */
.sec-visit-home { color: rgba(255, 255, 255, .8); background-color: var(--c-primary-dark);
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 56px), radial-gradient(40% 50% at 85% 15%, rgba(201, 162, 75, .2), transparent 70%), linear-gradient(160deg, var(--c-primary), var(--c-primary-dark)); }
.sec-visit-home .sec-head h2 { color: #fff; }
.sec-visit-home .eyebrow { color: var(--c-accent); }
.sec-visit-home .tour-mini-head h3 { color: #fff; }
.sec-visit-home .tour-mini-head a { color: var(--c-accent); }
.sec-visit-home .visit-mini { box-shadow: 0 26px 54px rgba(0, 0, 0, .3); }
.sec-visit-home .bus-chips li { border: 1px solid transparent; color: #fff; background: linear-gradient(135deg, #17706B, #3FC1B8); }
.sec-visit-home .bus-chips li:nth-child(3n+2) { background: linear-gradient(135deg, #3B3F92, #7E82E0); }
.sec-visit-home .bus-chips li:nth-child(3n) { background: linear-gradient(135deg, var(--c-primary), #3A4A78); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .7); }
.visit-map { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: #F3EFE4; border: 1px solid var(--c-line); }
.visit-map svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.visit-map figcaption { position: absolute; left: var(--s3); bottom: var(--s3); padding: 2px var(--s3); border-radius: 999px; background: rgba(255, 255, 255, .88); font-size: 11px; color: var(--c-muted); }
.mp-bg { fill: #F3EFE4; }
.mp-blocks rect { fill: #E6DFCB; }
.mp-home { fill: #F3E2B8; stroke: var(--c-accent); stroke-width: 2; }
.mp-roads path { fill: none; stroke: #fff; stroke-width: 15; }
.mp-route { fill: none; stroke: var(--c-primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 9; }
.mp-dot { fill: var(--c-accent); stroke: #fff; stroke-width: 3; }
.mp-ring { fill: var(--c-accent); opacity: .3; }
.mp-tag rect { fill: var(--c-primary); }
.mp-tag text { fill: #fff; font-family: var(--f); font-size: 14px; font-weight: 700; }
@media (min-width: 1024px) {
  .sec-visit-home .visit-mini { grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
  .sec-visit-home .visit-mini > dl, .sec-visit-home .visit-mini > .bus { grid-column: 1; }
  .sec-visit-home .visit-mini > .visit-map { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .sec-visit-home .visit-mini > .visit-map svg { height: 100%; }
  .sec-visit-home .visit-mini > .more { grid-column: 1 / -1; }
}

/* ── 10-10 마무리 장면: 남색→남보라 + 반짝이 + 빛나는 로고 + 큰 글 + 숫자 + 단추 셋 ── */
.sec-finale { position: relative; overflow: hidden; padding-block: var(--s9); text-align: center; color: rgba(255, 255, 255, .8); background-color: var(--c-primary);
  background-image: radial-gradient(42% 40% at 50% 26%, rgba(233, 180, 85, .3), transparent 70%), radial-gradient(50% 55% at 8% 100%, rgba(142, 146, 234, .18), transparent 70%), var(--gold-lines), linear-gradient(165deg, var(--c-primary) 0%, #2B2D72 62%, #1A1F4E 100%); }
.sec-finale::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 236, 190, .1), transparent); transform: translateX(-130%) skewX(-12deg); pointer-events: none; }
.sec-finale > .wrap { position: relative; z-index: 1; }
.fin-sky { position: absolute; inset: 0; pointer-events: none; }
.fin-sky i { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #FFF6D6 0 30%, rgba(233, 180, 85, 0) 70%); transform: scale(var(--z)); opacity: .7; }
.fin-inner { display: grid; justify-items: center; gap: var(--s5); }
.fin-logo { position: relative; display: inline-block; margin-bottom: var(--s2); }
.fin-logo::before { content: ""; position: absolute; inset: -36px; border-radius: 50%; background: radial-gradient(closest-side, rgba(246, 221, 160, .55), rgba(246, 221, 160, .12) 60%, transparent); }
.fin-logo img { position: relative; width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .25); }
.fin-title { font-size: clamp(1.875rem, 1.1rem + 3vw, 3.5rem); line-height: 1.25; color: #fff; letter-spacing: -.04em; }
.fin-title span { color: var(--c-accent); background: linear-gradient(90deg, #F6DDA0, var(--c-accent) 50%, #F6DDA0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fin-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) var(--s6); max-width: 960px; }
.fin-nums li { display: grid; justify-items: center; gap: 2px; min-width: 120px; }
.fin-nums b { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 800; color: var(--c-accent); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fin-nums span { max-width: 14em; font-size: var(--fs-xs); color: rgba(255, 255, 255, .7); line-height: 1.45; }
.fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s3); }
.fin-actions .btn { min-width: 180px; min-height: 56px; font-size: var(--fs-md); }
.fin-actions .btn-primary { background: var(--c-accent); color: var(--c-primary-dark); }
.fin-actions .btn-primary:hover { background: #fff; }
.fin-actions .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.fin-actions .btn-ghost:hover { border-color: #fff; }
@media (min-width: 1024px) { .sec-finale { display: flex; align-items: center; min-height: calc(100svh - var(--head-h)); } .fin-logo img { width: 112px; height: 112px; } }
@media (max-width: 479px) { .fin-actions .btn { width: 100%; } .fin-nums li { min-width: 40%; } }

/* ── 움직임(움직임 줄이기면 위 모양 그대로 멈춰 보임) ── */
@media (prefers-reduced-motion: no-preference) {
  .fp-hint { animation-name: hfx-hint; }
  /* 첫 화면 제목 바뀜: 들어올 때 줄마다 올라오고, 나갈 때 위로 사라짐 */
  .hero-rich h1.ht .ht-item .line { animation: none; }
  .hero-rich h1.ht .ht-item.is-on .line { animation: line-up .9s var(--ease) var(--d, 0s) both; }
  .hero-rich h1.ht .ht-item.is-out .line { animation: hfx-line-out .55s var(--ease) both; }
  .hero-rich h1.ht .ht-item.is-out .line + .line { animation-delay: .06s; }

  /* 명예의 전당: 조명 2~3줄기 차례로 켜짐 · 빛 한 줄기가 가로지름 · 숫자 금색 반짝 */
  .hfx .sec-hall-home:not(.is-lit):not(.fp-in) .hall-lights span { opacity: 0; }
  .sec-hall-home:is(.is-lit, .fp-in) .hall-lights span { animation: hfx-light-on 1.4s var(--ease) both, hfx-light-sway 9s ease-in-out 1.6s infinite alternate; }
  .sec-hall-home:is(.is-lit, .fp-in) .hall-lights span:nth-child(2) { animation-delay: .45s, 2s; }
  .sec-hall-home:is(.is-lit, .fp-in) .hall-lights span:nth-child(3) { animation-delay: .9s, 2.4s; }
  .sec-hall-home:is(.is-lit, .fp-in) .hall-sweep { animation: hfx-sweep 9s linear 1.6s infinite; }
  .sec-hall-home:is(.is-lit, .fp-in) .hf-strip li b { animation: gold-flash 1.3s var(--ease) 1.2s both; }
  .sec-hall-home:is(.is-lit, .fp-in) .hf-strip li:nth-child(2) b { animation-delay: 1.45s; }
  .sec-hall-home:is(.is-lit, .fp-in) .hf-strip li:nth-child(3) b { animation-delay: 1.7s; }
  .sec-hall-home:is(.is-lit, .fp-in) .hf-strip li:nth-child(4) b { animation-delay: 1.95s; }
  .hc-badge { animation: hfx-badge 4s ease-in-out infinite; }

  /* 관 칸: 학년 칩이 왼쪽부터 차례로 켜짐 */
  .sec-courses-home .rm-strip.is-in .rm-cell { animation: hfx-chip-on .7s var(--ease) var(--cd, 0s) backwards; }
  .sec-courses-home .rm-strip-cells > li:nth-child(1) { --cd: .05s; } .sec-courses-home .rm-strip-cells > li:nth-child(2) { --cd: .11s; }
  .sec-courses-home .rm-strip-cells > li:nth-child(3) { --cd: .17s; } .sec-courses-home .rm-strip-cells > li:nth-child(4) { --cd: .23s; }
  .sec-courses-home .rm-strip-cells > li:nth-child(5) { --cd: .29s; } .sec-courses-home .rm-strip-cells > li:nth-child(6) { --cd: .35s; }
  .sec-courses-home .rm-strip-cells > li:nth-child(7) { --cd: .41s; } .sec-courses-home .rm-strip-cells > li:nth-child(8) { --cd: .47s; }
  .sec-courses-home .rm-strip-cells > li:nth-child(9) { --cd: .53s; } .sec-courses-home .rm-strip-cells > li:nth-child(10) { --cd: .59s; }
  .sec-courses-home .rm-strip-cells > li:nth-child(11) { --cd: .65s; } .sec-courses-home .rm-strip-cells > li:nth-child(n+12) { --cd: .71s; }
  .sec-courses-home:is(.is-lit, .fp-in) .div-panel > :first-child::after { animation: hfx-shine 1.4s var(--ease) .9s 1 both; }

  /* 수능과 내신: 시계 조각이 차례로 그려짐 · 180 반짝 · 5단계가 위에서부터 */
  .sn-arc { transition: stroke-dasharray 1s var(--ease); }
  .sn-a2 { transition-delay: .55s; } .sn-a3 { transition-delay: .85s; } .sn-a1 { transition-delay: .25s; }
  .hfx .sec-program-home:not(.is-lit):not(.fp-in) .sn-arc { stroke-dasharray: 0 180; }
  .sec-program-home:is(.is-lit, .fp-in) .sn-num { animation: hfx-fill-flash 1.4s var(--ease) 1.4s both; }
  .hfx .sec-program-home:not(.is-lit):not(.fp-in) :is(.sn-flow li, .naesin-steps.mini > li) { opacity: 0; transform: translateY(-10px); }
  .sec-program-home:is(.is-lit, .fp-in) :is(.sn-flow li, .naesin-steps.mini > li) { animation: hfx-row-in .6s var(--ease) backwards; }
  .sec-program-home .naesin-steps.mini > li:nth-child(1), .sec-program-home .sn-flow li:nth-child(1) { animation-delay: .35s; }
  .sec-program-home .naesin-steps.mini > li:nth-child(2), .sec-program-home .sn-flow li:nth-child(2) { animation-delay: .5s; }
  .sec-program-home .naesin-steps.mini > li:nth-child(3), .sec-program-home .sn-flow li:nth-child(3) { animation-delay: .65s; }
  .sec-program-home .naesin-steps.mini > li:nth-child(4) { animation-delay: .8s; }
  .sec-program-home .naesin-steps.mini > li:nth-child(5) { animation-delay: .95s; }

  /* 수업 방식: 그림이 오른쪽에서 크게 미끄러져 들어오고 선이 그려짐, 화살표·체크는 살짝 떠 있음 */
  .sec-method-home .method-art.reveal:not(.is-in) { transform: translateX(140px); }
  .sec-method-home .method-art.reveal { transition-duration: 1s; }
  .method-art [pathLength="1"] { transition: stroke-dashoffset 1.6s var(--ease); }
  .method-art .ma-book [pathLength="1"] { transition-delay: .3s; }
  .method-art .ma-arrow [pathLength="1"] { transition-delay: 1s; }
  .method-art .ma-check [pathLength="1"] { transition-delay: 1.5s; }
  .hfx .sec-method-home:not(.is-lit):not(.fp-in) .method-art [pathLength="1"] { stroke-dashoffset: 1; }
  .method-art :is(.ma-arrow, .ma-check) { animation: hfx-float 6s ease-in-out 3s infinite; }
  .method-art .ma-check { animation-delay: 4s; }

  /* 다가오는 일정: 빛나는 선이 그려지고 날짜 점이 차례로 켜짐 */
  .cal-mini-list.is-timeline::before { transition: transform 1.2s var(--ease); }
  .hfx .sec-cal-home:not(.is-lit):not(.fp-in) .cal-mini-list.is-timeline::before { transform: scaleY(0); }
  .cal-mini-list.is-timeline > .cal-mini-card::before { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
  .cal-mini-list.is-timeline > .cal-mini-card:nth-child(1)::before { transition-delay: .5s; }
  .cal-mini-list.is-timeline > .cal-mini-card:nth-child(2)::before { transition-delay: .8s; }
  .cal-mini-list.is-timeline > .cal-mini-card:nth-child(3)::before { transition-delay: 1.1s; }
  .hfx .sec-cal-home:not(.is-lit):not(.fp-in) .cal-mini-list.is-timeline > .cal-mini-card::before { transform: scale(0); opacity: 0; }
  .sec-cal-home:is(.is-lit, .fp-in) .cal-dday { animation: hfx-pop .6s cubic-bezier(.3, 1.6, .5, 1) 1.3s backwards; }

  /* 레벨 테스트 띠: 카드 빛 테가 천천히 숨 쉼 */
  .lr-card.is-on::after { animation: hfx-glow 4s ease-in-out infinite; }

  /* 오시는 길: 학원 점 깜빡임 · 길 따라 흐르는 점선 */
  .mp-ring { transform-box: fill-box; transform-origin: center; animation: hfx-ping 2.4s ease-out infinite; }
  .mp-ring.r2 { animation-delay: 1.2s; }
  .mp-route { animation: hfx-route 1.6s linear infinite; }

  /* 마무리: 반짝이 · 빛 줄기 · 로고 빛 · 차례로 켜짐 */
  .fin-sky i { animation: hfx-twinkle 3.6s ease-in-out var(--dl, 0s) infinite; }
  .sec-finale:is(.is-lit, .fp-in)::before { animation: hfx-sweep 10s linear 1s infinite; }
  .fin-logo::before { animation: hfx-halo 3.6s ease-in-out infinite; }
  .fin-logo img { animation: hfx-float 6s ease-in-out infinite; }
  .hfx .sec-finale:not(.is-lit):not(.fp-in) .fin-inner > * { opacity: 0; }
  .sec-finale:is(.is-lit, .fp-in) .fin-inner > * { animation: hfx-rise .9s cubic-bezier(.16, 1, .3, 1) backwards; }
  .sec-finale .fin-inner > :nth-child(1) { animation-delay: .1s; }
  .sec-finale .fin-inner > :nth-child(2) { animation-delay: .35s; }
  .sec-finale .fin-inner > :nth-child(3) { animation-delay: .6s; }
  .sec-finale .fin-inner > :nth-child(4) { animation-delay: .85s; }
  .sec-finale:is(.is-lit, .fp-in) .fin-nums b { animation: gold-flash 1.3s var(--ease) 1.2s both; }
}
@keyframes hfx-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes hfx-line-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-.55em); } }
@keyframes hfx-light-on { 0% { opacity: 0; } 30% { opacity: .9; } 42% { opacity: .35; } 60% { opacity: 1; } 100% { opacity: 1; } }
@keyframes hfx-light-sway { from { translate: -2% 0; } to { translate: 2% 0; } }
@keyframes hfx-sweep { from { transform: translateX(-130%) skewX(-12deg); } to { transform: translateX(480%) skewX(-12deg); } }
@keyframes hfx-badge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hfx-chip-on { 0% { opacity: 0; transform: translateY(12px) scale(.86); } 60% { opacity: 1; transform: translateY(-2px) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes hfx-shine { from { transform: translateX(-140%); } to { transform: translateX(320%); } }
@keyframes hfx-fill-flash { 0% { fill: var(--c-primary); } 40% { fill: var(--c-accent); } 100% { fill: var(--c-primary); } }
@keyframes hfx-row-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes hfx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hfx-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes hfx-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes hfx-ping { 0% { transform: scale(.4); opacity: .55; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes hfx-route { to { stroke-dashoffset: -19; } }
@keyframes hfx-twinkle { 0%, 100% { opacity: .15; transform: scale(calc(var(--z, 1) * .6)); } 50% { opacity: .95; transform: scale(calc(var(--z, 1) * 1.4)); } }
@keyframes hfx-halo { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes hfx-rise { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
/* 한 화면씩 넘기기와 겹칠 때: 수업 단계 줄은 「지금 단계」 흐림을 쓰므로 칸 들어오기 움직임 뒤 값을 붙잡지 않음 */
main > section.fp-in.sec-method-home .steps-live > li.step { animation-fill-mode: backwards; }
@media print { .hall-lights, .fin-sky, .hw-blur, .lr-dots { display: none !important; } .hc-card, .lr-card { opacity: 1 !important; visibility: visible !important; transform: none !important; position: static; } }

/* ═════ 쪽별 색·한눈 요약·로고 무늬 (10-11 밤) ═════ */
/* page-fx.js 와 짝. 메인 말고 모든 쪽(소개·명예의 전당·둘러보기·과정·내신·시간표·학사 일정·소식·공지·교육 뉴스·FAQ·오시는 길·레벨 테스트) + 여는 화면·진행 막대·네 단어 띠는 메인 포함.
   스킬 center-homepage references/page-design.md(쪽별 색·첫 움직임·한눈 요약 표) · animation.md 8.
   네 기둥 색: L 청록 · S 남보라 · E 하늘 · R 금색(원장님 10-11 디자인 줄기). 밝은 칸 = 샴페인 금빛, 진한 칸 = 청록→남보라. 남색은 머리줄·바닥·쪽 머리 몇 곳만.
   숨김(들어오기 전)은 모두 html.pfx + 움직임 줄이기 아님일 때만 → JS 꺼져도 내용은 다 보임. */
:root {
  --pl-L: var(--c-elem); --pl-S: var(--c-mid); --pl-E: var(--c-pop2); --pl-R: var(--c-accent);
  --champagne: linear-gradient(160deg, #FCF8EE 0%, #F7EDD8 55%, #F0E2C2 100%);
  --deep-tv: linear-gradient(125deg, #17606A 0%, #22507E 50%, #33307A 100%);
  /* 쪽 대표색(기본 = 남색·금색, 쪽마다 아래에서 바꿈) */
  --page-c1: var(--c-primary); --page-c2: var(--c-accent);
  --page-bg: linear-gradient(150deg, var(--c-primary), var(--c-primary-dark));
  --page-ink: var(--c-accent);                 /* 쪽 머리 영문 머리말 색 */
  --ph-h: #fff; --ph-t: rgba(255, 255, 255, .74);   /* 쪽 머리 제목 · 글 */
  --gc-bg: rgba(255, 255, 255, .08); --gc-bg-up: rgba(255, 255, 255, .15); --gc-line: rgba(255, 255, 255, .18);
  --gc-n: #fff; --gc-l: rgba(255, 255, 255, .88); --gc-s: rgba(255, 255, 255, .6);
}
/* 쪽마다 대표색 — 진한 쪽 머리 8 · 밝은 쪽 머리 5 */
body[data-page="about"]     { --page-c1: #3A4A9A; --page-c2: #C9A24B; --page-bg: radial-gradient(60% 90% at 86% 8%, rgba(201, 162, 75, .30), transparent 62%), linear-gradient(140deg, #14213D 0%, #283270 100%); }
body[data-page="hall"]      { --page-c1: #E3B65C; --page-c2: #C9A24B; --page-ink: #F0CB7A; --page-bg: radial-gradient(46% 80% at 70% 0%, rgba(240, 200, 110, .30), transparent 66%), linear-gradient(172deg, #090E1D 0%, #17203D 100%); }
body[data-page="courses"]   { --page-c1: #2BB3AA; --page-c2: #7B80E0; --page-ink: #9EE6DF; --page-bg: radial-gradient(55% 90% at 92% 0%, rgba(201, 162, 75, .24), transparent 60%), linear-gradient(125deg, #136C68 0%, #2B4D88 55%, #3E3F98 100%); }
body[data-page="naesin"]    { --page-c1: #22B5AB; --page-c2: #3BA7E8; --page-ink: #8FD9F7; --page-bg: radial-gradient(55% 90% at 86% 4%, rgba(59, 167, 232, .38), transparent 60%), linear-gradient(135deg, #0B4C50 0%, #13687A 55%, #1E77A8 100%); }
body[data-page="timetable"] { --page-c1: #8A8EF0; --page-c2: #C9A24B; --page-ink: #C7C9FF; --page-bg: radial-gradient(50% 90% at 88% 6%, rgba(201, 162, 75, .26), transparent 60%), linear-gradient(135deg, #2D3080 0%, #4B4FA8 60%, #6A55B2 100%); }
body[data-page="edunews"]   { --page-c1: #8A8EF0; --page-c2: #3BA7E8; --page-ink: #A9D8F8; --page-bg: radial-gradient(50% 90% at 84% 0%, rgba(59, 167, 232, .26), transparent 60%), linear-gradient(140deg, #3F43A0 0%, #2A2E6E 55%, #172140 100%); }
body[data-page="tour"]      { --page-c1: #D9B98F; --page-c2: #C9A24B; --page-ink: #F0D29A; --page-bg: radial-gradient(55% 90% at 86% 6%, rgba(233, 190, 110, .30), transparent 62%), linear-gradient(140deg, #4A3D35 0%, #6A584A 55%, #86705D 100%); }
body[data-page="contact"]   { --page-c1: #E8735A; --page-c2: #C9A24B; --page-ink: #F4A691; --page-bg: radial-gradient(55% 90% at 88% 14%, rgba(232, 115, 90, .40), transparent 62%), linear-gradient(145deg, #14213D 0%, #2A2F5E 100%); }
/* 밝은 쪽 머리: 학사 일정(산호+크림) · 공지(하늘+남색) · 소식(크림+금색) · FAQ(민트+청록) · 레벨 테스트(금색+남색) */
body[data-page="calendar"]  { --page-c1: #E8735A; --page-c2: #C9A24B; --page-ink: #B4462E; --page-bg: radial-gradient(48% 90% at 88% 8%, rgba(232, 115, 90, .26), transparent 62%), linear-gradient(160deg, #FFF8EF 0%, #FBEAD8 60%, #F6DAC4 100%); }
body[data-page="notice"]    { --page-c1: #3BA7E8; --page-c2: #1E2C55; --page-ink: #1767A4; --page-bg: radial-gradient(48% 90% at 88% 8%, rgba(59, 167, 232, .28), transparent 62%), linear-gradient(160deg, #F3FAFF 0%, #DFF0FC 60%, #C9E4F7 100%); }
body[data-page="news"]      { --page-c1: #C9A24B; --page-c2: #E8735A; --page-ink: #8A6A22; --page-bg: radial-gradient(48% 90% at 86% 6%, rgba(201, 162, 75, .32), transparent 62%), var(--champagne); }
body[data-page="faq"]       { --page-c1: #2DB79C; --page-c2: #1F8A84; --page-ink: #157565; --page-bg: radial-gradient(48% 90% at 88% 8%, rgba(63, 191, 168, .30), transparent 62%), linear-gradient(160deg, #F2FCF9 0%, #DBF3EC 60%, #C4EADF 100%); }
body[data-page="leveltest"] { --page-c1: #B98A2F; --page-c2: #1E2C55; --page-ink: #1E2C55; --page-bg: radial-gradient(48% 90% at 86% 6%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(160deg, #FBF4E2 0%, #F3E2B8 60%, #E8CC8E 100%); }
:is(body[data-page="calendar"], body[data-page="notice"], body[data-page="news"], body[data-page="faq"], body[data-page="leveltest"]) {
  --ph-h: var(--c-ink); --ph-t: var(--c-text);
  --gc-bg: rgba(255, 255, 255, .72); --gc-bg-up: #fff; --gc-line: color-mix(in srgb, var(--page-c1) 26%, transparent);
  --gc-n: var(--c-ink); --gc-l: var(--c-text); --gc-s: var(--c-muted);
}

/* ── 쪽 머리: 쪽 바탕 + 왼쪽 글 | 오른쪽 로고 무늬 + 아래 한눈 요약 ── */
.page-hero { background: var(--gold-lines), var(--page-bg); color: var(--ph-t); }
.page-hero h1 { color: var(--ph-h); }
.page-hero .eyebrow { color: var(--page-ink); }
.page-hero .eyebrow::before { background: var(--page-c1); }
.page-hero .lead { color: var(--ph-t); }
.page-hero.is-light::after, :is(body[data-page="calendar"], body[data-page="notice"], body[data-page="news"], body[data-page="faq"], body[data-page="leveltest"]) .page-hero::after { background: linear-gradient(90deg, transparent, var(--page-c1), transparent); }
:is(body[data-page="calendar"], body[data-page="notice"], body[data-page="news"], body[data-page="faq"], body[data-page="leveltest"]) .page-hero .note-check { color: var(--c-faint); }
.page-hero.is-light .fp-hint { color: var(--c-muted); }
@media (min-width: 1024px) { .pfx-hero > .wrap > :is(.eyebrow, h1, .lead) { max-width: min(54%, 40em); } }

/* 오른쪽 로고 무늬: 큰 선 그림 로고 + 둘레 작은 로고 7개(쪽마다 자리·크기·색 다름 — page-fx.js 씨앗) */
.pfx-l { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pfx-art { position: absolute; z-index: 0; top: 0; right: 0; width: min(50%, 700px); height: min(100%, 520px); pointer-events: none; transform: translateY(var(--sy, 0)); }
.pfx-tilt { position: absolute; inset: 0; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.pfx-big { position: absolute; left: 52%; top: 50%; width: clamp(170px, 20vw, 300px); aspect-ratio: 1; translate: -50% -50%; color: var(--page-c1); }
.pfx-big .pfx-l { stroke-width: 5; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--page-c1) 45%, transparent)); }
.pfx-ring { position: absolute; left: 52%; top: 50%; width: clamp(240px, 30vw, 440px); aspect-ratio: 1; translate: -50% -50%; border: 1.5px dashed color-mix(in srgb, var(--page-c2) 55%, transparent); border-radius: 50%; }
.pfx-ring::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--page-c2); box-shadow: 0 0 12px var(--page-c2); }
.pfx-mini { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); opacity: var(--o); transform: rotate(var(--r)); }
.pfx-mini i { position: absolute; inset: 0; }
.pfx-mini:nth-of-type(odd) i::before { content: ""; position: absolute; inset: 4.8%; border-radius: 17%; background: currentColor; opacity: .16; }
.pfx-mini i.b { opacity: 0; }
.pfx-mini .pfx-l { stroke-width: 16; }
.page-hero.is-light .pfx-mini, :is(body[data-page="calendar"], body[data-page="notice"], body[data-page="news"], body[data-page="faq"], body[data-page="leveltest"]) .pfx-mini { opacity: calc(var(--o) + .15); }
@media (min-width: 768px) and (max-width: 1023px) { .pfx-art { width: 44%; height: 380px; } }
/* 휴대폰: 글 뒤 옅은 바탕으로 작게 */
@media (max-width: 767px) {
  .pfx-art { width: 100%; height: 100%; opacity: .2; }
  .pfx-big { left: 80%; top: 26%; width: 170px; }
  .pfx-ring { left: 80%; top: 26%; width: 240px; }
  .pfx-mini { width: calc(var(--s) * .62); height: calc(var(--s) * .62); }
}

/* ── 한눈 요약: 그 쪽의 핵심을 큰 카드 3~6개로(누르면 그 칸으로) ── */
.pfx-glance { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s6); }
.pfx-glance:is(.n3, .n5) > :first-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .pfx-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s7); }
  .pfx-glance:is(.n3, .n5) > :first-child { grid-column: auto; }
  .pfx-glance.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .pfx-glance.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pfx-glance.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.pfx-gc {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 116px; padding: var(--s5) var(--s5) var(--s5);
  border: 1px solid var(--gc-line); border-radius: var(--radius-lg); background: var(--gc-bg); color: var(--gc-l); overflow: hidden;
  transition: transform .35s var(--ease), background-color .3s, border-color .3s, box-shadow .35s;
}
.pfx-gc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--page-c1), var(--page-c2)); }
.pfx-gn { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; color: var(--gc-n); overflow-wrap: anywhere; }
.pfx-gl { font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; color: var(--gc-l); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pfx-gs { font-size: var(--fs-xs); line-height: 1.5; color: var(--gc-s); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pfx-go { position: absolute; right: var(--s4); bottom: var(--s4); width: 9px; height: 9px; border: solid var(--page-c1); border-width: 1.5px 1.5px 0 0; transform: rotate(135deg); opacity: .7; transition: transform .3s var(--ease); }
a.pfx-gc:hover, a.pfx-gc:focus-visible { transform: translateY(-4px); background: var(--gc-bg-up); border-color: var(--page-c1); box-shadow: 0 14px 34px rgba(5, 10, 25, .22); }
a.pfx-gc:hover .pfx-go { transform: translateY(3px) rotate(135deg); }
.pfx-gc.is-hot .pfx-gn { color: var(--c-pop1); }   /* 학사 일정 D-n 하나만(대비색 칸마다 한 곳) */
/* 관·분류 색 띠 */
.pfx-gc.k-elem::before { background: var(--c-elem); } .pfx-gc.k-mid::before { background: var(--c-mid); } .pfx-gc.k-high::before { background: linear-gradient(90deg, #14213D 70%, var(--c-accent) 70%); }
.pfx-gc.c-open::before { background: var(--c-elem); } .pfx-gc.c-special::before { background: var(--c-mid); } .pfx-gc.c-info::before { background: var(--c-accent); } .pfx-gc.c-exam::before { background: #14213D; } .pfx-gc.c-closed::before { background: #9AA1AD; }
@media (max-width: 767px) { .pfx-gc { min-height: 96px; padding: var(--s4); } }

/* ── 쪽마다 다른 첫 움직임의 장식(.pfx-motif) — 자리 ── */
.pfx-motif { position: absolute; z-index: 0; right: 4%; top: 10%; width: min(46%, 640px); height: min(72%, 470px); pointer-events: none; }
@media (max-width: 1023px) { .pfx-motif { opacity: .55; } }
@media (max-width: 767px) { .pfx-motif { opacity: .3; right: 0; width: 70%; } }
/* 명예의 전당: 무대 조명 3줄기 + 빛 줄기 */
.pfx-motif.m-hall { inset: 0; width: auto; height: auto; overflow: hidden; }
.pfx-beam { position: absolute; top: -12%; left: calc(46% + var(--i) * 17%); width: 30%; height: 125%; transform-origin: 50% 0; opacity: .85;
  background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, rgba(240, 200, 110, .34) 180deg, transparent 198deg);
  -webkit-mask-image: linear-gradient(#000 20%, transparent 88%); mask-image: linear-gradient(#000 20%, transparent 88%); }
.pfx-sweep { position: absolute; top: 0; bottom: 0; left: -30%; width: 24%; background: linear-gradient(100deg, transparent, rgba(255, 230, 170, .14), transparent); transform: skewX(-18deg); opacity: 0; }
/* 교육 과정: 네 기둥 색 계단 */
.pfx-stairs { position: absolute; left: 0; bottom: 4%; display: flex; align-items: flex-end; gap: 8px; width: 38%; height: 46%; }
.pfx-stairs i { flex: 1; height: calc(28% + var(--i) * 24%); border-radius: 8px 8px 2px 2px; opacity: .9; transform-origin: 50% 100%; }
.pfx-stairs .s-L { background: var(--pl-L); } .pfx-stairs .s-S { background: var(--pl-S); } .pfx-stairs .s-E { background: var(--pl-E); } .pfx-stairs .s-R { background: var(--pl-R); }
/* 시간표: 7×4 표 칸이 물결처럼 */
.pfx-grid { position: absolute; left: 0; bottom: 2%; display: grid; grid-template-columns: repeat(7, 22px); gap: 6px; }
.pfx-grid i { height: 22px; border-radius: 5px; background: var(--page-c1); opacity: .22; }
.pfx-grid i:nth-child(5n + 2) { background: var(--c-accent); }
/* 학사 일정: 달력 장 3장(위 두 장이 넘어감) */
.pfx-sheets { position: absolute; left: 2%; bottom: 6%; width: 120px; height: 136px; perspective: 600px; }
.pfx-sheets i { position: absolute; inset: 0; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgba(180, 70, 46, .16); transform-origin: 50% 0; z-index: calc(3 - var(--i)); }
.pfx-sheets i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, var(--c-pop1), #F09A7E); }
.pfx-sheets i::after { content: ""; position: absolute; left: 16px; right: 16px; top: 46px; bottom: 16px; background: repeating-linear-gradient(90deg, rgba(180, 70, 46, .16) 0 10px, transparent 10px 17px), repeating-linear-gradient(0deg, transparent 0 10px, #fff 10px 17px); }
/* 공지: 종이 4장이 쌓임 */
.pfx-papers { position: absolute; left: 4%; bottom: 6%; width: 120px; height: 150px; }
.pfx-papers i { --rot: calc((var(--i) - 1.5) * 6deg); position: absolute; inset: 0; border-radius: 6px; background: #fff; box-shadow: 0 8px 20px rgba(23, 103, 164, .16); transform: rotate(var(--rot)); }
.pfx-papers i::before { content: ""; position: absolute; left: 14px; right: 14px; top: 18px; height: 50%; background: repeating-linear-gradient(0deg, rgba(23, 103, 164, .2) 0 2px, transparent 2px 12px); }
.pfx-papers i:last-child::after { content: ""; position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--c-pop2); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
/* FAQ: 물음표 → 느낌표 */
.pfx-qa { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .7); box-shadow: 0 12px 30px rgba(21, 117, 101, .18); }
.pfx-qa b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 76px; font-weight: 800; line-height: 1; }
.pfx-qa .q { color: var(--c-elem); } .pfx-qa .x { color: var(--c-accent-deep); opacity: 0; }
/* 오시는 길: 약도 선이 그려지고 핀 */
.pfx-route { position: absolute; left: 0; bottom: 4%; width: 62%; height: auto; overflow: visible; }
.pfx-route path { stroke: var(--c-pop1); stroke-width: 4; stroke-linecap: round; }
.pfx-route circle { fill: var(--c-pop1); stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
/* 레벨 테스트: 눈금이 차오름 */
.pfx-gauge { position: absolute; left: 0; bottom: 8%; width: 58%; height: 14px; border-radius: 999px; background: rgba(30, 44, 85, .12); }
.pfx-gauge .fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pl-L), var(--pl-S), var(--pl-E), var(--pl-R)); transform-origin: 0 50%; }
.pfx-gauge .tick { position: absolute; top: -14px; left: calc(var(--i) * 12.5%); width: 2px; height: 10px; margin-left: -1px; background: #1E2C55; opacity: .25; transform-origin: 50% 100%; }
/* 교육 뉴스: 쪽 머리 아래 신문 띠 */
.pfx-motif.m-edunews { inset: auto 0 0 0; width: auto; height: auto; opacity: 1; }
.pfx-ticker { display: block; overflow: hidden; padding: 10px 0; background: rgba(8, 12, 30, .35); border-top: 1px solid rgba(255, 255, 255, .12); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pfx-ticker-track { display: flex; width: max-content; }
.pfx-ticker-track span { flex: none; padding: 0 var(--s6); font-size: var(--fs-xs); color: rgba(255, 255, 255, .8); white-space: nowrap; }
.pfx-ticker-track b { margin-right: var(--s2); padding: 1px 8px; border-radius: 4px; background: rgba(169, 216, 248, .18); color: #A9D8F8; font-weight: 700; }
body[data-page="edunews"] .page-hero { padding-bottom: calc(var(--s8) + 44px); }
@media (min-width: 1200px) { body[data-page="edunews"] .page-hero { padding-bottom: calc(var(--s8) + 52px); } }

/* ── 칸 eyebrow 옆 기둥 색 점 · 단어 ── */
.pfx-pl { --plc: var(--pl-L); display: inline-flex; align-items: center; gap: 6px; margin-left: var(--s2); padding: 2px 10px 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: none;
  color: color-mix(in srgb, var(--plc) 72%, #000); background: color-mix(in srgb, var(--plc) 11%, transparent); vertical-align: middle; }
.pfx-pl i { width: 8px; height: 8px; border-radius: 50%; background: var(--plc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plc) 22%, transparent); }
.pfx-pl.pl-S { --plc: var(--pl-S); } .pfx-pl.pl-E { --plc: var(--pl-E); } .pfx-pl.pl-R { --plc: var(--pl-R); }
.division-head .pfx-pl { margin: var(--s2) 0 0; }

/* ── 칸 사이 장식: 네 색 점 이은 짧은 선 + 가운데 작은 로고 ── */
.pfx-sub main > section:not(.page-hero) { position: relative; }
.pfx-div { position: absolute; left: 50%; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 0 28px; transform: translate(-50%, -50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pl-L) 14%, var(--pl-S) 36%, transparent 44% 56%, var(--pl-E) 64%, var(--pl-R) 86%, transparent) center / 100% 2px no-repeat; }
.pfx-div i { width: 8px; height: 8px; border-radius: 50%; }
.pfx-div .d-L { background: var(--pl-L); } .pfx-div .d-S { background: var(--pl-S); } .pfx-div .d-E { background: var(--pl-E); } .pfx-div .d-R { background: var(--pl-R); }
.pfx-div span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--c-accent-deep); box-shadow: 0 0 0 1px rgba(201, 162, 75, .45), 0 6px 16px rgba(13, 22, 41, .10); }
.pfx-div span .pfx-l { width: 22px; height: 22px; stroke-width: 24; }

/* ── 중요 카드 금색 로고 도장(명예의 전당 숫자 첫 칸 · 수능반 · 레벨 테스트 예약) ── */
.pfx-stamped { position: relative; }
.pfx-stamp { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #2A1E14; transform: rotate(-12deg); pointer-events: none;
  background: radial-gradient(circle at 32% 28%, #F8E2A8, #D8B05C 55%, #A8832F); box-shadow: 0 6px 16px rgba(156, 123, 51, .32), inset 0 0 0 2px rgba(255, 255, 255, .4); }
.pfx-stamp::before { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(42, 30, 20, .45); border-radius: 50%; }
.pfx-stamp .pfx-l { width: 24px; height: 24px; stroke-width: 28; }
.course.pfx-stamped { padding-right: 64px; }

/* ── 맨 위 스크롤 진행 막대(네 기둥 색 구간이 왼쪽부터 차오름) ── */
.pfx-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; background: rgba(20, 33, 61, .06); }
.pfx-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--pl-L) 0 25%, var(--pl-S) 25% 50%, var(--pl-E) 50% 75%, var(--pl-R) 75% 100%); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.pfx-bar i::after { content: ""; position: absolute; top: -2px; left: calc(var(--p, 0) * 100% - 4px); width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(201, 162, 75, .8); }

/* ── 바닥 위 네 단어 큰 글자 띠(천천히 흐름) + 바닥 큰 로고 윤곽선 ── */
.pfx-words { overflow: hidden; padding: var(--s6) 0; background: var(--champagne); border-top: 1px solid rgba(201, 162, 75, .25); }
.pfx-words-track { display: flex; width: max-content; }
.pfx-words-set { display: flex; align-items: center; gap: clamp(20px, 3.4vw, 52px); padding-right: clamp(20px, 3.4vw, 52px); }
.pfx-words b { font-size: clamp(2.25rem, 1.2rem + 5vw, 5.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; white-space: nowrap; }
.pfx-words b.w-L { color: transparent; -webkit-text-stroke: 1.5px var(--pl-L); }
.pfx-words b.w-S { color: color-mix(in srgb, var(--pl-S) 88%, #fff); }
.pfx-words b.w-E { color: transparent; -webkit-text-stroke: 1.5px var(--pl-E); }
.pfx-words b.w-R { color: var(--c-accent-deep); }
.pfx-words i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c-accent); opacity: .55; }
.site-footer { position: relative; overflow: hidden; }
.site-footer .wrap { position: relative; z-index: 1; }
.pfx-foot-logo { position: absolute; right: -36px; bottom: -64px; width: clamp(220px, 26vw, 360px); aspect-ratio: 1; color: rgba(201, 162, 75, .16); pointer-events: none; }
.pfx-foot-logo .pfx-l { stroke-width: 4; }

/* ── 여는 화면(첫 방문 1번): 로고 선 → 금색 채움 → Literacy · Structure · Expression · Result ── */
.pfx-intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; color: #fff; transition: opacity .55s ease, visibility .55s;
  background: radial-gradient(60% 60% at 50% 44%, #233371 0%, #111B38 62%, #0B1226 100%); }
.pfx-intro.is-out { opacity: 0; visibility: hidden; }
html.pfx-intro-on { overflow: hidden; }
.pfx-intro-in { display: grid; justify-items: center; gap: var(--s4); padding: var(--s5); text-align: center; }
.pfx-intro-logo { position: relative; width: 132px; height: 132px; }
.pfx-intro-logo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.9); transition: opacity .45s ease, transform .7s cubic-bezier(.3, 1.5, .5, 1); }
.pfx-intro-logo .pfx-l { position: absolute; inset: 0; color: var(--c-accent); stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity .4s ease; }
.pfx-intro.is-draw .pfx-intro-logo .pfx-l { animation: pfx-draw .9s cubic-bezier(.6, 0, .3, 1) forwards; }
.pfx-intro.is-run .pfx-intro-logo img { opacity: 1; transform: none; transition-delay: .8s; }
.pfx-intro.is-run .pfx-intro-logo .pfx-l { opacity: 0; transition-delay: 1.05s; }
.pfx-intro-name { margin-top: var(--s2); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); }
.pfx-intro.is-run .pfx-intro-name { opacity: 1; transform: none; transition-delay: .9s; }
.pfx-intro-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.pfx-intro-words li { color: rgba(255, 255, 255, .35); opacity: .2; transform: translateY(6px); transition: color .35s, opacity .35s, transform .45s var(--ease); }
.pfx-intro-words li.w-L { --wc: #57C9C1; } .pfx-intro-words li.w-S { --wc: #9A9EF4; } .pfx-intro-words li.w-E { --wc: #79C8F5; } .pfx-intro-words li.w-R { --wc: #EBC874; }
.pfx-intro.is-run .pfx-intro-words li { color: var(--wc); opacity: 1; transform: none; transition-delay: calc(1.1s + var(--i) * .15s); }
.pfx-intro-skip { position: absolute; right: var(--s5); bottom: var(--s6); padding: 8px 18px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .85); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.pfx-intro-skip:hover, .pfx-intro-skip:focus-visible { background: rgba(255, 255, 255, .16); border-color: #fff; }

/* ── 남색 줄이기(메인 말고 쪽들): 번갈이 칸 = 샴페인 금빛, 상담 띠 = 청록→남보라, 흰 칸은 쪽 색으로 아주 옅게 ── */
body:not([data-page="home"]):not([data-page="admin"]) main > .sec:not(.sec-alt):not(.cta-band) { background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--page-c1) 5%, #fff) 100%); }
body:not([data-page="home"]):not([data-page="admin"]) .sec-alt { background: var(--champagne); border-color: rgba(201, 162, 75, .22); }
body:not([data-page="home"]):not([data-page="admin"]) .cta-band { background: radial-gradient(60% 130% at 92% 0%, rgba(201, 162, 75, .24), transparent 60%), var(--gold-lines), var(--deep-tv); }
.nx-box.box-academy { background: var(--gold-lines), var(--deep-tv); }
.hf-badge { background: linear-gradient(140deg, #E8BF66, #B98A2F); color: #2A1E14; }
.cal-months button[aria-pressed="true"] { background: var(--c-pop1); border-color: var(--c-pop1); color: var(--c-pop1-ink); }
.lt-date[aria-selected="true"], .lt-wheel-band { background: var(--deep-tv); border-color: transparent; }
.tour-dots button[aria-current="true"]::before { background: var(--page-c1); }
.fq-item[open] .fq-mark { background: var(--c-elem); border-color: var(--c-elem); }
.en-item[open] .en-mark { background: var(--c-mid); border-color: var(--c-mid); }

/* ── 10-1 남은 클래스 ── */
.board-count { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.notice-split { display: grid; gap: var(--s5); }
@media (min-width: 1024px) { .notice-split { grid-template-columns: 1fr 1fr; align-items: start; } }
.admin-summary { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.admin-summary li { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px var(--s3); border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-size: var(--fs-xs); }
.admin-summary b { font-size: var(--fs-sm); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.consult-card .cc-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.consult-card .cc-head time { margin-left: auto; font-size: var(--fs-xs); color: var(--c-faint); }
.consult-card.is-lt { border-left: 3px solid var(--c-elem); }
.st-select, .memo-input { min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: #fff; font: inherit; font-size: var(--fs-sm); color: var(--c-ink); }
.memo-input { width: 100%; min-width: 10em; }
.manual-tag { display: inline-block; padding: 1px var(--s2); border-radius: 3px; background: color-mix(in srgb, var(--c-elem) 12%, #fff); font-size: 11px; font-weight: 700; color: var(--c-elem); }
.admin-notice-list { display: grid; gap: 1px; border-top: 1px solid var(--c-ink); }
.admin-notice-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.admin-notice-list li.is-pin { background: var(--c-accent-soft); }
.admin-notice-list .bi-title { flex: 1; min-width: 0; color: var(--c-ink); }

/* ── 움직임(움직임 줄이기면 위 모양 그대로 멈춰 보임) ── */
@media (prefers-reduced-motion: no-preference) {
  /* 로고 무늬: 큰 로고 선이 그려지고 둥실 · 고리 천천히 돌기 · 작은 로고 떠다님 + 색이 서서히 바뀜(두 겹 겹쳐 opacity) */
  html.pfx .pfx-big .pfx-l { stroke-dasharray: 1; animation: pfx-draw 2.2s cubic-bezier(.6, 0, .3, 1) .2s backwards; }
  html.pfx .pfx-big { animation: pfx-bob 9s ease-in-out 2.4s infinite alternate; }
  html.pfx .pfx-ring { animation: pfx-spin 70s linear infinite; }
  html.pfx .pfx-mini { animation: pfx-float var(--t) ease-in-out var(--dl) infinite alternate; }
  html.pfx .pfx-mini > i:first-child .pfx-l { animation: pfx-pop .8s cubic-bezier(.3, 1.5, .5, 1) var(--in) backwards; }
  html.pfx .pfx-mini i.b { animation: pfx-swap var(--cy) ease-in-out var(--dl) infinite; }
  /* 한눈 요약 카드: 기본 = 아래에서 차례로 (backwards — 올림 움직임과 안 싸움) */
  html.pfx .pfx-gc { animation: pfx-card-up .8s cubic-bezier(.16, 1, .3, 1) calc(.35s + var(--i) * .09s) backwards; }
  /* 소개: 제목 한 자씩 */
  html.pfx body[data-page="about"] .page-hero h1 { animation: none; }
  html.pfx .pfx-ch { display: inline-block; animation: pfx-char .55s cubic-bezier(.2, .9, .3, 1.3) calc(.15s + var(--i) * .06s) backwards; }
  /* 명예의 전당: 조명이 깜빡 켜진 뒤 좌우 살랑, 빛 줄기, 카드는 조명 뒤에 밝아짐 */
  html.pfx .pfx-beam { animation: pfx-light 1s ease-out calc(.2s + var(--i) * .35s) backwards, pfx-sway 8s ease-in-out calc(1.4s + var(--i) * .7s) infinite alternate; }
  html.pfx .pfx-sweep { animation: pfx-sweep 9s ease-in-out 2.2s infinite; }
  html.pfx body[data-page="hall"] .pfx-gc { animation: pfx-spot 1s ease calc(1.1s + var(--i) * .14s) backwards; }
  /* 교육 과정: 계단이 차례로 올라오고 카드도 계단처럼 */
  html.pfx .pfx-stairs i { animation: pfx-grow-y .7s cubic-bezier(.2, .9, .3, 1.25) calc(.3s + var(--i) * .18s) backwards; }
  html.pfx body[data-page="courses"] .pfx-gc { animation: pfx-stair .8s cubic-bezier(.2, .9, .3, 1.15) calc(.45s + var(--i) * .13s) backwards; }
  /* 내신: 학교 카드가 부채꼴로 펼쳐짐 */
  html.pfx body[data-page="naesin"] .pfx-gc { animation: pfx-fan 1s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i) * .05s) backwards; }
  /* 시간표: 표 칸이 물결처럼 켜지고(한 번 + 은은한 물결), 카드도 물결 */
  html.pfx .pfx-grid i { animation: pfx-cell 1s ease calc(.2s + var(--i) * .07s) backwards, pfx-wave 6s ease-in-out calc(1.6s + var(--i) * .12s) infinite; }
  html.pfx body[data-page="timetable"] .pfx-gc { animation: pfx-wave-in .8s cubic-bezier(.3, 1.4, .5, 1) calc(.3s + var(--i) * .08s) backwards; }
  /* 학사 일정: 달력 장이 넘겨지고, 카드도 위에서 넘어오듯 */
  html.pfx .pfx-sheets i:not(:last-child) { animation: pfx-flip .9s cubic-bezier(.5, 0, .7, .4) calc(.5s + var(--i) * .45s) forwards; }
  html.pfx body[data-page="calendar"] .pfx-glance { perspective: 900px; }
  html.pfx body[data-page="calendar"] .pfx-gc { transform-origin: 50% 0; animation: pfx-page .8s cubic-bezier(.2, .8, .3, 1) calc(.4s + var(--i) * .1s) backwards; }
  /* 공지: 종이가 위에서 떨어져 쌓이고, 카드도 */
  html.pfx .pfx-papers i { animation: pfx-drop .7s cubic-bezier(.2, .8, .3, 1.15) calc(.3s + var(--i) * .2s) backwards; }
  html.pfx body[data-page="notice"] .pfx-gc { animation: pfx-drop-card .7s cubic-bezier(.2, .8, .3, 1.15) calc(.5s + var(--i) * .12s) backwards; }
  /* 소식: 카드가 오른쪽에서 흘러 들어옴 */
  html.pfx body[data-page="news"] .pfx-gc { animation: pfx-flow .9s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i) * .1s) backwards; }
  /* 교육 뉴스: 신문 띠가 흐르고, 카드는 왼쪽에서 */
  html.pfx .pfx-ticker-track { animation: pfx-marq 60s linear infinite; }
  html.pfx .pfx-ticker:hover .pfx-ticker-track { animation-play-state: paused; }
  html.pfx body[data-page="edunews"] .pfx-gc { animation: pfx-from-left .8s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i) * .09s) backwards; }
  /* FAQ: 물음표가 느낌표로(7초마다), 카드는 톡 */
  html.pfx .pfx-qa .q { animation: pfx-q 7s ease-in-out 1s infinite; }
  html.pfx .pfx-qa .x { animation: pfx-x 7s cubic-bezier(.3, 1.5, .5, 1) 1s infinite; }
  html.pfx body[data-page="faq"] .pfx-gc { animation: pfx-pop-card .6s cubic-bezier(.3, 1.5, .5, 1) calc(.3s + var(--i) * .08s) backwards; }
  /* 둘러보기: 사진기가 당기듯 확대에서 제자리로 */
  html.pfx body[data-page="tour"] .pfx-tilt { animation: pfx-zoom 1.6s cubic-bezier(.16, 1, .3, 1) both; }
  html.pfx body[data-page="tour"] .pfx-gc { animation: pfx-zoom-card 1s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i) * .1s) backwards; }
  /* 오시는 길: 약도 선이 그려지고 핀이 톡 + 퍼지는 빛 */
  html.pfx .pfx-route path { stroke-dasharray: 1; animation: pfx-draw 1.8s ease .4s backwards; }
  html.pfx .pfx-route circle { animation: pfx-pin .5s cubic-bezier(.3, 1.6, .5, 1) 2.1s backwards, pfx-ping 2.4s ease-out 2.6s infinite; }
  /* 레벨 테스트: 눈금이 차례로 켜지며 막대가 차오름 */
  html.pfx .pfx-gauge .fill { animation: pfx-fill 1.6s cubic-bezier(.4, 0, .2, 1) .4s backwards; }
  html.pfx .pfx-gauge .tick { animation: pfx-tick .3s ease calc(.45s + var(--i) * .17s) forwards; }
  html.pfx body[data-page="leveltest"] .pfx-gc { animation: pfx-rise-scale .8s cubic-bezier(.2, .9, .3, 1.2) calc(.5s + var(--i) * .12s) backwards; }
  /* 칸 사이 장식 점 숨쉬기 · 도장 찍힘 · 네 단어 띠 · 진행 막대 끝 빛 */
  html.pfx .pfx-div i { animation: pfx-dot 3.2s ease-in-out infinite; }
  html.pfx .pfx-div .d-S { animation-delay: .4s; } html.pfx .pfx-div .d-E { animation-delay: .8s; } html.pfx .pfx-div .d-R { animation-delay: 1.2s; }
  html.pfx .pfx-stamp { animation: pfx-stamp .6s cubic-bezier(.3, 1.6, .5, 1) .3s backwards; }
  html.pfx .pfx-words-track { animation: pfx-marq 80s linear infinite; }
  html.pfx .pfx-words:hover .pfx-words-track { animation-play-state: paused; }
}
@keyframes pfx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pfx-bob { from { transform: translateY(-6px) rotate(-2deg); } to { transform: translateY(8px) rotate(2deg); } }
@keyframes pfx-spin { to { transform: rotate(360deg); } }
@keyframes pfx-float { from { transform: translate(0, 0) rotate(var(--r)); } to { transform: translate(12px, -18px) rotate(calc(var(--r) + 28deg)); } }
@keyframes pfx-swap { 0%, 30% { opacity: 0; } 50%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pfx-pop { from { opacity: 0; transform: scale(.3) rotate(-40deg); } }
@keyframes pfx-card-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes pfx-char { from { opacity: 0; transform: translateY(.6em) rotate(8deg) scale(.8); } }
@keyframes pfx-light { 0% { opacity: 0; } 25% { opacity: .9; } 38% { opacity: .2; } 55% { opacity: 1; } 100% { opacity: .85; } }
@keyframes pfx-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes pfx-sweep { 0% { opacity: 0; transform: translateX(0) skewX(-18deg); } 10% { opacity: 1; } 45% { opacity: 1; transform: translateX(560%) skewX(-18deg); } 50%, 100% { opacity: 0; transform: translateX(560%) skewX(-18deg); } }
@keyframes pfx-spot { 0% { opacity: 0; transform: scale(.94); } 40% { opacity: .35; } 100% { opacity: 1; transform: none; } }
@keyframes pfx-grow-y { from { transform: scaleY(0); } }
@keyframes pfx-stair { from { opacity: 0; transform: translateY(calc(50px + var(--i) * 16px)); } }
@keyframes pfx-fan { from { opacity: 0; transform: translateX(calc(var(--k) * -78%)) translateY(36px) rotate(calc(var(--k) * -10deg)); } }
@keyframes pfx-cell { 0% { opacity: .05; transform: scale(.4); } 55% { opacity: .95; transform: scale(1.15); } 100% { opacity: .22; transform: none; } }
@keyframes pfx-wave { 0%, 80%, 100% { opacity: .22; } 88% { opacity: .75; } }
@keyframes pfx-wave-in { from { opacity: 0; transform: translateY(20px) scale(.88); } }
@keyframes pfx-flip { to { transform: rotateX(-108deg); opacity: 0; } }
@keyframes pfx-page { from { opacity: 0; transform: rotateX(-75deg); } }
@keyframes pfx-drop { from { opacity: 0; transform: translateY(-140px) rotate(calc(var(--rot) * -3)); } to { opacity: 1; transform: rotate(var(--rot)); } }
@keyframes pfx-drop-card { from { opacity: 0; transform: translateY(-40px) rotate(-2.5deg); } }
@keyframes pfx-flow { from { opacity: 0; transform: translateX(90px); } }
@keyframes pfx-from-left { from { opacity: 0; transform: translateX(-70px); } }
@keyframes pfx-marq { to { transform: translateX(-50%); } }
@keyframes pfx-q { 0%, 38% { opacity: 1; transform: none; } 48%, 90% { opacity: 0; transform: rotateY(90deg) scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes pfx-x { 0%, 44% { opacity: 0; transform: scale(.2); } 54%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scale(.2); } }
@keyframes pfx-pop-card { from { opacity: 0; transform: scale(.82); } }
@keyframes pfx-zoom { from { scale: 1.6; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes pfx-zoom-card { from { opacity: 0; transform: scale(1.18); } }
@keyframes pfx-pin { from { transform: scale(0); } }
@keyframes pfx-ping { 0% { stroke-width: 3; stroke-opacity: 1; } 100% { stroke-width: 26; stroke-opacity: 0; } }
@keyframes pfx-fill { from { transform: scaleX(0); } }
@keyframes pfx-tick { to { opacity: 1; transform: scaleY(1.5); background: var(--c-accent-deep); } }
@keyframes pfx-rise-scale { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes pfx-dot { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .45; transform: scale(.7); } }
@keyframes pfx-stamp { from { opacity: 0; transform: scale(2.2) rotate(-40deg); } to { opacity: 1; transform: rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) {
  .pfx-intro { display: none; }
  .pfx-words-track, .pfx-ticker-track { flex-wrap: wrap; width: auto; }
  .pfx-words-set ~ .pfx-words-set, .pfx-ticker-track span:nth-child(n + 9) { display: none; }
  .pfx-tilt { transition: none; }
  .pfx-sheets i:not(:last-child) { display: none; }
}
@media print { .pfx-art, .pfx-motif, .pfx-bar, .pfx-words, .pfx-div, .pfx-intro, .pfx-foot-logo { display: none !important; } }

/* 철학·인사말·10년·LSER (10-11 밤) — 밤작업_순서 10-18 · 10-19 · 10-20 · 10-21. 스킬 center-homepage references/philosophy-lser.md
   그림 assets/lser/{L,S,E,R,stairs,badge,laurel}.svg(우리가 그린 것, 바탕 투명 — 샴페인 .lser-on-champagne · 청록→남보라 .lser-on-deep 바탕은 여기서).
   움직임은 html.lx(about-fx.js) 또는 .reveal.is-in(fx.js) + 움직임 줄이기 아님일 때만, 그림의 멈춘 모양 = 다 그려진 모양(화면 찍기·JS 없음에서도 다 보임) */

/* ── ① 머리 메뉴 두 줄 글씨: 위 한글(굵게) · 아래 작은 영어(menuEn), 지금 쪽은 영어 줄이 금색 ── */
.gnb .gnb-ko { display: block; }
.gnb .gnb-en { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; line-height: 1.2; color: var(--c-faint); white-space: nowrap; transition: color .15s; }
.gnb a.is-current .gnb-en, .gnb-group.is-current > .gnb-parent .gnb-en { color: var(--c-accent); font-weight: 700; text-shadow: 0 0 10px color-mix(in srgb, var(--c-accent) 45%, transparent); }
.gnb a:hover .gnb-en { color: var(--c-accent-deep); }
@media (max-width: 1023px) {
  .gnb.is-open a { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; }
  .gnb.is-open .gnb-en { font-size: 11px; }
}
@media (min-width: 1024px) {
  .gnb > a, .gnb .gnb-parent { display: flex; flex-direction: column; align-items: center; padding-top: 4px; padding-bottom: 4px; line-height: 1.2; }
  .gnb .gnb-ko { font-weight: 700; color: var(--c-ink); }
  .gnb > a:not(.is-current) .gnb-ko, .gnb .gnb-parent:not(.is-current) .gnb-ko { font-weight: 600; color: var(--c-text); }
  .gnb > a:hover .gnb-ko, .gnb .gnb-parent:hover .gnb-ko { color: var(--c-ink); }
  .gnb .gnb-en { margin-top: 2px; }
  .gnb .gnb-sub a { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
  .gnb .gnb-sub .gnb-en { margin-top: 1px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .gnb .gnb-en { font-size: 9px; letter-spacing: .04em; } }

/* ── 두 바탕(원장님 고른 것): 샴페인 금빛(밝은 칸) · 청록→남보라(진한 칸) ── */
.lser-on-champagne { background: radial-gradient(70% 90% at 88% 10%, rgba(201, 162, 75, .28), transparent 62%), var(--champagne); color: #8A6A22; }
.lser-on-deep { background: radial-gradient(circle at 50% 42%, rgba(243, 213, 138, .32), transparent 58%), var(--deep-tv); color: #F3D58A; }
.svg-in { display: block; }
.svg-in > svg { display: block; width: 100%; height: auto; }

/* ── ② 학원 소개 「교육 철학」(#philosophy) — 크림 바탕 · 그림 카드 4장(계단처럼) · 흐름 그림 ── */
.sec-philo { background: radial-gradient(50% 60% at 50% 0%, rgba(201, 162, 75, .16), transparent 70%), var(--c-cream); }
.sec-philo .sec-head { text-align: center; margin-inline: auto; }
.sec-philo .sec-head h2 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); letter-spacing: -.035em; }
.ph-top { max-width: 46em; margin: var(--s3) auto 0; text-align: center; }
.ph-motto { display: inline-flex; align-items: center; gap: var(--s4); font-size: clamp(1.125rem, .95rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: #8A6A22; }
.ph-motto::before, .ph-motto::after { content: ""; flex: none; width: 36px; height: 2px; background: linear-gradient(90deg, transparent, var(--c-accent)); }
.ph-motto::after { transform: scaleX(-1); }
.ph-lead { margin-top: var(--s3); color: var(--c-text); line-height: 1.75; }
.ph-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin: var(--s7) 0 0; padding: 0; list-style: none; }
.ph-card { --k: var(--pl-L); position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px var(--s3) var(--s5); text-align: center;
  background: color-mix(in srgb, var(--k) 8%, #fff); border: 2px solid color-mix(in srgb, var(--k) 42%, #fff); border-radius: 18px; box-shadow: var(--shadow); transition: box-shadow .25s; }
.ph-card::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 10px; border-radius: 18px 18px 0 0; background: var(--k); }
.ph-card:hover { box-shadow: var(--shadow-up); }
.ph-card.pc-S { --k: var(--pl-S); } .ph-card.pc-E { --k: var(--pl-E); } .ph-card.pc-R { --k: var(--pl-R); }
.lx-art { width: 100%; max-width: 220px; aspect-ratio: 240 / 200; margin: var(--s2) auto var(--s2); }
.lx-art.lx-R { aspect-ratio: 240 / 220; }
.lx-art.lx-S { overflow: hidden; }
.lx-art > img, .lx-art .svg-in, .lx-art .svg-in > svg { display: block; width: 100%; height: 100%; }
.pc-en { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: color-mix(in srgb, var(--k) 80%, #0B1020); }
.pc-ko { margin-top: 4px; font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); }
.pc-text { margin-top: var(--s2); font-size: var(--fs-xs); line-height: 1.6; color: var(--c-text); }
.pc-stage { margin-top: auto; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--k) 16%, #fff); color: color-mix(in srgb, var(--k) 72%, #0B1020); font-size: var(--fs-xs); font-weight: 700; }
.pc-text + .pc-stage { margin-top: var(--s3); }
@media (min-width: 768px) { .pc-text { font-size: var(--fs-sm); } .ph-cards { gap: var(--s5); } }
@media (min-width: 1024px) {
  .ph-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; align-items: start; }
  .ph-card { margin-top: calc((3 - var(--i, 0)) * 28px); }   /* 초→고 계단 */
  .ph-card:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: 34%; border: 9px solid transparent; border-left: 14px solid var(--c-pop1); }   /* 흐름 화살표(산호) */
}
/* 그림 안 움직임 — 카드마다 1번(.lx-art.is-play, about-fx.js), 마우스 올리면 다시 */
.lx-art svg * { transform-box: fill-box; }
.lx-art .l-line, .lx-art .e-ink, .lx-art .r-arrow-line, .lser-badge .bd-seg path, .ph-mini .st-line { stroke-dasharray: 1 1; }
.lx-art .l-leaf { transform-box: view-box; transform-origin: 120px 0; }
@media (prefers-reduced-motion: no-preference) {
  html.lx .ph-cards.is-in .ph-card { animation: lx-stair .85s var(--ease) calc(.1s + var(--i, 0) * .2s) backwards; }
  /* L: 책장이 넘어가며 줄이 그려짐 */
  .lx-art.is-play .l-letter { transform-origin: 50% 100%; animation: lx-pop .55s cubic-bezier(.3, 1.5, .5, 1) .1s backwards; }
  .lx-art.is-play .l-leaf { animation: lx-leaf 1.05s cubic-bezier(.45, .05, .35, 1) .15s both; }
  .lx-art.is-play .l-line { animation: lx-draw .5s var(--ease) calc(.9s + var(--n, 0) * .12s) backwards; }
  /* S: 블록이 위에서 떨어져 아래부터 쌓임 */
  .lx-art.is-play .s-b { animation: lx-drop .6s cubic-bezier(.3, 1.35, .55, 1) calc((4 - var(--n, 0)) * .15s) backwards; }
  /* E: 말풍선 튀어나옴 → 펜이 줄을 그음 */
  .lx-art.is-play .e-bub { transform-origin: 18% 96%; animation: lx-pop .6s cubic-bezier(.3, 1.6, .5, 1) backwards; }
  .lx-art.is-play .e-letter { transform-origin: 50% 50%; animation: lx-pop .45s cubic-bezier(.3, 1.6, .5, 1) .35s backwards; }
  .lx-art.is-play .e-pen { animation: lx-pen 1.3s var(--ease) .45s backwards; }
  .lx-art.is-play .e-ink { animation: lx-draw .75s ease-in-out 1s backwards; }
  /* R: 메달이 돌며 반짝 · 별 · 화살표 솟음 */
  .lx-art.is-play .r-medal { transform-origin: 50% 50%; animation: lx-coin 1.15s ease-in-out backwards; }
  .lx-art.is-play .r-laurel, .lx-art.is-play .r-ribbon { animation: lx-fade .6s ease .2s backwards; }
  .lx-art.is-play .r-shine { animation: lx-shine 1.3s ease 1s backwards; }
  .lx-art.is-play .r-star { transform-origin: 50% 50%; animation: lx-pop .45s cubic-bezier(.3, 1.7, .5, 1) 1.05s backwards; }
  .lx-art.is-play .r-star.s2 { animation-delay: 1.17s; } .lx-art.is-play .r-star.s3 { animation-delay: 1.29s; }
  .lx-art.is-play .r-arrow { animation: lx-rise .7s cubic-bezier(.3, 1.4, .5, 1) 1.2s backwards; }
  .lx-art.is-play .r-arrow-line { animation: lx-draw .5s var(--ease) 1.25s backwards; }
}

/* ⑤ 흐름 그림: L → S → E → R 길 + 아래 단계 띠, 스크롤 따라 빛(--p, about-fx.js)이 흐르고 지난 기둥은 켜진 채 */
.ph-flow { max-width: 980px; margin: var(--s7) auto 0; padding: var(--s5) var(--s3) var(--s4); background: #fff; border: 1px solid rgba(201, 162, 75, .32); border-radius: 18px; box-shadow: var(--shadow); }
.pf-wrap { position: relative; }
.pf-track { position: absolute; left: 12.5%; right: 12.5%; top: 26px; height: 6px; margin-top: -3px; border-radius: 3px; background: #ECE6D8; }
.pf-track::after { content: ""; position: absolute; right: -16px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 12px solid var(--c-pop1); }
.pf-lit { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pl-L), var(--pl-S) 36%, var(--pl-E) 66%, var(--pl-R)); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.pf-dot { position: absolute; top: 50%; left: calc(var(--p, 1) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--c-accent), 0 0 18px 7px rgba(201, 162, 75, .55); }
.pf-nodes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; text-align: center; }
.pf-node { --k: var(--pl-L); display: grid; justify-items: center; gap: 2px; }
.pf-node.pn-S { --k: var(--pl-S); } .pf-node.pn-E { --k: var(--pl-E); } .pf-node.pn-R { --k: var(--pl-R); }
.pf-node b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--k); color: #fff; font-size: 1.5rem; font-weight: 800; box-shadow: 0 0 0 5px #fff; transition: filter .5s, opacity .5s, transform .5s cubic-bezier(.3, 1.6, .5, 1), box-shadow .5s; }
.pf-node span { margin-top: 6px; font-size: var(--fs-sm); font-weight: 800; color: color-mix(in srgb, var(--k) 80%, #0B1020); }
.pf-node small { font-size: var(--fs-xs); color: var(--c-muted); }
.pf-node.is-on b { box-shadow: 0 0 0 5px #fff, 0 0 0 9px color-mix(in srgb, var(--k) 28%, transparent); }
html.lx .pf-node:not(.is-on) b { filter: grayscale(1); opacity: .35; transform: scale(.82); }
.pf-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--s4) 0 0; padding: 8px 0; list-style: none; border-radius: 999px; text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-elem) 16%, #fff), color-mix(in srgb, var(--c-mid) 15%, #fff) 50%, color-mix(in srgb, var(--c-accent) 26%, #fff)); }
.pf-stages li { position: relative; }
.pf-stages li:not(:last-child)::after { content: "\203A"; position: absolute; right: -3px; color: var(--c-faint); }
@media (max-width: 479px) { .pf-node b { width: 42px; height: 42px; font-size: 1.2rem; } .pf-track { top: 21px; } .pf-node span { font-size: 12px; } .pf-node small { font-size: 11px; } }

/* ── ③ 원장 인사말(#greeting) — 샴페인 바탕 · 큰 따옴표 · 문단 차례로 · 금색 선 서명 · 사진 없으면 원형 배지 ── */
.sec-greet { position: relative; overflow: hidden; background: var(--champagne); }
.gr-grid { display: grid; gap: var(--s6); }
.gr-side { position: relative; }
.gr-quote { position: absolute; left: -.08em; top: -.42em; font-size: clamp(7rem, 5rem + 6vw, 11rem); font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--c-accent) 40%, transparent); pointer-events: none; }
.gr-side .eyebrow, .gr-side h2 { position: relative; }
.gr-side h2 { margin-top: var(--s2); font-size: var(--fs-2xl); line-height: 1.3; letter-spacing: -.03em; color: var(--c-ink); }
.gr-photo { max-width: 240px; margin: var(--s6) 0 0; }
.gr-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.gr-body { padding: var(--s5); background: rgba(255, 255, 255, .78); border: 1px solid rgba(201, 162, 75, .3); border-radius: 18px; box-shadow: var(--shadow); }
.gr-p { margin: 0 0 var(--s4); line-height: 1.85; color: var(--c-text); }
.gr-p:first-child { font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); }
.gr-sign { display: flex; justify-content: flex-end; margin: var(--s5) 0 0; }
.gr-sign span { position: relative; padding: 0 0 10px 64px; font-size: var(--fs-lg); font-weight: 800; letter-spacing: .02em; color: var(--c-ink); }
.gr-sign span::before { content: ""; position: absolute; left: 0; top: .75em; width: 50px; height: 2px; background: var(--c-accent); }
.gr-sign span::after { content: ""; position: absolute; left: 64px; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 20%, transparent)); transform-origin: 0 50%; }
@media (min-width: 900px) { .gr-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; } .gr-photo { max-width: 300px; } .gr-body { padding: var(--s7); } }
@media (max-width: 899px) { .gr-photo { margin-inline: auto; } }
@media (prefers-reduced-motion: no-preference) {
  .gr-sign.reveal.is-in span::after { animation: lx-grow-x .9s var(--ease) calc(var(--d, 0s) + .3s) backwards; }
  .gr-side.reveal.is-in .bd-seg path { animation: lx-draw 1s var(--ease) calc(.3s + var(--n, 0) * .18s) backwards; }
  .gr-side.reveal.is-in .lb-logo { animation: lx-pop-c .6s cubic-bezier(.3, 1.5, .5, 1) 1s backwards; }
}
/* 원형 배지(badge.svg 위에 센터 로고) */
.lser-badge { position: relative; aspect-ratio: 1; padding: 6%; border-radius: 50%; box-shadow: var(--shadow-up); }
.lser-badge > img:first-child, .lser-badge > .svg-in, .lser-badge > .svg-in > svg { display: block; width: 100%; height: 100%; }
.lser-badge .lb-logo { position: absolute; left: 50%; top: calc(6% + 88% * .395); width: 23%; height: auto; transform: translate(-50%, -50%); }

/* ── ④ 운영 10년: 숫자 띠 5칸(PC 5칸 · 패드 3+2 · 휴대폰 2열+1) + 「10년」 금색 월계수 ── */
.stats > .stat:nth-child(odd):last-child { grid-column: 1 / -1; border-right: 0; }
@media (min-width: 768px) {
  .stats:has(> .stat:nth-child(5):last-child) { grid-template-columns: repeat(3, 1fr); }
  .stats > .stat:nth-child(odd):last-child { grid-column: auto; }
  .stats:has(> .stat:nth-child(5):last-child) > .stat:nth-child(3) { border-right: 0; }
}
@media (min-width: 1024px) {
  .stats:has(> .stat:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
  .stats:has(> .stat:nth-child(5):last-child) > .stat:nth-child(3) { border-right: 1px solid var(--c-line); }
  .stats-band:has(> .stat:nth-child(5):last-child) .stat, .stats-band:has(> .stat:nth-child(5):last-child) .stat:nth-child(even) { padding: var(--s5); }
  .stats-band:has(> .stat:nth-child(5):last-child) .stat-num { font-size: clamp(1.875rem, 1rem + 1.7vw, 2.875rem); }
}
.stat.is-years .stat-num, .fin-nums .fin-years b { position: relative; display: inline-block; isolation: isolate; padding: 0 .58em; }
.stat.is-years .stat-num::before, .fin-nums .fin-years b::before { content: ""; position: absolute; z-index: -1; inset: -.38em 0 -.34em; background: url("assets/lser/laurel.svg") center / 100% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .stat.is-years .stat-num.is-done::before, .sec-finale:is(.is-lit, .fp-in) .fin-years b::before { animation: lx-laurel 1s cubic-bezier(.3, 1.4, .5, 1) backwards; }
}

/* ── 메인 짧은 판(「왜 ○○인가요」 칸 머리) — 계단 그림 샴페인 바탕 + 표어 ── */
.ph-mini { position: relative; display: grid; gap: var(--s5); align-items: center; margin: 0 0 var(--s7); padding: var(--s6) var(--s5); overflow: hidden; border: 1px solid rgba(201, 162, 75, .38); border-radius: 20px; box-shadow: var(--shadow); color: var(--c-ink); text-decoration: none; transition: box-shadow .25s; }
.ph-mini:hover { box-shadow: var(--shadow-up); }
.pm-text { display: grid; gap: var(--s2); }
.pm-motto { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: #8A6A22; }
.pm-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; color: var(--c-ink); }
.pm-go { justify-self: start; margin-top: var(--s3); padding: 8px 18px; border: 1px solid rgba(138, 106, 34, .4); border-radius: 999px; background: #fff; color: #8A6A22; font-size: var(--fs-sm); font-weight: 700; }
.pm-go::after { content: " \2192"; display: inline-block; transition: transform .2s; }
.ph-mini:hover .pm-go::after { transform: translateX(4px); }
.pm-art, .pm-stairs { display: block; }
.pm-stairs > img { display: block; width: 100%; height: auto; }
.pm-names { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s2); text-align: center; }
.pm-n b { display: block; font-size: var(--fs-sm); font-weight: 800; color: var(--c-ink); }
.pm-n small { display: block; font-size: var(--fs-xs); color: var(--c-muted); }
@media (min-width: 900px) { .ph-mini { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--s7); padding: var(--s7) var(--s8); } }
@media (max-width: 479px) { .pm-n b { font-size: 12px; } .pm-n small { font-size: 11px; } }
.ph-mini .st-b { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .ph-mini.reveal.is-in .st-b { animation: lx-up .75s cubic-bezier(.3, 1.3, .5, 1) calc(.25s + var(--n, 0) * .17s) backwards; }
  .ph-mini.reveal.is-in .st-line { animation: lx-draw .4s var(--ease) calc(.6s + var(--n, 0) * .17s) backwards; }
}

/* ── 커리큘럼 6년 로드맵 위 얇은 기둥 띠(.rm-pillars, curriculum.js) — 휴대폰은 칩 한 줄 ── */
.rm-pillars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s3); }
.rm-pl { --k: var(--pl-L); display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 10px; border-left: 4px solid var(--k); border-radius: 999px; background: color-mix(in srgb, var(--k) 14%, #fff); font-size: var(--fs-xs); color: var(--c-ink); }
.rm-pl.pl-S { --k: var(--pl-S); } .rm-pl.pl-E { --k: var(--pl-E); } .rm-pl.pl-R { --k: var(--pl-R); }
.rm-pl b { font-weight: 800; color: color-mix(in srgb, var(--k) 78%, #0B1020); }
.rm-pl small { color: var(--c-muted); }
@media (min-width: 768px) {
  .rm-pillars { display: grid; grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); gap: 4px var(--s2); }
  .rm-pl { justify-content: center; padding: 3px 6px; border-left: 0; border-top: 3px solid var(--k); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rm-pl small { display: none; }
}

@keyframes lx-stair { from { opacity: 0; transform: translateY(80px) scale(.95); } }
@keyframes lx-pop { from { opacity: 0; transform: scale(0); } }
@keyframes lx-pop-c { from { opacity: 0; transform: translate(-50%, -50%) scale(0); } }
@keyframes lx-leaf { 0% { opacity: 1; transform: scaleX(1); } 85% { opacity: 1; transform: scaleX(-1); } 100% { opacity: 0; transform: scaleX(-1); } }
@keyframes lx-draw { from { stroke-dashoffset: 1; } }
@keyframes lx-drop { 0% { opacity: 0; transform: translateY(-160px); } 40% { opacity: 1; } }
@keyframes lx-pen { 0% { opacity: 0; transform: translate(-70px, -40px); } 35% { opacity: 1; transform: translate(-70px, 0); } 100% { transform: none; } }
@keyframes lx-coin { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scaleX(.08); } 55% { transform: scaleX(1); } 78% { transform: scaleX(.08); } 100% { transform: scaleX(1); } }
@keyframes lx-fade { from { opacity: 0; } }
@keyframes lx-shine { 0% { opacity: 0; } 45% { opacity: 1; stroke-width: 9; } 100% { opacity: .6; } }
@keyframes lx-rise { from { opacity: 0; transform: translate(-28px, 28px); } }
@keyframes lx-up { from { opacity: 0; transform: translateY(40px) scaleY(.35); } }
@keyframes lx-grow-x { from { transform: scaleX(0); } }
@keyframes lx-laurel { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .pf-dot { display: none; } }
@media print { .pf-track, .gr-quote, .ph-card::after { display: none !important; } .ph-card { margin-top: 0 !important; } }

/* 커리큘럼 풍성 (10-11) — curriculum.js rich() · app.js divMeta(). 스킬 center-homepage references/curriculum.md 6
   학년 상세(.rm-detail) 아래: 수업 횟수·반 단계 / 네 기둥 / 영역별 표 / 한 해 흐름 타임라인 / 교재 칩·테스트·관리. 관 색 --k, 기둥 색 --pl-*. 움직임은 .rm-open 때 한 번(차례로), 움직임 줄이기면 없음 */
.rm-x { display: grid; gap: var(--s5); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px dashed color-mix(in srgb, var(--k, var(--c-primary)) 30%, #fff); }
.rm-x-lab { display: block; margin-bottom: var(--s1); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--c-muted); }
.rm-x-facts { display: grid; gap: var(--s3); }
.rm-x-week { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius); background: linear-gradient(120deg, color-mix(in srgb, var(--k) 12%, #fff), var(--c-cream)); }
.rm-x-week .rm-x-lab { flex-basis: 100%; margin: 0; }
.rm-x-week b { font-size: var(--fs-xl); letter-spacing: -.03em; color: var(--k); }
.rm-x-week span { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.rm-x-week small, .rm-x-lv small { flex-basis: 100%; font-size: var(--fs-xs); color: var(--c-muted); }
.rm-x-levels { display: grid; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.rm-x-levels .rm-x-lab { margin: 0; }
.rm-x-lv { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.rm-x-lv > b { font-size: var(--fs-sm); color: var(--c-ink); }
.rm-x-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rm-x-steps li { position: relative; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--k) calc(28% - var(--i, 0) * 5%), #fff); color: var(--c-ink); font-size: var(--fs-xs); font-weight: 700; }
.rm-x-steps li:first-child { background: var(--k); color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 70%, transparent); }
.rm-x-steps li + li::before { content: ""; position: absolute; left: -6px; top: 50%; width: 6px; height: 2px; background: color-mix(in srgb, var(--k) 40%, #fff); }
.rm-x-pl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.rm-x-pl li { --plc: var(--pl-L); display: grid; gap: 2px; padding: var(--s2) var(--s3); border-top: 3px solid var(--plc); border-radius: var(--radius); background: color-mix(in srgb, var(--plc) 9%, #fff); }
.rm-x-pl li.pl-S { --plc: var(--pl-S); } .rm-x-pl li.pl-E { --plc: var(--pl-E); } .rm-x-pl li.pl-R { --plc: var(--pl-R); }
.rm-x-pl b { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: color-mix(in srgb, var(--plc) 75%, #000); }
.rm-x-pl span { font-size: var(--fs-sm); line-height: 1.45; color: var(--c-ink); }
.rm-x-box h4 { margin-bottom: var(--s3); font-size: var(--fs-sm); font-weight: 700; color: var(--c-muted); }
.rm-x-areas { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius); font-size: var(--fs-sm); }
.rm-x-areas th, .rm-x-areas td { padding: var(--s3) var(--s4); text-align: left; vertical-align: top; line-height: 1.55; }
.rm-x-areas tr + tr > * { border-top: 1px solid var(--c-line); }
.rm-x-areas th { width: 8.5em; white-space: nowrap; font-weight: 700; color: var(--k); background: color-mix(in srgb, var(--k) 7%, #fff); }
.rm-x-areas tr:nth-child(even) td { background: #FCFBF8; }
.rm-x-terms { position: relative; display: grid; gap: var(--s3); }
.rm-x-terms li { --tc: var(--k); position: relative; padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 14px); border-radius: var(--radius); background: #fff; border: 1px solid var(--c-line); }
.rm-x-terms li::before { content: ""; position: absolute; left: var(--s3); top: calc(var(--s3) + 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 22%, transparent); }
.rm-x-terms li.tm-su { --tc: var(--c-pop1); background: color-mix(in srgb, var(--c-pop1) 6%, #fff); }
.rm-x-terms li.tm-wi { --tc: var(--c-pop2); background: color-mix(in srgb, var(--c-pop2) 7%, #fff); }
.rm-x-terms b { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; color: color-mix(in srgb, var(--tc) 80%, #000); }
.rm-x-terms p { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.55; color: var(--c-text); }
.rm-x-grid { display: grid; gap: var(--s5); }
.rm-x-books { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rm-x-books li { padding: 6px 12px; border-radius: 8px 8px 8px 2px; border: 1px solid color-mix(in srgb, var(--c-accent) 45%, #fff); background: linear-gradient(180deg, #fff, var(--c-accent-soft)); font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink); box-shadow: inset 3px 0 0 var(--c-accent); }
.rm-x-tests, .rm-x-care { display: grid; gap: var(--s2); }
.rm-x-tests li { display: grid; grid-template-columns: 4.6em 1fr; gap: var(--s2); align-items: baseline; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text); }
.rm-x-tests b { justify-self: start; padding: 1px 8px; border-radius: 999px; background: var(--k); color: #fff; font-size: 11px; white-space: nowrap; }
.rm-x-care li { position: relative; padding-left: var(--s5); font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text); }
.rm-x-care li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 4px; border: solid var(--c-accent-deep); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
@media (min-width: 768px) {
  .rm-x-facts { grid-template-columns: minmax(180px, 1fr) 3fr; align-items: stretch; }
  .rm-x-facts > :only-child { grid-column: 1 / -1; }
  .rm-x-pl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rm-x-terms { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .rm-x-terms::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--s3) + 9px); height: 2px; background: linear-gradient(90deg, var(--k), var(--c-pop1), var(--k), var(--c-pop2)); opacity: .35; }
  .rm-x-terms li { z-index: 1; }
}
@media (min-width: 1024px) { .rm-x-grid { grid-template-columns: 1.1fr 1.4fr 1fr; } }
@media (max-width: 767px) {
  .rm-x-areas, .rm-x-areas tbody, .rm-x-areas tr, .rm-x-areas th, .rm-x-areas td { display: block; width: auto; }
  .rm-x-areas th { padding-bottom: 2px; background: none; }
  .rm-x-areas td { padding-top: 0; }
  .rm-x-areas tr:nth-child(even) td { background: none; }
  .rm-x-terms::before { content: ""; position: absolute; left: calc(var(--s3) + 4px); top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--k), var(--c-pop1), var(--k), var(--c-pop2)); opacity: .3; }
  .rm-x-terms li { z-index: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .rm-detail.rm-open .rm-x-steps li { animation: rmx-pop .4s var(--ease) backwards; animation-delay: calc(.25s + var(--i, 0) * .08s); }
  .rm-detail.rm-open .rm-x-pl li { animation: rmx-up .5s var(--ease) backwards; animation-delay: calc(.2s + var(--i, 0) * .09s); }
  .rm-detail.rm-open .rm-x-areas tr { animation: rmx-slide .45s var(--ease) backwards; animation-delay: calc(.3s + var(--i, 0) * .06s); }
  .rm-detail.rm-open .rm-x-terms li { animation: rmx-up .5s var(--ease) backwards; animation-delay: calc(.45s + var(--i, 0) * .12s); }
  .rm-detail.rm-open .rm-x-terms::before { animation: rmx-grow .9s var(--ease) .4s backwards; transform-origin: 0 0; }
  .rm-x-books li { transition: transform .2s var(--ease), box-shadow .2s; }
  .rm-x-books li:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: inset 3px 0 0 var(--c-accent), 0 4px 10px rgba(20, 33, 61, .1); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) { .rm-detail.rm-open .rm-x-terms::before { animation-name: rmx-grow-y; } }
@keyframes rmx-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes rmx-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes rmx-slide { from { opacity: 0; transform: translateX(-16px); } }
@keyframes rmx-grow { from { transform: scaleX(0); } }
@keyframes rmx-grow-y { from { transform: scaleY(0); } }
/* 관 패널(메인) · 관 머리(교육 과정): 주당 수업 + 대표 교재 칩 */
.dp-week { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }
.dp-week span { flex: none; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--k, var(--c-primary)) 12%, #fff); color: var(--k, var(--c-primary)); font-size: 11px; font-weight: 700; }
.div-panel .dp-week { padding-bottom: var(--s2); }
.div-panel ul.dp-books, .dp-books { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 0 var(--s5); }
.div-panel .dp-books li, .dp-books li { padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-accent) 45%, #fff); background: var(--c-accent-soft); font-size: 11px; font-weight: 700; color: var(--c-ink); }
.div-panel .dp-books li::before { content: none; }
.division-head .dp-week { margin-top: var(--s3); }
.division-head .dp-books { margin-top: var(--s2); padding-bottom: 0; }
#elem .division-head .dp-week span { background: color-mix(in srgb, var(--c-elem) 12%, #fff); color: var(--c-elem); }
#mid .division-head .dp-week span { background: color-mix(in srgb, var(--c-mid) 12%, #fff); color: var(--c-mid); }
@media print { .rm-x-terms::before { display: none; } }

/* 여는 화면 두 배 천천히 (10-11 원장님 「너무 빨리 지나가, 두 배만 천천히」) */
.pfx-intro-logo img { transition: opacity .9s ease, transform 1.4s cubic-bezier(.3, 1.5, .5, 1); }
.pfx-intro.is-draw .pfx-intro-logo .pfx-l { animation-duration: 1.8s; }
.pfx-intro.is-run .pfx-intro-logo img { transition-delay: 1.6s; }
.pfx-intro.is-run .pfx-intro-logo .pfx-l { transition: opacity .8s ease; transition-delay: 2.1s; }
.pfx-intro-name { transition: opacity 1s, transform 1.2s var(--ease); }
.pfx-intro.is-run .pfx-intro-name { transition-delay: 1.8s; }
.pfx-intro-words li { transition: color .7s, opacity .7s, transform .9s var(--ease); }
.pfx-intro.is-run .pfx-intro-words li { transition-delay: calc(2.2s + var(--i) * .3s); }

/* 머리 메뉴 정렬 다시 (10-11 원장님 「위아래 들쭉날쭉·두 줄로 꺾임·밋밋해 → 정렬 다시, 한글 작게, 색 더」) */
@media (min-width: 1024px) {
  .gnb { align-items: stretch !important; gap: 2px !important; }
  .gnb > a, .gnb-group { position: relative; display: flex; align-items: flex-start !important; }
  .gnb > a, .gnb .gnb-parent { justify-content: flex-start; min-height: 44px; padding: 6px 10px 6px !important; border-radius: 10px; transition: background .2s, transform .2s; }
  .gnb .gnb-ko { font-size: 14px; line-height: 20px; white-space: nowrap; letter-spacing: -.02em; }
  .gnb .gnb-en { font-size: 9.5px !important; line-height: 14px; margin-top: 1px !important; letter-spacing: .06em !important; }
  .gnb .gnb-group > .gnb-parent { padding-right: 4px !important; }
  .gnb-sub-toggle { height: 20px !important; margin-top: 6px; width: 16px !important; margin-right: 4px !important; }
  /* 색: 메뉴마다 네 기둥 색 점 + 올리면 그 색 옅은 바탕 */
  .gnb > a, .gnb-group { --mc: #1F8A84; }
  .gnb > :nth-child(4n+2) { --mc: #4B4FA8; } .gnb > :nth-child(4n+3) { --mc: #3BA7E8; } .gnb > :nth-child(4n) { --mc: #C9A24B; }
  .gnb > a::after, .gnb .gnb-parent::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--mc); opacity: .55; transform: scale(.8); transition: all .25s; }
  .gnb-group > .gnb-parent::after { left: calc(50% - 10px); }
  .gnb > a:hover, .gnb .gnb-parent:hover { background: color-mix(in srgb, var(--mc) 10%, transparent); }
  .gnb > a:hover::after, .gnb .gnb-parent:hover::after { opacity: 1; transform: scale(1.15); }
  .gnb > a.is-current, .gnb-group.is-current > .gnb-parent { background: color-mix(in srgb, var(--mc) 14%, transparent); }
  .gnb > a.is-current::after, .gnb-group.is-current > .gnb-parent::after { width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; opacity: 1; transform: none; }
  .gnb > a.is-current .gnb-ko, .gnb-group.is-current > .gnb-parent .gnb-ko { color: var(--mc) !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .gnb .gnb-ko { font-size: 13px; }
  .gnb > a, .gnb .gnb-parent { padding: 6px 7px !important; }
  .gnb .gnb-en { font-size: 8.5px !important; letter-spacing: .03em !important; }
}

/* 여는 화면 → 메인: 천천히 사라지며 메인이 천천히 나타남 (10-11 원장님 「2~3초」) */
.pfx-intro { transition: opacity 2.6s cubic-bezier(.4,0,.2,1), visibility 0s 2.6s !important; }
.pfx-intro.is-out { opacity: 0; visibility: hidden; }
html.pfx-intro-on #main, html.pfx-intro-on .site-header { opacity: .0; }
#main, .site-header { transition: opacity 2.4s ease .3s; }

/* 여는 화면 조금 짧게 (10-11 원장님 「시작이 너무 길다, 줄이자」 — 두 배 → 1.35배, 넘어가기 1.6초) */
.pfx-intro-logo img { transition: opacity .6s ease, transform .95s cubic-bezier(.3, 1.5, .5, 1); }
.pfx-intro.is-draw .pfx-intro-logo .pfx-l { animation-duration: 1.2s; }
.pfx-intro.is-run .pfx-intro-logo img { transition-delay: 1.1s; }
.pfx-intro.is-run .pfx-intro-logo .pfx-l { transition: opacity .55s ease; transition-delay: 1.4s; }
.pfx-intro-name { transition: opacity .7s, transform .8s var(--ease); }
.pfx-intro.is-run .pfx-intro-name { transition-delay: 1.2s; }
.pfx-intro-words li { transition: color .5s, opacity .5s, transform .6s var(--ease); }
.pfx-intro.is-run .pfx-intro-words li { transition-delay: calc(1.5s + var(--i) * .2s); }
.pfx-intro { transition: opacity 1.6s cubic-bezier(.4,0,.2,1), visibility 0s 1.6s !important; }
#main, .site-header { transition: opacity 1.5s ease .2s; }

/* 휴대폰: 메인 「학교별 내신 분석」 띠가 쪽 폭을 밀어내던 문제 (10-11 원장님 「모바일 최적화 맞지?」 점검에서 찾음) */
.sec-naesin-home .wrap, .sec-naesin-home .wrap > *, .naesin-band { min-width: 0; }
.naesin-band { max-width: 100vw; overflow: hidden; }
.nb-track { max-width: 100%; }
html, body { overflow-x: clip; }
.pfx-intro-words { flex-wrap: wrap; justify-content: center; row-gap: 6px; max-width: 92vw; margin-inline: auto; }

/* 공개본: 확인 필요 표시 숨김 */
.note-check{display:none!important}