/* 사주텔링 v9 — 전체 고객 화면
 * PC 포함 최대 430px 단일 열. 페이지 #FFFFFF. 콘텐츠 좌우 16px 한 번.
 * 시안: v9-00 ~ v9-06 .dc.html 의 수치를 그대로 옮긴 파일입니다.
 */
:root {
  --st-action: #D13A14;  --st-action-press: #B32F13;  --st-action-soft: #FFF0EA;
  --st-ink: #211E1B;     --st-body: #504A45;          --st-read: #2E2A26;
  --st-muted: #6B645D;   --st-disabled: #8E867E;
  --st-line: #E5E0DC;    --st-line-field: #D6D0CA;
  --st-band: #F6F4F2;    --st-fill: #F1EEEB;          --st-bg: #FFFFFF;
  --st-wood: #1B6754;    --st-wood-soft: #EAF2EF;
  --st-fire: #B83D31;    --st-earth: #8B5D19;  --st-metal: #566178;  --st-water: #315F99;
  --st-brand: #000000;

  --st-font-ui: "Noto Sans KR", "IBM Plex Sans KR", system-ui, sans-serif;
  --st-font-display: "Gowun Batang", "Noto Serif KR", serif;
  --st-font-hanja: "Song Myung", "Gowun Batang", serif;

  --st-gut: 16px; --st-app: 430px;
  --st-h: 52px; --st-r: 12px; --st-r-lg: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
input, textarea, select, button { font: inherit; max-width: 100%; min-width: 0; }
body { margin: 0; background: var(--st-bg); color: var(--st-ink); font-family: var(--st-font-ui); word-break: keep-all; text-wrap: pretty; }
.st-app { width: 100%; max-width: var(--st-app); margin: 0 auto; overflow-x: hidden; }
.st-pad { padding-left: var(--st-gut); padding-right: var(--st-gut); }   /* 여백은 이 클래스 하나만 */
.st-band { border-top: 8px solid var(--st-band); }                       /* 구역 구분 */

/* 헤더 (StBar) */
.st-bar { height: 56px; padding: 0 var(--st-gut); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--st-line); background: var(--st-bg); }
.st-brand { display: flex; align-items: center; gap: 8px; color: var(--st-brand); }
.st-brand img { width: 26px; height: 26px; display: block; }
.st-brand span { font-family: var(--st-font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--st-brand); }
.st-bar__back { width: 44px; height: 44px; margin-left: -12px; display: grid; place-items: center; border: 0; background: none; }
.st-bar__title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.st-bar__step { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--st-body); font-variant-numeric: tabular-nums; }
.st-progress { height: 3px; background: var(--st-fill); }
.st-progress > span { display: block; height: 100%; background: var(--st-action); }

/* 타이포 */
.st-h-home { margin: 0; font-family: var(--st-font-display); font-size: 30px; line-height: 40px; font-weight: 700; letter-spacing: -0.045em; }
.st-h-page { margin: 0; font-family: var(--st-font-display); font-size: 26px; line-height: 36px; font-weight: 700; letter-spacing: -0.04em; }
.st-h-sec  { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -0.03em; }
.st-lede   { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--st-body); }
.st-label  { font-size: 14px; font-weight: 700; }
.st-sub    { font-size: 13px; line-height: 20px; color: var(--st-body); }
.st-cap    { font-size: 12px; line-height: 18px; color: var(--st-muted); }   /* 12px 미만 금지 */
.st-num    { font-variant-numeric: tabular-nums; }
.st-hanja  { font-family: var(--st-font-hanja); }                             /* 뒤에 (한글) 병기 */

/* 질문 컴포저 */
.st-composer { border: 1px solid var(--st-ink); border-radius: var(--st-r-lg); background: var(--st-bg); overflow: hidden; }
.st-composer:focus-within { border-color: var(--st-action); box-shadow: 0 0 0 3px rgba(209,58,20,.12); }
.st-composer[data-state="error"] { border: 1.5px solid var(--st-action-press); }
.st-composer__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0; font-size: 14px; font-weight: 700; }
.st-composer__count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--st-muted); font-variant-numeric: tabular-nums; }
.st-composer textarea { display: block; width: 100%; min-height: 120px; padding: 10px 14px 12px; border: 0; background: transparent; font-size: 16px; line-height: 26px; resize: none; outline: none; }
.st-composer__hint { padding: 0 14px 14px; display: flex; gap: 6px; font-size: 12.5px; color: var(--st-body); }
/* maxlength="400". 홈 제출값이 최신 질문으로 주문 1/3에 그대로 전달 */

/* 예시 칩 — 선택은 청록, CTA(주홍)와 구분 */
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { height: 40px; padding: 0 14px; border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-bg); color: var(--st-ink); font-size: 14px; white-space: nowrap; cursor: pointer; }
.st-chip[aria-pressed="true"] { border-color: var(--st-wood); background: var(--st-wood-soft); color: var(--st-wood); font-weight: 600; }

/* 버튼 */
.st-btn { width: 100%; height: var(--st-h); display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--st-r); font-size: 16px; font-weight: 700; cursor: pointer; }
.st-btn--primary { background: var(--st-action); color: #FFFFFF; }
.st-btn--primary:active { background: var(--st-action-press); }
.st-btn--primary[aria-busy="true"] { background: var(--st-action-press); cursor: progress; }
.st-btn--secondary { border: 1px solid var(--st-line-field); background: var(--st-bg); color: var(--st-ink); font-weight: 600; }
.st-btn--dark { background: var(--st-ink); color: #FFFFFF; }
.st-btn:disabled { background: var(--st-fill); color: var(--st-disabled); border-color: transparent; cursor: not-allowed; }
.st-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--st-ink); }
.st-btn svg { width: 24px; height: 24px; flex: 0 0 auto; }

/* 입력 */
.st-field { display: grid; gap: 8px; }
.st-input, .st-select { width: 100%; height: var(--st-h); padding: 0 14px; border: 1px solid var(--st-line-field); border-radius: var(--st-r); background: var(--st-bg); color: var(--st-ink); font-size: 16px; outline: none; }
.st-input:focus, .st-select:focus { border-color: var(--st-action); box-shadow: 0 0 0 3px rgba(209,58,20,.12); }
.st-input[aria-invalid="true"] { border: 1.5px solid var(--st-action-press); }
.st-input:disabled, .st-select:disabled { background: var(--st-band); color: var(--st-disabled); }
.st-error { display: flex; gap: 6px; font-size: 13px; line-height: 20px; color: var(--st-action-press); }
.st-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-seg > button { height: var(--st-h); border: 1px solid var(--st-line-field); border-radius: var(--st-r); background: var(--st-bg); font-size: 16px; }
.st-seg > button[aria-pressed="true"] { border-color: var(--st-ink); background: var(--st-ink); color: #FFFFFF; font-weight: 600; }
.st-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.st-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--st-action); }
.st-note { padding: 10px 12px; border-radius: 10px; background: var(--st-band); font-size: 13px; line-height: 20px; color: var(--st-body); }

/* 목록 행 (무료 3종 · 메뉴 · 풀이함) */
.st-row { display: grid; grid-template-columns: 44px minmax(0,1fr) 20px; gap: 14px; align-items: center; min-height: 76px; padding: 14px 0; border-bottom: 1px solid var(--st-line); color: var(--st-ink); }
.st-row__icon { width: 44px; height: 44px; border-radius: var(--st-r); background: var(--st-wood-soft); color: var(--st-wood); display: grid; place-items: center; }
.st-row__title { font-size: 15px; line-height: 22px; font-weight: 700; }
.st-badge { padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.st-badge--free { background: var(--st-action-soft); color: var(--st-action-press); }
/* ST/Badge 6종 — Figma 이름 그대로 */
.st-badge--free    { background: var(--st-action-soft); color: var(--st-action-press); }   /* 무료 */
.st-badge--member  { background: var(--st-fill); color: var(--st-body); font-weight: 600; } /* 회원 전용 */
.st-badge--new     { background: var(--st-action); color: #FFFFFF; }                        /* 새 풀이 */
.st-badge--pending { background: var(--st-action-soft); color: var(--st-action-press); }    /* 발행 중 */
.st-badge--ready   { background: var(--st-wood-soft); color: var(--st-wood); }              /* 열람 가능 */
.st-badge--expired { background: var(--st-fill); color: var(--st-muted); }                  /* 만료 */

/* 결과 읽기 */
.st-asked { font-size: 16px; line-height: 26px; color: var(--st-body); }
.st-verdict { padding: 22px 0 24px; border-top: 2px solid var(--st-ink); border-bottom: 1px solid var(--st-line); }
.st-verdict p { margin: 0; font-family: var(--st-font-display); font-size: 24px; line-height: 36px; font-weight: 700; letter-spacing: -0.045em; }
/* 풀이 본문의 구역 제목도 고딕 18/28 — 한 화면에 구역 제목이 두 결로
   서 있었다(본문은 명조 20, 시기·할 일은 고딕 18). 명조는 화면 제목과
   결론, 그리고 본문 글줄의 몫이다 (v9 타이포 계단). */
.st-read h3 { margin: 0 0 12px; font-family: var(--st-font-ui); font-size: 18px;
  line-height: 28px; font-weight: 700; letter-spacing: -0.03em; }
.st-read p { margin: 0 0 18px; font-family: var(--st-font-display); font-size: 17px; line-height: 30px; color: var(--st-read); }
.st-read blockquote { margin: 6px 0 24px; padding: 4px 0 4px 16px; border-left: 3px solid var(--st-action); font-family: var(--st-font-display); font-size: 19px; line-height: 31px; font-weight: 700; }
.st-timing__row { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 12px; align-items: center; min-height: 60px; border-bottom: 1px solid var(--st-line); }
/* ST/Evidence — 근거는 해당 문장 바로 아래 제자리. 옮기거나 한 곳으로 합치지 않음.
   근거 없는 문장(NoEvidence)은 토글 자체를 렌더하지 않음 */
.st-evidence { margin: -8px 0 22px; border: 1px solid var(--st-line); border-radius: var(--st-r); overflow: hidden; }
.st-evidence > summary { min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--st-wood); list-style: none; cursor: pointer; }
.st-evidence > summary::-webkit-details-marker { display: none; }
.st-evidence[open] { border-color: #CFE2DB; background: #F5FAF8; }
.st-evidence[open] > summary { font-weight: 700; }
.st-evidence[open] > summary .st-chevron { transform: rotate(180deg); }
.st-evidence__body { padding: 2px 14px 16px 42px; font-family: var(--st-font-display); font-size: 16px; line-height: 28px; color: var(--st-ink); }
.st-evidence--attached { margin: 0; border-top: 0; border-radius: 0 0 var(--st-r) var(--st-r); } /* 결론 블록에 붙는 경우 */

/* ST/Timeline 유형 표식 — 엔진이 준 유형만 표시 */
.st-tl { padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.st-tl--first { background: var(--st-action); color: #FFFFFF; }
.st-tl--second { background: var(--st-action-soft); color: var(--st-action-press); }
.st-tl--window { background: var(--st-wood-soft); color: var(--st-wood); }
.st-tl--avoid-year { background: var(--st-ink); color: #FFFFFF; }
.st-tl--avoid-month { border: 1px solid var(--st-ink); color: var(--st-ink); }
.st-tl--neutral { background: var(--st-fill); color: var(--st-body); }
.st-tl--care { background: #F7F0E6; color: var(--st-earth); }

/* ST/Button Ghost · Hover */
.st-btn--ghost { background: transparent; color: var(--st-ink); }
.st-btn--ghost:hover { background: var(--st-band); }
.st-btn--primary:hover { background: #C23512; }
.st-btn--secondary:hover { border-color: #B9B1A9; background: #FAF9F8; }
.st-input[readonly] { border-color: transparent; background: var(--st-band); }

/* 미확정 — 종합 목차, 날짜 옵션(하려는 일·기간), 열람/쿠폰/탈퇴 정책 값은 확정 전. 문장으로 쓰지 말고 약관 링크 또는 기존 폼 값을 그대로 바인딩 */

/* 상태 화면 */
.st-status { padding: 40px var(--st-gut) 0; display: grid; justify-items: center; text-align: center; }
.st-status__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; }
.st-status__icon--ok { background: var(--st-wood-soft); color: var(--st-wood); }
.st-status__icon--err { background: var(--st-action-soft); color: var(--st-action-press); }
.st-status__icon--muted { background: var(--st-fill); color: var(--st-body); }
.st-art--head { width: 80px; height: 80px; object-fit: contain; }    /* 제목 옆 80–88 */
.st-art--scene { width: 156px; height: 156px; object-fit: contain; } /* 발행 대기 */
.st-art--empty { width: 136px; height: 136px; object-fit: contain; }

/* 오버레이 */
.st-scrim { position: fixed; inset: 0; background: rgba(33,30,27,.45); }
.st-modal { position: fixed; left: 24px; right: 24px; top: 30%; max-width: 382px; margin: 0 auto; padding: 24px 20px 20px; border-radius: var(--st-r-lg); background: #FFFFFF; }
.st-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: var(--st-app); margin: 0 auto; padding: 10px var(--st-gut) calc(28px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: #FFFFFF; }
.st-toast { position: fixed; left: var(--st-gut); right: var(--st-gut); bottom: calc(24px + env(safe-area-inset-bottom)); max-width: 398px; margin: 0 auto; min-height: 52px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-radius: var(--st-r); background: var(--st-ink); color: #FFFFFF; font-size: 15px; }
.st-sticky-cta { position: sticky; bottom: 0; padding: 12px var(--st-gut) calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--st-line); background: var(--st-bg); }

/* ════════════════════════════════════════════════════════════════
 * 다리 — 옛 `rn-` 계층을 같은 토큰 위에 올린다.
 *
 * renovation.css 는 색을 1,100곳 넘게 `--rn-*` 로 부른다. 값만 v9 로 되돌리면
 * 아직 옮기지 못한 화면도 같은 팔레트·같은 컨트롤로 선다. 마크업은 화면 단위로
 * 하나씩 옮긴다 — 붙어 있는 자바스크립트 훅을 한꺼번에 흔들지 않기 위해서다.
 * ════════════════════════════════════════════════════════════════ */
:root {
  --rn-ink: var(--st-ink);
  --rn-ink-deep: var(--st-ink);
  --rn-ink-soft: var(--st-ink);
  --rn-field: var(--st-ink);
  --rn-bg: var(--st-bg);
  --rn-paper: var(--st-bg);
  --rn-paper-card: var(--st-bg);
  --rn-paper-soft: var(--st-band);
  --rn-hanji: var(--st-bg);
  --rn-hanji-deep: var(--st-fill);
  --rn-hanji-line: var(--st-line);
  --rn-line: var(--st-line);
  --rn-line-strong: var(--st-line-field);
  --rn-text: var(--st-ink);
  --rn-text-2: var(--st-body);
  --rn-text-3: var(--st-muted);
  --rn-accent: var(--st-action);
  --rn-accent-dark: var(--st-action-press);
  --rn-accent-wash: var(--st-action-soft);
  --rn-pine: var(--st-action);
  --rn-pine-bright: var(--st-action-press);
  --rn-green: var(--st-wood);
  --rn-green-dark: var(--st-wood);
  --rn-gold: var(--st-earth);
  --rn-gold-dark: var(--st-earth);
  --rn-success: var(--st-wood);
  --rn-danger: var(--st-action-press);
  --rn-info: var(--st-water);
  --rn-lock: var(--st-muted);
  --rn-radius: var(--st-r);

  /* 아직 남아 있는 v6 이름들. 한 번에 지우지 않고 같은 값을 가리키게 둔다. */
  --action: var(--st-action);
  --action-pressed: var(--st-action-press);
  --action-soft: var(--st-action-soft);
  --text: var(--st-ink);
  --text-muted: var(--st-body);
  --text-subtle: var(--st-muted);
  --text-accent: var(--st-action-press);
  --text-on-accent: #FFFFFF;
  --surface: var(--st-band);
  --border: var(--st-line);
  --border-strong: var(--st-line-field);
  --white: #FFFFFF;
  --focus: var(--st-ink);
  --wood: var(--st-wood);
  --font-ui: var(--st-font-ui);
  --font-display: var(--st-font-display);
}

/* 셸 — PC 에서도 430 한 열. 바깥 여백은 `.st-pad` 한 곳에서만. */
.rn-mobile { width: min(100%, var(--st-app)); border-inline: 0; background: var(--st-bg); }
.rn-body { background: var(--st-bg); color: var(--st-ink); font-family: var(--st-font-ui); }
.rn-body h1, .rn-body h2, .rn-body h3 { font-family: var(--st-font-display); letter-spacing: -0.04em; }

/* 브랜드 — 워드마크는 검정 19px. 마크는 원본 그대로. */
.rn-brand span { font-family: var(--st-font-display); font-size: 19px; font-weight: 700;
  letter-spacing: -0.05em; color: var(--st-brand); }

/* 옛 컨트롤을 v9 규격으로 */
.rn-btn { min-height: var(--st-h); border-radius: var(--st-r); font-size: 16px; font-weight: 700; }
.rn-btn--block { min-height: var(--st-h); }
.rn-btn--paper { background: var(--st-bg); border-color: var(--st-line-field); color: var(--st-ink) !important; }
.rn-btn:disabled, .rn-btn[disabled] { background: var(--st-fill); border-color: transparent;
  color: var(--st-disabled) !important; cursor: not-allowed; }
.rn-input, .rn-select, .rn-textarea { min-height: var(--st-h); background: var(--st-bg);
  border-color: var(--st-line-field); border-radius: var(--st-r); font-size: 16px; }
.rn-input:focus, .rn-select:focus, .rn-textarea:focus { border-color: var(--st-action);
  outline: none; box-shadow: 0 0 0 3px rgba(209,58,20,.12); }
.rn-input::placeholder, .rn-textarea::placeholder { color: var(--st-muted); opacity: 1; }
.rn-nav { background: var(--st-bg); border-bottom-color: var(--st-line); }
.rn-footer { background: var(--st-bg); border-top-color: var(--st-line); color: var(--st-body); }

/* `<a>` 로 만든 단추는 `.rn-body a`(0,1,1)가 단추 규칙을 이긴다. 덧칠 대신
   클래스를 하나 더해 같은 싸움에서 이기게 한다. */
.rn-body .st-btn { color: var(--st-ink); }
.rn-body .st-btn--primary, .rn-body .st-btn--dark { color: #FFFFFF; }

/* 터치 영역 — 시안의 칩은 40px 이라 44px 로 올려 둔다(누르는 자리 최소 규격). */
.st-chip { min-height: 44px; height: auto; padding-top: 0; padding-bottom: 0; }

/* 결제 전 동의 칸 — 상자 22px, 누를 수 있는 줄 44px 이상. */
.rn-pay__withdrawal-consent { align-items: flex-start; min-height: 44px; padding: 12px 13px;
  background: var(--st-action-soft); border-radius: var(--st-r); }
.rn-pay__withdrawal-consent input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--st-action); }
.rn-pay__withdrawal-consent span { font-size: 13px; line-height: 20px; }

/* 삽화 치수 — v9 규격 */
.tp-art-pic--head, .tp-art-pic--head-sm { width: 80px; }
.tp-art-pic--scene { width: 156px; margin: 0 auto 14px; }
.tp-art-pic--empty { width: 136px; margin: 0 auto 14px; }

/* 아이콘 — 한 벌로 맞춘 선 아이콘(icons.py). 24px, 굵기 2, 끝은 둥글게. */
.st-icon-line { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-icon-line--sm { width: 20px; height: 20px; }
/* 시안의 선 아이콘은 24 · 20 · 16 세 치수뿐이다 (v9 · 1.1). */
.st-icon-line--xs { width: 16px; height: 16px; }
.st-icon-line--action { color: var(--st-action); }
.st-icon-line--wood { color: var(--st-wood); }
.st-icon-line--muted { color: var(--st-muted); }

/* ── 홈(1.1) ────────────────────────────────────────────────── */
.st-home-head { padding-top: 28px; }
.st-home-ask { margin-top: 22px; }
.st-composer__head label { flex: 1 1 auto; }
.st-home-ask__lead { margin: 14px 0 8px; font-size: 13px; font-weight: 600; color: var(--st-body); }
.st-home-ask__go { margin-top: 16px; }
.st-home-ask__price { margin: 10px 0 0; display: flex; justify-content: center; gap: 8px; }
.st-home-ask__price b { color: var(--st-ink); }
.st-home-ask__bar { color: var(--st-line-field); }
.st-home-ask__warn[hidden] { display: none; }
.st-home-ask__warn { margin-top: 10px; }

/* 구역 */
.st-sec { padding-top: 26px; padding-bottom: 26px; }
.st-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.st-more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 13px;
  font-weight: 600; color: var(--st-action-press); }

/* 실제 풀이 발췌 */
.st-excerpt__tag { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--st-body); }
.st-excerpt__verdict { margin: 12px 0 0; font-family: var(--st-font-display); font-size: 20px;
  line-height: 30px; font-weight: 700; letter-spacing: -0.04em; }
.st-excerpt__why { margin: 8px 0 0; font-size: 14px; line-height: 24px; color: var(--st-body); }

/* 무료 세 줄 */
.st-rows { display: grid; }
.st-row { text-decoration: none; }
.st-row:first-child { border-top: 1px solid var(--st-line); }
.st-row__text { min-width: 0; display: grid; gap: 3px; }
.st-row__line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-row:hover .st-row__title { color: var(--st-action-press); }

/* 종합 입구 */
.st-whole { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; border: 1px solid var(--st-line); border-radius: var(--st-r); color: var(--st-ink); text-decoration: none; }
.st-whole__text { display: grid; gap: 4px; min-width: 0; }
.st-whole__text b { font-family: var(--st-font-display); font-size: 17px; letter-spacing: -0.03em; }
.st-whole__price { flex: 0 0 auto; display: grid; justify-items: end; gap: 2px; }
.st-whole__price b { font-size: 16px; }

/* 홈 본문 셸 — 셸 폭은 `.rn-mobile` 이 쥐고, 좌우 여백은 `.st-pad` 가 준다. */
.st-app-main { width: 100%; display: block; }

/* 예시 칩 — 2열 2행.
 * 시안의 칩은 한 줄짜리 짧은 말이라 `flex-wrap` 으로 두 개씩 섰지만, 실제 예시
 * 문장은 그보다 길어 360~430 어디서도 한 줄에 하나씩만 서 버린다. 그래서 두 열
 * 격자로 고정한다(앞서 검수에서 정한 규칙). 모양은 시안의 알약 그대로다. */
.st-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-chip { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; white-space: normal; word-break: keep-all; font-size: 14px; line-height: 20px;
  padding: 6px 12px; }

/* ── 질문 풀이 상품(1.4) ─────────────────────────────────────── */
.st-ask-head { padding-top: 24px; }
.st-ask-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.st-ask-head__row > div { flex: 1 1 auto; min-width: 0; }
.st-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-price { padding: 14px; border: 1px solid var(--st-line); border-radius: var(--st-r); }
.st-price p { margin: 0 0 4px; }
.st-price b { font-size: 20px; letter-spacing: -0.03em; }
.st-prices__fine { margin: 10px 0 0; }
.st-order { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.st-order li { display: flex; gap: 12px; align-items: flex-start; }
.st-order__no { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid;
  place-items: center; background: var(--st-action-soft); color: var(--st-action-press);
  font-size: 12px; font-weight: 700; }
.st-order__text { display: grid; gap: 2px; min-width: 0; }
.st-order__text b { font-size: 15px; }
.st-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.st-more-ex { margin-top: 10px; }
.st-more-ex > summary { min-height: 44px; display: flex; align-items: center; color: var(--st-action-press);
  font-size: 13px; font-weight: 600; list-style: none; cursor: pointer; }
.st-more-ex > summary::-webkit-details-marker { display: none; }
.st-home-ask__fine { margin: 10px 0 0; }
.st-faq > details { border-bottom: 1px solid var(--st-line); }
.st-faq > details > summary { min-height: 52px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; list-style: none; cursor: pointer; }
.st-faq > details > summary::-webkit-details-marker { display: none; }
.st-faq > details[open] > summary { color: var(--st-action-press); }

/* ── 질문 풀이 완성본(3.1) ───────────────────────────────────── */
.st-read-head { padding-top: 22px; }
.st-asked { margin: 6px 0 0; font-family: var(--st-font-display); font-size: 22px; line-height: 32px;
  font-weight: 700; letter-spacing: -0.04em; }
.st-read-head__who { margin: 8px 0 0; }
.st-verdict { margin-top: 20px; }
.st-verdict__label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--st-action-press); }
.st-read h3 { margin-top: 0; }
.st-timing { display: grid; }
.st-timing__when { font-size: 14px; font-weight: 700; }
.st-timing__why { font-size: 14px; line-height: 22px; color: var(--st-body); }
.st-timing__why .st-tl { margin-right: 6px; }
.st-chevron { transition: transform .15s ease; }
.st-again { display: grid; gap: 6px; }
.st-again b { font-family: var(--st-font-display); font-size: 17px; }
.st-again .st-more { justify-content: flex-start; }
.st-disclaimer { padding-bottom: 32px; }

/* `.st-pad` 를 다른 컴포넌트와 함께 쓸 때, 그 컴포넌트의 `padding` 줄임말이
   좌우 여백을 덮어쓴다(같은 특이도, 앞선 선언). 여기서 좌우만 다시 못 박는다 —
   세로 여백은 각 컴포넌트 것을 그대로 둔다. */
.st-pad { padding-inline: var(--st-gut); }

/* ── 사주 정보 폼(2.1) ───────────────────────────────────────
 * 칸의 이름과 훅은 그대로 두고 모양만 v9 규격으로 맞춘다. 라벨은 위로,
 * 컨트롤 높이는 52, 「모름」 줄은 눌리는 44px 로. */
.rn-bcard { border: 0; padding: 0; margin: 0; }
.rn-bcard__head { padding: 0 0 12px; border: 0; background: transparent; }
.rn-bcard__head > b { font-family: var(--st-font-display); font-size: 18px; letter-spacing: -0.03em; }
.rn-bcard__body { padding: 0; display: grid; gap: 18px; }
.rn-bcard__row { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; }
.rn-bcard__label { font-size: 14px; font-weight: 700; color: var(--st-ink); }
.rn-bcard__in { height: var(--st-h); min-height: var(--st-h); padding: 0 14px;
  border: 1px solid var(--st-line-field); border-radius: var(--st-r); font-size: 16px; }
.rn-bcard__in::placeholder { color: var(--st-muted); }
.rn-bcard__in:focus { border-color: var(--st-action); outline: none;
  box-shadow: 0 0 0 3px rgba(209,58,20,.12); }
.rn-bcard__in:disabled { background: var(--st-band); color: var(--st-disabled); }
.rn-bcard__sel select { height: var(--st-h); min-height: var(--st-h); padding: 0 34px 0 14px;
  border: 1px solid var(--st-line-field); border-radius: var(--st-r); background: var(--st-bg);
  font-size: 16px; color: var(--st-ink); }
.rn-bcard__sel select:focus { border-color: var(--st-action); outline: none;
  box-shadow: 0 0 0 3px rgba(209,58,20,.12); }
.rn-bcard__sel select:disabled { background: var(--st-band); color: var(--st-disabled); }
.rn-bcard__when, .rn-bcard__clock, .rn-bcard__place { display: grid; gap: 8px; }
.rn-bcard__when { grid-template-columns: 116px minmax(0, 1fr); }
.rn-bcard__place { grid-template-columns: 1fr 1fr; }
.rn-bcard__checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; }
.rn-bcard__check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 14px; color: var(--st-body); cursor: pointer; }
.rn-bcard__check input { width: 22px; height: 22px; margin: 0; accent-color: var(--st-action); }
.rn-bcard__note { margin-top: 14px; padding: 12px; border-radius: var(--st-r);
  background: var(--st-band); font-size: 13px; line-height: 20px; color: var(--st-body); }
.rn-bcard__note b { display: block; color: var(--st-ink); }
.rn-bcard__help { font-size: 13px; color: var(--st-muted); }
.rn-field.is-missing .rn-bcard__in, .rn-bcard__row.is-missing .rn-bcard__in {
  border: 1.5px solid var(--st-action-press); }

/* 성별 — 라디오를 그대로 두고 v9 의 두 칸 단추처럼 보이게 한다. */
.rn-bcard__sex { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rn-bcard__sex label { min-height: var(--st-h); display: flex; align-items: center;
  justify-content: center; gap: 6px; border: 1px solid var(--st-line-field);
  border-radius: var(--st-r); font-size: 16px; cursor: pointer; }
.rn-bcard__sex label:has(input:checked) { border-color: var(--st-ink); background: var(--st-ink); color: #FFFFFF; font-weight: 600; }
.rn-bcard__sex input { position: absolute; opacity: 0; width: 0; height: 0; }

/* 주문 폼의 걸음 표시와 바닥 단추 */
.rn-steps-bar { display: flex; gap: 4px; }
.rn-form-dock { position: sticky; bottom: 0; padding: 12px var(--st-gut) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--st-line); background: var(--st-bg); }
.rn-order-heading h1 { font-family: var(--st-font-display); font-size: 26px; line-height: 36px;
  letter-spacing: -0.04em; }

/* 상태 장면 · 무료 제목 줄 · 썸네일 */
.st-status__lede { max-width: 26em; margin: 8px 0 0; }
.st-status img { margin: 0 auto 14px; }
.st-free-head { padding-top: 22px; }
.st-thumb { display: block; width: 44px; }
.st-thumb__img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--st-r); }
.oops { display: grid; place-items: center; min-height: 66vh; text-align: center; }
.oops__card { display: grid; justify-items: center; gap: 8px; width: 100%; }
.oops__code { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--st-action-press); }
.oops__title { margin: 0; font-family: var(--st-font-display); font-size: 22px; line-height: 32px; letter-spacing: -0.04em; }
.oops__lede { margin: 0; max-width: 24em; font-size: 14px; line-height: 22px; color: var(--st-body); }
.oops__id { margin: 8px 0 0; font-size: 12px; color: var(--st-muted); }
.oops__home { margin-top: 22px; }
.oops__character { width: 96px; height: auto; }

/* 걸음 제목에 초점을 옮길 때 테두리를 그리지 않는다(키보드로 온 경우만 보인다). */
[data-rn-step-title]:focus { outline: none; }
[data-rn-step-title]:focus-visible { outline: 2px solid var(--st-ink); outline-offset: 3px; }
.rn-bcard__clock { grid-template-columns: minmax(0, 1fr); }

/* ── 공통 머리말(StBar) ──────────────────────────────────────
 * 높이 56, 마크 26, 워드마크 검정 19. 오른쪽 자리는 모두 44px 로 누른다.
 * 메뉴를 여는 방식(햄버거)과 훅은 그대로 둔다. */
.rn-nav { height: 56px; }
.rn-nav__inner { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 var(--st-gut); }
.rn-brand img { width: 26px; height: 26px; border-radius: 4px; }
/* 계정 이름표는 운영 화면의 치수를 그대로 쓴다. 44 높이에 14px 로 키웠더니
 * 56짜리 머리말을 혼자 채우고 글자도 워드마크만큼 굵어져 먼저 읽혔다.
 * 보이는 알약은 36, 누르는 자리는 `::before` 로 44 를 덮는다. */
.rn-nav__who { position: relative; margin-left: auto; margin-right: 4px;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px;
  font-size: 12.5px; font-weight: 600; color: var(--st-ink); }
.rn-nav__who::before { content: ""; position: absolute; inset: -5px 0; }
.rn-nav__menu { width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin-left: auto; color: var(--st-ink); }
/* 이름표가 서 있으면 메뉴 단추는 그 **옆에 붙는다.** 둘 다 `auto` 로 밀면 남은
 * 자리를 반씩 나눠 가져 이름표가 머리말 한가운데로 떠 있었다. 예전 조건
 * (`:only-of-type`)은 단추가 이 줄의 유일한 <button> 이라 이름표가 서 있을
 * 때도 늘 맞아서, 끄려던 밀기가 한 번도 꺼지지 않았다. */
.rn-nav__who:not([hidden]) + .rn-nav__menu { margin-left: 0; }

/* ── 결제(2.3) ───────────────────────────────────────────────── */
.rn-pay__main { padding: 0 var(--st-gut) 40px; }
.rn-pay .card { border: 1px solid var(--st-line); border-radius: var(--st-r-lg); background: var(--st-bg); padding: 16px; }
.rn-pay .card + .card { margin-top: 12px; }
.rn-pay .product__name { font-family: var(--st-font-display); font-size: 18px; letter-spacing: -0.03em; }
.rn-pay .kv__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--st-line); font-size: 13px; }
.rn-pay .kv__row:last-child { border-bottom: 0; }
.rn-pay .kv__row dt { color: var(--st-muted); margin: 0; }
.rn-pay .kv__row dd { margin: 0; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.rn-pay .amount__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; }
/* 마지막 줄만 먹 2px 윗선에 26/34 — 이 화면에서 제일 큰 글자다 (v9 · 2.3). */
.rn-pay .amount__row--total { border-top: 2px solid var(--st-ink); padding-top: 14px; }
.rn-pay .amount__row--total dt { font-size: 15px; font-weight: 700; }
.rn-pay .amount__row--total b { font-family: var(--st-font-ui); font-size: 26px; line-height: 34px;
  font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rn-pay .coupon input { height: 44px; border-radius: var(--st-r); border: 1px solid var(--st-line-field); }
.rn-pay #payment-button { height: var(--st-h); border-radius: var(--st-r); font-size: 16px; font-weight: 700; }

/* 결제 단추의 비활성 — 색만 옅게 하지 않고 v9 의 비활성 면을 쓴다. */
.rn-pay #payment-button:disabled, .rn-pay .btn--accent:disabled {
  background: var(--st-fill); color: var(--st-disabled); border-color: transparent; opacity: 1;
}
/* 쿠폰 「적용」은 보조 단추다. */
.rn-pay .coupon__apply { height: 44px; border-radius: var(--st-r); background: var(--st-bg);
  border: 1px solid var(--st-line-field); color: var(--st-ink); font-size: 14px; font-weight: 700; }
.rn-pay .coupon__apply:hover { background: var(--st-band); }
.rn-pay__withdrawal-consent span { text-align: left; }

/* ════════════════════════════════════════════════════════════════
 * 기준선 한 벌 — 좌측 16, 제목 계단, 컨트롤 높이.
 *
 * 옛 화면들은 저마다 `main` 에 14·16·18·20·22·24·26px 을 주고 있었다. 그래서
 * 화면을 옮겨 다니면 글이 시작하는 자리가 매번 달라졌다. 여기서 **그 규칙들을
 * 같은 자리에서 다시 정의**한다 — 덧칠(!important)이 아니라, 같은 특이도의
 * 나중 선언으로 값을 바꾼다. 세로 여백은 각 화면 것을 그대로 둔다.
 * ════════════════════════════════════════════════════════════════ */
.rn-form-wrap, .rn-form-wrap--free, .rn-me-form, .rn-order-wrap, .rn-account-wrap,
.rn-wait, .rn-free-gate__main, .rn-expired, .rn-pay__main, .rn-section,
.rn-detail__hero, .rn-detail__body > section, .rn-trust-main, .rn-trust-section--hanji,
.doc__main, .pay__main, .rn-me-result, .rn-duo-result, .rn-days-result {
  padding-inline: var(--st-gut);
  width: 100%;
  max-width: none;
}
/* 카드·패널 안쪽은 제 여백을 쓰되 값을 하나로 맞춘다. */
.rn-bcard__body, .rn-form__group, .rn-trust-card, .rn-pay .card, .rn-account-panel {
  padding-inline: 16px;
}
.rn-bcard__body { padding-inline: 0; }
/* 전면(full-bleed)으로 깔리는 띠만 여백을 뺀다. */
.rn-form-dock, .st-sticky-cta { padding-inline: var(--st-gut); }

/* 제목 계단 — 바닥값(홈 30/40 · 화면 26/36 · 구역 18/28 은 클래스가 정한다). */
:where(.rn-body h1) { font-family: var(--st-font-display); font-size: 26px; line-height: 36px;
  font-weight: 700; letter-spacing: -0.04em; }
:where(.rn-body h2) { font-family: var(--st-font-display); font-size: 20px; line-height: 30px;
  font-weight: 700; letter-spacing: -0.035em; }
:where(.rn-body h3) { font-family: var(--st-font-ui); font-size: 16px; line-height: 26px;
  font-weight: 700; letter-spacing: -0.02em; }
.rn-body .st-h-home { font-size: 30px; line-height: 40px; letter-spacing: -0.045em; }
.rn-body .st-h-page { font-size: 26px; line-height: 36px; letter-spacing: -0.04em; }
.rn-body .st-h-sec { font-family: var(--st-font-ui); font-size: 18px; line-height: 28px; letter-spacing: -0.03em; }
.rn-body .st-read h3 { font-family: var(--st-font-ui); font-size: 18px; line-height: 28px; letter-spacing: -0.03em; }
.rn-body .st-asked { font-size: 22px; line-height: 32px; }

/* 본문·보조 글 — **기본값만** 낮은 특이도로 깐다.
 *
 * 전역 규칙을 뒤에 더하면, 이미 제 크기를 정해 둔 컴포넌트(결론·풀이 본문
 * 같은)를 같은 특이도의 나중 선언으로 덮어 계층이 다시 무너진다. 그래서
 * `:where()` 로 특이도 0 짜리 바닥값을 깔고, 컴포넌트가 스스로 정한 값은
 * 무엇이든 이 위에 그대로 선다.
 *
 * 쓰는 단: 본문 15/24 · 보조 13/20 · 캡션 12/18 · 읽는 글 17/30. */
:where(.rn-body p, .rn-body li) { font-size: 15px; line-height: 24px; }
:where(.rn-body .st-sub) { font-size: 13px; line-height: 20px; }
:where(.rn-body .st-cap) { font-size: 12px; line-height: 18px; }
:where(.rn-body .st-lede) { font-size: 15px; line-height: 24px; }
.st-read p { font-family: var(--st-font-display); font-size: 17px; line-height: 30px; }

/* 컨트롤 높이 — 52 하나. 체크·라디오 줄은 44. */
:where(.rn-body input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  .rn-body select, .rn-body .rn-btn, .rn-body .st-btn) { min-height: var(--st-h); }
:where(.rn-body textarea) { min-height: 120px; }

/* 긴 한국어 줄바꿈 — 낱말 가운데서 끊지 않는다. */
.rn-body h1, .rn-body h2, .rn-body h3, .rn-body p, .rn-body li, .rn-body label,
.rn-body .st-row__title, .rn-body .st-chip { word-break: keep-all; overflow-wrap: anywhere; }

/* ── 풀이함·계정(3.4 · 5.x) ──────────────────────────────────
 * 큰 카드 안에 또 테두리를 두르고 또 여백을 주면 폭만 줄어든다. 바깥은 구역,
 * 안쪽은 줄로 나눈다. */
.rn-library-card { border: 0; border-radius: 0; padding: 0; background: transparent; }
/* 아직 못 읽는 줄도 같은 면이다. 옛 규칙이 회색 면과 점선 테두리를 칠해서,
   줄마다 안쪽 여백 없이 글이 면 끝에 붙고 목록이 얼룩덜룩했다.
   기다리는 중이라는 말은 딱지와 문장이 이미 하고 있다 (v9 · 3.4). */
.rn-library-card.is-waiting { background: transparent; border-style: none; }
.rn-library-card + .rn-library-card { border-top: 1px solid var(--st-line); margin-top: 0; padding-top: 16px; }
.rn-library-card__body { padding: 0 0 16px; }
.rn-library-card__foot { padding: 0 0 16px; }
.rn-account-tabs { margin-inline: calc(-1 * var(--st-gut)); padding-inline: var(--st-gut); border-bottom: 1px solid var(--st-line); }
.rn-account-tabs a { min-height: 44px; padding: 0 10px; font-size: 14px; }
.rn-account-tabs a.is-active { border-bottom: 2px solid var(--st-action); font-weight: 700; color: var(--st-ink); }
.rn-account-head { padding: 24px 0 16px; }
/* 옛 규칙이 `.rn-account-page .rn-account-panel`(0,2,0)로 18px 안쪽 여백을
   다시 주고 있었다 — 같은 화면에서 제목은 16, 구역 글은 34 에서 시작했다. */
.rn-account-panel, .rn-account-page .rn-account-panel {
  padding: 16px 0; border: 0; border-top: 1px solid var(--st-line);
  border-radius: 0; background: transparent; }
.rn-account-page .rn-account-panel.rn-profile-editor { padding-inline: 0; }
.rn-account-panel > h2 { font-size: 18px; line-height: 28px; }

/* ── 완성본 잔손질 ───────────────────────────────────────────
 * 시기 줄: 좁은 칸에 간지를 욱여넣지 않는다. 날짜와 유형이 한 줄, 해석이 다음 줄. */
.st-timing__row { display: block; padding: 14px 0; border-bottom: 1px solid var(--st-line); }
.st-timing__row:first-child { border-top: 1px solid var(--st-line); }
.st-timing__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.st-timing__when { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.st-timing__why { margin: 6px 0 0; font-size: 14px; line-height: 22px; color: var(--st-body); }

/* 할 일: 문장 안의 강조가 제 줄을 차지하지 않게 한다(격자 자식이 되지 않도록). */
.st-order__text { display: block; }
.st-order__text b { display: inline; font-weight: 700; }
.st-order li { align-items: baseline; }

/* 「필요한 시기」·「이렇게 해 보세요」 — 구역 제목 아래 숨. 본문 소제목과 같은 14 를 둔다.
   0 이면 제목이 첫 줄(시기 표의 윗줄·할 일 1번)에 붙어 한 덩어리로 보였다. */
.tp-skin--read .st-band > .st-h-sec { margin-bottom: 14px; }

/* 「내가 적은 상황 보기」 — 다른 펼침(계산 근거)과 같은 모양: 글 뒤에 꺾쇠, 누르면 뒤집힌다. */
.tp-inputs-row .tp-inputs { margin: 4px 0 0; }
.tp-inputs-row .tp-inputs > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--st-body); cursor: pointer; }
.tp-inputs-row .tp-inputs > summary::-webkit-details-marker { display: none; }
.tp-inputs-row .tp-inputs[open] > summary .st-chevron { transform: rotate(180deg); }
.tp-inputs-row .tp-inputs dl { margin: 6px 0 0; }

/* 결론과 그 아래 근거 상자 사이에 숨 쉴 자리. 본문 단락은 너무 벌어지지 않게. */
.st-verdict { padding-bottom: 20px; }
.st-verdict + .st-pad .st-evidence { margin-top: 14px; }
.st-read p { margin: 0 0 14px; }
.st-read p:last-child { margin-bottom: 0; }
.st-evidence { margin: 4px 0 18px; }

/* 홈 — 가격 줄과 다음 구역 사이 */
.st-home-ask { padding-bottom: 26px; }

/* ── 카드 여백 한 벌 ─────────────────────────────────────────
 * 카드 안에 또 카드를 두르지 않는다. 바깥 여백 16 + 카드 여백 16 = 글은 32에서
 * 시작하고, 그 안에서 또 여백을 주지 않는다. */
.rn-body .card { padding: 16px; border: 1px solid var(--st-line); border-radius: var(--st-r-lg);
  background: var(--st-bg); }
.rn-body .card .card { padding: 0; border: 0; border-radius: 0; }
.rn-body .card__body, .rn-body .card > .kv, .rn-body .stage { padding: 0; }
.rn-free-gate__card, .rn-account-card { padding: 16px; }
.rn-review-form, .rn-review-card { padding: 0; border: 0; }
.rn-body .form__row, .rn-body .field { padding-inline: 0; }

/* 옛 화면의 제목 행간(`normal`)을 계단에 맞춘다. */
:where(.rn-body h1, .rn-body h2, .rn-body h3, .rn-body h4) { line-height: 1.35; }

/* 공통 푸터와 옛 wrap — 바깥 여백은 하나(16)로. */
.rn-footer { padding-inline: var(--st-gut); }
.wrap, .pay__wrap, .doc__wrap { margin-inline: 0; padding-inline: 0; width: 100%; max-width: none; }

/* 계정 안의 주문 카드 — 패널이 이미 구역을 나눈다. 카드마다 또 테두리를 두르지
   않고 줄로 나눈다(폭을 돌려준다). */
.rn-account-panel { padding: 16px 0; }
.rn-account-order { padding: 16px 0; border: 0; border-radius: 0; border-top: 1px solid var(--st-line); background: transparent; }
.rn-account-order:first-of-type { border-top: 0; }
.rn-account-order + .rn-account-order { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════
 * 주문 폼 — 카드 한 벌 (v9 · 2.1/2.2)
 *
 * 라벨은 위, 칸은 아래. 카드 안쪽 여백 16. 긴 글 칸은 최소 120.
 * 예전에는 60px 라벨 열 옆에 칸을 붙이고, 카드 머리를 두 열로 갈라 뒀다 —
 * 제목과 설명이 나란히 서고 칸은 한 줄 높이로 눌렸다.
 * ════════════════════════════════════════════════════════════════ */
.rn-bcard, .tp-situation, .tp-pair {
  border: 1px solid var(--st-line); border-radius: var(--st-r-lg);
  background: var(--st-bg); padding: 16px; margin: 0 0 14px;
}
.rn-bcard__head { display: block; padding: 0 0 14px; border: 0; background: transparent; }
.rn-bcard__head > b { display: block; font-family: var(--st-font-display); font-size: 18px;
  line-height: 26px; letter-spacing: -0.03em; }
.rn-bcard__head > small { display: block; margin-top: 4px; font-size: 13px; line-height: 20px;
  color: var(--st-body); }
.rn-bcard__body { padding: 0; display: grid; gap: 16px; }
.rn-bcard__row, .rn-bcard__row--stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.rn-bcard__label { font-size: 14px; font-weight: 700; color: var(--st-ink); }
.rn-bcard__label small { font-weight: 400; color: var(--st-muted); }
.rn-bcard__area { min-height: 120px; height: auto; padding: 12px 14px; line-height: 26px; resize: vertical; }
.rn-bcard__in[type="date"], .rn-bcard__in[type="text"], .rn-bcard__in[type="email"] { height: var(--st-h); }
.rn-order-heading { padding: 18px 0 12px; }
.rn-order-heading h1 { font-size: 26px; line-height: 36px; letter-spacing: -0.04em; }
.rn-order-heading span { font-size: 13px; font-weight: 700; color: var(--st-action-press); }
.rn-form-wrap__lede { font-size: 15px; line-height: 24px; color: var(--st-body); margin: 8px 0 18px; }

/* 두 사람 고르는 칸 — 설명과 값 사이에 자리를 둔다. */
.tp-pair label, .rn-form__group--pair label { display: flex; gap: 12px; align-items: flex-start; }
.tp-pair input[type="checkbox"], .rn-form__group--pair input[type="checkbox"] {
  width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--st-action); }
.tp-pair__price, [data-tp-price] { display: block; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--st-line); font-size: 15px; font-weight: 700; }

/* 두 사람 고르는 칸 — 카드 안에 또 카드를 두르지 않는다. */
.tp-pair { border: 0; border-radius: 0; padding: 0; margin: 0; background: transparent; }
.tp-pair b { font-size: 15px; font-weight: 700; }
.tp-pair small { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--st-body); }
.tp-pair__price { color: var(--st-ink); }

/* ── 옛 화면들의 제목을 계단에 맞춘다 ─────────────────────────
 * `:where()` 바닥값은 컴포넌트 규칙에 지므로, 화면 래퍼를 짚어 같은 무게로 준다.
 * 홈(30/40)만 예외다. */
.rn-form-wrap h1, .rn-account-wrap h1, .rn-me-form h1, .rn-order-wrap h1,
.doc__main h1, .pay__main h1, .rn-expired h1, .rn-free-gate h1, .rn-free-gate__main h1,
.rn-me-result h1, .rn-duo-result h1, .rn-days-result h1, .rn-detail__hero h1,
.rn-section h1, .rn-trust-hero h1 {
  font-family: var(--st-font-display); font-size: 26px; line-height: 36px;
  font-weight: 700; letter-spacing: -0.04em;
}
/* 구역 제목은 고딕 18/28 이다 (v9 타이포 계단). 명조 20/30 으로 두니 화면
   제목(명조 26/36)과 한 걸음밖에 차이가 안 나 어디가 한 장의 머리인지
   읽히지 않았다. 명조는 화면 제목 · 결론 · 본문 글줄의 몫이다. */
.rn-form-wrap h2, .rn-account-wrap h2, .doc__main h2, .pay__main h2,
.rn-me-result h2, .rn-duo-result h2, .rn-days-result h2, .rn-section h2 {
  font-family: var(--st-font-ui); font-size: 18px; line-height: 28px;
  font-weight: 700; letter-spacing: -0.03em;
}
.rn-form-wrap h3, .rn-account-wrap h3, .doc__main h3, .pay__main h3, .rn-section h3 {
  font-family: var(--st-font-ui); font-size: 16px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em;
}
.rn-section__head h2, .rn-result-card h2, .rn-me-result-hero h2, .doc__head h1, .doc h1 {
  font-family: var(--st-font-display); font-size: 20px; line-height: 30px;
  font-weight: 700; letter-spacing: -0.035em;
}
.doc__head h1, .doc h1 { font-size: 26px; line-height: 36px; letter-spacing: -0.04em; }

/* 약관·소개 같은 긴 글 화면의 셸도 같은 16 으로. (`.doc` 가 20 을 쥐고 있었다) */
.doc, .rn-policy-doc, .rn-page { padding-inline: 0; }
.doc__main, .doc__head { padding-inline: var(--st-gut); }
.doc__main ul, .doc__main ol { padding-left: 20px; }
.rn-section__head h2 { font-size: 20px; line-height: 30px; }

/* ── 메뉴 시트(6.6) ──────────────────────────────────────────
 * 시트는 자바스크립트가 만든다. 치수(모서리·머리 여백·목록 여백·줄 높이·글자 크기)는
 * 운영 화면(renovation.css) 그대로 둔다 — v9 로 덮었더니 목록이 머리에 붙고 줄이 넓어져
 * 운영보다 답답해 보였다(2026-09-26 운영과 맞춤). 여기서는 색만 토큰으로. */
.rn-menu-sheet { border-color: var(--st-line); }
.rn-menu-account > span { color: var(--st-action-press); }
.rn-menu-account > span i { background: var(--st-action); }

/* ── 알림 줄(ST/Toast · 6.7) ─────────────────────────────────
 * 전용 토스트 컴포넌트는 없고, 자리 고정 알림이 그 일을 한다. 모양을 한 벌로. */
.rn-account-notice, .rn-menu-sheet__status, [data-status]:not(:empty), [data-error]:not(:empty) {
  border-radius: var(--st-r); font-size: 13px; line-height: 20px;
}
.rn-account-notice { padding: 12px 14px; background: var(--st-band); border: 0; }
.rn-account-notice.is-success { background: var(--st-wood-soft); color: var(--st-wood); }
[data-error]:not(:empty) { color: var(--st-action-press); }

/* 후기 화면의 별점 줄이 왼쪽 끝에 붙던 자리 */
.rn-review-stars, .review__stars { padding-inline: 0; }
.rn-body .stage { padding-inline: 0; }

/* 옛 먹색 머리말·바닥글(site.css `.nav`·`.footer`)도 흰 바탕으로.
   후기 화면 하나만 이 마크업을 쓴다. 워드마크는 검정 그대로. */
.rn-body .nav { background: var(--st-bg); border-bottom: 1px solid var(--st-line); color: var(--st-ink); }
.rn-body .nav a, .rn-body .nav__link { color: var(--st-ink); }
.rn-body .footer { background: var(--st-bg); color: var(--st-body); border-top: 1px solid var(--st-line); padding-inline: var(--st-gut); }
.rn-body .footer a { color: var(--st-body); }
.rn-body .seal { background: var(--st-action); color: #FFFFFF; }
.rn-body .field { display: grid; gap: 8px; }
.rn-body .field > label, .rn-body .field__label { font-size: 14px; font-weight: 700; color: var(--st-ink); }
.rn-body .review__row { display: grid; gap: 8px; }

/* 옛 먹색 폼(site.css `.input`·`.select`·`textarea`)도 흰 칸으로. */
.rn-body .input, .rn-body .select, .rn-body select, .rn-body textarea.input,
.rn-body .review__text, .rn-body .form textarea, .rn-body .form select {
  background: var(--st-bg); color: var(--st-ink); border: 1px solid var(--st-line-field);
  border-radius: var(--st-r); font-size: 16px; font-weight: 400; padding: 0 14px;
}
.rn-body textarea.input, .rn-body .form textarea, .rn-body .review__text {
  min-height: 120px; padding: 12px 14px; line-height: 26px;
}
.rn-body .input:focus, .rn-body .select:focus, .rn-body select:focus, .rn-body textarea:focus {
  border-color: var(--st-action); outline: none; box-shadow: 0 0 0 3px rgba(209,58,20,.12);
}
.rn-body .input::placeholder, .rn-body textarea::placeholder { color: var(--st-muted); }

/* 큰 CTA 의 붉은 그림자를 걷는다 — 다른 단추와 같은 면으로. */
.rn-body .btn, .rn-body .btn--accent, .rn-body .btn--block { box-shadow: none; }

/* ── 결제 화면의 상품 카드 ───────────────────────────────────
 * 그림과 제목·요약이 한 줄, 상세와 고지는 그 아래 전체 너비. 문구는 그대로다. */
.rn-pay .product { display: block; }
.rn-pay .product__head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.rn-pay .product--noshot .product__head { grid-template-columns: minmax(0, 1fr); }
.rn-pay .product__lead { min-width: 0; }
.rn-pay .product__body { margin-top: 14px; display: grid; gap: 10px; }
.rn-pay .product__name { font-family: var(--st-font-display); font-size: 18px; line-height: 26px; letter-spacing: -0.03em; margin: 0; }
.rn-pay .product__desc { margin: 6px 0 0; font-size: 14px; line-height: 22px; color: var(--st-body); }
/* 「상품 자세히」는 구역 제목이 아니라 펼침이다. 주홍 굵은 글씨로 두면 값보다
   먼저 눈에 들어온다 (v9 · 2.3). */
.rn-pay .product__more > summary { min-height: 44px; display: flex; align-items: center;
  justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--st-ink);
  list-style: none; cursor: pointer; }
.rn-pay .product__more > summary::-webkit-details-marker { display: none; }
.rn-pay .product__more > summary::after { content: "⌄"; color: var(--st-muted); }
.rn-pay .product__more[open] > summary::after { content: "⌃"; }
.rn-pay .product__points { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 20px; color: var(--st-body); }
.rn-pay .product__kind, .rn-pay .product__period, .rn-pay .product__method { margin: 0; font-size: 13px; line-height: 20px; color: var(--st-body); }

/* 옛 먹색 화면용 보조 색(`--on-ink-soft`·`--on-ink-dim`)은 흰 바탕에서 2:1 밖에
   안 나온다. 바탕이 흰색으로 바뀌었으니 그 값도 읽히는 쪽으로 옮긴다.
   보조 정보를 비활성 색으로 쓰지 않는다. */
.rn-body {
  --on-ink-soft: var(--st-body);
  --on-ink-dim: var(--st-muted);
  --muted: var(--st-body);
  --on-ink: var(--st-ink);
  --field: var(--st-bg);
  --hairline: var(--st-line);
  --hairline-strong: var(--st-line-field);
}
/* 어두운 판(먹색 결과 카드·잠금 카드)은 원래 값을 되찾는다. 여기서는 옅은
   회색이 읽히는 쪽이다. */
.rn-body .site, .rn-body .rn-result-card--pick, .rn-body .rn-open-gate,
.rn-body [data-rn-result-kind] .rn-me-card, .rn-body .rn-share-card {
  --on-ink-soft: #c0b8b4;
  --on-ink-dim: #a8a09c;
  --on-ink: #ffffff;
}

/* 흰 바탕 위의 주홍 **글자**는 눌린 색(#B32F13, 4.9:1)을 쓴다.
   면(버튼 배경)에는 기본 주홍을 그대로 쓴다. */
/* 글 속 링크만. `a` 전체를 잡으면 단추(`.rn-btn`·`.st-btn`)와 브랜드 링크까지
   물든다 — 로고가 주홍이 됐던 그 실수다. 역할이 분명한 자리에만 준다. */
:where(.rn-body p, .rn-body li, .rn-body .st-sub, .rn-body .st-cap,
  .rn-body .rn-free-note, .rn-body .card__note, .rn-body .doc__main) a {
  color: var(--st-action-press);
}
.rn-free-micro span.is-strong, .rn-body .rn-text-link { color: var(--st-action-press); }
.st-home-ask__bar { color: var(--st-muted); }

/* 기다리는 화면의 남은 단계 — 비활성 색(1.5:1)이 아니라 읽히는 보조 색으로.
   지금 하는 단계와는 굵기와 먹색으로 가른다. */
.rn-wait__steps li { color: var(--st-body); }
.rn-wait__steps li.on { color: var(--st-ink); font-weight: 700; }
.rn-wait__steps li.done { color: var(--st-muted); }

/* 「계산이 끝났어요」 같은 표식 글자도 눌린 주홍으로. */
.rn-free-gate__badge, .rn-badge--free, .st-badge--free { color: var(--st-action-press); }

/* 옅은 강조 면 위의 주홍 글자도 눌린 색으로(4.9:1). */
.rn-free-gate__eyebrow, .rn-bcard__check span, label .is-accent,
.rn-duo-how span, .rn-days-question span { color: inherit; }
.rn-free-gate__eyebrow { color: var(--st-action-press); }
.rn-body label span[style*="209"], .rn-body .rn-duo-how [aria-pressed="true"] { color: var(--st-action-press); }

/* 주홍 면 위의 값은 흰 글자로. 같은 색끼리 겹쳐 값이 안 보이던 자리다. */
.rn-buy-row--lead, .rn-buy-row--lead b, .rn-buy-row--lead span { color: #FFFFFF; }

/* ── 어두운 결과 카드(무료 3종 · 공유 이미지) ────────────────
 * 카드는 먹색 판이다. 그 위의 모든 줄은 어두운 면 + 밝은 글자로 맞춘다.
 * 첫 줄만 옅은 살구 면에 옅은 글자라 읽히지 않았다(점수와 해석은 그대로). */
.rn-type-chips span { background: rgba(255, 255, 255, .10); color: #F7F6F4; border-left-color: #79B0A3; }
.rn-type-chips span:nth-child(2) { background: rgba(209, 58, 20, .22); border-left-color: #F78668; }
.rn-type-chips span:nth-child(3) { background: rgba(19, 87, 53, .28); border-left-color: #79B0A3; }
.rn-type-chips span:nth-child(4) { background: rgba(255, 255, 255, .08); border-left-color: #C0B8B4; }
.rn-type-chips span:nth-child(5) { background: rgba(49, 95, 153, .28); border-left-color: #8FB3DD; }
.rn-type-chips span em, .rn-type-chips span small { color: #D6D0CA; }
.rn-duo-cover__axes small { color: #D6D0CA; }
.rn-cover-pillar em { color: #C0B8B4; }

/* 주문 폼 바닥의 붙은 단추가 마지막 칸을 가리지 않게 자리를 비워 둔다. */
.rn-form-wrap .rn-form, .rn-order-wrap .rn-form { padding-bottom: 8px; }
.rn-form-wrap, .rn-order-wrap { padding-bottom: 96px; }

/* 둘 중 하나 고르는 칸(상대 정보 방법) — 두 칸 단추와 같은 규격으로. */
.rn-bcard__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rn-bcard__seg label { min-height: var(--st-h); display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--st-line-field); border-radius: var(--st-r);
  font-size: 15px; cursor: pointer; }
.rn-bcard__seg label:has(input:checked) { border-color: var(--st-ink); background: var(--st-ink); color: #FFFFFF; font-weight: 600; }
.rn-bcard__seg input { position: absolute; opacity: 0; width: 0; height: 0; }

/* 동의·선택 체크 줄 — 상자 22px, 누를 수 있는 줄 44px. 폼 안의 `.rn-check` 가
   18px 상자에 24px 줄이라 화면에서 유독 작아 보였다. */
.rn-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 4px 0;
  font-size: 14px; line-height: 22px; color: var(--st-ink); }
.rn-check input[type="checkbox"], .rn-check input[type="radio"] {
  width: 22px; height: 22px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--st-action);
}
.rn-check input:focus-visible { outline: 2px solid var(--st-ink); outline-offset: 2px; }
.rn-check small, .rn-check .rn-check__note { display: block; margin-top: 2px; font-size: 13px;
  line-height: 20px; color: var(--st-body); }

/* 빈 자리(3.5) — 점선 상자와 작은 링크 대신 장면 + 눌리는 단추. */
.rn-account-empty { border: 0; background: transparent; padding: 32px 0 24px; }
.st-status__go { margin-top: 20px; max-width: 320px; }
.st-status__aside { margin-top: 12px; }

/* 계정 안의 무료 세 줄도 카드가 아니라 줄로. */
.rn-account-panel .rn-door, .rn-account-panel .st-row { border: 0; border-bottom: 1px solid var(--st-line);
  border-radius: 0; background: transparent; padding: 14px 0; min-height: 64px; }
.rn-account-panel .rn-door:last-child { border-bottom: 0; }

/* 단추로 쓰는 링크에는 밑줄을 긋지 않는다.
   옛 규칙이 `.rn-account-empty a`(0,2,0)로 잠가 둔 자리가 있어 같은 무게로 준다. */
.st-btn, .rn-btn, .btn,
.rn-account-empty .st-btn, .rn-account-empty .rn-btn { text-decoration: none; }

/* 풀이함 아래 「더 물어보고 싶다면」 — 카드 대신 줄. */
.rn-library-more { border: 0; border-top: 1px solid var(--st-line); border-radius: 0;
  background: transparent; padding: 20px 0 0; }
.rn-library-more h2 { font-size: 18px; line-height: 28px; }
.rn-library-more a { display: flex; align-items: center; gap: 8px; min-height: 60px;
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--st-line); border-radius: 0;
  background: transparent; }
.rn-library-more a:last-of-type { border-bottom: 0; }
.rn-library-more a b { font-size: 15px; font-weight: 700; }
.rn-library-more a i { margin-left: auto; color: var(--st-muted); font-style: normal; }

/* ST/Badge — 「무료」는 옅은 주홍 면에 눌린 주홍 글자(v9 규격). 화면마다
   초록·회색으로 갈리던 것을 한 벌로 모은다. */
.rn-badge--free, .rn-library-more span, .rn-account-panel .rn-badge--free {
  color: var(--st-action-press); background: var(--st-action-soft); border-color: transparent;
  padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 700;
}
.rn-badge--member { color: var(--st-body); background: var(--st-fill); border-color: transparent; }

/* 바닥에 붙는 단추 위의 값 한 줄 (v9 · 1.2 · 2.2) */
.rn-form-dock__price { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 10px; font-size: 14px; color: var(--st-body); }
.rn-form-dock__price b { font-size: 20px; font-weight: 700; color: var(--st-ink);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* 결론 앞의 작은 네모, 발췌의 인용선 (v9 · 1.1 · 3.1) */
.st-verdict__label { display: flex; align-items: center; gap: 6px; }
.st-verdict__label i { width: 7px; height: 7px; background: var(--st-action); border-radius: 1px; }
blockquote.st-excerpt__why { margin: 10px 0 0; padding: 2px 0 2px 14px;
  border-left: 3px solid var(--st-action); font-family: var(--st-font-display);
  font-size: 15px; line-height: 26px; color: var(--st-read); }

.oops__card { text-align: left; justify-items: stretch; }
.oops__title { font-size: 22px; line-height: 32px; }
.oops__lede { max-width: none; }
.oops__actions { display: grid; gap: 10px; margin-top: 24px; width: 100%; }
.oops { place-items: start; padding-top: 72px; min-height: 60vh; }
.oops__card { border: 0; border-radius: 0; background: transparent; padding: 0; max-width: none; }
.oops__actions { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.oops__actions .st-btn { width: 100%; }



/* 결제 결과(2.5 · 2.6) */
.rn-pay-result { padding: 48px 0 32px; }
.rn-pay-result__title { margin: 16px 0 0; }
.rn-pay-result__kv { width: 100%; margin: 24px 0 0; display: grid; gap: 0; }
.rn-pay-result__kv .kv__row { display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--st-line); font-size: 14px; text-align: left; }
.rn-pay-result__kv .kv__row:last-child { border-bottom: 0; }
.rn-pay-result__kv dt { color: var(--st-muted); margin: 0; }
.rn-pay-result__kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.rn-pay-result__actions { width: 100%; display: grid; gap: 10px; margin-top: 28px; }
.rn-pay-result__actions .btn, .rn-pay-result__actions .st-btn { width: 100%; }
.rn-pay-result .result__lookup { margin-top: 14px; font-size: 13px; color: var(--st-body); }

/* 날짜 입구(1.3) */
.st-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--st-body); }
.st-day__tags { margin: 0 0 8px; }
.st-day__period { color: var(--st-muted); }
.st-day .st-row__text { gap: 2px; }

/* ══ v9 · 01 홈 · 상품 — 시안 한 줄씩 맞추기 ═════════════════════════ */

/* 비활성 단추가 흰 글씨로 사라지지 않게. 위의 `.rn-body .st-btn--primary`(0,2,0)
   가 뒤에 있어 색을 가져갔다. :disabled 를 더해(0,3,0) 같은 싸움에서 되찾는다. */
.rn-body .st-btn:disabled, .rn-body .st-btn[disabled] {
  background: var(--st-fill); color: var(--st-disabled); border-color: transparent; }

/* 질문 상자 — 안내 줄이 문단 여백을 물고 와 상자 아래가 두 번 벌어졌다. */
.st-composer__hint { margin: 0; }

/* 홈 머리글 소개 줄만 10px (주문 화면 8px 는 그대로). */
.st-home-head .st-lede { margin-top: 10px; }

/* 구역 오른쪽 「전체 예시 보기」는 청록. */
.st-more { color: var(--st-wood); }

/* 실제 풀이 발췌 — 먹 2px 윗선 아래로 배지 · 질문 · 결론 · 근거. */
.st-excerpt { margin-top: 6px; padding-top: 18px; border-top: 2px solid var(--st-ink); }
.st-excerpt__tag { font-size: 12px; font-weight: 600; }
.st-excerpt__q { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--st-muted); }
.st-excerpt__verdict { font-size: 19px; letter-spacing: -0.035em; }
blockquote.st-excerpt__why { font-size: 16px; line-height: 28px; }

/* 종합 입구 — 시안은 먹색 카드에 흰 글씨. */
.st-whole { padding: 18px 16px; background: var(--st-ink); border-color: var(--st-ink); }
.rn-body a.st-whole, .st-whole { color: #FFFFFF; }
.st-whole__text b { font-size: 18px; line-height: 26px; }
.st-whole .st-sub { color: #D9D3CC; }
.st-whole__price b, .st-whole__price .st-num { color: #FFFFFF; }
.st-whole .st-cap { color: #FFB9A3; }

/* 「전체 예시 보기」 — `.rn-body a`(0,1,1)를 이기게 한 줄 올린다. */
.rn-body a.st-more { color: var(--st-wood); }

/* 바닥글 — 시안(1.1)은 옅은 띠 위에 12.5px 링크 줄과 12/19 안내. */
.rn-footer { padding: 20px var(--st-gut) 28px; background: var(--st-band); }
.rn-footer__links { gap: 6px 14px; font-size: 12.5px; }
.rn-footer__biz, .rn-footer__notice { font-size: 12px; line-height: 19px; }
.rn-footer__biz { margin-top: 14px; padding-top: 14px; border-top-color: var(--st-line); }
.rn-footer__notice { margin-top: 12px; color: var(--st-muted); }

/* ── 상품 상세(v9 · 1.4~1.6) ──────────────────────────────────────────── */

/* 상세의 구역 제목은 고딕 18/28 — 화면 제목(명조)과 구역을 눈으로 가른다. */
/* 예전 규칙이 `.rn-detail__body > section > h2`(0,1,2)라 같은 무게로 맞춘다. */
.rn-detail__body > section > h2, .rn-detail-q h2 { font-family: var(--st-font-ui);
  font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -0.03em; }
.rn-detail__body > section > p { font-size: 15px; line-height: 24px; }

/* 값 한 줄 — 숫자는 고딕(ST/PriceSummary). */
.rn-detail__price { font-family: var(--st-font-ui); font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* 상품 화면의 「이렇게 답해 드려요」는 **이름 + 설명** 한 쌍이라 줄을 나눈다.
   결과 화면의 할 일 목록(문장 속 강조)은 위에서 정한 대로 한 줄에 둔다. */
.st-order--label .st-order__text { display: grid; gap: 2px; }
.st-order--label .st-order__text b { display: block; }
.st-order--label li { align-items: flex-start; }

/* 값 두 칸 — 테두리는 한 벌, 가운데를 선 하나로 가른다(v9 · 1.4). */
.st-prices { gap: 0; border: 1px solid var(--st-line); border-radius: var(--st-r); overflow: hidden; }
.st-price { padding: 16px 14px; border: 0; border-radius: 0; }
.st-price + .st-price { border-left: 1px solid var(--st-line); }
.st-price b { font-size: 22px; line-height: 30px; }

/* ── v9 · 02 주문 ─────────────────────────────────────────────────────── */

/* 머리글과 첫 칸 사이가 66px 벌어져 있었다. 두 여백이 겹쳐 쌓인 자리다. */
.rn-order-heading .rn-form-wrap__lede { margin-bottom: 0; }
.rn-order-wrap .rn-form { margin-top: 16px; }
.tp-stepback { margin-top: 0; }

/* 바닥에 붙은 값·단추 띠가 마지막 칸을 가리지 않게. 띠는 12+52+24 + 값 줄. */
.rn-form-wrap, .rn-order-wrap { padding-bottom: 176px; }

/* 「시간을 몰라요」처럼 이름이 길어진 체크 줄 — 한 줄로 서고 44px 를 지킨다. */
.rn-bcard__checks { gap: 8px 16px; }
.rn-bcard__check { font-size: 15px; color: var(--st-ink); }

/* 상태 화면(2.5·2.6·3.3·4.5·6.5)의 제목은 명조 26/36 — 화면 제목과 같은 무게. */
/* 상태 화면의 제목은 어느 껍데기 안에 있든 명조 26/36 이다. 옛 규칙이
   `.rn-form-wrap h2`(0,1,1)로 20/30 을 주고 있어 화면마다 크기가 달랐다. */
.rn-body .st-status__title, .st-status__title { margin: 18px 0 0;
  font-family: var(--st-font-display); font-size: 26px; line-height: 36px;
  font-weight: 700; letter-spacing: -0.04em; }

/* ── v9 · 03 풀이함 · 05 계정 ─────────────────────────────────────────── */

/* 「무료」 딱지는 화면마다 같은 옷을 입는다. 옛 규칙이 초록 면을 칠하고 있어
   홈에서는 주홍 옅은 면, 계정에서는 초록 면이 나왔다. */
.rn-badge--free, .rn-free-gate__badge {
  background: var(--st-action-soft); border-color: transparent; color: var(--st-action-press); }

/* 결제하다 만 주문 한 줄 — 점선 상자 대신 옅은 면 위의 한 줄. */
.rn-library-unpaid { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center;
  gap: 12px; padding: 16px; border: 0; border-radius: var(--st-r); background: var(--st-band);
  color: var(--st-ink); text-decoration: none; }
.rn-library-unpaid b { display: block; font-size: 15px; line-height: 22px; }
.rn-library-unpaid span { display: block; margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--st-body); }
.rn-library-unpaid i { font-style: normal; color: var(--st-muted); text-align: right; }

/* 풀이함의 「무료」 딱지도 같은 옷으로. 여기만 초록 면이었다. */
.rn-library-more a span { background: var(--st-action-soft); color: var(--st-action-press); }

/* 계정 한 줄 — 크림빛 면 대신 옅은 회색 띠(흰 바탕 규칙). */
.rn-library-head__who { padding: 12px 14px; border: 0; border-radius: var(--st-r);
  background: var(--st-band); font-size: 13px; line-height: 20px; color: var(--st-body); }

/* 머리말의 계정 이름표가 잘려 나갔다. 길면 말줄임으로 접는다. */
.rn-nav__who { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 구매 내역 한 줄(v9 · 5.8) — 번호·상태 / 이름 / 물어본 말 / 금액 / 행동. */
.rn-account-order { display: block; }
.rn-account-order__top { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; font-size: 12px; color: var(--st-muted); font-variant-numeric: tabular-nums; }
.rn-account-order__state { flex: 0 0 auto; font-size: 12px; font-weight: 700; }
.rn-account-order h3 { margin: 4px 0 0; font-family: var(--st-font-ui); font-size: 15px;
  line-height: 23px; font-weight: 700; letter-spacing: -0.02em; }
.rn-account-order__ask { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--st-body); }
.rn-account-order__money { margin: 10px 0 0; display: grid; gap: 4px; }
.rn-account-order__money > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.rn-account-order__money dt { color: var(--st-body); }
.rn-account-order__money dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.rn-account-order__act { margin: 8px 0 0; display: flex; align-items: center; gap: 16px; }
.rn-account-order__act a, .rn-account-order__act button { min-height: 36px; display: inline-flex;
  align-items: center; font-size: 13px; font-weight: 700; }
.rn-account-order__act .rn-account-order__drop { border: 0; background: none; padding: 0;
  color: var(--st-muted); font-weight: 400; text-decoration: underline; cursor: pointer; }

/* 구역 머리 — 제목 하나, 숫자는 조용한 캡션, 링크는 오른쪽 한 줄.
   셋 다 주홍 굵은 글씨라 제목이 셋으로 보였다. */
.rn-account-panel__head span { color: var(--st-muted); font-size: 13px; font-weight: 400;
  font-variant-numeric: tabular-nums; }
.rn-account-panel__head span + a { margin-left: auto; }
.rn-account-panel__head a { color: var(--st-action-press); font-size: 13px; font-weight: 600;
  min-height: 44px; display: inline-flex; align-items: center; }

/* 비회원 구매 연결 — 문장 속 링크가 아니라 눌러서 여는 줄. */
.rn-order-claim { border-top: 1px solid var(--st-line); }
.rn-order-claim summary { font-size: 15px; color: var(--st-ink); }
.rn-order-claim summary::after { content: "›"; margin-left: auto; color: var(--st-muted); }
.rn-order-claim[open] summary::after { content: "⌄"; }


/* ── v9 · 2.3 결제 · 쿠폰 ─────────────────────────────────────────────── */

/* 쿠폰 할인 줄은 청록 — 깎인 값임을 색으로도 말한다. */
.rn-pay .amount__row--coupon dt, .rn-pay .amount__row--coupon dd,
.rn-pay .amount__row--coupon dd b { color: var(--st-wood); }

/* ── v9 · 3.1 질문 풀이 결과 ──────────────────────────────────────────── */

/* 결론 바로 아래 근거는 **결론에 딸린 것**이다. 떨어뜨려 두면 다음 문단의
   것처럼 보인다 — 시안은 결론 상자 아래에 붙여 한 덩이로 만든다. */
.st-verdict + .st-pad > .st-evidence, .st-verdict + .st-evidence { margin-top: 0; }
.st-verdict + .st-pad > .st-evidence > summary { border-radius: 0; }


/* ── v9 · 3.4 풀이함 ──────────────────────────────────────────────────── */

/* 머리 묶음이 크림빛 면에 테두리를 두른 카드였고, 그 안에 또 테두리 두른 칸이
   셋 들어 있었다. 흰 바탕 규칙(베이지 금지)과 카드 중첩 금지에 둘 다 걸린다.
   면을 걷고, 숫자 셋은 테두리 한 벌 안에서 선으로만 가른다. */
.rn-library-head { padding: 0; border: 0; border-radius: 0; background: transparent; margin-bottom: 18px; }
.rn-library-stats { margin-top: 14px; gap: 0; border: 1px solid var(--st-line);
  border-radius: var(--st-r); overflow: hidden; }
.rn-library-stats > a { border: 0; border-radius: 0; background: #FFFFFF; padding: 12px 4px; }
.rn-library-stats > a + a { border-left: 1px solid var(--st-line); }
.rn-library-stats > a:hover { background: var(--st-band); }
.rn-library-stats > a.is-kept.is-on, .rn-library-stats > a.is-open.is-on,
.rn-library-stats > a.is-new.is-on { background: var(--st-band); border-color: transparent; }

/* 한 줄 안에 또 줄을 긋지 않는다 — 줄마다 두 줄로 보였다. */
.rn-library-card__foot { border-top: 0; }

/* ── v9 · 4.1 무료 입력 ───────────────────────────────────────────────── */
.st-free-head__tags { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ── v9 · 4.2~4.4 무료 결과 ───────────────────────────────────────────── */

/* 글이 시작하는 자리가 42px 였다. 안쪽에서 26px 을 한 번 더 주고 있었다 —
   다른 화면은 전부 16이다. 좌우 여백의 임자는 `.rn-me-result` 쪽 하나다. */
.rn-me-result__body, .rn-duo-result__body, .rn-days-result__body { padding-inline: 0; }

/* 저장과 공유는 **같은 무게의 두 일**이다. 하나만 주홍 면으로 크게 세워 두니
   다른 하나가 덤처럼 보였다 (v9 · 4.2 는 둘 다 흰 바탕 선 단추). */
.rn-result-share { margin: 12px 0 24px; padding: 0; border: 0; background: transparent; }
.rn-result-share > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rn-result-share .rn-btn + .rn-btn { margin-top: 0; }

/* 한 카드 안에 면이 셋이었다 — 겉 카드(회색), 점수판(흰색), 근거(흰색),
   그리고 주홍 슬래브. 겉 카드의 면과 테두리를 걷어 하나로 만든다. */
.rn-me-profile-card { padding: 18px 0; background: transparent; border: 0;
  border-top: 1px solid var(--st-line); }
.rn-me-profile-card + .rn-me-profile-card { margin-top: 0; }
.rn-me-profile-card.rn-result-card--standout { border: 0; border-top: 2px solid var(--st-ink); }
.rn-me-profile-card .rn-trait-chart { background: var(--st-band); border-radius: var(--st-r); }
.rn-me-profile-card .rn-evidence { background: transparent; padding-left: 14px; }

/* 「나는 …할 수 있을까? · 3,900원」은 슬래브가 아니라 한 줄이다.
   옛 규칙이 `.rn-me-profile-card .rn-card-deep-link`(0,2,0)라 같은 무게로 준다. */
.rn-me-profile-card .rn-card-deep-link { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; min-height: 48px; margin: 12px 0 0; padding: 0;
  background: transparent; border: 0; color: var(--st-action-press);
  font-size: 14px; font-weight: 700; }

/* 날짜 결과(4.4) — 회색 판 위에 흰 카드를 또 얹지 않는다. 판을 걷고 줄로만 센다. */
.rn-days-picks { padding: 0; background: transparent; border: 0; }
.rn-days-picks h2 { font-family: var(--st-font-ui); font-size: 18px; line-height: 28px; font-weight: 700; }

/* ── v9 · 5.1~5.2 로그인 · 가입 ───────────────────────────────────────── */


/* 아래 안내 줄의 링크는 12px 주홍 밑줄이었다. 누를 자리는 44px 이고 먹색이다. */
.rn-account-nonmember { font-size: 14px; }
.rn-account-nonmember a { min-height: 44px; display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--st-ink); }

/* 비회원으로 가는 두 줄도 같은 결 — 먹색 14/600, 누를 자리 44px. */
.rn-account-guest a { display: flex; align-items: center; justify-content: center;
  min-height: 44px; font-size: 14px; font-weight: 600; color: var(--st-ink); }

/* ── v9 · 5.3 약관 동의 ───────────────────────────────────────────────── */

/* 수집 항목 표가 540px 로 고정돼 있었다. 390px 화면에서 셋째 칸(보유 기간)이
   통째로 잘려 안 보였다 — 법으로 알려야 하는 값이다. 가로로 미는 대신
   글자를 접어 세 칸을 다 보인다(가로 넘침 금지). */
.rn-consent-table { overflow-x: visible; }
.rn-consent-table table { min-width: 0; table-layout: fixed; font-size: 12px; line-height: 18px; }
.rn-consent-table th, .rn-consent-table td { padding: 8px; word-break: keep-all; overflow-wrap: anywhere; }
.rn-consent-table th { background: var(--st-band); font-weight: 700; }

/* 계정·동의 화면의 구역 제목도 고딕 18/28. 화면 제목(명조 26/36)과 눈으로 갈린다. */
.rn-account-page .rn-account-panel h2, .rn-account-panel h2, .rn-agree-group > h2 {
  font-family: var(--st-font-ui); font-size: 18px; line-height: 28px;
  font-weight: 700; letter-spacing: -0.03em; margin-bottom: 14px; }

/* ── v9 · 5.10 쿠폰함 ─────────────────────────────────────────────────── */

/* 크림빛 카드 안에 쿠폰 카드를 또 넣고 있었다. 바깥 면을 걷고 줄로만 센다
   (흰 바탕 규칙 · 카드 중첩 금지). */
.rn-coupon-group { padding: 0; background: transparent; border: 0; border-radius: 0; }
.rn-coupon-group + .rn-coupon-group { margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--st-line); }
.rn-coupon-group__head h2 { font-family: var(--st-font-ui); font-size: 18px;
  line-height: 28px; font-weight: 700; letter-spacing: -0.03em; }

/* ── v9 · 5.4 인증 링크 · 5.5 비밀번호 ────────────────────────────────── */
/* 아래 링크 줄은 13px 23px 짜리라 누를 자리가 못 됐다. 14/600 먹색 44px. */
.rn-account-links a { min-height: 44px; display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--st-ink); }

/* ── v9 · 6.1 주문 조회 ───────────────────────────────────────────────── */
/* 칸마다 테두리가 있는데 그 바깥에 또 테두리를 두르지 않는다. */
.rn-lookup-page .rn-bcard { border: 0; padding: 0; }

/* 「풀이가 완성됐습니다」가 분홍 면 위의 **흰 글씨**라 거의 안 보였다.
   다 된 것을 알리는 한 줄인데 그렇다 (v9 · 6.1 발행 완료). */
.lookup__ready p { color: var(--st-ink); }
.lookup__ready .card__note { color: var(--st-body); }

/* 값이 이름보다 더 옅었다 — 구매번호와 금액이 #C0B8B4 300 이고 라벨이 더
   진했다. 읽으러 온 것은 값이다. */
.rn-lookup-page .kv dt { color: var(--st-body); font-weight: 400; font-size: 14px; }
.rn-lookup-page .kv dd { color: var(--st-ink); font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums; }

/* 「다시 조회하기」가 브라우저 기본 회색 단추였다. 보조 단추 한 벌로. */
.rn-lookup-page .lookup__form button[type="submit"] {
  min-height: 52px; padding: 0 16px; border: 1px solid var(--st-line-field);
  border-radius: var(--st-r); background: #FFFFFF; color: var(--st-ink);
  font-size: 16px; font-weight: 600; }

/* ── v9 · 6.3 소개 · 품질 ─────────────────────────────────────────────── */
/* 구역 제목이 화면 제목과 같은 명조 26 이라 어디가 한 장의 머리인지 알 수
   없었다. 구역은 고딕 18/28, 그 아래 작은 제목은 고딕 16/26. */
.rn-trust-section > h2, .rn-quality-step > h2, .rn-faq-group > h2 {
  font-family: var(--st-font-ui); font-size: 18px; line-height: 28px;
  font-weight: 700; letter-spacing: -0.03em; }
.rn-trust-card h3, .rn-quality-step h3, .rn-faq-group h3 {
  font-family: var(--st-font-ui); font-size: 16px; line-height: 26px;
  font-weight: 700; letter-spacing: -0.02em; }

/* ── v9 · 6.2 후기 · 6.4 약관 ─────────────────────────────────────────── */
/* 옛 규칙이 `.rn-policy-doc .doc__title`·`.rn-pay .card__title`(0,2,0)로
   쥐고 있어 같은 무게로 준다. */
.rn-policy-doc .doc__title, .doc__title { font-family: var(--st-font-display);
  font-size: 26px; line-height: 36px; font-weight: 700; letter-spacing: -0.04em; }
.rn-pay .card__title, .card__title { font-family: var(--st-font-ui); font-size: 18px;
  line-height: 28px; font-weight: 700; letter-spacing: -0.03em; }

/* 결제 화면 제목도 26/36 — 30px 하나만 혼자 컸다. */
.rn-pay__head h1 { font-size: 26px; line-height: 36px; letter-spacing: -0.04em; }

/* ── 가장자리까지 번지는 띠 — 여백이 16 으로 바뀐 만큼 다시 맞춘다 ─────── */
/* 옛 값(-20 · -22)은 20~22px 껍데기를 위한 것이었다. 껍데기가 16 이 된 뒤로
   그 차이(4~6px)만큼 화면 밖으로 삐져나갔다. */
.rn-trust-section--hanji { margin-inline: calc(var(--st-gut) * -1); padding-inline: var(--st-gut); }
.rn-form-dock { margin-inline: calc(var(--st-gut) * -1); padding-inline: var(--st-gut); }

/* 약관의 표가 320px 화면보다 넓게 고정돼 있었다. */
.rn-policy-doc table { min-width: 0; table-layout: fixed; }
.rn-policy-doc th, .rn-policy-doc td { word-break: keep-all; overflow-wrap: anywhere; }

/* 눈표(kicker)는 주홍이다. 토색(#8B5D19)은 오행이 뜻을 가질 때만 쓴다 —
   소개·품질의 「세 가지 약속」 같은 머리말에 쓰면 팔레트가 하나 더 생긴다. */
.rn-kicker { color: var(--st-action-press); }
.rn-quality-step > span, .rn-trust-card > span:first-child { color: var(--st-action-press); }

/* ── 상태 딱지(ST/Badge)를 쓰는 자리들 ─────────────────────────────────── */
/* 구매 내역·풀이함의 상태가 색만 다른 맨 글씨였다. 시안의 딱지 한 벌을 입힌다.
   옛 규칙이 제 색·테두리를 쥐고 있어 같은 자리에서 값을 덮어 준다. */
/* 여기서 `display` 를 갈아 끼우면 안 된다. 딱지는 제 글자를 `inline-flex` +
   `align-items: center` 로 세로 가운데에 세우는데, `inline-block` 으로 바꾸면
   그 정렬이 사라지고 `line-height: 1` 만 남아 글자가 24px 칸 꼭대기에 붙는다
   (실측: 글자가 딱지 위로 3px 넘치고 아래는 10px 이 비었다). 띠가 `flex` 라
   딱지는 어차피 블록으로 굳으니, 한 줄로 `flex` 를 되돌려 준다. */
.rn-account-order__state .st-badge { display: inline-flex; align-items: center; }
.rn-library-card__pill.st-badge, .rn-library-card__new.st-badge {
  border: 0; padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.rn-library-card__pill.st-badge { background: var(--st-fill); color: var(--st-body); font-weight: 600; }
.rn-library-card__new.st-badge { background: var(--st-action); color: #FFFFFF; font-weight: 700; }

/* ══ 홈 3안 — 배너 · 바로 질문 · 실제 사례 (Design 앱 2026-09-23) ═══════ */

/* 배너는 화면 폭 그대로, 비율(390:214) 고정. 위아래에 빈칸을 더 두지 않는다. */
.st-home-hero { margin: 0; display: block; width: 100%; }
.st-home-hero img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 214; }

/* 질문 상자 — 시안 1.1 3안 */
.st-home-ask { margin-top: 4px; }
.st-composer { border-width: 1.5px; border-radius: var(--st-r-lg);
  box-shadow: 0 6px 18px rgba(33, 30, 27, 0.06); }
.st-composer:focus-within { box-shadow: 0 0 0 4px rgba(209, 58, 20, 0.14); }
.st-composer__head { padding: 14px 16px 0; gap: 8px; }
.st-composer__head b { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 22px;
  font-weight: 700; color: var(--st-ink); }
.st-composer__count { flex: 0 0 auto; font-size: 13px; color: var(--st-muted);
  font-variant-numeric: tabular-nums; }
.st-composer__count b { font-weight: 600; color: var(--st-ink); }
.st-composer textarea { min-height: 104px; padding: 8px 16px 4px; font-size: 17px; line-height: 28px; }
.st-composer__hint { padding: 0 16px 14px; font-size: 13px; line-height: 20px; }

/* 값 두 줄과 풀이받기 — 상자 바닥의 한 줄 */
.st-composer__foot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 10px 10px 16px; border-top: 1px solid #EEEAE6; background: #FCFBFA; }
.st-composer__price { min-width: 0; display: grid; gap: 1px; font-size: 12.5px;
  line-height: 18px; color: var(--st-muted); }
.st-composer__price b { font-weight: 700; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.st-composer__go { flex: 0 0 auto; height: 44px; padding: 0 16px 0 18px; display: inline-flex;
  align-items: center; gap: 6px; border: 0; border-radius: 10px; background: var(--st-action);
  color: #FFFFFF; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
  box-shadow: 0 4px 12px rgba(209, 58, 20, 0.24); }
.st-composer__go:disabled { background: #F3E4DE; color: #9A5A47; box-shadow: none;
  cursor: not-allowed; }
.rn-body .st-composer__go { color: #FFFFFF; }
.rn-body .st-composer__go:disabled { color: #9A5A47; }

/* 예시 칩 — 시각 높이 36, 누를 자리는 44 */
.st-home-ask__lead { margin: 22px 0 8px; font-size: 13px; line-height: 20px;
  font-weight: 700; color: var(--st-body); }
.st-chips--flow { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chips--flow .st-chip { width: auto; min-height: 44px; height: auto; padding: 4px 12px;
  border-color: var(--st-line); background: var(--st-band); color: #3A3530;
  font-size: 13.5px; line-height: 20px; font-weight: 500; letter-spacing: -0.02em; }
.st-chips--flow .st-chip[aria-pressed="true"] { border-color: var(--st-wood);
  background: var(--st-wood-soft); color: var(--st-wood); font-weight: 600; }

/* ── 실제 사례 ────────────────────────────────────────────────────────── */
.st-cases { margin-top: 40px; padding: 28px 0 30px; background: #FAF8F6;
  border-top: 1px solid #EEEAE6; border-bottom: 1px solid #EEEAE6; }
/* 제목 하나만 선다. 기준일은 사례 상세로 내려갔다 — 「올해」가 실제로
   나오는 곳은 거기뿐이다. */
.st-cases__head { display: block; }
.st-h-cases { margin: 0; font-family: var(--st-font-display); font-size: 23px; line-height: 33px;
  font-weight: 700; letter-spacing: -0.045em; color: var(--st-ink); }
.st-case-tabs { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.st-case-tab { min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--st-line); background: #FFFFFF; color: var(--st-body);
  font-size: 13.5px; font-weight: 500; cursor: pointer; }
.st-case-tab[aria-selected="true"] { border-color: var(--st-ink); background: var(--st-ink);
  color: #FFFFFF; font-weight: 700; }

.st-cases__deck { margin-top: 14px; }
.st-case { border-radius: var(--st-r-lg); background: #FFFFFF; border: 1px solid var(--st-line);
  box-shadow: 0 8px 20px rgba(33, 30, 27, 0.06); padding: 18px 16px 8px; }
.st-case[hidden] { display: none; }
.st-case__head { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.st-case__name { min-width: 0; font-size: 13px; font-weight: 600; color: var(--st-body); }
.st-case__q { margin: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px;
  font-size: 14px; line-height: 22px; color: var(--st-body); }
.st-case__q > span:first-child { font-family: var(--st-font-display); font-size: 18px;
  line-height: 24px; font-weight: 700; color: var(--st-muted); }
.st-case__a { margin-top: 14px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.st-case__a::before { content: "A"; font-family: var(--st-font-display); font-size: 18px;
  line-height: 30px; font-weight: 700; color: var(--st-action); }
.st-case__a > * { grid-column: 2; }
.st-case__verdict { margin: 0; font-family: var(--st-font-display); font-size: 19px;
  line-height: 30px; font-weight: 700; letter-spacing: -0.035em; color: var(--st-ink); }
.st-case__reason { margin: 12px 0 0; font-size: 16px; line-height: 28px; color: var(--st-read); }
.st-case__mark { background: linear-gradient(transparent 62%, #FFD2C2 62%); color: var(--st-ink); }

/* 뒷부분만 조금씩 흐려진다. 결론·질문·단추는 흐리지 않는다. */
/* 흐려지는 뒷부분은 서너 줄까지만 보인다 — 잠금 장식이 되면 안 읽힌다.
   나머지는 /cases/<key> 에서 흐림 없이 전부 읽힌다. */
.st-case__rest { position: relative; margin-top: 12px; max-height: 112px;
  overflow: hidden; }
.st-case__veil { margin: 0 0 10px; font-size: 16px; line-height: 28px; color: var(--st-read);
  filter: blur(calc(2px + var(--veil) * 1.6px)); opacity: calc(0.72 - var(--veil) * 0.16); }
.st-case__rest::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 8%, #FFFFFF 92%); }
a.st-case__more { text-decoration: none; }
.st-case__more { width: 100%; min-height: 48px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 0; border: 0; background: none;
  color: var(--st-wood); font-size: 14px; font-weight: 700; cursor: pointer; }

/* 사례 목록 한 줄 — 무엇을 물었고 뭐라 답했는지까지. */
.st-caselist { margin-top: 12px; display: grid; gap: 10px; }
.st-caselink { display: block; padding: 16px 16px 14px; border: 1px solid var(--st-line);
  border-radius: var(--st-r-lg); background: #FFFFFF; }
.st-caselink__head { display: flex; align-items: center; gap: 8px; }
.st-caselink__cat { font-size: 12px; font-weight: 600; color: var(--st-muted); }
.st-caselink__name { display: block; margin-top: 10px; font-size: 16px; line-height: 24px;
  font-weight: 700; color: var(--st-ink); }
.st-caselink__q { display: block; margin-top: 6px; font-size: 14px; line-height: 22px;
  color: var(--st-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-caselink__v { display: block; margin-top: 10px; font-family: var(--st-font-display);
  font-size: 16px; line-height: 27px; color: var(--st-read);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-caselink__go { display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  min-height: 32px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--st-wood); }
.rn-body a.st-caselink { color: inherit; text-decoration: none; }
.st-cases__count { margin: 12px 0 0; }

/* 거르개 알약이 링크일 때도 단추와 같은 모양이다. */
a.st-case-tab { display: inline-flex; align-items: center; text-decoration: none; }
.rn-body a.st-case-tab { color: var(--st-body); }
.st-case-tab[aria-current="page"] { border-color: var(--st-ink); background: var(--st-ink); }
.rn-body a.st-case-tab[aria-current="page"] { color: #FFFFFF; }

/* 사례 상세 — 읽는 본문 한 벌. 여기서는 아무것도 흐리지 않는다. */
.st-case-head { padding-top: 6px; }
.st-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  font-size: 14px; font-weight: 600; }
.rn-body a.st-back { color: var(--st-muted); }
.st-back__i { transform: rotate(180deg); }
.st-case-head .st-case__head { margin: 6px 0 0; }
.st-case-head .st-h-page { margin: 10px 0 0; }
.st-case-head .st-case__q { margin-top: 14px; }

/* 읽는 본문 — 결과 화면과 같은 한 벌(명조 17 / 1.85 / 400).
   전역 규칙이 문단만 따로 끌고 가지 못하게 `.tp-skin` 으로 한 칸 올려 둔다.
   이름은 `.st-reading` 이다 — `.st-read` 는 결과 화면의 구역 이름이라 그걸
   쓰면 남의 장 제목까지 이 규칙이 끌고 간다. */
.tp-skin .st-reading { font-family: var(--st-font-display); font-size: 17px; line-height: 1.85;
  font-weight: 400; color: var(--st-read); letter-spacing: -0.01em; }
.tp-skin .st-reading p { margin: 0 0 18px; font: inherit; letter-spacing: inherit;
  color: inherit; }
.tp-skin .st-reading p:last-child { margin-bottom: 0; }
/* 소제목은 v9 구역 제목 계단(고딕 18/28)이다. 15 로 두니 본문 17 보다 작아
   위계가 뒤집혔다. */
.tp-skin .st-reading h3 { margin: 28px 0 12px; font-family: var(--st-font-ui); font-size: 18px;
  line-height: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--st-ink); }
.tp-skin .st-reading h3:first-child { margin-top: 0; }
/* 칠한 구절도 크기·굵기는 본문 그대로다. 색만 바뀐다. */
.tp-skin .st-reading mark { font: inherit; }

/* 나가는 길 — 읽던 사례가 아니라 내 질문으로. */
.st-case-cta { display: grid; gap: 4px; }
.st-case-cta__more { display: flex; align-items: center; justify-content: center;
  min-height: 44px; font-size: 14px; font-weight: 600; }
.rn-body a.st-case-cta__more { color: var(--st-wood); }

/* 홈에서 전체 목록으로 가는 줄. */
.st-cases__all { display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; margin-top: 12px; border: 1px solid var(--st-line); border-radius: var(--st-r);
  background: #FFFFFF; font-size: 14px; font-weight: 700; }
.rn-body a.st-cases__all { color: var(--st-ink); }

.rn-body a.st-case__more { color: var(--st-wood); }
.st-case__note { margin: 18px 0 0; font-size: 12px; line-height: 19px; color: var(--st-muted); }

/* ── 무료 세 줄 — 썸네일 54×72 ────────────────────────────────────────── */
.st-h-free { margin: 0 0 14px; font-family: var(--st-font-display); font-size: 21px;
  line-height: 31px; font-weight: 700; letter-spacing: -0.04em; }
.st-row--thumb { display: grid; grid-template-columns: 54px minmax(0, 1fr) 20px; gap: 14px;
  align-items: center; min-height: 92px; padding: 12px 0; }
.st-row__thumb { width: 54px; height: 72px; object-fit: cover; object-position: top;
  border-radius: 6px; border: 1px solid var(--st-line); display: block; }
.st-row--thumb .st-row__text { display: block; }
.st-row--thumb .st-row__title { display: block; font-size: 15.5px; line-height: 23px;
  letter-spacing: -0.02em; }
.st-row--thumb .st-sub { display: block; margin-top: 2px; }
.st-row__tags { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

/* ── 종합 한 줄 — 책등 ────────────────────────────────────────────────── */
.st-sec--whole { padding-top: 0; }
.st-whole { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px;
  align-items: center; padding: 16px 0; border: 0; border-top: 1px solid var(--st-ink);
  border-bottom: 1px solid var(--st-line); border-radius: 0; background: transparent; }
.rn-body a.st-whole, .st-whole { color: var(--st-ink); }
.st-whole__spine { width: 54px; height: 72px; padding: 8px 6px; border: 1px solid var(--st-line);
  border-top: 4px solid var(--st-ink); border-radius: 3px 3px 6px 6px; background: #FFFFFF;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 6px 14px rgba(33, 30, 27, 0.08); }
.st-whole__spine b { font-family: var(--st-font-display); font-size: 12px; line-height: 15px;
  font-weight: 700; letter-spacing: -0.03em; }
.st-whole__spine i { width: 10px; height: 10px; border-radius: 2px; background: var(--st-action); }
.st-whole__text { display: block; min-width: 0; }
.st-whole__text > b { display: block; font-family: var(--st-font-display); font-size: 17px;
  line-height: 25px; font-weight: 700; letter-spacing: -0.03em; }
.st-whole .st-sub { display: block; margin-top: 2px; color: var(--st-body); }
.st-whole__row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: 13.5px; }
.st-whole__row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.st-whole__go { font-weight: 700; color: var(--st-wood); }


/* ════════════════════════════════════════════════════════════════
 * 전체 화면 대조 (2026-09-23) — D01~D11
 *
 * 시안과 실제 화면을 나란히 재서 **수치가 어긋난 자리만** 고친다.
 * `!important` 로 덮지 않는다 — 어긋나게 만든 규칙을 찾아 같은 무게로
 * 고쳐 쓴다. 기능·문구·가격·법정 동의·소셜 조건은 건드리지 않는다.
 * ════════════════════════════════════════════════════════════════ */

/* ── D02·D04·D06 겹친 여백 ──────────────────────────────────────
 * 바깥 16 + 카드 16 + 테두리 1 = 33 에서 라벨이 시작했다. 시안에서 상자를
 * 두르는 것은 **입력 칸 자신**과 **묶음 카드**(저장된 사주·상대 정보)뿐이고,
 * 화면의 한 단인 폼은 상자가 아니다. 한 단짜리 카드에서 상자만 걷는다 —
 * 칸도, 묶음 카드도, 훅도 그대로다. */
.rn-form-wrap > .rn-form > .rn-bcard,
.rn-form-wrap > .rn-form > section > .rn-bcard,
.rn-form-wrap > .rn-bcard,
.rn-form-wrap > .rn-form > .tp-situation,
.rn-form-wrap > .rn-form > section > .tp-situation,
.rn-account-wrap > .rn-form > .rn-bcard {
  padding-inline: 0;
  border-inline: 0;
  border-radius: 0;
  background: transparent;
}
/* 상자를 걷으면 단과 단 사이를 나눌 것이 없다. 실선 한 줄로 나눈다. */
.rn-form-wrap > .rn-form > .rn-bcard + .rn-bcard,
.rn-form-wrap > .rn-form > section + section > .rn-bcard {
  padding-top: 20px;
  border-top: 1px solid var(--st-line);
}

/* ── D04 동의·선택 네모 ─────────────────────────────────────────
 * 22px 고정, 줄어들지 않게, 그리고 **첫 줄에 맞춰** 선다. 긴 동의문에서
 * 네모가 가운데로 내려가 어느 줄에 걸린 건지 알 수 없었다. */
.rn-mobile input[type="checkbox"], .rn-mobile input[type="radio"] {
  width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--st-action);
}
.rn-remember, .rn-consent-row, .rn-consent label, label.rn-check {
  display: flex; gap: 12px; align-items: flex-start;
}
.rn-remember > input[type="checkbox"], .rn-consent-row > input[type="checkbox"],
.rn-consent label > input[type="checkbox"], label.rn-check > input[type="checkbox"] {
  margin-top: 1px;
}

/* ── D06·D10 작은 단추 — 눈에는 가볍게, 손가락에는 44 ───────────
 * 알약을 전부 44 로 키웠더니 시안의 가벼운 밀도가 사라졌다. 보이는 높이는
 * 36 으로 두고, 닿는 자리만 보이지 않게 44 로 넓힌다. */
.st-tap44, .st-chip, .st-case-tab, .rn-profile-act { position: relative; }
/* `::before` 를 쓴다. 펼치개·알약 중에 `::after` 로 화살표나 「+」를 그리는
   것이 있어서다(`.rn-evidence__why > summary` 가 그렇다). 덮어쓰면 표시가
   사라진다. `::before` 는 이 화면들에서 비어 있음을 실측으로 확인했다. */
.st-tap44::before, .st-chip::before, .st-case-tab::before, .rn-profile-act::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.st-chip, .st-chips--flow .st-chip { min-height: 36px; height: auto; padding: 6px 13px; }
.st-case-tab { min-height: 36px; padding: 0 13px; }
.rn-profile-act { min-height: 36px; }

/* ── D09 품질 화면의 제목만 혼자 컸다 ────────────────────────────
 * 36/46.8 에 좌우 20 이라, 26/36 에 16 인 다른 일반 화면과 어긋났다. */
.rn-trust-heading { padding-inline: var(--st-gut); }
.rn-trust-heading h1 {
  font-family: var(--st-font-display); font-size: 26px; line-height: 36px;
  font-weight: 700; letter-spacing: -0.04em;
}
.rn-trust-heading p { font-size: 15px; line-height: 24px; color: var(--st-body); }
/* 약관의 표는 글씨를 줄여 우겨넣지 않는다. 칸 여백과 글줄을 살리고 넘치면 민다. */
.rn-policy-doc .doc__table, .rn-policy-doc table { font-size: 14px; }
.rn-policy-doc th, .rn-policy-doc td { padding: 10px 12px; line-height: 22px; }
.rn-policy-doc :where(.doc__tablewrap, .doc__table-scroll) { overflow-x: auto; }

/* ── D07 상태·오류의 표식 ───────────────────────────────────────
 * 404 는 96px 그림이 왼쪽에, 나머지 셋은 40px 회색 글자가 가운데에 있었다.
 * 같은 자리·같은 크기로 세운다. 코드 칩과 「다시 시도」는 두지 않는다 —
 * 문서로 정해 둔 계약이고, 이번 지시도 새 재시도 동작은 필요 없다고 했다. */
.oops__character, .oops__glyph {
  display: grid; place-items: center; width: 72px; height: 72px;
  margin: 0 0 16px; border-radius: 18px;
}
.oops__character { padding: 6px; background: var(--st-action-soft); }
.oops__glyph {
  background: var(--st-band); color: var(--st-muted);
  font: 400 32px/1 var(--st-font-display);
}

/* ── D05 결과의 위계 ────────────────────────────────────────────
 * 「결론」 딱지가 결론 문장과 똑같은 명조 24/36 이었다. `.st-verdict p`
 * (0,1,1) 가 `.st-verdict__label`(0,1,0) 을 이겨서다. 같은 무게로 되돌린다. */
.st-verdict p.st-verdict__label {
  font-family: var(--st-font-ui); font-size: 12px; line-height: 20px;
  font-weight: 700; letter-spacing: 0.06em; color: var(--st-action-press);
}
/* 본문 글줄은 결과와 사례 상세가 한 벌이다(명조 17 / 1.85). */
.st-read p { line-height: 1.85; }
/* 근거 펼치개 — 글꼴이 줄마다 달랐고(고딕·명조 섞임), 펼친 속이 x59 까지
   밀려 바깥 본문(x16)과 다른 글처럼 보였다. */
.st-evidence > summary {
  font-family: var(--st-font-ui); font-size: 14px; line-height: 22px;
  font-weight: 700; color: var(--st-pine, #1B6754);
}
.st-evidence > :not(summary) { padding-inline: 16px; }

/* ── D03 로그인·가입의 세로 리듬 ────────────────────────────────
 * 큰 그림과 위 공백이 첫 단추를 화면 밖으로 밀어냈다. 시안은 제목이 왼쪽
 * 위에 붙고 곧바로 칸이 온다. 소셜 네 줄은 그대로 둔다(사용자 요청). */
.rn-account-auth-page .st-status { padding-top: 16px; justify-items: start; text-align: left; }
.rn-account-auth-page .st-status__title {
  font-family: var(--st-font-display); font-size: 26px; line-height: 36px;
  font-weight: 700; letter-spacing: -0.04em;
}
.rn-account-auth-page .st-status__lede { max-width: none; margin-top: 6px; }
.rn-account-auth-page .rn-auth-providers { margin-top: 18px; }
.rn-auth-provider { min-height: 52px; }
.rn-auth-provider__icon svg, .rn-auth-provider__icon img { width: 20px; height: 20px; }

/* ── D01 아이콘 한 벌 ───────────────────────────────────────────
 * 줄 아이콘은 굵기가 제각각이었다. currentColor 에 1.6 한 값으로 맞춘다.
 * 공인 소셜 로고는 제 색을 써야 하므로 건드리지 않는다. */
.rn-nav svg, .st-icon-line, .rn-form-wrap__back svg {
  stroke: currentColor; stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.rn-nav__menu { width: 44px; height: 44px; }
.rn-nav__menu svg { width: 24px; height: 24px; }

/* D03 (이어서) — 접힌 이메일 칸이 18px 안쪽으로 들어가 있어, 펼치면 소셜 네
   줄과 라벨의 x 축이 어긋났다. 시안은 한 축이다. 펼친 칸도 같은 자리에서
   시작하고, 위아래 자리만 둔다. */
.rn-email-login .rn-account-form { margin: 18px 0 0; }
.rn-email-login[open] { padding-inline: 14px; padding-bottom: 18px; }
.rn-email-login[open] > summary { margin-inline: -14px; }
/* 화면 제목은 껍데기가 이미 16 을 두고 있다. 여기서 또 두면 32 가 된다. */
.rn-account-auth-page .st-status { padding-inline: 0; }

/* ── D01 서브 화면의 머리띠 ─────────────────────────────────────
 * 브랜드 자리에 뒤로가기와 화면 이름이 선다. 높이 56 · 아이콘 20 ·
 * 닿는 자리 44. 메뉴와 이름표는 그대로 오른쪽에 남는다. */
.rn-nav--sub .rn-nav__inner { gap: 2px; }
/* 뒤로가기 머리말은 줄 간격이 2 다(화살표와 화면 이름이 붙어야 한다). 이름표와
 * 메뉴 단추 사이만은 홈과 같은 14 로 벌린다 — 줄 간격 2 + 여백 12. */
.rn-nav--sub .rn-nav__who { margin-right: 12px; }
.rn-nav__back { width: 44px; height: 44px; margin-left: -12px; display: grid;
  place-items: center; color: var(--st-ink); }
.rn-nav__back svg { width: 20px; height: 20px; }
.rn-body a.rn-nav__back { color: var(--st-ink); }
.rn-nav__screen { min-width: 0; overflow: hidden; font-size: 16px; font-weight: 700;
  letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
/* 「← 처음으로」가 띠 안으로 올라갔으니, 그 줄을 비켜 주던 위 여백(52)도
   같이 걷는다. 안 걷으면 띠와 제목 사이가 86px 벌어져 첫 단추가 화면 밖으로
   밀린다 — 로그인에서 실제로 그랬다. 띠가 바뀐 화면에만 적용된다. */
.rn-nav--sub + .rn-form-wrap { padding-top: 20px; }
.rn-account-auth-page .st-status { padding-top: 0; }
.rn-account-auth-page .st-status__title { margin-top: 0; }

/* ── D06·D04·D09 제목이 화면마다 다른 x 에서 시작했다 ───────────
 * 계정·풀이함 18 · 결제 20 · 소개 22 · 나머지 16. 같은 계단에 세운다.
 * 세로 글줄도 33.8 과 36 으로 갈라져 있어 한 값으로 모은다. */
/* 옛 규칙이 `.rn-account-page .rn-account-head`(0,2,0)로 2px 안쪽 여백과
   글줄 1.3 을 쥐고 있다. 같은 무게로 준다. */
.rn-account-page .rn-account-head, .rn-account-head { padding-inline: 0; }
.rn-account-page .rn-account-head h1, .rn-account-head h1 {
  font-size: 26px; line-height: 36px; letter-spacing: -0.04em; }
.rn-pay__head, .pay__head { padding-inline: 0; }
.rn-pay__head h1, .pay__head h1 { line-height: 36px; }
.rn-trust-hero, .rn-about-hero { padding-inline: var(--st-gut); }

/* ── D07 오류 제목도 화면 제목 계단(26/36)이다 ─────────────────── */
.oops__title { font-size: 26px; line-height: 36px; }

/* ── D06 상태 딱지 높이 한 값(24) ───────────────────────────────
 * 19 · 23 · 26 으로 갈라져 있어 줄마다 글줄이 밀렸다. */
.st-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: 6px; line-height: 1; }

/* ── D06·D08·D09·D11 작은 조작들의 닿는 자리 ────────────────────
 * 보이는 크기는 그대로 두고(20~38px), 손가락이 닿는 자리만 44 로 넓힌다.
 * 지우기·빼기·로그아웃·목차·근거 펼치개가 전부 44 아래였다. */
/* 이름은 짐작하지 않고 화면에서 직접 읽어 왔다. 로그아웃 20 · 지우기 36 ·
   빼기 30 이 전부 44 아래였다. 글씨 크기는 그대로 두고 닿는 자리만 넓힌다. */
.rn-text-button, .rn-account-order__drop, .coupon__remove { position: relative; }
.rn-text-button::before, .rn-account-order__drop::before, .coupon__remove::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
/* 혼자 한 줄을 차지하는 펼치개는 가짜 자리 대신 **진짜 높이**를 준다 —
   「+」를 그리는 `::after` 와 부딪힐 일이 없다. 목차 24 · 근거 21~25 였다.
   `.st-evidence > summary` 는 이미 44 라 손대지 않는다. */
.doc__toc > summary, .rn-evidence__why > summary, .rn-method > summary {
  min-height: 44px; display: flex; align-items: center;
}

/* ── D04 결제 — 카드 세 겹이 긴 서류처럼 보였다 ──────────────────
 * 주문 상품 · 주문자 정보 · 동의가 각각 상자였고, 그 안에서 다시 16 을 둬서
 * 글이 33 에서 시작했다. 시안에는 바깥 상자가 없다 — 실선 한 줄로 나누고
 * 모두 16 에서 시작한다. 법정 문구·동의·쿠폰·구매 정보는 그대로 둔다. */
.rn-pay__main > .card, .pay__main > .card,
.rn-pay__main > .pay__wrap > .card, .pay__main > .pay__wrap > .card {
  padding-inline: 0; border-inline: 0; border-radius: 0; background: transparent;
}
.rn-pay__main > .card + .card, .pay__main > .card + .card,
.rn-pay__main > .pay__wrap > .card + .card, .pay__main > .pay__wrap > .card + .card {
  padding-top: 20px; border-top: 1px solid var(--st-line);
}
/* 금액 줄은 이름 왼쪽 · 값 오른쪽, 같은 기준선에. */
.rn-pay__main .amount > div, .pay__main .amount > div,
.rn-pay__main .kv > div, .pay__main .kv > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.rn-pay__main .amount dd, .pay__main .amount dd,
.rn-pay__main .kv dd, .pay__main .kv dd { margin: 0; text-align: right; }
/* 결제 단추는 공통 높이 52. */
.rn-pay__main .btn--block, .pay__main .btn--block { min-height: 52px; }

/* ── D08 후기 — 제목이 가운데 정렬이라 그 아래 왼쪽 정렬 폼과 축이 달랐다.
 * 별점·선택·문항은 그대로 두고 축과 크기만 맞춘다. */
.rn-review-page .pay__head { padding-inline: 0; text-align: left; }
.rn-review-page .pay__head h1 { font-family: var(--st-font-display); font-size: 26px;
  line-height: 36px; font-weight: 700; letter-spacing: -0.04em; }
.rn-review-page .pay__head p { font-size: 14px; line-height: 22px; color: var(--st-body); }
.rn-review-page .pay__head img, .rn-review-page .pay__head .oops__glyph { display: none; }
.rn-review-page label, .rn-review-page .card__title { font-size: 14px; font-weight: 700; }
.rn-review-page .btn--block { min-height: 52px; }

/* ── 홈 질문 상자 — 손댄 자리 셋 (2026-09-23) ────────────────────
 *
 * ① 칸을 누르면 테두리가 **두 겹**으로 빛났다. 상자(`:focus-within`)가
 *    주홍 테두리 + 4px 띠를 두르는데, 그 안의 `textarea` 도 전역 규칙
 *    `.rn-body textarea:focus`(0,2,1) 에 걸려 3px 띠를 하나 더 그렸다.
 *    빛나는 것은 상자 하나면 된다. 칸은 제 띠를 내려놓는다.
 */
.rn-body .st-composer textarea:focus,
.st-composer textarea:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

/* ② 질문 상자 밑줄(「질문이 구체적일수록…」) 앞의 ⓘ 가 글줄 위로 떠 있었다. 줄의 기본
 *    `align-items: stretch` 라 16px 아이콘이 맨 위에 붙었다. 첫 줄
 *    가운데에 맞춘다(글줄 20 · 아이콘 16 → 위로 2). */
.st-composer__hint { align-items: flex-start; }
.st-composer__hint > svg { flex: 0 0 auto; margin-top: 2px; }

/* ③ 배너와 상자가 4px 로 붙어 있었다. 그림이 끝나고 묻는 자리가
 *    시작한다는 것이 보이지 않는다. */
.st-home-ask { margin-top: 20px; }

/* ── 초안 복원 알림 — 작고 조용하게 ─────────────────────────────
 * 두 줄짜리 문장에 알약 단추까지 달려 있어서, 정작 질문 칸보다 알림이 더
 * 크게 보였다. 상자 안쪽 아래에 한 줄로 눕힌다. 할 일은 「이어 쓰거나
 * 지우거나」 둘뿐이라 단추도 글씨 하나면 된다. */
.tp-ask__restored {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 6px 16px 0;
  font-size: 12.5px; line-height: 18px; color: var(--st-muted);
}
.tp-ask__restored > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-ask__restored button {
  position: relative; flex: 0 0 auto; margin-left: auto;
  padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 12.5px; line-height: 18px; font-weight: 600; color: var(--st-wood);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
/* 글씨는 작게 두되 손가락은 44 를 준다. */
.tp-ask__restored button::before {
  content: ""; position: absolute; left: -8px; right: -8px; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* ── 예시를 눌렀는데 이미 적은 글이 있을 때 ─────────────────────
 * 14px 글에 43짜리 알약 셋이라 99px 덩어리가 툭 떠올랐고, 옅은 바탕에 옅은
 * 글자(--st-body)라 떠 있는 동안 흐릿하게 읽혔다. 글은 작고 진하게, 단추는
 * 추천 칩과 같은 28짜리로 눕히고, 흰 바탕에 선을 둘러 「새로 뜬 칸」이라는
 * 것이 흐림이 아니라 **테두리**로 읽히게 한다. */
.tp-ask__choice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--st-line); border-radius: var(--st-r);
  background: var(--st-bg);
  font-size: 12.5px; line-height: 18px; color: var(--st-ink);
  animation: st-choice-in 160ms ease-out both;
}
.tp-ask__choice > span { flex: 1 0 100%; font-weight: 600; }
.tp-ask__choice button {
  position: relative; min-height: 0; height: 28px; padding: 0 10px;
  border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-bg);
  font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--st-wood);
  transition: border-color 140ms ease, background 140ms ease;
}
/* 눌러 주기를 바라는 쪽(자바스크립트가 초점을 주는 단추)만 면을 채운다. */
.tp-ask__choice button[data-add] {
  border-color: transparent; background: var(--st-wood-soft); color: var(--st-wood);
}
.tp-ask__choice button:hover { border-color: var(--st-wood); background: var(--st-band); }
/* 글씨는 작게 두되 손가락은 44 를 준다. */
.tp-ask__choice button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
/* 「풀이받기」를 눌렀는데 아직 안 고른 상태. 칸 전체가 물든다. */
.tp-ask__choice.is-waiting {
  border-color: var(--st-action); background: var(--st-action-soft);
}
.tp-ask__choice.is-waiting button { background: var(--st-bg); }
.tp-ask__choice.is-waiting button[data-add] { background: var(--st-wood-soft); }
/* 뜨는 순간만 4px 올라온다. 끝값은 `none` 이라 글자가 반픽셀에 남지 않는다. */
@keyframes st-choice-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tp-ask__choice { animation: none; } }

/* ── 돌아가는 질문 추천 ──────────────────────────────────────── */
.st-asklead { display: flex; align-items: baseline; gap: 10px; }
.st-asklead .st-home-ask__lead { margin-bottom: 8px; }
/* 넘기는 단추다. 테두리를 둘러 「누르는 것」으로 읽히게 하고, 화살표는
   오른쪽을 본다 — 아래를 보면 접힌 칸이 열린다는 뜻이 된다. */
.st-asklead__more {
  position: relative; margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-bg);
  font-size: 12.5px; font-weight: 600; color: var(--st-wood); cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.st-asklead__more:hover, .st-asklead__more:focus-visible { border-color: var(--st-wood); }
.st-asklead__more:active { background: var(--st-band); }
/* 눌린 순간 화살표가 한 칸 간다 — 넘어갔다는 손맛. */
.st-asklead__more svg { transition: transform 160ms ease; }
.st-asklead__more:active svg { transform: translateX(3px); }
/* 글씨는 작게, 손가락은 44. */
.st-asklead__more::before {
  content: ""; position: absolute; left: -8px; right: -8px; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* 넘어갈 때 — 넷이 함께 사라지고, 새 넷이 한 장씩 올라온다. 자리는 그대로
   둔다. 높이가 출렁이면 아래 내용이 같이 뛴다. */
.st-chips[data-tp-example-rotate] .st-chip {
  transition: opacity 200ms ease, transform 200ms ease;
}
.st-chips[data-tp-example-rotate].is-turning .st-chip {
  opacity: 0; transform: translateY(-5px);
}
.st-chips[data-tp-example-rotate].is-entering .st-chip {
  opacity: 0; transform: translateY(7px);
}
@media (prefers-reduced-motion: reduce) {
  .st-chips[data-tp-example-rotate] .st-chip { transition: none; transform: none; }
  .st-chips[data-tp-example-rotate].is-turning .st-chip,
  .st-chips[data-tp-example-rotate].is-entering .st-chip { opacity: 1; transform: none; }
  .st-asklead__more svg { transition: none; }
}

/* ── 계산 근거 한 벌 ────────────────────────────────────────────
 * 문장마다 접힌 칸을 달아 두었더니 읽는 길이 열 번 끊겼다. 바닥에 하나만
 * 두고, 펼치면 주장과 근거가 죽 이어진다. */
.st-evidence--all > summary { border-radius: var(--st-r); }
.st-basis { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.st-basis__item { display: grid; gap: 6px; }
.st-basis__claim {
  font-family: var(--st-font-display); font-size: 15px; line-height: 25px;
  font-weight: 700; color: var(--st-ink);
}
/* 근거 줄은 주장 아래 한 칸 들여, 어느 말의 근거인지 눈으로 묶는다. */
.st-basis__lines {
  padding-left: 12px; border-left: 2px solid var(--st-line);
  display: grid; gap: 4px;
}
.st-basis__lines p {
  margin: 0; font-size: 13.5px; line-height: 22px; color: var(--st-body);
}

/* ── 저장한 사주 정보 카드 — 값이 보이게 ────────────────────────
 * 생년월일·시각·지역·성별을 12px 회색 한 줄에 몰아 두었더니, 카드에서
 * 가장 중요한 값이 가장 안 보였다. 이름(18px 명조)보다도 작았다.
 * 이 사람을 가리키는 값(날짜·시각)을 앞줄로 올리고, 지역·성별은 그 아래. */
.rn-profile-card__birth {
  margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px;
  font-size: 15px; line-height: 24px; color: var(--st-ink);
  font-variant-numeric: tabular-nums;
}
.rn-profile-card__birth b { font-weight: 700; }
.rn-profile-card__birth span { font-weight: 600; color: var(--st-body); }
.rn-profile-card__where {
  margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--st-muted);
  overflow-wrap: anywhere;
}
/* 옛 규칙(`.rn-profile-card p` 12px 회색)이 두 줄 다 잡고 있어 같은 자리에서 푼다. */
.rn-profile-card p.rn-profile-card__birth { font-size: 15px; color: var(--st-ink); }
.rn-profile-card p.rn-profile-card__where { font-size: 13px; color: var(--st-muted); }

/* ── 구매내역 상태 태그 정렬 ────────────────────────────────────
 * 줄이 `align-items: baseline` 이라, 알약 안에서 글자가 가운데 정렬된
 * 태그는 제 밑줄이 아래로 내려가 주문번호 줄보다 5px 처져 보였다.
 * 글줄과 알약은 서로 가운데를 맞추는 게 맞다. */
.rn-account-order__top { align-items: center; }
/* 태그를 감싼 칸이 제 글줄 높이(29)를 갖고 있어, 가운데를 맞춰도 알약이
   그 안에서 다시 2px 처졌다. 칸이 알약에 딱 맞게 한다. */
.rn-account-order__state { display: inline-flex; align-items: center; line-height: 1; }

/* ── 읽는 본문의 조판 — 책처럼 ──────────────────────────────────
 *
 * 문단이 왼쪽만 맞고 오른쪽이 들쭉날쭉했다. 한글은 낱말 단위로만 끊으면
 * (`keep-all`) 줄 끝이 크게 비는데, 그 빈자리가 줄마다 달라 글이 흔들려
 * 보인다. 완성본(종합 발행본)은 처음부터 책 조판을 쓰고 있었다 — 같은
 * 규칙을 질문 풀이와 사례 본문에도 준다.
 *
 *   · 문단 첫 자리 한 칸 들여쓰기
 *   · 좌우 양끝 맞춤, **마지막 줄만** 왼쪽 맞춤
 *   · 낱말 중간에서 끊어도 좋다 — 그래야 자간이 벌어지지 않는다
 *   · 끊으면 안 되는 자리(여는 괄호 뒤 등)는 `line-break: strict` 가 막는다
 */
.tp-skin .st-reading p,
.tp-skin .st-read > p,
.tp-skin .st-read .st-body p {
  text-indent: 0.5em;
  text-align: justify;
  text-align-last: left;
  text-justify: auto;
  word-break: break-all;
  overflow-wrap: normal;
  line-break: strict;
}
/* 소제목 바로 다음 문단은 들여쓰지 않는다 — 제목이 이미 시작을 알린다. */
.tp-skin .st-reading h3 + p,
.tp-skin .st-read h3 + p,
.tp-skin .st-reading > p:first-child,
.tp-skin .st-read > p:first-child { text-indent: 0; }
/* 결론·인용처럼 **한 덩어리로 읽는 블록**은 양끝 맞춤에서 뺀다.
   `mark` 는 여기 넣으면 안 된다 — 문단 안의 인라인 강조라, 거기만
   `keep-all` 이 되면 그 구간에서 줄을 못 끊는다. 그러면 양끝을 맞추려고
   남은 공백을 낱말 사이로 다 밀어 넣어서, 칠한 줄만 유독 띄워쓰기가
   벌어진다. 실제로 「결론부터, 잘 맞는 쪽이에요…」가 그랬다.
   인라인 강조는 문단이 정한 대로 끊긴다. */
.tp-skin .st-verdict p,
.tp-skin .st-case__verdict,
.tp-skin .st-case__reason { text-indent: 0; text-align: left; word-break: keep-all; }

/* ── 소제목 둘레의 숨 ───────────────────────────────────────────
 * 위아래 여백이 같아서 제목이 어느 쪽 것인지 안 보였다. 글은 제목 **아래**
 * 붙는 것이므로 위를 넓게, 아래를 좁게 둔다. 그 사이에 짧은 선을 하나
 * 그어 장이 바뀌는 자리를 눈으로 끊는다. */
.tp-skin .st-reading h3,
.tp-skin .st-read > h3 {
  position: relative;
  margin: 40px 0 14px;
  padding-top: 18px;
}
.tp-skin .st-reading h3::before,
.tp-skin .st-read > h3::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 28px; height: 2px; background: var(--st-action); border-radius: 1px;
}
.tp-skin .st-reading h3:first-child,
.tp-skin .st-read > h3:first-child { margin-top: 0; }

/* ── 사례 뒤: 「실제 풀이에는 아래 내용이 더 들어가요」 ────────────
 *
 * 사례 본문은 마지막 문단까지 선명하게 끝난다. 본문 뒤에 흐린 가짜 문단을
 * 두던 것은 걷었다(2026-09-26). 무엇이 더 붙는지는 이 카드가 글로 적는다. */
.st-continues { position: relative; margin-top: 4px; }

.st-continues__card {
  margin-top: 28px; padding: 18px 16px 16px;
  border: 1px solid var(--st-line); border-radius: var(--st-r-lg);
  background: var(--st-bg);
}
.st-continues__lead {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 15px; line-height: 24px; font-weight: 700; color: var(--st-ink);
}
/* 제목 앞의 짧은 주홍 표 — 새 자리가 시작된다는 표시. */
.st-continues__lead::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 2px;
  border-radius: 1px; background: var(--st-action);
}
.st-continues__sub { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--st-body); }

.st-continues__list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.st-continues__list li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start;
}
.st-continues__list svg { margin-top: 2px; }
.st-continues__item { min-width: 0; display: block; }
.st-continues__name {
  display: block; font-size: 14px; line-height: 22px; font-weight: 700; color: var(--st-ink);
}
.st-continues__desc { display: block; font-size: 13px; line-height: 20px; color: var(--st-muted); }

/* 보기 — 진짜 한 줄, 그 아래 뼈대 한 줄. 작게 둔다. */
.st-continues__peek {
  display: grid; gap: 5px; margin-top: 7px; padding: 7px 9px;
  border-radius: 8px; background: var(--st-band);
}
.st-continues__row {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 11.5px; line-height: 17px; color: var(--st-body);
}
.st-continues__row b {
  flex: 0 0 auto; font-weight: 600; color: var(--st-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.st-continues__row i {
  flex: 0 0 auto; padding: 0 6px; border-radius: 999px;
  background: var(--st-action-soft); color: var(--st-action-press);
  font-style: normal; font-size: 10.5px; line-height: 16px; font-weight: 700;
}
.st-continues__row em {
  min-width: 0; font-style: normal;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 둘째 줄은 **글자가 없다** — 같은 모양의 뼈대만 흐려 둔다. */
.st-continues__row.is-veil { filter: blur(1.6px); opacity: 0.4; }
.st-continues__row.is-veil b,
.st-continues__row.is-veil i,
.st-continues__row.is-veil em {
  height: 10px; border-radius: 3px; background: var(--st-line-field); color: transparent;
}
.st-continues__row.is-veil b { width: 84px; }
.st-continues__row.is-veil i { width: 30px; padding: 0; }
.st-continues__row.is-veil em { width: 82%; }
/* 두 줄이 되면서 아래 줄은 조금 짧고 조금 더 흐리다 — 더 있다가 사라지는 쪽. */
.st-continues__row.is-veil + .st-continues__row.is-veil { opacity: 0.26; }
.st-continues__row.is-veil + .st-continues__row.is-veil b { width: 62px; }
.st-continues__row.is-veil + .st-continues__row.is-veil em { width: 54%; }
@media (prefers-reduced-motion: reduce) { .st-continues__row.is-veil { filter: none; opacity: 0.3; } }

/* 시기 한 줄에 붙는 「왜 그 해인지」, 근거표의 문장↔근거 짝. 한 줄씩만
   보여 주면 목록이 더 있다는 것까지만 전해지고 무엇이 좋은지는 안 보인다. */
.st-continues__why {
  font-size: 11.5px; line-height: 17px; color: var(--st-muted);
  word-break: keep-all;
}
.st-continues__claim {
  font-size: 11.5px; line-height: 17px; font-weight: 600; color: var(--st-ink);
  word-break: keep-all;
}
.st-continues__basis {
  padding-left: 8px; border-left: 2px solid var(--st-line-field);
  font-size: 11px; line-height: 17px; color: var(--st-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-continues__peek > span { display: block; }
.st-continues__peek > .st-continues__row { display: flex; }

/* 칩 아래 26px 이 비어 있었다. 다음 구역이 제 위 여백(40)을 이미 갖고
   있어서, 여기 것까지 더하면 두 배로 벌어진다. */
.st-home-ask { padding-bottom: 0; }

/* ── 질문 추천 둘레의 여백 ──────────────────────────────────────
 * 「이런 것도 물어도 돼요」와 칩이 8px 로 붙어 있어 한 덩어리로 뭉쳤다.
 * 머리말은 아래 것을 가리키는 말이라 조금 떨어져 있어야 가리키는 게 보인다. */
.st-asklead .st-home-ask__lead { margin-bottom: 14px; }

/* 칩 두 줄 아래에 40px 이 떠 있어 **세 번째 줄 자리**처럼 보였다(칩 한 줄이
   42). 0 으로 두면 이번엔 칩이 띠에 닿는다. 줄로는 안 읽히고 숨은 트이는
   만큼만 남긴다 — 아래 띠는 제 안쪽 여백 28 을 따로 갖고 있다. */
.st-home-ask + .st-cases { margin-top: 16px; }

/* ── 홈 무료 셋 · 종합 카드 (운영 일러스트로 교체) ──────────────
 *
 * 세로 54×72 미리보기 조각이 검게 서 있던 자리다. 운영에서 쓰는 가로
 * 일러스트로 바꾸고 자리도 가로로 눕힌다. 원본 292×224 는 112×84 와 비율이
 * 거의 같지만, 사람과 달력이 잘리면 안 되므로 `contain` 으로 맞춰 넣는다. */
.st-row--thumb { grid-template-columns: 112px minmax(0, 1fr) 20px; }
.st-row__thumb {
  width: 112px; height: 84px; object-fit: contain; object-position: center;
  border-radius: 10px; background: #FFFFFF;
}
/* 글자는 바로 아래 종합 카드를 따른다. 고딕 18 굵게는 이 셋만 혼자 큰 소리로
 * 읽혀서, 같은 화면에 선 종합 카드(명조 17/25)와 다른 물건처럼 보였다. */
.st-row--thumb .st-row__title {
  font-family: var(--st-font-display); font-size: 17px; line-height: 25px;
  letter-spacing: -0.03em;
}
.st-row--thumb .st-sub { font-size: 13px; line-height: 20px; }
/* 좁은 화면에서는 한 뼘 줄인다. 글이 두 줄로 접히기 시작하는 폭이다. */
@media (max-width: 374px) {
  .st-row--thumb { grid-template-columns: 96px minmax(0, 1fr) 20px; gap: 12px; }
  .st-row__thumb { width: 96px; height: 74px; }
}

/* 종합 — 넓은 그림을 이고 선 한 장짜리 카드. 카드 전체가 누르는 자리다. */
.st-whole {
  display: block; padding: 0; overflow: hidden;
  border: 1px solid var(--st-line); border-radius: var(--st-r-lg);
  background: var(--st-bg);
}
.st-whole__pic { display: block; }
.st-whole__pic img {
  display: block; width: 100%; height: auto;
  border-bottom: 1px solid var(--st-line);
}
.st-whole__text { display: block; padding: 16px; }

/* ════════════════════════════════════════════════════════════════
 * 질문 상자 v10 (home_v10 시안) — 파는 것이 이 한 칸이라 제일 공들인다.
 *
 * 값은 시안에서 그대로 옮겼고, 색은 이미 있던 토큰과 하나하나 맞는다
 * (#D13A14 = --st-action, #211E1B = --st-ink, 띠 다섯 빛깔 = 오행 토큰).
 * 글은 한 자도 바꾸지 않았다 — 틀만 바뀐다.
 * ════════════════════════════════════════════════════════════════ */
.st-composer {
  position: relative; border: 1px solid var(--st-ink); border-radius: 18px;
  background: var(--st-bg); overflow: hidden;
  /* 상자가 바닥에서 살짝 떠 있다. 글을 적는 자리가 화면에서 제일 앞이다. */
  box-shadow: 0 14px 30px rgba(33, 30, 27, 0.08);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.st-composer:focus-within {
  border-color: var(--st-action);
  box-shadow: 0 0 0 4px rgba(209, 58, 20, 0.14), 0 14px 30px rgba(33, 30, 27, 0.10);
}

/* 오행 띠 — 나무·불·흙·쇠·물 */
.st-composer__strip { display: grid; grid-template-columns: repeat(5, 1fr); height: 3px; }
.st-composer__strip span:nth-child(1) { background: var(--st-wood); }
.st-composer__strip span:nth-child(2) { background: var(--st-fire); }
.st-composer__strip span:nth-child(3) { background: var(--st-earth); }
.st-composer__strip span:nth-child(4) { background: var(--st-metal); }
.st-composer__strip span:nth-child(5) { background: var(--st-water); }

.st-composer__head {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 16px 16px 12px;
}
/* 「問」 도장. 살짝 기울여 찍은 것처럼 두고, 안쪽 흰 테로 도장면을 만든다. */
.st-composer__seal {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--st-action); color: #FFFFFF;
  display: grid; place-items: center;
  font-family: var(--st-font-hanja); font-size: 23px; line-height: 1;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 3px 8px rgba(209, 58, 20, 0.28);
}
.st-composer__head > b {
  display: block; min-width: 0; flex: none;
  font-family: var(--st-font-display); font-size: 18px; line-height: 24px;
  font-weight: 700; letter-spacing: -0.035em; color: var(--st-ink);
}
/* 세는 자리는 알약 한 칸. 글자가 늘면 숫자만 진해지고, 한도에 닿으면 붉어진다. */
.st-composer__count {
  align-self: center; flex: none; margin-left: 0;
  padding: 3px 8px; border-radius: 999px; background: var(--st-band);
  font-size: 12px; line-height: 16px; font-weight: 400; color: var(--st-muted);
  font-variant-numeric: tabular-nums;
}
/* 옛 규칙 `.st-composer__head b`(15/22)가 알약 속 숫자까지 끌고 가서 알약이
   28 로 부풀었다. 숫자는 알약의 글줄을 따른다(12/16 → 알약 22). */
.st-composer__count b { font-size: inherit; line-height: inherit; font-weight: 700; color: var(--st-muted); }
.st-composer.is-typing .st-composer__count b { color: var(--st-ink); }
.st-composer.is-long .st-composer__count b { color: var(--st-action-press); }

/* 원고지 한 칸 — 글줄마다 옅은 줄이 깔리고, 왼쪽 세로 선이 시작점을 잡는다.
   `background-attachment: local` 이라 줄이 글과 함께 굴러간다. */
.st-composer__field { margin: 0 16px; padding-left: 14px; border-left: 2px solid #F4C9BA; }
/* 글줄 26 · 처음 세 줄 · 열 줄까지 자라고 그 뒤로는 안에서 구른다.
   높이는 자바스크립트가 한 줄씩 올린다(`[data-tp-question]`). 줄 배경도 26 에
   맞춘다 — 글줄과 어긋나면 글자가 줄 위에 걸터앉는다. */
.rn-body .st-composer textarea,
.st-composer textarea {
  display: block; width: 100%;
  height: 78px; min-height: 78px; max-height: 260px;
  padding: 0; border: 0;
  background: transparent repeating-linear-gradient(to bottom, transparent 0 25px, #EFE7E3 25px 26px);
  background-attachment: local;
  color: var(--st-ink); font-size: 15px; line-height: 26px;
  resize: none; outline: none; overflow-y: hidden;
}
/* 글이 시작하는 x 와 밑줄의 ⓘ 가 같은 선에 선다(16 + 2 + 14 = 32). */
.st-composer__hint {
  padding: 10px 16px 14px 32px; align-items: center;
  font-size: 12.5px; line-height: 18px; color: var(--st-body);
}
.st-composer__hint > svg { margin-top: 0; }

/* 값과 단추는 **같은 흰 종이 위**에 있다. 먹지색 띠를 깔면 카드가 거기서
   끊겨서, 적는 자리와 내는 자리가 다른 물건처럼 보였다. 점선 한 줄이면
   「여기서부터는 값 이야기」가 충분히 전해진다. 선은 좌우 16 안쪽으로 들인다. */
.st-composer__foot {
  margin: 0 16px; padding: 12px 0 14px; background: none;
  border-top: 1px dashed var(--st-line);
}
/* 이름과 숫자가 세로로 맞는 두 칸짜리 표. 숫자는 오른쪽에 붙고 자릿수가 고정폭. */
.st-composer__price {
  margin: 0; min-width: 0; display: grid; grid-template-columns: auto auto;
  column-gap: 10px; row-gap: 2px; align-items: baseline;
}
.st-composer__price dt { font-size: 12.5px; line-height: 18px; color: var(--st-muted); }
.st-composer__price dd {
  margin: 0; font-size: 14px; line-height: 18px; font-weight: 700;
  color: var(--st-ink); text-align: right; font-variant-numeric: tabular-nums;
}
/* 알약 단추. 화살표는 안에서 제 동그라미를 쓰고, 글자와 10 만큼 떨어진다. */
.rn-body .st-composer__go, .st-composer__go {
  height: 46px; padding: 0 6px 0 20px; gap: 10px; border: 0; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  background: var(--st-action); color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(209, 58, 20, 0.28);
  transition: background 150ms ease, box-shadow 150ms ease;
}
.st-composer__go-arrow {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22); color: #FFFFFF;
}
.st-composer__go-arrow svg { width: 16px; height: 16px; stroke-width: 2.4; }
/* 아직 적은 게 없으면 색이 **옅어질 뿐** 글자는 그대로 흰색이다 — 무엇을 누르는
   단추인지는 잠겨 있을 때도 읽혀야 한다. */
.rn-body .st-composer__go:disabled, .st-composer__go:disabled {
  background: #EDB8A6; color: #FFFFFF; box-shadow: none; cursor: not-allowed;
}
.st-composer__go:disabled .st-composer__go-arrow { background: rgba(255, 255, 255, 0.28); }

/* ── 사례 카드는 답의 절반까지만 보인다 ──────────────────────────
 * 결론이 긴 사례는 카드 한 장이 상세만큼 길어져서, 「전체 읽기」로 갈 이유가
 * 중간에 사라졌다. 답 전체를 한 창에 담고 그 창의 끝에서 흰색으로 스며든다 —
 * 결론이 짧은 사례에서는 이유와 흐린 줄까지 따라 들어온다. */
.st-case__a { position: relative; max-height: 220px; overflow: hidden; }
.st-case__a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 52%, #FFFFFF 94%);
}
/* 안쪽 창은 제 몫을 내려놓는다 — 흐림은 바깥 한 겹이면 된다. */
.st-case__rest { margin-top: 12px; max-height: none; overflow: visible; }
.st-case__rest::after { content: none; }
.st-case__rest .st-case__reason { margin: 0; }
.st-case__veils { margin-top: 10px; }

/* ════════════════════════════════════════════════════════════════
 * 후기 — 사례 아래 한 띠와 `/reviews` 한 장.
 * 지금 서 있는 글은 **예시**다. 카드마다 딱지가 그렇게 말한다.
 * 별점·인원·평점은 없다 — 셀 것이 없는데 숫자를 적으면 그 숫자가 거짓말한다.
 * ════════════════════════════════════════════════════════════════ */
/* 사례 띠와 **같은 면** 위에 앉는다. 남이 받은 것 → 남이 남긴 것이 한 덩어리로
   읽히고, 아래 무료 셋에서 흰 바탕으로 돌아온다. 사이는 실선 한 줄. */
.st-reviews {
  margin-top: 0; padding-top: 26px; padding-bottom: 30px;
  background: #FAF8F6; border-bottom: 1px solid #EEEAE6;
}
.st-cases + .st-reviews { border-top: 0; }
.st-reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* 제목이 먼저 읽히고 「전체 보기」는 그 옆에 조용히 선다(시안 v11: 13/700).
   보이는 크기는 글줄 하나고, 닿는 자리만 `::before` 로 44 를 덮는다 — 높이로
   44 를 주면 글이 제목 기준선보다 아래로 내려앉는다. */
.st-reviews__all {
  position: relative; flex: 0 0 auto;
  font-size: 13px; line-height: 20px; font-weight: 700;
  color: var(--st-body); text-decoration: none;
}
.st-reviews__all::before {
  content: ""; position: absolute; left: -10px; right: -10px; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.st-reviews__head { align-items: baseline; }
/* 제목 줄 아래는 카드 덱 하나다. 제목의 기본 아래 여백(14)과 덱 위 여백(16)이 겹쳐
   32 가 벌어졌다 — 제목 여백을 빼고 덱 쪽 한 값(12 + 덱 안쪽 2)만 둔다. */
.st-reviews .st-h-free { margin-bottom: 0; }
.st-reviews__note { margin: 6px 0 0; }
/* 읽는 카드가 **화면 한가운데**에 선다. 양옆으로 앞뒤 장이 조금씩 비쳐서
   더 있다는 것이 보이고, 자동으로 넘어가도 읽을 자리는 늘 같은 곳이다.
   좌우 여백은 「화면 폭 − 카드 폭」의 절반이라, 첫 장과 끝 장도 가운데 선다. */
.st-reviews__deck {
  --rv-card: 282px; --rv-gap: 10px;
  margin: 12px calc(var(--st-gut) * -1) 0;
  /* `100%` 는 덱 자신이 아니라 **부모 글상자**를 잰다. 덱은 좌우 -16 으로
     화면 끝까지 늘어나 있으므로, 그 32 를 더해야 진짜 화면 폭이 된다.
     이걸 빼먹으면 카드가 늘 16px 씩 왼쪽으로 치우쳐 선다. */
  padding: 2px calc((100% + var(--st-gut) * 2 - var(--rv-card)) / 2) 6px;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--rv-card); gap: var(--rv-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.st-reviews__deck::-webkit-scrollbar { display: none; }
.st-reviews__deck > .st-review { scroll-snap-align: center; }
.st-reviews__list { display: grid; gap: 12px; }

.st-review {
  display: flex; flex-direction: column; min-width: 0;
  padding: 16px 16px 14px; border: 1px solid var(--st-line);
  border-radius: var(--st-r-lg); background: var(--st-bg);
}
.rn-body a.st-review, a.st-review {
  color: var(--st-ink); text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
a.st-review:hover { border-color: var(--st-line-field); box-shadow: 0 6px 18px rgba(33, 30, 27, 0.06); }
.st-review__who { display: flex; }
/* 따옴표는 글자가 아니라 **그림**이다. 글꼴마다 위치가 달라지는 「”」 대신
   면으로 그린 한 쌍을 쓴다(시안 v11). 크기도 26 으로 키웠다. */
.st-review__mark { display: block; flex: 0 0 auto; width: 26px; height: 26px; color: #E8B4A2; }
/* 남이 쓴 글이다. 화면 글씨(고딕)가 아니라 **읽는 글씨**로 둔다 — 풀이 본문과
   같은 명조에, 좌우를 맞추고 단어 중간에서 끊어 흐트러진 오른쪽 끝을 없앤다. */
.st-review__body {
  display: block; margin: 12px 0 0; flex: 1 1 auto;
  font-family: var(--st-font-display); font-size: 15px; line-height: 27px;
  letter-spacing: -0.01em; color: var(--st-read);
  text-align: justify; text-align-last: left;
  word-break: break-all; overflow-wrap: normal; line-break: strict;
}
.st-review__who {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--st-line);
  display: flex; align-items: center; gap: 10px;
}
.st-review__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; }
.st-review__meta { min-width: 0; display: grid; gap: 1px; }
.st-review__meta b {
  font-size: 14px; line-height: 20px; font-weight: 700; color: var(--st-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-review__meta .st-sub {
  font-size: 12.5px; line-height: 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-review__tag { margin-left: auto; }

/* 올라가는 화살표 — 질문 상자는 이 화면 맨 위에 있다. */
.st-reviews__go {
  margin-top: 14px; width: 100%; min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid #F1D5CA; border-radius: var(--st-r);
  background: var(--st-bg); color: var(--st-action-press);
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}
.st-reviews__go:hover { border-color: var(--st-action); background: var(--st-action-soft); }
.st-reviews__up { transform: rotate(-90deg); }
/* 진짜 후기의 별점. 쓴 사람이 매긴 값이라 그대로 싣는다. */
.st-review__stars { font-size: 13px; line-height: 20px; letter-spacing: 1px; color: var(--st-action); }
.st-review__who .st-sub { margin-left: auto; font-size: 13px; }

/* ── 주문 ① 걸음 — 적은 글을 갈라 보이는 칸 ──────────────────────
 * 적는 칸은 하나고, 그 아래에서 「핵심 질문 + 지금 상황」으로 갈라 보인다.
 * 결제 앞에서 무엇을 어떻게 읽을지 먼저 말하고 확인받는 자리다. */
.tp-said__count {
  margin: 6px 0 0; text-align: right;
  font-size: 12px; line-height: 16px; color: var(--st-muted);
  font-variant-numeric: tabular-nums;
}
.tp-said__count b { font-weight: 700; color: var(--st-body); }

.tp-split { display: grid; gap: 8px; }
.tp-split__head {
  margin: 4px 0 0; font-size: 13px; line-height: 20px; font-weight: 700; color: var(--st-ink);
}
.tp-split__head small { font-weight: 500; color: var(--st-muted); }
.tp-split__head + .rn-bcard__row { margin-top: 0; }
/* 번호는 칸 안쪽 왼쪽에 앉는다 — 두 줄이 「①②」로 읽혀야 최대 둘이 보인다. */
.tp-split__q { position: relative; }
.tp-split__q .tp-split__no {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--st-band); color: var(--st-muted);
  font-size: 11.5px; line-height: 1; font-weight: 700;
}
.tp-split__q .rn-bcard__in { padding-left: 42px; }
.tp-split__again {
  position: relative; justify-self: start; margin-top: 2px;
  padding: 0; border: 0; background: none;
  font-size: 12.5px; line-height: 18px; font-weight: 600; color: var(--st-wood);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.tp-split__again::before {
  content: ""; position: absolute; left: -8px; right: -8px; top: 50%;
  height: 44px; transform: translateY(-50%);
}
/* 상황은 **읽는 글**이다 — 칸이 아니라 옅은 면 위의 문단. 고칠 곳은 위의 적은 글이다. */
.tp-split__text {
  margin: 0; padding: 12px 14px; border-radius: var(--st-r);
  background: var(--st-band); color: var(--st-read);
  font-size: 14.5px; line-height: 23px; white-space: pre-line; word-break: keep-all;
}
.tp-split__text.is-empty { color: var(--st-muted); font-size: 13px; }

/* ── 결제 · 질문 풀이 카드 ─────────────────────────────────────────
 * 상품 소개 대신 **적어 주신 질문**을 올린다. 값을 내기 직전에 확인하고 싶은
 * 것은 「내 질문이 제대로 들어갔나」라서. 그림은 홈 배너와 같은 인물이다. */
.pay-ask {
  margin: 4px 0 16px; padding: 14px; border: 1px solid var(--st-line);
  border-radius: var(--st-r-lg); background: var(--st-bg);
}
.pay-ask__head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; }
.pay-ask__pic img {
  display: block; width: 88px; height: 66px; object-fit: cover; object-position: center 30%;
  border-radius: 10px;
}
.pay-ask__name {
  margin: 0; font-family: var(--st-font-display); font-size: 17px; line-height: 24px;
  font-weight: 700; letter-spacing: -0.03em; color: var(--st-ink);
}
.pay-ask__meta { margin: 2px 0 0; font-size: 12.5px; line-height: 18px; color: var(--st-muted); }
.pay-ask__label {
  margin: 14px 0 6px; padding-top: 12px; border-top: 1px dashed var(--st-line);
  font-size: 12.5px; line-height: 18px; font-weight: 700; color: var(--st-body);
}
.pay-ask__label + .pay-ask__qs, .pay-ask__label + .pay-ask__situation { margin-top: 0; }
.pay-ask__qs { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pay-ask__qs li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.pay-ask__qs li > span:last-child {
  font-size: 15px; line-height: 22px; font-weight: 600; color: var(--st-ink); word-break: keep-all;
}
.pay-ask__no {
  width: 20px; height: 20px; margin-top: 1px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--st-action-soft); color: var(--st-action-press);
  font-size: 11.5px; line-height: 1; font-weight: 700;
}
.pay-ask__situation {
  margin: 0; font-size: 14px; line-height: 22px; color: var(--st-read); word-break: keep-all; white-space: pre-line;
}
/* 풀이 한 편의 범위 — 결제 전에 읽히는 고지라 작지만 흐리지 않게. 질문 확인 바로 아래 늘 같은 한 줄, 작은 ⓘ. */
.pay-ask__note {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--st-action-soft);
  font-size: 12.5px; line-height: 19px; color: var(--st-body); word-break: keep-all;
  display: flex; gap: 6px; align-items: flex-start;
}
.pay-ask__note-i { flex: none; margin-top: 2px; }
/* 이 카드가 서면 옛 상품 머리(이름·소개)는 없다 — 아래 상세는 그대로 이어진다. */
.pay-ask + .product { margin-top: 0; }

/* ── 「풀이받기」 기다림 · 쉼 ─────────────────────────────────────
 * 기다림: 화살표 자리의 동그라미가 돈다. 글자 폭이 바뀌어도 단추가 출렁이지
 * 않게 최소 폭을 둔다. 쉼(10초 문턱): 잠긴 단추와 같은 옅은 면에 남은 초를 센다. */
.st-composer__go { min-width: 132px; justify-content: space-between; }
.st-composer__go.is-loading, .st-composer__go.is-loading:disabled {
  background: var(--st-action); color: #FFFFFF; cursor: progress;
  box-shadow: 0 6px 16px rgba(209, 58, 20, 0.22);
}
.st-composer__go.is-loading .st-composer__go-arrow svg { display: none; }
.st-composer__go.is-loading .st-composer__go-arrow::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF;
  animation: st-go-spin 0.8s linear infinite;
}
.st-composer__go.is-cooling:disabled { font-variant-numeric: tabular-nums; }
@keyframes st-go-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .st-composer__go.is-loading .st-composer__go-arrow::after { animation-duration: 2.4s; }
}

/* 주문 ① 걸음의 질문 상자 — 홈과 같은 상자. 위아래 간격만 이 화면 결에 맞춘다. */
.tp-order-ask { margin: 4px 0 20px; }
/* 결제 전에 한 번 짚는 안내(막지 않음) — 오류 빛깔 대신 차분한 면, 줄바꿈을 살린다. */
.st-home-ask__warn.is-notice { white-space: pre-line; color: var(--st-body); background: var(--st-action-soft); border-radius: 10px; padding: 10px 12px; }
/* 질문 칸 500자 — 넘으면 자르지 않고 세는 알약을 붉게, 아래 한 줄로 얼마나 넘었는지 말한다(2026-09-27). */
.st-composer__count.is-over, .st-composer__count.is-over b { color: var(--st-action-press); }
.st-composer__over { margin: 6px 0 0; font-size: 13px; line-height: 20px; color: var(--st-action-press); word-break: keep-all; }

/* ── 읽기 한 벌 — 결과 화면과 사례가 같은 것을 쓴다 (2026-09-27) ─────────────
 * 질문 → 소제목·번호 없는 한 편의 본문 → 접힌 계산 근거. 사례도 같은 머리·본문·근거를 쓴다.
 * 본문 문단 크기·행간·간격은 결과와 사례가 한 값이다. 긴 질문은 요약하지 않고 글자만 줄인다. */
.tp-skin .st-reading { font-family: var(--st-font-display); font-size: 17px; line-height: 30px;
  color: var(--st-read); letter-spacing: -0.01em; word-break: keep-all; }
.tp-skin .st-reading p { margin: 0 0 20px; font: inherit; letter-spacing: inherit; color: inherit; text-indent: 0; }
.tp-skin .st-reading p:last-child { margin-bottom: 0; }
.tp-skin .st-reading b { font-weight: 700; color: var(--st-ink); }
.tp-skin .st-reading mark { font: inherit; }
.tp-skin .st-read > .st-reading + .st-case__note { margin-top: 22px; }
.st-asked--mid { font-size: 19px; line-height: 29px; }
.st-asked--long { font-size: 16.5px; line-height: 27px; }
/* 근거 — 「몇째 문단 「첫머리…」」 아래에 그 문단에 쓴 계산 줄. 한 문장의 근거처럼 굵게 세우지 않는다. */
.st-basis__where { margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; color: var(--st-wood); }
.st-basis__head { font-weight: 400; color: var(--st-body); }
.st-basis__calc { font-size: 12.5px !important; line-height: 20px !important; color: var(--st-muted) !important; word-break: break-all; }
.st-basis__calc + p { margin-bottom: 8px !important; }
.st-basis__note { color: var(--st-muted) !important; }
/* 사례 — 머리 한 줄(참고 예시 딱지·갈래·이름), 질문, 쓴 날. 목록·홈은 질문 + 짧은 발췌. */
.st-case__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.st-case-head .st-asked { margin-top: 8px; }
.st-case__excerpt p { margin: 0 0 10px; font-family: var(--st-font-display); font-size: 16.5px; line-height: 29px;
  color: var(--st-read); word-break: keep-all; }
.st-case__excerpt p:last-child { margin-bottom: 0; }
.st-caselink__name { word-break: keep-all; }
.st-caselink__v p { margin: 0 0 6px; }
.st-caselink__v p:last-child { margin-bottom: 0; }
.st-cases__lede { margin: 8px 0 0; }
/* 홈 사례 카드 — 짧은 발췌라 자르거나 흐리지 않는다(옛 「답의 절반까지」 창을 끈다). */
.st-case__a.st-case__excerpt { max-height: none; overflow: visible; }
.st-case__a.st-case__excerpt::after { content: none; }
/* 사례 끝의 작성 안내 — 본문이 아니라 작은 안내 글. */
.tp-skin .st-read > p.st-case__note { margin: 22px 0 0; font-family: var(--st-font-ui); font-size: 12.5px; line-height: 20px;
  color: var(--st-muted); text-indent: 0; letter-spacing: 0; }
.st-reviews__empty { margin: 0; }

/* 주문 걸음 ①②③ — 진행 띠와 같은 폭으로 고르게 편다(2026-09-27). 왼쪽에 몰려 있던 것을, 걸음 사이 선이
 * 남는 폭을 나눠 채우게 했다. 첫 걸음은 왼쪽 끝, 마지막 걸음은 오른쪽 끝 — 띠의 시작·끝과 맞는다. */
.tp-steps { justify-content: space-between; }
.tp-steps li + li { flex: 1 1 0; }
.tp-steps li + li::before { flex: 1 1 auto; min-width: 12px; margin-right: 2px; }
.tp-steps li { white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════
 * 홈 하단 개편 (2026-09-28 · 사용자 승인) — 실제 사례 → 내 질문 → 가볍게 둘
 * 위(히어로·질문 칸·값·사례 본문)는 그대로다. 색·서체는 토큰 그대로, 폭은 앱 폭(430) 그대로.
 * 종합 카드는 사용자 피드백으로 원래 디자인(넓은 일러스트 한 장 · `.st-whole`)으로 되돌렸다 — 여기 규칙이 없다.
 * ════════════════════════════════════════════════════════════════ */

/* 사례를 다 읽은 자리에서 내 질문으로 — 위 질문 칸으로 올라가 초점만 준다. */
.st-cases__ask { margin-top: 10px; }
.rn-body a.st-cases__ask, a.st-cases__ask { color: #FFFFFF; }
.st-cases__ask:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--st-ink); }

/* 가볍게 알아보는 나와 우리 — 두 줄이 같은 틀: 썸네일 같은 크기·비율, 글 시작선 한 줄, 가운데 맞춤,
 * 같은 줄 높이, 같은 화살표. 줄 전체가 누르는 자리다(최소 높이가 곧 닿는 넓이). */
#free .st-rows { border-top: 1px solid var(--st-line); }
.st-row--thumb {
  grid-template-columns: 112px minmax(0, 1fr) 20px; gap: 14px; align-items: center;
  min-height: 116px; padding: 14px 0; border-bottom: 1px solid var(--st-line);
}
.st-row--thumb .st-row__text { align-self: center; }
.st-row--thumb > .st-icon-line { width: 20px; height: 20px; justify-self: end; }
@media (max-width: 374px) {
  .st-row--thumb { grid-template-columns: 96px minmax(0, 1fr) 20px; gap: 12px; min-height: 124px; }
}

/* 스크립트가 없을 때 앵커(#ask-question)로 올라와도 질문 칸 전체와 그 머리가 보이게. */
#ask-question { scroll-margin-top: 96px; }

/* 종합 칸의 제목(2026-09-28 사용자 요청) — 무료 영역과 기존 띠(8px)로 나누고 위 여백을 둔다.
 * 제목은 무료 제목과 같은 명조 21 · 왼쪽 맞춤, 그 아래 원래 일러스트 카드(`.st-whole`)가 그대로 선다. */
.st-sec--whole-titled { border-top: 8px solid var(--st-band); padding-top: 30px; }

/* ── 읽는 글자 키움 (2026-09-28 사용자 요청 두 번 「풀이 본문 글씨체를 조금 더 크게」) ─────────────
 * 명조(Gowun Batang)는 글자 몸이 작아 17 에서도 작게 읽혔다 → 18 → 19. 결과 화면과 사례 본문이 같은 한 벌이다.
 * 줄 간격·문단 간격도 같은 비율로 넓힌다(19/34 ≈ 1.79). 홈 사례 발췌는 카드 안이라 17 에 둔다. */
.tp-skin .st-reading { font-size: 19px; line-height: 34px; }
.tp-skin .st-reading p { margin-bottom: 24px; }
.st-case__excerpt p { font-size: 17px; line-height: 30px; }

/* ── 홈 사례의 질문(Q) — 손님이 보낸 말풍선 (2026-09-28) ──────────────────────────
 * 답은 명조 본문이다. 질문은 **다른 목소리**로 보이게: 옅은 바탕의 말풍선 한 칸(보낸 쪽 모서리만 덜 둥글게),
 * 글꼴은 사이트가 직접 싣는 IBM Plex Sans KR 중간 굵기(시스템 고딕에 맡기면 기기마다 달라 밋밋했다).
 * Q 는 A(주홍 명조)와 짝인 명조 20·먹색, 말풍선 첫 줄에 맞춘다. */
.st-case__q { align-items: start; }
.st-case__q > span:first-child { font-size: 20px; line-height: 25px; margin-top: 11px; color: var(--st-ink); letter-spacing: 0; }
.st-case__qtext {
  display: block; padding: 11px 14px 12px; border-radius: 4px 16px 16px 16px; background: var(--st-fill);
  font-family: "IBM Plex Sans KR", var(--st-font-ui); font-size: 15.5px; line-height: 25px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--st-ink); word-break: keep-all; text-wrap: pretty;
}
.st-case__q + .st-case__a { margin-top: 16px; }