/* Hallmark · macrostructure: Marquee Hero · genre: atmospheric
 * theme: studied-DNA (source: image · Behance 花朝青鸾) · studied: yes · DNA-source: image (user reference)
 * paper oklch(13% 0.01 340) · dyes: 홍↔청 two-stop pairs inside traditional shape masks
 * display: Noto Serif KR (roman) · body: Pretendard
 * nav: N9 edge-aligned (CTA=outlined · wordmark=serif) · footer: Ft5 statement (28ch · rule=hairline)
 * hero knobs: alignment=left-bias · art=團扇 double-circle SVG · rail=vertical-rl
 * F4 knobs: numbering=01/02/03 · layout=vertical alternating · connector=none
 * motion: hero entrance stagger + CTA hover lift (2 primitives)
 * pre-emit critique: P4 H5 E4 S5 R4 V5
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.65;
  word-break: keep-all;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--color-select-bg); color: var(--color-select-ink); }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.skip-link {
  position: absolute; left: var(--space-md); top: -100%;
  z-index: var(--z-sticky);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-paper-3); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
}
.skip-link:focus-visible { top: var(--space-md); }

/* =========================================================
   NAV · N9 edge-aligned — 여백이 디자인이다
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}
.nav.scrolled { border-bottom-color: var(--color-rule-soft); }
.nav__inner {
  display: flex; justify-content: space-between; align-items: center;
  padding-block: var(--space-md);
}
.brand {
  display: inline-flex; align-items: baseline; gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-md); font-weight: 700;
}
.brand span { font-size: var(--text-sm); font-weight: 500; color: var(--color-neutral); }
/* 스위치 + CTA. nav__inner 는 space-between 2자녀 구조라 3번째를 그냥 넣으면
   가운데로 흩어진다 — 오른쪽 것들을 하나로 묶는다. */
.nav__actions { display: flex; align-items: center; gap: var(--space-sm); }

/* =========================================================
   버튼 · 외곽선 칩 (C1)
   ========================================================= */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.chip:hover { background: var(--color-paper-2); border-color: var(--color-neutral); transform: translateY(-1.5px); }
.chip:active { transform: translateY(1px); }

.nav .chip { min-height: 44px; padding-block: var(--space-xs); }

/* =========================================================
   HERO · 마퀴 폴드 — 團扇 도형이 폴드를 지배한다
   ========================================================= */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto;
  gap: var(--space-2xl);
  align-items: center;
}
/* 도형과 글리프는 **같은 상자**를 공유해야 한다. 예전에는 .hero__art 가 그리드
   칼럼 전체(≈795px)로 늘어나고 SVG만 26rem이라, inset:0 으로 붙은 休가 도형
   오른쪽 밖에 착지했다 — 화면 폭에 따라 도형이 잘린 것처럼 보이던 원인이다.
   상자를 도형 크기로 줄이고, 글리프는 그 상자 폭(cqw)에 맞춰 키운다. */
.hero__art {
  position: relative;
  width: min(100%, 26rem);
  container-type: inline-size;
}
.hero__art svg { display: block; width: 100%; height: auto; }
.hero__glyph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34cqw;
  color: var(--color-on-dye);
  transform: translateY(-4%);
}
.hero__copy h1 {
  font-size: var(--text-display);
  margin-block-end: var(--space-lg);
}
.hero__copy .hl {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--color-accent);
}
.hero__sub { max-width: 46ch; color: var(--color-muted); font-size: var(--text-md); }
.hero__rail {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.35em;
  color: var(--color-neutral);
  align-self: stretch;
  padding-block: var(--space-md);
}

/* 진입 스태거 — 페이지 로드 1회, 이후의 스크롤 모션은 없다 */
.rise {
  opacity: 0;
  transform: translateY(8px);
  animation: rise var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* 폴드 경계 .rule-dye 는 전 페이지 공용이라 tokens.css 에 있다. */

/* =========================================================
   STORES 밴드
   ========================================================= */
.band { padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule-soft); }
/* 스토어 버튼(.stores/.store)은 event.html 도 같은 형태를 쓰므로 tokens.css 에 있다. */

.avail { margin-block-start: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.avail b { color: var(--color-ink); }

.meta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}
.meta span {
  padding: var(--space-2xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-soft);
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--color-muted);
  white-space: nowrap;
}

/* =========================================================
   섹션 머리 · S2 hanging — 여백 위에 뜬 제목
   ========================================================= */
.shead { max-width: 60ch; margin-block-end: var(--space-2xl); }
.shead h2 { font-size: var(--text-2xl); margin-block-end: var(--space-md); }
.shead p { color: var(--color-muted); }

/* =========================================================
   WHY · 엇갈림 행 — 3열 균등 그리드를 거부한다
   ========================================================= */
.why { padding-block: var(--space-3xl); }
.why__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg) var(--space-xl);
  align-items: start;
  padding-block: var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule-soft);
}
.why__row:nth-of-type(2) { margin-inline-start: 6%; }
.why__row:nth-of-type(3) { margin-inline-start: 12%; }
.why__row h4 { font-size: var(--text-md); margin-block-end: var(--space-xs); }
.why__row p { color: var(--color-muted); max-width: 58ch; }
.seal { position: relative; width: 72px; flex: none; container-type: inline-size; }
.seal svg { display: block; width: 100%; height: auto; }
.seal b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 39cqw;
  color: var(--color-on-dye);
}
.why__note {
  margin-block-start: var(--space-xl);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
}

/* =========================================================
   FEATURES · F4 스텝 시퀀스 — 01 → 02 → 03
   ========================================================= */
.features { padding-block: var(--space-3xl) var(--space-2xl); }
.steps { list-style: none; }
.steps li {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-2xl);
}
.steps li:nth-child(even) .step__media { order: -1; }
.step__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.3em;
  color: var(--color-accent-2);
  margin-block-end: var(--space-sm);
}
.steps h3 { font-size: var(--text-xl); margin-block-end: var(--space-md); }
.steps p { color: var(--color-muted); max-width: 52ch; }
.step__list { list-style: none; margin-block-start: var(--space-lg); }
.step__list li {
  display: block; padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  position: relative; color: var(--color-muted); font-size: var(--text-sm);
}
.step__list li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg);
  background: var(--dye-jade-deep);
}
/* 폭 제한을 미디어 쪽으로 올린다 — .arch 의 반원 곡선이 cqw(부모 컨테이너 폭)를
   기준으로 계산되므로, 부모가 곧 아치의 폭이어야 한다. */
.step__media {
  justify-self: center;
  width: min(100%, 17rem);
  container-type: inline-size;
}

/* 아치 창(.arch)은 tokens.css 의 공용 컴포넌트다 — 폰 프레임 흉내 대신 전통 창의
   실루엣이고, 곡선은 폭과 무관하게 언제나 정확한 반원이다. */

/* =========================================================
   VALUES · 花朝 사형(四形) — 전통 도형 4종에 담은 원칙
   ========================================================= */
.values { padding-block: var(--space-3xl); background: var(--color-paper-2); }
.values__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
}
.value { text-align: center; }
.value figure {
  position: relative; width: min(100%, 10rem); margin-inline: auto;
  container-type: inline-size;
}
.value figure svg { display: block; width: 100%; height: auto; }
.value figure b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 24cqw;
  color: var(--color-on-dye);
}
.value h4 { font-size: var(--text-base); margin-block: var(--space-lg) var(--space-2xs); }
.value p { font-size: var(--text-sm); color: var(--color-muted); }

/* =========================================================
   GALLERY · 가로 두루마리
   ========================================================= */
.gallery { padding-block: var(--space-3xl) var(--space-2xl); }
.gallery__track {
  display: flex; gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block-end: var(--space-md);
}
.shot {
  flex: 0 0 clamp(11rem, 30vw, 15rem); scroll-snap-align: start;
  container-type: inline-size;
}
.shot figcaption { margin-block-start: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.shot figcaption b { display: block; color: var(--color-ink); font-weight: 600; }

/* =========================================================
   INK · 세로쓰기 축(軸) + 스탯 스트립 (T4)
   ========================================================= */
.ink { padding-block: var(--space-4xl) var(--space-3xl); border-block: var(--rule-hair) solid var(--color-rule-soft); }
.ink__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: start;
}
.ink__rail {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: 0.3em;
  color: var(--color-accent);
  border-inline-start: var(--rule-thick) solid var(--dye-blossom-deep);
  padding-inline-start: var(--space-md);
}
.ink h2 { font-size: var(--text-2xl); max-width: 24ch; margin-block-end: var(--space-lg); }
.ink__body { color: var(--color-muted); max-width: 58ch; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-2xl);
  font-variant-numeric: tabular-nums;
}
.stat .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.1;
}
.stat .n em { font-style: normal; color: var(--color-accent); }
.stat .l { font-size: var(--text-sm); color: var(--color-neutral); margin-block-start: var(--space-2xs); }

/* =========================================================
   CTA · 다운로드
   ========================================================= */
.cta { padding-block: var(--space-3xl); }
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-2xl);
  align-items: center;
}
.cta h2 { font-size: var(--text-2xl); margin-block-end: var(--space-sm); }
.cta__grid > div > p { color: var(--color-muted); margin-block-end: var(--space-xl); }
.cta__art {
  position: relative; justify-self: center; width: min(100%, 15rem);
  container-type: inline-size;
}
.cta__art svg { display: block; width: 100%; height: auto; }
.cta__art b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 23cqw;
  color: var(--color-on-dye);
}

/* =========================================================
   FOOTER · Ft5 statement — 사이트맵이 아니라 맺음말
   ========================================================= */
.foot { padding: var(--space-3xl) 0 var(--space-xl); }
.foot__line {
  overflow-wrap: anywhere;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 28ch;
  margin-block-end: var(--space-2xl);
}
.foot__line .hl { color: var(--color-accent-2); }
.foot__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--space-md);
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }
.foot__links a {
  font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.foot__links a:hover { color: var(--color-ink); }
.foot__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm);
  margin-block-start: var(--space-xl);
  font-size: var(--text-xs); color: var(--color-neutral);
}

/* =========================================================
   반응형 — 320 / 375 / 414 / 768 검증 대상
   ========================================================= */
@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__rail { display: none; }
  .hero__art { width: min(70vw, 22rem); }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .steps li:nth-child(even) .step__media { order: 0; }
  .why__row:nth-of-type(2), .why__row:nth-of-type(3) { margin-inline-start: 0; }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ink__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .ink__rail { writing-mode: horizontal-tb; letter-spacing: 0.2em; border-inline-start: 0; padding-inline-start: 0; border-block-end: var(--rule-thick) solid var(--dye-blossom-deep); padding-block-end: var(--space-sm); width: fit-content; }
  .cta__grid { grid-template-columns: minmax(0, 1fr); }
  .cta__art { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero__copy h1 { font-size: var(--text-display-s); }
  .shead h2, .ink h2, .cta h2 { font-size: var(--text-xl); }
  .why__row { grid-template-columns: minmax(0, 1fr); }
  .seal { width: 60px; }
  /* 글리프 크기는 cqw 라 도형이 줄면 알아서 따라온다 — 별도 보정이 필요 없다. */
}

/* =========================================================
   모션 감쇠
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .rise { animation: rise-reduced 150ms linear forwards; }
  @keyframes rise-reduced { to { opacity: 1; transform: none; } }
  .chip:hover { transform: none; }
}