/* =============================================================================
   site.css — 랜딩·약관 페이지의 디자인 시스템 (2026-10 개편, 3차 정리)
   ---------------------------------------------------------------------------
   세계관: 실제 워크숍 강의장.
     벽      흰 세로 줄무늬 흡음 패널 (--wall + .wall 의 1px 줄) — 현장 사진의 그 벽
     블록    벽에 박힌 검은 사선 판 (.wall__slab) — 본문 옆에 여백이 충분할 때만
     포스트잇 결과물·핵심 문장이 붙는 노랑 (--note)
     데님    강사진이 입은 셔츠. 링크·포커스·완료 도장 (--denim, --denim-ink)

   원칙
   - 화려함은 히어로 한 곳: 소개 영상 + 장면으로 건너뛰는 포스트잇(장면이 바뀌면 검은
     테이프가 옮겨 붙는다). 섹션마다 페이드인을 걸지 않는다.
   - 기본 스타일 = 끝 상태. 시작 상태는 JS 가 붙인 클래스 아래에서만 건다(.js …:not(.is-on)).
     JS 가 없거나 모션 축소면 처음부터 다 보인다.
   - 움직임은 transform·opacity·clip-path 로. width·top 같은 레이아웃 속성은 움직이지 않는다.
   - 인라인 style 금지(CSP). JS 는 CSSOM(el.style.transform) 으로만 값을 바꾼다.
   - 관리자 화면은 이 파일을 쓰지 않는다(옛 tokens/base/components 체인 그대로).
   ========================================================================== */

:root {
  --wall: #FAFAF7;
  --paper: #FFFFFF;
  --ink: #000000;
  --text: #1E1E1C;
  --mute: #5C5C57;
  --line: #DCDCD5;
  --field: #8A8A84;          /* 입력칸 테두리 — 흰 바탕 대비 3.4:1 (WCAG 1.4.11) */
  --stripe: rgba(0, 0, 0, .07);
  --note: #FFD84A;
  --note-edge: #E8BE1E;
  --denim: #5B7FA8;
  --denim-ink: #22324A;
  --ok: #1E7F46;
  --err: #B42318;

  --font: 'Pretendard Variable', 'Pretendard Fallback', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --frame: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec: clamp(64px, 8vw, 104px);

  /* 모션 토큰 — 일상 상태 변화는 productive, 히어로·도장만 expressive (IBM Carbon 구분) */
  --dur-fast: 120ms;
  --dur-mod: 240ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(.2, 0, .38, .9);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ───────────────────────────── reset · base ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 112px; }
@media (min-width: 960px) { html { scroll-padding-top: 80px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--wall); color: var(--text);
  font-family: var(--font); font-size: 17px; line-height: 1.7; font-weight: 450;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: rgba(255, 216, 74, .35);
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--denim-ink); text-underline-offset: 3px; }
a, button, summary, label, select { touch-action: manipulation; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--denim); outline-offset: 2px; }
::selection { background: var(--note); color: var(--ink); }
.nowrap { white-space: nowrap; }

.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;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }
.toast-host { position: fixed; inset: auto 0 16px; pointer-events: none; }

.frame {
  width: 100%; max-width: calc(var(--frame) + var(--gutter) * 2); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.sec { padding: var(--sec) 0; position: relative; }

/* ─────────────────────────────── type ─────────────────────────────── */
.t-h2 {
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.22; font-weight: 800;
  letter-spacing: -.03em; color: var(--ink); max-width: 18em;
}
.t-lead { margin-top: 16px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.75; color: var(--mute); max-width: 38em; }

/* ─────────────────────────────── wall ─────────────────────────────── */
.wall {
  position: relative; overflow: hidden;
  background-color: var(--wall);
  background-image: repeating-linear-gradient(90deg, var(--stripe) 0 1px, transparent 1px 9px);
}
.wall--soft { background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 9px); }
/* 사선 판은 본문 바깥 여백이 60px 이상일 때만 둔다. 그보다 좁으면 가는 띠만 남아 깨진 화면처럼 보인다. */
.wall__slab { position: absolute; background: var(--ink); pointer-events: none; display: none; }
@media (min-width: 1320px) {
  .wall__slab { display: block; }
  .wall__slab--a { left: 0; top: 0; width: min(76px, calc((100vw - var(--frame)) / 2 - 24px)); height: 62%; clip-path: polygon(0 0, 100% 14%, 100% 72%, 0 100%); }
  .wall__slab--b { right: 0; bottom: 0; width: min(120px, calc((100vw - var(--frame)) / 2 - 24px)); height: 58%; clip-path: polygon(100% 0, 0 26%, 0 100%, 100% 100%); }
}

/* ─────────────────────────────── buttons ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 1.5px solid transparent; border-radius: 4px;
  font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
/* 검정 버튼은 누를 수 있다는 걸 포스트잇 노랑으로 알린다 — 대비가 줄지 않고 커진다. */
.btn--ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--ink:hover { background: var(--note); color: var(--ink); }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: #fff; }
.btn--sm { padding: 0 16px; font-size: 15px; }
.btn--lg { min-height: 56px; padding: 0 26px; font-size: 17px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ─────────────────────────────── header ─────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 247, .94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur-mod) var(--ease);
}
.hdr.is-scrolled { border-bottom-color: var(--line); }
.hdr__in { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); }
.brand__word { font-weight: 850; font-size: 18px; letter-spacing: -.03em; }
.brand__tag { font-size: 13px; font-weight: 600; color: var(--mute); }
.hdr__nav { display: none; margin-left: auto; gap: 22px; }
.hdr__nav a, .hdr__sub a { color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; }
.hdr__nav a:hover, .hdr__sub a:hover { color: var(--ink); text-decoration: underline; }
.hdr .btn { margin-left: auto; }
/* 좁은 화면: 섹션 바로가기를 한 줄 가로 스크롤로 */
.hdr__sub { border-top: 1px solid var(--line); }
.hdr__sub-in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hdr__sub-in::-webkit-scrollbar { display: none; }
.hdr__sub a { flex: none; padding: 11px 10px; font-size: 14px; }
.hdr__sub a:first-child { padding-left: 0; }
@media (min-width: 960px) {
  .hdr__nav { display: flex; }
  .hdr .btn { margin-left: 8px; }
  .hdr__sub { display: none; }
}

/* ──────────────────────────────── hero ──────────────────────────────── */
.hero { padding: clamp(32px, 6vw, 88px) 0 clamp(40px, 6vw, 72px); }
.hero__grid { position: relative; display: grid; gap: 28px clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.02fr 1fr; grid-template-areas: 'copy stage' 'facts stage'; }
  .hero__copy { grid-area: copy; align-self: end; }
  .hero__facts { grid-area: facts; align-self: start; }
  .hero__stage { grid-area: stage; }
}
.hero__title {
  font-size: clamp(36px, 4.6vw, 66px); line-height: 1.1; font-weight: 820;
  letter-spacing: -.04em; color: var(--ink);
}
.hero__lead { margin-top: 22px; font-size: clamp(17px, 1.4vw, 20px); color: var(--mute); max-width: 31em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); max-width: 560px; }
.hero__facts > div { display: flex; flex-direction: column-reverse; padding: 14px 12px 0 0; }
.hero__facts > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.hero__facts dt { font-size: 13px; color: var(--mute); font-weight: 600; }
.hero__facts dd { font-size: clamp(22px, 2.2vw, 28px); font-weight: 820; letter-spacing: -.03em; color: var(--ink); line-height: 1.25; }

/* 소개 영상 플레이어 — 화면 · 자막 · 장면 진행 칸 */
.hero__stage { position: relative; min-width: 0; }
.player {
  position: relative; container-type: inline-size; background: var(--ink); color: #fff;
  border-radius: 8px; padding: clamp(6px, .8vw, 10px); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .5);
}
.player__screen { position: relative; border-radius: 3px; overflow: hidden; background: #111; }
.player__video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.js .player__video::-webkit-media-controls { display: none !important; }
.player__row { display: flex; align-items: flex-start; gap: 12px; }
.player__ctrl { flex: none; display: flex; gap: 8px; padding: 14px 4px 0 0; }
.player__toggle {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.player__toggle:hover { background: #fff; border-color: #fff; }
.player__toggle:hover .player__ico--play { border-left-color: var(--ink); }
.player__toggle:hover .player__ico--pause { border-color: var(--ink); }
.player__ico--play { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.player__ico--pause { display: none; width: 12px; height: 15px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.player.is-playing .player__ico--play { display: none; }
.player.is-playing .player__ico--pause { display: block; }
.player__sound {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 22px; background: transparent; color: #fff;
  font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease);
}
.player__sound:hover { background: rgba(255, 255, 255, .12); }
@container (max-width: 420px) { .player__sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .player__sound { padding: 0 12px; } }
.player__sound[aria-pressed="true"] { background: var(--note); color: var(--ink); }
/* 자동 재생이 막혔거나(저전력 모드 등) 모션 축소일 때만 보이는 큰 재생 단추 */
.player__big {
  position: absolute; inset: 0; z-index: 2; display: none; place-content: center; justify-items: center; gap: 10px;
  border: 0; background: rgba(0, 0, 0, .28); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
}
.player.is-blocked .player__big { display: grid; }
.player__big-ico {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--note);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); transition: transform var(--dur-mod) var(--ease-out);
}
.player__big-ico::after { content: ''; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--ink); }
.player__big:hover .player__big-ico { transform: scale(1.06); }
.player__cap { flex: 1; min-width: 0; }

.player__cap { display: flex; align-items: center; gap: 10px; padding: 18px 6px 12px; min-height: 58px; }
.player__chip { padding: 3px 10px; background: var(--note); color: var(--ink); font-size: 14px; font-weight: 800; white-space: nowrap; }
.player__at { font-size: 15px; font-weight: 700; color: #C9C9C2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player__cap.is-swap > * { animation: capIn var(--dur-slow) var(--ease-out) both; }
.player__cap.is-swap > *:nth-child(2) { animation-delay: 40ms; }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); } }

.player__segs { display: grid; grid-template-columns: 9fr 4fr 4fr 4fr 4fr 4fr 7fr; gap: 4px; padding: 0 6px 6px; }
.seg { height: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.seg i { display: block; height: 100%; background: var(--note); transform: scaleX(0); transform-origin: left center; }
html:not(.js) .seg i { transform: scaleX(1); }

/* 장면 포스트잇 */
.tray { margin-top: clamp(32px, 5vw, 52px); display: grid; gap: 14px; }
@media (min-width: 1024px) { .tray { grid-template-columns: 176px 1fr; align-items: center; } }
.tray__label { font-weight: 800; font-size: 15px; color: var(--ink); line-height: 1.45; }
.tray__label span { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--mute); }
.tray__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .tray__list { gap: 12px; } }
.note {
  position: relative; display: block; width: 100%; height: 100%; min-height: 76px; padding: 10px 10px 12px; border: 0; text-align: left; cursor: pointer;
  background: var(--note); color: var(--ink); font: inherit;
  box-shadow: 0 1px 0 var(--note-edge), 0 14px 18px -14px rgba(0, 0, 0, .45);
  transform: rotate(var(--r, -1.2deg)); transition: transform var(--dur-mod) var(--ease-out), box-shadow var(--dur-mod) var(--ease);
}
.tray__list li:nth-child(2) .note { --r: 1.4deg; }
.tray__list li:nth-child(3) .note { --r: -.6deg; }
.tray__list li:nth-child(4) .note { --r: 1.8deg; }
.tray__list li:nth-child(5) .note { --r: -1.6deg; }
.note:hover { transform: rotate(0deg) translateY(-3px); }
.note[aria-current="true"] { transform: rotate(0deg) translateY(-6px); }
.note__n { display: block; font-weight: 850; font-size: 20px; line-height: 1; }
.note__t { display: block; margin-top: 8px; font-weight: 750; font-size: 13px; line-height: 1.35; }
.note__long { display: none; }
.note__play { position: absolute; right: 10px; top: 11px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent rgba(0, 0, 0, .55); }
@media (min-width: 820px) {
  .note { min-height: 104px; padding: 12px 14px 14px; }
  .note__n { font-size: 22px; }
  .note__t { margin-top: 10px; font-size: 15px; }
  .note__long { display: inline; }
  .note__short { display: none; }
}
/* 지금 장면에 붙는 검은 테이프 — 장면이 바뀌면 View Transitions 로 옆 포스트잇으로 옮겨 간다 */
.tape { position: absolute; left: 50%; top: -9px; width: 54px; height: 16px; margin-left: -27px; background: var(--ink); transform: rotate(-3deg); view-transition-name: chapter-tape; }
::view-transition-group(chapter-tape) { animation-duration: var(--dur-mod); animation-timing-function: var(--ease-out); }

/* ─────────────────────────────── problem ─────────────────────────────── */
.problem__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .problem__grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.problem .sticky-note { margin-top: 32px; max-width: 520px; }
.sticky-note {
  padding: 28px 28px 30px; background: var(--note); color: var(--ink);
  box-shadow: 0 1px 0 var(--note-edge), 0 22px 30px -22px rgba(0, 0, 0, .45);
}
.sticky-note--tilt { transform: rotate(-1.2deg); }
.sticky-note__big { font-size: clamp(21px, 2.1vw, 26px); line-height: 1.4; font-weight: 820; letter-spacing: -.025em; margin-bottom: 12px; }
.art { border: 1px solid var(--line); background: #fff; }
.art img { width: 100%; height: auto; }

/* ─────────────────────────────── compare ─────────────────────────────── */
.sec--ink { background: var(--ink); color: #EDEDE8; }
.sec--ink .t-h2 { color: #fff; }
.sec--ink .t-lead { color: #B5B5AE; }
.cmp { width: 100%; margin-top: 44px; border-collapse: collapse; }
.cmp th, .cmp td { padding: 20px 20px 20px 0; text-align: left; vertical-align: baseline; border-top: 1px solid rgba(255, 255, 255, .18); font-weight: inherit; }
.cmp tbody tr:last-child > * { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.cmp thead th, .cmp thead td { padding-top: 0; padding-bottom: 12px; border-top: 0; font-size: 14px; font-weight: 700; color: #9C9C96; }
.cmp thead .cmp__us-h { color: var(--note); }
.cmp__k { width: 190px; font-weight: 800 !important; color: #fff; }
.cmp__ico { display: inline-block; vertical-align: -4px; margin-right: 10px; color: var(--note); }
.cmp__them { color: #9C9C96; }
/* «이 워크숍» 열은 한 칸 밝은 바탕으로 묶어 눈이 그 열을 따라 내려가게 한다 */
.cmp__us { color: #fff; font-weight: 650; background: rgba(255, 216, 74, .08); padding-left: 18px !important; }
.cmp__us::before { content: '✓' / ''; color: var(--note); font-weight: 900; margin-right: 10px; }
.cmp__tag { display: none; }
@media (max-width: 839px) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tr { display: grid; gap: 8px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
  .cmp th, .cmp td { padding: 0; border: 0 !important; width: auto; }
  .cmp__us { padding: 10px 12px !important; }
  .cmp__tag { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: #8E8E88; }
  .cmp__us .cmp__tag { color: var(--note); }
  .cmp__us::before { content: none; }
}

/* ─────────────────────────────── outcomes ─────────────────────────────── */
.bento { display: grid; gap: 16px; margin-top: 44px; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .tile--5 { grid-column: 1 / -1; } }
@media (min-width: 1080px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento .tile { grid-column: span 2; }
  /* 피날레(실습 5, 2시간)는 두 칸 — 그림 왼쪽, 글 오른쪽 */
  .bento .tile--5 { grid-column: span 4; display: grid; grid-template-columns: 1.2fr 1fr; }
  .bento .tile--5 .tile__art { border-bottom: 0; border-right: 1px solid var(--line); aspect-ratio: auto; height: 100%; }
  /* 이 칸은 16:9 보다 좁아 좌우가 12% 씩 잘린다 — outcome-5 는 그 안쪽에만 내용을 둔다(media-src/outcomes) */
  .bento .tile--5 .tile__body { align-self: center; }
}
.tile { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; }
.tile__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: #F4F4F0; }
.tile__art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.tile:hover .tile__art img { transform: scale(1.03); }
.tile__body { padding: 20px 22px 24px; }
.tile__t { display: flex; gap: 10px; align-items: baseline; font-size: 20px; line-height: 1.4; font-weight: 820; letter-spacing: -.02em; color: var(--ink); }
.tile__n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--note); font-size: 14px; font-weight: 850; transform: translateY(-1px); }
.tile__d { margin-top: 8px; font-size: 16px; color: var(--mute); }
.tile__lab { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; font-weight: 700; color: var(--mute); }
.stamp {
  position: absolute; top: 12px; right: 12px; z-index: 2; padding: 3px 9px 4px;
  border: 2px solid var(--denim-ink); border-radius: 3px; color: var(--denim-ink); background: rgba(255, 255, 255, .92);
  font-size: 13px; font-weight: 850; transform: rotate(-6deg);
}
.stamp time { font-variant-numeric: tabular-nums; }
.js .tile:not(.is-on) .stamp { opacity: 0; transform: rotate(-6deg) scale(1.35); }
.tile.is-on .stamp { animation: stampIn var(--dur-slow) .25s var(--ease-out) both; }
@keyframes stampIn { from { opacity: 0; transform: rotate(-6deg) scale(1.35); } }

/* ──────────────────────────────── shift ──────────────────────────────── */
.shift__grid { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 840px) { .shift__grid { grid-template-columns: 1fr 1fr; gap: 0; } }
.shift__col { padding: 24px 26px 28px; }
.shift__col--before { background: #EFEFEA; }
.shift__col--after { background: var(--paper); border: 1.5px solid var(--ink); }
.shift__img { width: 100%; height: auto; margin-bottom: 18px; border: 1px solid var(--line); background: #fff; }
.shift__h { font-size: 16px; font-weight: 820; margin-bottom: 10px; color: var(--ink); }
.shift__col--before .shift__h { color: var(--mute); }
.shift__col li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--line); font-size: 16px; }
.shift__col li::before { position: absolute; left: 0; top: 11px; font-weight: 850; }
.shift__col--before li { color: var(--mute); }
.shift__col--before li::before { content: '–' / ''; color: #8E8E88; }
.shift__col--after li { color: var(--ink); font-weight: 600; }
.shift__col--after li::before { content: '✓' / ''; color: var(--ink); background: var(--note); width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 13px; top: 14px; }

/* ───────────────────────────────── day ───────────────────────────────── */
.dbar { width: 100%; height: auto; margin-top: 40px; overflow: visible; }
.dbar__b rect { fill: #E4E4DE; }
.dbar__b--lab rect { fill: var(--note); }
.dbar__b--lunch rect { fill: #fff; stroke: #BDBDB6; stroke-dasharray: 4 4; stroke-width: 1.5; }
.dbar__b text { font-family: var(--font); font-size: 18px; font-weight: 850; fill: var(--ink); }
.dbar__b--lunch text { font-size: 15px; font-weight: 700; fill: var(--mute); }
.dbar__tick line { stroke: #9A9A94; stroke-width: 1; }
.dbar__tick text { font-family: var(--font); font-size: 15px; font-weight: 600; fill: var(--mute); font-variant-numeric: tabular-nums; }
.dbar__tick--edge text { font-weight: 800; fill: var(--ink); }
@media (max-width: 640px) { .dbar__tick text { font-size: 34px; } .dbar__b text { font-size: 38px; } .dbar__b--lunch text { display: none; } .dbar__tick:not(.dbar__tick--edge) { display: none; } }

.day__grid { display: grid; gap: 32px; margin-top: 48px; }
@media (min-width: 960px) { .day__grid { grid-template-columns: 300px 1fr; gap: 64px; } }
.clock { display: none; }
@media (min-width: 960px) { .clock { display: block; position: sticky; top: 96px; align-self: start; } }
.clock__t { font-size: clamp(64px, 7vw, 100px); line-height: 1; font-weight: 850; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.clock__label { margin-top: 22px; font-size: 14px; font-weight: 800; color: var(--ink); }
.clock__tray { margin-top: 10px; display: grid; gap: 6px; }
.clock__tray li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 14px; font-weight: 650; line-height: 1.35; background: var(--note); color: var(--ink); transition: background-color var(--dur-mod) var(--ease), color var(--dur-mod) var(--ease); }
.clock__tray li span { flex: none; width: 22px; font-weight: 850; }
.js .clock__tray li:not(.is-got) { background: transparent; color: #6E6E69; outline: 1.5px dashed #B8B8B1; outline-offset: -1.5px; }

.agenda { position: relative; }
.agenda__i { position: relative; display: grid; grid-template-columns: 1fr; gap: 4px 24px; padding: 20px 0 22px; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .agenda__i { grid-template-columns: 112px 40px 1fr; align-items: start; } }
.agenda__time { font-size: 15px; font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.agenda__ico { display: grid; place-items: center; width: 40px; height: 40px; background: #EFEFEA; color: var(--ink); }
.agenda__i--lab .agenda__ico { background: var(--note); }
.agenda__i--lunch .agenda__ico { background: transparent; outline: 1.5px dashed #B8B8B1; outline-offset: -1.5px; color: var(--mute); }
@media (max-width: 639px) { .agenda__ico { display: none; } }
.agenda__t { font-size: 19px; line-height: 1.4; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.agenda__d { margin-top: 4px; color: var(--mute); font-size: 16px; }
.agenda__out { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; color: var(--ink); }
.agenda__chip { padding: 2px 8px; background: var(--note); font-size: 13px; font-weight: 800; }
.agenda__i--lab .agenda__time { color: var(--ink); }
.agenda__i--lunch .agenda__t { color: var(--mute); font-weight: 650; }
/* 일정 왼쪽 레일 — 스크롤한 만큼 노랗게 찬다. 스크롤과 «지금 몇 시» 가 같은 이야기라 쓴다.
   지원하는 브라우저 + 모션 허용일 때만. 나머지는 레일 없이 그대로. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
    .agenda::before {
      content: ''; position: absolute; left: -32px; top: 0; bottom: 0; width: 3px; background: var(--note);
      transform-origin: top center; animation: railFill linear both; animation-timeline: view(); animation-range: entry 40% cover 70%;
    }
    .agenda::after { content: ''; position: absolute; left: -32px; top: 0; bottom: 0; width: 3px; background: #E4E4DE; z-index: -1; }
  }
}
@keyframes railFill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ───────────────────────────────── fit ───────────────────────────────── */
.fit__grid { display: grid; gap: 28px; margin-top: 36px; }
@media (min-width: 840px) { .fit__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.persona__img { width: 100%; height: auto; margin-bottom: 20px; border: 1px solid var(--line); background: #fff; }
.persona__role { font-size: 23px; line-height: 1.35; font-weight: 820; letter-spacing: -.025em; color: var(--ink); }
.persona__who { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--mute); }
.persona__q { position: relative; margin-top: 18px; padding: 16px 18px 16px 52px; background: #fff; border: 1px solid var(--line); font-size: 18px; line-height: 1.55; font-weight: 650; color: var(--ink); }
.persona__q::before { content: '“' / ''; position: absolute; left: 14px; top: 2px; font-size: 52px; line-height: 1; font-weight: 900; color: var(--note-edge); }
.persona__d { margin-top: 14px; color: var(--mute); }
.fit__not { margin-top: 32px; font-size: 15px; color: var(--mute); }

/* ───────────────────────────── instructor ───────────────────────────── */
.instructor { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.instructor__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .instructor__grid { grid-template-columns: 320px 1fr; gap: 72px; } }
.portrait { position: relative; max-width: 320px; }
.portrait__frame { position: relative; display: block; margin-right: 18px; }
.portrait__frame::before { content: ''; position: absolute; inset: 18px -18px -18px 18px; background: var(--note); }
.portrait img { position: relative; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.portrait figcaption { margin-top: 34px; font-size: 15px; color: var(--mute); }
.portrait figcaption b { color: var(--ink); font-size: 18px; font-weight: 850; margin-right: 6px; }
.creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.creds li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1.5px solid var(--ink); font-size: 15px; font-weight: 700; color: var(--ink); }
.creds li:first-child { background: var(--note); border-color: var(--note); }
.creds .ico { color: var(--denim-ink); }
.built__title { margin-top: 36px; font-size: 15px; font-weight: 800; color: var(--ink); }
.built { display: grid; gap: 0; margin-top: 8px; }
@media (min-width: 640px) { .built { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.built li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.built__ico { flex: none; margin-top: 2px; color: var(--denim-ink); }
.built b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.built span { display: block; margin-top: 2px; font-size: 15px; color: var(--mute); }

/* ──────────────────────────────── field ──────────────────────────────── */
.field__grid { display: grid; gap: 20px; margin-top: 40px; align-items: start; }
@media (min-width: 900px) {
  .field__grid { grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: stretch; }
  .photo { display: flex; flex-direction: column; }
  .photo--tall img { flex: 1 1 0; height: 0; min-height: 0; aspect-ratio: auto !important; object-position: 50% 30%; }
}
.photo { background: #fff; border: 1px solid var(--line); }
.photo img { width: 100%; height: auto; }
.photo--wide img { aspect-ratio: 4 / 3; object-fit: cover; }
.photo--tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.photo figcaption { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px 18px; font-size: 15px; color: var(--mute); }
.photo figcaption .ico { flex: none; margin-top: 2px; color: var(--ink); }
.photo figcaption b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); }

/* ──────────────────────────────── prep ──────────────────────────────── */
.prep { padding-top: 0; }
.prep__grid { display: grid; gap: 24px; padding-top: var(--sec); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .prep__grid { grid-template-columns: 1fr 1.6fr; gap: 64px; } }
.prep__list { display: grid; gap: 0; }
@media (min-width: 640px) { .prep__list { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.prep__list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 2px solid var(--ink); }
.prep__ico { flex: none; margin-top: 2px; color: var(--ink); }
.prep__list b { display: block; font-size: 18px; font-weight: 820; color: var(--ink); }
.prep__list span { display: block; margin-top: 2px; font-size: 15px; color: var(--mute); }
.prep__note { margin-top: 20px; font-size: 16px; color: var(--mute); }

/* ───────────────────────────────── faq ───────────────────────────────── */
.faq__grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: 1fr 1.6fr; gap: 64px; } }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  position: relative; list-style: none; cursor: pointer; padding: 20px 44px 20px 0;
  font-size: 18px; font-weight: 750; color: var(--ink); line-height: 1.5;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat;
  transition: transform var(--dur-mod) var(--ease-out);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.qa p { padding: 0 0 22px; color: var(--mute); max-width: 40em; }

/* ──────────────────────────────── apply ──────────────────────────────── */
.apply { background: var(--paper); border-top: 1px solid var(--line); }
.apply__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .apply__grid { grid-template-columns: 1fr 1.25fr; gap: 72px; } }
.apply__meta { margin-top: 28px; display: grid; gap: 0; }
.apply__meta > div { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.apply__meta dt { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--mute); padding-top: 2px; }
.apply__meta dd { font-weight: 650; color: var(--ink); }
.apply__meta dd span { display: block; font-weight: 500; font-size: 15px; color: var(--mute); }
.apply__art { margin-top: 28px; border: 1px solid var(--line); background: #fff; }
.apply__art img { width: 100%; height: auto; }
.apply__art figcaption { padding: 12px 14px; font-size: 15px; font-weight: 700; color: var(--ink); }
.apply__card { position: relative; background: #fff; border: 1.5px solid var(--ink); padding: clamp(22px, 3vw, 36px); box-shadow: 12px 12px 0 var(--note); }
@media (max-width: 480px) { .apply__card { box-shadow: 8px 8px 0 var(--note); margin-right: 8px; } }

.form__grid { display: grid; gap: 16px 18px; }
@media (min-width: 640px) { .form__grid { grid-template-columns: 1fr 1fr; } }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld--wide { grid-column: 1 / -1; }
.form > .fld { margin-top: 16px; }
.fld label { font-size: 15px; font-weight: 700; color: var(--ink); }
.req { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--denim-ink); }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; background: #fff;
  border: 1.5px solid var(--field); border-radius: 4px; font-size: 16px; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.fld textarea { resize: vertical; min-height: 112px; line-height: 1.6; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: #5E5E59; }
/* 포커스: 투명 outline 을 남겨 고대비(forced-colors) 모드에서도 테두리가 보이게 한다 */
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid transparent; outline-offset: 1px; border-color: var(--ink); box-shadow: 0 0 0 3px var(--denim); }
.fld input::placeholder, .fld textarea::placeholder { color: #74746E; }
.fld__hint { font-size: 14px; color: var(--mute); }
.fld--err input, .fld--err select, .fld--err textarea { border-color: var(--err); }
.fld__err { font-size: 14px; font-weight: 650; color: var(--err); }
.form__alert { margin-bottom: 20px; padding: 14px 16px; border: 1.5px solid var(--err); border-radius: 4px; background: #FDF1EF; color: var(--err); font-size: 15px; }
.form__alert:focus { outline: 3px solid var(--denim); outline-offset: 2px; }
.form__alert ul { margin-top: 6px; display: grid; gap: 2px; }
.form__alert a { color: var(--err); font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { margin: 20px 0 22px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 700; color: var(--ink); font-size: 16px; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }
.consent__text { margin-top: 8px; padding-left: 32px; max-width: 62ch; font-size: 13px; line-height: 1.6; color: var(--mute); }
.consent__text a { display: inline-block; padding: 4px 0; }
.consent .fld__err { padding-left: 32px; margin-top: 6px; }
.form__note { margin-top: 10px; font-size: 14px; color: var(--mute); text-align: center; }

.done { padding: 20px 4px; }
.done:focus { outline: none; }
.done__mark { display: inline-grid; place-items: center; width: 52px; height: 52px; background: var(--note); color: var(--ink); font-size: 26px; font-weight: 900; }
.done__t { margin-top: 18px; font-size: 26px; font-weight: 850; letter-spacing: -.03em; color: var(--ink); }
.done p { margin-top: 10px; color: var(--mute); }

/* ──────────────────────────────── footer ──────────────────────────────── */
.foot { background: var(--ink); color: #A9A9A3; padding: 48px 0 32px; font-size: 14px; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.foot__brand { color: #fff; font-weight: 850; font-size: 17px; margin-bottom: 8px; }
.foot__brand span { font-weight: 500; font-size: 14px; color: #A9A9A3; margin-left: 6px; }
.foot__links { display: flex; gap: 8px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.foot a { color: #E2E2DC; }
.foot__small { margin-top: 24px; font-size: 12px; color: #8F8F89; }
.foot__small { max-width: calc(72ch + var(--gutter) * 2); margin-left: max(0px, calc((100% - var(--frame) - var(--gutter) * 2) / 2)); }

/* ─────────────────────────────── 약관 문서 ─────────────────────────────── */
.doc-hdr { border-bottom: 1px solid var(--line); background: var(--wall); }
.doc-hdr .hdr__in { justify-content: space-between; }
.doc { max-width: 760px; padding: 56px 0 96px; }
.doc h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 850; letter-spacing: -.03em; color: var(--ink); }
.doc h2 { margin: 40px 0 12px; font-size: 20px; font-weight: 800; color: var(--ink); }
.doc p, .doc li { font-size: 16px; color: var(--text); }
.doc p + p { margin-top: 10px; }
.doc ul { list-style: disc; padding-left: 22px; }
.doc li + li { margin-top: 4px; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc th { background: #F1F1EC; font-weight: 700; }
.doc .t-cap { font-size: 14px; color: var(--mute); margin-top: 8px; }
.doc__table { overflow-x: auto; }

/* 오류 페이지 */
.error-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 64px var(--gutter); }
.error-page__code { font-size: clamp(64px, 10vw, 120px); font-weight: 900; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.error-page__msg { margin: 16px 0 28px; font-size: 20px; font-weight: 700; }

/* ─────────────────────────── 모션 축소 ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}