/* ============================================================
   Spotlit — "Working Register"  /  app.css
   히어로 §INTAKE 검증 빌드. 이전 토큰 전부 폐기, 아래가 새 기준.
   ============================================================ */

/* ---- Tokens ---- */
:root {
  /* page */
  --paper:      #0F1011;   /* warm graphite */
  --paper-2:    #16181A;   /* 카드 더미(뒤) */
  --paper-3:    #1B1D1F;
  --bone:       #E6DFCE;   /* warm ivory text */
  --bone-mute:  #9C9583;
  --brass:      #C7913A;   /* 인쇄된 황동 — accent (다크 위) */
  --ink-blue:   #2E4D6B;
  --vermilion:  #C44530;

  /* manila intake card (밝은 등기 카드) */
  --card:       #E7E0CF;
  --card-ink:   #1B1C1A;
  --card-mute:  #595544;
  --card-rule:  rgba(27,28,26,0.22);
  --brass-ink:  #9A6F26;   /* 카드 위 brass 텍스트(대비 확보) */
  --brass-draw: #A8742A;   /* 카드 위 밑줄 그래픽 */

  /* type */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;

  /* rhythm */
  --gutter: clamp(1.25rem, 4.2vw, 3rem);
  --maxw:   78rem;
  --ease:   cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 미세 종이 결: 거의 안 보이는 수직 그레인 (무거운 텍스처/이미지 없이 LCP 보호) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(230,223,206,0.014) 0 1px, transparent 1px 3px);
  opacity: 0.6;
}

main, .foot { position: relative; z-index: 1; }
.rail { position: relative; z-index: 5; }   /* 언어 드롭다운이 hero 위로 떠야 함 */

/* ── 언어 정정 배너 ── */
.langhint {
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.6rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  border-bottom: 1px solid rgba(230,223,206,0.08);
  background: rgba(199,145,58,0.07);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--bone-mute);
  animation: lang-menu-in 160ms var(--ease);
}
.langhint[hidden] { display: none; }
.langhint__q { color: var(--bone); }
.langhint__cta {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.langhint__x {
  margin-left: auto;
  min-height: 28px;
  background: none;
  border: 0;
  padding: 0 0.3rem;
  font: inherit;
  line-height: 1;
  color: var(--bone-mute);
  cursor: pointer;
}
.langhint__cta:hover, .langhint__x:hover { color: var(--bone); }

input, button { font: inherit; color: inherit; }

::selection { background: var(--brass); color: var(--paper); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   레일 (상단 자오선)
   ============================================================ */
.rail {
  display: grid;
  /* 좌(마크)·우(섹션+언어+인증)는 콘텐츠 폭(auto), 가운데(좌표)만 신축 1fr.
     대칭 1fr 이면 우측 nav 가 좌측 폭에 묶여 EN/ES 긴 라벨이 줄바꿈됨. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.1rem, 2.6vw, 1.6rem) var(--gutter);
  border-bottom: 1px solid rgba(230,223,206,0.08);
}
.rail__mark {
  justify-self: start;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--bone);
  text-decoration: none;
}
.rail__reg { color: var(--brass); }
.rail__datum {
  justify-self: center;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--bone-mute);
}
/* 언어 선택 버튼 (아이콘) + 드롭다운 메뉴 */
.rail__langwrap {
  justify-self: end;
  position: relative;
}
.rail__langbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.55rem;
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--bone-mute);
  transition: color 0.18s, background-color 0.18s;
}
.rail__langbtn:hover,
.rail__langbtn[aria-expanded="true"] {
  color: var(--bone);
  background: rgba(230,223,206,0.04);
}
.rail__langicon { color: var(--brass); flex-shrink: 0; }
.rail__langcur { font-weight: 400; }
.rail__langcaret {
  color: var(--bone-mute);
  opacity: 0.7;
  transition: transform 0.18s var(--ease);
}
.rail__langbtn[aria-expanded="true"] .rail__langcaret { transform: rotate(180deg); }

.rail__langmenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  min-width: 10.5rem;
  background: var(--paper-2);
  border: 1px solid rgba(230,223,206,0.10);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  animation: lang-menu-in 140ms var(--ease);
}
.rail__langmenu[hidden] { display: none; }
@keyframes lang-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.rail__langmenu li { margin: 0; }
.rail__langmenu button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--bone-mute);
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.12s, color 0.12s;
}
.rail__langmenu button:hover,
.rail__langmenu button:focus-visible {
  background: rgba(230,223,206,0.06);
  color: var(--bone);
  outline: none;
}
.rail__langmenu button[aria-selected="true"] {
  color: var(--brass);
}
.rail__langmenu button[aria-selected="true"] .rail__langname::before {
  content: "✓";
  margin-right: 0.4em;
  color: var(--brass);
}
.rail__langcode {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--bone-mute);
  opacity: 0.7;
}

/* ============================================================
   히어로 — 비대칭 12-col
   ============================================================ */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

/* §라벨 */
.tag {
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  color: var(--brass);
}
.tag__sec { color: var(--brass); margin-right: 0.2em; }

/* 디스플레이 헤드라인 — 기본(KO) */
.hero__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.7rem, 7.4vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--bone);
  text-wrap: balance;
}
.hero__title .em { color: var(--brass); white-space: nowrap; }
/* 한국어는 어절(공백) 단위로 줄바꿈 — "웹사이트"·"붙여넣기" 같은 단어가
   글자 중간에서 끊기는 것을 방지. 헤드라인·서브헤드 모두 적용.
   띄어쓰기 없는 CJK(zh·ja)에는 적용하지 않음(글자 사이 줄바꿈이 자연스럽고,
   keep-all 시 오버플로 위험). */
html[lang="ko"] .hero__title,
html[lang="ko"] .hero__sub { word-break: keep-all; }

/* 라틴 문자권(영어·스페인어): Fraunces 고광학 serif, 강조어만 italic */
html[lang="en"] .hero__title,
html[lang="es"] .hero__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}
html[lang="en"] .hero__title .em,
html[lang="es"] .hero__title .em {
  font-style: italic;
  font-variation-settings: "opsz" 144;
}

.hero__sub {
  margin: 0;
  max-width: 42ch;
  color: var(--bone-mute);
  font-size: 1.1875rem;
  line-height: 1.7;
  text-wrap: pretty;   /* 마지막 줄 고아 단어 방지 — 전 언어 공통 */
}

/* ============================================================
   Address Card (시그니처) — 그래파이트 위 마닐라 등기 카드
   ============================================================ */
.hero__aside { width: 100%; }

.card {
  position: relative;
  width: 100%;
  max-width: 30rem;
  background: var(--card);
  color: var(--card-ink);
  border-radius: 2px;                 /* 직각에 가깝게 */
  padding: clamp(1.4rem, 3vw, 1.9rem);
  /* 뒤에 쌓인 인테이크 카드 더미(파이프라인 볼륨 암시) — 하드 오프셋 */
  box-shadow:
    7px 7px 0 -1px var(--paper-3),
    14px 14px 0 -2px var(--paper-2);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--card-rule);
}
.card__code {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--brass-ink);
}
.card__datum {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--card-mute);
}

/* brass 원형 인장 — 완료 시 우상단에 찍힘 */
.seal {
  position: absolute;
  top: -16px;
  right: -14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border: 1.5px solid var(--brass);
  border-radius: 50%;
  background: var(--card);
  color: var(--brass-ink);
  transform: scale(0);
  opacity: 0;
}
.seal.is-stamped {
  animation: stamp 90ms var(--ease) forwards;
}
@keyframes stamp {
  from { transform: scale(1.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.seal__mark { font-size: 1.1rem; line-height: 1; }
.seal__cap {
  margin-top: 2px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.42rem;
  letter-spacing: 0.14em;
}

/* 카운트다운 (stage ≥2) */
.countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  background: rgba(154, 111, 38, 0.08);
  border-left: 2px solid var(--brass-draw);
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--card-mute);
}
.countdown[hidden] { display: none; }   /* display:flex override 보정 */
.countdown__time {
  font-weight: 400;
  color: var(--brass-ink);
  font-variant-numeric: tabular-nums;
}
.countdown__suf { white-space: nowrap; }

/* 접수된 링크 줄 */
.entry {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--card-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry b { color: var(--brass-ink); font-weight: 400; margin-right: 0.4em; }

/* Stage 2: pitch — 가격/출시 컨텍스트 */
.pitch { margin: 0 0 1.4rem; }
.pitch__h {
  margin: 0 0 0.55rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--card-ink);
  text-wrap: balance;
}
html[lang="en"] .pitch__h,
html[lang="es"] .pitch__h {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.pitch__p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--card-mute);
}

/* Stage 3: pay */
.pay__h {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--card-mute);
}
.pay__amount {
  margin: 0 0 0.35rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(3.5rem, 9vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--card-ink);
  font-variant-numeric: tabular-nums;
}
.pay__line {
  margin: 0;
  font-size: 0.95rem;
  color: var(--card-ink);
}
.pay__rule {
  margin: 1rem 0 0.7rem;
  border: 0;
  border-top: 1px solid var(--card-rule);
}
.pay__regular {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--card-mute);
}
.pay__note {
  flex: 1 1 12rem;
  margin: 0;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--card-mute);
}

/* Stage 4: done */
.done__h {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--card-ink);
}
html[lang="en"] .done__h,
html[lang="es"] .done__h {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
}
.done__p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--card-mute);
}

/* 결제 진행 중 버튼 비활성 시각 */
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.btn[disabled]::after { content: ""; }

/* 슬립 전환 */
.slip { animation: slip-in 180ms var(--ease) both; }
@keyframes slip-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.slip__lead {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--card-ink);
}

/* 필드 */
.field__label {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--card-mute);
}

/* 한 줄 입력 + brass 잉크 밑줄 (시그니처 모션) */
.line { position: relative; }
.line__input {
  width: 100%;
  padding: 0.55rem 0 0.6rem;
  background: transparent;
  border: 0;
  color: var(--card-ink);
  font-size: 1.0625rem;          /* ≥16px iOS 줌 방지 */
  font-family: var(--sans);
  letter-spacing: -0.01em;
}
.line__input::placeholder { color: #8c876f; }
.line__input:focus { outline: none; }
.line__rule {
  display: block;
  height: 2.5px;
  background: var(--card-rule);
  border-radius: 1px;
  overflow: hidden;
}
.line__ink {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brass-draw);
  transition: width 220ms var(--ease);
}
.line:focus-within .line__ink { width: 100%; }

/* 행: 버튼 + 노트 */
.card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin-top: 1.15rem;
}

/* 버튼 — 직각, precision. brass 채움 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 1.3rem;
  background: var(--card-ink);
  color: var(--card);
  border: 0;
  border-radius: 2px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.16s, transform 0.12s var(--ease);
}
.btn::after { content: "→"; color: var(--brass); }
.btn:hover { background: #2a2b27; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 3px; }

.card__note {
  flex: 1 1 12rem;
  margin: 0;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.78rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--card-mute);
}

.field__err {
  margin: 0.8rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--vermilion);
}

.slip__done {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--card-ink);
}

.aside__foot {
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--bone-mute);
}

/* ============================================================
   Footer (히어로 검증용 최소)
   ============================================================ */
.foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) var(--gutter);
  border-top: 1px solid rgba(230,223,206,0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}
.foot__mark {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.18em;
}
.foot__line {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--bone-mute);
}
.foot__links {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.foot__links a { color: var(--bone-mute); text-decoration: none; transition: color 0.15s var(--ease); }
.foot__links a:hover { color: var(--bone); }

/* 레일 우측 묶음: 언어 선택 + 인증 */
.rail__right {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.4rem);
}

/* 우측 상단 인증 영역 (로그인/로그아웃) */
.rail__auth {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.rail__signin {
  background: none;
  border: 0;
  padding: 0 0 1px;
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--bone);
  border-bottom: 1px solid rgba(230, 223, 206, 0.35);
  transition: color 0.16s, border-color 0.16s;
}
.rail__signin[hidden],
.rail__user[hidden] { display: none; }
.rail__signin:hover { color: var(--brass); border-color: var(--brass); }
.rail__signin:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* 아바타+이메일 칩 (버튼) */
.rail__account { position: relative; }
.rail__user {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.rail__user:hover .rail__email,
.rail__user[aria-expanded="true"] .rail__email { color: var(--brass); }
.rail__user:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; }
.rail__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: rgba(199, 145, 58, 0.18);
  color: var(--brass);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  flex-shrink: 0;
}
.rail__email {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: var(--bone);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 계정 드롭다운 메뉴 */
.acct {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  min-width: 15rem;
  background: var(--card);
  color: var(--card-ink);
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.32);
  padding: 0.4rem 0;
  z-index: 30;
  animation: authm-in 140ms var(--ease) both;
}
.acct[hidden] { display: none; }
.acct__label {
  margin: 0;
  padding: 0.55rem 1rem 0.4rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--card-mute);
}
.acct__site,
.acct__item,
.acct__plan {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.55rem 1rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--card-ink);
  transition: background-color 0.12s;
}
.acct__site:hover,
.acct__item:hover,
.acct__plan:hover { background: rgba(27, 28, 26, 0.06); }
.acct__site:focus-visible,
.acct__item:focus-visible,
.acct__plan:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.acct__empty {
  margin: 0;
  padding: 0.2rem 1rem 0.5rem;
  font-size: 0.86rem;
  color: var(--card-mute);
}
.acct__plan {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin: 0.35rem 0;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  border-top: 1px solid var(--card-rule);
  border-bottom: 1px solid var(--card-rule);
}
.acct__plantitle { font-weight: 600; font-size: 0.92rem; }
.acct__plansub { font-size: 0.78rem; color: var(--card-mute); }
.acct__ico { color: var(--card-mute); flex-shrink: 0; }

/* 매직링크 로그인 모달 */
.authm {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.authm[hidden] { display: none; }
.authm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 11, 0.66);
  backdrop-filter: blur(2px);
}
.authm__panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  background: var(--card);
  color: var(--card-ink);
  border-radius: 2px;
  padding: clamp(1.5rem, 4vw, 2rem);
  box-shadow:
    7px 7px 0 -1px var(--paper-3),
    14px 14px 0 -2px var(--paper-2);
  animation: authm-in 180ms var(--ease) both;
}
@keyframes authm-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.authm__x {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--card-mute);
}
.authm__x:hover { color: var(--card-ink); }
.authm__title {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--card-ink);
}
.authm__desc {
  margin: 0 0 1.3rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--card-mute);
}
.authm__send {
  margin-top: 1.2rem;
  width: 100%;
  justify-content: center;
}
.authm__sentmail {
  color: var(--card-ink);
  font-weight: 600;
}

/* ============================================================
   스크롤 진입 (절제: opacity + 6px, 180ms, 1회)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 60ms; }
.reveal:nth-child(3) { transition-delay: 120ms; }

/* ============================================================
   §PLANS — 요금제 (랜딩 컨셉: 다크 + manila + brass + mono/serif)
   ============================================================ */
/* 섹션 바로가기 그룹 — 좁은 화면에선 레일 넘침 방지로 숨김(스크롤로 도달) */
.rail__sections {
  display: none;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
}
.rail__nav {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--bone);
  text-decoration: none;
  white-space: nowrap;            /* "How it works" / "Cómo funciona" 줄바꿈 방지 */
  border-bottom: 1px solid transparent;
  transition: color 0.16s, border-color 0.16s;
}
.rail__nav:hover { color: var(--brass); border-color: var(--brass); }

.pricing {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
  scroll-margin-top: 4.5rem;
}
.pricing__head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.pricing__head .tag { display: inline-flex; align-items: center; gap: 0.3rem; justify-content: center; }
.pricing__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 1.6rem;
  color: var(--bone);
}
.pricing__toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid rgba(230, 223, 206, 0.16);
  border-radius: 999px;
}
.pricing__per {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.42rem 1rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--bone-mute);
  transition: background-color 0.16s, color 0.16s;
}
.pricing__per.is-active { background: var(--bone); color: var(--paper); }

/* 한정 런칭: 평생 이용권 배너 + 카운트다운 */
.lt {
  max-width: 60rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;   /* 3개 플랜(매트릭스) 아래로 간격 */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  padding: clamp(1.4rem, 3.5vw, 2rem);
  background: linear-gradient(180deg, rgba(199, 145, 58, 0.12), rgba(199, 145, 58, 0.04));
  border: 1px solid rgba(199, 145, 58, 0.35);
  border-radius: 10px;
}
.lt .tag { color: var(--brass); margin-bottom: 0.6rem; }
.lt__title {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: var(--bone);
}
.lt__badge {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid rgba(199, 145, 58, 0.4);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--brass);
}
.lt__desc { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--bone-mute); }
.lt__side { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.lt__price { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.lt__was { font-family: var(--mono); font-size: 1rem; color: var(--bone-mute); text-decoration: line-through; }
.lt__now { font-family: var(--serif); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--bone); }
.lt__once { font-family: var(--mono); font-size: 0.72rem; color: var(--bone-mute); }
.lt__endsLabel {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-mute);
}
.lt__cd { display: flex; align-items: flex-start; gap: 0.35rem; }
.lt__cd[hidden] { display: none; }
.lt__cdbox {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.7rem;
  padding: 0.35rem 0.45rem;
  background: rgba(15, 16, 17, 0.5);
  border: 1px solid rgba(230, 223, 206, 0.12);
  border-radius: 6px;
}
.lt__cdbox b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.lt__cdbox i {
  margin-top: 2px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  color: var(--bone-mute);
}
.lt__cdsep { font-family: var(--mono); color: var(--bone-mute); margin-top: 0.55rem; }
.lt__endedMsg { margin: 0; font-family: var(--mono); font-size: 0.82rem; color: var(--brass); }
.lt__cta { width: auto; padding: 0 1.5rem; background: var(--brass); color: var(--paper); }
.lt__cta:hover { background: #d89e44; }

/* §SCOUT — 업체 찾기 (Pro+, 디자인 목업) */
.scout__app {
  max-width: 62rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  background: rgba(230, 223, 206, 0.03);
  border: 1px solid rgba(230, 223, 206, 0.10);
  border-radius: 12px;
  padding: clamp(0.9rem, 2.5vw, 1.4rem);
}
.scout__bar { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-bottom: 1rem; }
.scout__search {
  flex: 1 1 16rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: rgba(15, 16, 17, 0.6);
  border: 1px solid rgba(230, 223, 206, 0.14);
  border-radius: 8px;
  color: var(--bone-mute);
}
.scout__input { flex: 1; min-width: 0; background: none; border: 0; color: var(--bone); font-size: 0.9rem; }
.scout__input::placeholder { color: var(--bone-mute); }
.scout__filters { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.scout__chip {
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(230, 223, 206, 0.16);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--bone-mute);
  white-space: nowrap;
}
.scout__chip.is-on { background: rgba(199, 145, 58, 0.14); border-color: rgba(199, 145, 58, 0.4); color: var(--brass); }

.scout__grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
.scout__list { display: flex; flex-direction: column; gap: 0.7rem; }
.scout__card {
  padding: 0.85rem 1rem;
  background: rgba(15, 16, 17, 0.5);
  border: 1px solid rgba(230, 223, 206, 0.10);
  border-radius: 10px;
}
.scout__card.is-active { border-color: rgba(199, 145, 58, 0.45); background: rgba(199, 145, 58, 0.06); }
.scout__cardtop { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.scout__name { margin: 0; font-size: 1rem; font-weight: 600; color: var(--bone); }
.scout__rating { font-family: var(--mono); font-size: 0.72rem; color: var(--bone-mute); white-space: nowrap; }
.scout__rating i { font-style: normal; }
.scout__cardfoot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.65rem; }
.scout__noweb {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(196, 69, 48, 0.16);
  border: 1px solid rgba(196, 69, 48, 0.4);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  color: #e0876f;
}
.scout__make {
  background: none;
  border: 0;
  padding: 0 0 1px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--brass);
  border-bottom: 1px solid rgba(199, 145, 58, 0.4);
}
.scout__make::after { content: " →"; }
.scout__make:hover { color: #d89e44; border-color: #d89e44; }

.scout__map {
  position: relative;
  min-height: 280px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(230, 223, 206, 0.10);
  /* 지도 목업: 거리 그리드 + 미묘한 색면 (실제 구글맵은 Embed API 키 연결 시 교체) */
  background:
    radial-gradient(circle at 72% 70%, rgba(46, 77, 107, 0.18), transparent 42%),
    radial-gradient(circle at 25% 30%, rgba(199, 145, 58, 0.06), transparent 45%),
    repeating-linear-gradient(0deg, rgba(230, 223, 206, 0.05) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, rgba(230, 223, 206, 0.05) 0 1px, transparent 1px 38px),
    linear-gradient(160deg, #15171a, #101113);
}
/* 대각선 '강/도로' 한 줄 (목업 폴백용) */
.scout__map::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 46%, rgba(46, 77, 107, 0.35) 46% 52%, transparent 52%);
  pointer-events: none;
}
/* 실제 구글맵 임베드 (목업 배경 위에 덮음 — 임베드 차단되면 목업이 폴백) */
.scout__iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;                     /* 정적 스냅샷처럼 — 핀 위치 고정 */
  filter: saturate(0.92) brightness(0.94);  /* 다크 테마에 살짝 톤다운 */
}
.scout__pin {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brass);
  border: 2px solid var(--paper);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(199, 145, 58, 0.22);
}
.scout__pin--active { width: 18px; height: 18px; box-shadow: 0 0 0 6px rgba(199, 145, 58, 0.3); }
@media (min-width: 760px) {
  .scout__grid { grid-template-columns: 0.85fr 1.15fr; align-items: stretch; }
}
@media (min-width: 720px) {
  .lt { grid-template-columns: 1fr auto; align-items: center; gap: 2.5rem; }
  .lt__side { align-items: flex-end; text-align: right; }
}

/* 매트릭스 */
.ptable {
  max-width: 60rem;
  margin: 0 auto;
  overflow-x: auto;
}
.prow {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  align-items: center;
  min-width: 480px;
  border-top: 1px solid rgba(230, 223, 206, 0.10);
}
.prow--head { border-top: 0; }
.pcell {
  padding: 0.9rem 1rem;
  font-size: 1.02rem;
  color: var(--bone);
  text-align: center;
}
.pcell--feat {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bone-mute);
}
/* Pro 강조 컬럼 (연속 배경 틴트) */
.pcell--pro { background: rgba(199, 145, 58, 0.07); }
.prow--head .pcell--pro { border-radius: 8px 8px 0 0; }
.prow--cta .pcell--pro { border-radius: 0 0 8px 8px; }

.prow--head .pcell { padding: 0.4rem 1rem 1.1rem; align-self: end; }
.plan__name {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-mute);
  margin-bottom: 0.5rem;
}
.prow--head .pcell--pro .plan__name { color: var(--brass); }
.plan__price { display: inline-flex; align-items: baseline; }
.plan__amt { font-family: var(--serif); font-weight: 800; font-size: 2.25rem; color: var(--bone); }
.plan__per { font-family: var(--mono); font-size: 0.8rem; color: var(--bone-mute); margin-left: 0.15rem; }

.ptick { color: var(--brass); }
.pcross { color: var(--bone-mute); opacity: 0.45; }

.prow--cta .pcell { padding: 1.3rem 1rem 0.5rem; }
.pbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 1rem;
  background: var(--bone);
  color: var(--paper);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--sans);       /* mono→sans: 폭이 좁아 "Start 3-day free trial" 한 줄에 들어감 */
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0;
  white-space: nowrap;            /* 한 줄 유지 (넘침 방지) */
  transition: background-color 0.16s, transform 0.12s var(--ease);
}
.pbtn:hover { background: #fff; }
.pbtn:active { transform: translateY(1px); }
.pbtn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.pcell--pro .pbtn { background: var(--brass); color: var(--paper); }
.pcell--pro .pbtn:hover { background: #d89e44; }
.pbtn--ghost { background: transparent; color: var(--bone); border: 1px solid rgba(230, 223, 206, 0.25); }
.pbtn--ghost:hover { background: rgba(230, 223, 206, 0.08); border-color: var(--bone); }

/* 주기 토글 표시 제어 */
.pricing[data-period="yearly"] [data-period-val="monthly"] { display: none; }
.pricing[data-period="monthly"] [data-period-val="yearly"] { display: none; }

/* ============================================================
   §PROCESS · §WHY · §START — 일반 랜딩 섹션
   ============================================================ */
.lp {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
  scroll-margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.lp + .lp { padding-top: 0; }
.lp__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.lp__head .tag { display: inline-flex; align-items: center; gap: 0.3rem; justify-content: center; }
.lp__title {
  margin: 0.4rem 0 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-wrap: balance;
}
html[lang="ko"] .lp__title,
html[lang="ja"] .lp__title,
html[lang="zh"] .lp__title,
html[lang="hi"] .lp__title { font-family: var(--sans); letter-spacing: -0.03em; }
html[lang="ko"] .lp__title { word-break: keep-all; }
.lp__intro {
  margin: 1.1rem auto 0;
  max-width: 46ch;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--bone-mute);
  text-wrap: pretty;
}

/* How it works — 번호가 붙은 3-스텝 */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.5rem);
}
.step {
  position: relative;
  padding-top: 2.6rem;
  border-top: 1px solid rgba(230, 223, 206, 0.14);
}
.step__n {
  position: absolute;
  top: 1.1rem;
  left: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--brass);
}
.step__t {
  margin: 0 0 0.65rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.step__d {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--bone-mute);
}
html[lang="ko"] .step__t,
html[lang="ko"] .step__d { word-break: keep-all; }

/* Why — 특징 카드 3개 */
.feats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.feat {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper-2);
  border: 1px solid rgba(230, 223, 206, 0.08);
  border-radius: 5px;
}
.feat__t {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.feat__d {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--bone-mute);
}
html[lang="ko"] .feat__t,
html[lang="ko"] .feat__d { word-break: keep-all; }

/* FAQ — 자주 묻는 질문 (details/summary 아코디언) */
.faq__list { max-width: 48rem; margin: 0 auto; }
.faq__item { border-top: 1px solid rgba(230, 223, 206, 0.12); }
.faq__item:last-child { border-bottom: 1px solid rgba(230, 223, 206, 0.12); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  list-style: none;
  cursor: pointer;
  padding: 1.3rem 0.2rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brass); }
.faq__item[open] .faq__q { color: var(--brass); }
html[lang="ko"] .faq__q { word-break: keep-all; }
/* +/− 마커 (열리면 − 로) */
.faq__icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--brass);
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: 16px; height: 2px; }
.faq__icon::after {
  width: 2px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__a {
  padding: 0 0.2rem 1.4rem;
  max-width: 62ch;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--bone-mute);
}
.faq__a p { margin: 0; }
html[lang="ko"] .faq__a { word-break: keep-all; }

/* Start — 마무리 CTA */
.start { text-align: center; }
.start .tag { display: inline-flex; align-items: center; gap: 0.3rem; }
.bigcta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.8rem;
  min-height: 54px;
  padding: 0 1.9rem;
  background: var(--brass);
  color: var(--paper);
  border: 0;
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.94rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s, transform 0.12s var(--ease);
}
.bigcta::after { content: "→"; }
.bigcta:hover { background: #d89e44; }
.bigcta:active { transform: translateY(1px); }
.bigcta:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .feats { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   데스크탑 — 비대칭 2-col (헤드라인 좌 / 카드 우)
   ============================================================ */
@media (min-width: 860px) {
  .rail__sections { display: inline-flex; }
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    padding-top: clamp(4rem, 9vw, 7.5rem);
    align-items: center;
  }
  .hero__aside { justify-self: end; }
  .card { margin-right: 14px; }       /* 카드 더미 그림자 여백 */
}

/* ============================================================
   prefers-reduced-motion — 시그니처 포함 전부 정지/즉시
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq__icon::after { transition: none; }
  .line__ink { transition: none; }
  .line:focus-within .line__ink { width: 100%; }
  .slip { animation: none; }
  .seal.is-stamped { animation: none; transform: scale(1); opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   모바일 — 카드 더미 축소 (그림자 부담 ↓)
   ============================================================ */
@media (max-width: 520px) {
  .card { box-shadow: 5px 5px 0 -1px var(--paper-2); }
  .card__note { flex-basis: 100%; }
  /* 좁은 화면: 장식용 좌표·이메일 숨겨 레일 가로 넘침 방지 (로그인 시 아바타만) */
  .rail__datum { display: none; }
  .rail__email { display: none; }
}