/* DrazonChat 웹사이트 — D-3 "편지지" (Fable, 2026-10-17. 소유자가 "편지지 + 영수증·전후 그림" 바탕을 승인했다.
   tools/build_site.py가 site.css로 복사한다)
   호텔 편지지의 절제된 편집 디자인 (DESIGN.md 2장). 밝은 테마는 아이보리 종이(#F4EFE6)에 차콜 잉크, 금은 글자가 아니라
   선·마름모·인장·틀에만. 어두운 테마는 차콜 키 카드에 아이보리 글자, 금박 워드마크와 금박 주 버튼.
   큰 그림 없이 선·여백·서체로 급을 낸다. 그림자 없음, 테두리 반지름 3px.
   외부 요청 없음: 서체는 같은 폴더 fonts/의 부분 서체(OFL, tools/build_fonts.py)와 시스템 서체.
   규칙: 글자 4.5:1, 그래픽 3:1 이상. 밝은 바탕에 금색 글자를 쓰지 않는다. 뜻을 전하는 표시(마름모, 추천, 준비 중)는 배경색이 아니라
   테두리·글자·SVG로 그린다 (인쇄·고대비에서도 남게). */

/* ---------- 0. 브랜드 서체 (부분 서체, OFL. fonts/OFL-*.txt) ---------- */

@font-face {
  font-family: "Drazon Web Caps";             /* Cinzel 500, A–Z와 공백. 워드마크 "DRAZON CHAT" */
  src: url("fonts/DrazonWeb-Caps.woff") format("woff");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0020, U+0041-005A;
}
@font-face {
  font-family: "Drazon Web Numerals";         /* Cormorant Garamond 600, 라이닝 숫자와 , . $ / 공백. 가격·건수의 큰 숫자 */
  src: url("fonts/DrazonWeb-Numerals.woff") format("woff");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0020, U+0024, U+002C, U+002E-002F, U+0030-0039;
}

/* ---------- 1. 토큰 ---------- */

:root {
  color-scheme: light dark;

  /* 밝은 테마: 아이보리 편지지 */
  --paper: #F4EFE6;            /* IVORY. 종이 */
  --surface: #FBF9F4;          /* 카드·상자 */
  --sunk: #EBE5D9;             /* 비활성 버튼, 코드 */
  --ink: #181B24;              /* CHARCOAL. 본문 15.0:1 */
  --ink-soft: #5C574E;         /* 보조 글 6.3:1 */
  --line: #CFC4AF;             /* 편지지의 가는 괘선 1.5:1 (뜻을 전하지 않는 선) */
  --line-strong: #857F73;      /* 표 머리·버튼 테두리 3.5:1 */
  --gold-line: #A0804A;        /* GOLD_DEEP. 선·마름모·인장 링 3.2:1. 글자에 쓰지 않는다 */
  --card-line: rgba(160, 128, 74, .5);   /* 카드 틀 한 겹 (종이 위 실효색 #CAB898) */
  --brand-text: #181B24;
  --figure: #181B24;           /* 큰 숫자 (가격, 건수) */
  --index: #5C574E;            /* 행 번호 */
  --link: #181B24;
  --link-underline: #A0804A;
  --btn-bg: #181B24;
  --btn-fg: #F4EFE6;
  --btn-bg-hover: #30343F;
  --focus: #181B24;
  --check: #181B24;
  --missing-bg: #EED9A6;

  /* 뒤집은 키 카드 (밝은 테마의 추천 요금제와 휴대폰 바로 가기 칸): 종이 위에 놓인 룸 키 */
  --key-bg: #181B24;
  --key-ink: #F4EFE6;
  --key-soft: #B0ACA3;
  --key-line: #343947;
  --key-gold: #C9A96E;

  /* 금박 포일: 위가 밝고 아래가 짙다 (DESIGN.md 3.1). 금색 요소에만 */
  --foil: linear-gradient(#ECD8A8, #C9A96E 55%, #A0804A);
  --foil-hover: linear-gradient(#F4E4BC, #D6B87E 55%, #B0905A);

  /* 서체 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic",
               "Noto Sans KR", "Noto Sans CJK KR", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-caps: "Drazon Web Caps", "Cinzel", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-num: "Drazon Web Numerals", "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, "D2Coding", monospace;

  /* 크기: 홈 h1 30~46, 요금제 h1 28~36, h2 26, h3 20, 본문 16/1.75, 보조 14, 눈썹·꼬리표 13 */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-base: 16px;
  --fs-lead: 18px;
  --fs-h3: 20px;
  --fs-h2: 26px;
  --fs-h1: clamp(28px, 1.6vw + 20px, 36px);
  --fs-hero: clamp(30px, 2.2vw + 18px, 46px);
  --fs-price: clamp(36px, 1vw + 30px, 44px);
  --fs-fig: 24px;              /* 문장 속 큰 숫자. 세리프 숫자는 18px 아래에서 가늘어 본문 크기로 쓰지 않는다 */

  /* 배치 */
  --gutter: clamp(16px, 4vw, 40px);
  --page-max: 720px;           /* 긴 글 */
  --space-section: clamp(56px, 7vw, 96px);   /* 구역 사이 */
  --radius: 3px;
}

body.home { --page-max: 920px; }     /* 소개: 장부 세 칸 */
body.wide { --page-max: 1120px; }    /* 요금제: 카드 줄 */
body.checkout { --page-max: 960px; }  /* 결제: 두 칸 (2026-11-01) */

@media (prefers-color-scheme: dark) {
  :root {
    /* 어두운 테마: 차콜 키 카드 */
    --paper: #0F1117;
    --surface: #181B24;        /* CHARCOAL */
    --sunk: #222633;
    --ink: #F4EFE6;            /* IVORY 15.0:1 */
    --ink-soft: #B0ACA3;       /* IVORY_SOFT 7.6:1 */
    --line: #343947;           /* 1.6:1 */
    --line-strong: #7C7970;    /* 4.0:1 */
    --gold-line: #C9A96E;      /* GOLD 7.7:1. 어두운 바탕이라 글자에도 쓴다 */
    --card-line: rgba(201, 169, 110, .4);
    --brand-text: #C9A96E;
    --figure: #F4EFE6;
    --index: #C9A96E;
    --link: #C9A96E;
    --link-underline: rgba(201, 169, 110, .55);
    --btn-bg: #C9A96E;
    --btn-fg: #181B24;         /* 7.7:1 */
    --btn-bg-hover: #ECD8A8;
    --focus: #ECD8A8;
    --check: #C9A96E;
    --missing-bg: #5A4A26;
  }
}

/* 화면 언어 30개 (2026-10-20): 부분 서체 둘(워드마크 A–Z, 큰 숫자)은 라틴 글자뿐이라 그대로 두고, 본문 고딕은 시스템 서체를 쓴다.
   라틴(베트남어 등 확장 글자)·그리스·키릴 문자는 위 목록의 Segoe UI·San Francisco·Roboto가 가진다. 한자를 쓰는 일본어·중국어는
   그 언어의 서체를 한국어 서체보다 앞에 둔다(맑은 고딕의 한자 모양으로 그려지지 않게). 타이·데바나가리도 그 문자의 시스템 서체를
   앞에 둔다. 서체 파일을 더하지 않는다 (DESIGN.md 3.12 "화면 언어 30개").
   중국어는 윈도의 Microsoft YaHei·JhengHei(UI가 아닌 쪽)를 Segoe UI보다 앞에 둔다(2026-10-24): 뒤에 두면 굽은 따옴표 “ ”를 Segoe UI가
   좁은 라틴 모양으로 그렸다. UI 쪽(YaHei UI)도 따옴표가 Segoe UI와 같은 좁은 모양이라 UI가 아닌 쪽이어야 전각 따옴표가 된다.
   라틴 글자는 Segoe UI를 8.6% 키운 모양이라 중국어 윈도의 여느 화면과 같다. 줄임표 ……는 YaHei에서도 바닥에 붙는 글리프라 그대로다 */
:lang(ja) {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic",
               Meiryo, "Noto Sans JP", "Noto Sans CJK JP", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:lang(zh-CN) {
  --font-sans: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Segoe UI", "PingFang SC", "Hiragino Sans GB",
               "Noto Sans SC", "Noto Sans CJK SC", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:lang(zh-TW) {
  --font-sans: -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", "Segoe UI", "PingFang TC",
               "Noto Sans TC", "Noto Sans CJK TC", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:lang(th) {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Leelawadee UI", Leelawadee, Thonburi, "Noto Sans Thai UI", "Noto Sans Thai",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}
:lang(hi) {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Nirmala UI", "Kohinoor Devanagari", "Devanagari Sangam MN",
               "Noto Sans Devanagari", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. 바탕 ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  overflow-wrap: break-word;          /* 긴 주소·이메일이 화면 밖으로 나가지 않게 */
  -webkit-font-smoothing: antialiased;
}
:lang(ko) { word-break: keep-all; }   /* 한국어는 어절 단위로 줄을 바꾼다 */
/* 일본어·중국어 줄바꿈 (2026-10-24): 일본어는 엄격한 금칙(줄 첫머리에 장음 ー·작은 가나가 오지 않게)과 제목의 구절 단위 줄바꿈
   (auto-phrase는 Chromium 119+, 다른 브라우저는 보통 줄바꿈). 중국어 큰 제목은 띄어쓰기·문장부호에서만 바꾼다("用|各自的母语"처럼
   낱말 가운데서 끊기던 것). 넘칠 때는 body의 overflow-wrap이 그대로 막는다 */
:lang(ja) { line-break: strict; }
:lang(ja) :is(h1, h2) { word-break: auto-phrase; }
:is(:lang(zh-CN), :lang(zh-TW)) h1 { word-break: keep-all; }
/* lang 속성이 붙은 조각(언어 목록의 언어 이름, 영어로 채운 문구, 다른 언어 페이지의 한글 값)은 그 언어의 서체 목록으로 다시 고른다
   (--font-sans는 :lang()마다 다르다. 2026-10-20: 한국어 페이지의 "日本語"·"繁體中文"이 맑은 고딕의 한자로 그려졌다) */
[lang] { font-family: var(--font-sans); }

.wrap, main {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

img { max-width: 100%; height: auto; }
img.icon { width: 20px; height: 20px; vertical-align: -5px; margin: 0 2px; }   /* 봇의 금색 버튼 아이콘 (실물) */

.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;
}

/* 본문 건너뛰기: 포커스 때만 보인다 */
.skip-link {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

/* 인장: 차콜 원판 + 금 링(지름의 10%) + Cinzel 600의 D. <symbol id="seal">을 페이지마다 한 번 두고 <use>로 쓴다.
   링과 D는 currentColor라 테마의 금색을 따른다. 머리 24px(워드마크 18px, 캡 약 13px → 인장/캡 1.8), 꼬리 24px */
.seal {
  display: inline-block;
  width: 24px;
  height: 24px;
  color: var(--gold-line);
  flex: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 3. 머리 (인장 + 워드마크 + 메뉴 + 언어) ---------- */

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
  position: relative;                /* 언어 목록(.lang-list)이 머리 바로 아래에 펼쳐진다 */
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav lang";
  align-items: center;
  column-gap: 24px;
  min-height: 72px;
}

/* 워드마크: 인장 24px, 인장과 글자 사이 약 1.1캡, DRAZON과 CHAT 사이 +0.3em (DESIGN.md 3.7). 세로 패딩으로 터치 44px */
.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 10px 0;
  color: var(--brand-text);
  text-decoration: none;
  font-family: var(--font-caps);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
}
.brand-name { display: inline-block; transform: translateY(.04em); }   /* 세리프 대문자의 잉크 중심을 인장 중심에 */
.brand-name span { margin-left: .3em; }

@media (prefers-color-scheme: dark) {
  .brand-name {                      /* 어두운 바탕에서만 금박 글자 (짙은 끝 #A0804A도 5.2:1) */
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.site-nav { grid-area: nav; display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 24px; }
.site-nav a, .lang-switch > summary {
  display: inline-block;
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding: 12px 0;                   /* 터치 45px */
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a { padding-left: 6px; padding-right: 6px; margin: 0 -6px; }   /* 누를 곳 폭 44px 이상 (2026-10-18 QA), 글자 자리는 그대로 */
.site-nav a:hover, .lang-switch > summary:hover { color: var(--ink); }
/* 도움말의 짧은 이름(nav.support_short): 머리 메뉴 칸이 좁을 때만 ("Справка и поддержка" → "Помощь". 2026-10-24: 긴 언어에서 메뉴가
   두 줄이 되어 머리가 높아졌다. 휴대폰 360px 66쪽, 760px 66쪽, 본문 폭 720px인 도움말·결제 페이지는 1280px에서도 28쪽).
   좁을 때 = 880px 아래(소개·요금제의 머리 칸이 800px 아래) 또는 도움말·결제·법률 문서 페이지. 꼬리는 늘 긴 이름 */
.nav-short { display: none; }
:is(.doc, .checkout) .site-nav .nav-full { display: none; }
:is(.doc, .checkout) .site-nav .nav-short { display: inline; }
@media (max-width: 879px) {
  .site-nav .nav-full { display: none; }
  .site-nav .nav-short { display: inline; }
}
.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline 1px var(--gold-line);
  text-underline-offset: 8px;
}

/* 언어 고르기 (2026-10-20, 30개 언어): 스크립트 없는 <details>. 요약은 지구 아이콘 + 지금 언어 이름 + 마름모(◇ 닫힘, ◆ 열림. FAQ와 같은 문법),
   펼치면 머리 바로 아래에 언어 목록 상자(데스크톱 3열, 휴대폰 2열, 칸마다 44px). 그림자 없이 괘선 틀 */
.lang-switch { grid-area: lang; }
.lang-switch > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
  cursor: pointer;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::after {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-left: 3px;
  border: 1.5px solid var(--gold-line);
  transform: translateY(-1px) rotate(45deg);
}
.lang-switch[open] > summary { color: var(--ink); }
.lang-switch[open] > summary::after { background: var(--gold-line); }
.lang-switch .globe { width: 16px; height: 16px; flex: none; }
.lang-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: var(--gutter);
  width: min(34rem, calc(100% - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 8px;
  margin: 0;
  padding: 8px 12px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.lang-list a {
  display: block;
  padding: 11px 8px;                 /* 터치 44px */
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
}
.lang-list a:hover { text-decoration: underline 1px var(--gold-line); text-underline-offset: .22em; }
.lang-list a[aria-current] { font-weight: 600; text-decoration: underline 1px var(--gold-line); text-underline-offset: .22em; }

@media (max-width: 719px) {
  .site-header .wrap {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand lang" "nav nav";
    padding-top: 6px;
    min-height: 0;
  }
  .site-nav { justify-content: flex-start; column-gap: 20px; border-top: 1px solid var(--line); }
  .lang-switch > summary { padding-left: 0; border-left: 0; }
  .lang-list { left: var(--gutter); width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 좁은 휴대폰(480px 아래)은 워드마크 옆에 긴 이름("Português (Brasil)")이 들어가지 않아 가로로 넘쳤다: 지구 아이콘과 마름모만 두고
   (누를 곳 44px), 언어 이름은 요약의 aria-label("언어: 한국어")이 읽어 준다 */
@media (max-width: 479px) {
  .lang-switch .lang-name { display: none; }
  .lang-switch > summary { min-width: 44px; justify-content: flex-end; }
}

/* ---------- 4. 본문 글 ---------- */

main { padding-top: 40px; padding-bottom: 80px; }

h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1 {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 24px;
}
h1::after {                          /* 편지지 머리의 짧은 금선 (장식, 3.2:1) */
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 18px;
  background: var(--gold-line);
}
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; margin: 0 0 18px; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; margin: 0 0 8px; }

/* 긴 글(처리방침, 약관, 환불 정책, 도움말): 장마다 가는 괘선 */
.doc h2 { font-size: 22px; margin: 48px 0 12px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc h3 { font-size: var(--fs-base); line-height: 1.5; margin: 28px 0 8px; }

p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 600; }

a { color: var(--link); text-decoration: underline 1px var(--link-underline); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }
.link-block { display: inline-block; padding: 10px 0; }   /* 줄에 혼자 있는 링크: 터치 44px */

code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--sunk);
  border-radius: var(--radius);
  padding: .1em .35em;
  word-break: keep-all;           /* 한자·가나 하위 명령(/翻译 开启)이 글자 사이에서 끊기지 않게: 명령 안에서는 띄어쓰기에서만 (2026-10-24) */
}
.cmd { white-space: nowrap; }     /* 명령의 /와 묶음 이름(/번역)은 한 덩어리: / 뒤에서 줄이 바뀌지 않게 */

.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.65; margin: 0 0 28px; }

/* 눈썹 표제: 구역 이름은 작은 글 (DESIGN.md 3.9와 같은 논리) */
.eyebrow {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* 큰 숫자: 가격·건수의 세리프 라이닝 숫자 (카드의 아이보리 세리프 숫자와 같은 목소리). 24px 아래로 내리지 않는다 */
.fig {
  font-family: var(--font-num);
  font-size: var(--fs-fig);
  font-weight: 600;
  line-height: 1;
  color: var(--figure);
  font-variant-numeric: lining-nums tabular-nums;
  vertical-align: -.02em;
  letter-spacing: -.005em;
}

/* 목록: 속 빈 마름모 (◇ = 선택지와 내역, DESIGN.md 3.9). 글자가 아니라 도형 */
main ul { list-style: none; padding: 0; margin: 0 0 1em; --lh: 1.75; }
main ul > li { position: relative; padding-left: 1.4em; margin-bottom: .45em; }
main ul > li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: calc(var(--lh) * .5em - 3.5px);
  width: 7px; height: 7px;
  border: 1.5px solid var(--gold-line);
  transform: rotate(45deg);
}
main ol { padding-left: 1.4em; margin: 0 0 1em; }
main ol > li { margin-bottom: .45em; }
main ol > li::marker { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* 표 (긴 글): 세로선 없이 가는 가로선만 */
.table { overflow-x: auto; margin: 8px 0 24px; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); line-height: 1.65; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
th:last-child, td:last-child { padding-right: 0; }
th {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .04em;
  border-bottom: 1px solid var(--line-strong);
  padding-top: 0;
}
/* 휴대폰: 표의 칸에 data-label이 있으면 행마다 한 덩이로 쌓는다 (없으면 가로로 밀어 본다) */
@media (max-width: 599px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack table, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .table--stack tr:first-child { border-top: 1px solid var(--line-strong); }
  .table--stack td { border: 0; padding: 0 0 8px; }
  .table--stack td:last-child { padding-bottom: 0; }
  .table--stack td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: .04em;
  }
  .table:not(.table--stack) table { min-width: 32rem; }
}

.missing { background: var(--missing-bg); color: var(--ink); padding: 0 .25em; border-radius: 2px; outline: 1px dashed var(--gold-line); }

/* 준비 중 표시: 색이 아니라 테두리 글자. 마크업에서 앞에 공백을 둔다 (스크린 리더가 붙여 읽지 않게) */
.tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--ink-soft);
  vertical-align: .18em;
  white-space: nowrap;
}

.section { padding-top: var(--space-section); }

/* ---------- 5. 소개: 머리글과 장부 ---------- */

.hero { padding: 24px 0 0; }
.hero h1 { font-size: var(--fs-hero); line-height: 1.22; max-width: 17em; margin: 0 0 22px; }
.hero h1::after { content: none; }
.hero .lead { max-width: 34em; margin-bottom: 32px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.fineprint { max-width: 40em; margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-soft); }

/* 장부: 번호 | 이름과 한 문장 | 건수 (오른쪽 맞춤). 행 간격 32px */
.ledger-head {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 16rem;
  column-gap: 24px;
  align-items: end;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line-strong);
}
.ledger-head h2 { grid-column: 1 / 3; margin: 0; }
.ledger-head .r { grid-column: 3; text-align: right; margin: 0; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger > li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 16rem;
  column-gap: 24px;
  padding: 32px 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.ledger .no {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--index);
  font-variant-numeric: lining-nums tabular-nums;
  padding-top: 2px;
}
.ledger h3 { margin: 0 0 10px; }
.ledger p { margin: 0; max-width: 36em; line-height: 1.7; }
.ledger .count {
  text-align: right;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: none;
  padding-top: 2px;
}
.ledger .count small { display: block; font-size: var(--fs-xs); margin-top: 4px; }
.count-label { display: none; }
.ledger .figure { grid-column: 2 / 4; margin-top: 24px; }
/* 한국어 밖의 언어는 건수 문장이 길어("Paid: all four. Free: the first 14 days") 건수 열을 18rem으로 (데스크톱만. 휴대폰 규칙보다
   앞서지 않게 min-width 안에). 2026-10-20 30개 언어: 영어만이던 규칙을 한국어가 아닌 모든 페이지로 (번역 전에는 영어 문구가 보이고, 독일어·
   프랑스어 등도 영어만큼 길다) */
@media (min-width: 760px) {
  html:not(:lang(ko)) .ledger-head, html:not(:lang(ko)) .ledger > li { grid-template-columns: 3.5rem minmax(0, 1fr) 18rem; }
}

@media (max-width: 759px) {
  .ledger-head { grid-template-columns: minmax(0, 1fr); }
  .ledger-head h2 { grid-column: 1; }
  .ledger-head .r { display: none; }
  .ledger > li { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 16px; padding: 24px 0 26px; }
  .ledger .no { font-size: 26px; }
  .ledger .count { grid-column: 2; text-align: left; margin-top: 14px; padding-top: 0; }
  .count-label {                     /* 휴대폰: 건수가 문장 아래로 내려오면 눈썹 "건수"를 붙인다 */
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .ledger .figure { grid-column: 1 / -1; }
}

/* 그림: 덮어쓰기 전후(글만 쓰는 원칙의 유일한 예외)와 사용량 카드. 그림이 아직 없으면 점선 자리만 */
.figure { margin: 0; }
.figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.figure figcaption { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); max-width: 40em; }
.figure-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  max-width: 680px;
}
.figure-pair .arrow { width: 28px; height: 28px; color: var(--gold-line); }
.figure-slot {
  aspect-ratio: 18 / 13;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.figure-slot--card { aspect-ratio: 12 / 5; }
.figure--card { max-width: 480px; margin-top: 40px; }
@media (max-width: 599px) {
  .figure-pair { grid-template-columns: minmax(0, 1fr); }
  .figure-pair .arrow { transform: rotate(90deg); justify-self: center; }
}

/* 시작하는 법: 세 단 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.steps > li { border-top: 1px solid var(--line-strong); padding-top: 16px; margin: 0; }
.steps .no {
  display: block;
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--index);
  margin-bottom: 12px;
}
.steps p { margin: 0; font-size: var(--fs-md); line-height: 1.7; }
@media (max-width: 719px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* 개인정보 요약: 두 단 (눈썹 | 글) */
.aside-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 24px; border-top: 1px solid var(--line-strong); padding-top: 24px; }
.aside-row > .eyebrow { grid-column: 1 / 3; }
.aside-row > div { grid-column: 2; max-width: 40em; }
.aside-row p:last-child { margin: 0; }
@media (max-width: 759px) { .aside-row { grid-template-columns: minmax(0, 1fr); } .aside-row > div { grid-column: 1; } }

/* ---------- 6. 알림 상자 (문장은 폭과 상관없이 모두 보인다) ---------- */

.notice {
  margin: 0 0 40px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-line);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-md);
  line-height: 1.65;
}
.notice p { margin: 0; }
.notice p + p { margin-top: 4px; }
@media (max-width: 599px) { .notice { padding: 12px 14px; margin-bottom: 24px; } }

/* ---------- 7. 버튼 (누르면 일어나는 일을 글자로 쓴다) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { color: var(--ink); border-color: var(--ink); }
.btn--primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }   /* 밝은 테마: 차콜 바탕 아이보리 글자 */
.btn--primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-fg); }
.btn--block { display: flex; width: 100%; }
/* 비활성: 색만이 아니라 모양(점선 테두리, 평평한 바탕)으로도 알린다. 글자는 4.5:1을 지킨다 */
.btn:disabled, .btn[aria-disabled="true"],
.btn:disabled:hover, .btn[aria-disabled="true"]:hover {
  background: var(--sunk);
  border: 1px dashed var(--line-strong);
  color: var(--ink-soft);
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  .btn--primary { background: var(--foil); border-color: #A0804A; color: #181B24; }     /* 금박 (짙은 끝 위 4.65:1) */
  .btn--primary:hover { background: var(--foil-hover); border-color: #B0905A; color: #181B24; }
}

/* ---------- 8. 요금제 ---------- */

.page-head { max-width: 720px; }

/* 휴대폰(<760px)에서만 보이는 바로 가기 줄: 다섯 요금제의 이름과 가격을 첫 화면에, 카드로 건너뛴다(가로 줄도 그 카드까지 넘어간다).
   칸 48px 이상, 글자 14px 이상 */
.plan-jump { display: none; }
@media (max-width: 759px) {
  .plan-jump { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 20px; }
  .plan-jump a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 48px;
    padding: 6px 4px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    text-align: center;
    font-size: var(--fs-sm);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
  }
  .plan-jump .jump-name { font-weight: 600; }
  .plan-jump .jump-price { color: var(--ink-soft); }
  /* 포커스 링(outline-offset 3px)은 칸 밖 종이 위에 그려져서 종이의 --focus를 그대로 쓴다 (2026-10-18 QA: #ECD8A8이면 밝은 종이 위 1.2:1) */
  .plan-jump .jump--recommended { background: var(--key-bg); color: var(--key-ink); border-color: var(--key-gold); }
  .plan-jump .jump--recommended .jump-name { color: var(--key-gold); }
  .plan-jump .jump--recommended .jump-price { color: var(--key-soft); }
}
@media (max-width: 479px) { .plan-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 카드 줄: 가로로 넘기는 한 줄 (2026-11-01 소유자 "스크롤해서 요금제를 볼 수 있고"). 다음 카드가 조금 보여서 넘길 수 있다는 것을 알린다
   (1080px 이상 약 4.25장, 600px 이상 약 2.25장, 그 아래 1장 남짓). 카드 끝에 붙어 멈추고(scroll-snap), 줄 안에서만 넘친다(페이지는 가로로
   넘치지 않는다). 스크립트는 쓰지 않는다: 크롬 계열은 양옆 화살표(::scroll-button)와 마름모 점(::scroll-marker), 그 밖은 금색 얇은 스크롤
   막대와 손가락 넘기기, 휴대폰은 위의 바로 가기 줄 */
.plan-rail { position: relative; }
.plan-grid {
  list-style: none;
  margin: 0;
  padding: 4px 2px 14px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);   /* 이름·가격·설명·세부·버튼 (subgrid로 카드끼리 기준선을 맞춘다) */
  grid-auto-columns: 84%;
  column-gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
@media (min-width: 600px)  { .plan-grid { grid-auto-columns: calc((100% - 2 * 16px) / 2.25); } }
@media (min-width: 1080px) { .plan-grid { grid-auto-columns: calc((100% - 4 * 16px) / 4.25); } }
@media (prefers-reduced-motion: reduce) { .plan-grid { scroll-behavior: auto; } }
.plan-grid > li::before { content: none; }     /* main ul의 마름모를 카드 목록에는 쓰지 않는다 */
.plan-grid > li { margin: 0; }
.plan-grid > .plan { grid-row: span 5; scroll-snap-align: start; }

/* 크롬 계열(135+)만: 양옆 금색 화살표와 카드 아래 마름모 점. 화살표 이름은 그 페이지 언어(data-prev·data-next), 점 이름은 요금제 이름 */
@supports selector(::scroll-button(*)) {
  .plan-grid::scroll-button(*) {
    position: absolute;
    top: calc(50% - 30px);
    z-index: 1;
    width: 44px;
    height: 44px;
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    font: 400 26px/1 var(--font-num);
    cursor: pointer;
    box-shadow: 0 1px 6px rgb(0 0 0 / .18);
  }
  .plan-grid::scroll-button(*):hover { background: var(--surface); }
  .plan-grid::scroll-button(*):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .plan-grid::scroll-button(*):disabled { opacity: 0; pointer-events: none; }
  .plan-grid::scroll-button(left) { content: "‹" / attr(data-prev); left: -22px; }
  .plan-grid::scroll-button(right) { content: "›" / attr(data-next); right: -22px; }
  @media (max-width: 599px) { .plan-grid::scroll-button(*) { display: none; } }
}
@supports (scroll-marker-group: after) {
  .plan-grid { scroll-marker-group: after; }
  .plan-grid::scroll-marker-group { display: flex; justify-content: center; align-items: center; gap: 4px; height: 30px; margin: 2px 0 6px; }
  .plan-grid > .plan::scroll-marker {
    content: "" / attr(data-name);
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 9px;
    border: 1.5px solid var(--gold-line);
    rotate: 45deg;
  }
  .plan-grid > .plan::scroll-marker:target-current { background: var(--gold-line); }
  .plan-grid > .plan::scroll-marker:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
}

/* 요금제 한 칸 = 위 한 줄(추천) + 키 카드 + 설명 + 세부 목록 + 버튼 (2026-11-01 시안 A). 칸 자체는 틀이 없고 키 카드가 그림이다 */
.plan {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  scroll-margin-top: 16px;                   /* 바로 가기로 건너뛴 카드가 화면 위에 붙지 않게 */
}
/* 줄의 칸끼리 위 한 줄·카드·설명·세부·버튼의 기준선을 맞춘다 (subgrid) */
@supports (grid-template-rows: subgrid) {
  .plan-grid > .plan { display: grid; grid-template-rows: subgrid; row-gap: 0; }
}
.plan-flag { margin: 0 0 10px; min-height: 1.35em; font-size: var(--fs-xs); font-weight: 600; line-height: 1.35;
             letter-spacing: .08em; text-transform: uppercase; color: var(--gold-line); }

/* 키 카드: 호텔 룸 키 (봇의 카드 D-1과 같은 문법). 차콜 카드에 금선 두 겹, 차례 번호와 인장, 영어 등급(Cinzel)과 그 언어 이름, 가격,
   맨 아래 워드마크. 두 테마 모두 차콜이고, 추천은 아이보리 카드에 짙은 금 (종이 위에 놓인 키). 글자 대비: 차콜 위 아이보리 15:1·금 7.7:1,
   아이보리 위 차콜 14:1·짙은 금 #6E5220 6.4:1 */
.key-card {
  --kc-bg: #181B24;
  --kc-ink: #F4EFE6;
  --kc-soft: #B0ACA3;
  --kc-gold: #C9A96E;
  --kc-rule: rgba(201, 169, 110, .38);
  --kc-mark: #9A8A66;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--kc-gold);
  border-radius: 14px;
  background: var(--kc-bg);
  color: var(--kc-ink);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.key-inner {
  box-sizing: border-box;
  height: 100%;
  min-height: 300px;
  padding: 20px 20px 16px;
  border: 1px solid var(--kc-rule);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
}
.key-top { display: flex; align-items: center; justify-content: space-between; }
.key-no { font-family: var(--font-num); font-size: 17px; font-weight: 600; letter-spacing: .14em; color: var(--kc-gold); font-variant-numeric: lining-nums; }
.key-card .seal { width: 26px; height: 26px; color: var(--kc-gold); }
.key-card .plan-name { margin: 52px 0 0; display: flex; flex-direction: column; gap: 4px; font-weight: 400; }
.key-grade { font-family: var(--font-caps); font-size: 24px; font-weight: 500; letter-spacing: .14em; line-height: 1.2; color: var(--kc-ink); }
.key-local { font-size: var(--fs-md); line-height: 1.4; color: var(--kc-soft); }
.key-card .price { --fs-price: 38px; margin: auto 0 0; padding-top: 20px; color: var(--kc-soft); }   /* "14,99 $/Monat"도 한 줄에 */
.key-card .price .amount, .key-card .price .cur { color: var(--kc-ink); }
.key-brand { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--kc-rule); font-family: var(--font-caps); font-size: 9px;
             letter-spacing: .3em; line-height: 1.3; color: var(--kc-mark); }
.plan--recommended .key-card {
  --kc-bg: #F4EEE2;
  --kc-ink: #181B24;
  --kc-soft: #5C5648;
  --kc-gold: #6E5220;
  --kc-rule: rgba(110, 82, 32, .45);
  --kc-mark: #6E5220;
  border-color: #A0804A;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.plan--recommended .key-card .seal { color: #C9A96E; }   /* 인장은 차콜 원판이라 금색 그대로 */

/* 가격: 숫자와 통화 기호만 세리프, "월"·"원"·"/mo"는 카탈로그 그대로 고딕 */
.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 4px;
  margin: 0 0 22px;
  font-size: var(--fs-base);
  line-height: 1.1;
  color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums;
}
.price .amount, .price .cur {
  font-family: var(--font-num);
  font-size: var(--fs-price);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--figure);
}
.price .cur { font-size: calc(var(--fs-price) * .72); margin-right: -3px; }
.price .cur--code { margin-right: 0; }   /* 글자가 붙은 기호(US$)는 카탈로그의 띄어쓰기 "US$ 9,99"를 그대로 (2026-10-24) */

.plan-blurb { margin: 0; padding: 20px 0 10px; font-size: var(--fs-md); line-height: 1.65; }
.plan-detail { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; --lh: 1.75; line-height: 1.75; }
.plan-detail > li { margin-bottom: .2em; }
.plan-media { position: relative; margin: 0 0 24px; padding-left: 1.1em; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-soft); }
.plan-media::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px; height: 6px;
  border: 1.5px solid var(--gold-line);
  transform: rotate(45deg);
}
.plan-detail { margin-bottom: 24px; }
.plan-media--once { max-width: 720px; margin: 14px 0 0; }   /* 카드마다 같던 사진 줄을 줄 아래에 한 번 */
.plan .btn { align-self: end; margin-top: auto; width: 100%; }

/* 추천: 아이보리 키 카드(위), 카드 위 작은 글 "추천", 금박 버튼. 띠나 배지는 없다 */
.plan--recommended .btn--primary { background: var(--foil); border-color: #A0804A; color: #181B24; }
.plan--recommended .btn--primary:hover { background: var(--foil-hover); border-color: #B0905A; color: #181B24; }

/* 카드 아래 안내 */
.notes { max-width: 720px; margin: 40px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); --lh: 1.7; line-height: 1.7; }
.notes > li { margin-bottom: .35em; }

/* 건수는 이렇게 세요: 왼쪽 장부(dl) | 오른쪽 금선 영수증 상자 (1.15fr : 1fr, 좁으면 위아래) */
.credits-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px 48px; align-items: start; }
@media (max-width: 899px) { .credits-grid { grid-template-columns: minmax(0, 1fr); } }

.count-list { margin: 0; border-top: 1px solid var(--line-strong); }
.count-list > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: 24px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--line);
}
.count-list dt { font-weight: 600; line-height: 1.6; }
.count-list dd { margin: 0; max-width: 42em; }
.count-list .val { display: block; font-weight: 600; line-height: 1.5; margin-bottom: 4px; }
.count-list .desc { display: block; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 599px) {
  .count-list > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 16px 0 18px; }
}

/* 영수증: 금선 상자. 숫자는 세리프 22px, 합계 줄은 굵은 괘선 */
.receipt {
  padding: 22px 24px 20px;
  background: var(--surface);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
}
.receipt .fig { font-size: 22px; }
.receipt-title { margin: 0 0 6px; }
.receipt-head { font-size: var(--fs-lead); font-weight: 600; line-height: 1.4; margin: 0 0 2px; }
.receipt-sub { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.receipt-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dotted var(--line);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.receipt-line > span:last-child { white-space: nowrap; text-align: right; }
.receipt-line--total { border-bottom: 0; border-top: 1px solid var(--line-strong); margin-top: 2px; padding-top: 12px; font-weight: 600; }
.receipt-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.verdict { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 599px) { .receipt { padding: 18px 16px 16px; } }

/* 자주 묻는 질문: 접힘. 마름모가 ◇에서 ◆로 (열린 것 = 지금 보는 것) */
.faq { border-top: 1px solid var(--line-strong); max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 44px;
  padding: 16px 0;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border: 1.5px solid var(--gold-line);
  transform: translateY(-2px) rotate(45deg);
}
.faq details[open] summary::before { background: var(--gold-line); }
.faq summary:hover { color: var(--ink); text-decoration: underline 1px var(--gold-line); text-underline-offset: .25em; }
.faq-body p { margin: -4px 0 20px 21px; max-width: 44em; font-size: var(--fs-md); line-height: 1.7; }

/* ---------- 9. 결제 ---------- */

.back-link {
  display: inline-flex;
  gap: 8px;
  margin: 0 0 20px;
  padding: 12px 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  text-decoration: none;
}
.back-link:hover { color: var(--ink); text-decoration: underline 1px var(--gold-line); text-underline-offset: .22em; }

/* 두 칸 (2026-11-01 소유자 "결제페이지 디자인 깔끔하게", 시안 A): 넓은 화면은 왼쪽 고른 요금제의 키 카드 | 오른쪽 아이보리 주문 카드
   한 장(주문 내용, 포함된 것, 환불, 동의와 결제). 휴대폰은 DOM 순서 그대로 키 카드 → 주문 카드 (결제 버튼 전에 포함된 것과 환불) */
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
@media (min-width: 860px) {
  .checkout-grid { grid-template-columns: 300px minmax(0, 1fr); column-gap: 56px; align-items: start; }
}
.checkout-key .key-card { max-width: 300px; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.checkout-key .key-inner { min-height: 400px; }
.checkout-key .key-card .plan-name { margin-top: 84px; }
.checkout-key .key-grade { font-size: 30px; }
.checkout-key .key-card .price { --fs-price: 46px; }
.checkout-key > .sub { max-width: 300px; margin: 14px 0 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 859px) {
  .checkout-key .key-inner { min-height: 260px; }
  .checkout-key .key-card .plan-name { margin-top: 40px; }
}

/* 아이보리 주문 카드: 두 테마 모두 종이 카드(어두운 바탕 위에 놓인 명세서). 안의 글과 선은 종이 토큰으로 다시 칠한다 */
.summary {
  --surface: #F6F1E7;
  --sunk: #ECE5D7;
  --ink: #1D1F26;
  --ink-soft: #5C5648;
  --line: #D8CFBE;
  --line-strong: #857F73;
  --gold-line: #8A6A2E;
  --figure: #1D1F26;
  --link: #1D1F26;
  --link-underline: #8A6A2E;
  --focus: #1D1F26;
  --check: #6E5220;
  color-scheme: light;           /* 동의 상자 같은 기본 칸을 종이색으로 (어두운 테마에서 검은 상자가 되지 않게) */
  margin: 0;
  padding: 28px 32px 30px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--card-line);
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(60, 45, 20, .14);
}
@media (prefers-color-scheme: dark) { .summary { border-color: #A0804A; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); } }
@media (max-width: 599px) { .summary { padding: 22px 18px 24px; } }
.summary .eyebrow { margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--ink); color: var(--ink); }

/* 영수증(폴리오) 행: 이름(작은 글) 위, 값 아래, 넓으면 두 칸 */
.folio { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 599px) { .folio { grid-template-columns: minmax(0, 1fr); } }
.folio > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.folio dt { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6; }
.folio dd { margin: 4px 0 0; }
.folio-note { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65; }
/* 결제 요약의 가격은 가격 뒤에 긴 글(", plus tax for your country", "（お住まいの国の税金は別途）")이 붙는다. 카드처럼 flex 줄이면
   "/mo"부터 그 글 끝까지가 한 덩이라 좁은 화면에서 숫자 아래로 내려가 줄이 "/mo"로 시작했다(2026-10-24, 24개 언어 360px).
   여기서는 보통 글줄로 흘리고 가격 표기("$9.99/mo", "월 12,900원")만 카드와 같은 inline-flex 덩이(.price-main)로 묶는다:
   단위는 숫자에 붙어 있고, 뒤의 글은 그 언어의 자연스러운 자리에서 바뀐다(쉼표·"，" 앞에서는 바뀌지 않고 일본어는 "（" 앞에서) */
.folio .price { display: block; margin: 0; line-height: 1.5; }
.folio .price-main { display: inline-flex; align-items: baseline; column-gap: 4px; line-height: 1.1; }
.folio .sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65; }

/* 고른 요금제: 속 찬 마름모 (◆ = 지금 고른 것, DESIGN.md 3.9) */
.chosen { display: inline-flex; align-items: baseline; gap: 10px; font-size: 19px; font-weight: 600; line-height: 1.4; }
.chosen::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  background: var(--gold-line);
  transform: translateY(-2px) rotate(45deg);
}

.checkout-section { margin: 24px 0 0; }
.checkout-section h3 { margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.checkout-section ul { font-size: var(--fs-md); --lh: 1.7; line-height: 1.7; }
/* 포함된 것: 한 줄에 하나 (전에는 쉼표로 이은 한 문장), 줄 사이 옅은 괘선 */
.checkout-section .includes { margin: 0; }
@media (min-width: 600px) { .checkout-section .includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.checkout-section .includes > li { margin: 0; padding: 9px 0 9px 1.4em; border-bottom: 1px solid var(--line); font-variant-numeric: lining-nums tabular-nums; }
.checkout-section .includes > li::before { top: calc(9px + var(--lh) * .5em - 3.5px); }
.checkout-section .includes > li:last-child { border-bottom: 0; }
.summary .pay { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.summary .check { background: var(--sunk); border-color: var(--line); }
.checkout-section .sub { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65; }

/* 동의 칸 */
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 24px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--check);
}
.check { cursor: pointer; }   /* 칸 전체가 label: 상자 20px이 아니라 칸 어디를 눌러도 (2026-10-18 QA) */
.check > span { font-size: var(--fs-md); line-height: 1.65; }

.pay-note { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65; }
/* 법률 문서가 없는 언어: 동의 칸 바로 아래에 "약관과 정책은 영어판만" 한 줄 (꼬리의 footer.legal_english와 같은 글, 2026-10-24) */
.check:has(+ .pay-legal) { margin-bottom: 8px; }
.pay-legal { margin: 0 0 24px; padding: 0 2px; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65; }

/* ---------- 10. 꼬리 (정책 링크 + 사업자 정보 + 인장) ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 40px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-soft);
}
.footer-nav { display: flex; flex-wrap: wrap; column-gap: 20px; margin: 0 0 16px; }
.footer-nav a { display: inline-block; padding: 11px 0; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }   /* 터치 46px */
.footer-nav a:hover, .footer-nav a[aria-current="page"] { text-decoration: underline 1px var(--gold-line); text-underline-offset: .22em; }
.footer-note { max-width: 40em; margin: 0 0 16px; }   /* AI 고지 (본문에 없는 페이지만) */

/* 사업자 정보: 등록 뒤 (이름 위, 값 아래 → 영어처럼 긴 이름도 줄이 맞는다) */
.biz {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px 24px;
  margin: 0 0 24px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}
.biz > div { min-width: 0; }
.biz dt { font-size: 12px; letter-spacing: .02em; color: var(--ink-soft); }
.biz dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.biz .biz-wide { grid-column: 1 / -1; }
@media (min-width: 720px) { .biz .biz-wide { grid-column: span 2; } }
/* 사업자 정보: 등록 전 (한 줄 + 문의) */
.biz--pending { display: block; }
.biz--pending p { margin: 0; }
.biz--pending p + p { margin-top: 2px; }
.biz-label { color: var(--ink-soft); margin-right: 8px; }
.biz a { display: inline-block; padding: 11px 0; }   /* 문의 이메일: 누를 곳 높이 44px (2026-10-18 QA: 17px) */

.footer-end { display: flex; align-items: center; gap: 10px; margin: 0; }

/* 데바나가리(힌디어)·타이 문자는 자간을 벌리거나 좁히면 글자 위 이음선과 모음 기호가 떨어진다: 눈썹·꼬리표·표 머리·버튼·제목의 자간을 0으로
   (대문자 바꾸기는 이 문자에 없어 그대로 둔다. 2026-10-20 30개 언어) */
:is(:lang(hi), :lang(th)) :is(.eyebrow, .tag, .plan-flag, .count-label, th, .btn, h1, .biz dt),
:is(:lang(hi), :lang(th)) .table--stack td::before { letter-spacing: 0; }

/* ---------- 11. 고대비 모드: 금박을 글자에 입힌 요소가 투명 글자로 사라지지 않게 ---------- */

@media (forced-colors: active) {
  .brand-name { color: CanvasText; background: none; }
  .plan--recommended { forced-color-adjust: auto; }
}

/* ---------- 12. 인쇄: 메뉴와 버튼을 빼고, 뒤집은 키 카드는 종이색 바탕·잉크 글자·금선 틀로 다시 칠한다 ---------- */

@media print {
  :root { --paper: #fff; --surface: #fff; --ink: #000; --ink-soft: #333; --line: #bbb; --figure: #000; --index: #333; }
  .site-nav, .lang-switch, .footer-nav, .cta, .back-link, .skip-link, .plan-jump, .plan .btn, .pay { display: none; }
  /* 인쇄는 가로 줄을 풀어 세 칸으로 (넘긴 카드가 잘리지 않게) */
  .plan-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; overflow: visible; row-gap: 16px; }
  .plan-grid > .plan { grid-row: auto; }
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .key-card { --kc-bg: #fff; --kc-ink: #000; --kc-soft: #333; --kc-gold: #A0804A; --kc-mark: #555; box-shadow: none; }
  .summary { box-shadow: none; }
  .plan, .receipt, .ledger > li, .faq details { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  main { padding-top: 0; }
  .plan--recommended .plan-flag { color: #000; }
  .plan--recommended .btn--primary { background: none; border: 1px solid #A0804A; color: #000; }
  .plan-jump .jump--recommended { background: none; color: #000; }
}