/* ─────────────────────────────────────────────
   테마 3 · 대비 (Split)
   색: 웜 스톤 + 다크 토프 2색 대립, 브라스(황동) 단일 액센트
   서체: Hahmlet(제목, 각진 모던 세리프) / Gothic A1(본문)
   리듬: 화면을 좌우로 가르는 분할이 사이트 전체 문법. 라벨 열은 sticky, 본문 열만 흐른다.
   ───────────────────────────────────────────── */

:root {
  --stone:   #CFC7B8;
  --stone-2: #DED8CC;
  --stone-3: #B9AF9C;
  --dark:    #2A2724;
  --dark-2:  #211F1C;
  --dark-3:  #3A3631;
  --dark-4:  #1A1815;
  --cream:   #EDE8DE;
  --ink:     #201E1B;
  --ink-2:   #56504A;
  --ink-3:   #56504A;      /* 스톤(#CFC7B8) 위 보조문구 4.7:1 — 이보다 밝으면 AA 미달 */
  --mute-d:  #A79E92;      /* 다크(#2A2724) 위 보조문구 5.6:1 */
  /* 브라스는 두 개다: 밝은 바탕 위 글자는 --brass-d(스톤 대비 4.8:1),
     어두운 바탕 위 글자는 --brass-2(다크 대비 5.6:1). --brass는 선·면 등 비문자 전용. */
  --brass:   #96702C;
  --brass-d: #6A4B14;
  --brass-2: #C09A4F;

  --serif: "Hahmlet", "Nanum Myeongjo", serif;
  --sans: "Gothic A1", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .28, 1);

  /* 분할 비율 — 좌우 지그재그의 기준값 하나로 통일 */
  --split-a: 38%;
  --split-b: 62%;
  --head: 52px;
  --gut: 26px;             /* 바깥 여백(모바일) */
  --gut-lg: 5vw;           /* 바깥 여백(데스크톱) */
}
@media (min-width: 900px) { :root { --head: 60px; } }

body {
  background: var(--stone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
}
[id] { scroll-margin-top: calc(var(--head) + 8px); }

.skip { background: var(--brass-d); color: var(--cream); font-weight: 700; }
.link { color: var(--brass-d); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.link:hover { color: var(--ink); text-decoration-color: var(--brass-d); }
.split--dark .link, .foot__side--dark .link { color: var(--brass-2); }
.split--dark .link:hover, .foot__side--dark .link:hover { color: var(--cream); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.split--dark :focus-visible, .versus :focus-visible, .foot__side--dark :focus-visible, .hero__dark :focus-visible { outline-color: var(--brass-2); }

/* 확인 필요 표시 — 이 사이트에서 "아직 사실이 아님"을 뜻하는 유일한 기호 */
.badge {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 11px;
  letter-spacing: .04em; padding: 2px 8px 3px; border: 1px solid var(--brass-d); color: var(--brass-d);
  white-space: nowrap; line-height: 1.5; vertical-align: 2px;
}
.badge--mini { font-size: 10px; padding: 1px 6px 2px; }
.pending { color: var(--brass-d); font-weight: 600; font-size: 14px; }

/* ── 스크롤 등장 ──────────────────────────
   방향은 항상 "라벨 열 쪽에서 본문 열 쪽으로". 분할 문법과 같은 축이라 장식이 아니다. */
[data-reveal] {
  opacity: 0; transform: translate3d(-14px, 0, 0);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.split--flip [data-reveal] { transform: translate3d(14px, 0, 0); }
.split--flip [data-reveal].is-in { transform: none; }

/* ── 상단 바: 좌우 분할 ───────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  box-shadow: 0 1px 0 rgba(32,30,27,.18);
}
@media (min-width: 900px) { .topbar { grid-template-columns: 1fr 1fr; } }
.topbar__side {
  display: flex; align-items: center; gap: 14px;
  height: var(--head); padding: 0 16px; min-width: 0; flex-wrap: nowrap;
}
@media (min-width: 900px) { .topbar__side { padding: 0 22px; } }
.topbar__side--dark { background: var(--dark); color: var(--cream); }
.topbar__side--stone { background: var(--stone-2); justify-content: flex-end; }
@media (min-width: 980px) { .topbar__side--stone { justify-content: space-between; } }

.brand { display: flex; align-items: center; gap: 9px; color: var(--brass-2); min-width: 0; }
.brand__mark { display: block; transition: transform .4s var(--ease); }
.brand:hover .brand__mark { transform: translateX(2px); }
.brand__text {
  font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--cream);
  letter-spacing: -.03em; white-space: nowrap;
}
@media (min-width: 900px) { .brand__text { font-size: 17px; } }

.topnav { display: none; gap: 13px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
@media (min-width: 980px)  { .topnav { display: flex; } }
@media (min-width: 1200px) { .topnav { gap: 18px; font-size: 13px; } }
.topnav a { position: relative; padding: 4px 0; }
.topnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brass-d);
  transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease);
}
.topnav a:hover, .topnav a:focus-visible { color: var(--brass-d); }
.topnav a:hover::after, .topnav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.dday { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; min-width: 0; }
@media (min-width: 980px) { .dday { padding-left: 20px; border-left: 1px solid var(--stone-3); align-self: stretch; align-items: center; } }
.dday__label { font-size: 11.5px; color: var(--ink-2); }
.dday__num { font-family: var(--serif); font-weight: 800; font-size: 16px; color: var(--brass-d); letter-spacing: -.01em; }
@media (max-width: 1139px) { .dday__label { display: none; } }
@media (max-width: 1239px) { .dday .badge--mini { display: none; } }
@media (max-width: 419px)  { .dday__ext { display: none; } }

/* ── 좁은 화면 목차 ───────────────────── */
.menuBtn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-right: -8px; flex: 0 0 auto;
}
@media (min-width: 980px) { .menuBtn { display: none; } }
.menuBtn__bars { display: block; width: 20px; }
.menuBtn__bars i {
  display: block; height: 2px; background: var(--brass-d);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.menuBtn__bars i + i { margin-top: 5px; }
.menuBtn[aria-expanded="true"] .menuBtn__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menuBtn[aria-expanded="true"] .menuBtn__bars i:nth-child(2) { opacity: 0; }
.menuBtn[aria-expanded="true"] .menuBtn__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  position: fixed; left: 0; right: 0; top: var(--head); bottom: 0; z-index: 39;
  background: linear-gradient(to right, var(--dark) 0 38%, var(--stone) 38% 100%);
  overflow-y: auto; overscroll-behavior: contain;
  border-top: 2px solid var(--dark);
}
.menu[hidden] { display: none; }
.menu a {
  display: grid; grid-template-columns: 38% 62%; align-items: center;
  border-bottom: 1px solid var(--stone-3);
}
.menu__no {
  font-family: var(--serif); font-weight: 800; font-size: 13px; letter-spacing: .18em;
  background: var(--dark); color: var(--brass-2);
  padding: 18px 0 18px var(--gut); height: 100%; display: flex; align-items: center;
  transition: background-color .25s var(--ease);
}
.menu__name {
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem; letter-spacing: -.04em;
  padding: 18px var(--gut) 18px 18px;
  transition: transform .25s var(--ease);
}
.menu a:hover .menu__no, .menu a:focus-visible .menu__no { background: var(--brass-d); color: var(--cream); }
.menu a:hover .menu__name, .menu a:focus-visible .menu__name { transform: translateX(4px); }
.menu__call .menu__no { background: var(--brass-d); color: var(--cream); letter-spacing: .1em; }
.menu__call .menu__name { color: var(--brass-d); }

/* ── 히어로 ───────────────────────────── */
.hero { position: relative; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1fr; min-height: min(78vh, 640px); }
}
.hero__dark { background: var(--dark); color: var(--cream); display: flex; align-items: center; }
.hero__pad { padding: 54px var(--gut) 60px; max-width: 34rem; width: 100%; }
@media (min-width: 900px) { .hero__pad { padding: 64px 44px 68px var(--gut-lg); margin-left: auto; } }
.hero__stone { background: var(--stone-2); display: flex; }

.eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; color: var(--brass-2);
  margin-bottom: 18px; padding-left: 34px; position: relative;
}
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 24px; height: 2px; background: var(--brass);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) .1s;
}
.eyebrow.is-in::before { transform: scaleX(1); }
.hero__h1 {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(2.05rem, 5.2vw, 3.4rem); line-height: 1.28; letter-spacing: -.045em;
}
.hero__h1 .em { color: var(--brass-2); }
.hero__src { margin-top: 15px; font-size: 12.5px; color: var(--mute-d); }

/* 분할선 — 스크롤하면 브라스 표식이 이 선을 따라 내려온다(transform만 사용) */
.hero__rule {
  display: none; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--brass); transform: translateX(-1px) scaleY(var(--draw, 1));
  transform-origin: top; z-index: 2;
}
@media (min-width: 900px) { .hero__rule { display: block; } }
.hero__rule::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 12px; height: 12px;
  margin-left: -6px; background: var(--brass-2); border: 2px solid var(--dark);
  transform: translateY(var(--knob, 0px)) rotate(45deg);
  transition: transform .1s linear;
}

.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 10px; }
.btn {
  position: relative; display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  padding: 14px 24px; border: 2px solid var(--brass-2);
  transition: background .26s var(--ease), color .26s var(--ease), transform .26s var(--ease), box-shadow .26s var(--ease);
}
.btn--solid { background: var(--brass-2); color: var(--dark); box-shadow: 0 0 0 0 var(--brass); }
.btn--solid:hover { background: var(--cream); border-color: var(--cream); transform: translateY(-2px); box-shadow: 0 4px 0 var(--brass); }
.btn--solid:active { transform: translateY(0); box-shadow: 0 0 0 0 var(--brass); }
.btn--ghost { border-style: dashed; border-color: #5A544C; color: var(--mute-d); cursor: not-allowed; }
.cta__note { font-size: 12.5px; color: var(--mute-d); max-width: 30rem; }

/* ── 사진 자리 ────────────────────────── */
.photo { width: 100%; }
.photo__ph {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: clamp(230px, 30vw, 380px); height: 100%; padding: 20px;
  background-image: repeating-linear-gradient(var(--hatch, 45deg), transparent 0 13px, var(--stone-3) 13px 14px);
}
/* 모서리 표시 — 프레임을 통째로 두르지 않고 네 귀만 잡아 "자리"임을 알린다 */
.photo__ph::before, .photo__ph::after {
  content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--brass-d);
}
.photo__ph::before { left: 14px; top: 14px; border-right: 0; border-bottom: 0; }
.photo__ph::after { right: 14px; bottom: 14px; border-left: 0; border-top: 0; }
.photo__tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  background: var(--brass-d); color: var(--stone-2); padding: 4px 12px 5px;
}
.photo__desc { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); text-align: center; background: var(--stone-2); padding: 3px 12px; box-decoration-break: clone; }

.hero__stone .photo__ph { border: 0; min-height: clamp(260px, 44vw, 640px); --hatch: 45deg; }
.photo--portrait { margin-top: 26px; --hatch: 22deg; }
.photo--portrait .photo__ph { min-height: 320px; }
.photo--map { margin-top: 26px; --hatch: 90deg; }
.photo--map .photo__ph { min-height: clamp(200px, 26vw, 300px); }

/* ── 분할 섹션 ────────────────────────── */
.split { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--dark); }
.split__label { padding: 42px var(--gut) 26px; background: var(--stone-2); min-width: 0; position: relative; }
.split__body { padding: 26px var(--gut) 56px; background: var(--stone); min-width: 0; }
/* 모바일에서도 좌우 문법을 남긴다 — 라벨 열에 브라스 기둥 */
.split__label::after {
  content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%;
  background: var(--brass); transform: scaleY(var(--prog, 0)); transform-origin: top;
}

@media (min-width: 900px) {
  /* 열 배경을 그리드 자체에 칠한다 — sticky 라벨이 짧아도 열 색이 끊기지 않는다 */
  .split { grid-template-columns: var(--split-a) var(--split-b);
           background: linear-gradient(to right, var(--stone-2) 0 var(--split-a), var(--stone) var(--split-a) 100%); }
  .split__label {
    background: transparent; position: sticky; top: var(--head); align-self: start;
    padding: 62px 40px 62px var(--gut-lg);
    max-height: calc(100vh - var(--head)); overflow: hidden;
  }
  .split__body { background: transparent; padding: 62px var(--gut-lg) 74px 40px; border-left: 2px solid var(--dark); }

  .split--flip { grid-template-columns: var(--split-b) var(--split-a);
                 background: linear-gradient(to right, var(--stone) 0 var(--split-b), var(--stone-2) var(--split-b) 100%); }
  .split--flip .split__label { order: 2; border-left: 2px solid var(--dark); padding: 62px var(--gut-lg) 62px 40px; }
  .split--flip .split__body { order: 1; border-left: 0; padding: 62px 40px 74px var(--gut-lg); }
  .split--flip .split__label::after { left: auto; right: 0; }
}
.split--dark { color: var(--cream); }
.split--dark .split__label { background: var(--dark-2); }
.split--dark .split__body { background: var(--dark); }
@media (min-width: 900px) {
  .split--dark { background: linear-gradient(to right, var(--dark-2) 0 var(--split-a), var(--dark) var(--split-a) 100%); }
  .split--dark.split--flip { background: linear-gradient(to right, var(--dark) 0 var(--split-b), var(--dark-2) var(--split-b) 100%); }
  .split--dark .split__label, .split--dark .split__body { background: transparent; }
  .split--dark .split__body { border-color: var(--dark-3); }
  .split--dark.split--flip .split__label { border-color: var(--dark-3); }
}
.split--dark .split__lead { color: var(--mute-d); }
.split--dark .badge { border-color: var(--brass-2); color: var(--brass-2); }
.split--dark .split__label::after { background: var(--brass-2); }

.split__no {
  font-family: var(--serif); font-weight: 800; font-size: 12px; letter-spacing: .22em;
  color: var(--brass-d); margin-bottom: 12px;
}
.split__h2 {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(1.72rem, 3.6vw, 2.55rem); line-height: 1.24; letter-spacing: -.05em;
}
.split__lead { margin-top: 15px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); max-width: 24rem; }
.split__foot { margin-top: 20px; font-size: 12.5px; color: var(--ink-2); }
.split--dark .split__foot { color: var(--mute-d); }

/* ── 01 행 목록 ───────────────────────── */
.rows { border-top: 2px solid var(--ink); }
.row {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  padding: 20px 0 22px; border-bottom: 1px solid var(--stone-3);
  transition: padding-left .3s var(--ease);
}
@media (min-width: 900px) { .row:hover { padding-left: 8px; } }
.row__no { font-family: var(--serif); font-weight: 800; font-size: 1rem; color: var(--brass-d); padding-top: 4px; }
.row__name { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.35; letter-spacing: -.04em; }
.row__desc { margin-top: 5px; color: var(--ink-2); font-size: 15px; }
.row__src { margin-top: 5px; font-size: 12px; color: var(--ink-3); }
.row--pending .row__no { color: var(--ink-3); }
.row--pending .row__name { color: var(--ink-2); }

/* ── 02 대비(이 테마의 중심) ───────────── */
.versus { background: var(--dark); color: var(--cream); padding: 66px 0 72px; border-top: 2px solid var(--dark); }
.versus__head { padding: 0 var(--gut); max-width: 42rem; }
@media (min-width: 860px) { .versus__head { padding: 0 var(--gut-lg); } }
.versus__h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.05em; line-height: 1.26; margin-top: 12px; }
.versus__lead { margin-top: 13px; font-size: 14.5px; color: var(--mute-d); max-width: 30rem; }
.versus__foot { margin: 22px 0 0; padding: 0 var(--gut); font-size: 12.5px; color: var(--mute-d); }
@media (min-width: 860px) { .versus__foot { padding: 0 var(--gut-lg); } }
.versus .split__no { color: var(--brass-2); margin-bottom: 0; }

.vs { display: flex; flex-direction: column; margin: 30px var(--gut) 0; }
@media (min-width: 860px) { .vs { flex-direction: row; margin: 34px var(--gut-lg) 0; min-height: 330px; } }

.vs__panel {
  /* 세로로 쌓일 때 flex-basis 0 + overflow:hidden 조합은 패널 높이를 0으로 만든다.
     좁은 화면에서는 내용 높이를 그대로 쓰고, 가로 배치일 때만 비율 분배를 켠다. */
  position: relative; flex: 0 0 auto; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 20px 22px 22px;
  transition: flex-grow .55s var(--ease), background-color .35s var(--ease), color .35s var(--ease), padding .35s var(--ease);
  border: 0; cursor: pointer; overflow: hidden;
}
@media (min-width: 860px) { .vs__panel { flex: 1 1 0; padding: 30px 28px 34px; } }
/* 각 축은 끝까지 자기 색을 지킨다 — 열려도 색이 서로 같아지지 않는다 */
.vs__panel--a { background: var(--dark-4); color: var(--cream); }
.vs__panel--b { background: var(--stone); color: var(--ink); }
.vs__panel--a.is-open { background: var(--dark-3); }
.vs__panel--b.is-open { background: var(--cream); }
@media (min-width: 860px) { .vs__panel.is-open { flex-grow: 2.2; } }
@media (max-width: 859px) { .vs__panel.is-open { padding: 26px 22px 30px; } }

/* 열린 쪽 표시 — 안쪽 모서리에 브라스 띠 */
.vs__panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--brass-2);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.vs__panel--b::before { transform-origin: right; background: var(--brass); }
.vs__panel.is-open::before { transform: scaleX(1); }

.vs__kind { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--brass-2); }
.vs__panel--b .vs__kind { color: var(--brass-d); }
.vs__name {
  font-family: var(--serif); font-weight: 800; font-size: clamp(1.55rem, 3.6vw, 2.3rem);
  letter-spacing: -.05em; margin: 5px 0 14px; transition: font-size .35s var(--ease);
}
.vs__detail { display: flex; flex-direction: column; gap: 9px; max-width: 26rem; }
.vs__row {
  font-size: 14.5px; line-height: 1.6; padding-top: 8px;
  border-top: 1px solid currentColor; opacity: .82;
  transition: opacity .35s var(--ease), font-size .35s var(--ease);
}
.vs__panel.is-open .vs__row { opacity: 1; }
.vs__row b { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--brass-2); }
.vs__panel--b .vs__row b { color: var(--brass-d); }
@media (max-width: 859px) {
  /* 세로로 쌓이는 화면에서는 "넓어짐" 대신 "커짐"으로 같은 신호를 준다 */
  .vs__panel:not(.is-open) .vs__row { font-size: 13px; }
  .vs__panel:not(.is-open) .vs__detail { gap: 6px; }
  .vs__panel.is-open .vs__name { font-size: 1.85rem; }
}
.vs__panel:hover .vs__row, .vs__panel:focus-visible .vs__row { opacity: .92; }

/* 경첩 — 두 축을 잇는 브라스 기둥. 화살표가 열린 쪽을 가리킨다 */
.vs__hinge {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--brass-2); color: var(--ink);
  padding: 9px; flex: 0 0 auto;
}
.vs__hingeText { font-size: 11px; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.vs__arrow { width: 8px; height: 8px; border: 2px solid var(--ink); border-left: 0; border-bottom: 0; transform: rotate(-45deg); transition: transform .45s var(--ease); }
.vs.is-b .vs__arrow { transform: rotate(135deg); }
@media (min-width: 860px) {
  .vs__hinge { width: 46px; padding: 16px 0; flex-direction: column; gap: 14px; }
  .vs__hingeText { writing-mode: vertical-rl; }
  .vs__arrow { transform: rotate(-135deg); }
  .vs.is-b .vs__arrow { transform: rotate(45deg); }
}

/* ── 04 수치 ──────────────────────────── */
/* 대성학원식 2단 구성 — 대표 지표 하나를 먼저 크게, 나머지는 보조로 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dark-3); border: 1px solid var(--dark-3); }
@media (min-width: 720px) { .stats { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.stat { background: var(--dark); padding: 18px 14px 20px; }
.stat--lead { grid-column: 1 / -1; padding: 24px 18px 26px; }
@media (min-width: 720px) { .stat--lead { grid-column: auto; } }
.stat__num { font-family: var(--serif); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.05; color: var(--brass-2); letter-spacing: -.05em; }
.stat--lead .stat__num { font-size: clamp(2.5rem, 6vw, 3.4rem); }
.stat__num em { font-style: normal; font-size: .38em; font-weight: 400; color: var(--mute-d); margin-left: 4px; letter-spacing: 0; }
.stat__label { font-size: 12px; color: var(--mute-d); margin-top: 6px; }
.stat--lead .stat__label { font-size: 13px; }
.stats__src { margin-top: 12px; font-size: 12px; color: var(--mute-d); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tags li { font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--dark-3); color: var(--mute-d); }
.slot { margin-top: 24px; padding: 20px 20px 22px; border: 1px dashed var(--brass); border-left-width: 3px; border-left-style: solid; }
.slot__title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--brass-2); }
.slot__desc { margin-top: 7px; font-size: 13.5px; color: var(--mute-d); }

/* ── 03 원장 ──────────────────────────── */
.teacher__role { font-size: 11.5px; font-weight: 700; letter-spacing: .22em; color: var(--brass-d); }
.teacher__name { font-family: var(--serif); font-weight: 800; font-size: 2.1rem; letter-spacing: -.05em; margin-bottom: 18px; }
.quote { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--stone-3); padding: 16px 0 18px; margin-bottom: 22px; }
.quote p { font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.5; letter-spacing: -.04em; }
.quote cite { display: block; margin-top: 9px; font-size: 12px; font-style: normal; color: var(--ink-3); }
.spec { margin-bottom: 20px; }
.spec > div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 10px 0 11px; border-bottom: 1px solid var(--stone-3); }
.spec dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-2); padding-top: 4px; }
.spec--wide > div { grid-template-columns: 64px 1fr; }
.teacher__note { font-size: 14.5px; color: var(--ink-2); margin-bottom: 12px; max-width: 34rem; }
.teacher__flag { font-size: 13px; line-height: 1.7; color: var(--ink-2); max-width: 34rem; }

/* ── 05 표 ────────────────────────────── */
.tablewrap { overflow-x: auto; }
.fee { min-width: 420px; font-size: 15px; }
.fee th, .fee td { padding: 12px 12px 13px; text-align: left; border-bottom: 1px solid var(--stone-3); }
.fee thead th { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); border-bottom: 2px solid var(--ink); padding-bottom: 9px; }
.fee th + th, .fee td { text-align: right; }
.fee tbody th { font-weight: 500; white-space: nowrap; }
.fee tbody td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fee tbody td:last-child { font-family: var(--serif); font-weight: 800; color: var(--ink); }
.fee tbody tr { transition: background-color .2s var(--ease); }
.fee tbody tr:hover { background: var(--stone-2); }
/* 좁은 화면에서 가로 스크롤 없이 여섯 줄이 다 보이도록 */
@media (max-width: 480px) {
  .fee { min-width: 296px; font-size: 13.5px; }
  .fee th, .fee td { padding: 11px 5px 12px; }
  .fee thead th { font-size: 10px; letter-spacing: .04em; }
}
.fee tbody tr:hover td:last-child { color: var(--brass-d); }

/* ── 06 소식 ──────────────────────────── */
.news { border-top: 2px solid var(--ink); }
.news__item { padding: 18px 0 20px; border-bottom: 1px solid var(--stone-3); }
.news__date { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--brass-d); }
.news__title { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; line-height: 1.55; letter-spacing: -.04em; margin: 4px 0 4px; }
.news__from { font-size: 12px; color: var(--ink-3); }
/* 자리 표시 항목은 실제 글과 확실히 다르게 보이게 — 같은 무게로 반복하지 않는다 */
.news__item--slot { border-bottom-style: dashed; }
.news__item--slot .news__date { color: var(--ink-3); }
.news__item--slot .news__title { font-family: var(--sans); font-weight: 500; font-size: .95rem; letter-spacing: 0; color: var(--ink-2); }

/* ── 푸터 ─────────────────────────────── */
.foot { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--dark); }
@media (min-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } }
.foot__side { padding: 36px var(--gut) 44px; }
@media (min-width: 900px) {
  .foot__side { padding: 44px 40px 56px var(--gut-lg); }
  .foot__side--stone { padding-left: 40px; padding-right: var(--gut-lg); display: flex; flex-direction: column; justify-content: space-between; }
}
.foot__side--dark { background: var(--dark); color: var(--cream); }
.foot__side--stone { background: var(--stone-2); }
.foot__brand { font-family: var(--serif); font-weight: 800; font-size: 1.2rem; letter-spacing: -.04em; }
.foot__addr { font-size: 14px; line-height: 1.7; color: var(--mute-d); margin-top: 8px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 13px; }
.foot__note { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); max-width: 30rem; }
.foot__theme { margin-top: 16px; font-size: 12px; color: var(--ink-3); }

/* ── 모션 최소화 대응 ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .eyebrow::before { transform: scaleX(1); }
  .hero__rule { transform: translateX(-1px); }
  .hero__rule::after { display: none; }
  .vs__row { opacity: 1; }
  .split__label::after { transform: scaleY(1); opacity: .35; }
}
.reduce-motion .hero__rule { transform: translateX(-1px) !important; }
.reduce-motion .hero__rule::after { display: none; }
.reduce-motion .split__label::after { transform: scaleY(1); opacity: .35; }