/* 레이아웃: 12단 그리드 위에 코트 라인처럼 가는 선으로 구획을 나누고, 사진 · 큰 글자 · 여백이 번갈아 리듬을 만든다. */
@font-face {
  font-family: 'Pretendard';
  src: url('../assets/fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-display: swap;
}

:root {
  /* 색 */
  --ink: #0B1330;
  --ink-2: #1B2547;
  --court: #2448FF;
  --court-deep: #1733D6;
  --court-soft: #E8ECFF;
  --clay: #FF6A3D;
  --paper: #F5F6F2;
  --white: #FFFFFF;
  --mute: #5B6478;
  --mute-2: #8A92A6;
  --line: #E1E4EB;
  --line-strong: #C9CEDA;
  --error: #D92D20;
  --success: #12805C;

  /* 글꼴 */
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-display: 'Archivo', 'Pretendard', sans-serif;

  /* 글자 크기 (데스크톱 → 모바일은 clamp로 자연스럽게) */
  --fs-hero: clamp(40px, 6.2vw, 96px);
  --fs-h1: clamp(34px, 4.6vw, 68px);
  --fs-h2: clamp(28px, 3.3vw, 48px);
  --fs-h3: clamp(20px, 1.7vw, 24px);
  --fs-lead: clamp(17px, 1.25vw, 19px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;

  /* 간격 (4px 단위) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 40px; --s8: 56px; --s9: 80px; --s10: 120px;
  --sec: clamp(88px, 9vw, 140px);
  --gutter: clamp(20px, 4vw, 48px);
  --max: 1280px;
  --hd-h: 72px;

  /* 폼 · 버튼 규격 (한국 공공·상용 서비스 평균: 입력 48, 큰 버튼 56) */
  --field-h: 48px;
  --btn-l: 56px;
  --btn-m: 48px;
  --btn-s: 40px;
  --r-ctl: 8px;
  --r-card: 20px;
  --r-big: 28px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 1px 2px rgba(11, 19, 48, .06), 0 12px 32px -12px rgba(11, 19, 48, .18);
  color-scheme: light;
}

@media (max-width: 1023px) {
  :root { --hd-h: 60px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.7 var(--font-body);
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 800; letter-spacing: -0.035em; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--court); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--court); color: var(--white); }
[hidden] { display: none !important; }
main:focus { outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.br-pc { display: none; }
@media (min-width: 768px) { .br-pc { display: inline; } .br-m { display: none; } }

/* ── 레이아웃 ── */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(64px, 6vw, 96px); }
.sec--ink { background: var(--ink); color: var(--white); }
.sec--court { background: var(--court); color: var(--white); }
.sec--white { background: var(--white); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 13px/1 var(--font-display); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase;
  color: var(--court);
}
.eyebrow::before { content: ''; width: 18px; height: 2px; background: currentColor; }
.sec--ink .eyebrow, .sec--court .eyebrow, .on-dark .eyebrow { color: #9DB0FF; }
.sec--court .eyebrow { color: var(--white); }

.head { display: grid; gap: var(--s4); max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.head--row { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s5); }
.head h2 { font-size: var(--fs-h2); line-height: 1.22; }
.head p { color: var(--mute); font-size: var(--fs-lead); max-width: 62ch; }
.sec--ink .head p, .sec--court .head p { color: rgba(255, 255, 255, .72); }
@media (max-width: 767px) { .head--row { grid-template-columns: 1fr; align-items: start; } }

.d-xl { font-size: var(--fs-hero); line-height: 1.1; }
.d-l { font-size: var(--fs-h1); line-height: 1.16; }
.lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--mute); }
.en { font-family: var(--font-display); font-stretch: 118%; font-weight: 800; letter-spacing: -0.01em; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 700; }

/* 줄 단위 마스크 제목 */
.ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ln > span { display: block; }

/* ── 버튼 ── */
.btn {
  --bg: var(--court); --fg: var(--white); --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-m); padding: 0 22px; border-radius: var(--r-ctl);
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { --bg: var(--court-deep); }
.btn:active { transform: scale(.98); }
.btn--l { height: var(--btn-l); padding: 0 28px; font-size: 17px; }
.btn--s { height: var(--btn-s); padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }
.btn--ink { --bg: var(--ink); }
.btn--ink:hover { --bg: var(--ink-2); }
.btn--white { --bg: var(--white); --fg: var(--ink); }
.btn--white:hover { --bg: var(--court-soft); }
.btn--line { --bg: transparent; --fg: var(--ink); --bd: var(--line-strong); }
.btn--line:hover { --bg: var(--white); --bd: var(--ink); }
.btn--ghost { --bg: rgba(255, 255, 255, .1); --fg: var(--white); --bd: rgba(255, 255, 255, .35); backdrop-filter: blur(8px); }
.btn--ghost:hover { --bg: rgba(255, 255, 255, .2); }
.btn--clay { --bg: var(--clay); --fg: var(--ink); }
.btn--clay:hover { --bg: #FF8460; }
.btn svg { width: 18px; height: 18px; flex: none; }
.arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow, .more:hover .arrow { transform: translateX(4px); }

.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding-block: 8px; border-bottom: 1.5px solid currentColor; }
.more svg { width: 16px; height: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--white); font-size: 15px; font-weight: 600; color: var(--ink-2);
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip small { font: 600 12px var(--font-display); opacity: .7; }

.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 700; background: var(--court-soft); color: var(--court-deep); white-space: nowrap; }
.tag--live { background: var(--court); color: var(--white); }
.tag--soon { background: var(--clay); color: var(--ink); }
.tag--ended { background: #E4E6EC; color: var(--mute); }
.tag--line { background: transparent; border: 1px solid currentColor; }

/* ── 머리글 ── */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd-h);
  display: flex; align-items: center; gap: var(--s6);
  padding-inline: var(--gutter);
  color: var(--ink);
  transition: transform .45s var(--ease), background-color .3s, color .3s, box-shadow .3s;
}
.hd[data-tone="dark"] { color: var(--white); }
/* 밝은 조명이 있는 사진 위에서도 메뉴 글자가 읽히도록 옅은 그림자를 깐다 */
.hd::before { content: ''; position: absolute; inset: 0 0 -48px; z-index: -1; background: linear-gradient(rgba(7, 11, 28, .62), rgba(7, 11, 28, 0)); opacity: 0; pointer-events: none; transition: opacity .3s; }
.hd[data-tone="dark"]:not(.is-solid)::before { opacity: 1; }
body.is-menu .hd::before { opacity: 0; }
.hd.is-solid { background: rgba(245, 246, 242, .86); backdrop-filter: blur(14px) saturate(1.4); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.hd.is-solid[data-tone="dark"] { background: rgba(11, 19, 48, .82); color: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.hd.is-hidden { transform: translateY(-100%); }
body.is-menu .hd { transform: none; background: var(--ink); color: var(--white); box-shadow: none; }

.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; white-space: nowrap; }
.logo__mark { width: 30px; height: 30px; flex: none; }
.logo__en { font: 800 12px var(--font-display); font-stretch: 120%; letter-spacing: .08em; opacity: .55; }
.logo__badge { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 5px; background: var(--clay); color: var(--ink); letter-spacing: 0; }

.hd__nav { display: flex; gap: clamp(20px, 2.6vw, 40px); margin-left: auto; }
.hd__nav a { position: relative; font-size: 16px; font-weight: 600; padding-block: 8px; opacity: .86; transition: opacity .2s; }
.hd__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.hd__nav a:hover, .hd__nav a.is-current { opacity: 1; }
.hd__nav a:hover::after, .hd__nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.hd__cta { display: flex; gap: 8px; }
.hd[data-tone="dark"]:not(.is-solid) .hd__cta .btn--line, .hd.is-solid[data-tone="dark"] .hd__cta .btn--line { --fg: var(--white); --bd: rgba(255, 255, 255, .4); }
.hd[data-tone="dark"] .hd__cta .btn--line:hover { --bg: rgba(255, 255, 255, .12); }
.hd__burger { display: none; width: 44px; height: 44px; margin-left: auto; margin-right: -10px; position: relative; }
.hd__burger i { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), top .35s var(--ease); }
.hd__burger i:first-child { top: 17px; }
.hd__burger i:last-child { top: 25px; }
.hd__burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.hd__burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .hd__nav, .hd__cta { display: none; }
  .hd__burger { display: block; }
  .logo__en { display: none; }
}

.mm {
  position: fixed; inset: 0; z-index: 45; background: var(--ink); color: var(--white);
  padding: calc(var(--hd-h) + 24px) var(--gutter) 32px; display: flex; flex-direction: column; gap: 32px; overflow-y: auto;
}
.mm nav { display: grid; }
.mm nav a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.mm nav a small { font: 700 12px var(--font-display); font-stretch: 118%; letter-spacing: .1em; opacity: .45; }
.mm__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.mm__note { font-size: 13px; color: rgba(255, 255, 255, .5); }

/* ── 페이지 머리 ── */
.ph { padding: calc(var(--hd-h) + clamp(56px, 7vw, 104px)) 0 clamp(48px, 5vw, 72px); position: relative; }
.ph__crumb { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--mute); margin-bottom: var(--s5); }
.ph__crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ph__crumb svg { width: 14px; height: 14px; opacity: .5; }
.ph h1 { font-size: var(--fs-h1); line-height: 1.16; max-width: 16ch; }
.ph .lead { margin-top: var(--s5); max-width: 58ch; }
.ph__en { position: absolute; right: var(--gutter); top: calc(var(--hd-h) + 40px); font: 800 clamp(64px, 12vw, 200px)/.8 var(--font-display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); pointer-events: none; user-select: none; }
@media (max-width: 767px) { .ph__en { display: none; } }

/* ── 바닥글 ── */
.ft { background: var(--ink); color: rgba(255, 255, 255, .72); padding: clamp(64px, 7vw, 96px) 0 40px; font-size: 14px; }
.ft__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ft .logo { color: var(--white); }
.ft__tag { margin-top: 16px; max-width: 30ch; }
.ft h2 { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 16px; letter-spacing: 0; }
.ft ul { display: grid; gap: 10px; }
.ft__line { display: block; }
.ft a:hover { color: var(--white); }
.ft__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding-top: 32px; }
.ft__biz p { line-height: 1.8; color: rgba(255, 255, 255, .5); font-size: 13px; }
.ft__sample { margin-top: 12px; color: #FFB59E !important; }
.ft__legal { display: flex; gap: 20px; font-weight: 600; color: rgba(255, 255, 255, .8); }
@media (max-width: 1023px) { .ft__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft__top > :first-child { grid-column: 1 / -1; } }
@media (max-width: 767px) { .ft__bottom { grid-template-columns: 1fr; } }

/* ── 폼 ── */
.form { display: grid; gap: var(--s7); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) 20px; }
.form__grid > .is-wide { grid-column: 1 / -1; }
@media (max-width: 767px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.field__label { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.field__label .req { color: var(--court); margin-left: 2px; }
.input, .select, .textarea {
  width: 100%; height: var(--field-h); padding: 0 16px; border-radius: var(--r-ctl);
  border: 1px solid var(--line-strong); background: var(--white); font-size: 16px; line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder, .textarea::placeholder { color: var(--mute-2); }
.input:hover, .select:hover, .textarea:hover { border-color: #9AA3B8; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--court); box-shadow: 0 0 0 3px rgba(36, 72, 255, .16); }
.select { appearance: none; padding-right: 44px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230B1330' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; }
.textarea { height: auto; min-height: 144px; padding: 13px 16px; resize: vertical; }
.input--l, .select--l { height: var(--btn-l); font-size: 17px; }
.field__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); color: var(--mute); line-height: 1.5; }
.field__msg { font-size: var(--fs-xs); color: var(--mute); line-height: 1.5; }
.field.is-error .input, .field.is-error .select, .field.is-error .textarea { border-color: var(--error); }
.field.is-error .field__msg { color: var(--error); font-weight: 600; }
.field__count { font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }

.file { display: flex; align-items: center; gap: 12px; min-height: var(--field-h); padding: 0 8px 0 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-ctl); background: var(--white); }
.file__name { flex: 1; min-width: 0; font-size: 15px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file:focus-within { border-color: var(--court); box-shadow: 0 0 0 3px rgba(36, 72, 255, .16); }

.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-top: 10px; cursor: pointer; font-size: 15px; line-height: 1.5; }
.check input { appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--white) center / 14px no-repeat; transition: background-color .15s, border-color .15s; cursor: pointer; }
.check input:checked { background-color: var(--court); border-color: var(--court); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E"); }
.check input:focus-visible { outline: 3px solid rgba(36, 72, 255, .35); outline-offset: 2px; }
.field.is-error .check input { border-color: var(--error); }

.agree { border: 1px solid var(--line); border-radius: 12px; background: var(--white); padding: 4px 16px 12px; }
.agree__more { font-size: 14px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; margin-left: auto; white-space: nowrap; padding: 10px 0 10px 8px; }
.agree__text { font-size: 13px; color: var(--mute); background: var(--paper); border-radius: 8px; padding: 12px 14px; margin-top: 4px; line-height: 1.7; }
.agree__head { display: flex; align-items: flex-start; }

.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 12px; background: #E9EBF0; }
.seg button { height: 44px; padding: 0 24px; border-radius: 9px; font-weight: 700; font-size: 15px; color: var(--mute); transition: background-color .25s, color .25s, box-shadow .25s; }
.seg button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(11, 19, 48, .12); }

/* ── 대화상자 · 알림 ── */
.dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r-big); background: var(--white); color: var(--ink); box-shadow: 0 40px 80px -24px rgba(11, 19, 48, .45); overflow: hidden; }
.dlg::backdrop { background: rgba(11, 19, 48, .55); backdrop-filter: blur(4px); }
.dlg[open] { animation: dlg-in .45s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.dlg__body { padding: clamp(24px, 4vw, 40px); overflow-y: auto; max-height: calc(100dvh - 48px); }
.dlg__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); z-index: 2; }
.dlg__close:hover { background: var(--paper); }
.dlg__close svg { width: 20px; height: 20px; }
.dlg h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; }
.dlg--wide { width: min(880px, calc(100vw - 32px)); }

.toast { position: fixed; left: 50%; bottom: 32px; z-index: 90; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--white); padding: 14px 22px; border-radius: 12px; font-weight: 600; font-size: 15px; box-shadow: var(--shadow); transition: opacity .3s, transform .4s var(--ease); max-width: calc(100vw - 32px); text-align: center; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── 앱 이동 안내 ── */
.app-go { display: grid; gap: var(--s5); }
.app-go__row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s5); align-items: center; }
.qr { width: 132px; aspect-ratio: 1; border-radius: 16px; border: 1px dashed var(--line-strong); display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--mute); padding: 12px; background: repeating-linear-gradient(45deg, var(--paper) 0 8px, var(--white) 8px 16px); }
.stores { display: grid; gap: 8px; }
.store-btn { display: flex; align-items: center; gap: 12px; height: var(--btn-l); padding: 0 18px; border-radius: 12px; background: var(--ink); color: var(--white); font-weight: 700; }
.store-btn svg { width: 22px; height: 22px; }
.store-btn small { display: block; font-size: 11px; font-weight: 500; opacity: .7; line-height: 1.2; }
.store-btn span { line-height: 1.3; }
@media (max-width: 479px) { .app-go__row { grid-template-columns: 1fr; } .qr { display: none; } }

/* ── 페이지 전환 커튼 ── */
.curtain { position: fixed; inset: 0; z-index: 80; pointer-events: none; visibility: hidden; }
.curtain.is-on { visibility: visible; pointer-events: auto; }
.curtain__lead, .curtain__panel { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.curtain__lead { background: var(--clay); }
.curtain__panel { background: var(--court); color: var(--white); display: grid; place-items: center; align-content: center; gap: 18px; }
.curtain__court { position: absolute; inset: 8vmin; width: auto; height: auto; opacity: .35; }
.curtain__court rect, .curtain__court path { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.curtain__title { position: relative; font-size: clamp(32px, 5vw, 64px); font-weight: 800; letter-spacing: -0.04em; }
.curtain__en { position: relative; font: 800 13px var(--font-display); font-stretch: 120%; letter-spacing: .3em; opacity: .7; }

.noscript { padding: 120px 24px; text-align: center; }
.fail { padding: 200px var(--gutter) 120px; text-align: center; display: grid; gap: 16px; justify-items: center; }

/* 스크롤 진행 막대 */
.progress { position: fixed; left: 0; top: 0; z-index: 60; height: 3px; width: 100%; background: var(--clay); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}