/*
 * 겐츠 살롱 초대장 — 모양 (럭셔리 디자인 시스템 v1 · salon/LUXURY.md)
 * 래커(무광 버건디) 바탕 ↔ 크림 종이 두 세계 + 회갈색 탁자(상품 사진이 있는 장).
 * 앱 신호(알약 단추·진한 그림자·칩·굵은 막대·이모지·기본 체크박스·튀는 움직임)는 쓰지 않는다.
 * 움직임은 transform · opacity (예외: 선 그리기 stroke-dashoffset · 이름 clip-path · 펼침 grid-template-rows — 작은 면적).
 */

/* ───────── 1. 토큰 ───────── */
:root {
  color-scheme: only light;
  /* 래커 (금속 버건디) */
  --ti-00: #140403;
  --ti-0: #1E0807;
  /* 래커 바탕 (2026-10-08 한 단계 밝게 — 가장 어두운 아래도 #2C0B0A 보다 어둡지 않게, 색상 0~3°) */
  --wall: #3A1010;
  --lq-top: #4B1615;
  --lq-mid: #3D1111;
  --lq-bot: #2C0B0A;
  --ti-1: #3B0F0B;
  --ti-2: #5A1A13;
  --brand: #7C251A;
  --brand-press: #631D14;
  --ti-4: #9C3B2D;
  /* 크림 · 종이 · 상자 · 탁자 */
  --cream: #F2E9DD;
  --paper: #F6EFE4;
  --paper-2: #EDE3D5;
  --table: #C8B6A2;
  --stripe-b: #74291F;
  --stripe-c: #E3C4AA;
  --wordmark: #FBF7F1;
  /* 종이 위 글자 (정한 색 — 대비는 LUXURY.md 2-3) */
  --ink: #2B1410;
  --ink-2: #64514B;
  --ink-3: #786761;
  --ink-off: #887972;
  --ink-hint: #786761;
  /* 래커 위 크림 글자 */
  --cream-2: rgba(242, 233, 221, .74);
  --cream-3: rgba(242, 233, 221, .62);
  /* 선 · 금빛 · 오류 */
  --hair-ink: rgba(43, 20, 16, .22);
  --rule-ink: rgba(43, 20, 16, .5);
  --hair-on: rgba(242, 233, 221, .24);
  --rule-on: rgba(242, 233, 221, .5);
  --gilt: #B0946A;
  --err: #A3291C;
  --err-on: #F0B3A6;

  --f-serif: 'Noto Serif KR', 'AppleMyungjo', 'Nanum Myeongjo', serif;
  --f-roman: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-geo: 'Jost', 'Futura', 'Avenir Next', 'Pretendard Variable', sans-serif;
  --f-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

  /* 머리카락 선 — 2배 화면 .5px */
  --hair: 1px;
  /* 모양 */
  --r-card: 3px;
  --r-btn: 2px;
  --r-box: 1px;
  --sh-paper: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(20, 4, 3, .22), 0 22px 44px -26px rgba(10, 2, 1, .6);
  --sh-table: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 1px rgba(60, 40, 30, .18), 0 16px 32px -20px rgba(60, 40, 30, .45);
  --sh-lift: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(20, 4, 3, .22), 0 26px 40px -24px rgba(10, 2, 1, .6);

  /* 여백 (4px 격자) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gut: 24px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --kb: 0px;
  --test-pad: 0px;

  /* 곡선 — 넘침 없음 */
  --e-silk: cubic-bezier(.22, 1, .36, 1);
  --e-weight: cubic-bezier(.65, 0, .35, 1);
  --e-lift: cubic-bezier(.5, 0, .15, 1);
  --e-rise: cubic-bezier(.33, 0, .1, 1);
  --e-recede: cubic-bezier(.55, 0, .8, .3);
  --e-fall: cubic-bezier(.55, 0, .85, .35);
  --e-press: cubic-bezier(.2, 0, 0, 1);
  --e-ink: cubic-bezier(.4, 0, .2, 1);
  --e-sheen: cubic-bezier(.45, 0, .55, 1);
  /* 시간 */
  --t-press: 90ms;
  --t-release: 240ms;
  --t-micro: 280ms;
  --t-base: 420ms;
  --t-screen: 560ms;

  /* 결 — 금속 솔질 3% 이하 · 종이 4% 이하 */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0016 .82' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .88 .05 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .2 0 0 0 0 .12 .04 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (min-resolution: 2dppx) { :root { --hair: .5px; } }
@media (min-width: 400px) { :root { --gut: 28px; } }

/* ───────── 2. 기본 ───────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  height: 100%;
  background: var(--ti-0);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ti-0);
  color: var(--cream);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
h1, h2, h3, p, ol, ul, dl, dd, dt, figure, figcaption, blockquote { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: inherit; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ol, ul { list-style: none; }
svg { display: block; }
img { display: block; max-width: 100%; }
button {
  font: inherit; color: inherit; letter-spacing: inherit;
  background: none; border: 0; padding: 0; margin: 0;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
a { color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input, textarea { font: inherit; color: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--r-btn); }
.paper :focus-visible, .card :focus-visible, .rv-sheet :focus-visible, .sh-panel :focus-visible { outline-color: var(--brand); }
.lacquer :focus-visible { outline-color: var(--cream); }
.lacquer .card :focus-visible, .lacquer .rv-sheet :focus-visible { outline-color: var(--brand); }
/* 화면이 바뀌면 제목에 초점을 두지만(읽어 주기) 테는 그리지 않는다 · 입력칸은 밑줄이 초점 표시 */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.fld-in:focus, .fld-in:focus-visible { outline: none; }
.vh, .sr-live {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nw { white-space: nowrap; }
::selection { background: rgba(124, 37, 26, .88); color: #F6EFE4; }
.lacquer ::selection { background: #F2E9DD; color: #2B1410; }
.lacquer .card ::selection, .lacquer .rv-sheet ::selection { background: rgba(124, 37, 26, .88); color: #F6EFE4; }

/* 글자 단계 (LUXURY 3-2) */
.caps { font: 400 11px/1 var(--f-geo); letter-spacing: .32em; text-transform: uppercase; }
.caps-s { font: 400 10.5px/1 var(--f-geo); letter-spacing: .34em; text-transform: uppercase; }
.it { font-family: var(--f-roman); font-style: italic; font-weight: 500; letter-spacing: .01em; }
.folio {
  font-family: var(--f-roman); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: .06em;
  font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
}
.num, .tab { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.micro { font-size: 12px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.url, .tracking, .sns-id { word-break: break-all; }
/* 가운데 맞춘 넓은 자간 대문자: 마지막 글자 뒤에 붙는 자간만큼 왼쪽으로 쏠려 보이지 않게 같은 폭을 앞에 둔다 */
.iv-gift, .my-head .caps, .all-hero .caps { padding-left: .32em; }
.mark2 { padding-left: .34em; }
.mark2 .mk-a, .mark2 .mk-b { white-space: nowrap; }
/* 좁은 폰: 'GENTZ BAKERY · BUSAN · 2002' 가 한 줄에 안 들어가면 가운뎃점 없이 두 줄 (줄 머리에 '·' 가 오지 않게) */
@media (max-width: 352px) {
  .mark2 .mk-d { display: none; }
  .mark2 .mk-b { display: block; margin-top: 10px; }
}

/* ───────── 3. 무대 (폰 = 전체 화면 · PC = 펼침면: 왼쪽 글 + 오른쪽 430 칸) ───────── */
.stage {
  position: fixed; left: 0; top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  background: var(--wall);
}
.stage-copy { display: none; }
.device { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; }
.device-screen {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; isolation: isolate;
  background: var(--wall);
}
#app { position: absolute; inset: 0; overflow: hidden; }

/* 바탕 세 가지
   래커: 빛 받은 금속 결은 위 40% 에서만 (아래 덮개 층이 결을 가림) · 넓은 광택 없음 · 빛 번짐은 위에 하나 */
.lacquer, .stage {
  color: var(--cream);
  background-color: var(--wall);
  background-image:
    radial-gradient(120% 55% at 50% 0%, rgba(168, 58, 50, .2), rgba(168, 58, 50, 0) 62%),
    linear-gradient(180deg, rgba(67, 20, 19, 0) 32%, var(--lq-mid) 55%, var(--lq-bot) 100%),
    var(--brush),
    linear-gradient(180deg, var(--lq-top) 0%, #431413 32%, var(--lq-mid) 55%, var(--lq-bot) 100%);
  background-size: 100% 100%, 100% 100%, 520px 520px, 100% 100%;
}
.paper {
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain);
  background-size: 220px 220px;
}
.table { color: var(--ink); background-color: var(--table); }
/* 탁자 위 옅은 글자는 대비가 모자라 한 단계 진하게 (4.5:1 이상) */
.on-table { --ink-2: #4A3732; --ink-3: #574540; --hair-ink: rgba(43, 20, 16, .26); --rule-ink: rgba(43, 20, 16, .55); }

/* 태블릿 폭: 가운데 폰 폭 기둥 */
@media (min-width: 600px) and (max-width: 899px), (min-width: 900px) and (max-height: 599px) {
  .stage { justify-content: center; }
  .device { flex: 0 1 540px; box-shadow: 0 0 0 var(--hair) var(--hair-on); }
  body.wide .device { flex: 1 1 auto; box-shadow: none; }
}
@media (min-width: 900px) and (min-height: 600px) {
  :root { --safe-t: 12px; --safe-b: 8px; }
  .stage { align-items: center; justify-content: center; gap: var(--s-9); padding: 32px 56px; }
  .stage-copy { display: block; flex: 0 1 480px; min-width: 0; }
  .device {
    flex: 0 0 auto;
    width: 430px;
    height: min(880px, calc(100vh - 64px));
    height: min(880px, calc(100dvh - 64px));
    box-shadow: 0 40px 80px -48px rgba(10, 2, 1, .7);
  }

  body.wide .stage { padding: 0; gap: 0; }
  body.wide .stage-copy { display: none; }
  body.wide .device { width: 100%; height: 100%; box-shadow: none; }
}
/* PC 왼쪽 면 (화면마다 바뀜 — app.js stageCopy) */
.stage-copy { position: relative; align-self: stretch; }
.sc-in { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.sc-in.out { pointer-events: none; }
.sc-photo { margin: 0; max-width: 480px; }
.sc-photo .mat { max-width: none; box-shadow: 0 30px 60px -36px rgba(10, 2, 1, .7); }
.sc-photo figcaption { margin-top: 18px; display: flex; align-items: baseline; gap: 14px; color: var(--cream-2); }
.sc-cap { font: 500 15px/1.5 var(--f-serif); color: var(--cream); }
.sc-photo .it { font-size: 16px; color: var(--cream-2); }
.sc-photo + .sc-mark { margin-top: 40px; }
.sc-seal { width: 132px; height: 132px; color: var(--cream); opacity: .9; }
.sc-seal svg { width: 100%; height: 100%; }
.sc-thanks { margin-top: 36px; }
.sc-eyebrow { color: var(--cream-3); }
.sc-slogan {
  margin-top: 28px;
  font: 400 44px/1.3 var(--f-serif);
  letter-spacing: -.03em;
  color: var(--cream);
  margin-left: -.04em;
}
.sc-rule { display: block; width: 32px; height: var(--hair); margin: 36px 0 30px; background: var(--rule-on); }
.sc-note { font-size: 15px; line-height: 1.75; color: var(--cream-2); max-width: 24em; }
.sc-mark { margin-top: 56px; color: var(--cream-3); }

/* ───────── 4. 화면 · 전환 ───────── */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  /* 화면마다 따로 쌓음 — 나가는 화면의 어둠 덮개(.tr-dim z 40)가 들어오는 화면 위로 올라와
     전환 끝에 들어온 화면이 한 번에 밝아지는 일이 없게 */
  isolation: isolate;
}
.tr-dim { position: absolute; inset: 0; z-index: 40; background: var(--ti-00); pointer-events: none; opacity: 0; }
.scroll {
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

/* ───────── 5. 단추 (모서리 2px 판 · 가는 화살표) ───────── */
.btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: 382px;
  height: 56px; padding: 0 22px;
  margin: 0 auto;
  border-radius: var(--r-btn);
  overflow: hidden;
  font: 600 15.5px/1 var(--f-serif);
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background-color 360ms var(--e-ink), color 360ms var(--e-ink), box-shadow 360ms var(--e-ink);
}
.btn::before { /* 누름 그늘 */
  content: ''; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none;
  transition: opacity var(--t-release) var(--e-silk);
}
.btn.is-down::before { opacity: .1; transition-duration: var(--t-press); transition-timing-function: var(--e-press); }
.btn .btn-t, .btn .btn-arrow { position: relative; transition: transform var(--t-release) var(--e-silk); }
.btn.is-down .btn-t, .btn.is-down .btn-arrow { transform: translateY(1px); transition-duration: var(--t-press); transition-timing-function: var(--e-press); }
.btn-arrow { flex: none; width: 22px; height: 8px; overflow: visible; }
.btn-arrow path { fill: none; stroke: currentColor; stroke-width: 1; }
@media (hover: hover) and (pointer: fine) {
  .btn:not([aria-disabled="true"]):not(.is-busy):hover .btn-arrow { transform: translateX(3px); transition: transform 320ms var(--e-silk); }
}
/* 종이 위 = 버건디 판 */
.btn-ink {
  color: var(--paper);
  background-color: var(--brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .16);
}
/* 초점 테: 종이 위 버건디 · 래커 위 크림 (글자색을 따르면 버건디 판의 크림 테가 종이에 묻혀 안 보임) */
.btn-ink:focus-visible { outline-color: var(--brand); }
.btn-cream:focus-visible { outline-color: var(--cream); }
/* 래커 위 = 크림 판 */
.btn-cream {
  color: var(--brand);
  background-color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .1);
}
/* 비활성 — 눌러지되(aria-disabled) 빠진 칸을 알려 줌 */
.btn-ink[aria-disabled="true"] { color: var(--ink-off); background-color: rgba(246, 239, 228, 0); box-shadow: inset 0 0 0 1px rgba(43, 20, 16, .28); }
.btn-cream[aria-disabled="true"] { color: var(--cream-3); background-color: rgba(242, 233, 221, 0); box-shadow: inset 0 0 0 1px var(--rule-on); }
.btn[aria-disabled="true"] { transition-duration: 240ms; }
/* 보조 (거의 안 씀) */
.btn-line { color: var(--brand); background: transparent; box-shadow: inset 0 0 0 1px var(--rule-ink); }
.lacquer .btn-line { color: var(--cream); box-shadow: inset 0 0 0 1px var(--rule-on); }
/* 진행 — 단추 안 아래 1px 선이 흐름 (도는 원 없음) */
.btn-run { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 240ms var(--e-ink); }
.btn-run::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: currentColor; opacity: .85; transform: translateX(-100%); }
.btn.is-busy { pointer-events: none; cursor: progress; }
.btn.is-busy .btn-run { opacity: 1; }
.btn.is-busy .btn-run::before { animation: run 1400ms var(--e-weight) infinite; }
.btn.is-busy .btn-arrow { opacity: 0; }
@keyframes run { from { transform: translateX(-100%); } to { transform: translateX(265%); } }

/* 글자 바뀜 — 나가는 글자(가짜 요소라 읽어 주지 않음)는 위로, 들어오는 글자는 아래에서 */
.sw { position: relative; display: inline-block; overflow: hidden; vertical-align: top; text-align: center; max-width: 100%; }
.sw-i { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn .sw { line-height: 1.45; }
.sw.is-swap .sw-i { animation: swIn 460ms var(--e-silk) both; }
.sw.is-swap::after {
  content: attr(data-out);
  position: absolute; left: 0; right: 0; top: 0;
  text-align: center; white-space: nowrap;
  animation: swOut 460ms var(--e-silk) both;
}
@keyframes swIn { from { transform: translateY(110%); opacity: 0; } 65% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes swOut { from { transform: none; opacity: 1; } 65% { opacity: 0; } to { transform: translateY(-110%); opacity: 0; } }

/* 체크 획 (펜으로 긋기) */
.tk { flex: none; width: 14px; height: 14px; overflow: visible; }
.tk path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 300ms var(--e-weight); }
.is-done .tk path, .tk.on path { stroke-dashoffset: 0; }
@keyframes tkDraw { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }

/* ───────── 6. 글자 링크 · 아이콘 단추 ───────── */
.lnk {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 0;
  font-size: 14.5px; font-weight: 500; line-height: 1.4; letter-spacing: -.005em;
  color: inherit;
  text-decoration: none;
  transition: opacity 320ms var(--e-silk);
}
.lnk::before { /* 밑줄 (가만히) — 글자 아래 4~5px · 잠깐 바뀐 글자(복사했어요)가 짧으면 가운데로 줄어듦 (--ul-k) */
  content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: var(--rule-ink); pointer-events: none;
  transform: scaleX(var(--ul-k, 1)); transition: transform 460ms var(--e-silk);
}
.lacquer .lnk::before { background: var(--rule-on); }
.lacquer .card .lnk::before, .lacquer .rv-sheet .lnk::before { background: var(--rule-ink); }
.lnk.bare::before { display: none; }
.lnk .ul { /* 밑줄 다시 긋기 */
  position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor;
  transform-origin: 0 50%; opacity: 0; pointer-events: none;
}
.lnk.is-down { opacity: .58; transition-duration: 80ms; transition-timing-function: var(--e-press); }
.lnk.redraw .ul { animation: ulDraw 420ms var(--e-silk) both; }
@keyframes ulDraw { from { transform: scaleX(0); opacity: .9; } 80% { opacity: .9; } to { transform: scaleX(1); opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .lnk:hover .ul { animation: ulDraw 420ms var(--e-silk) both; }
}
.lnk:focus-visible { outline: none; }
/* 초점 테는 사각 2px · 초점일 때 밑줄은 숨김 (테 아래 변과 밑줄이 두 겹으로 보이지 않게) */
.lnk:focus-visible > .sw { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 0; overflow: visible; }
.lacquer .lnk:focus-visible > .sw { outline-color: var(--cream); }
.lacquer .card .lnk:focus-visible > .sw, .lacquer .rv-sheet .lnk:focus-visible > .sw { outline-color: var(--brand); }
.lnk:focus-visible::before { opacity: 0; }
.lnk-arrow { width: 16px; height: 8px; overflow: visible; transition: transform 280ms var(--e-silk); }
/* 밑줄은 글자 아래에만 — 화살표(16+8) 아래로 늘어나지 않게 */
.lnk:has(> .lnk-arrow)::before, .lnk:has(> .lnk-arrow) > .ul { right: 24px; }
/* 복사 링크의 체크 획은 글자 오른쪽 바깥에 (숨어 있을 때 자리를 차지하지 않아 밑줄이 글자 폭과 같고, 나타나도 줄이 밀리지 않음) */
.lnk > .tk { position: absolute; left: var(--tk-l, calc(100% + 6px)); top: 50%; margin-top: -7px; pointer-events: none; }
.lnk-row .sep { transition: opacity 200ms var(--e-ink); }
.lnk-row .lnk.is-done + .sep { opacity: 0; }
/* 닿는 영역 44×44 — 짧은 글자 링크(복사·고치기·지우기)는 보이지 않는 판으로 넓힘 */
.lnk::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: max(100%, 44px); transform: translateX(-50%); }
.lnk-arrow path { fill: none; stroke: currentColor; stroke-width: 1; }
.lnk.is-down .lnk-arrow { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) { .lnk:hover .lnk-arrow { transform: translateX(3px); } }
.lnk-ink { color: var(--brand); }
/* 링크와 링크 사이 = 14 + 세로 머리카락 선 + 14 (세로선 없이 20+20 이면 링크 사이가 40px 로 벌어져 한 줄에 셋이 못 들어감) */
.lnk-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; }
.lnk-row .sep { flex: none; width: var(--hair); height: 11px; background: var(--hair-ink); }
.lacquer .lnk-row .sep { background: var(--hair-on); }
.lacquer .card .lnk-row .sep { background: var(--hair-ink); }

.icon-btn {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: inherit;
  transition: opacity var(--t-release) var(--e-silk);
}
/* 그림 18px · 선 1.25px (24 눈금 그림이라 1.25 × 24/18) */
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.667; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.is-down { opacity: .5; transition-duration: 80ms; transition-timing-function: var(--e-press); }

/* ───────── 7. 입력칸 (편지지 줄) ───────── */
.fld { position: relative; display: block; margin-top: 40px; }
.fld + .fld { margin-top: 28px; }
.fld-lab {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 600; line-height: 1.45;
  color: var(--ink-2);
  transition: color 240ms var(--e-ink);
}
.fld-lab em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.fld-box { position: relative; display: block; margin-top: 6px; }
.fld-in {
  display: block; width: 100%;
  height: 46px; padding: 0 30px 0 0; margin: 0;
  border: 0; border-radius: 0;
  background: transparent;
  font-family: var(--f-sans); font-weight: 500; font-size: 18px; line-height: 46px; letter-spacing: -.01em;
  color: var(--ink);
  caret-color: var(--brand);
  -webkit-appearance: none; appearance: none;
}
.fld-in::placeholder { color: var(--ink-hint); opacity: 1; transition: color 240ms var(--e-ink); }
.fld.xl .fld-in { height: 52px; line-height: 52px; font-size: 26px; letter-spacing: -.01em; }
.fld.lg .fld-in { height: 50px; line-height: 50px; font-size: 22px; letter-spacing: -.01em; }
.fld.num .fld-in, .fld-in.num { letter-spacing: .04em; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
/* 거울 글자: 새 글자가 3px 아래서 잉크처럼 스밈 (화면 읽기는 진짜 input 만) */
.fld-mir {
  position: absolute; left: 0; top: 0; right: 30px; height: 100%;
  pointer-events: none; overflow: hidden; white-space: pre;
  font: inherit; color: var(--ink);
  display: none;
}
.fld.mirror .fld-mir { display: block; font-family: var(--f-sans); font-weight: 500; font-size: 26px; line-height: 52px; letter-spacing: -.01em; }
.fld.lg.mirror .fld-mir { font-size: 22px; line-height: 50px; }
.fld.mirror.num .fld-mir { letter-spacing: .04em; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.fld.mirror:not(.plain) .fld-in { color: transparent; }
.fld.mirror:not(.plain) .fld-in::selection { color: transparent; background: rgba(124, 37, 26, .16); }
.fld.plain .fld-mir { display: none; }
.fld-mir span { display: inline-block; white-space: pre; }
.fld-mir .ink-in { animation: inkIn 240ms cubic-bezier(.2, .7, .2, 1) both; }
.fld-mir .dash-in { animation: dashIn 180ms var(--e-ink) both; }
@keyframes inkIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes dashIn { from { opacity: 0; } to { opacity: 1; } }
/* 통과 체크 */
.fld-ok { position: absolute; right: 2px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--brand); pointer-events: none; }
.fld-ok path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 360ms var(--e-weight); }
.fld.is-ok .fld-ok path { stroke-dashoffset: 0; }
/* 밑줄: 기본 1px · 초점 1.5px 버건디가 왼→오 · 떠나면 오른쪽으로 걷힘 */
.fld-line { position: relative; display: block; height: 1px; background: var(--rule-ink); }
.fld-line i {
  position: absolute; left: 0; right: 0; top: -.5px; height: 1.5px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 320ms var(--e-recede), background-color 260ms var(--e-silk);
}
.fld.is-focus .fld-lab { color: var(--brand); }
.fld.is-focus .fld-line i { transform: scaleX(1); transform-origin: 0 50%; transition: transform 420ms var(--e-silk), background-color 260ms var(--e-silk); }
.fld.is-err .fld-line i { transform: scaleX(1); background: var(--err); transition: transform 260ms var(--e-silk), background-color 260ms var(--e-silk); }
.fld.is-err .fld-lab { color: var(--err); }
.fld.is-off { opacity: .55; }
.f-err {
  margin-top: 10px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--err);
}
.f-err.in { animation: errIn 240ms var(--e-silk) both; }
.f-err.out { animation: errOut 180ms var(--e-ink) both; }
@keyframes errOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes errIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.f-hint, .f-note { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.f-note { margin: 0 0 4px; }

/* ───────── 8. 고르기 목록 (칩 대신) ───────── */
.pick { margin-top: 32px; box-shadow: 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.pick-row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px; padding: 0 2px 0 16px;
  text-align: left;
  font-size: 15px; line-height: 1.5; color: var(--ink);
  box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink);
  transition: color var(--t-micro) var(--e-weight);
  -webkit-user-select: none; user-select: none;
}
.pick-row::before { /* 고른 줄: 왼쪽 버건디 세로줄이 위→아래 */
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1.5px;
  background: var(--brand);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform var(--t-micro) var(--e-weight);
}
.pick-row .tk { width: 16px; height: 16px; color: var(--brand); }
/* 체크 획은 크기가 달라도 화면에서 1.5px (14 눈금 그림) */
.pick-row .tk path, .my-ok .tk path { stroke-width: 1.3125; }
.copy-cell .tk path { stroke-width: 1.615; }
.pick-row .tk path { transition-duration: var(--t-micro); }
.pick-row[aria-checked="true"], .pick-row[aria-pressed="true"] { color: var(--brand); }
.pick-row[aria-checked="true"]::before, .pick-row[aria-pressed="true"]::before { transform: scaleY(1); }
.pick-row[aria-checked="true"] .tk path, .pick-row[aria-pressed="true"] .tk path { stroke-dashoffset: 0; }
.pick-row:focus-visible { outline-offset: -2px; border-radius: 0; }
.pick-row::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity var(--t-release) var(--e-silk); }
.pick-row.is-down::after { opacity: .04; transition-duration: var(--t-press); }
.pick.sm { margin-top: 12px; }
.pick.sm .pick-row { min-height: 48px; font-size: 14.5px; }
/* 고른 뒤 펼쳐지는 칸 */
.reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--e-silk); }
.reveal > div { min-height: 0; overflow: hidden; }
.reveal.open { grid-template-rows: 1fr; }
.reveal > div > .fld:first-child { margin-top: 24px; }

/* ───────── 9. 체크 (동의) ───────── */
.ck { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 48px; padding: 13px 0; cursor: pointer; }
.ck-in { position: absolute; left: 0; top: 12px; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.ck-box { position: relative; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--r-box); box-shadow: inset 0 0 0 1px var(--rule-ink); color: var(--brand); transition: box-shadow var(--t-micro) var(--e-ink); }
.ck-box svg { position: absolute; inset: -3px; width: 26px; height: 26px; }
.ck-box path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 180ms var(--e-recede); transition-delay: 0ms; }
.ck-in:checked + .ck-box { box-shadow: inset 0 0 0 1px var(--brand); }
.ck-in:checked + .ck-box path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-micro) var(--e-weight); transition-delay: var(--stg, 0ms); }
.ck-in:focus-visible + .ck-box { outline: 2px solid var(--brand); outline-offset: 3px; }
.ck-t { font-size: 15px; line-height: 1.5; color: var(--ink-2); transition: color var(--t-micro) var(--e-ink); }
.ck-t em { margin-left: 8px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--brand); }
.ck-in:checked ~ .ck-t { color: var(--ink); }
.ck-all { margin-top: 32px; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.ck-all .ck-t { font-family: var(--f-serif); font-weight: 600; font-size: 16px; }
.ck-list { margin-top: 4px; }
.ck-row { box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
/* '개인정보 … 동의'와 '전문 보기'의 글자 바닥선을 맞춤 (글자 크기가 달라 위끝 맞춤이면 1.5px 어긋남) */
.ck-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ck-t { align-self: baseline; }
.ck-more { flex: none; font-size: 13.5px; color: var(--ink-2); padding: 12px 0; }
.pm { position: relative; flex: none; width: 9px; height: 9px; }
.pm::before, .pm::after { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: currentColor; }
.pm::after { transform: rotate(90deg); transition: transform 320ms var(--e-silk); }
[aria-expanded="true"] > .pm::after { transform: rotate(0deg); }
.ck-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--e-silk); }
.ck-detail.open { grid-template-rows: 1fr; }
.ck-detail-in { min-height: 0; overflow: hidden; }
.ck-detail dl {
  margin: 0 0 14px; padding: 14px 16px 10px;
  background: var(--paper-2);
  box-shadow: inset 0 var(--hair) 0 var(--hair-ink);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 240ms var(--e-ink), transform 320ms var(--e-silk);
}
.ck-detail.open dl { opacity: 1; transform: none; transition-delay: 60ms; }
.ck-detail .row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 4px 0; }
.ck-detail dt { font-size: 12px; font-weight: 600; line-height: 1.6; color: var(--ink-2); }
.ck-detail dd { font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.ck-age { padding-bottom: 12px; }
.ck-note { margin: -4px 0 0 34px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.ck-help { margin-top: 16px; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.policy { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lacquer .policy { color: var(--cream); }

/* ───────── 10. 진행 표시 ───────── */
/* 신청서 6칸 — 자 눈금 */
.ruler { position: relative; display: flex; gap: 5px; height: 12px; align-items: center; }
.ruler i { display: block; width: 14px; height: 1px; background: var(--hair-ink); transition: background-color 460ms var(--e-weight); }
.ruler i.past { background: var(--ink-3); }
.ruler b { position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; margin-top: -.75px; background: var(--brand); transition: transform 460ms var(--e-weight); }
.lacquer .ruler i { background: var(--hair-on); }
.lacquer .ruler i.past { background: var(--cream-3); }
.lacquer .ruler b { background: var(--cream); }
/* 스토리 7장 — 1px 머리카락 7칸 */
.st-prog { display: flex; gap: 4px; }
.st-prog > span { position: relative; flex: 1; height: 1px; background: var(--hair-ink); overflow: hidden; }
.st-prog > span > i { position: absolute; inset: 0; background: var(--ink); opacity: .82; transform: scaleX(0); transform-origin: 0 50%; }
.st-prog > span.past > i { transform: scaleX(1); }
.st-prog > span.now > i { transform: scaleX(1); transition: transform 600ms var(--e-silk); }

/* ───────── 11. 종이 카드 · 안내 줄 · 시간표 · 확인표 · 링크 복사 줄 ───────── */
.card {
  position: relative;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain);
  background-size: 220px 220px;
  border-radius: var(--r-card);
  box-shadow: var(--sh-paper);
  padding: 32px 28px;
}
.table .card { box-shadow: var(--sh-table); }
.card-h { font: 500 19px/1.45 var(--f-serif); letter-spacing: -.015em; color: var(--ink); }
.card-h3 { margin-top: 28px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.hr { display: block; height: var(--hair); background: var(--hair-ink); border: 0; margin: 0; }
.lacquer .hr { background: var(--hair-on); }

/* 안내 줄 (토스트 대신) — 위아래 머리카락 선, 그림 없음 */
.notice {
  padding: 12px 0;
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink);
  box-shadow: inset 0 var(--hair) 0 var(--hair-ink), inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink);
}
.notice.in { animation: noteIn 320ms var(--e-silk) both; }
@keyframes noteIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.notice.out { animation: noteOut 200ms var(--e-ink) both; }
@keyframes noteOut { to { opacity: 0; } }
.lacquer .notice { color: var(--cream); box-shadow: inset 0 var(--hair) 0 var(--hair-on), inset 0 calc(-1 * var(--hair)) 0 var(--hair-on); }
.notice b { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.lacquer .notice b { color: var(--cream-3); }
.notice.is-err { color: var(--err); }
.lacquer .notice.is-err { color: var(--err-on); }

/* 시간표 (내 체험단 진행 상황) */
.trk { position: relative; margin-top: 20px; padding-left: 30px; }
.trk::before { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 1px; background: var(--hair-ink); }
.trk-line { position: absolute; left: 6px; top: 12px; width: 1px; height: var(--trk-h, 0px); background: var(--brand); transform-origin: 50% 0; }
.trk-line.draw { animation: trkDraw 900ms var(--e-weight) both; }
@keyframes trkDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.trk li { position: relative; display: flex; gap: 12px; padding: 4px 0 18px; }
.trk li:last-child { padding-bottom: 2px; }
.trk-dot { position: absolute; left: -29px; top: 9px; width: 13px; height: 13px; display: grid; place-items: center; }
.trk-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-ink); background: var(--paper); }
.trk-done .trk-dot::before { background: var(--brand); box-shadow: none; }
.trk-now .trk-dot::before { width: 13px; height: 13px; box-shadow: inset 0 0 0 1.5px var(--brand); background: var(--paper); }
.trk-now .trk-dot::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.trk-now.pop .trk-dot::after { animation: dotIn 420ms var(--e-silk) both; }
@keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } }
.trk-cancel .trk-dot::before { width: 9px; height: 9px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-2); }
.trk-b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trk-b b { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.trk-now .trk-b b { color: var(--brand); }
.trk-next .trk-b b { color: var(--ink-2); }
.trk-b time { font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.trk-wait { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* 확인표 (④ 확인 · 내 체험단) */
.kv { margin-top: 16px; box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }
.kv-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 12px 0; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.kv-row dt { font-size: 12px; font-weight: 600; line-height: 1.6; color: var(--ink-3); }
.kv-row dd { font-size: 15px; line-height: 1.6; color: var(--ink); min-width: 0; text-wrap: balance; }
.kv-row dd small { display: block; font-family: var(--f-roman); font-weight: 500; font-size: 14px; letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: lining-nums; line-height: 1.3; }
.kv-row .lnk { align-self: baseline; margin: -12px 0; font-size: 13.5px; color: var(--ink-2); }
.kv-row .muted, .muted { color: var(--ink-3); }
/* 전화번호는 줄표에서 갈라지지 않게 */
.tel { white-space: nowrap; }
.rv-list .kv-row { min-height: 48px; align-items: center; }
.rv-list .kv-row dt, .rv-list .kv-row dd { align-self: baseline; }
.rv-list .kv-row .lnk { margin: -10px 0; align-self: center; }
/* 폰: 확인표 이름칸을 줄여 값 칸에 도로명 주소·전화번호 한 줄이 들어가게 */
@media (max-width: 430px) {
  .rv-list .kv-row { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; }
  .rv-list .kv-row dd { font-size: 14.5px; }
}
@media (max-width: 352px) {
  .kv-row { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 10px; }
  .rv-list .kv-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .rv-sheet { padding-left: 18px; padding-right: 18px; }
}

/* 링크 복사 줄 */
.copy-row {
  display: flex; align-items: stretch;
  min-height: 52px; margin-top: 16px;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 var(--hair) var(--rule-ink);
  background: rgba(255, 255, 255, .28);
}
.copy-row .link-url {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 9px 14px;
  font-size: 13px; line-height: 1.4; color: var(--ink-2);
  -webkit-user-select: all; user-select: all;
}
/* 호스트는 길면 앞에서 줄이고(폭이 모자라도 코드는 남게), '/i/코드' 는 줄바꿈·줄임표 없이 */
.copy-row .lu-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.copy-row .lu-path { white-space: nowrap; color: var(--ink); font-size: 14px; }
.copy-row .lu-code { font: 500 17px/1.2 var(--f-roman); letter-spacing: .08em; font-variant-numeric: lining-nums; color: var(--ink); }
.copy-cell {
  position: relative;
  flex: none; min-width: 108px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 16px;
  font-size: 13.5px; font-weight: 600; color: var(--brand);
  box-shadow: inset var(--hair) 0 0 var(--rule-ink);
}
.copy-cell::after { content: ''; position: absolute; inset: 0; background: var(--brand); opacity: 0; pointer-events: none; transition: opacity var(--t-release) var(--e-silk); }
.copy-cell.is-down::after { opacity: .07; transition-duration: 80ms; }
.copy-cell .tk { width: 13px; height: 13px; display: none; }
/* 아주 좁은 폰: 복사 단추를 주소 아래 줄로 (코드가 단추에 가리지 않게) */
@media (max-width: 374px) {
  .copy-row { flex-wrap: wrap; }
  .copy-row .link-url { flex: 1 1 100%; }
  .copy-cell { flex: 1 1 100%; min-height: 44px; box-shadow: inset 0 var(--hair) 0 var(--rule-ink); }
  .bare-link .copy-cell { box-shadow: inset 0 var(--hair) 0 var(--rule-on); }
}
.copy-cell.is-done .tk { display: block; }
.copy-cell.is-done .tk path { animation: tkDraw 300ms var(--e-weight) both; }

/* 고리 도장 */
.seal { position: relative; display: block; width: 52px; height: 52px; margin: 0 auto; color: var(--brand); }
.seal svg { width: 100%; height: 100%; }
body.intro-playing [data-seal] { visibility: hidden; }

/* ───────── 12. ① 초대장 ───────── */
.iv-scroll {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + 20px) calc(var(--gut) + var(--safe-r)) calc(var(--safe-b) + 12px + var(--test-pad)) calc(var(--gut) + var(--safe-l));
}
.iv-stage { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 8px 0 24px; }
.iv-tilt { width: 100%; max-width: 342px; perspective: 1200px; }
.iv-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 36px 28px 28px;
  text-align: center;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain);
  background-size: 220px 220px;
  border-radius: var(--r-card);
  box-shadow: var(--sh-paper);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 900ms var(--e-silk), opacity 240ms var(--e-ink);
  touch-action: pan-y;
}
.iv-card.is-follow { transition: transform 700ms var(--e-silk); }
.iv-gilt { position: absolute; inset: 9px; pointer-events: none; box-shadow: inset 0 0 0 var(--hair) var(--gilt); border-radius: 1px; }
/* 기울 때 금빛 테 위로 옅은 빛 (투명 .18 이하) */
.iv-gilt::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  background: radial-gradient(60% 40% at var(--gx, 50%) 0%, rgba(255, 244, 222, .9), rgba(255, 244, 222, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
  opacity: var(--go, 0); transition: opacity 900ms var(--e-silk);
}
.iv-card.is-follow .iv-gilt::after { transition-duration: 700ms; }
.iv-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; mix-blend-mode: soft-light; }
.iv-sheen i {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%;
  background: linear-gradient(90deg, rgba(255, 250, 240, 0), rgba(255, 248, 236, .42) 50%, rgba(255, 250, 240, 0));
  transform: translateX(-130%) skewX(-16deg);
  opacity: 0;
}
.iv-sheen.go i { animation: sheen 1100ms var(--e-sheen) both; }
@keyframes sheen { 0% { transform: translateX(-130%) skewX(-16deg); opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(400%) skewX(-16deg); opacity: 0; } }
.no-blend .iv-sheen { mix-blend-mode: normal; opacity: .4; }
.iv-card .seal { width: 52px; height: 52px; transform: translateY(-.5px); }
.iv-to { margin-top: 18px; display: flex; align-items: baseline; justify-content: center; gap: 8px; font: 500 19px/1.4 var(--f-serif); letter-spacing: -.015em; color: var(--ink); }
.iv-to .it { font-size: 20px; line-height: 1.2; color: var(--ink-2); transform: translateY(1px); }
.iv-rule { display: block; width: 24px; height: var(--hair); margin: 16px auto 0; background: var(--hair-ink); }
.iv-title { margin-top: 16px; max-width: 8.6em; font: 400 29px/1.36 var(--f-serif); letter-spacing: -.025em; color: var(--ink); }
.iv-vrule { display: block; width: var(--hair); height: 14px; margin: 18px auto 0; background: var(--hair-ink); }
.iv-gift { margin-top: 14px; color: var(--ink-2); }
.iv-product { margin-top: 10px; font: 500 19px/1.45 var(--f-serif); letter-spacing: -.015em; color: var(--ink); }
.iv-sig { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.iv-line { margin-top: 16px; max-width: 17em; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.iv-foot { margin-top: 26px; color: var(--ink-3); }
.iv-actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0; }
.iv-actions .notice { width: 100%; max-width: 382px; margin-bottom: 16px; }
.iv-actions .lnk-row { margin-top: 8px; font-size: 14.5px; color: var(--cream-2); }
.iv-actions .lnk { color: var(--cream-2); }
.is-veiled { opacity: 0; pointer-events: none; }

/* 상자를 여는 의식 (첫 방문) — 화면 위 겹 (#ritual) */
.ritual { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.ritual.on { pointer-events: auto; }
.rit-catch { position: absolute; inset: 0; z-index: 9; cursor: default; }
.rit-part { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.rit-part.rit-inv { will-change: auto; } /* will-change 를 걸면 처음 작은 배율로 굳혀 키워 씀 */
.rit-floor { z-index: 1; } .rit-wellwrap { z-index: 2; } .rit-inv { z-index: 3; } .rit-front { z-index: 4; } .rit-lidwrap { z-index: 5; } .rit-sheen { z-index: 7; }
.rit-floor { height: 40px; background: radial-gradient(closest-side, rgba(8, 1, 1, .55), rgba(8, 1, 1, .2) 60%, rgba(8, 1, 1, 0)); }
.rit-well { /* 상자 안쪽 (위에서 본 크림 종이 + 버건디 테 한 줄) */
  background: linear-gradient(180deg, #8A6E5E 0%, #CDB59E 30%, #E6D4C0 100%);
  box-shadow: inset 0 0 0 1px rgba(60, 20, 12, .35);
}
.rit-well::after { content: ''; position: absolute; inset: 4px 6px 2px; box-shadow: inset 0 0 0 1px rgba(116, 41, 31, .7); }
.rit-front { /* 상자 몸통 앞면 (뚜껑 안) */
  background: linear-gradient(180deg, #6A231A 0%, #5A1C14 100%);
  box-shadow: inset 0 1px 0 rgba(227, 196, 170, .55), inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.stripes {
  background-color: var(--stripe-b);
  background-image: repeating-linear-gradient(90deg, var(--stripe-b) 0 calc(100% / 9), var(--stripe-c) calc(100% / 9) calc(200% / 9));
}
.rit-lid-front { position: absolute; left: 0; bottom: 0; width: 100%; box-shadow: inset 0 -1px 0 rgba(30, 6, 4, .3), inset 0 1px 0 rgba(255, 255, 255, .14); overflow: hidden; }
.rit-lid-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .1)); pointer-events: none; }
.rit-lid-top { position: absolute; left: 0; width: 100%; transform-origin: 50% 100%; transform: perspective(700px) rotateX(64deg); overflow: hidden; }
.rit-lid-top::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .1)); }
.rit-wordmark {
  position: absolute; left: 0; right: 0;
  font-family: var(--f-geo); font-weight: 500; letter-spacing: .1em; text-indent: .1em;
  text-align: center; white-space: nowrap; line-height: 1;
  color: var(--wordmark);
}
.rit-target { position: absolute; left: 50%; border-radius: 50%; }
.rit-gleam { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: soft-light; }
.rit-gleam i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 36%; background: linear-gradient(100deg, rgba(255, 244, 228, 0), rgba(255, 244, 228, .5) 50%, rgba(255, 244, 228, 0)); transform: translateX(-140%) skewX(-14deg); }
.no-blend .rit-gleam { mix-blend-mode: normal; opacity: .36; }
/* 접힌 초대장 (복제 — 읽지 않음) */
/* 접힌 초대장: 펼침은 3D 회전 대신 2D 세로 뒤집기(scaleY = cos θ) + 접히는 면 그늘.
   3D(원근) 회전이 걸린 층은 커지는 동안 브라우저가 처음 작은 배율로 그린 그림을 키워 써서 글자가 계단처럼 깨진다 —
   2D 는 끝 배율(1)로 미리 그려 끝까지 선명하다. 앞면·뒷면은 투명도로 바꾼다 (2D 에는 뒷면 숨김이 없음) */
.rit-inv { transform-origin: 0 0; }
.rit-half { position: absolute; left: 0; width: 100%; }
.rit-top { top: 0; transform-origin: 50% 100%; }
.rit-bot { top: 50%; }
.rit-face { position: absolute; inset: 0; overflow: hidden; }
.rit-shade { position: absolute; inset: 0; background: #2B1410; opacity: 0; pointer-events: none; border-radius: inherit; }
.rit-top .rit-face.front { bottom: -1px; border-radius: var(--r-card) var(--r-card) 0 0; }
.rit-bot .rit-face { border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: 0 22px 44px -26px rgba(10, 2, 1, .6); }
.rit-face.back { transform: scaleY(-1); border-radius: 0 0 var(--r-card) var(--r-card); }
.rit-lay { position: absolute; left: 0; top: 0; box-shadow: none !important; transform: none !important; transition: none !important; }
.rit-bot .rit-lay { top: auto; bottom: 0; }
.rit-cover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--ink);
  background-color: #F1E7DA;
  background-image: var(--grain);
  background-size: 220px 220px;
}
.rit-cover::before { content: ''; position: absolute; inset: 9px 9px 0; box-shadow: inset 0 0 0 var(--hair) var(--gilt); }
.rit-cover .seal { width: 40px; height: 40px; margin: 0; }
.rit-cover .iv-to { margin: 0; }
/* 접힌 겉면의 'To.' 뒤 빈 줄 — 받는 분 이름은 펼친 안쪽에서 처음 쓰인다 */
.rit-blank { display: inline-block; width: 64px; height: var(--hair); background: var(--rule-ink); transform: translateY(-4px); }
.rit-crease { position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: linear-gradient(180deg, rgba(43, 20, 16, .05), rgba(255, 255, 255, .45)); pointer-events: none; }
.rit-sheen { position: absolute; overflow: hidden; pointer-events: none; mix-blend-mode: soft-light; border-radius: var(--r-card); }
.rit-sheen i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; background: linear-gradient(90deg, rgba(255, 250, 240, 0), rgba(255, 248, 236, .42) 50%, rgba(255, 250, 240, 0)); transform: translateX(-130%) skewX(-16deg); }
.no-blend .rit-sheen { mix-blend-mode: normal; opacity: .4; }
/* 인트로의 '건너뛰기'(intro.js .gz-skip)와 같은 자리·같은 밑줄 높이 — 인트로에서 의식으로 넘어갈 때 글자가 옆으로 튀지 않게 */
.rit-skip { position: absolute; z-index: 10; top: calc(var(--safe-t) + 6px); right: calc(20px + var(--safe-r)); color: var(--cream-2); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.rit-skip::before { background: var(--rule-on) !important; bottom: 13px; }
.rit-skip .ul { bottom: 13px; }

/* ───────── 13. ② 스토리 가이드 ───────── */
.story { --scr-bg: var(--paper); }
.story.is-table { --scr-bg: var(--table); }
.st-tablebg { position: absolute; inset: 0; background: var(--table); opacity: 0; transition: opacity 420ms var(--e-ink); pointer-events: none; }
.story.is-table .st-tablebg { opacity: 1; }
.st-top { position: relative; z-index: 3; flex: none; padding: var(--safe-t) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l)); }
/* 위 막대 아래 14px — 올라가는 글이 칼로 자른 듯 끊기지 않고 종이 속으로 사라지게 */
.st-top::before, .st-top::after, .paper > .ap-nav::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(180deg, var(--paper), rgba(246, 239, 228, 0));
  transition: opacity 420ms var(--e-ink);
}
/* 2장(탁자)으로 넘어갈 때 바탕이 바뀌는 420ms 동안 가장자리 색도 같이 바뀜 */
.st-top::before { background: linear-gradient(180deg, var(--table), rgba(200, 182, 162, 0)); opacity: 0; }
.story.is-table .st-top::before { opacity: 1; }
.story.is-table .st-top::after { opacity: 0; }
/* 쪽 번호 '2 / 7' 은 화면 한가운데 (양옆 링크 폭이 달라도 — 아래 7칸 눈금과 같은 가운데) */
.st-bar { height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.st-bar > .lnk:first-child { justify-self: start; }
.st-bar > .lnk:last-child { justify-self: end; }
.st-bar .lnk { min-width: 44px; padding-left: 12px; padding-right: 12px; font-size: 13.5px; color: var(--ink-2); }
.st-folio { color: var(--ink-2); }
.st-prog { margin: 0 12px; }
.st-deck { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
.st-card { position: absolute; inset: 0; display: flex; flex-direction: column; }
.st-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 32px calc(var(--gut) + var(--safe-r)) calc(120px + var(--safe-b) + var(--test-pad)) calc(var(--gut) + var(--safe-l));
}
.st-scroll::-webkit-scrollbar { display: none; }
.st-scroll { scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--cta-h, 100px) + 16px); }
.st-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  padding: 28px calc(var(--gut) + var(--safe-r)) calc(var(--safe-b) + 16px + var(--test-pad)) calc(var(--gut) - 10px + var(--safe-l));
  background: linear-gradient(180deg, rgba(246, 239, 228, 0), var(--scr-bg) 24px);
}
.story.is-table .st-bottom { background: linear-gradient(180deg, rgba(200, 182, 162, 0), var(--table) 24px); }
.st-bottom .icon-btn { color: var(--ink-2); }
.st-bottom .btn { flex: 1; margin: 0; }

/* 가이드 내용 (스토리 · 한 번에 보기 공용) */
.g-eyebrow { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }
.g-to { margin-top: 28px; display: flex; align-items: baseline; gap: 8px; font: 500 19px/1.4 var(--f-serif); color: var(--ink); }
.g-to .it { font-size: 20px; color: var(--ink-2); transform: translateY(1px); }
/* 1장(스토리) — 제목 대신 편지 머리 'To. ○○님' */
.g-to-h { margin-top: 32px; font-size: 23px; letter-spacing: -.015em; }
.g-to-h .it { font-size: 24px; }
.g-letter { margin-top: 28px; }
.g-title { margin-top: 12px; font: 500 25px/1.38 var(--f-serif); letter-spacing: -.02em; color: var(--ink); margin-left: -.04em; }
.g-title.display { font-weight: 400; font-size: 29px; line-height: 1.36; letter-spacing: -.025em; }
.g-text { margin-top: 24px; display: grid; gap: 14px; }
.g-text p, .g-lead { font-size: 16px; line-height: 1.68; color: var(--ink); }
.g-lead { margin-top: 20px; color: var(--ink-2); }
.g-sign { margin-top: 40px; padding-top: 24px; display: flex; align-items: center; gap: 14px; box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }
.g-sign .seal { margin: 0; width: 44px; height: 44px; }
.g-sign b { display: block; font: 500 16px/1.4 var(--f-serif); color: var(--ink); }
/* 자식 span 만 (안의 ‘따옴표 묶음’ span 까지 block 이 되면 ‘익숙한 새로움’ 뒤에서 줄이 끊겼음) */
.g-sign div > span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.g-sub { margin-top: 40px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.g-list { margin-top: 12px; box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }
.g-list > li { padding: 16px 0; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.g-list b { display: block; font: 500 16px/1.5 var(--f-serif); color: var(--ink); }
.g-list p { margin-top: 4px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.g-dash { margin-top: 12px; }
.g-dash li { position: relative; padding: 8px 0 8px 22px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.g-dash li::before { content: ''; position: absolute; left: 0; top: 19px; width: 12px; height: 1px; background: var(--ink-3); }
.g-rules { margin-top: 24px; counter-reset: r; box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }
.g-rules li { position: relative; padding: 14px 0; font-size: 15px; line-height: 1.65; color: var(--ink); box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.g-quote { margin-top: 32px; padding: 2px 0 2px 18px; box-shadow: inset 1px 0 0 var(--brand); hanging-punctuation: first; }
.g-quote p { font: 500 16px/1.7 var(--f-serif); color: var(--ink); }
.g-quote .q-k { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; font-family: var(--f-sans); }
.g-quote .lnk { margin-top: 4px; font-size: 13.5px; color: var(--brand); }
/* 담아 주실 것 ↔ 피해 주실 것 — 한 장의 펼침. 폰은 위아래(피해 주실 것은 옅은 종이 판), 넓은 판은 왼쪽·오른쪽 */
.g-spread { margin-top: 28px; display: grid; gap: 28px; }
.g-side { font: 500 16px/1.4 var(--f-serif); color: var(--brand); padding-bottom: 10px; }
.g-do .g-list { margin-top: 0; }
.g-dont { padding: 20px 18px 14px; background: var(--paper-2); box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }
.g-dont .g-side { color: var(--ink); }
.g-x { margin-top: 2px; }
/* 피해 주실 것: 줄표 대신 가는 엇갈린 획 두 개 (머리카락 굵기) */
.g-x li::before, .g-x li::after { content: ''; position: absolute; left: 1px; top: 19px; width: 11px; height: 1px; background: var(--ink-3); }
.g-x li::before { transform: rotate(45deg); }
.g-x li::after { transform: rotate(-45deg); }
.on-table .g-dont { background: rgba(246, 239, 228, .5); }
@media (min-width: 900px) and (min-height: 600px) {
  body.wide .g-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
}
.g-claims { margin-top: 12px; box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }
.g-claims li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.g-claims q { font: 500 15px/1.6 var(--f-serif); color: var(--ink); quotes: '“' '”'; }
.g-claims .lnk { flex: none; font-size: 13.5px; color: var(--brand); }
.g-tagline { position: relative; margin-top: 24px; font-size: 16px; line-height: 1.9; color: var(--ink); }
.g-tagline > span:not(.sweep) { white-space: nowrap; margin-right: .55em; }
.g-tagline .sweep { position: absolute; inset: -2px -6px; background: rgba(124, 37, 26, .12); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; opacity: 0; }
.g-tagline .sweep.go { animation: sweep 900ms var(--e-silk) both; }
@keyframes sweep { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.g-tagact { margin-top: 4px; justify-content: flex-start; }
.g-tagact .lnk { color: var(--brand); font-size: 14px; }
.g-note { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.g-sched { margin-top: 40px; }
.g-foot { margin-top: 40px; padding-top: 16px; font-size: 13px; line-height: 1.6; color: var(--ink-3); box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }

/* 2장 — 써까바 · 세트 사진 매트 · 박물관 캡션 */
.g-word { margin-top: 14px; font: 400 40px/1.2 var(--f-serif); letter-spacing: -.03em; color: var(--ink); margin-left: -.04em; }
.g-word-s { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.plate { margin-top: 32px; }
.mat {
  position: relative;
  padding: 10px;
  background-color: var(--cream);
  border-radius: 1px;
  box-shadow: var(--sh-table);
  max-width: 520px;
  margin: 0 auto;
}
.window { position: relative; overflow: hidden; aspect-ratio: 852 / 640; background: #C9B8A6; }
.window::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 var(--hair) rgba(43, 20, 16, .28); pointer-events: none; }
.window img { width: 100%; height: 100%; object-fit: cover; }
.callouts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.veil rect { fill: #1E0807; fill-opacity: 0; transition: fill-opacity 600ms var(--e-silk); }
.frame rect { fill: none; stroke: #FBF7F1; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset 900ms var(--e-weight); }
.plate[data-active="0"] .veil rect:not([data-k="0"]), .plate[data-active="1"] .veil rect:not([data-k="1"]), .plate[data-active="2"] .veil rect:not([data-k="2"]) { fill-opacity: .46; }
.plate[data-active="0"] .frame rect[data-k="0"], .plate[data-active="1"] .frame rect[data-k="1"], .plate[data-active="2"] .frame rect[data-k="2"] { stroke-dashoffset: 0; }
.plate figcaption { margin-top: 14px; text-align: center; }
.plate .lm-t { display: block; font: 500 14px/1.5 var(--f-serif); color: var(--ink); }
.plate .lm-s { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.flavors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; margin-top: 20px; box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }
.fl-cap {
  /* 세 칸의 무게(100g)를 같은 줄에 — 영문 이름이 두 줄이 되는 칸이 있어도 */
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 44px; padding: 14px 0 6px;
  text-align: left; color: var(--ink);
  transition: opacity 600ms var(--e-silk);
}
.fl-no { font-size: 13px; color: var(--ink-3); }
.fl-bar { display: block; width: 14px; height: 1.5px; margin: 12px 0 10px; background: var(--fc); }
.fl-name { font: 500 16px/1.4 var(--f-serif); letter-spacing: -.015em; color: var(--ink); }
.fl-en { margin-top: 6px; font-size: 10.5px; letter-spacing: .22em; line-height: 1.5; color: var(--ink-2); }
.fl-w { margin-top: auto; padding-top: 2px; font-size: 14px; color: var(--ink-2); }
.flavors[data-active="0"] .fl-cap:not([data-k="0"]), .flavors[data-active="1"] .fl-cap:not([data-k="1"]), .flavors[data-active="2"] .fl-cap:not([data-k="2"]) { opacity: .5; }
.howto { margin-top: 40px; display: grid; gap: 20px; }
.howto figure { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 16px; align-items: center; }
/* 그림의 흰 바탕을 지우는 곱하기(multiply)는 그림 칸 안에서만 — 장이 미끄러지는 동안(따로 묶인 층)에도 흰 네모가 번쩍이지 않게 바탕색을 칸에 직접 둔다 */
.howto-ph { display: block; width: 100%; padding: 0; transform-origin: 50% 90%; background-color: var(--paper); background-image: var(--grain); background-size: 220px 220px; isolation: isolate; }
.on-table .howto-ph { background-color: var(--table); background-image: none; }
.howto-ph img { width: 100%; height: auto; mix-blend-mode: multiply; }
.howto-ph.is-shake { animation: wrist 720ms var(--e-sheen); }
@keyframes wrist { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-2.2deg); } 45% { transform: rotate(2deg); } 70% { transform: rotate(-1.4deg); } 88% { transform: rotate(.6deg); } }
.howto figcaption { font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.howto figcaption .it { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); text-wrap: balance; }
.g-timeline { margin-top: 40px; box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }
.g-timeline li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 16px 0; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.tl-mark { font: 500 13px/1.6 var(--f-sans); color: var(--ink-2); padding-top: 1px; }
.tl-mark.latin { font: 500 17px/1.3 var(--f-roman); letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: lining-nums; }
.tl-body b { display: block; font: 500 15.5px/1.5 var(--f-serif); color: var(--ink); }
.tl-body p { margin-top: 2px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* ───────── 14. ③ 신청서 · 배송지 고치기 ───────── */
.ap-nav {
  position: relative; z-index: 3;
  flex: none;
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  height: calc(56px + var(--safe-t));
  padding: var(--safe-t) calc(6px + var(--safe-r)) 0 calc(6px + var(--safe-l));
}
.ap-nav .icon-btn { margin-left: 2px; color: var(--ink-2); }
.lacquer .ap-nav .icon-btn { color: var(--cream-2); }
.ap-prog { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ap-count { min-width: 40px; color: var(--ink-2); white-space: nowrap; }
.lacquer .ap-count { color: var(--cream-2); }
.ap-title { text-align: center; font: 500 16px/1 var(--f-serif); color: var(--ink); }
.ap-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px calc(var(--gut) + var(--safe-r)) calc(150px + var(--safe-b) + var(--test-pad)) calc(var(--gut) + var(--safe-l));
  scroll-padding-top: 16px;
  scroll-padding-bottom: calc(var(--cta-h, 100px) + var(--kb) + 16px);
}
/* 키보드가 열리면(아이폰처럼 화면 높이는 그대로) 단추판이 키보드 위로 올라온 만큼 스크롤 여유를 늘려, 입력 중인 칸을 단추판 위로 올릴 수 있게 */
body.kb-open .ap-scroll { padding-bottom: calc(var(--kb) + var(--cta-h, 100px) + 16px); }
.ap-scroll::-webkit-scrollbar { display: none; }
.ap-stage { position: relative; }
.ap-q.out { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.trail { display: flex; align-items: baseline; gap: 10px; min-height: 44px; margin-top: -4px; }
.trail .micro { flex: none; white-space: nowrap; color: var(--ink-3); } /* 칸 이름(SNS·주소)은 줄지 않게 — 값이 길면 값이 다음 줄로 접힘 */
.trail .lnk { justify-content: flex-start; min-width: 0; max-width: 100%; font-size: 13.5px; color: var(--ink-2); }
.trail .lnk .sw { max-width: 100%; text-align: left; }
/* 앞 칸 요약은 말줄임 없이 접힘 — 30자 SNS 아이디(띄어쓰기 없음)도 끝까지 보이게 (아무 데서나 끊어 다음 줄) */
.trail .lnk .sw-i { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.trail.in { animation: trailIn 420ms var(--e-silk) both; }
@keyframes trailIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.q-title { margin-top: 12px; font: 500 25px/1.38 var(--f-serif); letter-spacing: -.02em; color: var(--ink); margin-left: -.04em; }
.q-title .q-opt { margin-left: 10px; font: 600 12px/1 var(--f-sans); letter-spacing: 0; color: var(--ink-3); vertical-align: middle; }
.q-sub { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
/* 주소 */
.addr-find {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px; margin-top: 40px; padding: 0 16px;
  border-radius: var(--r-btn);
  text-align: left; font-size: 15px; color: var(--ink);
  box-shadow: inset 0 0 0 var(--hair) var(--rule-ink);
}
.addr-find svg { width: 22px; height: 8px; flex: none; transition: transform 280ms var(--e-silk); }
.addr-find svg path { fill: none; stroke: currentColor; stroke-width: 1; }
.addr-find::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity var(--t-release) var(--e-silk); pointer-events: none; }
.addr-find.is-down::after { opacity: .04; transition-duration: var(--t-press); }
.addr-find.is-down svg { transform: translateX(3px); }
.addr-alt { margin-top: 12px; }
.addr-alt .lnk { color: var(--ink-2); font-size: 14px; }
.addr-pick { margin-top: 36px; padding: 2px 0 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.addr-pick .folio { display: block; color: var(--ink-2); }
.addr-road { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.addr-pick .lnk { margin-top: -10px; font-size: 13.5px; color: var(--ink-2); }
.addr-pick + .fld { margin-top: 28px; }

/* 아래 행동 자리 (키보드 위 12px) */
.ap-cta {
  position: absolute; left: 0; right: 0; z-index: 4;
  bottom: var(--kb);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 28px calc(var(--gut) + var(--safe-r)) calc(var(--safe-b) + 16px + var(--test-pad)) calc(var(--gut) + var(--safe-l));
  background: linear-gradient(180deg, rgba(246, 239, 228, 0), var(--paper) 24px);
}
.lacquer .ap-cta { background: linear-gradient(180deg, rgba(44, 11, 10, 0), var(--lq-bot) 24px); }
.ap-cta .lnk { align-self: center; color: var(--ink-2); font-size: 14px; margin-top: 4px; margin-bottom: -12px; }
.ap-cta .notice { margin-bottom: 14px; }
body.kb-open .ap-cta { padding-top: 12px; padding-bottom: 12px; background: var(--paper); }
body.kb-open .lacquer .ap-cta { background: var(--lq-bot); }

/* ───────── 15. ④ 확인 (래커 위 종이 한 장) ───────── */
.rv { padding-top: 12px; }
.rv .caps { color: var(--cream-3); }
.rv .q-title { margin-top: 12px; color: var(--cream); }
.rv .q-sub { color: var(--cream-2); }
.rv-sheet { margin-top: 28px; padding: 24px 22px 8px; }
.rv-list { box-shadow: none; margin-top: 0; }
.rv-list .kv-row:last-child { box-shadow: none; }
.rv-need { color: var(--err); font-size: 14px; }
.rv-note { margin-top: 20px; font-size: 13.5px; line-height: 1.65; color: var(--cream-2); }
.rv-fail { color: var(--cream); }
/* 래커 위 종이 한 장: 아래 단추 자리로 내려가는 종이는 어두운 띠를 덮어씌우지 않고 투명하게 사라짐 (위 막대 아래도 같게) */
.review .ap-cta { background: none; }
.review .ap-scroll { padding-bottom: calc(var(--cta-h, 100px) + 24px); }
.review .ap-scroll {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - var(--cta-h, 100px)), transparent calc(100% - var(--cta-h, 100px) + 28px));
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - var(--cta-h, 100px)), transparent calc(100% - var(--cta-h, 100px) + 28px));
}

/* ───────── 16. ⑤ 접수 완료 — 접고 봉인하기 ───────── */
.dn-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: calc(56px + var(--safe-t)); padding: var(--safe-t) calc(6px + var(--safe-r)) 0 calc(6px + var(--safe-l)); display: flex; align-items: center; }
.dn-nav .icon-btn { color: var(--cream-2); }
.dn-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: calc(var(--safe-t) + 64px) calc(var(--gut) + var(--safe-r)) calc(var(--safe-b) + 24px + var(--test-pad)) calc(var(--gut) + var(--safe-l));
}
.dn-scroll::-webkit-scrollbar { display: none; }
.dn-stage { position: relative; height: var(--stage-h, 260px); }
.dn-stage > * { position: absolute; }
.env { position: absolute; left: 50%; top: 0; width: var(--ew); height: var(--eh); margin-left: calc(var(--ew) / -2); }
.env-back { position: absolute; inset: 0; border-radius: 2px; background: #DCC6AF; box-shadow: inset 0 0 0 var(--hair) rgba(43, 20, 16, .2); }
.env-front { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.env-front svg { width: 100%; height: 100%; overflow: visible; }
.env-flap { position: absolute; left: 0; top: 0; width: 100%; height: 56%; z-index: 1; transform-origin: 50% 0; transform-style: preserve-3d; }
.env-flap.over { z-index: 4; }
.flap-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.flap-out { background: #E9D6C2; }
.flap-out::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(43, 20, 16, .08)); }
.flap-in { transform: rotateX(180deg); background-color: var(--stripe-b); background-image: repeating-linear-gradient(90deg, var(--stripe-b) 0 calc(100% / 9), var(--stripe-c) calc(100% / 9) calc(200% / 9)); }
.wax { position: absolute; z-index: 6; width: 64px; height: 64px; left: 50%; top: var(--wy, 50%); margin: -32px 0 0 -32px; opacity: 0; pointer-events: none; }
.wax svg { width: 100%; height: 100%; filter: drop-shadow(0 1.5px 1px rgba(20, 4, 3, .38)); }
.wax-ring { position: absolute; inset: -6px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(124, 37, 26, .55); opacity: 0; }
/* 편지 (신청서 종이 — 세 칸으로 접힘) */
.lt { position: absolute; left: 50%; top: var(--lt-top, 0); width: var(--lw); height: calc(var(--lp) * 3); margin-left: calc(var(--lw) / -2); z-index: 2; }
.lt-p { position: absolute; left: 0; width: 100%; height: var(--lp); transform-style: preserve-3d; }
.lt-p1 { top: 0; transform-origin: 50% 100%; z-index: 2; }
.lt-p2 { top: var(--lp); }
.lt-p3 { top: calc(var(--lp) * 2); transform-origin: 50% 0; z-index: 1; }
.lt-f { position: absolute; inset: 0; overflow: hidden; padding: 18px 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; color: var(--ink); background-color: var(--paper); background-image: var(--grain); background-size: 220px 220px; }
.lt-f.back { transform: rotateX(180deg); background-color: #EFE5D6; }
.lt-p1 .lt-f.front { border-radius: 3px 3px 0 0; }
.lt-p3 .lt-f.front { border-radius: 0 0 3px 3px; }
.lt-p2 .lt-f { box-shadow: 0 22px 44px -26px rgba(10, 2, 1, .6); }
.lt-sh { position: absolute; inset: 0; background: #2B1410; opacity: 0; pointer-events: none; }
.lt-title { font: 500 18px/1.4 var(--f-serif); color: var(--ink); }
.lt-sub { margin-top: 6px; color: var(--ink-3); }
.lt-row { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 13px; line-height: 1.5; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.lt-row:last-child { box-shadow: none; }
.lt-row dt { color: var(--ink-3); font-weight: 600; font-size: 12px; }
.lt-row dd { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-cover { display: flex; flex-direction: column; justify-content: center; padding-left: 26px !important; }
.lt-cover .env-to { display: flex; align-items: baseline; gap: 8px; }
.lt-cover .env-to .it, .lt-cover .env-from .it { font-size: 16px; color: var(--ink-2); }
.lt-cover .env-to .caps { color: var(--brand); }
.lt-cover .env-from { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; font: 500 15px/1.4 var(--f-serif); }
.dn-text { text-align: center; margin-top: 8px; }
.dn-text h1 { font: 400 29px/1.36 var(--f-serif); letter-spacing: -.025em; color: var(--cream); }
.dn-text p { margin: 12px auto 0; max-width: 21em; font-size: 15px; line-height: 1.65; color: var(--cream-2); }
.dn-scroll .my-link { margin-top: 32px; }
/* 접수 완료의 링크 안내 — 종이 카드 대신 래커 위 머리카락 선 사이 글 (주 단추만 크림 판) */
.bare-link { padding: 22px 2px 20px; color: var(--cream); box-shadow: inset 0 var(--hair) 0 var(--hair-on), inset 0 calc(-1 * var(--hair)) 0 var(--hair-on); text-align: center; }
.bare-link .my-link-t { color: var(--cream); }
.bare-link .my-link-p { color: var(--cream-2); }
.bare-link .copy-row { background: transparent; box-shadow: inset 0 0 0 var(--hair) var(--rule-on); text-align: left; }
.bare-link .copy-row .link-url { color: var(--cream-2); }
.bare-link .copy-row .lu-path, .bare-link .copy-row .lu-code { color: var(--cream); }
.bare-link .copy-cell { color: var(--cream); box-shadow: inset var(--hair) 0 0 var(--rule-on); }
.bare-link .copy-cell::after { background: var(--cream); }
.bare-link ::selection { background: #F2E9DD; color: #2B1410; }
.dn-actions { margin-top: 28px; }
.dn-actions .lnk-row { margin-top: 8px; color: var(--cream-2); }
.dn-actions .lnk { color: var(--cream-2); }
.dn-catch { position: absolute; inset: 0; z-index: 8; }
.dn-rise { opacity: 0; }
.dn-rise.in { animation: riseIn 520ms var(--e-silk) both; animation-delay: var(--d, 0ms); }
@keyframes riseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 내 체험단 링크 (접수 완료 · 내 체험단 공용) */
.my-link { color: var(--ink); }
.my-link-t { font: 500 17px/1.5 var(--f-serif); letter-spacing: -.015em; color: var(--ink); }
.my-link-p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* ───────── 17. ⑥ 내 체험단 ───────── */
.my-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: calc(var(--safe-t) + 20px) calc(var(--gut) - 6px + var(--safe-r)) calc(var(--safe-b) + 28px + var(--test-pad)) calc(var(--gut) - 6px + var(--safe-l));
}
.my-scroll::-webkit-scrollbar { display: none; }
.my-scroll > * + * { margin-top: 24px; }
.my-notes:empty { display: none; }
.my-notes .notice { margin-bottom: 8px; }
.my-head { text-align: center; padding-top: 36px; }
.my-head .seal { margin: 0 auto; }
.my-head .iv-to { margin-top: 16px; }
.my-head .caps { display: block; margin-top: 18px; color: var(--ink-2); }
.my-title { margin-top: 10px; font: 500 21px/1.45 var(--f-serif); letter-spacing: -.015em; color: var(--ink); }
.my-sub { margin: 8px auto 0; max-width: 19em; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.my-letter { padding-bottom: 32px; }
.my-letter .iv-rule { margin-top: 18px; }
.my-thanks { margin: 18px auto 0; max-width: 18em; display: grid; gap: 6px; }
.my-thanks p { font: 400 16px/1.75 var(--f-serif); letter-spacing: -.01em; color: var(--ink); }
.my-from { margin-top: 18px; display: flex; align-items: baseline; justify-content: center; gap: 8px; font: 500 15px/1.4 var(--f-serif); color: var(--ink-2); }
.my-from .it { font-size: 16px; }
.my-record > .lnk-row { justify-content: center; }
.my-rec-t { color: var(--cream-2); font-size: 14px; }
.my-rec-t .pm { margin-left: 2px; }
.my-record .reveal > div > * + * { margin-top: 16px; }
.my-record .reveal.open > div { padding-top: 8px; }
.my-early { justify-content: flex-start !important; }
.my-early .lnk { color: var(--brand) !important; }
.my-msg { padding: 24px 28px; }
.my-msg-k { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.my-msg-t { margin-top: 6px; font: 500 16px/1.65 var(--f-serif); color: var(--ink); }
.my-sec { padding-top: 28px; padding-bottom: 28px; }
.my-hint { margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.my-ok { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--brand); }
.my-ok .tk { width: 16px; height: 16px; }
.my-btn { margin-top: 20px; }
.my-sec .lnk-row { justify-content: flex-start; margin-top: 12px; }
.my-sec .lnk { color: var(--ink-2); font-size: 14px; }
.my-addr { margin-top: 8px; justify-content: flex-start !important; }
.my-addr .lnk { color: var(--brand) !important; }
/* 리뷰 주소 */
.posts { margin-top: 16px; box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }
.post { padding: 14px 0 6px; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.post.in { animation: riseIn 420ms var(--e-silk) both; }
.post-h { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--ink-3); }
.post-h time { font-variant-numeric: tabular-nums; font-weight: 500; }
.post-ok { margin-left: auto; color: var(--brand); }
.post-url { position: relative; display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink); text-decoration: none; word-break: break-all; }
/* 닿는 영역은 위아래로 보이지 않게 넓힘 (한 줄 주소도 44px — 줄 사이는 그대로) */
.post-url::after { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.post-acts { display: flex; justify-content: flex-end; min-height: 8px; }
.post-del { font-size: 13px !important; color: var(--ink-2) !important; }
.post-form { margin-top: 24px; }
.post-form > .micro { color: var(--ink-3); }
.post-form .fld { margin-top: 24px; }
.post-form .btn { margin-top: 16px; }
/* 줄 안에서 한 번 더 묻기 (창 띄우지 않음) */
.ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: 18px; row-gap: 0; padding: 2px 0; }
.ask.in { animation: askIn 280ms var(--e-silk) both; }
@keyframes askIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ask-q { flex: 1 1 100%; font-size: 13.5px; line-height: 1.6; color: var(--ink); text-align: right; }
.ask-q small { display: block; color: var(--ink-2); font-size: 13px; }
.ask .lnk { font-size: 13.5px; }
.ask .ask-yes { color: var(--err); }
.ask .ask-no { color: var(--ink-2); }
.my-foot { text-align: center; padding: 8px 0 0; }
.my-foot .ask { justify-content: center; }
.my-foot .ask-q { text-align: center; color: var(--cream); }
.my-foot .ask-q small { color: var(--cream-2); }
.my-foot .ask .ask-yes { color: var(--err-on); }
.my-foot .ask .ask-no { color: var(--cream-2); }
.my-contact { font-size: 13.5px; line-height: 1.6; color: var(--cream-2); }
.my-contact a { color: var(--cream); }
.my-cancel { color: var(--cream-3); font-size: 13.5px !important; }
.my-sign { margin-top: 28px; color: var(--cream-3); }

/* ───────── 18. 가이드 한 번에 보기 (#/all — 아래에서 올라오는 종이 시트) ───────── */
.all { border-radius: var(--r-card) var(--r-card) 0 0; }
.all-nav {
  position: relative; z-index: 3;
  flex: none;
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  height: calc(56px + var(--safe-t));
  padding: var(--safe-t) calc(6px + var(--safe-r)) 0 calc(6px + var(--safe-l));
  box-shadow: inset 0 calc(-1 * var(--hair)) 0 rgba(43, 20, 16, 0);
  transition: box-shadow 240ms var(--e-ink);
}
.all-nav.scrolled { box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--hair-ink); }
.all-nav h1 { text-align: center; font: 500 16px/1.3 var(--f-serif); color: var(--ink); }
.all-nav .icon-btn { color: var(--ink-2); }
.all-nav .print-btn { visibility: hidden; justify-self: end; }
.all-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* 부드러운 스크롤은 목차 누름(scrollTo smooth)에만 — 키보드 초점 이동은 바로 (초점이 단추판 뒤에 머물지 않게) */
  scrollbar-width: none;
  padding: 0 calc(var(--gut) + var(--safe-r)) calc(130px + var(--safe-b) + var(--test-pad)) calc(var(--gut) + var(--safe-l));
}
.all-scroll::-webkit-scrollbar { display: none; }
.all-scroll { scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--cta-h, 100px) + 16px); }
.all-body { max-width: 34em; margin: 0 auto; }
.all-toc { display: none; }
.all-hero { padding: 40px 0 48px; text-align: center; }
.all-hero .seal { width: 56px; height: 56px; }
.all-hero .caps { display: block; margin-top: 20px; color: var(--ink-2); }
.all-hero h2 { margin-top: 12px; font: 400 29px/1.36 var(--f-serif); letter-spacing: -.025em; color: var(--ink); }
.all-hero p { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.all-sec { padding: 48px 0; box-shadow: inset 0 var(--hair) 0 var(--hair-ink); content-visibility: auto; contain-intrinsic-size: auto 800px; }
.all-sec .g-title { font-size: 25px; }
.all-sec .g-title.display { font-size: 27px; }
.all-end { padding: 48px 0 8px; display: flex; justify-content: center; box-shadow: inset 0 var(--hair) 0 var(--hair-ink); }
.all-end .lnk { color: var(--brand); }
.all-foot { padding: 24px 0 0; text-align: center; color: var(--ink-3); }
.all-cta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 28px calc(var(--gut) + var(--safe-r)) calc(var(--safe-b) + 16px + var(--test-pad)) calc(var(--gut) + var(--safe-l));
  background: linear-gradient(180deg, rgba(246, 239, 228, 0), var(--paper) 24px);
}
@media (min-width: 900px) and (min-height: 600px) {
  body.wide .all-nav { grid-template-columns: 120px 1fr 120px; padding: 12px 32px 0; }
  body.wide .all-nav .print-btn { visibility: visible; }
  body.wide .all-scroll { padding-left: 48px; padding-right: 48px; scrollbar-width: thin; scrollbar-color: rgba(43, 20, 16, .28) transparent; }
  body.wide .all-scroll::-webkit-scrollbar { display: block; width: 8px; }
  body.wide .all-scroll::-webkit-scrollbar-thumb { background: rgba(43, 20, 16, .22); border-radius: 4px; }
  body.wide .all-doc { display: grid; grid-template-columns: 200px minmax(0, 34em); gap: var(--s-9); justify-content: center; }
  body.wide .all-body { margin: 0; }
  body.wide .all-toc { display: block; position: sticky; top: 40px; align-self: start; padding-top: 168px; }
  body.wide .all-toc a { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 12px 0 12px 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-decoration: none; transition: color 240ms var(--e-ink); }
  body.wide .all-toc a::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--hair-ink); transition: background-color 240ms var(--e-ink); }
  body.wide .all-toc a.on { color: var(--ink); }
  body.wide .all-toc a.on::before { width: 1.5px; background: var(--brand); }
  body.wide .all-toc .folio { color: var(--ink-3); font-size: 13px; }
  body.wide .all-hero h2 { font-size: 36px; }
  body.wide .all-cta { display: flex; justify-content: center; }
  body.wide .all-cta .btn { width: 382px; margin: 0; }
  body.wide .all-sec .g-text p, body.wide .all-sec .g-lead { font-size: 17px; }
}
@media (min-width: 900px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
  body.wide .all-toc a:hover { color: var(--ink); }
}

/* PC(마우스): 스크롤 막대를 가늘게 보여 줌 — 더 내려갈 글이 있다는 표시 (폰은 숨김 · LUXURY 10장)
   가운데 맞춘 화면은 양쪽에 같은 자리를 둬서(both-edges) 막대가 생겨도 카드가 한쪽으로 밀리지 않게 */
@media (hover: hover) and (pointer: fine) {
  .scroll, .st-scroll, .ap-scroll, .dn-scroll, .my-scroll {
    scrollbar-width: thin; scrollbar-color: rgba(43, 20, 16, .28) transparent;
  }
  .lacquer .scroll, .lacquer .ap-scroll, .dn-scroll, .my-scroll { scrollbar-color: rgba(242, 233, 221, .24) transparent; }
  .scroll, .dn-scroll, .my-scroll { scrollbar-gutter: stable both-edges; }
}

/* ───────── 19. 시트 (주소 찾기) · 알림 · 시험 표시 · 인트로 자리 ───────── */
.sheet { position: absolute; inset: 0; z-index: 30; }
.sh-dim { position: absolute; inset: 0; background: rgba(20, 4, 3, .5); }
.sh-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: min(86%, 720px);
  display: flex; flex-direction: column;
  border-radius: var(--r-card) var(--r-card) 0 0;
  color: var(--ink);
  background: var(--paper);
  padding-bottom: var(--safe-b);
}
.sh-head { display: flex; align-items: center; justify-content: space-between; padding: 8px calc(16px + var(--safe-r)) 8px calc(var(--gut) + var(--safe-l)); }
.sh-head h2 { font: 500 19px/1.4 var(--f-serif); letter-spacing: -.015em; }
.sh-head .lnk { color: var(--ink-2); font-size: 14px; padding-left: 8px; padding-right: 8px; }
.sh-body { position: relative; flex: 1; min-height: 0; margin: 0 calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l)); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 var(--hair) var(--hair-ink); }
.sh-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink-2); }
.sh-embed { position: absolute; inset: 0; z-index: 1; }
.sh-foot { display: flex; justify-content: center; padding: 4px 0 6px; }
.sh-foot .lnk { color: var(--ink-2); font-size: 14px; }

.testmark {
  position: absolute; left: 0; right: 0; z-index: 45;
  bottom: calc(var(--safe-b) + 2px);
  margin: 0;
  text-align: center;
  font-size: 12px; font-weight: 600; line-height: 14px; letter-spacing: 0;
  color: var(--cream-3);
  pointer-events: none;
}
.testmark.on-paper { color: var(--ink-3); }
body.is-test { --test-pad: 20px; }
body.kb-open .testmark { display: none; }

.intro-root { position: fixed; inset: 0; z-index: 60; }
.intro-root.cover { background: var(--ti-0); }
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--cream); background: var(--wall); font-size: 16px; }
.boot-err { padding: 40px 24px; color: var(--cream); text-align: center; }

/* ───────── 20. 안내 화면 (불러오는 중 · 초대받은 분만 · 틀린 링크 · 다시 시도) ───────── */
.nt .iv-card { padding: 40px 28px 32px; }
.nt .iv-title.nt-title { margin-top: 22px; max-width: 9.5em; font-weight: 500; font-size: 25px; line-height: 1.38; letter-spacing: -.02em; }
.nt .iv-line { margin-top: 14px; }
.nt .iv-actions { padding-top: 4px; }
.nt-wait { margin-top: 22px; font-size: 14.5px; color: var(--ink-2); }
.nt .seal.breathe { animation: breathe 1600ms var(--e-sheen) infinite alternate; }
@keyframes breathe { from { opacity: .4; } to { opacity: 1; } }
.nt-contact { margin-top: 12px; font-size: 13.5px; }
.nt-contact a { color: var(--brand); }

/* ───────── 21. 작은 화면 ───────── */
@media (min-height: 800px) {
  .iv-card { padding-top: 44px; padding-bottom: 32px; }
  .iv-title { font-size: 30px; }
  .iv-line { margin-top: 18px; }
  .iv-foot { margin-top: 30px; }
}
@media (max-height: 720px) {
  .iv-scroll { padding-top: calc(var(--safe-t) + 12px); }
  .iv-stage { padding: 0 0 16px; }
  .iv-card { padding: 26px 24px 22px; }
  .iv-card .seal { width: 44px; height: 44px; }
  .iv-to { margin-top: 12px; }
  .iv-rule { margin-top: 12px; }
  .iv-title { margin-top: 12px; font-size: 26px; }
  .iv-vrule { margin-top: 12px; height: 12px; }
  .iv-gift { margin-top: 10px; }
  .iv-product { margin-top: 8px; }
  .iv-line { margin-top: 12px; }
  .iv-foot { margin-top: 18px; }
  .q-title, .g-title { font-size: 23px; }
  .st-scroll { padding-top: 24px; }
  .fld { margin-top: 32px; }
}
/* 아주 작은 폰 (320×568 등): 초대장과 단추·링크 줄이 한 화면에 들게 — 여백만 조금씩 줄임 (글자 크기는 그대로) */
@media (max-height: 600px) {
  .iv-scroll { padding-top: calc(var(--safe-t) + 8px); padding-bottom: calc(var(--safe-b) + 6px + var(--test-pad)); }
  .iv-stage { padding: 0 0 12px; }
  .iv-card { padding: 22px 22px 18px; }
  .iv-card .seal { width: 40px; height: 40px; }
  .iv-to { margin-top: 10px; }
  .iv-rule { margin-top: 10px; }
  .iv-title { margin-top: 10px; }
  .iv-vrule { margin-top: 10px; height: 10px; }
  .iv-gift { margin-top: 8px; }
  .iv-product { margin-top: 6px; }
  .iv-line { margin-top: 10px; }
  .iv-foot { margin-top: 14px; }
  .iv-actions .lnk-row { margin-top: 2px; }
  .mark2 .mk-b { margin-top: 8px; }
}
/* 낮은 화면 (폰 가로 · 확대 200%): 아래 행동 자리를 줄여 읽을 자리를 남김 · 초대장은 장식을 접어 단추가 첫 화면에 */
@media (max-height: 500px) {
  .invite .iv-scroll { padding-top: calc(var(--safe-t) + 6px); }
  .invite .iv-stage { padding: 0 0 8px; }
  .invite .iv-card { padding: 16px 20px 14px; }
  .invite .iv-card .seal { width: 34px; height: 34px; }
  .invite .iv-to { margin-top: 6px; font-size: 16px; }
  .invite .iv-rule, .invite .iv-vrule, .invite .iv-gift, .invite .iv-sig, .invite .iv-line, .invite .iv-foot { display: none; }
  .invite .iv-title { margin-top: 6px; font-size: 22px; max-width: none; }
  .invite .iv-product { margin-top: 4px; font-size: 16px; }
  .invite .iv-actions .btn { height: 48px; }
  .invite .iv-actions .lnk-row { margin-top: 0; }
  .invite .iv-actions .notice { margin-bottom: 8px; padding: 8px 0; }
  .ap-cta, .all-cta { padding-top: 16px; padding-bottom: calc(var(--safe-b) + 10px + var(--test-pad)); }
  .st-bottom { padding-top: 16px; padding-bottom: calc(var(--safe-b) + 10px + var(--test-pad)); }
  .ap-cta .btn, .st-bottom .btn, .all-cta .btn { height: 48px; }
  .ap-scroll { padding-bottom: calc(110px + var(--safe-b) + var(--test-pad)); }
  .st-scroll { padding-bottom: calc(90px + var(--safe-b) + var(--test-pad)); padding-top: 20px; }
  .ap-nav, .all-nav { height: calc(48px + var(--safe-t)); }
  .st-bar { height: 44px; }
}
@media (max-width: 350px) {
  .iv-title { font-size: 26px; }
  .g-title, .q-title { font-size: 22px; }
  .g-word { font-size: 36px; }
}

/* ───────── 22. 움직임 줄이기 (기기 설정 · 주소 ?rm=1 → <html class="rm">) ───────── */
.rm *, .rm *::before, .rm *::after {
  animation-duration: 150ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
  transition-duration: 150ms !important; transition-delay: 0ms !important; transition-timing-function: linear !important;
  /* 줄일 때는 움직이지 않고 옅어지기만 — transition-property 기본값(all) 때문에 위치·크기(top·left·transform)까지
     150ms 동안 미끄러지던 것(예: 상자 그림이 내려앉음)을 막는다 */
  transition-property: opacity, color, background-color, border-color, box-shadow, fill, stroke, stroke-dashoffset, outline-color !important;
}
.rm .btn.is-busy .btn-run::before { animation: none !important; transform: none !important; width: 100%; opacity: .5; }
.rm .fld-mir .ink-in, .rm .fld-mir .dash-in, .rm .trail.in, .rm .f-err.in, .rm .notice.in, .rm .ask.in, .rm .post.in, .rm .dn-rise.in { animation-name: fadeOnly !important; }
.rm .sw.is-swap, .rm .sw.is-swap::after { animation: none !important; }
.rm .sw.is-swap::after { display: none; }
.rm .howto-ph.is-shake, .rm .g-tagline .sweep.go, .rm .iv-sheen.go i { animation: none !important; }
.rm .nt .seal.breathe { animation: none !important; }
.rm .trk-line.draw { animation: none !important; }
.rm .iv-card { transform: none !important; }
.rm .all-scroll { scroll-behavior: auto; }
.rm .iv-gilt::after { display: none; }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }

/* ───────── 23. 인쇄 (#/all) ───────── */
@media print {
  @page { margin: 14mm; }
  html, body { height: auto; overflow: visible; background: #fff; color: #000; }
  .stage, .device, .device-screen, #app, .screen, .all-scroll {
    position: static !important; height: auto !important; width: auto !important;
    overflow: visible !important; padding: 0 !important; margin: 0 !important;
    background: #fff !important; box-shadow: none !important; border-radius: 0 !important;
    display: block !important;
  }
  .stage-copy, .all-nav, .all-cta, .all-end, .all-toc, .sr-live, .testmark, .sheet, .intro-root, .ritual, .g-tagact, .g-quote .lnk, .g-claims .lnk { display: none !important; }
  .all-doc, .all-body { max-width: none; display: block !important; }
  .all-sec { break-before: page; padding: 0 0 12px; box-shadow: none; content-visibility: visible; }
  .mat, .card { box-shadow: none; }
  .paper, .card { background-image: none !important; }
}