/* =========================================================================
   ELEMENTA — main.css  (레이아웃 / 컴포넌트)
   토큰은 tokens.css 에만 있다. 이 파일에 하드코딩된 색을 추가하지 말 것.
   고치고 배포하면 바로 반영된다. 파일 주소에 버전을 붙일 필요 없다 (CACHE.md).
   ========================================================================= */

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, figure, dl, dd, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
fieldset { border: 0; }
em { font-style: normal; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  transition: background-color var(--dur-theme) var(--ease-io),
              color var(--dur-theme) var(--ease-io);
}

/* ---------- 유틸 ---------- */
/* 한국어가 기준입니다. 단어 중간에서 줄이 끊기는 걸 기본값으로 막습니다.
   ("브라우저" 가 "브라우 / 저" 로 잘리는 걸 막는 설정입니다.)
   영문은 영향받지 않고, 긴 주소·이메일만 예외로 강제 줄바꿈합니다.
   클래스마다 따로 걸면 새로 쓴 글이 계속 빠지므로 여기서 한 번에 둡니다. */
body { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--ink); color: var(--bg);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: var(--ls-mono);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.hero :focus-visible, .preorder__inner :focus-visible, .nav:not(.is-stuck) :focus-visible {
  outline-color: var(--on-media);
  box-shadow: 0 0 0 5px rgba(0,0,0,.45);
}

.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--dim);
}
.eyebrow--on-media { color: var(--on-media-70); }

/* ---------- 버튼 ---------- */
.btn {
  --btn-fg: var(--bg); --btn-bg: var(--ink); --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 3rem; padding: 0 var(--sp-6);
  border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: var(--ls-mono); text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { --btn-bg: var(--accent); --btn-bd: var(--accent); --btn-fg: var(--on-media); }
.btn:active { transform: translateY(1px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink-40); }
.btn--on-media { --btn-bg: var(--on-media); --btn-fg: var(--media-void); --btn-bd: var(--on-media); }
.btn--ghost.btn--on-media { --btn-bg: transparent; --btn-fg: var(--on-media); --btn-bd: var(--on-media-45); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- 상단 바 ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding-inline: var(--gutter);
  color: var(--on-media);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: var(--bg-72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--ink);
  border-bottom-color: var(--ink-14);
}
.nav__brand { display: flex; align-items: baseline; gap: var(--sp-3); }
.nav__brand-en {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(0.95rem, 2vw, 1.15rem); letter-spacing: 0.1em;
}
.nav__brand-ko { font-size: var(--fs-micro); letter-spacing: 0.12em; opacity: .62; }
.nav__status {
  margin-inline: auto;
  display: none; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); opacity: .8;
}
.nav__status-dot {
  width: 6px; height: 6px; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-12);
}
.nav__cta {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  padding: var(--sp-2) 0; border-bottom: 1px solid currentColor;
}
.nav__cta:hover { color: var(--accent); }

/* CP 계정 버튼 — 이름이 길어도 내비를 밀어내지 않게 잘라 냅니다.
   좁은 화면에서는 이름을 빼고 동작(로그아웃)만 남깁니다. */
.nav__tool[data-account] { max-width: 11rem; gap: .4rem; }
.acct__name {
  max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: .72;
}
.acct__name::after { content: "\00b7"; opacity: .6; margin-inline-start: .4rem; }
@media (max-width: 640px) { .acct__name { display: none; } }

/* 로그인 결과 알림 — 보고 있던 자리에 잠깐 떴다 사라집니다.
   내비 바로 아래에 붙되, 좁은 화면에서는 좌우 여백만큼만 물러납니다. */
.toast {
  position: fixed; z-index: 60;
  top: calc(36px + 56px + var(--sp-3));
  right: var(--gutter); left: auto; max-width: min(24rem, calc(100vw - var(--gutter) * 2));
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--ink-14); border-left: 3px solid var(--accent);
  font-size: var(--fs-small); line-height: 1.5;
  box-shadow: 0 8px 28px rgb(0 0 0 / .16);
  opacity: 0; transform: translateY(-.4rem);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast.is-in { opacity: 1; transform: none; }
.toast--error { border-left-color: var(--dim); }
@media (max-width: 560px) { .toast { left: var(--gutter); max-width: none; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .01ms; transform: none; } }

/* ---------- 로그인 창 ---------- */
/* <dialog> 를 쓰면 포커스 가둠·Esc 닫기·바깥 클릭 판정이 브라우저 기본으로 붙습니다.
   직접 만들면 접근성에서 빠지는 게 생기므로 표준 요소를 씁니다. */
.login {
  width: min(26rem, calc(100vw - var(--sp-5) * 2));
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border: 1px solid var(--ink-14); border-radius: 2px;
  background: var(--bg); color: var(--ink);
  box-shadow: 0 24px 70px rgb(0 0 0 / .28);
}
.login::backdrop { background: rgb(0 0 0 / .58); backdrop-filter: blur(2px); }

.login__close-form { position: absolute; top: var(--sp-3); right: var(--sp-3); margin: 0; }
.login__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border: 0; background: none; color: var(--ink-40);
  cursor: pointer; transition: color var(--dur-fast) var(--ease-out);
}
.login__close:hover { color: var(--ink); }

.login__mark {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-micro);
  letter-spacing: .22em; color: var(--ink-40); margin-bottom: var(--sp-4);
}
.login__title { font-size: var(--fs-h2); line-height: 1.15; margin-bottom: var(--sp-3); }
.login__lede { font-size: var(--fs-small); line-height: 1.65; color: var(--ink-64); margin-bottom: var(--sp-5); }

.login__ways { display: grid; gap: var(--sp-3); }
.way {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 3.25rem; padding: 0 var(--sp-4);
  border: 1px solid var(--ink-14); border-radius: 2px;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink);
  background: var(--bg);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.way:hover { border-color: var(--ink-40); }
.way:active { transform: translateY(1px); }
.way__ico { width: 18px; height: 18px; flex: none; }
/* 카카오는 브랜드 색이 정해져 있어 그대로 씁니다. 글자색은 대비 때문에 검정입니다. */
.way--kakao { background: #FEE500; border-color: #FEE500; color: #191600; }
.way--kakao:hover { border-color: #E4CE00; }

.login__fine {
  margin-top: var(--sp-5); font-size: var(--fs-micro); line-height: 1.6; color: var(--ink-40);
}
.login__fine a { color: var(--ink-64); text-decoration: underline; text-underline-offset: .2em; }
.login__fine a:hover { color: var(--accent); }

@media (pointer: coarse) { .login__close { width: 2.75rem; height: 2.75rem; } }
@media (min-width: 768px) { .nav__status { display: flex; } .nav__cta { margin-left: 0; } }

/* ---------- 원소 다이얼 ---------- */
.dial {
  position: fixed; z-index: var(--z-dial);
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: var(--bg-72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--ink-14);
  transition: background-color var(--dur-theme) var(--ease-io),
              border-color var(--dur-theme) var(--ease-io);
}
.dial__sigil { flex: none; width: 2rem; height: 2rem; color: var(--accent); }
.dial__sigil svg { width: 100%; height: 100%; overflow: visible; }
.sigil__ring { fill: none; stroke: currentColor; stroke-opacity: .28; stroke-width: 1.5; }
.sigil__tri {
  fill: none; stroke: currentColor; stroke-width: 5;
  transform-origin: 50px 50px;
  transition: transform var(--dur-slow) var(--ease-io);
}
.sigil__bar {
  stroke: currentColor; stroke-width: 5;
  transform-origin: 50px 55px; transform: scaleX(0); opacity: 0;
  transition: transform var(--dur-slow) var(--ease-io), opacity var(--dur-base) var(--ease-out);
}
:root[data-element="aqua"]  .sigil__tri { transform: rotate(180deg); }
:root[data-element="silva"] .sigil__tri { transform: rotate(180deg); }
:root[data-element="silva"] .sigil__bar,
:root[data-element="ventus"] .sigil__bar { transform: scaleX(1); opacity: 1; }
:root[data-element="silva"] .sigil__bar { transform: scaleX(1) translateY(-10px); }

.dial__nav { flex: 1 1 auto; min-width: 0; }
.dial__list { display: flex; gap: var(--sp-1); }
.dial__btn {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-2) var(--sp-1);
  color: var(--ink-40);
  transition: color var(--dur-base) var(--ease-out);
}
.dial__btn:hover { color: var(--ink); }
.dial__btn[aria-pressed="true"] { color: var(--accent); }
.dial__mark { width: 1.15rem; height: 1.15rem; }
.dial__mark svg { width: 100%; height: 100%; }
.dial__mark path { fill: none; stroke: currentColor; stroke-width: 7; }
.dial__mark line { stroke: currentColor; stroke-width: 7; }
.dial__num { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--ls-mono); }
.dial__name {
  font-family: var(--font-mono); font-size: 0.5625rem;
  letter-spacing: 0.1em; opacity: .75;
}
.dial__auto {
  position: absolute; right: var(--gutter); top: -2.75rem;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono);
}
.dial__auto[hidden] { display: none; }

@media (min-width: 1024px) {
  .dial {
    left: auto; right: var(--gutter); bottom: auto; top: 50%;
    transform: translateY(-50%);
    flex-direction: column; gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-3);
    border: 1px solid var(--ink-14); border-top-width: 1px;
  }
  .dial__sigil { width: 2.4rem; height: 2.4rem; }
  .dial__list { flex-direction: column; gap: var(--sp-3); }
  .dial__btn { flex-direction: row; justify-content: flex-start; gap: var(--sp-3); width: 100%; }
  .dial__name { font-size: 0.625rem; }
  .dial__auto { position: static; justify-content: center; }
}

/* ---------- 히어로 ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-6);
  background: var(--media-void);
  color: var(--on-media);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media picture, .hero__media img { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 50% 35%; }
.hero__grain {
  position: absolute; inset: 0;
  background-image: url("../assets/svg/noise.svg");
  background-size: 160px 160px;
  opacity: .28; mix-blend-mode: overlay; pointer-events: none;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(11,7,5,.92) 0%, rgba(11,7,5,.45) 42%, rgba(11,7,5,.12) 72%, rgba(11,7,5,.4) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(11,7,5,.55), transparent 70%);
}
.hero__inner { position: relative; padding-inline: var(--gutter); width: 100%; max-width: var(--maxw); margin-inline: auto; }
.hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-mega); line-height: var(--lh-tight); letter-spacing: var(--ls-mega);
  margin-top: var(--sp-3);
  text-transform: uppercase;
}
.hero__latin {
  font-family: var(--font-latin); font-style: italic;
  font-size: var(--fs-lead); color: var(--on-media-70);
  margin-top: var(--sp-2);
}
.hero__lead {
  margin-top: var(--sp-5); max-width: 28rem;
  font-size: var(--fs-lead); color: var(--on-media-70);
}
.hero__lead em { color: var(--on-media); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__ticker {
  position: relative; margin-top: var(--sp-7);
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: 4.5rem; /* 모바일 하단 다이얼 회피 */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-5);
  border-top: 1px solid var(--on-media-45);
  padding-top: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); color: var(--on-media-70);
}
.hero__ticker b { color: var(--accent); font-weight: 500; margin-right: var(--sp-2); }
.hero__ticker span { float: right; opacity: .8; }
@media (min-width: 768px) {
  .hero__ticker { grid-template-columns: repeat(4, 1fr); padding-bottom: var(--sp-2); }
  .hero__media img { object-position: 50% 45%; }
}
@media (min-width: 1024px) { .hero__ticker { max-width: calc(var(--maxw) - 9rem); } }

/* ---------- 매니페스토 ---------- */
.manifesto {
  background: var(--bg); color: var(--ink);
  padding-block: var(--sp-9);
  transition: background-color var(--dur-theme) var(--ease-io);
}
.manifesto__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
  margin-top: var(--sp-4); max-width: 20ch;
}
.manifesto__title em { color: var(--accent); font-family: var(--font-latin); font-style: italic; }
.manifesto__body { margin-top: var(--sp-6); max-width: var(--maxw-text); color: var(--ink-64); }
.manifesto__body p + p { margin-top: var(--sp-4); }
@media (min-width: 1024px) {
  .manifesto .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
  .manifesto .eyebrow { grid-column: 1; }
  .manifesto__title { grid-column: 1; margin-top: var(--sp-2); }
  .manifesto__body { grid-column: 2; grid-row: 1 / span 2; margin-top: var(--sp-2); }
}

/* ---------- 원소 챕터 ---------- */
.chapter {
  background: var(--bg); color: var(--ink);
  padding-block: var(--sp-8);
  scroll-margin-top: var(--nav-h);
  border-top: 1px solid var(--ink-14);
  transition: background-color var(--dur-theme) var(--ease-io),
              color var(--dur-theme) var(--ease-io);
}
.chapter__grid { display: grid; gap: var(--sp-6); }
.chapter__media { position: relative; }
.chapter__media img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--media-void);
}
.chapter__index {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); color: var(--dim);
}
.chapter__index span { color: var(--accent); }
.chapter__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-mega);
  margin-top: var(--sp-3);
  display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
}
.chapter__ko {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-h3); letter-spacing: 0; color: var(--dim);
}
.chapter__latin {
  font-family: var(--font-latin); font-style: italic;
  font-size: var(--fs-lead); color: var(--dim); margin-top: var(--sp-2);
}
.chapter__quote {
  font-size: var(--fs-h3); margin-top: var(--sp-5);
  padding-left: var(--sp-4); border-left: 2px solid var(--accent);
}
.spec { margin-top: var(--sp-6); border-top: var(--line); }
.spec > div {
  display: grid; grid-template-columns: 6rem 1fr; gap: var(--sp-4);
  padding-block: var(--sp-3); border-bottom: var(--line);
}
.spec dt { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); color: var(--dim); text-transform: uppercase; }
.spec dd { font-size: var(--fs-small); }
.spec__now { color: var(--accent); }
.chapter .btn { margin-top: var(--sp-6); }
@media (min-width: 768px) {
  .chapter { padding-block: var(--sp-9); }
  .chapter__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-8); align-items: center; }
  .chapter__grid--flip .chapter__media { order: 2; }
}
@media (min-width: 1024px) { .chapter .wrap { padding-right: 9rem; } }

/* ---------- DROP 01 그리드 ---------- */
.drop {
  background: var(--bg); color: var(--ink);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--ink-14);
  scroll-margin-top: var(--nav-h);
  transition: background-color var(--dur-theme) var(--ease-io);
}
.drop__head { max-width: var(--maxw-text); }
.drop__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h2); letter-spacing: var(--ls-tight); line-height: var(--lh-snug);
  margin-top: var(--sp-3);
}
.drop__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-64); }
.grid { margin-top: var(--sp-7); display: grid; gap: var(--sp-5) var(--sp-4); }
.card__link { display: block; }
.card__slot {
  position: relative; display: block;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--media-void);
}
.card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.card__img--b { opacity: 0; }
.card__link:hover .card__img--a,
.card__link:focus-visible .card__img--a { opacity: 0; }
.card__link:hover .card__img--b,
.card__link:focus-visible .card__img--b { opacity: 1; }
.card__link:hover .card__img { transform: scale(1.03); }
.card__meta {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3);
  align-items: baseline; padding-top: var(--sp-3);
  border-top: 1px solid var(--ink-14); margin-top: var(--sp-3);
}
.card__num { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--dim); letter-spacing: var(--ls-mono); }
.card__name { font-size: var(--fs-small); }
.card__name b { font-weight: 600; }
.card__price { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.02em; }
.card__price i { font-style: normal; font-size: var(--fs-micro); color: var(--dim); margin-left: 2px; }
.card__price--free { color: var(--accent); font-size: var(--fs-micro); }
.card--wide .card__slot { aspect-ratio: 16 / 9; }
@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .drop { padding-block: var(--sp-9); }
  .drop .wrap { padding-right: 9rem; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) var(--sp-5); }
  .card--wide { grid-column: span 2; }
}

/* ---------- 프리오더 ---------- */
.preorder {
  position: relative; isolation: isolate;
  color: var(--on-media); background: var(--media-void);
  padding-block: var(--sp-9);
  scroll-margin-top: var(--nav-h);
  overflow: hidden;
}
.preorder__media { position: absolute; inset: 0; z-index: -1; }
.preorder__media img { width: 100%; height: 100%; object-fit: cover; }
.preorder__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(11,7,5,.72), rgba(11,7,5,.94));
}
.preorder__inner { max-width: 46rem; }
.preorder__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
  margin-top: var(--sp-3);
}
.preorder__title em { color: var(--accent); }
.preorder__lead { margin-top: var(--sp-4); color: var(--on-media-70); max-width: 34rem; }

/* ---------- 폼 ---------- */
.form { margin-top: var(--sp-7); max-width: 30rem; }
.field + .field { margin-top: var(--sp-5); }
.field__label {
  display: block; font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--on-media-70);
}
.field__opt { text-transform: none; letter-spacing: 0; opacity: .7; }
.field__input {
  width: 100%; margin-top: var(--sp-2);
  min-height: 3.25rem; padding: 0 var(--sp-4);
  background: rgba(251,247,243,.06);
  border: 1px solid var(--on-media-45); color: var(--on-media);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.field__input::placeholder { color: var(--on-media-45); }
.field__input:hover { border-color: var(--on-media); }
.field__input[aria-invalid="true"] { border-color: var(--accent); background: var(--accent-12); }
.field__help { margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--on-media-45); }
.field__help.is-error { color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: block; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--on-media-45); color: var(--on-media-70);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono);
  transition: all var(--dur-fast) var(--ease-out);
}
.chip input:checked + span { background: var(--on-media); color: var(--media-void); border-color: var(--on-media); }
.chip input:focus-visible + span { outline: 2px solid var(--on-media); outline-offset: 3px; }

.field--agree { margin-top: var(--sp-5); }
.agree { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); color: var(--on-media-70); cursor: pointer; }
.agree input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.28rem; accent-color: var(--accent); }
.agree a { border-bottom: 1px solid var(--on-media-45); }
.agree.is-error { color: var(--accent); }

.form .btn { margin-top: var(--sp-6); }
.form__status {
  margin-top: var(--sp-4); min-height: 1.5rem;
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.02em;
}
.form__status.is-ok { color: var(--on-media); }
.form__status.is-ok::before { content: "▲ "; color: var(--accent); }
.form__status.is-error { color: var(--accent); }

/* 상품 사진 고지 — 눈에 띄되 화면을 잡아먹지 않게.
   이 구역의 다른 규칙(0-1-1)에 색이 밀려 흐려지므로 선택자를 한 단계 올린다. */
.drop p.drop__disclosure {
  margin: var(--sp-5) 0 var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-small); line-height: 1.65;
  color: var(--ink-88);   /* 고지는 읽혀야 고지입니다. 흐리게 두지 않습니다 */
  max-width: 46ch;
}

/* ---------- 푸터 ---------- */
.foot {
  background: var(--bg); color: var(--ink);
  padding-block: var(--sp-8) var(--sp-9);
  border-top: 1px solid var(--ink-14);
  transition: background-color var(--dur-theme) var(--ease-io);
}
.foot__grid { display: grid; gap: var(--sp-7); }
.foot__logo { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); letter-spacing: 0.08em; }
.foot__ko { font-size: var(--fs-small); color: var(--ink-64); margin-top: var(--sp-2); }
.foot__list { font-size: var(--fs-small); }
.foot__list dt { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); color: var(--dim); text-transform: uppercase; margin-top: var(--sp-3); }
.foot__list dd { color: var(--ink-64); }
.foot__links { display: flex; flex-direction: column; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: var(--ls-mono); }
.foot__links a { border-bottom: 1px solid var(--ink-14); padding-bottom: 2px; }
.foot__links a:hover { border-color: var(--accent); color: var(--accent); }
.foot__legal {
  margin-top: var(--sp-8); padding-inline: var(--gutter);
  max-width: var(--maxw); margin-inline: auto;
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--dim);
  padding-bottom: 4.5rem; /* 모바일 하단 다이얼 회피 */
}
@media (min-width: 768px) { .foot__grid { grid-template-columns: 1.2fr 1fr 0.6fr; } }
@media (min-width: 1024px) {
  .foot .wrap, .foot__legal { padding-right: 9rem; }
  .foot__legal { padding-bottom: 0; }
}

/* ---------- 스크롤 진입 연출 ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .card__link:hover .card__img { transform: none; }
}

/* =========================================================================
   자연광 톤 조정 + 인터랙션 레이어
   (사진이 실물로 들어오면서 대비를 낮추고, 질감·광원·모션을 얹은 구간)
   ========================================================================= */

/* ---------- 전역 필름 그레인 ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("../assets/svg/noise.svg");
  background-size: 180px 180px;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
}

/* ---------- 커서 광원 (마우스 환경에서만) ---------- */
.glow {
  position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none;
  width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem;
  border-radius: 50%;
  background: radial-gradient(circle,
      color-mix(in srgb, var(--accent) 26%, transparent) 0%,
      transparent 62%);
  opacity: 0; mix-blend-mode: soft-light;
  transition: opacity 600ms var(--ease-out);
  will-change: transform;
}
.glow.is-on { opacity: .55; }
@media (hover: none), (prefers-reduced-motion: reduce) { .glow { display: none; } }

/* ---------- 히어로: 대비를 낮추고 사진을 살린다 ---------- */
.hero__scrim {
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--media-void) 88%, transparent) 0%,
      color-mix(in srgb, var(--media-void) 52%, transparent) 30%,
      transparent 62%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--media-void) 46%, transparent) 0%,
      transparent 34%);
}
.hero__media { will-change: transform; }
.hero__title { display: flex; flex-wrap: wrap; }
.hero__word {
  display: inline-block;
  animation: word-rise 1200ms var(--ease-out) both;
  animation-delay: calc(120ms + var(--i) * 55ms);
}
@keyframes word-rise {
  from { opacity: 0; transform: translateY(0.42em) rotate(1.5deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hero__latin, .hero__lead, .hero__actions, .hero .eyebrow {
  animation: soft-in 1100ms var(--ease-out) both;
}
.hero .eyebrow { animation-delay: 60ms; }
.hero__latin   { animation-delay: 640ms; }
.hero__lead    { animation-delay: 760ms; }
.hero__actions { animation-delay: 880ms; }
@keyframes soft-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

.hero__foot {
  position: relative; width: 100%; max-width: var(--maxw);
  margin: var(--sp-7) auto 0; padding-inline: var(--gutter);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5);
  border-top: 1px solid var(--on-media-45); padding-top: var(--sp-4);
}
.hero__ticker { border: 0; padding: 0; margin: 0; max-width: none; }
.hero__count {
  flex: none; font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); color: var(--on-media-70); text-align: right;
}
.hero__count b { display: block; font-size: var(--fs-h3); font-weight: 500; color: var(--accent); letter-spacing: 0.02em; }
.hero__hint {
  position: absolute; left: 50%; bottom: 5.6rem; transform: translateX(-50%);
  display: none; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.3em;
  color: var(--on-media-45);
}
.hero__hint i { display: block; width: 1px; height: 2.2rem; background: currentColor; animation: hint-fall 2.4s var(--ease-io) infinite; transform-origin: top; }
@keyframes hint-fall { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 1024px) {
  .hero__hint { display: flex; flex-direction: column; bottom: var(--sp-6); left: auto; right: calc(var(--gutter) + 8rem); }
  .hero__foot { padding-right: calc(var(--gutter) + 7rem); }
}

/* ---------- 룩북 밴드 ---------- */
.band {
  position: relative; overflow: hidden;
  background: var(--media-void);
  height: clamp(18rem, 62vh, 34rem);
  display: flex; align-items: flex-end;
}
.band__media { position: absolute; inset: -8% 0; will-change: transform; }
.band__media img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.band__caption {
  position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: var(--sp-6) var(--gutter);
  font-family: var(--font-latin); font-style: italic;
  font-size: var(--fs-h3); color: var(--on-media);
  text-shadow: 0 2px 24px rgba(11,7,5,.6);
}
.band__caption em { color: var(--accent); }

/* ---------- 사진 슬롯 공통: 부드러운 그림자와 미세 라운드 ---------- */
.chapter__media img, .card__slot { border-radius: var(--radius); }
.chapter__media {
  will-change: transform;
  filter: drop-shadow(var(--shadow-soft));
}
.card__slot { box-shadow: var(--shadow-soft); transition: box-shadow var(--dur-base) var(--ease-out); }
.card__link:hover .card__slot, .card__link:focus-visible .card__slot { box-shadow: var(--shadow-lift); }

/* ---------- 제품 카드: 담기 인터랙션 ---------- */
.card__link {
  width: 100%; text-align: left; display: block; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.card__pick {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3); z-index: 2;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono);
  border-radius: var(--radius);
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.card__pick i { font-style: normal; font-size: 0.875rem; line-height: 1; }
.card__link:hover .card__pick,
.card__link:focus-visible .card__pick,
.card__link[aria-pressed="true"] .card__pick { opacity: 1; transform: none; }
.card__link[aria-pressed="true"] .card__pick { background: var(--accent); color: var(--on-media); }
.card__link[aria-pressed="true"] .card__slot { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: none) { .card__pick { opacity: 1; transform: none; } }

.card__link[aria-pressed="true"] .card__num { color: var(--accent); }

/* 담긴 순간의 미세한 반응 */
@keyframes pick-pop { 0% { transform: scale(1); } 40% { transform: scale(0.97); } 100% { transform: scale(1); } }
.card.is-picking .card__slot { animation: pick-pop 420ms var(--ease-out); }

/* ---------- 담아 둔 아이템 목록 (폼) ---------- */
.field--picks { border: 1px solid var(--on-media-45); padding: var(--sp-4); border-radius: var(--radius); }
.picks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.picks li { display: flex; }
.picks button {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--on-media-45); color: var(--on-media);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.picks button:hover { border-color: var(--accent); color: var(--accent); }
.picks button i { font-style: normal; opacity: .6; }

/* ---------- 상단 바 담기 카운터 ---------- */
.nav__cta { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); }
.nav__cta-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  background: var(--accent); color: var(--on-media);
  font-family: var(--font-mono); font-size: 0.625rem; line-height: 1;
  border-radius: 999px;
  animation: soft-in 320ms var(--ease-out) both;
}
.nav__cta-count[hidden] { display: none; }

/* ---------- 진입 연출 결 다듬기 ---------- */
[data-reveal] { transform: translateY(2rem) scale(0.995); filter: blur(4px); }
[data-reveal].is-in { transform: none; filter: none; }

/* ---------- 모션 최소화 (추가분) ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__word, .hero__latin, .hero__lead, .hero__actions, .hero .eyebrow { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__hint i { animation: none; }
  .card.is-picking .card__slot { animation: none; }
  .hero__media, .band__media, .chapter__media, .preorder__media { transform: none !important; }
}

/* 패럴랙스 여유분 — 이동해도 가장자리가 비지 않도록 */
.hero__media, .preorder__media { inset: -7% 0; }

/* ---------- 히어로 워드마크: 컨테이너 폭에 저스티파이 (줄바꿈 불가) ---------- */
.hero__title {
  flex-wrap: nowrap;
  justify-content: space-between;
  letter-spacing: 0;
  font-size: clamp(2.1rem, 9.1vw, 8.2rem);
  width: 100%;
}
.hero__word { flex: none; }

/* ---------- 다이얼: 히어로(어두운 사진) 위에서는 다크 모드로 ---------- */
.dial {
  background: color-mix(in srgb, var(--media-void) 52%, transparent);
  border-color: var(--on-media-45);
  color: var(--on-media);
}
.dial .dial__btn { color: var(--on-media-45); }
.dial .dial__btn:hover { color: var(--on-media); }
.dial .dial__btn[aria-pressed="true"] { color: var(--accent); }
.dial.is-stuck {
  background: var(--bg-72);
  border-color: var(--ink-14);
  color: var(--ink);
}
.dial.is-stuck .dial__btn { color: var(--ink-40); }
.dial.is-stuck .dial__btn:hover { color: var(--ink); }
.dial.is-stuck .dial__btn[aria-pressed="true"] { color: var(--accent); }

/* ---------- 스크롤 힌트: 좌측 하단으로 (카운트다운과 분리) ---------- */
@media (min-width: 1024px) {
  .hero__hint { left: var(--gutter); right: auto; bottom: 8.5rem; align-items: flex-start; }
}

/* 데스크탑: 우측 다이얼 레일 폭만큼 히어로 타이포를 비켜 놓는다 */
@media (min-width: 1024px) {
  .hero__inner { padding-right: calc(var(--gutter) + 8.5rem); }
  .hero__title { font-size: clamp(2.1rem, 8vw, 7.4rem); }
}

/* ---------- 프리오더: 데스크탑 2단 (카피 / 폼) ---------- */
@media (min-width: 1024px) {
  .preorder__inner {
    max-width: var(--maxw);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    gap: var(--sp-8); align-items: start;
    padding-right: calc(var(--gutter) + 8.5rem);
  }
  .preorder__inner > .eyebrow,
  .preorder__title,
  .preorder__lead { grid-column: 1; }
  .preorder__lead { max-width: 26rem; }
  .form { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

/* ---------- 상단 바: 어두운 섹션 위에서도 스크롤 중이면 바탕을 깐다 ---------- */
.nav.is-dark {
  background: color-mix(in srgb, var(--media-void) 62%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--on-media-45);
  color: var(--on-media);
}
/* 섹션이 상단 바 아래로 들어가지 않도록 여유 */
.chapter, .drop, .preorder { scroll-margin-top: calc(var(--nav-h) + var(--sp-5)); }

/* 모바일: 하단 고정 다이얼이 히어로 하단 정보를 가리지 않도록 */
@media (max-width: 1023px) {
  .hero__foot { padding-bottom: 5.25rem; }
}

/* 히어로 티커: float 대신 각 줄을 좌우 정렬 (좁은 화면에서 안 깨진다) */
.hero__ticker li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.hero__ticker span { float: none; }
@media (max-width: 767px) {
  .hero__foot { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .hero__count { text-align: left; display: flex; align-items: baseline; gap: var(--sp-3); }
  .hero__count b { font-size: var(--fs-lead); }
}

/* ---------- 다이얼 라벨 대비 보강 (WCAG AA) ---------- */
.dial__name { opacity: 1; }
.dial .dial__btn { color: rgba(251, 247, 243, 0.78); }
.dial.is-stuck .dial__btn { color: var(--ink-64); }
.dial.is-stuck .dial__btn:hover { color: var(--ink); }

/* ---------- 작은 글자 대비 보강 --------------------------------------------
   --dim 은 브랜드 고정 토큰이라 값은 그대로 두고, 읽어야 하는 작은 텍스트에는
   대비가 확보되는 --ink-64 를 쓴다. dim 은 장식·보더 용도로 유지.            */
.eyebrow,
.chapter__index,
.chapter__latin,
.chapter__ko,
.spec dt,
.card__num,
.card__price i,
.foot__list dt,
.foot__ko,
.foot__legal { color: var(--ink-64); }
.eyebrow--on-media { color: var(--on-media-70); }
.field__help { color: var(--on-media-70); }
.nav__brand-ko { opacity: 1; color: currentColor; }

/* =========================================================================
   원소별 성격을 기호와 모션으로 — 불은 흔들리고, 물은 흐르고,
   나무는 자라고, 공기는 지나간다. (삼각형 회전·가로선 원리는 그대로)
   ========================================================================= */

/* ---------- 다이얼 버튼 마크 ---------- */
.dial__mark { width: 1.35rem; height: 1.35rem; }
.dial__mark svg { width: 100%; height: 100%; overflow: visible; }
.dial__mark .mk-tri { fill: none; stroke: currentColor; stroke-width: 6; stroke-linejoin: miter; }
.dial__mark .mk-bar { stroke: currentColor; stroke-width: 6; }
.dial__mark .mk-core { fill: currentColor; opacity: .55; }
.dial__mark .mk-wave { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; opacity: .75; }
.dial__mark .mk-stem { fill: none; stroke: currentColor; stroke-width: 5.5; stroke-linecap: round; opacity: .8; }
.dial__mark .mk-gust line { stroke: currentColor; stroke-width: 5.5; stroke-linecap: round; opacity: .7; }

/* 활성 항목만 그 원소답게 움직인다 */
.dial__btn[aria-pressed="true"] .mk-core { animation: ember 2.6s var(--ease-io) infinite; transform-origin: 50px 50px; }
.dial__btn[aria-pressed="true"] .mk-wave { animation: current-flow 3.4s linear infinite; }
.dial__btn[aria-pressed="true"] .mk-stem { animation: grow 2.8s var(--ease-out) infinite; transform-origin: 50px 62px; }
.dial__btn[aria-pressed="true"] .mk-gust line:first-child { animation: gust 3s var(--ease-io) infinite; }
.dial__btn[aria-pressed="true"] .mk-gust line:last-child  { animation: gust 3s var(--ease-io) .5s infinite; }

@keyframes ember {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: .5; }
  45%      { transform: scaleY(1.16) translateY(-2px); opacity: .95; }
}
@keyframes current-flow {
  0%   { transform: translateX(-9px); opacity: 0; }
  25%  { opacity: .85; }
  75%  { opacity: .85; }
  100% { transform: translateX(9px); opacity: 0; }
}
@keyframes grow {
  0%, 100% { transform: scaleY(0.86); opacity: .6; }
  50%      { transform: scaleY(1);    opacity: 1; }
}
@keyframes gust {
  0%   { transform: translateX(-7px); opacity: 0; }
  35%  { opacity: .85; }
  100% { transform: translateX(11px); opacity: 0; }
}

/* ---------- 큰 시그니처 마크 ---------- */
.sigil__core, .sigil__wave, .sigil__stem, .sigil__gust {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.sigil__core { fill: currentColor; transform-origin: 50px 50px; }
.sigil__wave { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; }
.sigil__stem { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; transform-origin: 50px 62px; }
.sigil__gust line { stroke: currentColor; stroke-width: 4; stroke-linecap: round; }

:root[data-element="ignis"]  .sigil__core { opacity: .6; animation: ember 2.6s var(--ease-io) infinite; }
:root[data-element="aqua"]   .sigil__wave { opacity: .85; animation: current-flow 3.4s linear infinite; }
:root[data-element="silva"]  .sigil__stem { opacity: .85; animation: grow 2.8s var(--ease-out) infinite; }
:root[data-element="ventus"] .sigil__gust { opacity: .85; }
:root[data-element="ventus"] .sigil__gust line:first-child { animation: gust 3s var(--ease-io) infinite; }
:root[data-element="ventus"] .sigil__gust line:last-child  { animation: gust 3s var(--ease-io) .5s infinite; }

/* ---------- 원소별 인용 바: 성격대로 반응 ---------- */
.chapter__quote { position: relative; border-left-color: var(--accent); }
:root[data-element="aqua"] .chapter__quote { border-left-style: solid; }
[data-element="aqua"] .chapter__quote::before,
[data-element="ventus"] .chapter__quote::before {
  content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 40%;
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  animation: bar-travel 4s var(--ease-io) infinite;
}
@keyframes bar-travel { 0% { top: -40%; } 100% { top: 100%; } }

/* ---------- 원소별 커서 광원 성격 ---------- */
:root[data-element="ignis"]  .glow { width: 30rem; height: 30rem; margin: -15rem 0 0 -15rem; }
:root[data-element="aqua"]   .glow { width: 40rem; height: 40rem; margin: -20rem 0 0 -20rem; }
:root[data-element="silva"]  .glow { width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem; }
:root[data-element="ventus"] .glow { width: 48rem; height: 48rem; margin: -24rem 0 0 -24rem; }
:root[data-element="ventus"] .glow.is-on { opacity: .38; }

/* ---------- 챕터 인덱스: 원소 기호를 함께 노출 ---------- */
.chapter__index::after {
  content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .7em;
  vertical-align: -0.05em;
  background: currentColor;
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
}
#el-ignis .chapter__index::after  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 L78 70 L22 70 Z' fill='none' stroke='%23000' stroke-width='8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 L78 70 L22 70 Z' fill='none' stroke='%23000' stroke-width='8'/%3E%3C/svg%3E"); }
#el-aqua .chapter__index::after   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 80 L22 30 L78 30 Z' fill='none' stroke='%23000' stroke-width='8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 80 L22 30 L78 30 Z' fill='none' stroke='%23000' stroke-width='8'/%3E%3C/svg%3E"); }
#el-silva .chapter__index::after  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 80 L22 30 L78 30 Z' fill='none' stroke='%23000' stroke-width='8'/%3E%3Cline x1='31' y1='45' x2='69' y2='45' stroke='%23000' stroke-width='8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 80 L22 30 L78 30 Z' fill='none' stroke='%23000' stroke-width='8'/%3E%3Cline x1='31' y1='45' x2='69' y2='45' stroke='%23000' stroke-width='8'/%3E%3C/svg%3E"); }
#el-ventus .chapter__index::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 L78 70 L22 70 Z' fill='none' stroke='%23000' stroke-width='8'/%3E%3Cline x1='31' y1='55' x2='69' y2='55' stroke='%23000' stroke-width='8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 L78 70 L22 70 Z' fill='none' stroke='%23000' stroke-width='8'/%3E%3Cline x1='31' y1='55' x2='69' y2='55' stroke='%23000' stroke-width='8'/%3E%3C/svg%3E"); }

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  .mk-core, .mk-wave, .mk-stem, .mk-gust line,
  .sigil__core, .sigil__wave, .sigil__stem, .sigil__gust line,
  .chapter__quote::before { animation: none !important; }
  .sigil__core, .sigil__wave, .sigil__stem, .sigil__gust { opacity: .8; }
  .chapter__quote::before { display: none; }
}

/* =========================================================================
   타이포 분리 — 디스플레이/세리프 폰트는 라틴 전용, 한글은 전부 Pretendard.
   (Syne·EB Garamond 에는 한글 글리프가 없어 섞어 쓰면 자간·굵기가 어긋난다)
   ========================================================================= */

/* 한글이 들어가는 제목은 본문 폰트로, 대신 굵기·자간을 제목답게 */
.manifesto__title,
.drop__title,
.preorder__title .ko,
.chapter__ko,
.card__name,
.hero__lead,
.band__caption {
  font-family: var(--font-body);
  letter-spacing: -0.025em;
}
.manifesto__title, .drop__title, .preorder__title .ko { font-weight: 700; }

/* 라틴 전용 구간만 디스플레이 폰트를 유지 */
.hero__title,
.nav__brand-en,
.chapter__title,
.foot__logo,
.preorder__title .en { font-family: var(--font-display); }
.preorder__title .en { font-weight: 800; letter-spacing: var(--ls-tight); }

/* 라틴 이탤릭(EB Garamond)은 라틴 텍스트에만 */
.hero__latin, .chapter__latin, .band__caption em { font-family: var(--font-latin); font-style: italic; }

/* 한글 강조는 세리프 이탤릭 대신 색·밑선으로 */
.manifesto__title em {
  font-family: inherit; font-style: normal; font-weight: 700;
  color: var(--accent);
  box-shadow: inset 0 -0.14em 0 color-mix(in srgb, var(--accent) 22%, transparent);
}
.band__caption { font-family: var(--font-body); }
.band__caption em { color: var(--accent); }

/* 버튼·칩: 한글이 대부분이라 모노 자간을 쓰면 벌어져 보인다 */
.btn { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.01em; text-transform: none; font-size: var(--fs-small); }
.nav__cta { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.01em; text-transform: none; }
.card__pick { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.agree, .field__help, .drop__note, .preorder__lead { font-family: var(--font-body); }
.picks button { font-family: var(--font-body); letter-spacing: 0; }
.picks button span { font-weight: 500; }
.foot__links { font-family: var(--font-body); letter-spacing: 0; font-weight: 500; }
.dial__auto { font-family: var(--font-body); letter-spacing: 0; }
.form__status { font-family: var(--font-body); letter-spacing: 0; }

/* 라틴/숫자 전용 요소는 모노 유지 — 여기가 브랜드의 기계적인 결 */
.eyebrow, .dial__num, .dial__name, .chapter__index, .spec dt,
.card__num, .card__price, .hero__ticker, .hero__count,
.nav__status, .foot__list dt, .foot__legal, .field__label {
  font-family: var(--font-mono);
}

/* 매니페스토 제목: 2단 레이아웃의 좌측 폭에 맞춰 별도 스케일 */
.manifesto__title { font-size: clamp(1.75rem, 4.6vw, 3.3rem); line-height: 1.28; max-width: 18ch; }

/* 넓은 화면에서 티커 항목이 흩어지지 않게 */
@media (min-width: 768px) {
  .hero__ticker li { justify-content: flex-start; gap: var(--sp-4); }
  .hero__ticker span { margin-left: auto; }
}
@media (min-width: 1280px) {
  .hero__ticker { gap: var(--sp-2) var(--sp-8); }
}

/* 히어로 데스크탑 컷은 인물이 왼쪽에 있어, 타이포와 겹치지 않게 좌우를 뒤집는다
   (원본에 글자가 없어 반전해도 어색함이 없다) */
@media (min-width: 768px) {
  .hero__media img { object-position: 50% 50%; }
}

/* =========================================================================
   [A안] 기호의 무게를 낮춘다 — 굵은 픽토그램에서 헤어라인 인덱스 마크로.
   사진의 결이 주인공이고 기호는 그 옆에 조용히 놓인 표식이어야 한다.
   ========================================================================= */

/* 큰 시그니처: 원 테두리와 내부 장식을 걷어내고 선 하나만 남긴다 */
.dial__sigil { width: 1.5rem; height: 1.5rem; opacity: .9; }
.sigil__ring { display: none; }
.sigil__tri { stroke-width: 2.6; }
.sigil__bar { stroke-width: 2.6; }
.sigil__core, .sigil__wave, .sigil__stem, .sigil__gust { display: none; }

/* 다이얼 마크: 얇게, 작게, 내부 디테일 없이 */
.dial__mark { width: 0.95rem; height: 0.95rem; }
.dial__mark .mk-tri { stroke-width: 3; }
.dial__mark .mk-bar { stroke-width: 3; }
.dial__mark .mk-core,
.dial__mark .mk-wave,
.dial__mark .mk-stem,
.dial__mark .mk-gust { display: none; }
.dial__btn[aria-pressed="true"] .mk-tri,
.dial__btn[aria-pressed="true"] .mk-bar { stroke-width: 3.6; }

/* 활성 표시는 색이 아니라 밀도로 — 액센트는 아주 작은 점 하나면 충분하다 */
.dial__btn[aria-pressed="true"] { color: var(--ink); }
.dial.is-stuck .dial__btn[aria-pressed="true"] { color: var(--ink); }
.dial .dial__btn[aria-pressed="true"] { color: var(--on-media); }
.dial__name { letter-spacing: 0.12em; }
.dial__btn[aria-pressed="true"] .dial__num { color: var(--accent); }

/* 챕터 인덱스 옆 기호도 같은 무게로 */
.chapter__index::after { width: .62em; height: .62em; opacity: .55; }

/* 아이콘 모션 제거 — 정지된 표식이 사진과 덜 싸운다 */
.dial__btn .mk-core, .dial__btn .mk-wave, .dial__btn .mk-stem, .dial__btn .mk-gust line { animation: none !important; }
.chapter__quote::before { display: none; }

/* =========================================================================
   [C안] 기호 = 빛의 각도.  삼각형 대신 사진 속 사선 빛과 같은 언어를 쓴다.
   불은 치솟고, 물은 흘러내리고, 나무는 곧게 서고, 공기는 스쳐 지나간다.
   ========================================================================= */
.dial__mark .ray {
  stroke: currentColor; stroke-width: 5; stroke-linecap: round; fill: none;
}
.dial__btn[aria-pressed="true"] .ray { stroke-width: 7; }

/* 큰 시그니처: 빛줄기 하나가 원소를 따라 각도를 바꾼다 */
.dial__sigil { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.dial__sigil svg { overflow: visible; }
.beam {
  stroke: currentColor; stroke-width: 6; stroke-linecap: round;
  transform-origin: 50px 50px;
  transition: transform var(--dur-slow) var(--ease-io), opacity var(--dur-base) var(--ease-out);
}
.beam--2 { opacity: 0; transform: translateY(0); }
:root[data-element="ignis"]  .beam--1 { transform: rotate(-52deg); }
:root[data-element="aqua"]   .beam--1 { transform: rotate(24deg); }
:root[data-element="silva"]  .beam--1 { transform: rotate(-90deg); }
:root[data-element="ventus"] .beam--1 { transform: translateY(-11px); }
:root[data-element="ventus"] .beam--2 { opacity: 1; transform: translateY(11px); }

/* =========================================================================
   메뉴바 재설계 — 우측 플로팅 패널을 없애고, 어느 화면에서나 같은 자리에
   같은 크기로 놓인 하단 바 하나로 통일한다. 읽히는 게 먼저다.
   ========================================================================= */
.dial {
  left: 0; right: 0; bottom: 0; top: auto; transform: none;
  flex-direction: row; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  border: 0; border-top: 1px solid var(--ink-14);
  background: var(--bg-72);
  color: var(--ink);
}
.dial.is-stuck { background: var(--bg-72); color: var(--ink); }
.dial__label {
  display: none; flex: none;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); color: var(--ink-40);
}
.dial__nav { flex: 1 1 auto; min-width: 0; }
.dial__list { display: flex; gap: var(--sp-1); }
.dial__list li { flex: 1 1 0; min-width: 0; }

.dial__btn {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 3px; padding: var(--sp-3) var(--sp-1) var(--sp-2);
  color: var(--ink-64);
}
.dial__btn::after {                     /* 활성 표시 — 바닥에 그어지는 빛줄기 */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.dial__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.dial__btn:hover { color: var(--ink); }
.dial__btn[aria-pressed="true"] { color: var(--ink); }

.dial__mark { width: 1.15rem; height: 1.15rem; color: var(--ink-40); }
.dial__btn[aria-pressed="true"] .dial__mark { color: var(--accent); }
.dial__num {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; color: var(--ink-40);
}
.dial__btn[aria-pressed="true"] .dial__num { color: var(--accent); }
.dial__name {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.06em; opacity: 1; line-height: 1.2;
}
.dial__ko {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink-64);
}
.dial__btn[aria-pressed="true"] .dial__ko { color: var(--ink); }

.dial__auto {
  position: absolute; right: var(--gutter); top: -2.9rem;
  background: var(--ink); color: var(--bg);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-micro);
}

/* 넓은 화면에서는 한 줄로 펼치고 라벨을 붙인다 */
@media (min-width: 768px) {
  .dial { gap: var(--sp-6); padding-block: var(--sp-3); }
  .dial__label { display: block; }
  .dial__list { gap: var(--sp-2); }
  .dial__btn { flex-direction: row; align-items: baseline; justify-content: center; gap: var(--sp-3); }
  .dial__mark { align-self: center; }
  .dial__name { font-size: 0.8125rem; }
  .dial__ko { font-size: 0.8125rem; }
  .dial__auto { position: static; margin-left: auto; }
}

/* 우측 레일이 사라졌으니 본문에 잡아 두었던 여백을 되돌린다 */
@media (min-width: 1024px) {
  .chapter .wrap, .drop .wrap, .foot .wrap, .foot__legal { padding-right: var(--gutter); }
  .hero__inner, .hero__foot { padding-right: var(--gutter); }
  .preorder__inner { padding-right: var(--gutter); }
  .hero__ticker { max-width: var(--maxw); }
  .hero__hint { bottom: 9rem; }
  .foot__legal { padding-bottom: 5rem; }
}
/* 하단 바에 가리지 않도록 페이지 끝에 여유 */
.foot { padding-bottom: 7rem; }

/* 이전 세로 레일 규칙의 잔재를 확실히 덮는다 */
.dial, .dial__list { flex-direction: row !important; }
.dial__list { align-items: stretch; }
@media (min-width: 1024px) {
  .dial { top: auto; bottom: 0; left: 0; right: 0; transform: none; padding: var(--sp-3) var(--gutter); }
  .dial__btn { flex-direction: row; }
}

/* 하단 바에 가리지 않게 — 모든 화면에서 히어로 하단 정보에 여유를 준다 */
.hero__foot { padding-bottom: 5.5rem; }
@media (min-width: 768px) { .hero__foot { padding-bottom: 5rem; } }
.hero__hint { display: none; }

/* 바탕을 조금 더 불투명하게 — 사진이 비쳐 글자를 흐리지 않도록 */
.dial {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top-color: var(--ink-14);
}

/* 모바일: 하단 바 높이를 줄인다 — 시그니처 마크는 접고 여백만 조인다 */
@media (max-width: 767px) {
  .dial { padding: var(--sp-2) var(--sp-3); padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom)); gap: 0; }
  .dial__sigil { display: none; }
  .dial__btn { padding: var(--sp-2) 2px var(--sp-2); gap: 1px; }
  .dial__mark { width: 0.95rem; height: 0.95rem; }
  .dial__num { font-size: 0.625rem; }
  .dial__name { font-size: 0.6875rem; }
  .dial__ko { font-size: 0.75rem; }
  .hero__foot { padding-bottom: 4.75rem; }
  .foot { padding-bottom: 6rem; }
}

/* 하단 바는 항상 종이 배경 위에 놓이므로, 예전 다크 전용 색을 되돌린다 */
.dial .dial__btn { color: var(--ink-64); }
.dial .dial__btn:hover { color: var(--ink); }
.dial .dial__btn[aria-pressed="true"] { color: var(--ink); }
.dial .dial__btn[aria-pressed="true"] .dial__num { color: var(--accent); }
.dial .dial__name { color: inherit; }

/* =========================================================================
   기호 정리 — 선 하나짜리 기호는 화면에서 그냥 '줄'로 보였다.
   웹 UI에서는 기호를 걷어내고 활자만 남긴다. 연금술 삼각형 마크는
   택·자수·스티커·파비콘 같은 오프라인 자산에서만 쓴다.
   ========================================================================= */
.dial__mark, .dial__sigil { display: none; }
.chapter__index::after { display: none; }

.dial__btn {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: var(--sp-3) var(--sp-2);
}
.dial__num { font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--ink-40); }
.dial__name { font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--ink-64); }
.dial__ko { font-size: 0.75rem; color: var(--ink-40); }

.dial__btn[aria-pressed="true"] .dial__num  { color: var(--accent); }
.dial__btn[aria-pressed="true"] .dial__name { color: var(--ink); }
.dial__btn[aria-pressed="true"] .dial__ko   { color: var(--ink-64); }

@media (min-width: 768px) {
  .dial__btn { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
  .dial__name { font-size: 0.8125rem; }
  .dial__ko { font-size: 0.8125rem; }
}

/* =========================================================================
   색감 정리 — 액센트(주황)는 '지금 이것' 하나에만 쓴다.
   여기저기 주황이 흩어져 있으면 통일감이 먼저 무너진다.
   ========================================================================= */
.hero__ticker b { color: var(--on-media-45); }          /* 일정표 번호는 중립으로 */
.chapter__index span { color: var(--ink-64); }          /* 챕터 번호도 중립으로 */
.card__num { color: var(--dim); }
.card__link[aria-pressed="true"] .card__num { color: var(--accent); }
.nav__status-dot { background: var(--ink-40); box-shadow: none; }
.dial.is-stuck .nav__status-dot { background: var(--ink-40); }

/* 남겨 두는 액센트: 현재 원소 / 카운트다운 / CTA / 담김 상태 / 상태 문구 */

/* 하단 바: CHAPTER 라벨이 폭을 먹어 항목이 치우쳐 보이던 것을 균등하게 */
@media (min-width: 768px) {
  .dial { gap: 0; }
  .dial__label { width: 9rem; flex: none; }
  .dial__list { width: 100%; }
  .dial__btn { justify-content: flex-start; padding-left: var(--sp-4); }
}

/* 히어로 일정표: 너무 흐려 읽히지 않던 대비를 한 단계 올린다 */
.hero__ticker { color: var(--on-media); opacity: .78; }
.hero__ticker b { color: var(--on-media-70); }
.hero__ticker span { opacity: .72; }

/* =========================================================================
   데모 레이어 — 쇼핑몰 문법 3종 (공지 마퀴 / 스크롤 진행 / 고스트 타이포)
   ========================================================================= */

/* ---------- 상단 공지 마퀴 ---------- */
.ticker {
  position: fixed; inset: 0 0 auto 0; z-index: calc(var(--z-nav) + 1);
  height: 2.25rem; overflow: hidden;
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center;
  transition: background-color var(--dur-theme) var(--ease-io);
}
.ticker__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.ticker__run { display: flex; align-items: center; flex: none; }
.ticker__run span {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: var(--ls-mono); white-space: nowrap;
  padding-inline: var(--sp-4);
}
.ticker__run i { font-style: normal; opacity: .45; font-size: 0.5rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* 공지 바 높이만큼 상단 바와 히어로를 내린다 */
:root { --ticker-h: 2.25rem; }
.nav { top: var(--ticker-h); }
.hero { padding-top: calc(var(--ticker-h) + var(--nav-h) + var(--sp-6)); }
.chapter, .drop, .preorder { scroll-margin-top: calc(var(--ticker-h) + var(--nav-h) + var(--sp-4)); }

/* ---------- 스크롤 진행 바 ---------- */
.progress {
  position: fixed; top: var(--ticker-h); left: 0; right: 0; height: 2px;
  z-index: calc(var(--z-nav) + 2); pointer-events: none;
  background: transparent;
}
.progress span {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transform-origin: left;
  transition: background-color var(--dur-theme) var(--ease-io);
}

/* ---------- 챕터 고스트 타이포 ---------- */
.chapter { position: relative; overflow: hidden; }
.chapter__ghost {
  position: absolute; top: 50%; left: 0; z-index: 0;
  transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(7rem, 26vw, 22rem); line-height: 1;
  letter-spacing: -0.05em; white-space: nowrap;
  color: var(--ink); opacity: .045;
  pointer-events: none; user-select: none;
  will-change: transform;
}
.chapter .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .chapter__ghost { transform: translateY(-50%) !important; }
}

/* =========================================================================
   가시성 — 사진 위 텍스트는 무조건 읽혀야 한다
   ========================================================================= */
.hero__scrim {
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--media-void) 94%, transparent) 0%,
      color-mix(in srgb, var(--media-void) 66%, transparent) 34%,
      color-mix(in srgb, var(--media-void) 18%, transparent) 66%,
      transparent 100%),
    linear-gradient(to right,
      color-mix(in srgb, var(--media-void) 58%, transparent) 0%,
      transparent 52%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--media-void) 50%, transparent) 0%,
      transparent 26%);
}
.hero__lead { color: var(--on-media); }
.hero__latin { color: var(--on-media-70); }
.preorder__lead { color: var(--on-media); }
.field__help { color: var(--on-media-70); }
.spec dd { font-size: var(--fs-body); }
.card__name { font-size: var(--fs-body); }
.card__price { font-size: var(--fs-body); }
.drop__note { font-size: var(--fs-small); color: var(--ink-64); }

/* =========================================================================
   인터랙션 — 커서에 반응하는 버튼과 카드
   ========================================================================= */
.btn { will-change: transform; }
.magnet { transition: transform var(--dur-base) var(--ease-out); }

.card__link { perspective: 900px; }
.card__slot { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); transform-style: preserve-3d; }
.card__img { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.card__link:hover .card__img { transform: scale(1.05); }

/* 담기 버튼을 더 크고 분명하게 */
.card__pick {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-micro); font-weight: 600;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.4);
}
.card__pick i { font-size: 1rem; }

/* 카운트다운 숫자 */
.hero__count b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .card__link:hover .card__img { transform: none; }
  .card__slot { transform: none !important; }
  .magnet { transform: none !important; }
}

/* =========================================================================
   영상 레이어 — 사진 슬롯 위에 정확히 포개고, 재생 준비가 되면 페이드인
   (자바스크립트가 꺼져 있거나 모션 최소화면 사진만 남는다)
   ========================================================================= */
.hero__video, .band__video, .chapter__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 900ms var(--ease-out);
  pointer-events: none;
}
.hero__video { object-position: 50% 50%; }
.chapter__media { position: relative; }
.chapter__video { border-radius: var(--radius); }
.hero__video.is-playing, .band__video.is-playing, .chapter__video.is-playing { opacity: 1; }

/* 영상이 뜨면 그 아래 사진은 굳이 함께 보일 필요가 없다 */
.hero__video.is-playing ~ picture img,
.band__video.is-playing + img { opacity: 0; transition: opacity 900ms var(--ease-out); }

@media (max-width: 767px) { .hero__video { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__video, .band__video, .chapter__video { display: none; } }

/* =========================================================================
   룩북 갤러리 — 옆으로 끌어 보는 필름 스트립
   ========================================================================= */
.gallery {
  background: var(--bg); color: var(--ink);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--ink-14);
  scroll-margin-top: calc(var(--ticker-h) + var(--nav-h));
  transition: background-color var(--dur-theme) var(--ease-io);
  overflow: hidden;
}
.gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.gallery__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-h2); letter-spacing: -0.025em; margin-top: var(--sp-3);
}
.gallery__hint { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-40); letter-spacing: var(--ls-mono); }

.strip {
  display: flex; gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-inline: var(--gutter);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--ink-40) transparent;
  cursor: grab;
}
.strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip::-webkit-scrollbar { height: 3px; }
.strip::-webkit-scrollbar-thumb { background: var(--ink-40); }
.strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.strip__item { flex: none; width: min(72vw, 22rem); scroll-snap-align: center; }
.strip__item figure { margin: 0; }
.strip__item img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--media-void); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.strip__item figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); color: var(--ink-64);
}
@media (min-width: 768px) { .strip__item { width: 20rem; } }
@media (min-width: 1280px) { .strip__item { width: 23rem; } }

/* =========================================================================
   만드는 방식
   ========================================================================= */
.craft {
  background: var(--bg); color: var(--ink);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--ink-14);
  transition: background-color var(--dur-theme) var(--ease-io);
}
.craft__head { max-width: 34rem; }
.craft__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.025em; margin-top: var(--sp-3); }
.craft__lead { margin-top: var(--sp-4); color: var(--ink-64); }
.craft__list { margin-top: var(--sp-7); display: grid; gap: var(--sp-7); }
.craft__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--media-void); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.craft__step {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); color: var(--accent); margin-top: var(--sp-4);
}
.craft__name { font-size: var(--fs-h3); font-weight: 700; margin-top: var(--sp-2); }
.craft__text p:last-child { margin-top: var(--sp-3); color: var(--ink-64); font-size: var(--fs-small); }
@media (min-width: 768px) {
  .craft { padding-block: var(--sp-9); }
  .craft__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

/* =========================================================================
   드롭 로드맵
   ========================================================================= */
.road {
  background: var(--bg); color: var(--ink);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--ink-14);
  transition: background-color var(--dur-theme) var(--ease-io);
}
.road__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.025em; margin-top: var(--sp-3); }
.road__list { margin-top: var(--sp-7); display: grid; gap: 0; border-top: 1px solid var(--ink-14); }
.road__item {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--ink-14);
  display: grid; gap: var(--sp-2);
  position: relative;
  transition: background-color var(--dur-base) var(--ease-out);
}
.road__item::before {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 2px;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.road__item.is-now::before { width: 100%; }
.road__date { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); color: var(--ink-40); }
.road__name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); letter-spacing: 0.02em; display: flex; align-items: baseline; gap: var(--sp-3); }
.road__name span { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); color: var(--ink-40); letter-spacing: 0; }
.road__desc { font-size: var(--fs-small); color: var(--ink-64); }
.road__state { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); color: var(--ink-40); }
.road__item.is-now .road__state { color: var(--accent); }
.road__note { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--ink-64); }
@media (min-width: 768px) {
  .road { padding-block: var(--sp-9); }
  .road__item {
    grid-template-columns: 8rem minmax(0, 16rem) minmax(0, 1fr) auto;
    align-items: baseline; gap: var(--sp-5);
  }
  .road__item:hover { background: var(--ink-08); }
}

/* =========================================================================
   사이즈 · FAQ
   ========================================================================= */
.detail {
  background: var(--bg); color: var(--ink);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--ink-14);
  transition: background-color var(--dur-theme) var(--ease-io);
}
.detail__grid { display: grid; gap: var(--sp-8); }
.detail__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.025em; margin-top: var(--sp-3); margin-bottom: var(--sp-5); }
/* min-width:0 이 없으면 표의 min-width 가 그대로 밀고 나가 페이지에 가로 스크롤이 생깁니다 */
.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
.size { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 22rem; }
.size caption { text-align: left; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); color: var(--ink-40); padding-bottom: var(--sp-3); }
.size th, .size td { padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--ink-14); text-align: right; font-variant-numeric: tabular-nums; }
.size thead th { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); color: var(--ink-40); text-transform: uppercase; border-bottom-color: var(--ink-40); }
.size tbody th { text-align: left; font-family: var(--font-mono); color: var(--ink); }
@media (max-width: 420px) {
  .size { min-width: 0; }
  .size th, .size td { padding-inline: var(--sp-1); }
}
.size thead th:first-child { text-align: left; }  /* 아래 S·M·L·XL 과 같은 선에 둔다 */
.detail__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-64); }

.faq { border-top: 1px solid var(--ink-14); }
.faq__item { border-bottom: 1px solid var(--ink-14); }
.faq__item summary {
  list-style: none; cursor: pointer;
  padding: var(--sp-4) 2.5rem var(--sp-4) 0;
  position: relative; font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: var(--sp-2); top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23000' stroke-width='2.4' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23000' stroke-width='2.4' fill='none'/%3E%3C/svg%3E");
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq__item p { padding: 0 var(--sp-6) var(--sp-5) 0; color: var(--ink-64); font-size: var(--fs-small); }
@media (min-width: 900px) {
  .detail { padding-block: var(--sp-9); }
  .detail__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-8); }
}

/* 룩북 스트립: 가로형 컷은 폭을 넓게 */
.strip__item--wide { width: min(88vw, 34rem); }
.strip__item--wide img { aspect-ratio: 16 / 9; }
@media (min-width: 768px) { .strip__item--wide { width: 34rem; } }

/* 로드맵: 원소명이 두 줄로 깨지지 않게 폭을 확보 */
@media (min-width: 768px) {
  .road__item { grid-template-columns: 7rem minmax(15rem, 18rem) minmax(0, 1fr) auto; }
  .road__name { white-space: nowrap; }
  .road__name span { white-space: nowrap; }
}

/* =========================================================================
   가격 구성 — 정직 문법의 핵심 화면. 숫자가 주인공이라 장식을 넣지 않는다.
   ========================================================================= */
.cost {
  background: var(--bg); color: var(--ink);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--ink-14);
  scroll-margin-top: calc(var(--ticker-h) + var(--nav-h) + var(--sp-4));
  transition: background-color var(--dur-theme) var(--ease-io);
}
.cost__head { max-width: 36rem; }
.cost__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.025em; margin-top: var(--sp-3); }
.cost__lead { margin-top: var(--sp-4); color: var(--ink-64); }
.cost__grid { margin-top: var(--sp-7); display: grid; gap: var(--sp-7); }

.bars { border-top: 1px solid var(--ink-14); }
.bars__row {
  display: grid; grid-template-columns: 6.5rem 1fr auto;
  align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--ink-14);
}
.bars__label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); color: var(--ink-64); }
.bars__bar {
  display: block; height: 10px;
  background: var(--accent);
  width: calc(var(--pct) * 1%);
  transform-origin: left; transform: scaleX(0);
  transition: transform 1200ms var(--ease-out);
}
.is-in .bars__bar, .bars.is-shown .bars__bar { transform: scaleX(1); }
.bars__row--rest .bars__bar { background: var(--ink-40); }
.bars__val { font-family: var(--font-mono); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

.cost__list { border-top: 1px solid var(--ink-14); }
.cost__list > div { padding-block: var(--sp-4); border-bottom: 1px solid var(--ink-14); }
.cost__list dt { font-weight: 700; font-size: var(--fs-body); }
.cost__list dd { margin-top: var(--sp-2); color: var(--ink-64); font-size: var(--fs-small); }
.cost__foot { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-40); }

@media (min-width: 900px) {
  .cost { padding-block: var(--sp-9); }
  .cost__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
}

/* 제품 카드에 원단 스펙 한 줄 */
.card__meta { grid-template-columns: auto 1fr auto; row-gap: var(--sp-1); }
.card__spec {
  grid-column: 1 / -1; order: 3;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); color: var(--ink-40);
}

@media (prefers-reduced-motion: reduce) { .bars__bar { transform: scaleX(1) !important; } }

/* =========================================================================
   상단 도구 — 언어 / 화면 모드
   ========================================================================= */
.nav__tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.nav__tool {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 var(--sp-2);
  border: 1px solid currentColor; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono);
  opacity: .78;
  transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__tool:hover { opacity: 1; background: currentColor; }
.nav__tool:hover > * { mix-blend-mode: difference; }
.nav__tool--icon { padding: 0; }
.ico { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ico--moon { display: none; }
:root[data-theme="dark"] .ico--sun { display: none; }
:root[data-theme="dark"] .ico--moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico--sun { display: none; }
  :root:not([data-theme="light"]) .ico--moon { display: block; }
}
@media (max-width: 479px) {
  .nav__tools { gap: var(--sp-2); }
  .nav__cta span:not(.nav__cta-count) { font-size: var(--fs-micro); }
}

/* =========================================================================
   다크 모드 보정 — 라이트 기준으로 짜인 값 중 어긋나는 것만 손본다
   ========================================================================= */
:root[data-theme="dark"] .ticker,
:root:not([data-theme="light"]) .ticker {
  background: var(--ink); color: var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { --btn-fg: var(--bg); --btn-bg: var(--ink); --btn-bd: var(--ink); }
  :root:not([data-theme="light"]) .card__pick { background: color-mix(in srgb, var(--bg) 92%, transparent); }
}
:root[data-theme="dark"] .btn { --btn-fg: var(--bg); --btn-bg: var(--ink); --btn-bd: var(--ink); }
:root[data-theme="dark"] .card__pick { background: color-mix(in srgb, var(--bg) 92%, transparent); }

/* 다크에서는 사진이 배경과 붙어 보이지 않게 아주 얇은 테두리를 준다 */
:root[data-theme="dark"] .card__slot,
:root[data-theme="dark"] .chapter__media img,
:root[data-theme="dark"] .strip__item img,
:root[data-theme="dark"] .craft__media img {
  outline: 1px solid var(--ink-08); outline-offset: -1px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card__slot,
  :root:not([data-theme="light"]) .chapter__media img,
  :root:not([data-theme="light"]) .strip__item img,
  :root:not([data-theme="light"]) .craft__media img {
    outline: 1px solid var(--ink-08); outline-offset: -1px;
  }
}

/* 그레인은 다크에서 곱하기가 아니라 밝히기로 걸어야 자연스럽다 */
:root[data-theme="dark"] .grain { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .grain { mix-blend-mode: screen; }
}

/* =========================================================================
   개행·문단 다듬기 — 문장이 어정쩡하게 끊기지 않게
   ========================================================================= */
.hero__lead, .manifesto__body p, .craft__lead, .cost__lead, .drop__note,
.preorder__lead, .road__note, .detail__note, .cost__list dd, .faq__item p {
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.hero__title, .manifesto__title, .gallery__title, .drop__title,
.cost__title, .craft__title, .road__title, .detail__title, .preorder__title {
  text-wrap: balance;
  word-break: keep-all;
}
.manifesto__body p + p { margin-top: var(--sp-5); }
.hero__lead { line-height: 1.62; }
.hero__lead em { display: inline-block; margin-top: 0.15em; }

/* =========================================================================
   좁은 화면 (~479px) — 상단 바가 넘치지 않게, 터치 영역은 44px 이상
   ========================================================================= */
@media (max-width: 479px) {
  .nav { gap: var(--sp-2); padding-inline: var(--sp-4); }
  .nav__brand-ko { display: none; }
  .nav__brand-en { font-size: 0.9rem; letter-spacing: 0.06em; }
  .nav__tools { gap: var(--sp-1); }
  .nav__cta { font-size: var(--fs-micro); white-space: nowrap; }
  .nav__cta span:first-child { max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; }
}

/* 터치 타깃 — 손가락이 닿는 것은 최소 44px */
@media (hover: none) {
  .nav__tool { min-width: 2.75rem; height: 2.75rem; }
  .nav__cta { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .foot__links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .agree { padding-block: var(--sp-2); }
  .agree input { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; }
  .chip span { padding: var(--sp-3) var(--sp-4); }
  .picks button { min-height: 2.75rem; }
  .faq__item summary { padding-block: var(--sp-5); }
  .strip__item figcaption { padding-block: var(--sp-1); }
}

/* 아주 좁은 화면에서 마퀴 글자가 답답해지지 않게 */
@media (max-width: 359px) {
  .ticker__run span { padding-inline: var(--sp-3); font-size: 0.6875rem; }
  .hero__ticker { grid-template-columns: 1fr; gap: var(--sp-1); }
  .hero__ticker li:nth-child(n+3) { display: none; }
  .dial__ko { display: none; }
}

/* 초광폭 — 콘텐츠가 흩어지지 않게 상한을 둔다 */
@media (min-width: 1600px) {
  :root { --maxw: 88rem; }
  .hero__title { font-size: clamp(2.1rem, 7.4vw, 8.6rem); }
}

/* 브랜드 링크도 상단 바 높이만큼 눌리게 */
.nav__brand { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* 시즌 바의 비활성 한글/영문 라벨 대비 보강 (--ink-40 은 12px 글자에 부족) */
.dial__ko { color: var(--ink-64); }
.dial__num { color: var(--ink-64); }
.dial__btn[aria-pressed="true"] .dial__ko { color: var(--ink); }

/* 좁은 화면 가격 막대 — 라벨이 길어지는 영어에서 두 줄로 깨지지 않게 */
@media (max-width: 599px) {
  .bars__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label val" "bar bar";
    row-gap: var(--sp-2); column-gap: var(--sp-3);
    align-items: center;
  }
  .bars__label { grid-area: label; white-space: nowrap; }
  .bars__val   { grid-area: val; }
  .bars__bar   { grid-area: bar; }
}

/* 상단 CTA — 영어가 길어 잘리던 것을 폭·자간으로 흡수 */
@media (max-width: 479px) {
  .nav__brand-en { font-size: 0.82rem; letter-spacing: 0.04em; }
  .nav__cta span:first-child { max-width: 7.5em; }
  .nav__tool { min-width: 2.5rem; }
}
@media (hover: none) and (max-width: 479px) {
  .nav__tool { min-width: 2.5rem; height: 2.5rem; }
}

/* 푸터 링크는 목록형이라 마우스 환경에서도 눌리는 면적을 넉넉히 */
.foot__links a { display: inline-flex; align-items: center; min-height: 2.25rem; }

/* 자동 프로그램 유인용 칸 — 사람에게는 어떤 방식으로도 보이지 않게 */
.trap {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================
   시즌 바 원소 마크 — 불·물·나무·공기가 그대로 읽히는 형태
   ========================================================================= */
.dial__mark { display: block; width: 1.35rem; height: 1.35rem; color: var(--ink-40); }
.dial__mark svg { width: 100%; height: 100%; overflow: visible; }
.dial__mark svg g { fill: currentColor; }
.dial__btn[aria-pressed="true"] .dial__mark { color: var(--accent); }
.dial__btn:hover .dial__mark { color: var(--ink-64); }
@media (min-width: 768px) {
  .dial__btn { align-items: center; }
  .dial__mark { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 359px) { .dial__mark { width: 1.1rem; height: 1.1rem; } }

/* 십자수 마크는 칸이 작아 뭉개지므로 시즌 바에서 조금 키운다 */
.dial__mark { width: 1.6rem; height: 1.6rem; }
@media (min-width: 768px) { .dial__mark { width: 1.75rem; height: 1.75rem; } }
@media (max-width: 359px) { .dial__mark { width: 1.35rem; height: 1.35rem; } }

/* =========================================================================
   사업자 정보 — 전자상거래법상 표기 의무. 접어 두되 언제나 열 수 있게.
   ========================================================================= */
.foot__biz { margin-top: var(--sp-7); border-top: 1px solid var(--ink-14); padding-top: var(--sp-4); }
.foot__bizToggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); color: var(--ink-64);
  padding: var(--sp-2) 0; min-height: 2.25rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.foot__bizToggle:hover { color: var(--ink); }
.foot__bizToggle i { font-style: normal; transition: transform var(--dur-base) var(--ease-out); }
.foot__bizToggle[aria-expanded="true"] i { transform: rotate(45deg); }
.foot__bizList { margin-top: var(--sp-3); display: grid; gap: var(--sp-2) var(--sp-5); }
.foot__bizList[hidden] { display: none; }
.foot__bizList > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-3); }
.foot__bizList dt {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); color: var(--ink-40);
}
.foot__bizList dd { font-size: var(--fs-small); color: var(--ink-64); }
.foot__bizList dd a { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: var(--ink-40); transition: color .2s ease, text-decoration-color .2s ease; }
.foot__bizList dd a:hover { color: var(--accent); text-decoration-color: var(--accent); }
@media (min-width: 768px) { .foot__bizList { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* -------------------------------------------------------------------------
   손가락으로 쓰는 화면 — 누를 수 있는 영역을 44px 이상으로
   밑줄이 있는 링크는 밑줄이 아래로 밀리지 않도록, 보이지 않는 영역만 넓힙니다.
   위아래 6px 씩이라 세로 간격(0.75rem)과 겹치지 않습니다.
   ------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .nav__tool { height: 2.75rem; min-width: 2.75rem; }
  .foot__bizToggle { min-height: 2.75rem; }
  .nav__cta, .foot__links a { position: relative; }
  .nav__cta::after,
  .foot__links a::after { content: ""; position: absolute; inset: -6px; }
}