@charset "utf-8";
/* 대치플랜 · components : 헤더 · 페이지 점 · 버튼 · 따라다니는 상담 버튼 · 푸터 */

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 400;
  padding: 12px 22px; border-radius: var(--r-pill);
  background: var(--red); color: #fff; font-weight: 700;
  transform: translateY(-230%); transition: transform .22s var(--ease);
}

.skip:focus-visible { transform: none; }

/* --------------------------------------------------------------- 상단 바 */
.top {
  position: fixed; z-index: 90; top: 0; left: 0; right: 0;
  height: calc(var(--u) * 5.6); min-height: 52px;
  display: flex; align-items: center; gap: calc(var(--u) * 2);
  /* 로고 왼쪽 끝과 전화번호 오른쪽 끝이 본문의 시작선·끝선에 선다. 좌우 대칭. */
  padding-left: var(--col); padding-right: var(--col);
}

/* 유리 면 (2026-09-15 개편)
   예전 : .top 자체에 backdrop-filter 를 걸고 있어서 (1) 안에 든 드롭다운 · 챕터 레일의 블러가 헤더 면만 흐리게 잡거나 빠졌고
          (2) 블러를 켜고 끄는 전환(transition: backdrop-filter)이 스크롤 중에 한두 프레임 비는 구간이 생겼다.
          또 '첫 화면을 지나야' 켜져서 인트로 · 표지 · 덮기 전환 중에는 헤더 면이 아예 없었다.
   지금 : 유리는 뒤에 깔린 가상 요소(::before) 한 장이 맡고 블러는 늘 켜 둔 채 투명도만 넘긴다.
          조금이라도 내리면 켜진다(common.js). 밝은 · 어두운 지면 색은 body.is-dark 로 스며들 듯 바뀐다. */
.top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(253, 246, 244, .78), rgba(253, 243, 240, .6));
  -webkit-backdrop-filter: saturate(170%) blur(16px);
          backdrop-filter: saturate(170%) blur(16px);
  box-shadow: 0 1px 0 rgba(120, 60, 50, .08), 0 10px 30px -22px rgba(60, 30, 25, .28);
  opacity: 0;
  transition: opacity .45s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.top.is-set::before { opacity: 1; }

/* 로고는 두 벌이다. 밝은 지면에는 검은 글자, 어두운 지면에는 흰 글자.
   겹쳐 두고 투명도로 넘기면 지면이 바뀌는 순간 글자가 툭 바뀌지 않고 스며든다. */
.top__logo { position: relative; display: flex; align-items: center; flex: none; }

.top__logo-img { display: block; height: clamp(19px, calc(var(--u) * 1.45), 26px); width: auto; transition: opacity .5s var(--ease); }

.top__logo-img--light { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }

/* 다크 구간에서 상단 바 반전 */
body.is-dark .top::before {
  background: linear-gradient(180deg, rgba(24, 22, 27, .7), rgba(19, 18, 21, .52));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px -22px rgba(0, 0, 0, .6);
}

body.is-dark .top__logo-img--dark { opacity: 0; }

body.is-dark .top__logo-img--light { opacity: 1; }

/* --------------------------------------------------------------- 페이지 점 */
.dots {
  position: fixed; z-index: 90; right: calc(var(--pad) * .5); top: 50%;
  transform: translateY(-50%);
  display: none; flex-direction: column; gap: calc(var(--u) * 1.1);
}

@media (min-width: 1024px) {
  .dots { display: flex; }
}

.dots__d { display: grid; place-items: center; width: 22px; height: 22px; }

.dots__d::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(23, 21, 26, .22);
  transition: background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}

.dots__d:hover::before { background: rgba(23, 21, 26, .5); transform: scale(1.3); }

.dots__d[aria-current="true"]::before { background: var(--red); transform: scale(1.55); box-shadow: 0 0 0 5px rgba(208, 2, 27, .12); }

body.is-dark .dots__d::before { background: rgba(255, 255, 255, .26); }

body.is-dark .dots__d:hover::before { background: rgba(255, 255, 255, .6); }

body.is-dark .dots__d[aria-current="true"]::before { background: var(--red-hi); box-shadow: 0 0 0 5px rgba(240, 48, 64, .16); }

/* --------------------------------------------------------------- 버튼 */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.7em; border: 0; border-radius: var(--r-pill);
  background: var(--red); color: #fff;
  font-family: var(--f); font-weight: 700; letter-spacing: 0em;
  font-size: var(--fs-sm);
  white-space: nowrap; cursor: pointer; overflow: hidden;
  box-shadow: var(--e-red);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--red-hi), var(--red));
  opacity: 0; transition: opacity .4s var(--ease);
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(74, 12, 20, .5), 0 3px 8px rgba(74, 12, 20, .2); }

.btn:hover::after { opacity: 1; }

.btn:active { transform: translateY(0); }

.btn--sm { padding: .7em 1.2em; font-size: var(--fs-2xs); box-shadow: 0 6px 16px -8px rgba(208, 2, 27, .5); }

.btn--lg { padding: 1.15em 2.3em; font-size: var(--fs-lead); }

.btn__dot { width: .45em; height: .45em; border-radius: 50%; background: rgba(255, 255, 255, .95); flex: none; }

/* 따라다니는 상담 버튼.
   화면을 계속 차지하는 물건이라 본문을 가리지 않을 만큼 작아야 한다.
   두 개를 세로로 쌓고, 손이 닿는 오른쪽 아래에 붙인다. */
.dock {
  position: fixed; z-index: 95;
  right: calc(var(--gut) * .8); bottom: calc(var(--gut) * .8);
  display: grid; gap: 8px; justify-items: end;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.dock.is-in { opacity: 1; transform: none; pointer-events: auto; }

.dock__b {
  display: inline-flex; align-items: center; gap: .5em;
  height: 42px; padding: 0 16px 0 13px;
  border-radius: var(--r-pill);
  font-family: var(--f); font-weight: 700; letter-spacing: 0em;
  font-size: 13.5px; white-space: nowrap;
  box-shadow: 0 2px 5px rgba(40, 20, 16, .14), 0 10px 22px -12px rgba(40, 20, 16, .4);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

.dock__ic { width: 17px; height: 17px; flex: none; fill: currentColor; }

.dock__b--tel { background: var(--red); color: #fff; }

.dock__b--kakao { background: #FEE500; color: #3C1E1E; }

@media (hover: hover) {
  .dock__b:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(40, 20, 16, .16), 0 16px 30px -12px rgba(40, 20, 16, .45); }
}

@media (max-width: 767px) {
  /* 좁은 화면에서는 가로로 나란히. 세로로 쌓으면 화면을 너무 먹는다. */
  .dock {
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    grid-auto-flow: column; grid-auto-columns: 1fr; justify-items: stretch; gap: 8px;
  }
  .dock__b { height: 46px; justify-content: center; padding-inline: 10px; font-size: var(--fs-sm); }
}

.page[data-tone="dark"] .btn, body.is-dark .btn {
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .8), 0 2px 5px rgba(0, 0, 0, .35);
}

.page[data-tone="dark"] .btn:hover, body.is-dark .btn:hover {
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .9), 0 3px 8px rgba(0, 0, 0, .4);
}

/* --------------------------------------------------------- 모션 축소 */
@media (prefers-reduced-motion: reduce) {
  .dock { opacity: 1 !important; transform: none !important; pointer-events: auto; }
}

/* 상담 페이지의 두 버튼과 FAQ 가는 길 */
.btn--kakao { background: #FEE500; color: #3C1E1E; box-shadow: 0 8px 20px -10px rgba(74, 60, 10, .5); }

.btn--kakao::after { background: linear-gradient(120deg, #FFEF4A, #FEE500); }

.btn__ic { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* 헤더의 대표번호 */
.top__tel {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em .95em .5em .8em;
  border-radius: var(--r-pill);
  border: 1px solid rgba(208, 2, 27, .16);
  background: rgba(255, 255, 255, .55);
  color: var(--red); font-weight: 800; letter-spacing: 0em;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  transition: border-color .28s var(--ease), background .28s var(--ease), transform .28s var(--ease);
}

.top__tel-ic { width: 1.02em; height: 1.02em; fill: currentColor; flex: none; }

@media (min-width: 1024px) {
  .top__tel { margin-left: calc(var(--u) * 1.4); }
}

@media (max-width: 479px) {
  .top__tel-n { font-size: var(--fs-2xs); }
  .top__tel { padding: .45em .7em .45em .6em; }
}

@media (hover: hover) {
  .top__tel:hover { border-color: rgba(208, 2, 27, .4); background: rgba(255, 255, 255, .85); transform: translateY(-1px); }
}

body.is-dark .top__tel {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: var(--red-on-noir);
}

body.is-dark .top__tel:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .1); }

/* 따라다니는 상담 버튼 : PC 에서는 가로 한 줄 */
@media (min-width: 768px) {
  .dock { grid-auto-flow: column; grid-auto-columns: max-content; gap: 10px; align-items: center; }
}

/* ══════════════════════════════════════════════════ 2026-09-11 · 3차 ══════════ */
/* 따라다니는 상담 버튼 : 살짝 아래로 */
.dock { bottom: calc(var(--gut) * .42); }

@media (max-width: 767px) {
  .dock { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* 상단 바 : 큰 화면일수록 높이가 과하게 커지던 것(1920 에서 107px)을 적당한 선에서 멈춘다 */
.top { height: clamp(56px, calc(var(--u) * 4.6), 82px); min-height: 0; }

/* ─────────────────────────────────────────────── D. 낮은 가로 화면 ─── */
@media (min-width: 600px) and (max-height: 559px) {
  .dots { display: none; }
}

/* 아주 큰 화면 : 제목은 커지는데 본문이 상한에 막혀 작아 보이던 것 */
@media (min-width: 1800px) and (min-height: 900px) {
  .top__tel { font-size: var(--fs-sm); }
  .dock__b { height: 50px; font-size: var(--fs-xs); padding: 0 20px 0 16px; }
  .dock__ic { width: 19px; height: 19px; }
}

/* ══════════════════════════════════════════════════ 2026-09-11 · 전면 개편 : 사이트 공통 ══════════
   헤더 메뉴(드롭다운 한 단계) · 전체 메뉴(1023px 이하) · 푸터 · 등장 모션.
   마크업은 js/common.js 가 한 곳에서 넣는다. */

/* ── 주요 메뉴 : 데스크톱 한 줄. 대표번호 바로 왼쪽에 붙는다 */
/* 대메뉴는 헤더 안에서 챕터 레일(.rail, 헤더 아래에 붙음)보다 앞에 둔다. 레일이 헤더 뒤쪽에 덧붙어 드롭다운 윗부분을 덮던 문제 */
.gnb { display: none; margin-left: auto; position: relative; z-index: 2; }
@media (min-width: 1024px) { .gnb { display: block; } }
.gnb__list { display: flex; align-items: center; gap: calc(var(--u) * .2); }
.gnb__item { position: relative; }
.gnb__a {
  display: inline-flex; align-items: center; gap: .42em;
  padding: .7em .88em; border: 0; background: none; cursor: pointer;
  font-family: var(--f); font-size: clamp(13px, calc(var(--u) * .9), 16px); font-weight: 600; letter-spacing: -.006em;
  color: var(--ink-2); white-space: nowrap;
  transition: color .24s var(--ease);
}
.gnb__a:hover, .gnb__a:focus-visible, .gnb__item.is-open .gnb__btn { color: var(--ink); }
.gnb__a[aria-current="page"], .gnb__item.is-current .gnb__btn { color: var(--red); }
.gnb__chev {
  width: .4em; height: .4em;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-.14em) rotate(45deg); transition: transform .28s var(--ease);
}
.gnb__item.is-open .gnb__chev { transform: translateY(.1em) rotate(225deg); }

.gnb__panel {
  position: absolute; top: calc(100% + 8px); left: 50%; min-width: 17.5em;
  padding: 8px; border-radius: 16px;
  background: rgba(255, 251, 250, .95);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
          backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(120, 60, 50, .1);
  box-shadow: 0 2px 6px rgba(60, 20, 20, .06), 0 26px 50px -22px rgba(60, 20, 20, .3);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .22s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
/* 버튼과 판 사이 틈에서 마우스가 빠져 판이 닫히지 않게 */
.gnb__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.gnb__item.is-open .gnb__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.gnb__pa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.8em;
  padding: .74em .92em; border-radius: 10px;
  font-size: var(--fs-sm); color: var(--ink);
  transition: background .2s var(--ease);
}
.gnb__pa b { font-weight: 700; letter-spacing: 0em; white-space: nowrap; }
.gnb__pa span { font-size: max(12px, .84em); color: var(--ink-3); white-space: nowrap; }
.gnb__pa:hover, .gnb__pa:focus-visible { background: rgba(208, 2, 27, .06); }
.gnb__pa[aria-current="page"] b { color: var(--red); }
.gnb__pa-ext { font-style: normal; font-weight: 500; margin-left: .32em; color: var(--ink-3); }
body.is-dark .gnb__a { color: var(--on-noir-2); }
body.is-dark .gnb__a:hover, body.is-dark .gnb__a:focus-visible, body.is-dark .gnb__item.is-open .gnb__btn { color: #fff; }
body.is-dark .gnb__a[aria-current="page"], body.is-dark .gnb__item.is-current .gnb__btn { color: var(--red-on-noir); }

/* ── 전체 메뉴 버튼 : 두 줄이 X 로 접힌다 */
.top__menu {
  position: relative; display: inline-block; flex: none;
  width: 44px; height: 44px; margin: 0 -10px 0 2px;
  border: 0; background: none; cursor: pointer; color: var(--ink);
}
.top__menu i {
  position: absolute; left: 12px; right: 12px; top: 50%; height: 1.8px; margin-top: -.9px;
  border-radius: 2px; background: currentColor;
  transition: transform .34s var(--ease);
}
.top__menu i:nth-of-type(1) { transform: translateY(-4px); }
.top__menu i:nth-of-type(2) { transform: translateY(4px); }
.top__menu[aria-expanded="true"] i:nth-of-type(1) { transform: rotate(45deg); }
.top__menu[aria-expanded="true"] i:nth-of-type(2) { transform: rotate(-45deg); }
body.is-dark .top__menu { color: #fff; }
@media (min-width: 1024px) { .top__menu { display: none; } }

/* ── 전체 메뉴 판 */
.menu {
  position: fixed; inset: 0; z-index: 89;
  padding: calc(clamp(56px, calc(var(--u) * 4.6), 82px) + 10px) var(--col) calc(28px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 241, 238, .97);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .34s var(--ease);
}
.menu.is-open { opacity: 1; }
html.menu-open { overflow: hidden; }
html.menu-open .top { background: transparent; box-shadow: none; }
html.menu-open .top::before { opacity: 0; }
html.menu-open body.is-dark .top__logo-img--dark { opacity: 1; }
html.menu-open body.is-dark .top__logo-img--light { opacity: 0; }
html.menu-open body.is-dark .top__menu { color: var(--ink); }
html.menu-open body.is-dark .top__tel { color: var(--red); border-color: rgba(208, 2, 27, .16); background: rgba(255, 255, 255, .55); }
.menu__in { display: grid; gap: 26px; max-width: 560px; margin: 0 auto; }
.menu__list > li { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.menu.is-open .menu__list > li { opacity: 1; transform: none; }
.menu.is-open .menu__list > li:nth-child(2) { transition-delay: .04s; }
.menu.is-open .menu__list > li:nth-child(3) { transition-delay: .08s; }
.menu.is-open .menu__list > li:nth-child(4) { transition-delay: .12s; }
.menu.is-open .menu__list > li:nth-child(5) { transition-delay: .16s; }
.menu__a {
  display: block; padding: 13px 2px;
  font-size: clamp(21px, 6vw, 28px); font-weight: 800; letter-spacing: -.006em; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.menu__a[aria-current="page"] { color: var(--red); }
.menu__cap { padding: 18px 2px 0; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.menu__plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 0 16px; border-bottom: 1px solid var(--line); }
.menu__pa {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(120, 60, 50, .08);
}
.menu__pa b { font-size: 16px; font-weight: 700; letter-spacing: -.002em; color: var(--ink); }
.menu__pa span { font-size: 12.5px; color: var(--ink-3); }
.menu__pa[aria-current="page"] b { color: var(--red); }
.menu__pa-ext { font-style: normal; font-weight: 500; margin-left: .3em; color: var(--ink-3); }
.menu__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.menu__cta .btn { font-size: 15px; padding: 1em .6em; }
@media (min-width: 1024px) { .menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .menu, .menu__list > li { transition: none; } }

/* ── 따라다니는 상담 버튼 : 가운데에 큰 상담 버튼이 있는 면에서는 비킨다 */
body.on-end .dock { opacity: 0; transform: translateY(14px); pointer-events: none; }
html.menu-open .dock { opacity: 0; pointer-events: none; }

/* ── 푸터 : 어두운 띠로 확실하게 끊는다 */
.foot {
  position: relative; z-index: 1;
  background: var(--noir); color: var(--on-noir-2);
  padding: clamp(40px, calc(var(--u) * 4.4), 72px) var(--col) calc(clamp(28px, calc(var(--u) * 3), 48px) + 58px);
}
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 56px; max-width: 1480px; }
/* 사업자(대치학원) 로고 : 심볼이 들어 있어 워드마크보다 한 단계 크게 */
.foot__logo { height: clamp(30px, calc(var(--u) * 2.3), 36px); width: auto; }
.foot__tel { margin-top: 16px; font-size: 15px; }
.foot__tel a { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; margin-left: .3em; }
.foot__hours { margin-top: 2px; font-size: 13px; }
/* 공식 채널 (2026-10-19) : 대표번호 아래 작은 알약 두 개. 평소엔 바닥글 글자색, 올리면 각 채널 색(블로그 초록 · 인스타 자홍) */
.foot__sns { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.foot__sns-a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px 0 11px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px; font-weight: 600; color: #D9D4DB;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.foot__sns-a svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.foot__sns-a--insta svg { fill: none; }
.foot__sns-a:hover, .foot__sns-a:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .06); }
.foot__sns-a--blog:hover svg, .foot__sns-a--blog:focus-visible svg { color: #03C75A; }
.foot__sns-a--insta:hover svg, .foot__sns-a--insta:focus-visible svg { color: #F25A9B; }
.foot__sns-a svg { transition: color .2s var(--ease); }
@media (max-width: 767px), (pointer: coarse) { .foot__sns-a { min-height: 44px; padding-inline: 13px 16px; } }
@media (prefers-reduced-motion: reduce) { .foot__sns-a, .foot__sns-a svg { transition: none; } }
.foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.foot__h { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: #fff; }
.foot__col a { font-size: 14px; line-height: 2.05; transition: color .2s var(--ease); }
.foot__col a:hover, .foot__col a:focus-visible { color: #fff; }
.foot__info, .foot__copy { grid-column: 1 / -1; font-size: 13px; }
/* 사업자 정보 : 두 줄(등록 정보 / 연락처). 칸 사이는 짧은 세로선, 이름표(dt)는 한 단계 옅게 */
.foot__info { display: grid; gap: 8px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); }
.foot__row { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; margin: 0; }
.foot__row > div { position: relative; display: flex; align-items: baseline; gap: .5em; }
.foot__row > div + div { margin-left: 14px; padding-left: 15px; }
.foot__row > div + div::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 10px; margin-top: -5px;
  background: rgba(255, 255, 255, .18);
}
.foot__row dt { color: rgba(246, 244, 245, .5); white-space: nowrap; }
.foot__row dd { margin: 0; color: #D9D4DB; word-break: keep-all; }
.foot__row a { color: #D9D4DB; font-variant-numeric: tabular-nums; transition: color .2s var(--ease); }
.foot__row a:hover, .foot__row a:focus-visible { color: #fff; }
.foot__copy { margin-top: -14px; color: rgba(246, 244, 245, .5); letter-spacing: .01em; }
@media (max-width: 767px) {
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  /* 폰 : 한 칸씩 쌓고 구분선은 뺀다(줄 앞에 선이 걸리지 않게) */
  .foot__row { display: grid; row-gap: 4px; }
  .foot__row > div + div { margin-left: 0; padding-left: 0; }
  .foot__row > div + div::before { content: none; }
  .foot__row dt { min-width: 7.2em; }
  .foot__info { gap: 12px; }
  .foot__copy { margin-top: -10px; }
}
@media (max-width: 767px), (pointer: coarse) {
  .foot__row a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
}

/* ── 등장 : 상자가 먼저 자리를 잡고, 안의 글이 차례로 따라온다(--d 지연)
   모션을 줄인 환경에서는 처음부터 제자리에 보인다(숨기지 않는다) */
html.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease) var(--d, 0ms), transform .95s var(--ease) var(--d, 0ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── 한글 줄바꿈 : 문단은 끝줄에 한두 낱말만 남지 않게(pretty), 짧은 제목은 줄 길이를 고르게(balance).
   인트로 카톡 말풍선은 실제 대화처럼 보이게 맞춰 둔 줄바꿈이라 건드리지 않는다. */
p, li, dd, dt, blockquote, figcaption, td { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
#s0 p, #s0 li, #s0 h2 { text-wrap: wrap; }
/* 문단은 pretty 만 쓴다. balance 는 짧은 문단을 억지로 반씩 나눠 줄바꿈을 넣은 것처럼 보이게 한다. */

/* 한 덩어리로 읽혀야 하는 짧은 묶음(연도 나열 등) */
.nw { white-space: nowrap; }
/* ── 문장 · 구절 줄바꿈 : common.js 가 문단을 문장(.sn) → 쉼표 구절(.cl) 두 층으로 묶는다.
   문장이 줄에 들어오면 문장째 넘어가고, 한 줄보다 긴 문장만 쉼표 구절 단위로 넘어간다 */
.sn, .cl { display: inline-block; max-width: 100%; vertical-align: baseline; }
/* 좁은 칸(한 줄 22자 안팎 이하)에서는 쉼표 구절까지 묶으면 오히려 짧은 줄이 생긴다 → 문장 단위만 남긴다(common.js 가 .is-narrow) */
.is-narrow .cl { display: inline; }

/* ── 섹션 활자 : 메인 · 상세 공통
   제목의 구(.l)는 끊어도 되는 자리일 뿐 강제 줄바꿈이 아니다. 폭이 되면 한 줄로 이어지고, 모자랄 때만 구 사이에서 넘어간다. */
.sec-h {
  font-weight: 800; letter-spacing: -.003em; line-height: 1.2; color: var(--ink);
  font-size: var(--fs-4xl);
  word-break: keep-all; text-wrap: balance;
}
.sec-h .l { display: inline-block; vertical-align: top; }
.sec-h em { font-style: normal; color: var(--red); }
[data-tone="dark"] .sec-h { color: var(--on-noir); }
[data-tone="dark"] .sec-h em { color: var(--red-on-noir); }
.sec-p {
  margin-top: calc(var(--u) * 1);
  font-size: var(--fs-md); line-height: 1.66; font-weight: 500;
  color: var(--ink-2); max-width: 40em; word-break: keep-all;
}
[data-tone="dark"] .sec-p { color: var(--on-noir-2); }
.sec-script { display: block; font-size: clamp(26px, calc(var(--u) * 2.6), 48px); line-height: 1; margin-bottom: calc(var(--u) * .5); }
[data-tone="dark"] .sec-script { color: var(--red-on-noir); }

/* 다음 페이지로 가는 글 링크 */
.more {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0em;
  color: var(--ink);
}
[data-tone="dark"] .more { color: #fff; }
.more:hover .go, .more:focus-visible .go { transform: translateX(3px); }

/* ── 페이지를 옮길 때 : 지원하는 브라우저에서 부드럽게 겹쳐 넘어간다(같은 출처의 http 에서만 동작) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .36s; }
}

/* ── 버튼 안 화살표 : 글자 뒤에 화살표 문자를 붙이지 않고, 작은 원 안에 둔다 */
.go {
  display: inline-grid; place-items: center; flex: none;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  background: rgba(23, 21, 26, .07);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.go::before {
  content: ""; width: .5em; height: .5em;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: translateX(-.08em) rotate(45deg);
}
[data-tone="dark"] .go { background: rgba(255, 255, 255, .1); }

/* ══════════════════════════════════════════════════ 2026-09-13 · 2차 개선 ══════════
   제목 줄 마스크 · 진행 순서(story). 메인과 상세가 같은 부품을 쓴다. */

/* ── 제목 줄 마스크 : 줄마다 아래에서 밀려 올라온다(1s, 줄 사이 .11s)
   common.js 가 .sec-h .l 안쪽을 .lm 으로 한 겹 감싼다. 제목 상자는 제자리에 있고 글줄만 움직인다. */
html.js .sec-h[data-reveal] { opacity: 1; transform: none; }
html.js .sec-h .l { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
html.js .sec-h .lm { display: block; transform: translate3d(0, 112%, 0); transition: transform 1s cubic-bezier(.43, .2, .02, 1) var(--d, 0ms); }
html.js .sec-h .l + .l .lm { transition-delay: calc(var(--d, 0ms) + 110ms); }
html.js .sec-h.is-in .lm { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .sec-h .lm { transform: none; transition: none; }
}

/* ── 진행 순서(story)
   왼쪽 : 화면에 붙어 제목 · 지금 단계 번호 · 단계 이름 · 눈금을 보여 준다(sticky, 핀 없음)
   오른쪽 : 단계가 한 칸씩 지나간다. 화면 가운데 띠를 지나는 단계가 '지금' 이 되고(common.js), 나머지는 옅어진다.
   번호와 이름은 스크롤 양만큼 조금씩 바뀌지 않고 문턱에서 한 번에 넘어간다. */
.story { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, calc(var(--u) * 5), 110px); align-items: start; }
.story__aside { align-self: stretch; }
.story__stick {
  position: sticky; top: calc(clamp(56px, calc(var(--u) * 4.6), 82px) + clamp(20px, 5vh, 56px));
  display: flex; flex-direction: column; gap: clamp(12px, calc(var(--u) * 1.3), 22px);
}
.story__count { display: flex; align-items: baseline; gap: .35em; margin-top: clamp(10px, calc(var(--u) * 1.6), 30px); font-variant-numeric: proportional-nums; }
.story__n {
  display: inline-block;
  font-size: clamp(64px, calc(var(--u) * 8.6), 160px); font-weight: 900; letter-spacing: -.005em; line-height: .9;
  color: var(--red);
}
.story__of { font-size: var(--fs-lg); font-weight: 700; color: var(--ink-3); }
.story__now { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.008em; line-height: 1.2; color: var(--ink); }
.story__n.is-swap, .story__now.is-swap { animation: storySwap .55s cubic-bezier(.16, 1, .3, 1); }
@keyframes storySwap { from { opacity: 0; transform: translate3d(0, .32em, 0); } }
.story__ticks { display: flex; gap: 6px; }
.story__ticks li { width: 26px; height: 3px; border-radius: 2px; background: rgba(23, 21, 26, .14); transition: background .3s var(--ease), width .45s var(--ease); }
.story__ticks li.is-done { background: rgba(208, 2, 27, .38); }
.story__ticks li.is-on { width: 46px; background: var(--red); }

.story__list { display: grid; }
.story__step {
  position: relative;
  min-height: clamp(250px, 50vh, 500px);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: clamp(26px, calc(var(--u) * 3), 56px) 0 clamp(26px, calc(var(--u) * 3), 56px) clamp(22px, calc(var(--u) * 2.6), 48px);
  border-left: 1px solid rgba(23, 21, 26, .12);
  transition: opacity .4s var(--ease);
}
/* 지금 단계 : 왼쪽 선 위에 2px 막대가 선다(길이 변화만, 채움 트랙 없음) */
.story__step::before {
  content: ""; position: absolute; left: -1px; top: 50%; width: 2px; height: 64%;
  background: var(--red); transform: translateY(-50%) scaleY(0); transition: transform .5s var(--ease);
}
.story__step.is-on::before { transform: translateY(-50%) scaleY(1); }
html.js .story.is-live .story__step:not(.is-on) { opacity: .32; }
.story__when { font-size: clamp(13px, calc(var(--u) * .92), 16px); font-weight: 700; color: var(--red); }
.story__t { font-size: clamp(24px, calc(var(--u) * 2.5), 46px); font-weight: 800; letter-spacing: -.008em; line-height: 1.22; color: var(--ink); word-break: keep-all; }
.story__d { max-width: 32em; font-size: var(--fs-md); line-height: 1.72; color: var(--ink-2); word-break: keep-all; }
.story__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.story__meta > div { display: flex; align-items: baseline; gap: .6em; padding: .5em .95em; border-radius: var(--r-pill); background: rgba(255, 255, 255, .72); border: 1px solid rgba(23, 21, 26, .08); }
.story__meta dt { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); }
.story__meta dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }

[data-tone="dark"] .story__of { color: var(--on-noir-2); }
[data-tone="dark"] .story__n { color: var(--red-on-noir); }
[data-tone="dark"] .story__now { color: #fff; }
[data-tone="dark"] .story__ticks li { background: rgba(255, 255, 255, .14); }
[data-tone="dark"] .story__ticks li.is-done { background: rgba(255, 122, 132, .42); }
[data-tone="dark"] .story__ticks li.is-on { background: var(--red-on-noir); }
[data-tone="dark"] .story__step { border-left-color: rgba(255, 255, 255, .12); }
[data-tone="dark"] .story__step::before { background: var(--red-on-noir); }
[data-tone="dark"] .story__when { color: var(--red-on-noir); }
[data-tone="dark"] .story__t { color: var(--on-noir); }
[data-tone="dark"] .story__d { color: var(--on-noir-2); }
[data-tone="dark"] .story__meta > div { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
[data-tone="dark"] .story__meta dt { color: var(--on-noir-2); }
[data-tone="dark"] .story__meta dd { color: #fff; }

@media (max-width: 899px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .story__stick { position: static; }
  .story__count, .story__now, .story__ticks { display: none; }
  .story__step { min-height: 0; padding: 22px 0 22px 20px; }
  html.js .story.is-live .story__step:not(.is-on) { opacity: 1; }
  .story__step::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story__n.is-swap, .story__now.is-swap { animation: none; }
  .story__step, .story__step::before, .story__ticks li { transition: none; }
}

/* ══════════════════════════════════════════════════ 시안1 가로 챕터 : 공통 부품 ══════════
   .chap  : 챕터 번호 · 이름 (common.js 가 data-chapter 면의 제목 위에 단다)
   .rail  : 헤더 아래 챕터 레일 (데스크톱 1024+). 칸마다 번호 · 이름 · 챕터 안 진행선
   .track : 가로 단계 트랙 (메인 진행 순서 · 상세 진행 순서). 모션은 common.js DP.stepTrack */

/* ── 챕터 번호 */
.chap {
  display: flex; align-items: center; gap: .75em;
  margin-bottom: clamp(10px, calc(var(--u) * 1.1), 20px);
  font-variant-numeric: tabular-nums;
}
.chap b { font-size: var(--fs-lead); font-weight: 900; letter-spacing: 0em; color: var(--red); }
.chap span { display: inline-flex; align-items: center; gap: .75em; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0em; color: var(--ink-3); }
.chap span::before { content: ""; width: clamp(20px, calc(var(--u) * 2.2), 36px); height: 1.5px; background: currentColor; opacity: .5; }
[data-tone="dark"] .chap b { color: var(--red-on-noir); }
[data-tone="dark"] .chap span { color: var(--on-noir-2); }

/* ── 챕터 레일 */
.rail { display: none; }
@media (min-width: 1024px) and (min-height: 560px) {
  .rail {
    display: block; position: absolute; z-index: 1; left: 0; right: 0; top: 100%;
    height: var(--rail-h); padding: 0 var(--col);
    background: linear-gradient(180deg, rgba(253, 243, 240, .6), rgba(251, 241, 238, .72));
    -webkit-backdrop-filter: saturate(170%) blur(16px);
            backdrop-filter: saturate(170%) blur(16px);
    box-shadow: 0 1px 0 rgba(120, 60, 50, .08);
    opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0);
    transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .45s, background .5s var(--ease);
  }
  .top.is-set .rail.is-live { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  body.is-dark .rail { background: linear-gradient(180deg, rgba(19, 18, 21, .52), rgba(22, 21, 25, .66)); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
  .rail__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(8px, calc(var(--u) * 1), 18px); height: 100%; }
  .rail__a {
    height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: .55em; row-gap: 7px;
    font-size: var(--fs-2xs); letter-spacing: -.01em; color: var(--ink-3);
    transition: color .3s var(--ease);
  }
  .rail__n { font-weight: 800; font-variant-numeric: tabular-nums; }
  .rail__t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail__line { grid-column: 1 / -1; position: relative; display: block; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(23, 21, 26, .12); }
  .rail__fill { position: absolute; inset: 0; background: rgba(23, 21, 26, .38); transform: scaleX(0); transform-origin: 0 50%; }
  .rail__a:hover { color: var(--ink); }
  .rail__a[aria-current] { color: var(--ink); }
  .rail__a[aria-current] .rail__n { color: var(--red); }
  .rail__a[aria-current] .rail__fill { background: var(--red); }
  .rail__a:focus-visible { outline-offset: -2px; }
  body.is-dark .rail__a { color: var(--on-noir-2); }
  body.is-dark .rail__a:hover, body.is-dark .rail__a[aria-current] { color: #fff; }
  body.is-dark .rail__line { background: rgba(255, 255, 255, .14); }
  body.is-dark .rail__fill { background: rgba(255, 255, 255, .42); }
  body.is-dark .rail__a[aria-current] .rail__n { color: var(--red-on-noir); }
  body.is-dark .rail__a[aria-current] .rail__fill { background: var(--red-on-noir); }
  html.menu-open .rail { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rail, .rail__a { transition: none; } }

/* ── 단계 트랙 : 기본은 세로 목록(왼쪽 선 위의 마디) */
.track__bar { display: none; }
.track__list { display: grid; }
.track__step {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 20px 0 22px 30px; border-left: 1.5px solid var(--line-l);
}
.track__step::before {
  content: ""; position: absolute; left: -7px; top: 27px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 4px var(--paper);
}
.track__n { font-size: var(--fs-4xl); font-weight: 900; letter-spacing: -.012em; line-height: 1; color: var(--red); font-variant-numeric: proportional-nums; }
.track__when { font-size: clamp(13px, calc(var(--u) * .92), 16px); font-weight: 700; color: var(--red); }
.track__t { font-size: clamp(21px, calc(var(--u) * 2), 34px); font-weight: 800; letter-spacing: -.008em; line-height: 1.22; color: var(--ink); }
.track__d { max-width: 30em; font-size: var(--fs-md); line-height: 1.66; color: var(--ink-2); }
.track__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.track__meta > div { display: flex; align-items: baseline; gap: .55em; padding: .42em .85em; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); border: 1px solid rgba(23, 21, 26, .08); }
.track__meta dt { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); }
.track__meta dd { margin: 0; font-size: clamp(13px, calc(var(--u) * .92), 15.5px); font-weight: 700; color: var(--ink); }

/* 넓은 화면(핀 없음 · 모션 축소 포함) : 가로로 접어 여러 줄 */
@media (min-width: 1024px) {
  .track:not(.is-pinned) .track__list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: clamp(20px, calc(var(--u) * 2.4), 40px); }
}

/* 핀 : 한 줄. 위 진행선이 차고, 선이 닿은 단계만 켜진다 */
.track.is-pinned .track__view { overflow: hidden; margin-right: calc(var(--col) * -1); padding-right: var(--col); }
.track.is-pinned .track__rail { width: max-content; min-width: 100%; will-change: transform; }
.track.is-pinned .track__bar { display: block; position: relative; height: 2px; margin: 8px 0 34px; background: var(--line-l); }
.track.is-pinned .track__fill { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.track.is-pinned .track__list { grid-auto-flow: column; grid-auto-columns: var(--sw, clamp(280px, 25vw, 370px)); column-gap: clamp(20px, calc(var(--u) * 2.4), 44px); }
.track.is-pinned .track__step { padding: 0 0 0; border-left: 0; }
.track.is-pinned .track__step::before {
  left: 0; top: -41px; width: 14px; height: 14px; background: var(--paper); box-shadow: inset 0 0 0 2px rgba(23, 21, 26, .26);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.track.is-pinned .track__step.is-on::before { background: var(--red); box-shadow: 0 0 0 5px rgba(208, 2, 27, .14); transform: scale(1.1); }
.track.is-pinned .track__n { font-size: clamp(40px, calc(var(--u) * 4.6), 84px); color: rgba(23, 21, 26, .18); transition: color .4s var(--ease); }
.track.is-pinned .track__t { color: var(--ink-3); transition: color .4s var(--ease); }
.track.is-pinned .track__step.is-on .track__n { color: var(--red); }
.track.is-pinned .track__step.is-on .track__t { color: var(--ink); }

[data-tone="dark"] .track__step { border-left-color: var(--line-d); }
[data-tone="dark"] .track__step::before { box-shadow: 0 0 0 4px #17161A; }
[data-tone="dark"] .track__n, [data-tone="dark"] .track__when { color: var(--red-on-noir); }
[data-tone="dark"] .track__t { color: #fff; }
[data-tone="dark"] .track__d { color: var(--on-noir-2); }
[data-tone="dark"] .track__meta > div { background: rgba(255, 255, 255, .05); border-color: var(--line-d); }
[data-tone="dark"] .track__meta dt { color: var(--on-noir-2); }
[data-tone="dark"] .track__meta dd { color: #fff; }
@media (prefers-reduced-motion: reduce) { .track__step::before, .track__n, .track__t { transition: none !important; } }
/* 핀으로 화면을 꽉 채운 카드 구간(낮은 창)에서는 따라다니는 상담 버튼이 잠시 비킨다(헤더 전화번호는 그대로) */
body.dock-yield .dock { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* ══════════════════════════════════════════════════ 반응형 : 터치 대상 44px ══════════
   폰 · 태블릿 · 가로 폰(굵은 포인터 또는 폭 767 이하)에서 누르는 곳의 높이를 44px 이상으로. 보이는 글자 크기는 그대로, 누르는 영역만 넓힌다. */
@media (max-width: 767px), (pointer: coarse) {
  .top__logo { min-height: 44px; }
  .top__tel { min-height: 44px; }
  .foot__col a { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.3; }
  .foot__tel a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumb a, .crumb [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
  .more, .contact__faq { min-height: 44px; }
}
@media (max-width: 767px), (pointer: coarse) {
  .crumb a, .crumb [aria-current] { padding-inline: 6px; margin-inline: -6px; }
  .dock__b { min-height: 44px; }
}
/* 가로 폰(높이 500 이하) : 상담 버튼을 아이콘만 남긴 원 두 개로 줄여 화면을 덜 가린다(이름은 읽기 도구에 남긴다) */
@media (max-height: 500px) and (min-width: 568px) {
  .dock { left: auto; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); grid-auto-flow: row; grid-auto-columns: auto; gap: 8px; }
  .dock__b { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .dock__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dock__ic { width: 19px; height: 19px; }
}
/* 앵커로 이동하는 대상(섹션 밖 카드 · 목록 항목) : 헤더 아래에서 멈춘다. 챕터 면은 자기 윗여백이 헤더 + 레일을 비워 둔다 */
main [id]:not(section):not(main) { scroll-margin-top: calc(var(--top-h) + 20px); }
@media (min-width: 1024px) and (min-height: 560px) { main [id]:not(section):not(main) { scroll-margin-top: calc(var(--head-off) + 20px); } }
@media (max-width: 767px), (pointer: coarse) {
  .crumb a, .crumb [aria-current] { min-width: 44px; justify-content: center; }
}

/* ══════════════════════════════════════════════════ 성능 · 호환 (2026-09-14) ══════════
   유리 블러(backdrop-filter)는 스크롤할 때마다 뒤의 화면을 다시 흐리게 계산한다(Safari 에서 특히 비싸다).
   - 헤더 블러 반경 18 → 14px.
   - 블러를 지원하지 않는 브라우저, 저사양 단계(html.lite) : 블러 없이 거의 불투명한 면으로 같은 색을 낸다. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .top::before { background: rgba(253, 245, 243, .96); }
  body.is-dark .top::before { background: rgba(19, 18, 21, .94); }
  .rail { background: rgba(251, 241, 238, .96) !important; }
  body.is-dark .rail { background: rgba(22, 21, 25, .96) !important; }
  .gnb__panel { background: #FFFBFA; }
  .glass { background: linear-gradient(152deg, #FFFFFF 0%, #FFFCFB 52%, #FFF6F3 100%); }
  .glass-d { background: linear-gradient(152deg, #232026 0%, #1E1C21 55%, #1B191E 100%); }
}
html.lite .top::before, html.lite .rail, html.lite .gnb__panel, html.lite .menu, html.lite .glass, html.lite .glass-d { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.lite .top::before { background: rgba(253, 245, 243, .96); }
html.lite body.is-dark .top::before { background: rgba(19, 18, 21, .94); }
html.lite .rail { background: rgba(251, 241, 238, .96); }
html.lite body.is-dark .rail { background: rgba(22, 21, 25, .96); }
html.lite .gnb__panel { background: #FFFBFA; }
html.lite .glass { background: linear-gradient(152deg, #FFFFFF 0%, #FFFCFB 52%, #FFF6F3 100%); }
html.lite .glass-d { background: linear-gradient(152deg, #232026 0%, #1E1C21 55%, #1B191E 100%); }
html.lite .blob { animation: none; }

/* 진행 순서 단계 정리 (2026-09-14) : 제목 · 설명 글자를 한 단계 줄이고, 방식 · 결과물은 한 줄에 두 칸 고정(작은 이름 위, 값 아래).
   좁은 칸에서 문장 단위 강제 줄바꿈이 어색하게 끊겨 이 목록은 data-no-phrase 로 끄고 keep-all 로만 넘긴다. */
.track__t { font-size: var(--fs-2xl); }
.track__d { font-size: clamp(14px, calc(var(--u) * .96), 16px); line-height: 1.62; word-break: keep-all; }
.track__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.track__meta > div { display: grid; align-content: start; gap: 2px; min-width: 0; padding: .55em .75em; border-radius: 12px; }
.track__meta dt { font-size: 12px; }
.track__meta dd { font-size: clamp(12.5px, calc(var(--u) * .86), 14px); line-height: 1.35; word-break: keep-all; }

/* ══════════════════════════════════════════════════ 넘김 장치 .stp (2026-09-16) ══════════
   common.js DP.stepper 가 넣는다. [정지] 01 / 08 ─타이머─ [‹] [›]
   타이머 선은 다음 칸으로 넘어가기까지 남은 시간(--stp-ms)만큼 찬다. 멈춘 동안(is-hold)은 비워 두고 옅게. */
.stp { display: flex; align-items: center; gap: 10px; }
.stp__count { display: flex; align-items: baseline; gap: .35em; margin: 0 2px 0 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stp__count b { font-size: var(--fs-md); font-weight: 800; color: var(--ink); letter-spacing: 0; }
.stp__count span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.stp__time { position: relative; flex: 0 0 auto; width: clamp(48px, calc(var(--u) * 5), 84px); height: 2px; border-radius: 2px; background: rgba(23, 21, 26, .14); overflow: hidden; margin-right: 6px; }
.stp__time i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.stp.is-run .stp__time i { animation: stpTime var(--stp-ms, 6000ms) linear forwards; }
.stp.is-hold .stp__time { opacity: .5; }
@keyframes stpTime { to { transform: scaleX(1); } }
.stp__btn, .stp__play {
  position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .12), 0 6px 16px -10px rgba(60, 20, 20, .3);
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.stp__btn svg { width: 20px; height: 20px; }
.stp__play { width: 38px; height: 38px; background: transparent; box-shadow: inset 0 0 0 1px rgba(23, 21, 26, .16); }
/* 정지(두 줄) ↔ 재생(삼각형) */
.stp__play i { position: relative; width: 10px; height: 11px; }
.stp__play i::before, .stp__play i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 1px; background: currentColor; }
.stp__play i::before { left: 1px; }
.stp__play i::after { right: 1px; }
.stp.is-paused .stp__play i::before { left: 2px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent currentColor; }
.stp.is-paused .stp__play i::after { display: none; }
@media (hover: hover) {
  .stp__btn:hover { background: var(--red); color: #fff; box-shadow: 0 8px 18px -10px rgba(208, 2, 27, .6); }
  .stp__btn--prev:hover { transform: translateX(-2px); }
  .stp__btn--next:hover { transform: translateX(2px); }
  .stp__play:hover { box-shadow: inset 0 0 0 1px var(--ink); }
}
.stp__btn:active { transform: scale(.94); }
[data-tone="dark"] .stp__count b { color: #fff; }
[data-tone="dark"] .stp__count span { color: var(--on-noir-2); }
[data-tone="dark"] .stp__time { background: rgba(255, 255, 255, .16); }
[data-tone="dark"] .stp__btn { color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
[data-tone="dark"] .stp__play { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
@media (prefers-reduced-motion: reduce) { .stp__time { display: none; } .stp__btn, .stp__play { transition: none; } }

/* 단계 트랙 : 데스크톱 가로 줄 = 손으로 밀 수 있는 줄(스크롤 스냅). 스크롤바는 숨기고 넘김 장치로 넘긴다 */
.track.is-pinned { display: flex; flex-direction: column; }
.track.is-pinned > .stp { align-self: flex-end; margin-bottom: 18px; }
.track.is-pinned .track__view {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 0;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.track.is-pinned .track__view::-webkit-scrollbar { display: none; }
.track.is-pinned .track__rail { will-change: auto; }
.track.is-pinned .track__step { scroll-snap-align: start; }
.track.is-pinned .track__fill { transition: transform .7s var(--ease); }
.track.is-pinned .track__step.is-done::before { background: var(--red); box-shadow: none; transform: scale(.72); }
.track.is-pinned .track__step.is-done .track__n { color: rgba(208, 2, 27, .42); }
.track.is-pinned .track__step.is-done .track__t { color: var(--ink-2); }

/* 단계 트랙 동그라미 · 진행선 (2026-09-16)
   동그라미(14px)는 단계 칸 왼쪽 끝에 중심이 걸려 가로로 넘기는 줄의 경계에서 반쯤 잘렸고, 켜진 동그라미의 테두리는 위에서 잘렸다.
   줄 안쪽에 왼쪽 · 위 여백을 주고(바깥 여백은 음수로 되돌려 글 시작선은 그대로), 동그라미 중심을 칸 왼쪽에서 7px 안쪽에 둔다.
   진행선은 첫 동그라미 중심에서 마지막 동그라미 중심까지(common.js paint). */
.track.is-pinned .track__view { padding-top: 14px; padding-left: 14px; margin-left: -14px; scroll-padding-left: 14px; }
.track.is-pinned .track__bar { margin-left: 7px; }
.track.is-pinned .track__step::before { left: 0; }
.process .track.is-pinned .track__view { margin-left: -14px; padding-right: 0; }

/* ── 헤더 '게시판' 펼침 (2026-10-19) : 갈래 두 칸(대치재원생 · 대치예비생), 칸 머리를 누르면 그 갈래 전체 글 */
.gnb__panel--board { left: auto; right: -12px; min-width: 0; padding: 10px; transform: translateY(-6px); }
.gnb__item--board.is-open .gnb__panel--board { transform: none; }
.gnb__bgrid { display: grid; grid-template-columns: repeat(2, minmax(9.6em, auto)); gap: 6px; }
.gnb__b-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.4em;
  margin-bottom: 4px; padding: .7em .9em .62em; border-radius: 10px; border-bottom: 1px solid rgba(120, 60, 50, .1);
  font-size: var(--fs-sm); font-weight: 800; color: var(--ink); white-space: nowrap; transition: background .2s var(--ease);
}
.gnb__b-h i { font-size: max(12px, .84em); font-style: normal; font-weight: 600; color: var(--ink-3); }
.gnb__b-a { display: block; padding: .56em .9em; border-radius: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); }
.gnb__b-h:hover, .gnb__b-h:focus-visible, .gnb__b-a:hover, .gnb__b-a:focus-visible { background: rgba(208, 2, 27, .06); color: var(--ink); }
/* 전체 메뉴(1023px 이하) */
.menu__blist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 10px 0 16px; border-bottom: 1px solid var(--line); }
.menu__blist[hidden] { display: none; }
.menu__b-h { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 800; color: var(--ink); }
.menu__b-h i { margin-left: 6px; font-size: 13px; font-style: normal; font-weight: 600; color: var(--ink-3); }
.menu__b-a { display: flex; align-items: center; min-height: 40px; font-size: 15px; font-weight: 600; color: var(--ink-2); }