/* 본문 바로가기.
   site.css 에만 있던 규칙이다. 이것 두 개(`skip-link` · `no-js`) 때문에
   renovation 화면마다 81KB 짜리 site.css 를 통째로 받아 왔다. 옮겨 온다. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--rn-paper-soft, #faf8f7);
  color: var(--rn-ink, #1a1614);
  border-radius: 2px;
  font-size: 14px;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }
@media print {
  .skip-link { display: none !important; }
}

/* 사주텔링 리노베이션 — docs/renovation/design 정본 */
:root {
  --rn-ink: #1a1614;
  --rn-ink-deep: #171312;
  --rn-ink-soft: #28221f;
  --rn-field: #28221f;
  --rn-bg: #f6f2f0;
  --rn-paper: #ffffff;
  --rn-paper-card: #ffffff;
  --rn-paper-soft: #faf8f7;
  --rn-hanji: #ffffff;
  --rn-hanji-deep: #f4f0ee;
  --rn-hanji-line: #e6e0dd;
  --rn-line: #e4dedb;
  --rn-line-strong: #a69e9a;
  --rn-text: #1a1614;
  --rn-text-2: #4b4643;
  --rn-text-3: #716966;
  --rn-accent: #d13a14;
  --rn-accent-dark: #b32f13;
  --rn-accent-soft: #e2603d;
  --rn-accent-on-ink: #f78668;
  --rn-pine-on-ink: #63c6ab;
  --rn-accent-wash: #fdeae5;
  --rn-pine: #1b564b;
  --rn-pine-bright: #2f7d6c;
  --rn-green: #1b564b;
  --rn-green-dark: #1b564b;
  --rn-gold: #2f7d6c;
  --rn-gold-dark: #1b564b;
  --rn-success: #1a7a45;
  --rn-danger: #cc3616;
  --rn-info: #305a8c;
  --rn-lock: #837b78;
  --rn-radius: 14px;
  --rn-shadow: none;
}

* { box-sizing: border-box; }

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

html { scroll-behavior: smooth; }

body.rn-body {
  margin: 0;
  min-width: 320px;
  color: var(--rn-text);
  background: var(--rn-paper);
  font-family: "IBM Plex Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

.rn-body a { color: inherit; text-decoration: none; }
.rn-body img { max-width: 100%; }
/* 폼 요소는 글꼴을 물려받지 않는다. 그래서 여기서 한 번 물려준다.
   다만 `:where()` 로 감싸 **가중치를 0 으로 둔다.**

   예전에는 `.rn-body button` 이었다. 가중치가 (0,1,1) 이라 한 클래스짜리
   규칙(0,1,0)을 전부 이겼다 — `.rn-btn` 15px, `.rn-bcard__act` 14px,
   `.rn-consent-all` 13px, `.rn-duo-share` 12px, `.rn-profile-act` 12.5px 가
   하나도 적용되지 않고 **버튼이란 버튼은 모두 16px** 로 나갔다. CSS 에 크기를
   적어 두고 그 크기로 나온 적이 없었던 셈이다. QA 가 실제 버튼의 계산된 값을
   재서 잡아냈다. */
.rn-body :where(button, input, select, textarea) { font: inherit; }
.rn-body button, .rn-body a { -webkit-tap-highlight-color: transparent; }
.rn-body :focus-visible { outline: 2px solid var(--rn-info); outline-offset: 3px; }

/* `hidden` 은 언제나 숨김이다.
   ─────────────────────────────────────────────────────────────────────────
   브라우저의 `[hidden] { display: none }` 은 **사용자 에이전트 규칙**이라,
   우리가 어딘가에 `display` 를 한 줄만 적어도 명시도와 무관하게 진다. 그래서
   이 파일에는 `.rn-form__group[hidden]`·`.rn-profile-offer[hidden]` 처럼 같은
   사고를 한 컴포넌트씩 뒤늦게 막은 규칙이 열 줄 넘게 쌓여 있었다.

   막지 못한 곳에서 실제로 사고가 났다. 발행 대기 화면의 「바로 읽기」는
   `hidden` 으로 두고 다 됐을 때만 여는 버튼인데, `.rn-btn { display:inline-flex }`
   가 그 규칙을 이겨서 **결제 직후부터 계속 보였다.** 아직 안 만들어진 풀이를
   열라고 권하는 버튼이 결제 화면에 서 있었던 셈이다.

   한 줄로 끝낸다. 여기 있는 이상 어떤 컴포넌트도 이 사고를 다시 내지 않는다. */
[hidden] { display: none !important; }

.rn-mobile {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--rn-hanji);
  border-inline: 1px solid var(--rn-line);
  box-shadow: var(--rn-shadow);
}

.rn-wide {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.rn-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 64px;
  color: var(--rn-text);
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--rn-line);
}

.rn-nav__inner {
  position: relative;
  height: 100%;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.rn-brand { display: inline-flex; align-items: center; gap: 8px; min-width: max-content; }
.rn-brand img { display: block; width: 25px; height: 25px; border-radius: 3px; }
.rn-brand span { font-family: "Gowun Batang", serif; font-size: 17px; font-weight: 700; }

.rn-nav__links { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 14px; }
.rn-nav__links a { color: var(--rn-text-2); }
.rn-nav__links a:hover { color: var(--rn-accent-dark); }
.rn-nav__cta { padding: 8px 13px; color: var(--rn-accent-dark) !important; border: 1px solid var(--rn-accent); border-radius: 12px; }
.rn-nav__menu { min-width: 44px; min-height: 44px; flex: 0 0 44px; display: block; margin-left: auto; padding: 0; color: var(--rn-text); background: transparent; border: 0; border-radius: 999px; font-size: 22px; cursor: pointer; }
.rn-nav__menu:hover { color: var(--rn-accent-dark); background: var(--rn-paper-soft); }
.rn-nav__menu svg { width: 24px; height: 24px; display: block; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* 닉네임 아래에 붙는 작은 알림. 기한은 가장 먼저 만료되는 쿠폰 기준. */
.rn-coupon-notice {
  --coupon-arrow: 75%;
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  width: min(280px, calc(100% - 32px));
  padding: 12px 16px 8px;
  border: 1px solid var(--rn-line);
  border-radius: 12px;
  background: #fff;
  color: var(--rn-ink);
  box-shadow: 0 4px 16px rgba(40, 26, 16, .09);
  line-height: 1.5;
  animation: rn-coupon-arrive .24s ease-out both;
}
.rn-coupon-notice::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--coupon-arrow);
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid var(--rn-line);
  border-left: 1px solid var(--rn-line);
  transform: translateX(-50%) rotate(45deg);
}
.rn-coupon-notice__close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: var(--rn-text-3);
  background: transparent;
  cursor: pointer;
}
.rn-coupon-notice__close:hover { color: var(--rn-ink); }
.rn-coupon-notice__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rn-coupon-notice h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0 22px 0 0; font: 600 13px/1.6 "IBM Plex Sans KR", sans-serif; }
.rn-coupon-notice h2 .rn-menu-link__icon { width: 18px; height: 18px; border: 0; background: transparent; color: var(--rn-text-3); }
.rn-coupon-notice__time { font-size: 12px; font-weight: 500; color: var(--rn-text-3); }
.rn-coupon-notice__time.is-soon { color: var(--rn-accent-dark); }
.rn-coupon-notice__detail { margin: 4px 0 0; color: var(--rn-text-3); font-size: 12px; }
.rn-coupon-notice a.rn-coupon-notice__cta { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--rn-accent-dark); font-size: 12px; font-weight: 600; }
.rn-coupon-notice a.rn-coupon-notice__cta:hover { text-decoration: underline; }
.rn-menu-open .rn-coupon-notice { visibility: hidden; }
@keyframes rn-coupon-arrive { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rn-coupon-notice { animation: none; } }
@media (max-height: 580px) { .rn-coupon-notice { max-height: calc(100dvh - 100px); overflow-y: auto; } }
@media print { .rn-coupon-notice { display: none; } }
.rn-nav--dark { color: #faf8f7; background: rgba(26, 22, 20, .98); border-bottom-color: rgba(255, 255, 255, .12); }
.rn-nav--dark .rn-nav__links a { color: #c0b8b4; }
.rn-nav--dark .rn-nav__links a:hover { color: #ffffff; }
.rn-nav--dark .rn-nav__cta { color: var(--rn-accent-on-ink) !important; border-color: var(--rn-accent-on-ink); }
.rn-nav--dark .rn-nav__menu { color: #faf8f7; }
.rn-nav--dark .rn-nav__menu:hover { background: rgba(255,255,255,.09); }

html.rn-menu-open, html.rn-menu-open body { overflow: hidden; }
.rn-menu-layer { position: fixed; inset: 0; z-index: 120; }
.rn-menu-backdrop { position: absolute; inset: 0; background: rgba(26,22,20,.18); opacity: 0; transition: opacity .2s ease; }
.rn-menu-layer.is-open .rn-menu-backdrop { opacity: 1; }
.rn-menu-sheet { position: absolute; top: 62px; right: 12px; width: min(336px,calc(100vw - 24px)); max-height: calc(100dvh - 74px); display: flex; flex-direction: column; overflow: hidden; color: var(--rn-text); background: #ffffff; border: 1px solid var(--rn-line); border-radius: 16px; box-shadow: 0 18px 48px rgba(34,24,20,.2); opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; }
.rn-menu-layer.is-open .rn-menu-sheet { opacity: 1; transform: translateY(0); }
.rn-menu-sheet__head { min-height: 64px; padding: 11px 12px 11px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rn-line); }
.rn-menu-sheet__head strong { font: 700 19px/1.35 "Gowun Batang",serif; }
.rn-menu-sheet__close { width: 42px; height: 42px; display: grid; place-items: center; color: var(--rn-text); background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.rn-menu-sheet__close:hover { color: var(--rn-accent-dark); background: var(--rn-paper-soft); }
.rn-menu-sheet__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.rn-menu-sheet__scroll { min-height: 0; padding: 0 8px 12px; overflow-y: auto; overscroll-behavior: contain; }
.rn-menu-account { margin: 0 4px; padding: 16px 12px 17px; display: grid; gap: 3px; border-bottom: 1px solid var(--rn-line); }
.rn-menu-account > span { display: flex; align-items: center; gap: 6px; color: var(--rn-green); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.rn-menu-account > span i { width: 7px; height: 7px; display: block; background: var(--rn-green); border-radius: 999px; }
.rn-menu-account strong { overflow: hidden; font: 700 18px/1.45 "Gowun Batang",serif; text-overflow: ellipsis; white-space: nowrap; }
.rn-menu-account small { overflow: hidden; color: var(--rn-text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rn-menu-account--guest > span { color: var(--rn-text-3); }
.rn-menu-profile { margin-top: 12px; padding: 13px 14px; display: grid; gap: 3px; color: var(--rn-text); background: var(--rn-paper-soft); border: 1px solid var(--rn-line); border-radius: 12px; font-style: normal; }
.rn-menu-profile > span { color: var(--rn-pine); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.rn-menu-profile > b { font-size: 13px; line-height: 1.5; }
.rn-menu-profile > small { font-size: 12px; font-weight: 500; white-space: normal; }
.rn-menu-profile > em { color: var(--rn-accent-dark); font-size: 12px; font-style: normal; font-weight: 750; }
.rn-menu-profile--empty { color: inherit; }
.rn-menu-group { padding-top: 15px; }
.rn-menu-links { display: grid; }
.rn-menu-links a, .rn-menu-links button { min-height: 52px; width: 100%; padding: 9px 38px 9px 12px; position: relative; display: grid; align-content: center; gap: 1px; color: var(--rn-text-2); background: transparent; border: 0; border-top: 1px solid var(--rn-line); font: inherit; text-align: left; cursor: pointer; }
.rn-menu-links a::after { content: "›"; position: absolute; top: 50%; right: 13px; color: var(--rn-text-3); font-size: 20px; font-weight: 300; transform: translateY(-52%); }
.rn-menu-links a:hover, .rn-menu-links button:hover { color: var(--rn-accent-dark); background: var(--rn-paper-soft); }
.rn-menu-links b { font-size: 14px; font-weight: 680; line-height: 1.45; }
.rn-menu-links small { color: var(--rn-text-3); font-size: 12px; line-height: 1.4; }
.rn-menu-sheet__primary { color: var(--rn-pine) !important; }
.rn-menu-sheet__status { min-height: 0; margin: 0; padding: 0 12px; color: var(--rn-accent-dark); font-size: 12px; }
.rn-menu-sheet__status:not(:empty) { padding-block: 8px; }

@media (min-width: 761px) {
  .rn-menu-backdrop { background: rgba(26,22,20,.28); }
  .rn-menu-sheet { top: 0; right: 0; bottom: 0; width: min(400px,100vw); max-height: none; border-width: 0 0 0 1px; border-radius: 0; box-shadow: -20px 0 52px rgba(34,24,20,.18); opacity: 1; transform: translateX(100%); transition: transform .24s ease; }
  .rn-menu-layer.is-open .rn-menu-sheet { transform: translateX(0); }
  .rn-menu-sheet__head { min-height: 78px; padding: 15px 19px 15px 25px; }
  .rn-menu-sheet__head strong { font-size: 22px; }
  .rn-menu-sheet__scroll { padding: 0 16px 22px; }
  .rn-menu-account { margin-inline: 8px; padding: 22px 16px 23px; }
  .rn-menu-account strong { font-size: 22px; }
  .rn-menu-account small { font-size: 12px; }
  .rn-menu-group { padding-top: 20px; }
  .rn-menu-links a, .rn-menu-links button { min-height: 61px; padding: 10px 44px 10px 16px; }
  .rn-menu-links a::after { right: 17px; }
  .rn-menu-links b { font-size: 15px; }
  .rn-menu-links small { font-size: 12px; }
}

/* ── 계절 배너 ── 14 §5. 172px 정적 한 장. 자동 회전도 점도 없다. */
/* ── 홈 머리말 ── 이 사이트의 얼굴. 상자도 테두리도 없이 종이 위의 활자다.
   얼굴 그림은 바로 아래 무료 세 문이 가지고, 여기는 그 셋을 여는 말이다. */
/* 가입 이벤트 배너 — 첫 화면의 얼굴.
   430×148 로 그린 그림이라 폭에 맞추고 비율만 지킨다. 상자도 그림자도 없다 —
   그림 안에 이미 종이 질감과 테두리가 있어서, 밖에 한 겹 더 두르면 액자 안에
   액자가 된다. */
.rn-home-event {
  display: block;
  margin: 14px 16px 4px;
  line-height: 0;
}
.rn-home-event img {
  width: 100%;
  height: auto;
  aspect-ratio: 1290 / 444;
  border: 1px solid var(--rn-line);
}
@media (min-width: 480px) { .rn-home-event { margin-inline: 20px; } }

.rn-head { padding: 30px 20px 4px; }
.rn-head h1 {
  margin: 0;
  font: 700 30px/1.36 "Gowun Batang", serif;
  letter-spacing: -.025em;
  word-break: keep-all;
}
.rn-head p { margin: 14px 0 0; color: var(--rn-text-2); font-size: 14.5px; line-height: 1.75; word-break: keep-all; }
.rn-head b { color: var(--rn-text); font-weight: 600; }

/* ── 이 달의 한 줄 ── 계절 훅은 첫인상이 아니라 유료 진열 바로 위에 둔다. */
.rn-season {
  margin: 0 20px 14px;
  padding: 13px 15px;
  display: grid;
  gap: 3px;
  background: var(--rn-hanji-deep);
  border-left: 3px solid var(--rn-pine-bright);
  border-radius: 0 8px 8px 0;
}
.rn-season:hover { border-left-color: var(--rn-accent); }
.rn-season__when { color: var(--rn-pine); font-size: 12px; letter-spacing: .08em; }
.rn-season b { font: 700 16px/1.5 "Gowun Batang", serif; word-break: keep-all; }
.rn-season__cta { margin-top: 2px; color: var(--rn-accent-dark); font-size: 13px; font-weight: 500; }

/* ── 그림 한 자리 ── 아직 안 온 그림은 규격이 적힌 자리로 그린다.
   깨진 아이콘이나 빈 색 블록을 보여주지 않는다 (14 §8-8). */
.rn-scene { display: block; width: 100%; overflow: hidden; border-radius: 4px; }
.rn-scene img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rn-scene--pending {
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 12px;
  color: var(--rn-text-3);
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(26, 22, 20, .04) 7px 8px),
    var(--rn-hanji-deep);
  border: 1px dashed var(--rn-line-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
/* 파일 이름은 토큰 가운데서 끊지 않는다. `banner-2026-` / `09` 로 갈라지면
   이름이 아니라 고장으로 읽힌다. */
.rn-scene--pending b { display: block; color: var(--rn-text-2); font-weight: 500; overflow-wrap: anywhere; }
.rn-scene--pending > span { display: block; }
/* 발주서의 장면 요약. 그림이 오기 전에도 무엇이 들어올 자리인지 읽힌다. */
.rn-scene--pending i {
  display: block;
  max-width: 30ch;
  margin: 0 auto 2px;
  color: var(--rn-text-2);
  font-family: "Gowun Batang", serif;
  font-size: 13px;
  font-style: normal;
  line-height: 1.6;
  word-break: keep-all;
}
.rn-paid-card:not(.rn-paid-card--lead) .rn-scene--pending i { font-size: 12px; max-width: 18ch; }
.rn-banner__art .rn-scene--pending { padding: 8px; }

.rn-section { padding: 30px 20px; }
.rn-section--tight { padding-top: 20px; padding-bottom: 8px; }
.rn-section--paper { background: var(--rn-paper-card); }
.rn-section--ink { color: #faf8f7; background: var(--rn-ink); }
.rn-section__head { margin-bottom: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rn-section__head h2, .rn-section h2 { margin: 0; font: 700 24px/1.38 "Gowun Batang", serif; letter-spacing: -.01em; }
.rn-section__head a { color: var(--rn-gold-dark); font-size: 13px; font-weight: 600; }
.rn-section__lede { margin: 8px 0 0; color: var(--rn-text-2); font-size: 15px; }
/* 무료 섹션 머리는 작게 간다. 첫 화면 740px 예산(14 §4-3)이 섹션 머리를 하나만 잡았고,
   여기서 24px 를 한 번 더 쓰면 무료 세 번째 카드가 화면 밖으로 밀린다. */
.rn-section__head--sub { margin-bottom: 12px; }
.rn-section__head--sub h2 { font: 600 14px/1.5 "IBM Plex Sans KR", sans-serif; letter-spacing: .02em; color: var(--rn-text-2); }

/* 로그인한 사람에게만 보이는 한 줄. 무료 세 문 위에 놓아 「내 것」이 먼저
   눈에 들어오게 한다. 문패들과 같은 폭·같은 모서리를 쓰되 색으로만 갈린다. */
.rn-home-member {
  margin: 18px 20px 0;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rn-paper);
  background: var(--rn-ink, #2a2320);
  border-radius: 12px;
  text-decoration: none;
}
.rn-home-member__who { font-weight: 700; font-size: 14px; white-space: nowrap; }
.rn-home-member__line { flex: 1; font-size: 13.5px; color: rgba(255,255,255,.82); }
.rn-home-member__line b { color: var(--rn-paper); font-weight: 700; }
.rn-home-member__go { font-size: 19px; color: rgba(255,255,255,.6); }
.rn-home-return { margin: 14px 20px 0; padding: 14px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 12px; color: var(--rn-text); background: var(--rn-accent-wash); border: 1px solid #f0b8a6; border-radius: 12px; }
.rn-home-return[hidden] { display: none; }
.rn-home-return__icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--rn-accent-dark); background: #ffffff; border: 1px solid var(--rn-accent); border-radius: 999px; font-size: 18px; font-weight: 800; }
.rn-home-return__copy { min-width: 0; display: block; }
.rn-home-return__copy > span { display: block; color: var(--rn-accent-dark); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.rn-home-return b { display: block; margin-top: 2px; font: 700 17px/1.45 "Gowun Batang", serif; }
.rn-home-return p { margin: 3px 0 0; color: var(--rn-text-2); font-size: 12px; line-height: 1.55; }
.rn-home-return.has-saved-result { background: #edf5f2; border: 2px solid var(--rn-pine); }
.rn-home-return.has-saved-result .rn-home-return__icon { color: #ffffff; background: var(--rn-pine); border-color: var(--rn-pine); }
.rn-home-return.has-saved-result .rn-home-return__copy > span { color: var(--rn-pine); }

.rn-section[id] { scroll-margin-top: 72px; }
.rn-doors { display: grid; gap: 8px; }
.rn-door {
  position: relative;
  min-height: 126px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: clamp(136px, 38vw, 146px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: var(--rn-hanji-deep);
  border: 1px solid #d5cdc9;
  border-left: 4px solid var(--door-accent, var(--rn-green));
  border-radius: 0;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.rn-door:hover { transform: translateY(-2px); background: #ffffff; border-color: var(--door-accent); }
.rn-door.has-profile-ready,
.rn-door.has-saved-result { animation: rn-door-open .32s ease both; animation-delay: var(--door-delay, 0ms); }
.rn-door__action { width: fit-content; max-width: 100%; min-height: 24px; margin-top: 6px; padding: 3px 8px; display: inline-flex; align-items: center; color: var(--rn-text-3); background: #ffffff; border: 1px solid var(--rn-line-strong); border-radius: 999px; font-size: 12px; font-weight: 750; line-height: 1.35; white-space: nowrap; }
.rn-door.has-profile-ready .rn-door__action { color: var(--rn-pine); border-color: var(--rn-pine); }
.rn-door.has-saved-result { background: #edf5f2; border: 2px solid var(--rn-pine); border-left-width: 6px; }
.rn-door.has-saved-result:hover { background: #edf5f2; border-color: var(--rn-pine); }
.rn-door.has-saved-result .rn-door__image { border-color: var(--rn-pine); }
.rn-door.has-saved-result .rn-door__image::after { content: "✓"; position: absolute; top: 7px; right: 7px; width: 25px; height: 25px; display: grid; place-items: center; color: #ffffff; background: var(--rn-pine); border: 2px solid #ffffff; border-radius: 999px; font-size: 13px; font-weight: 800; }
.rn-door.has-saved-result .rn-door__action { color: #ffffff; background: var(--rn-pine); border-color: var(--rn-pine); border-radius: 5px; }
.rn-door__image { position: relative; width: 100%; aspect-ratio: 73 / 56; overflow: hidden; background: var(--rn-paper-card); border: 1px solid color-mix(in srgb, var(--door-accent) 35%, transparent); }
.rn-door__image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; image-rendering: auto; transform: translateZ(0); }
.rn-door__image i { position: absolute; right: 5px; bottom: 2px; color: var(--door-accent); font: normal 14px "Song Myung", serif; text-shadow: 0 0 4px var(--rn-hanji); }
.rn-door__copy { min-width: 0; }
.rn-door__badges { display: flex; gap: 4px; }
.rn-badge { padding: 2px 6px; color: var(--rn-text-2); border: 1px solid var(--rn-line-strong); font-size: 12px; line-height: 1.4; }
.rn-badge--free { color: #fff; border-color: var(--rn-success); background: var(--rn-success); }
.rn-badge--member { color: var(--rn-gold-dark); border-color: var(--rn-gold-dark); }
.rn-door h3 { margin: 5px 0 0; font: 700 17px/1.45 "Gowun Batang", serif; }
.rn-door p { margin: 2px 0 0; color: var(--rn-text-2); font-size: 12px; line-height: 1.55; }
.rn-door__arrow { color: var(--rn-gold-dark); font-size: 17px; }
@keyframes rn-door-open { from { opacity: .55; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

/* ── 유료 7종 ── 14 §4-2-⑤. 가로 스크롤은 430px 에서 일곱 중 다섯을 숨겼다.
   균등 2열이면 일곱 번째가 고아가 되므로 첫 장을 풀폭으로 세운다. */
.rn-paid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rn-paid-card {
  min-width: 0;
  padding: 8px 8px 12px;
  display: block;
  background: var(--rn-paper-card);
  border: 1px solid var(--rn-line);
  /* 상품 고유색. 무료 세 문은 먹색 선화 그대로 두고 유료부터 색이 붙는다 —
     훑는 것만으로 층이 바뀐 게 보인다. 같은 색이 리포트 표지 인장에서 다시 나온다. */
  border-top: 3px solid var(--product, var(--rn-line));
  border-radius: 14px;
  transition: transform .2s ease, border-color .2s ease;
}
.rn-paid-card:hover { transform: translateY(-2px); border-color: var(--product, var(--rn-accent)); }
/* 상품 고유색. 무료 세 문은 먹색 그대로 두고 유료부터 색이 붙는다 — 훑는 것만으로
   층이 바뀐 게 보인다. 같은 색이 리포트 표지 인장에서 다시 나온다. */
.rn-paid-card__art { display: block; }
.rn-paid-card__art .rn-scene { aspect-ratio: 190 / 143; }
.rn-paid-card strong span {
  /* 값 옆의 분량. 값 차이를 설명하는 유일한 숫자라 값과 나란히 둔다. */
  margin-left: 6px;
  color: var(--rn-text-3);
  font-size: 12px;
  font-weight: 400;
}
.rn-paid-card strong span::before { content: "· "; }
.rn-paid-card h3 { min-height: 46px; margin: 9px 2px 0; font: 700 16px/1.42 "Gowun Batang", serif; word-break: keep-all; }
.rn-paid-card strong { display: block; margin: 6px 2px 0; color: var(--product, var(--rn-accent-dark)); font: 700 15px "Gowun Batang", serif; }
.rn-paid-card--lead { grid-column: 1 / -1; }
.rn-paid-card--lead .rn-scene { aspect-ratio: 390 / 260; }
.rn-paid-card--lead h3 { min-height: 0; margin-top: 12px; font-size: 20px; }
/* 훅은 일곱 장 모두에 붙는다. 풀폭 한 장은 넓으니 그대로 두고, 2열 여섯 장은
   한 줄로 맞춰 카드 높이가 들쭉날쭉해지지 않게 한다. */
.rn-paid-card p { margin: 4px 2px 0; color: var(--rn-text-2); font-size: 12.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rn-paid-card--lead p { margin: 5px 2px 0; font-size: 13px; line-height: 1.6; -webkit-line-clamp: 3; }
.rn-paid-card--lead strong { font-size: 17px; }
.rn-strip-contract { margin: 16px 0 0; color: var(--rn-text-3); font-size: 12px; line-height: 1.75; }

/* ── 다리 ── 1,900원과 24,900원 사이의 유일한 연결 (14 §4-2-⑥). */
.rn-bridge {
  margin: 0 20px;
  padding: 17px 18px;
  background: var(--rn-hanji-deep);
  border-top: 1px dashed var(--rn-line-strong);
  border-radius: 0 0 10px 10px;
}
.rn-bridge b { display: block; font: 700 16px/1.5 "Gowun Batang", serif; }
.rn-bridge p { margin: 7px 0 0; color: var(--rn-text-2); font-size: 13.5px; line-height: 1.75; }
.rn-bridge--credited { background: #edf5f2; border-top-color: var(--rn-pine); }
.rn-bridge--credited b { color: var(--rn-pine); }

/* ── 본상품 2종 ── 풀폭 편집형. 소액보다 분명히 큰 선택으로 보이게. */
.rn-main-cards { display: grid; gap: 10px; }
.rn-main-card {
  padding: 8px 8px 14px;
  display: block;
  background: var(--rn-paper-card);
  border: 1px solid var(--rn-line);
  border-top: 3px solid var(--product, var(--rn-line));
  border-radius: 14px;
  transition: transform .2s ease, border-color .2s ease;
}
.rn-main-card:hover { transform: translateY(-2px); border-color: var(--product, var(--rn-accent)); }
.rn-main-card .rn-scene { aspect-ratio: 390 / 260; }
.rn-main-card h3 { margin: 13px 3px 0; font: 700 21px/1.42 "Gowun Batang", serif; word-break: keep-all; }
.rn-main-card p { margin: 6px 3px 0; color: var(--rn-text-2); font-size: 13.5px; line-height: 1.7; word-break: keep-all; }
/* 값 줄. 왼쪽에 무엇을 사는지, 오른쪽에 얼마인지 — 넷을 가운뎃점으로 이어
   한 문장으로 흘리면 값을 찾으려고 문장을 끝까지 읽어야 한다. */
.rn-main-card__buy {
  margin: 13px 3px 0;
  padding-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--rn-line);
}
.rn-main-card__kind {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--product, var(--rn-accent-dark));
  font-size: 13px;
  font-weight: 700;
}
.rn-main-card__kind i {
  color: var(--rn-text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  word-break: keep-all;
}
.rn-main-card__price {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--rn-text);
  font: 700 22px/1.1 "Gowun Batang", serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 둘값은 같은 상품의 다른 갈래지 다른 상품이 아니다. 값 아래 작게 붙인다. */
.rn-main-card__price i {
  color: var(--rn-text-3);
  font: 400 12px/1.4 "IBM Plex Sans KR", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ── 신뢰 꼬리 ── 후기가 0건인 상태에서 신뢰를 만드는 방법.
   검증된 숫자만 쓴다. 별점도 이용자 수도 만들지 않는다 (14 §4-2-⑧). */
/* 신뢰 자리는 이제 명판 한 장이다. 문단 시절의 `p`·`hr`·`small` 규칙이
   남아 있었는데, 그것들이 명판의 글자 크기와 여백을 덮어써서 안이 밀려
   보였다. 규칙이 없어진 게 아니라 명판 쪽으로 옮겨 갔다. */
.rn-trust { background: var(--rn-hanji-deep); }

.rn-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rn-pillar { padding: 9px 5px; text-align: center; background: var(--rn-paper-soft); border: 1px solid var(--rn-line); border-radius: 10px; }
.rn-pillar.is-day { border: 2px solid var(--rn-accent); }
.rn-pillar span { display: block; color: var(--rn-text-3); font-size: 12px; }
.rn-pillar b { display: block; font: 400 19px/1.35 "Song Myung", serif; }

.rn-dock {
  position: sticky;
  bottom: 0;
  z-index: 35;
  padding: 12px max(20px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--rn-line);
  box-shadow: 0 -8px 24px rgba(34, 24, 20, .07);
}

.rn-btn {
  min-height: 48px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff !important;
  background: var(--rn-accent);
  border: 1px solid var(--rn-accent);
  border-radius: var(--rn-radius);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.rn-btn:hover { background: var(--rn-accent-dark); border-color: var(--rn-accent-dark); }
.rn-btn--block { width: 100%; min-height: 56px; }
.rn-btn--gold { color: #ffffff !important; background: var(--rn-accent); border-color: var(--rn-accent); }
.rn-btn--gold:hover { background: var(--rn-accent-dark); border-color: var(--rn-accent-dark); }
.rn-btn--paper { color: var(--rn-text-2) !important; background: var(--rn-paper-card); border-color: var(--rn-line-strong); }
.rn-btn--ink { color: #fff !important; background: var(--rn-ink); border-color: var(--rn-ink); }

.rn-footer { padding: 30px 22px 96px; color: var(--rn-text-3); background: var(--rn-paper-soft); border-top: 1px solid var(--rn-line); }
.rn-footer__links { display: flex; flex-wrap: wrap; gap: 10px 16px; color: var(--rn-text-2); font-size: 13px; }
.rn-footer__biz { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--rn-line); font-size: 12px; line-height: 1.9; }
.rn-footer__notice { margin: 16px 0 0; font-size: 12px; line-height: 1.8; }

/* Mobile product and responsive information pages */
.rn-page { min-height: 100vh; background: #ffffff; }
.rn-kicker { color: var(--rn-gold-dark); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.rn-product-faq details { border-top: 1px solid var(--rn-line); }
.rn-product-faq details:first-of-type { margin-top: 18px; }
.rn-product-faq details:last-child { border-bottom: 1px solid var(--rn-line); }
.rn-product-faq summary { min-height: 52px; padding: 13px 32px 13px 0; position: relative; cursor: pointer; font-weight: 650; list-style: none; }
.rn-product-faq summary::-webkit-details-marker { display: none; }
.rn-product-faq summary::after { content: "+"; position: absolute; top: 12px; right: 4px; color: var(--rn-accent-dark); font-size: 21px; font-weight: 400; }
.rn-product-faq details[open] summary::after { content: "−"; }
.rn-product-faq details p { margin: 0; padding: 0 28px 16px 0; color: var(--rn-text-2); line-height: 1.75; }
.rn-text-link { display: inline-block; margin-top: 13px; color: var(--rn-accent-dark) !important; font-size: 14px; font-weight: 600; text-decoration: underline !important; text-underline-offset: 4px; }
.rn-chapters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 22px; counter-reset: chapter; }
.rn-chapter { counter-increment: chapter; padding: 15px; background: var(--rn-hanji); border: 1px solid var(--rn-hanji-line); border-radius: 12px; }
.rn-chapter::before { content: counter(chapter, decimal-leading-zero); display: block; margin-bottom: 7px; color: var(--rn-gold-dark); font: 400 13px "Song Myung", serif; }
.rn-chapter b { font-family: "Gowun Batang", serif; }
.rn-buy-card__name { margin: 0; font: 700 21px/1.45 "Gowun Batang", serif; }
.rn-buy-card__price { margin: 12px 0; color: var(--rn-accent-dark); font: 700 28px "Gowun Batang", serif; }
.rn-buy-card__fine { margin: 12px 0 0; color: var(--rn-text-3); font-size: 13px; line-height: 1.7; }
.rn-legal-box { margin-top: 16px; padding: 14px; color: var(--rn-text-2); background: var(--rn-paper-soft); border: 1px solid var(--rn-line); border-radius: 12px; font-size: 13px; line-height: 1.75; }

/* The whole paid flow, including its header and footer, stays a 430px mobile document. */
.rn-mini-product-page,
.rn-mini-order-page,
.rn-mini-pending-page {
  overflow: clip;
  background: #ffffff;
}
/* ── 유료 상세 ── 14 §6. 「포함 내용」 목록 대신 질문 셋으로 설득한다. */
.rn-detail { background: #ffffff; }
.rn-detail__hero { padding: 28px 20px 24px; }
.rn-detail__hero h1 { margin: 0; font: 700 27px/1.38 "Gowun Batang", serif; letter-spacing: -.02em; word-break: keep-all; }
.rn-detail__hook { margin: 9px 0 0; color: var(--rn-text-2); font-size: 15px; line-height: 1.78; word-break: keep-all; }
.rn-detail__art { margin: 18px 0 0; }
.rn-detail__art .rn-scene { aspect-ratio: 2 / 1; }

/* 2인 상품의 마찰. 요구가 아니라 안심으로 읽혀야 한다 (§6-4). */
.rn-detail-ease {
  margin: 14px 0 0;
  padding: 11px 13px;
  color: var(--rn-pine);
  background: var(--rn-hanji-deep);
  border-left: 2px solid var(--rn-pine-bright);
  border-radius: 0 4px 4px 0;
  font-size: 13.5px;
  line-height: 1.65;
}

.rn-detail__buy { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.rn-detail__price { flex: 0 0 auto; color: var(--product, var(--rn-text)); font: 700 21px/1 "Gowun Batang", serif; }
.rn-detail__hero { border-top: 3px solid var(--product, transparent); }
.rn-detail-ease { border-left-color: var(--product, var(--rn-pine-bright)); color: var(--product, var(--rn-pine)); }
.rn-detail__buy .rn-btn { flex: 1; min-height: 52px; }

.rn-detail__body { border-top: 8px solid var(--rn-paper-soft); }
.rn-detail__body > section { padding: 26px 20px; border-bottom: 1px solid var(--rn-line); }
.rn-detail__body > section > h2 {
  margin: 0; font: 700 20px/1.45 "Gowun Batang", serif;
  word-break: keep-all; text-wrap: balance;
}
.rn-detail__body > section > p {
  margin: 10px 0 0; color: var(--rn-text-2); font-size: 14px; line-height: 1.85;
  word-break: keep-all; text-wrap: pretty;
}
.rn-detail-q + .rn-detail-q { border-top: 0; }
.rn-detail-q h2 { font-size: 18px !important; }

.rn-detail-when ul, .rn-detail-cannot ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rn-detail-when li, .rn-detail-cannot li { position: relative; padding-left: 15px; color: var(--rn-text-2); font-size: 14px; line-height: 1.7; }
.rn-detail-when li::before, .rn-detail-cannot li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 1px; background: var(--rn-line-strong); }

.rn-detail-basis__note { font-size: 12.5px !important; color: var(--rn-text-3) !important; }

/* 못 보는 것을 먼저 적는다. 거절 목록 공개가 이 시장에서 가장 강한 신뢰 장치다. */
.rn-detail-cannot { background: var(--rn-accent-wash); }
.rn-detail-cannot h2 { color: var(--rn-accent-dark); }
.rn-detail-cannot li::before { background: var(--rn-accent); }

/* 샘플 전문. 첫 화면에서 내리고 결제 버튼 위 한 블록으로 (§1-2 B1). */
.rn-detail-sample { padding: 0 !important; }
.rn-detail-sample__open {
  min-height: 76px;
  padding: 18px 44px 18px 20px;
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  background: var(--rn-paper-soft);
}
.rn-detail-sample__open span { font: 700 16px "Gowun Batang", serif; }
.rn-detail-sample__open small { color: var(--rn-text-3); font-size: 12.5px; line-height: 1.6; }
.rn-detail-sample__open::after { content: "›"; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: var(--rn-accent-dark); font-size: 22px; }
.rn-detail-sample__open:hover { background: var(--rn-hanji-deep); }

.rn-detail-faq { border-top: 1px solid var(--rn-line); }
.rn-detail-faq:first-of-type { margin-top: 14px; border-top: 0; }
.rn-detail-faq summary { min-height: 52px; padding: 13px 32px 13px 0; position: relative; cursor: pointer; font-size: 14.5px; font-weight: 650; list-style: none; }
.rn-detail-faq summary::-webkit-details-marker { display: none; }
.rn-detail-faq summary::after { content: "+"; position: absolute; top: 12px; right: 4px; color: var(--rn-accent-dark); font-size: 21px; font-weight: 400; }
.rn-detail-faq[open] summary::after { content: "−"; }
.rn-detail-faq p { margin: 0; padding: 0 28px 16px 0; color: var(--rn-text-2); font-size: 13.5px; line-height: 1.8; }

/* 폼 끝의 제출 버튼 자리. 상품 화면의 결제 띠(`.rn-detail__dock`)와 같은
   물건이고, 이유도 같다 — 폼이 길면 버튼이 화면 밖에 있어서, 다 채우고도
   무엇을 눌러야 하는지 찾아 내려야 한다. 바닥에 붙여 늘 보이게 한다.

   좌우로는 감싸개의 22px 여백을 되돌려 화면 끝까지 채운다. 무료 폼
   (`.rn-form-wrap`)과 주문 폼(`.rn-order-wrap`)이 같은 값을 쓴다. */
.rn-form-dock {
  position: sticky;
  bottom: 0;
  z-index: 35;
  margin-inline: -22px;
  padding: 10px 22px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--rn-line);
}
.rn-form-dock .rn-btn { min-height: 52px; }
.rn-detail__dock { position: sticky; bottom: 0; z-index: 35; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--rn-line); }
.rn-detail__dock .rn-btn { min-height: 52px; }
/* 법정 세 줄. 카드에서만 뺐지 없앤 것이 아니다 (§1-2 B2·B3). */
.rn-detail__legal { margin: 9px 0 0; color: var(--rn-text-3); font-size: 12px; line-height: 1.75; }
.rn-detail__legal a { color: var(--rn-text-2); text-decoration: underline; }

/* ── 본상품 주문 폼 ── 14 §7-1. 질문을 먼저 받는다. */
.rn-textarea { min-height: 84px; padding: 13px; line-height: 1.7; resize: vertical; }
.rn-textarea--tall { min-height: 132px; }
/* 「선택」이 라벨에 붙어 「있었던 일 선택」이라는 동사처럼 읽히면 안 된다. */
.rn-optional {
  margin-left: 6px;
  padding: 1px 6px;
  color: var(--rn-text-3);
  background: var(--rn-hanji-deep);
  border: 1px solid var(--rn-line);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: middle;
}
.rn-ask-fields .rn-btn { margin-top: 4px; }
.rn-ask-fields .rn-intake__verdict { margin-top: 12px; }
.rn-wait--queued .rn-wait__clock { color: var(--rn-pine); }
.rn-wait--review .rn-wait__clock { color: var(--rn-pine); }
.rn-wait--ready .rn-wait__clock { color: var(--rn-pine); }
.rn-wait--failed .rn-wait__clock { color: var(--rn-danger); }

/* ── 본상품 상세 ── 14 §7. */
.rn-detail--long .rn-detail-ease { color: var(--rn-text); background: var(--rn-accent-wash); border-left-color: var(--rn-accent); }
.rn-detail__soon { margin-top: 18px; padding: 18px; background: var(--rn-hanji-deep); border: 1px solid var(--rn-line); border-radius: 12px; }
.rn-detail__soon b { display: block; font: 700 16px "Gowun Batang", serif; }
.rn-detail__soon p { margin: 7px 0 14px; color: var(--rn-text-2); font-size: 13.5px; line-height: 1.7; }

/* 접수 게이트. 게이트 자체는 무료다 — 못 하는 것을 결제 전에 말한다. */
.rn-intake { background: var(--rn-hanji-deep); }
.rn-intake .rn-intake__field { min-height: 96px; margin-top: 14px; padding: 13px; line-height: 1.7; resize: vertical; }
.rn-intake .rn-btn { margin-top: 10px; }
.rn-intake__verdict { margin: 14px 0 0; padding: 13px 15px; background: #ffffff; border-left: 2px solid var(--rn-line-strong); border-radius: 0 4px 4px 0; font-size: 13.5px !important; line-height: 1.75; }
/* `.is-checking` 이 `display:flex` 를 들고 아래에 서므로, 명시도가 같으면
   숨김이 진다. 요소 이름을 붙여 이 줄이 언제나 이기게 한다. */
p.rn-intake__verdict[hidden] { display: none; }

/* 결제 전 미리보기 — 「답할 수 있어요」 아래에 실제로 계산한 것과 실제로 답한
   것을 붙인다. 이 자리가 사기 직전 마지막 화면이라, 여기서 보여 줄 수 있는
   유일한 근거는 지어낼 수 없는 것들이다. */
.rn-preview { margin-top: 14px; display: grid; gap: 16px; }
.rn-preview[hidden] { display: none; }
.rn-preview h3 { margin: 0 0 9px; font: 700 14px/1.5 "Gowun Batang",serif; }
.rn-preview__chart { padding: 15px; background: #ffffff; border: 1px solid var(--rn-line); border-radius: 10px; }
.rn-preview__pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rn-preview__pillars > div { padding: 10px 4px; display: grid; gap: 3px; justify-items: center; background: var(--rn-paper-soft); border-radius: 8px; }
.rn-preview__pillars span { color: var(--rn-text-3); font-size: 12px; }
.rn-preview__pillars b { font: 700 21px/1.2 "Gowun Batang",serif; }
.rn-preview__pillars b.is-unknown { color: var(--rn-text-3); font-size: 14px; }
.rn-preview__pillars i { color: var(--rn-text-3); font-size: 12px; font-style: normal; text-align: center; }
.rn-preview__chart p { margin: 11px 0 0; color: var(--rn-text-2); font-size: 13px; }
/* 목차를 기다리는 자리. 진행률 막대나 스피너를 쓰지 않는다 — 기계의 시간을
   사람에게 보여 주는 장치라 기다림이 더 길게 느껴진다. 대신 무엇이 채워질
   자리인지 보이게 두고, 글 모양의 회색 줄이 조용히 숨 쉰다. */
/* 목차를 짜는 동안. 하는 말이 둘이라 줄도 둘이다 — 한 줄에 이어 붙이면
   남은 초가 앞 문장 꼬리에 매달려 아무 데서나 줄이 바뀐다. */
.rn-preview__waiting { margin: 0 0 12px; display: flex; align-items: flex-start; gap: 8px; color: var(--rn-text-3); font-size: 13px; line-height: 1.6; }
.rn-preview__waiting i { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 6px; background: var(--product, var(--rn-accent-dark)); border-radius: 999px; animation: rn-breathe 1.6s ease-in-out infinite; }
.rn-preview__waiting-text { display: grid; gap: 3px; min-width: 0; }
.rn-preview__waiting-text b { color: var(--rn-text-2); font-variant-numeric: tabular-nums; }
.rn-preview__ghost { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.rn-preview__ghost li { height: 13px; background: var(--rn-line); border-radius: 4px; animation: rn-breathe 1.6s ease-in-out infinite; }
.rn-preview__ghost li:nth-child(2) { width: 82%; animation-delay: .2s; }
.rn-preview__ghost li:nth-child(3) { width: 64%; animation-delay: .4s; }
@keyframes rn-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
@media (prefers-reduced-motion: reduce) {
  .rn-preview__waiting i, .rn-preview__ghost li { animation: none; }
}
.rn-preview__outline { padding: 15px; background: var(--rn-paper-card); border: 1px solid var(--rn-line-strong); border-radius: 10px; }
.rn-preview__outline blockquote { margin: 0 0 12px; padding-left: 11px; border-left: 2px solid var(--product, var(--rn-accent-dark)); font-size: 14px; font-weight: 700; line-height: 1.6; }
.rn-preview__outline ol { margin: 0; padding-left: 19px; display: grid; gap: 10px; }
.rn-preview__outline li b { display: block; font-size: 14px; }
.rn-preview__outline li span { display: block; margin-top: 2px; color: var(--rn-text-2); font-size: 13px; line-height: 1.6; }
.rn-preview__fine { margin: 12px 0 0; color: var(--rn-text-3); font-size: 12px; line-height: 1.65; }
.rn-preview__nudge { margin: 0; color: var(--rn-text-3); font-size: 13px; line-height: 1.7; }
.rn-intake__verdict.is-ok { color: var(--rn-pine); border-left-color: var(--rn-pine-bright); }
.rn-intake__verdict.is-no { color: var(--rn-accent-dark); border-left-color: var(--rn-accent); }
/* 한 걸음 남은 질문. 벽이 아니라 안내라서 빨강을 쓰지 않는다 —
   「퇴사할까요」같은 멀쩡한 질문이 거절당한 얼굴로 보이면 안 된다. */
.rn-intake__verdict.is-more { color: var(--rn-text); border-left-color: var(--rn-line-strong); }
/* 아직 판정 중. 초록도 빨강도 쓰지 않는다 — 어느 쪽으로든 색을 주면 그것이
   답으로 읽히고, 그러라고 이 상태를 만든 것이 아니다. 점 하나가 숨을 쉰다. */
.rn-intake__verdict.is-checking {
  color: var(--rn-text-3);
  border-left-color: var(--rn-line-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rn-intake__verdict.is-checking::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--product, var(--rn-accent-dark));
  border-radius: 999px;
  animation: rn-breathe 1.6s ease-in-out infinite;
}
/* 위쪽 `prefers-reduced-motion` 블록은 이 규칙보다 **앞**에 있다. 명시도가
   같으면 뒤에 온 쪽이 이기므로 거기 얹으면 애니메이션이 그대로 돈다. */
@media (prefers-reduced-motion: reduce) {
  .rn-intake__verdict.is-checking::before { animation: none; }
}
/* 목차가 한도에 걸려 기다리는 동안의 초 세기. 숫자가 자리를 옮기지 않게 한다. */
.rn-preview__waiting b { color: var(--rn-text-2); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── 발행 대기 ── 14 §2-2. 퍼센트 대신 시계, 로그 대신 사람의 말. */
.rn-wait { width: min(100%, 430px); margin: 0 auto; padding: 44px 24px 40px; text-align: center; }
.rn-wait .rn-kicker { color: var(--rn-pine); }
.rn-wait__title { margin: 8px 0 0; color: var(--rn-text-2); font-size: 14px; }
.rn-wait__clock {
  margin: 26px 0 0;
  font: 700 44px/1 "Gowun Batang", serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.rn-wait__clock.is-over { font-size: 28px; }
.rn-wait__label { margin: 8px 0 0; color: var(--rn-text-3); font-size: 12px; letter-spacing: .08em; }
.rn-wait__steps { margin: 36px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; text-align: left; }
.rn-wait__steps li { display: flex; align-items: flex-start; gap: 11px; color: var(--rn-line-strong); font-size: 15px; line-height: 1.6; transition: color .3s ease; }
.rn-wait__steps i { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 8px; border: 1.5px solid currentColor; border-radius: 50%; }
.rn-wait__steps li.on { color: var(--rn-text); }
.rn-wait__steps li.on i { background: var(--rn-accent); border-color: var(--rn-accent); }
.rn-wait__steps li.done { color: var(--rn-text-3); }
.rn-wait__steps li.done i { background: var(--rn-pine-bright); border-color: var(--rn-pine-bright); }
/* 막힌 단계. 초록 점이 이어지다 여기서 끊긴 것이 보여야 「지금 다시 쓰고
   있다」는 오해가 안 생긴다. */
.rn-wait__steps li.fail { color: var(--rn-text-2); }
.rn-wait__steps li.fail i { background: var(--rn-danger); border-color: var(--rn-danger); }
.rn-wait__note { margin: 32px 0 22px; color: var(--rn-text-3); font-size: 13.5px; line-height: 1.8; text-align: left; }
/* 대기 화면의 버튼들. 전폭 버튼 둘이 여백 없이 맞붙어 한 덩어리로 보였다 —
   「바로 읽기」와 「구매내역에서 확인」은 하는 일이 다르고 무게도 다르다. */
.rn-wait .rn-btn { margin-top: 10px; }
.rn-wait .rn-btn + .rn-btn { margin-top: 8px; }

/* 「이미 뽑아 두셨어요」 — 열지, 새로 뽑을지 고르는 자리.
   예전에는 이 응답을 받고 말없이 그 주문 화면으로 옮겨 갔다. 다 된 주문이라
   「바로 읽기」가 즉시 떠 있고, 손님은 방금 적어 낸 것이 나온 줄 안다. */
.rn-order-reused {
  margin: 16px 0 0;
  padding: 15px 17px;
  color: var(--rn-text);
  background: var(--rn-hanji-deep);
  border: 1px solid var(--rn-line-strong);
  border-radius: 12px;
}
.rn-order-reused b { display: block; font-size: 14px; }
.rn-order-reused p {
  margin: 5px 0 0;
  color: var(--rn-text-2);
  font-size: 13px;
  line-height: 1.7;
}
.rn-order-reused__acts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.rn-order-reused__acts .rn-btn { flex: 1 1 140px; min-height: 46px; }
/* Trust and information pages */
.rn-policy-page { background: #ffffff; }
.rn-trust-wrap, .rn-trust-main { width: 100%; margin-inline: auto; }
.rn-trust-heading { padding: 52px 20px 40px; background: var(--rn-hanji); }
.rn-trust-heading h1 { max-width: 13em; margin: 10px 0 0; font: 700 36px/1.3 "Gowun Batang", serif; letter-spacing: -.025em; }
.rn-trust-heading p { max-width: 42em; margin: 16px 0 0; color: var(--rn-text-2); font-size: 15px; }
.rn-trust-hero { padding: 58px 22px 52px; color: #faf8f7; text-align: center; background: var(--rn-ink); }
.rn-trust-hero > img { width: 44px; height: 44px; display: block; margin: 0 auto 18px; border-radius: 6px; }
.rn-trust-hero .rn-kicker { color: var(--rn-accent-on-ink); }
.rn-trust-hero h1 { margin: 10px 0 0; font: 700 40px/1.3 "Gowun Batang", serif; }
.rn-trust-hero p { max-width: 38em; margin: 18px auto 0; color: #c0b8b4; font-size: 16px; }
.rn-trust-main { padding: 48px 20px 94px; }
.rn-trust-section + .rn-trust-section, .rn-quality-step + .rn-quality-step { margin-top: 50px; }
.rn-trust-section > h2, .rn-quality-step > h2, .rn-faq-group > h2 { margin: 9px 0 0; font: 700 26px/1.45 "Gowun Batang", serif; }
.rn-trust-section > p, .rn-quality-step > p { margin: 16px 0 0; color: var(--rn-text-2); line-height: 1.95; }
.rn-promise-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.rn-trust-card { padding: 20px; background: var(--rn-paper-card); border: 1px solid var(--rn-line); border-radius: 14px; }
.rn-trust-card > span, .rn-quality-step > span, .rn-rejection > span { color: var(--rn-gold-dark); font-size: 12px; font-weight: 600; letter-spacing: .09em; }
.rn-trust-card h3 { margin: 7px 0 0; font: 700 18px/1.5 "Gowun Batang", serif; }
.rn-trust-card p { margin: 7px 0 0; color: var(--rn-text-2); font-size: 14px; line-height: 1.8; }
.rn-trust-section--hanji { margin-inline: -20px; padding: 34px 20px; background: var(--rn-hanji); border-block: 1px solid var(--rn-hanji-line); }
.rn-free-contract__note {
  margin: 14px 0 0;
  color: var(--rn-text-3);
  font-size: 13px;
  line-height: 1.7;
}
.rn-free-contract { margin-top: 18px; display: grid; grid-template-columns: 1fr; gap: 8px; }
.rn-free-contract a { min-height: 94px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; background: var(--rn-hanji-deep); border: 1px solid var(--rn-hanji-line); border-radius: 12px; }
.rn-free-contract b { font: 700 17px/1.5 "Gowun Batang", serif; }
.rn-free-contract span { color: var(--rn-text-2); font-size: 13px; line-height: 1.55; }
.rn-company-list { margin: 18px 0 0; display: grid; grid-template-columns: 108px 1fr; background: var(--rn-paper-card); border: 1px solid var(--rn-line); }
.rn-company-list dt, .rn-company-list dd { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--rn-line); }
.rn-company-list dt { color: var(--rn-text-3); background: var(--rn-paper-soft); font-size: 13px; font-weight: 600; }
.rn-company-list dd { color: var(--rn-text-2); font-size: 14px; overflow-wrap: anywhere; }
.rn-company-list dt:nth-last-of-type(1), .rn-company-list dd:nth-last-of-type(1) { border-bottom: 0; }

.rn-quality-step > ul { margin: 16px 0 0; padding: 0; display: grid; list-style: none; background: var(--rn-paper-card); border: 1px solid var(--rn-line); }
.rn-quality-step > ul li { padding: 12px 15px 12px 40px; position: relative; color: var(--rn-text-2); border-bottom: 1px solid var(--rn-line); }
.rn-quality-step > ul li:last-child { border-bottom: 0; }
.rn-quality-step > ul li::before { content: "✓"; position: absolute; left: 15px; color: var(--rn-green); font-weight: 700; }
.rn-quality-evidence { margin-top: 18px; padding: 17px; display: grid; gap: 4px; background: var(--rn-hanji); border-left: 3px solid var(--rn-gold-dark); }
.rn-quality-evidence span { color: var(--rn-text-2); font-size: 14px; }
.rn-quality-table { margin: 18px 0 0; display: grid; grid-template-columns: 88px 1fr; background: var(--rn-paper-card); border: 1px solid var(--rn-line); }
.rn-quality-table dt, .rn-quality-table dd { margin: 0; padding: 12px; border-bottom: 1px solid var(--rn-line); }
.rn-quality-table dt { background: var(--rn-paper-soft); font-weight: 700; }
.rn-quality-table dd { color: var(--rn-text-2); }
.rn-quality-table dt:last-of-type, .rn-quality-table dd:last-of-type { border-bottom: 0; }
.rn-rejection { margin-top: 18px; padding: 20px; background: var(--rn-paper-card); border: 1px solid var(--rn-line-strong); }
.rn-rejection blockquote { margin: 10px 0 0; font: 700 20px/1.7 "Gowun Batang", serif; }
.rn-rejection p { margin: 7px 0 0; color: var(--rn-text-2); font-size: 14px; line-height: 1.8; }
.rn-trust-notice { margin-top: 50px; padding: 18px; color: var(--rn-text-2); background: var(--rn-paper-card); border: 1px solid var(--rn-line); font-size: 13px; line-height: 1.8; }

/* Legal documents share the same 430px mobile shell even on a desktop viewport. */
/* ── 약관·방침 화면 ────────────────────────────────────────
   이 화면들의 뼈대(`.doc*`)가 `site.css` 에만 있었다. renovation 화면에서
   그 파일을 뺐더니 **글이 화면 왼쪽에 그대로 붙어** 버렸다. 폭을 잡아 주는
   규칙이 통째로 사라졌기 때문이다.
   되돌리는 대신 여기서 다시 쓴다 — 이 화면들은 430px 안에서 읽히는 글이라
   데스크톱을 전제한 옛 규칙보다 이쪽이 맞다. */
.rn-policy-doc {
  min-height: 0;
  padding: 0 20px 20px;
  color: var(--rn-text);
  background: #ffffff;
  font-family: "IBM Plex Sans KR", system-ui, -apple-system, sans-serif;
}
.rn-policy-doc .doc__main { width: 100%; padding: 34px 0 56px; }
.rn-policy-doc .doc__title {
  margin: 0 0 10px;
  color: var(--rn-text);
  font: 700 27px/1.32 "Gowun Batang", serif;
  letter-spacing: -.02em;
}
.rn-policy-doc .doc__meta {
  margin: 0 0 24px;
  color: var(--rn-text-3);
  font-size: 12.5px;
  line-height: 1.85;
}
.rn-policy-doc .doc__toc {
  position: static;
  float: none;
  width: auto;
  max-height: none;
  margin: 0 0 26px;
  padding: 13px 15px;
  overflow: visible;
  background: var(--rn-hanji-deep);
  border: 1px solid var(--rn-line);
  border-radius: 10px;
}
.rn-policy-doc .doc__toc summary {
  color: var(--rn-text);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.rn-policy-doc .doc__toc ol { margin: 11px 0 0; padding-left: 18px; }
.rn-policy-doc .doc__toc li { margin: 5px 0; font-size: 12.5px; line-height: 1.6; }
.rn-policy-doc .doc__toc a { text-decoration: none; }
.rn-policy-doc a:not(.btn, .brand) { color: var(--rn-accent-dark); }
.rn-policy-doc h2 {
  margin: 30px 0 0;
  font: 700 18px/1.5 "Gowun Batang", serif;
  scroll-margin-top: 18px;
}
.rn-policy-doc h3 { margin: 20px 0 0; font-size: 15px; font-weight: 700; }
.rn-policy-doc p, .rn-policy-doc li {
  color: var(--rn-text-2);
  font-size: 14px;
  line-height: 1.85;
  word-break: keep-all;
}
.rn-policy-doc p { margin: 10px 0 0; }
.rn-policy-doc ul, .rn-policy-doc ol { margin: 10px 0 0; padding-left: 19px; }
.rn-policy-doc li { margin: 5px 0; }
.rn-policy-doc h2, .rn-policy-doc h3, .rn-policy-doc b, .rn-policy-doc strong { color: var(--rn-text); }
/* 표는 제 상자 안에서만 옆으로 흐른다. 화면이 통째로 밀리면 글을 못 읽는다. */
.rn-policy-doc .doc__table-wrap {
  max-width: 100%;
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid var(--rn-line);
  border-radius: 10px;
}
.rn-policy-doc table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 13px;
}
.rn-policy-doc th, .rn-policy-doc td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rn-line);
  line-height: 1.7;
  word-break: keep-all;
}
.rn-policy-doc tbody tr:last-child th,
.rn-policy-doc tbody tr:last-child td { border-bottom: 0; }
.rn-policy-doc th { color: var(--rn-text); background: var(--rn-hanji-deep); font-weight: 700; }
/* 긴 토큰이 줄을 넘게 둔다. 안 그러면 화면이 통째로 밀린다. */
.rn-policy-doc code {
  padding: 1px 5px;
  background: var(--rn-hanji-deep);
  border-radius: 4px;
  font-size: .92em;
  overflow-wrap: anywhere;
}
.rn-policy-doc .doc__back {
  display: inline-block;
  margin-top: 30px;
  color: var(--rn-accent-dark);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--rn-accent);
  padding-bottom: 2px;
}

.rn-faq-tabs, .rn-review-toolbar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.rn-faq-tabs::-webkit-scrollbar, .rn-review-toolbar::-webkit-scrollbar { display: none; }
.rn-faq-tabs a, .rn-review-toolbar span { flex: 0 0 auto; min-height: 44px; padding: 9px 13px; display: inline-flex; align-items: center; color: var(--rn-text-2); background: var(--rn-paper-card); border: 1px solid var(--rn-line); border-radius: 10px; font-size: 14px; }
.rn-faq-tabs a:first-child, .rn-review-toolbar .is-active { color: var(--rn-pine); background: #edf5f2; border-color: var(--rn-pine); font-weight: 600; }
.rn-faq-group { padding-top: 58px; scroll-margin-top: 58px; }
.rn-faq-group details { margin-top: 9px; background: var(--rn-paper-card); border: 1px solid var(--rn-line); }
.rn-faq-group summary { min-height: 54px; padding: 14px 46px 14px 16px; position: relative; cursor: pointer; font-weight: 600; list-style: none; }
.rn-faq-group summary::-webkit-details-marker { display: none; }
.rn-faq-group summary::after { content: "+"; position: absolute; top: 13px; right: 17px; color: var(--rn-accent-dark); font-size: 22px; line-height: 1; }
.rn-faq-group details[open] summary::after { content: "−"; }
.rn-faq-group details p { margin: 0 16px 16px; padding: 13px 0 0 13px; color: var(--rn-text-2); border-top: 1px solid var(--rn-line); border-left: 2px solid var(--rn-line-strong); font-size: 14px; line-height: 1.85; }
.rn-faq-contact { margin-top: 56px; padding: 24px; text-align: center; background: var(--rn-paper-card); border: 1px solid var(--rn-line); }
.rn-faq-contact > b { font: 700 20px "Gowun Batang", serif; }
.rn-faq-contact p { margin: 7px 0 0; color: var(--rn-text-2); font-size: 14px; }
.rn-support-link { min-height: 48px; margin-top: 15px; padding: 11px 16px; display: flex; align-items: center; justify-content: center; color: rgba(0, 0, 0, .85) !important; background: #fee500; font-weight: 600; }
.rn-support-link--mail { color: #fff !important; background: var(--rn-ink); }
.rn-faq-contact small { margin-top: 8px; display: block; color: var(--rn-text-3); font-size: 12px; }
.rn-review-toolbar span { cursor: default; }
.rn-review-empty { margin-top: 28px; padding: 70px 28px; text-align: center; background: var(--rn-paper-card); border: 1px solid var(--rn-line); }
.rn-review-empty > span { color: var(--rn-gold-dark); font: 400 32px "Song Myung", serif; }
.rn-review-empty h2 { margin: 13px 0 0; font: 700 26px/1.5 "Gowun Batang", serif; }
.rn-review-empty p { max-width: 38em; margin: 12px auto 22px; color: var(--rn-text-2); line-height: 1.85; }

/* Forms and free results */
.rn-form-page { min-height: 100vh; color: var(--rn-text); background: #ffffff; }
.rn-me-form-page[hidden] { display: none !important; }
.rn-form-wrap { width: min(100%, 560px); margin: 0 auto; padding: 52px 22px 110px; }
.rn-form-wrap__back { color: var(--rn-text-2); font-size: 13px; }
.rn-form-wrap h1 { margin: 28px 0 0; font: 700 36px/1.3 "Gowun Batang", serif; }
.rn-form-wrap__lede { margin: 12px 0 0; color: var(--rn-text-2); }
.rn-form { margin-top: 32px; display: grid; gap: 22px; }
.rn-form__group { padding: 20px; background: #ffffff; border: 1px solid var(--rn-line); border-radius: 14px; }
.rn-form__title { margin: 0 0 15px; font: 700 18px "Gowun Batang", serif; }
.rn-form__notice { margin: 0; padding: 14px 16px; color: var(--rn-text-2); background: var(--rn-accent-wash); border: 1px solid #f0b8a6; border-left: 3px solid var(--rn-accent); border-radius: 0 10px 10px 0; font-size: 13px; line-height: 1.75; }
.rn-field { min-width: 0; display: grid; gap: 7px; }
.rn-field.is-muted { opacity: .42; }
.rn-field + .rn-field { margin-top: 14px; }
.rn-field label, .rn-field__label { color: var(--rn-text-2); font-size: 13px; }
.rn-field small, .rn-field-note { margin: 0; color: var(--rn-text-3); font-size: 12px; line-height: 1.65; }
.rn-input, .rn-select, .rn-textarea { width: 100%; min-height: 52px; padding: 11px 12px; color: var(--rn-text); background: var(--rn-paper-soft); border: 1px solid var(--rn-line-strong); border-radius: 12px; }
.rn-input:focus, .rn-select:focus, .rn-textarea:focus { background: #ffffff; border-color: var(--rn-pine-bright); outline: 2px solid rgba(47, 125, 108, .15); outline-offset: 0; }
.rn-textarea { min-height: 126px; resize: vertical; }
.rn-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rn-row--birth { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
.rn-check { display: flex; gap: 9px; align-items: flex-start; color: var(--rn-text-2); font-size: 13px; }
.rn-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--rn-accent); }
.rn-check[hidden], .rn-field-note[hidden] { display: none; }
.rn-check-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.rn-check--location { margin-top: 12px; }
.rn-form__group.is-location-unknown .rn-row--place { opacity: .42; }
.rn-form__group--pair .rn-legal-box { color: var(--rn-text-2); }
.rn-order-member-note { margin-top: 15px; padding: 13px 14px; color: var(--rn-text-2); background: #edf5f2; border-left: 3px solid var(--rn-pine); border-radius: 0 10px 10px 0; font-size: 12px; line-height: 1.7; }
.rn-order-member-note a { color: var(--rn-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.rn-order-member-note--demo { background: #fff4de; border-left-color: #b96b10; }
.rn-order-profile { padding: 18px 20px; background: var(--rn-paper-soft); border: 1px solid var(--rn-line); border-radius: 14px; }
.rn-demo-fixture { display: grid; gap: 8px; background: #fffaf0; border-color: #e7cfaa; }
.rn-demo-fixture p { margin: 0; color: var(--rn-text-3); font-size: 12px; line-height: 1.65; }
.rn-form[data-demo-sandbox="true"] [data-rn-birth-fields] :is(input,select):disabled { color: #5d5a54; opacity: 1; background: #f2f0eb; -webkit-text-fill-color: #5d5a54; }
.rn-order-profile--empty { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.rn-order-profile--empty div { display: grid; gap: 3px; }
.rn-order-profile--empty span { color: var(--rn-text-3); font-size: 12px; }
.rn-order-profile--empty b { color: var(--rn-text); font: 700 15px/1.5 "Gowun Batang",serif; }
.rn-order-profile--empty a { flex: 0 0 auto; color: var(--rn-accent-dark); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
/* 비회원 주문 화면의 로그인 한 줄. 막는 문이 아니라 옆문이라, 폼의 흐름을
   끊지 않게 낮고 조용히 둔다. */
/* 이 탭에 남은 사주를 계정에 저장할지 묻는 자리. 한 번만 묻고, 「안 할래요」를
   누르면 다시 안 뜬다. 재촉이 아니라 제안으로 읽혀야 한다. */
.rn-profile-offer {
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--rn-hanji-deep);
  border: 1px dashed var(--rn-line-strong);
  border-radius: 10px;
}
.rn-profile-offer[hidden] { display: none; }
/* 이름 칸이 늘 보이게 되면서 왼쪽 덩어리가 높아졌다. 좁은 폭에서 버튼이
   눌려 찌그러지지 않게 접히는 것을 허락하고, 접히면 버튼이 아랫줄을 쓴다. */
.rn-profile-offer { flex-wrap: wrap; }
.rn-profile-offer > div:first-child { flex: 1 1 230px; min-width: 0; }
.rn-profile-offer b { display: block; font-size: 13.5px; }
/* 설명 한 줄만 노린다. `.rn-profile-offer span` 으로 두었더니 이 안의 **모든**
   span 을 잡았다 — 성별 칸의 겉 span(0,1,1 이라 자기 규칙 0,1,0 을 이겨서
   flex 가 통째로 죽었다)과 「여성」·「남성」 글자(회색 12.5px 로 눌렸다)까지.
   그래서 안내 문장과 두 선택지가 한 줄에 뒤엉켜 아무 데서나 접혔다. */
.rn-profile-offer [data-rn-profile-offer-detail] {
  display: block;
  margin-top: 3px;
  color: var(--rn-text-3);
  font-size: 12.5px;
  line-height: 1.6;
}
.rn-profile-offer__actions { flex: 0 0 auto; display: flex; gap: 6px; }
.rn-profile-offer button, .rn-profile-offer a {
  min-height: 38px;
  padding: 8px 12px;
  color: var(--rn-accent-dark);
  background: var(--rn-paper);
  border: 1px solid var(--rn-line-strong);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.rn-profile-offer [data-rn-profile-offer-skip] { color: var(--rn-text-3); font-weight: 400; }
.rn-order-guest {
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--rn-hanji-deep);
  border-radius: 10px;
}
.rn-order-guest b { display: block; font-size: 13.5px; }
.rn-order-guest span { display: block; margin-top: 3px; color: var(--rn-text-3); font-size: 12.5px; line-height: 1.6; }
.rn-order-guest a {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 14px;
  display: grid;
  place-items: center;
  color: var(--rn-accent-dark);
  border: 1px solid var(--rn-line-strong);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.rn-order-session-profile { min-height: 82px; padding: 15px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; color: var(--rn-text); background: #edf5f2; border: 1px solid rgba(27, 86, 75, .35); border-radius: 14px; }
.rn-order-session-profile[hidden] { display: none; }
.rn-order-session-profile > div { min-width: 0; display: grid; gap: 3px; }
.rn-order-session-profile span, .rn-order-session-profile small { color: var(--rn-text-3); font-size: 12px; }
.rn-order-session-profile b { font: 700 15px/1.5 "Gowun Batang",serif; }
.rn-order-session-profile button { min-height: 44px; padding: 8px 11px; color: var(--rn-pine); background: #ffffff; border: 1px solid var(--rn-pine); border-radius: 12px; cursor: pointer; }
.rn-form input[readonly] { color: var(--rn-text-3); background: var(--rn-hanji-deep); border-color: var(--rn-line); cursor: not-allowed; }
.rn-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rn-choice { position: relative; min-width: 0; cursor: pointer; }
.rn-choice input { position: absolute; opacity: 0; pointer-events: none; }
.rn-choice span { min-height: 44px; padding: 8px 5px; display: grid; place-items: center; color: var(--rn-text-2); background: #ffffff; border: 1px solid var(--rn-line-strong); border-radius: 12px; font-size: 12px; text-align: center; }
.rn-choice input:checked + span { color: #ffffff; background: var(--rn-pine); border-color: var(--rn-pine); box-shadow: none; }
.rn-choice input:focus-visible + span { outline: 2px solid var(--rn-info); outline-offset: 2px; }
.rn-form__alternative { margin: 14px 0 0; color: var(--rn-text-3); font-size: 12px; }
.rn-form__alternative a { color: var(--rn-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.rn-form__fine { margin: 0; color: var(--rn-text-3); font-size: 12px; line-height: 1.75; }

/* 유료 상품 주문 — 04 구매·결제 정본의 430px 입력 흐름. */
.rn-order-wrap { width: 100%; padding: 24px 22px 88px; }
.rn-order-wrap .rn-form-wrap__back { min-height: 32px; display: inline-flex; align-items: center; }
.rn-order-heading { margin-top: 18px; }
.rn-order-heading > span { color: var(--rn-accent-dark); font-size: 12px; font-weight: 700; }
.rn-order-heading h1 { margin: 4px 0 0; font-size: 29px; line-height: 1.32; }
.rn-order-heading .rn-form-wrap__lede { margin-top: 7px; font-size: 14px; line-height: 1.65; }
.rn-mini-order-page .rn-form { margin-top: 24px; gap: 16px; }
.rn-mini-order-page .rn-form__group {
  min-width: 0;
  margin: 0;
  padding: 0 0 22px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rn-line);
  border-radius: 0;
}
.rn-mini-order-page .rn-form__title { margin: 0 0 13px; font-size: 20px; line-height: 1.45; }
.rn-mini-order-page .rn-input,
.rn-mini-order-page .rn-select { min-width: 0; min-height: 50px; padding: 9px 11px; background: var(--rn-paper-soft); border-color: var(--rn-line); border-radius: 10px; font-size: 14px; }
.rn-mini-order-page .rn-input:focus,
.rn-mini-order-page .rn-select:focus { background: #ffffff; }
.rn-order-birth { display: grid; gap: 11px; }
.rn-order-birth .rn-form__title { margin-bottom: 2px; }
.rn-order-birth .rn-field + .rn-field,
.rn-order-birth .rn-field + .rn-birth-primary,
.rn-order-birth .rn-birth-primary + .rn-field { margin-top: 0; }
.rn-birth-primary { min-width: 0; display: grid; grid-template-columns: 82px 72px minmax(0, 1fr); gap: 7px; }
.rn-birth-primary .rn-field { min-width: 0; }
.rn-birth-primary .rn-input,
.rn-birth-primary .rn-select { width: 100%; padding-inline: 8px; }
.rn-birth-date .rn-input { font-size: 13px; }
.rn-birth-time .rn-field__label--split,
.rn-birth-place .rn-field__label--split { min-height: 24px; }
.rn-birth-time .rn-input { width: 100%; }
.rn-birth-lunar { margin-top: -3px; font-size: 12px; }
.rn-birth-place .rn-row--place { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.rn-birth-place small { line-height: 1.55; }
.rn-mini-order-page .rn-time-unknown { min-height: 28px; gap: 6px; font-size: 12px; font-weight: 650; }
.rn-mini-order-page .rn-time-unknown input { width: 18px; height: 18px; flex: 0 0 18px; }
.rn-mini-order-page .rn-form__notice { margin: 0; padding: 11px 13px; background: var(--rn-paper-soft); border: 1px solid var(--rn-line); border-left: 3px solid var(--rn-pine); border-radius: 0 8px 8px 0; line-height: 1.65; }
.rn-mini-order-page .rn-order-profile,
.rn-mini-order-page .rn-order-session-profile { padding: 14px 15px; background: #ffffff; border-color: var(--rn-line); border-radius: 10px; }
.rn-mini-order-page .rn-order-profile .rn-select { background: var(--rn-paper-soft); }
.rn-mini-order-page .rn-order-session-profile { min-height: 72px; }
.rn-mini-order-page .rn-order-session-profile button { min-height: 40px; border-radius: 8px; }
.rn-order-recipient .rn-field + .rn-field { margin-top: 11px; }
.rn-mini-order-page .rn-order-member-note { margin-top: 11px; padding: 11px 12px; border-radius: 0 8px 8px 0; }
.rn-mini-order-page .rn-form__group--pair .rn-choice span { border-radius: 9px; font-size: 13px; }
.rn-mini-order-page .rn-form__group--pair .rn-legal-box { padding: 12px 13px; border-radius: 8px; }
.rn-order-consents { padding: 15px; display: grid; gap: 13px; background: var(--rn-paper-soft); border: 1px solid var(--rn-line); }
.rn-order-consents .rn-check { line-height: 1.6; }
.rn-order-wrap .rn-error:empty { min-height: 0; }
.rn-order-wrap .rn-form > .rn-btn { min-height: 56px; border-radius: 12px; font-size: 16px; }
.rn-order-wrap > .rn-form__fine { margin-top: 12px; text-align: center; }

.rn-form-wrap--free { width: min(100%, 500px); padding: 26px 18px 64px; }
.rn-form-wrap--free h1 { margin-top: 5px; font-size: 30px; line-height: 1.32; }
.rn-form-wrap--free .rn-form-wrap__lede { margin-top: 6px; font-size: 14px; line-height: 1.65; }
.rn-form-wrap--free .rn-form { margin-top: 18px; gap: 14px; }
.rn-form-wrap--free .rn-form__group { padding: 14px; }
.rn-form-wrap--free .rn-form__title { margin-bottom: 10px; font-size: 17px; }
.rn-form-wrap--free .rn-form__notice { padding: 10px 12px; font-size: 12px; line-height: 1.65; }
.rn-form-wrap--free .rn-field { gap: 5px; }
.rn-form-wrap--free .rn-field + .rn-field { margin-top: 10px; }
.rn-form-wrap--free .rn-input, .rn-form-wrap--free .rn-select { min-height: 48px; padding: 9px 11px; }
.rn-form-wrap--free .rn-form__fine { line-height: 1.65; }
.rn-form__group--free { display: grid; gap: 12px; }
.rn-form__group--free .rn-field + .rn-field { margin-top: 0; }
.rn-form__group--free > .rn-check { margin-top: 0; }
[data-rn-profile-fields] { display: grid; gap: 12px; }
[data-rn-profile-fields][hidden] { display: none; }
.rn-profile-reuse { min-height: 78px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; background: #edf5f2; border: 1px solid rgba(27, 86, 75, .35); border-radius: 14px; }
.rn-profile-reuse[hidden] { display: none; }
.rn-profile-reuse > div { min-width: 0; display: grid; gap: 3px; }
.rn-profile-reuse span { color: var(--rn-text-3); font-size: 12px; }
.rn-profile-reuse b { color: var(--rn-text); font: 700 16px/1.45 "Gowun Batang", serif; }
.rn-profile-reuse small { color: var(--rn-text-3); font-size: 12px; line-height: 1.5; }
.rn-profile-reuse button { min-width: 60px; min-height: 44px; padding: 8px 10px; color: var(--rn-pine); background: #ffffff; border: 1px solid var(--rn-pine); border-radius: 12px; font-size: 13px; cursor: pointer; }
.rn-free-mode { padding-block: 12px; }
.rn-free-mode .rn-form__title { margin-bottom: 8px; }
.rn-free-mode .rn-choice span { min-height: 44px; font-size: 14px; }
.rn-free-time-panel { padding-top: 12px; display: grid; grid-template-columns: minmax(112px, .72fr) minmax(0, 1.28fr); gap: 8px; border-top: 1px solid var(--rn-line); scroll-margin-top: 72px; }
.rn-free-time-panel .rn-field + .rn-field { margin-top: 0; }
.rn-field__label--split { width: 100%; min-width: 0; min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rn-field--time .rn-input { min-width: 0; }
.rn-time-unknown { display: inline-flex; align-items: center; gap: 4px; color: var(--rn-pine) !important; cursor: pointer; white-space: nowrap; }
.rn-time-unknown input { width: 16px; height: 16px; margin: 0; accent-color: var(--rn-gold); }
.rn-free-time-help { grid-column: 1 / -1; color: var(--rn-text-3); font-size: 12px; line-height: 1.55; }
.rn-form-wrap--free .rn-form > .rn-check { line-height: 1.55; }
.rn-form-wrap--free .rn-form > .rn-btn { min-height: 52px; }

.rn-days-form-page { min-height: 100vh; background: #ffffff; }
.rn-days-form-page .rn-form-wrap { padding-bottom: 84px; }
.rn-days-picker,
.rn-days-context { min-width: 0; margin: 0; padding: 0; border: 0; }
.rn-days-picker > legend,
.rn-days-context > legend { margin-bottom: 12px; color: var(--rn-text); font: 700 20px/1.45 "Gowun Batang",serif; }
.rn-days-question-grid { display: grid; gap: 10px; }
.rn-days-question { position: relative; display: block; cursor: pointer; }
.rn-days-question > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rn-days-question > span { min-height: 82px; padding: 17px 18px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; background: #ffffff; border: 1px solid var(--rn-hanji-line); border-left: 4px solid #cfc7c3; border-radius: 3px; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.rn-days-question > span::after { content: "›"; grid-column: 2; grid-row: 1 / span 2; color: var(--rn-pine); font-size: 22px; }
.rn-days-question b { color: var(--rn-text); font: 700 18px/1.48 "Gowun Batang",serif; letter-spacing: -.02em; }
.rn-days-question small { color: var(--rn-text-3); font-size: 12px; }
.rn-days-question > input:checked + span { background: #edf5f2; border-color: var(--rn-pine); border-left-color: var(--rn-pine); transform: translateX(2px); }
.rn-days-question > input:focus-visible + span { outline: 3px solid rgba(47,125,108,.28); outline-offset: 2px; }
.rn-days-context { padding: 16px; background: var(--rn-hanji-deep); border: 1px solid var(--rn-hanji-line); }
.rn-days-context[hidden],
[data-rn-days-details][hidden] { display: none; }
.rn-days-context > legend { margin: 0 0 10px; font-size: 17px; }
.rn-days-context-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.rn-days-context-grid .rn-choice span { min-height: 46px; padding-inline: 8px; font-size: 13px; }
.rn-days-form-page [data-rn-days-details] { display: grid; gap: 14px; }
.rn-days-form-page [data-rn-days-details][hidden] { display: none; }
.rn-days-form-page .rn-free-time-panel { padding: 12px; }
.rn-days-form-page .rn-free-time-help { line-height: 1.55; }
.rn-form .rn-check a { color: var(--rn-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.rn-error { min-height: 1.5em; margin: 0; color: var(--rn-danger); font-size: 13px; }
.rn-form-error { min-height: 1.5em; margin: 0; color: var(--rn-danger); font-size: 13px; }
.rn-form-status { min-height: 1.5em; margin: 0; color: var(--rn-success); font-size: 13px; }

/* 무료 입력은 홈과 결과의 흰 바탕을 그대로 이어갑니다. */
.rn-form-page--light { color: var(--rn-text); background: #fff; }
.rn-form-page--light .rn-form-wrap__back,
.rn-form-page--light .rn-form-wrap__lede,
.rn-form-page--light .rn-check { color: var(--rn-text-2); }
.rn-form-page--light .rn-form__group { background: #fff; border-color: var(--rn-line); }
.rn-form-page--light .rn-form__notice { color: var(--rn-text-2); background: var(--rn-paper-soft); }
.rn-form-page--light .rn-field label,
.rn-form-page--light .rn-field__label { color: var(--rn-text-2); }
.rn-form-page--light .rn-field small,
.rn-form-page--light .rn-field-note,
.rn-form-page--light .rn-free-time-help,
.rn-form-page--light .rn-form__fine { color: var(--rn-text-3); }
.rn-form-page--light .rn-input,
.rn-form-page--light .rn-select,
.rn-form-page--light .rn-textarea { background: var(--rn-paper-soft); border-color: var(--rn-line-strong); }
.rn-form-page--light .rn-free-time-panel { border-top-color: var(--rn-line); }
.rn-form-page--light .rn-time-unknown { color: var(--rn-gold-dark) !important; }
.rn-form-page--light .rn-choice span { color: var(--rn-text-2); background: #fff; border-color: var(--rn-line-strong); }
.rn-form-page--light .rn-choice input:checked + span { color: var(--rn-text); background: rgba(27,86,75,.11); border-color: var(--rn-pine); box-shadow: none; }
.rn-form-page--light .rn-choice input:focus-visible + span { outline-color: var(--rn-info); }
.rn-form-page--light .rn-form .rn-check a { color: var(--rn-accent-dark); }
/* 밝은 폼 화면이라고 제출 버튼까지 옅게 두지 않는다. 여기서 눌러야 할 것이
   그것 하나인데, 옅은 한지색에 회색 테두리라 꺼져 있는 단추처럼 보였다.
   상품 화면의 「2,900원으로 바로 보기」와 같은 빨강을 쓴다. */
.rn-form-page--light .rn-error,
.rn-form-page--light .rn-form-error { color: var(--rn-accent-dark); }
.rn-form-page--light .rn-form-status { color: var(--rn-green); }

/* ``나 어떤 사람이야`` 입력은 02 무료존 정본의 한 화면 현관을 그대로 씁니다. */
.rn-me-form-page { background: #ffffff; }
/* 폭과 테두리는 껍데기(`.rn-mobile`)가 만든다.
   여기서 또 430px 와 세로선을 그리면 테두리가 두 겹이 된다. 예전에 무료 폼만
   `.rn-mobile` 이 빠져 있어서 이 안쪽이 대신 폰 모양을 흉내 냈고, 그 바람에
   **네비바만 화면 끝까지 늘어났다** — 나머지 화면은 전부 껍데기가 잡아 준다. */
.rn-me-form {
  width: 100%;
  /* 버튼이 화면 바닥에 딱 붙어 있었다. 눌러야 할 것 아래에 숨 쉴 자리를 둔다. */
  padding: 30px 26px 44px;
  background: #ffffff;
}
/* 무료 세 화면이 같은 폭·같은 틀을 쓴다. 예전엔 「나 어떤 사람이야」만
   폰 모양 카드였고 나머지 둘은 560px 로 퍼져서, 데스크톱에서 그 둘만
   PC 사이트처럼 보였다. */
.rn-form-wrap--free.rn-me-form { padding-top: 26px; }
.rn-me-form h1 { margin: 0; font-size: 28px; line-height: 1.32; }
.rn-me-form .rn-form-wrap__lede { margin-top: 10px; font-size: 15px; line-height: 1.75; }
.rn-me-form__form { margin-top: 24px !important; gap: 14px !important; }
.rn-me-form__form [data-rn-profile-fields] { gap: 0; }
.rn-me-form__form > .rn-check { font-size: 12px; line-height: 1.55; }
/* 제출 버튼은 사이트의 다른 버튼과 같다. 여기만 각지고 크게 두면 같은
   서비스의 다른 화면처럼 읽힌다. */
/* 오류·안내 문구 자리는 할 말이 있을 때만 차지한다.

   비어 있어도 한 줄(`min-height: 1.5em`)을 먹는데, 계정 폼에는 오류와 상태
   둘이 나란히 있고 폼 간격이 16px 라서 저장 버튼 위가 90px 가까이 벌어져
   있었다. 채운 것도 없는 자리가 폼에서 제일 넓었다.

   글자가 들어오면 그때 한 줄이 생기며 버튼이 밀린다. 그 움직임은 사람이
   저장을 누른 **직후**에만 일어나고, 그때는 그 문구를 보러 눈이 이미 그
   자리에 있다. */
.rn-form [data-error]:empty,
.rn-form-error:empty,
.rn-form-status:empty { display: none; }
.rn-me-form__retention { margin: -2px 0 0; color: var(--rn-text-2); font-size: 13px; line-height: 1.7; text-align: center; }



/* Member account */
.rn-auth-providers { margin-top: 30px; display: grid; gap: 12px; }
.rn-auth-provider { height: 56px; padding: 0 18px; display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; color: var(--rn-text) !important; background: #ffffff; border: 1px solid var(--rn-line); border-radius: 14px; font-weight: 650; text-align: center; }
.rn-auth-provider__icon { width: 24px; height: 24px; display: grid; place-items: center; }
.rn-auth-provider__icon svg { width: 24px; height: 24px; display: block; }
.rn-auth-provider__label { min-width: 0; }
.rn-auth-provider.is-soon { opacity: .55; }
.rn-auth-provider__soon { margin-left: auto; padding-right: 4px; color: var(--rn-text-3); font-size: 12px; }
.rn-auth-provider__spacer { width: 24px; height: 24px; }
.rn-auth-provider--kakao { background: #fee500; border-color: #fee500; }
.rn-auth-provider--naver { color: #fff !important; background: #03c75a; border-color: #03c75a; }
.rn-auth-provider--google { background: #fff; }
.rn-auth-provider--email { color: var(--rn-text) !important; background: var(--rn-paper-soft); }
.rn-auth-provider--email .rn-auth-provider__icon svg { fill: none; stroke: var(--rn-text-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rn-email-login { min-width: 0; }
.rn-email-login summary { list-style: none; cursor: pointer; }
.rn-email-login summary::-webkit-details-marker { display: none; }
.rn-email-login[open] { padding-bottom: 20px; background: var(--rn-paper-soft); border: 1px solid var(--rn-line); border-radius: 14px; }
.rn-email-login[open] summary { margin: -1px; border-color: var(--rn-line); }
.rn-email-login .rn-account-form { margin: 20px 18px 0; }
.rn-auth-divider { position: relative; margin: 28px 0 0; color: var(--rn-text-3); font-size: 12px; text-align: center; }
.rn-auth-divider::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: var(--rn-line); }
.rn-auth-divider span { position: relative; padding: 0 12px; background: #ffffff; }
.rn-account-form { margin-top: 22px; }
.rn-account-form .rn-form__group { padding: 0; background: transparent; border: 0; }
.rn-account-links { display: flex; justify-content: space-between; gap: 18px; color: var(--rn-text-2); font-size: 13px; }
.rn-account-links a { text-decoration: underline; text-underline-offset: 3px; }
/* 로그인↔가입을 잇는 한 줄. 두 화면이 같은 자리에 같은 모양으로 둔다. */
.rn-account-nonmember { margin-top: 18px; text-align: center; }
.rn-account-nonmember a { color: var(--rn-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.rn-account-guest { margin-top: 28px; padding-top: 22px; display: grid; gap: 8px; border-top: 1px solid var(--rn-line); color: var(--rn-text-3); font-size: 13px; text-align: center; }
.rn-account-guest p { margin: 0 0 2px; }
.rn-account-guest a { min-height: 32px; display: grid; place-items: center; color: var(--rn-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.rn-login-return { margin: 22px 0 0; padding: 10px 12px; color: var(--rn-pine); background: #edf5f2; border-radius: 10px; font-size: 12px; text-align: center; }
.rn-demo-login { margin-top: 26px; padding: 18px; background: #ffffff; border: 1px solid rgba(27,86,75,.35); border-left: 4px solid var(--rn-pine); border-radius: 14px; }
.rn-demo-login__head { display: grid; gap: 3px; }
.rn-demo-login__head span { color: var(--rn-green); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.rn-demo-login__head b { font: 700 19px/1.45 "Gowun Batang",serif; }
.rn-demo-login > p { margin: 7px 0 14px; color: var(--rn-text-2); font-size: 12px; line-height: 1.65; }
.rn-demo-login dl { margin: 0 0 14px; padding: 5px 12px; background: var(--rn-paper-soft); border-radius: 10px; }
.rn-demo-login dl > div { min-height: 38px; display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; border-top: 1px solid var(--rn-line); }
.rn-demo-login dl > div:first-child { border-top: 0; }
.rn-demo-login dt { color: var(--rn-text-3); font-size: 12px; }
.rn-demo-login dd { margin: 0; min-width: 0; }
.rn-demo-login code { color: var(--rn-text); font-size: 12px; overflow-wrap: anywhere; }
.rn-account-notice { margin-top: 28px; padding: 18px; color: var(--rn-text); background: var(--rn-paper-soft); border: 1px solid var(--rn-line); border-radius: 14px; }
.rn-account-notice b { font: 700 18px/1.5 "Gowun Batang",serif; }
.rn-account-notice p { margin: 7px 0 0; color: var(--rn-text-2); font-size: 13px; }
.rn-account-notice.is-success { border-color: var(--rn-success); }
.rn-account-notice.is-warning { border-color: var(--rn-pine); }
.rn-dev-auth-link { min-height: 46px; margin-top: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; color: #ffffff !important; background: var(--rn-pine-bright); border-radius: 14px; font-weight: 700; }

.rn-account-page { min-height: 100vh; background: #ffffff; }
.rn-lookup-page.site.pay { color: var(--rn-text); background: #ffffff; }
.rn-lookup-page .pay__main { padding: 32px 0 72px; }
.rn-lookup-page .pay__wrap { width: calc(100% - 28px); }
.rn-lookup-page .pay__head { margin-bottom: 26px; }
.rn-lookup-page .pay__head h1 { font-size: 30px; }
.rn-lookup-page.site .rn-brand,
.rn-lookup-page.site .rn-footer a { color: inherit; }
.rn-account-wrap { width: 100%; min-height: 70vh; margin: 0 auto; padding: 18px 14px 84px; }
.rn-account-tabs { margin-inline: -14px; padding-inline: 8px; display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--rn-line-strong); scrollbar-width: none; }
.rn-account-tabs a { display: inline-flex; align-items: center; gap: 4px; min-width: max-content; padding: 11px 10px 10px; color: var(--rn-text-3); font-size: 14px; }
.rn-account-tabs__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--rn-accent-wash); color: var(--rn-accent-dark); font-size: 12px; line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; }
.rn-account-tabs a.is-active { color: var(--rn-text); border-bottom: 3px solid var(--rn-accent); font-weight: 700; }
.rn-account-head { padding: 36px 2px 22px; }
.rn-account-head .rn-kicker { color: var(--rn-accent); }
.rn-account-head h1 { margin: 8px 0 0; font: 700 32px/1.3 "Gowun Batang",serif; }
.rn-account-head p { margin: 9px 0 0; color: var(--rn-text-3); }
.rn-demo-account-notice { margin-bottom: 16px; padding: 16px 18px; display: flex; align-items: flex-start; gap: 14px; color: var(--rn-text); background: #edf5f2; border: 1px solid rgba(27,86,75,.3); border-radius: 14px; }
.rn-demo-account-notice > span { min-width: max-content; padding: 4px 7px; color: #ffffff; background: var(--rn-pine); border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.rn-demo-account-notice b { font: 700 17px/1.45 "Gowun Batang",serif; }
.rn-demo-account-notice p { margin: 3px 0 0; color: var(--rn-text-2); font-size: 12px; line-height: 1.65; }
.rn-demo-readonly p { color: var(--rn-text-2); font-size: 13px; line-height: 1.75; }
.rn-demo-readonly .rn-btn { width: fit-content; margin-top: 14px; }
.rn-account-greeting { margin-bottom: 16px; padding: 24px; color: var(--rn-text); background: #ffffff; border: 1px solid var(--rn-line); border-left: 4px solid var(--rn-pine); border-radius: 14px; }
.rn-account-greeting p { margin: 0; font: 700 22px/1.55 "Gowun Batang",serif; }
.rn-account-greeting span { display: block; margin-top: 7px; color: var(--rn-text-3); font-size: 13px; }
.rn-account-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.rn-account-panel { margin-bottom: 16px; padding: 19px; background: var(--rn-paper-card); border: 1px solid var(--rn-line); border-radius: 14px; }
.rn-account-panel h2 { margin: 0 0 18px; font: 700 22px/1.45 "Gowun Batang",serif; }
.rn-account-panel__head { margin-bottom: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rn-account-panel__head h2 { margin: 0; }
.rn-account-panel__head a, .rn-account-panel__head span { color: var(--rn-accent-dark); font-size: 13px; font-weight: 650; }
.rn-account-empty { padding: 30px 16px; color: var(--rn-text-2); background: var(--rn-paper-soft); border: 1px dashed var(--rn-line-strong); text-align: center; }
.rn-account-empty--compact { padding: 22px 14px; }
.rn-account-empty b { color: var(--rn-text); font: 700 17px/1.55 "Gowun Batang",serif; }
.rn-account-empty p { margin: 7px auto 12px; max-width: 38em; font-size: 13px; }
.rn-account-empty a { color: var(--rn-accent-dark); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* 쿠폰함 — 가진 쿠폰과 남은 기간.
   왼쪽에 깎이는 값, 오른쪽에 번호와 기간. 값이 먼저 보여야 「무엇을 가졌나」가
   한눈에 끝난다. 다 쓴 것과 지난 것은 흐리게 남긴다 — 지워 버리면 「분명히
   받았는데」가 되고, 그건 받은 적 없는 것보다 나쁘다. */
.rn-coupon-group { margin-top: 22px; padding: 18px 14px 14px; background: #fffaf4; border: 1px solid #e5d9cc; border-radius: 18px; }
.rn-coupon-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rn-coupon-group__head h2 { margin: 0; font: 700 16px/1.5 "Gowun Batang",serif; color: var(--rn-text); }
.rn-coupon-group__head span { font-size: 12.5px; color: var(--rn-accent-dark); font-weight: 650; font-variant-numeric: tabular-nums; }
.rn-coupon-group__how { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--rn-text-2); }
.rn-coupon-group__how b { color: var(--rn-text); }
.rn-coupon-group__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 16px; padding: 12px 16px; border-radius: 9px; background: var(--rn-ink); color: #fffaf4 !important; font-size: 13px; font-weight: 600; }
.rn-coupon-group__cta span { color: #f9bc94; font-size: 18px; }
.rn-coupon-group__cta:hover { background: var(--rn-accent-dark); }
.rn-coupon-group--spent { background: transparent; border-color: var(--rn-line); }

.rn-coupon {
  --coupon-color: #b43c21;
  --coupon-line: #ead6cc;
  padding: 8px 13px 6px;
  margin-bottom: 9px;
  background: #fffdfb;
  border: 1px solid var(--coupon-line);
  border-left: 3px solid var(--coupon-color);
  border-radius: 4px 12px 12px 4px;
}
.rn-coupon--percent { --coupon-color: #1b6653; --coupon-line: #c9ded5; background: #f3faf6; }
.rn-coupon__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.rn-coupon__tag { font-size: 12px; color: var(--coupon-color); font-weight: 600; }
.rn-coupon__amount { margin: 4px 0 0; font: 700 24px/1.2 "IBM Plex Sans KR",sans-serif; color: var(--rn-ink); letter-spacing: -.7px; }
.rn-coupon__body { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px; min-width: 0; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--coupon-line); }
.rn-coupon__body span { font-size: 12px; color: var(--rn-text-3); }
.rn-coupon__body b { font-size: 12px; letter-spacing: .04em; color: var(--rn-text-2); font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rn-coupon__memo { display: block; font-size: 12px; line-height: 1.35; color: var(--rn-text-3); overflow-wrap: anywhere; }
.rn-coupon__until { padding: 2px 6px; border-radius: 5px; background: #f4f0eb; font-size: 12px; line-height: 1.2; color: var(--rn-text-2); }
.rn-coupon--percent .rn-coupon__until:not(.is-soon) { background: #e3f0e9; color: var(--coupon-color); }
.rn-coupon__until.is-soon { background: var(--rn-accent-wash); color: var(--rn-accent-dark); font-weight: 650; }
.rn-coupon.is-spent { --coupon-color: var(--rn-text-3); --coupon-line: var(--rn-line); background: var(--rn-paper-soft); border-color: var(--rn-line); }
.rn-coupon.is-spent .rn-coupon__until { background: #f0edeb; color: var(--rn-text-3); }
.rn-coupon.is-spent .rn-coupon__amount,
.rn-coupon.is-spent .rn-coupon__body b { color: var(--rn-text-2); }

/* 결제하다 만 주문이 있다는 한 줄. 목록에 섞지 않고 아래에 따로 세운다 —
   산 것과 사다 만 것은 다른 것이라 같은 줄에 놓으면 둘 다 흐려진다. */
.rn-library-unpaid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--rn-paper-soft);
  border: 1px dashed var(--rn-line-strong);
  text-decoration: none;
}
.rn-library-unpaid b { grid-column: 1; font-size: 14px; color: var(--rn-text); }
.rn-library-unpaid span { grid-column: 1; font-size: 12.5px; color: var(--rn-text-2); }
.rn-library-unpaid i {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-style: normal;
  font-size: 19px;
  color: var(--rn-text-3);
}
.rn-library-unpaid:hover { border-color: var(--rn-accent-dark); }

/* 결제하다 만 주문을 지우는 버튼. 되돌릴 수 없으므로 옆의 「결제 계속하기」
   보다 조용하게 두되 숨기지는 않는다 — 지울 길이 없으면 영수증에 영영 쌓인다. */
.rn-account-order__drop {
  margin-top: 4px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--rn-text-3);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rn-account-order__drop:hover { color: var(--rn-accent-dark); }
.rn-account-order__drop:disabled { opacity: .5; cursor: not-allowed; }

.rn-account-actions { margin-top: 0; }
.rn-account-actions > div { display: grid; grid-template-columns: 1fr; gap: 8px; }
.rn-account-actions a { min-height: 58px; padding: 12px; display: grid; place-items: center; background: var(--rn-hanji); border: 1px solid var(--rn-hanji-line); font: 700 15px/1.45 "Gowun Batang",serif; text-align: center; }
/* 구매 한 장. 풀이함 카드와 같은 상자다 — 두 화면이 같은 것을 목록으로
   보여주는데 하나는 상자, 하나는 구분선이면 다른 화면처럼 읽힌다. */
.rn-account-order { margin-top: 11px; padding: 15px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; background: #ffffff; border: 1px solid var(--rn-line); border-radius: 13px; }
.rn-account-order span { color: var(--rn-text-3); font-size: 12px; }
.rn-account-order h3 { margin: 3px 0 0; font: 700 17px/1.5 "Gowun Batang",serif; }
.rn-account-order p { margin: 2px 0 0; color: var(--rn-text-2); font-size: 13px; }
.rn-account-order__money { margin: 9px 0 0; display: grid; gap: 3px; }
.rn-account-order__money > div { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 8px; align-items: baseline; }
.rn-account-order__money dt { color: var(--rn-text-3); font-size: 12px; }
.rn-account-order__money dd { margin: 0; color: var(--rn-text-1); font-size: 13px; font-weight: 650; }
.rn-account-order > div:last-child { min-width: 82px; display: grid; justify-items: end; gap: 7px; }
.rn-account-order b { color: var(--rn-green); font-size: 12px; }
.rn-account-order a { color: var(--rn-accent-dark); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
/* 풀이함 — 구매 내역과 다른 화면이다. 여기서는 카드 자체가 문이라서,
   무엇을·누구 걸로·언제까지 읽는지를 한 장에 담고 누르면 바로 열린다. */
.rn-account-order__ask { margin: 3px 0 0 !important; color: var(--rn-text-3) !important; font-size: 12.5px !important; word-break: keep-all; }
/* 무료 두 종은 결과를 회원만 본다. 문패에 미리 붙여 둔다 — 눌러서 다 채운
   다음에 알게 되면 속은 기분이 든다. */
.rn-badge--member { margin-left: 5px; color: var(--rn-text-2); background: var(--rn-hanji-deep); }
.rn-free-gate-note { margin: 0 0 4px; padding: 12px 14px; color: var(--rn-text-2); background: var(--rn-hanji-deep); border-radius: 9px; font-size: 13px; line-height: 1.7; }
.rn-free-gate-note b { color: var(--rn-text); }

/* 계산은 끝났고 보려면 로그인해야 하는 자리. 잃은 것이 없다는 말을 가장 크게. */
.rn-free-gate__main { padding: 30px 20px 44px; }
.rn-free-gate__card { padding: 26px 22px 24px; background: var(--rn-paper-card); border: 1px solid var(--rn-line); border-radius: 16px; }
.rn-free-gate__eyebrow { display: inline-block; padding: 3px 10px; color: var(--rn-pine); background: var(--rn-hanji-deep); border-radius: 999px; font-size: 12px; font-weight: 700; }
.rn-free-gate__card h1 { margin: 13px 0 0; font: 700 24px/1.4 "Gowun Batang",serif; text-wrap: balance; }
.rn-free-gate__lede { margin: 11px 0 0; color: var(--rn-text-2); font-size: 14px; line-height: 1.75; }
.rn-free-gate__actions { margin-top: 22px; display: grid; gap: 9px; }
.rn-free-gate__why { margin: 22px 0 0; padding: 17px 0 0; display: grid; gap: 9px; list-style: none; border-top: 1px solid var(--rn-line); color: var(--rn-text-2); font-size: 13px; line-height: 1.65; }
.rn-free-gate__why li { padding-left: 15px; position: relative; }
.rn-free-gate__why li::before { content: "·"; position: absolute; left: 4px; color: var(--rn-text-3); }
.rn-free-gate__why b { color: var(--rn-text); }
.rn-free-gate__free { margin: 16px 0 0; color: var(--rn-text-3); font-size: 13px; line-height: 1.65; }
.rn-free-gate__free a { color: var(--rn-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.rn-account-more { min-height: 48px; margin-top: 14px; display: grid; place-items: center; color: var(--rn-accent-dark); border: 1px solid var(--rn-line-strong); border-radius: 12px; font-size: 14px; font-weight: 700; }
.rn-order-claim summary { min-height: 44px; display: flex; align-items: center; color: var(--rn-accent-dark); font-weight: 700; cursor: pointer; }
.rn-order-claim[open] summary { margin-bottom: 12px; }
/* 읽을 것과 누를 것을 위아래로 나눈다. 나란히 두면 버튼이 셋 되는 순간
   왼쪽 글이 이상하게 접힌다. */
.rn-profile-card { padding: 16px 0; display: grid; gap: 12px; border-top: 1px solid var(--rn-line); }
.rn-profile-card:first-child { border-top: 0; }
.rn-profile-card span { color: var(--rn-text-3); font-size: 12px; }
.rn-profile-card h3 { margin: 2px 0; font: 700 18px "Gowun Batang",serif; }
.rn-profile-card p { margin: 0; color: var(--rn-text-3); font-size: 12px; }
.rn-profile-card[data-primary="true"] span { color: var(--rn-accent-dark); font-weight: 700; }
.rn-profile-card[data-primary="true"] { position: relative; }
.rn-profile-card[data-primary="true"]::before {
  content: "";
  position: absolute;
  left: -13px; top: 15px; bottom: 15px;
  width: 2px;
  background: var(--rn-accent-dark);
  border-radius: 2px;
}
.rn-profile-card__info { min-width: 0; }
.rn-profile-card__info p { overflow-wrap: anywhere; }
.rn-profile-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* 세 개가 다 빨간 테두리라 알림처럼 보였다. 「메인으로」만 힘을 주고
   나머지는 조용히, 「삭제」는 손이 닿았을 때만 붉어진다. */
.rn-profile-act {
  min-height: 36px;
  padding: 7px 13px;
  color: var(--rn-text-2);
  background: var(--rn-paper);
  border: 1px solid var(--rn-line);
  /* 완전한 알약으로 두었더니 짧은 글자가 동그라미 안에 갇힌 것처럼 보였다.
     누르는 자리로 읽히게 모서리만 둥글린다. */
  border-radius: 10px;
  /* 이 카드에서 큰 것은 이름(18px) 하나여야 한다. 버튼이 13.5px 이라 12px 짜리
     날짜·지역 줄보다 커져서, 카드를 보면 「수정·삭제」가 먼저 눈에 들어왔다.
     읽을 것 아래 붙는 조작 단추이므로 글자는 본문과 같은 크기로 내리고,
     대신 굵기로 누를 자리임을 알린다. 손가락이 닿는 높이는 그대로 둔다. */
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.rn-profile-act:hover,
.rn-profile-act:focus-visible { border-color: var(--rn-line-strong); }
.rn-profile-act--main {
  color: var(--rn-pine);
  border-color: var(--rn-pine);
  font-weight: 700;
}
.rn-profile-act--main:hover,
.rn-profile-act--main:focus-visible { background: rgba(27, 86, 75, .07); border-color: var(--rn-pine); }
.rn-profile-act--danger { margin-left: auto; color: #857c78; }
.rn-profile-act--danger:hover,
.rn-profile-act--danger:focus-visible { color: var(--rn-danger); border-color: var(--rn-danger); }
.rn-account-privacy-note { margin: 18px 0 0; padding-top: 14px; color: var(--rn-text-3); border-top: 1px solid var(--rn-line); font-size: 13px; }
.rn-profile-editor { padding: 0; overflow: hidden; }
.rn-profile-editor > summary { min-height: 70px; padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.rn-profile-editor > summary::-webkit-details-marker { display: none; }
.rn-profile-editor > summary::before { content: "+"; width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; color: var(--rn-accent-dark); border: 1px dashed var(--rn-line-strong); border-radius: 999px; font-size: 23px; line-height: 1; }
.rn-profile-editor > summary span { flex: 1; font: 700 19px/1.45 "Gowun Batang",serif; }
.rn-profile-editor > summary small { color: var(--rn-text-3); font-size: 12px; }
.rn-profile-editor[open] > summary { border-bottom: 1px solid var(--rn-line); }
.rn-profile-editor[open] > summary::before { content: "−"; }
.rn-profile-editor__body { padding: 18px 19px 20px; }
.rn-profile-editor__body > .rn-account-muted { margin-top: 0; }
.rn-account-paper-form { display: grid; gap: 16px; }
.rn-account-paper-form .rn-field + .rn-field { margin-top: 0; }
.rn-account-paper-form .rn-field label, .rn-account-paper-form .rn-field__label { color: var(--rn-text-2); }
.rn-account-paper-form .rn-field-note, .rn-account-paper-form .rn-field small { color: var(--rn-text-3); }
.rn-account-paper-form .rn-row--place:has(select:disabled) { opacity: .55; }
.rn-account-paper-form .rn-form-error { color: var(--rn-accent-dark); }
.rn-account-paper-form .rn-form-status { color: var(--rn-green); }
.rn-account-muted { color: var(--rn-text-3); font-size: 13px; }
.rn-check--paper { color: var(--rn-text-2); }
.rn-check--paper span { display: grid; }
.rn-check--paper small { color: var(--rn-text-3); font-size: 12px; }
.rn-check--paper a { text-decoration: underline; text-underline-offset: 3px; }
.rn-account-definition { margin: 0; }
.rn-account-definition > div { padding: 12px 0; display: grid; grid-template-columns: 82px 1fr; border-top: 1px solid var(--rn-line); }
.rn-account-definition dt { color: var(--rn-text-3); font-size: 13px; }
.rn-account-definition dd { margin: 0; overflow-wrap: anywhere; }
.rn-account-security > div { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rn-account-security a, .rn-text-button { padding: 0; color: var(--rn-text-2); background: transparent; border: 0; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rn-account-security .is-danger { color: var(--rn-accent-dark); }
.rn-login-method { min-height: 52px; display: grid; grid-template-columns: 30px minmax(90px,1fr) auto auto; align-items: center; gap: 10px; border-top: 1px solid var(--rn-line); font-size: 14px; }
.rn-login-method:first-of-type { border-top: 0; }
.rn-login-method__icon { width: 26px; height: 26px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; }
.rn-login-method__icon .rn-auth-provider__icon, .rn-login-method__icon svg { width: 18px; height: 18px; }
.rn-login-method__icon--kakao { background: #fee500; }
.rn-login-method__icon--naver { background: #03c75a; }
.rn-login-method__icon--google { background: #fff; border: 1px solid var(--rn-line); }
.rn-login-method__icon--email { color: var(--rn-text-2); background: var(--rn-paper-soft); border: 1px solid var(--rn-line); }
.rn-login-method b { color: var(--rn-text-3); font-size: 12px; font-weight: 500; }
.rn-login-method b.is-connected { color: var(--rn-green); font-weight: 700; }
.rn-login-method__action { color: var(--rn-accent-dark); font-size: 12px; font-weight: 700; }
.rn-login-method__action.is-muted { color: var(--rn-text-3); font-weight: 500; }
.rn-withdraw-link { min-height: 46px; padding: 0 18px !important; display: inline-flex; align-items: center; justify-content: center; color: var(--rn-danger) !important; border: 1px solid var(--rn-danger); border-radius: 12px; text-decoration: none !important; }
.rn-withdraw-panel h3 { margin: 18px 0 6px; font-size: 15px; }
.rn-withdraw-panel li + li { margin-top: 8px; }
.rn-withdraw-save { margin: 20px 0; padding: 18px; background: var(--rn-paper-soft); border: 1px solid var(--rn-line); border-radius: 14px; }
.rn-withdraw-save p { margin: 6px 0 12px; color: var(--rn-text-3); font-size: 13px; }
.rn-withdraw-save a { min-height: 44px; display: grid; place-items: center; border: 1px solid var(--rn-line-strong); border-radius: 10px; font-size: 14px; font-weight: 700; }
.rn-withdraw-confirm { margin-top: 4px; }
.rn-withdraw-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.rn-withdraw-actions .rn-btn { width: 100%; margin: 0; }
.rn-btn--danger { color: #fff !important; background: var(--rn-danger); border-color: var(--rn-danger); }
.rn-withdraw-panel ul { margin: 0 0 28px; padding: 20px 20px 20px 42px; background: var(--rn-accent-wash); border: 1px solid #f0b8a6; }
.rn-withdraw-panel li + li { margin-top: 8px; }

.rn-consent-form { max-width: 760px; }
.rn-consent-all { width: 100%; min-height: 54px; color: var(--rn-text); background: var(--rn-hanji); border: 1px solid var(--rn-line-strong); font-weight: 700; cursor: pointer; }
.rn-consent-section { padding: 25px 0; border-bottom: 1px solid var(--rn-line); }
.rn-consent-section h2 { margin-bottom: 10px; }
.rn-consent-section > p { margin: 0 0 14px; color: var(--rn-text-3); font-size: 13px; }
.rn-consent-section .rn-check + .rn-check { margin-top: 13px; }
.rn-consent-table { margin-top: 18px; overflow-x: auto; }
.rn-consent-table table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 12px; }
.rn-consent-table th, .rn-consent-table td { padding: 10px; border: 1px solid var(--rn-line); text-align: left; vertical-align: top; }
.rn-consent-table th { background: var(--rn-paper-soft); }
.rn-pending { padding-top: 72px; text-align: center; }
.rn-pending .rn-legal-box { margin: 30px 0 14px; text-align: left; }

/* Paid report first-open acknowledgement. A plain POST form keeps it usable
   without JavaScript and prevents link scanners from consuming withdrawal. */
body.rn-open-gate-body { min-height: 100vh; color: var(--rn-text); background: var(--rn-ink); }
.rn-open-gate { min-height: 100vh; padding: max(28px, 7vh) 18px; display: grid; place-items: center; }
.rn-open-gate__paper { width: min(100%, 520px); padding: clamp(28px, 7vw, 54px); background: var(--rn-paper); border: 1px solid var(--rn-line); border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,.34); }
.rn-open-gate__seal { width: 54px; height: 54px; margin-bottom: 25px; display: grid; place-items: center; color: #fff; background: var(--rn-accent); font-size: 29px; }
.rn-open-gate__paper h1 { margin: 10px 0 0; font: 700 clamp(30px, 8vw, 43px)/1.35 "Gowun Batang",serif; }
.rn-open-gate__paper h1 em { color: var(--rn-accent-dark); font-style: normal; }
.rn-open-gate__lede { margin: 17px 0 0; color: var(--rn-text-2); font-size: 14px; line-height: 1.85; }
.rn-open-gate__notice { margin-top: 25px; padding: 18px; background: var(--rn-hanji); border: 1px solid var(--rn-hanji-line); }
.rn-open-gate__notice b { font: 700 16px/1.5 "Gowun Batang",serif; }
.rn-open-gate__notice p { margin: 7px 0 0; color: var(--rn-text-2); font-size: 12px; line-height: 1.75; }
.rn-open-gate__form { margin-top: 24px; display: grid; gap: 18px; }
.rn-open-gate__form .rn-check { padding: 14px; background: var(--rn-paper-card); border: 1px solid var(--rn-line-strong); }
.rn-open-gate__form .rn-check small { margin-top: 4px; line-height: 1.55; }
.rn-open-gate__error { margin: 0; color: var(--rn-accent-dark); font-size: 13px; }
.rn-open-gate__links { margin: 20px 0 0; color: var(--rn-text-3); font-size: 12px; text-align: center; }
.rn-open-gate__links a { text-decoration: underline; text-underline-offset: 3px; }
.rn-expired-body { min-height: 100vh; background: #fff; }
.rn-expired { min-height: 100vh; padding: max(28px,8vh) 18px; display: grid; place-items: center; }
.rn-expired__paper { width: min(100%,520px); padding: clamp(28px,7vw,52px); background: var(--rn-paper-card); border: 1px solid var(--rn-line); text-align: center; }
.rn-expired__glyph { display: block; color: var(--rn-text-3); font: 400 42px/1 "Song Myung",serif; }
.rn-expired__paper .rn-kicker { display: block; margin-top: 17px; }
.rn-expired__paper h1 { margin: 9px 0 0; font: 700 clamp(29px,7vw,40px)/1.4 "Gowun Batang",serif; }
.rn-expired__paper > p { margin: 13px auto 0; max-width: 34em; color: var(--rn-text-2); font-size: 14px; line-height: 1.85; }
.rn-expired__actions { margin-top: 25px; display: grid; grid-template-columns: 1fr; gap: 8px; }
.rn-expired__fine { font-size: 12px !important; }
.rn-expired__fine a { text-decoration: underline; text-underline-offset: 3px; }

.rn-result { min-height: 100vh; background: var(--rn-hanji); }
.rn-result__hero { padding: 0; text-align: center; }
.rn-result__hero-content { padding: 26px 24px 36px; }
.rn-result__hero img { width: 190px; height: 160px; object-fit: contain; }
.rn-result__hero h1 { margin: 16px 0 0; font: 700 31px/1.32 "Gowun Batang", serif; }
.rn-result__hero p { margin: 10px 0 0; color: var(--rn-text-2); font-size: 14px; }
.rn-result__hero--ink { color: #faf8f7; background: var(--rn-ink); }
.rn-result__hero--ink p { color: #c0b8b4; }
.rn-result__hero--ink .rn-pillar { color: var(--rn-text); }
.rn-result-hero-picture { width: 100%; display: block; }
.rn-result-hero-art { width: 100% !important; max-width: none !important; height: auto !important; margin: 0; display: block; object-fit: contain !important; }
.rn-cover-pillars { margin-top: 22px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.rn-cover-pillars--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.rn-cover-pillar { min-width: 0; padding: 7px 3px; display: grid; justify-items: center; color: #faf8f7; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; }
.rn-cover-pillar.is-day { background: rgba(209,58,20,.16); border-color: rgba(247,134,104,.62); }
.rn-cover-pillar small { color: #a8a09c; font-size: 12px; }
.rn-cover-pillar.is-day small { color: var(--rn-accent-on-ink); }
.rn-cover-pillar > img { width: 42px !important; height: 42px !important; margin-top: 3px; object-fit: contain !important; }
.rn-pillar-rider { position: relative; width: min(68px,100%); aspect-ratio: 20 / 21; margin-top: 2px; display: block; }
.rn-pillar-rider img { position: absolute; display: block; margin: 0 !important; object-fit: contain !important; }
.rn-pillar-rider__mount { z-index: 1; left: 11%; top: 28.571%; width: 100% !important; height: 71.429% !important; }
.rn-pillar-rider__character { z-index: 2; left: 13.25%; top: -2.57%; width: 73.5% !important; height: 70% !important; }
.rn-cover-pillar b { font: 400 18px/1.3 "Song Myung",serif; }
.rn-cover-pillar em { max-width: 100%; overflow: hidden; color: #a8a09c; font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.rn-type-chips { margin-top: 16px; display: grid; gap: 6px; text-align: left; }
.rn-type-chips span { min-height: 42px; padding: 8px 12px; display: grid; grid-template-columns: 82px 1fr; align-items: center; color: #faf8f7; background: rgba(27,86,75,.15); border-left: 3px solid var(--rn-pine-bright); }
.rn-type-chips span:nth-child(2) { background: rgba(209,58,20,.12); border-color: var(--rn-accent-on-ink); }
.rn-type-chips span:nth-child(3) { background: rgba(19,87,53,.16); border-color: #79b0a3; }
.rn-type-chips span:nth-child(4) { background: rgba(83,76,76,.18); border-color: #a8a09c; }
.rn-type-chips span:nth-child(5) { background: rgba(48,90,140,.16); border-color: #3d6b9e; }
.rn-type-chips small { color: #a8a09c; font-size: 12px; }
.rn-type-chips b { overflow: hidden; font: 700 16px/1.4 "Gowun Batang",serif; text-overflow: ellipsis; white-space: nowrap; }
.rn-combination { padding: 13px 15px; color: #c0b8b4 !important; background: rgba(47,125,108,.10); border: 1px solid rgba(47,125,108,.55); border-radius: 10px; font-size: 12px !important; line-height: 1.65; }
.rn-combination b { color: #79b0a3; }
.rn-result__body { padding: 0 20px 100px; }
.rn-result-share { margin: 12px 20px 28px; padding: 18px; background: var(--rn-paper-soft); border: 1px solid var(--rn-hanji-line); border-radius: 14px; }
.rn-result-share p { margin: 0 0 10px; color: var(--rn-text-2); font-size: 12px; line-height: 1.65; }
.rn-result-share [role="status"] { min-height: 1.5em; margin-top: 7px; display: block; color: var(--rn-green); font-size: 12px; }
.rn-result-share .rn-btn + .rn-btn { margin-top: 8px; }
.rn-result-share .rn-btn--gold { background: var(--rn-pine-bright); border-color: var(--rn-pine-bright); }
.rn-result-share .rn-btn--gold:hover { background: var(--rn-pine); border-color: var(--rn-pine); }
.rn-method { margin: 0 0 12px; padding: 14px; color: var(--rn-text-2); background: var(--rn-paper-soft); border: 1px solid var(--rn-hanji-line); border-radius: 12px; font-size: 12px; line-height: 1.75; }
.rn-method summary { color: var(--rn-text); font-weight: 600; cursor: pointer; }
.rn-method p { margin: 8px 0 0; }
.rn-result-card { padding: 20px; background: var(--rn-paper-card); border: 1px solid var(--rn-hanji-line); border-radius: 14px; }
.rn-result-card + .rn-result-card { margin-top: 12px; }
.rn-result-card--locked { opacity: .76; background: var(--rn-hanji-deep); border-style: dashed; }
.rn-result-card--pick { color: #faf8f7; background: var(--rn-ink); border-color: var(--rn-ink); }
.rn-result-card--pick p { color: #c0b8b4; }
.rn-result-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rn-result-card__label { color: var(--rn-gold-dark); font-size: 12px; letter-spacing: .08em; }
.rn-result-card__sub { display: block; margin-top: 20px; }
.rn-result-card h2 { margin: 7px 0 0; font: 700 23px/1.4 "Gowun Batang", serif; }
.rn-result-card p { margin: 10px 0 0; color: var(--rn-text-2); font-size: 14px; line-height: 1.85; }
.rn-result-card__value { color: var(--rn-accent-dark); font: 700 30px "Gowun Batang", serif; }
.rn-no-split { padding: 9px 11px; background: var(--rn-paper-soft); border-left: 3px solid var(--rn-gold); font-size: 12px !important; }
.rn-card-deep-link { margin: 16px -20px -20px; padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--rn-text-2); background: var(--rn-hanji); border-top: 1px solid var(--rn-hanji-line); font-size: 12px; }
.rn-card-deep-link b { color: var(--rn-accent-dark); font-size: 12px; }
.rn-compare-card .rn-btn { margin-top: 16px; }
.rn-trait-chart { margin-top: 16px; padding: 12px; display: grid; gap: 10px; background: rgba(255,255,255,.7); }
.rn-trait-row { min-width: 0; color: var(--rn-text-3); font-size: 12px; }
.rn-trait-row__head { margin-bottom: 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rn-trait-row__head b { min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.rn-trait-row__head span { flex: 0 0 auto; color: var(--rn-text-3); font-variant-numeric: tabular-nums; }
.rn-trait-row__track { height: 9px; overflow: hidden; background: #ded8d4; }
.rn-trait-row__track i { min-width: 2px; height: 100%; display: block; background: #aaa19c; }
.rn-trait-row.is-selected { color: var(--rn-text); }
.rn-trait-row.is-selected .rn-trait-row__head b { font-weight: 700; }
.rn-trait-row.is-selected .rn-trait-row__head span { color: var(--rn-accent-dark); font-weight: 700; }
.rn-trait-row.is-selected .rn-trait-row__track i { background: var(--rn-accent); }
.rn-evidence { padding-top: 12px; border-top: 1px solid var(--rn-line); font-size: 12px !important; }
.rn-lock { margin-top: 14px; padding: 20px; background: var(--rn-paper-soft); border: 1px dashed var(--rn-line-strong); }
.rn-lock h3 { margin: 0; font: 700 19px "Gowun Batang", serif; }
.rn-lock__heading { display: flex; gap: 9px; align-items: center; }
.rn-lock__heading svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rn-lock p { margin: 8px 0 14px; color: var(--rn-text-2); font-size: 14px; }
.rn-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rn-solar-card { margin-top: 12px; }
.rn-solar-switch { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; }
.rn-solar-switch button { min-height: 48px; padding: 8px; color: var(--rn-text-2); background: var(--rn-paper-soft); border: 1px solid var(--rn-line-strong); font-size: 12px; cursor: pointer; }
.rn-solar-switch button + button { border-left: 0; }
.rn-solar-switch button.is-active { color: #fff; background: var(--rn-pine); border-color: var(--rn-pine); }
.rn-solar-values { margin: 10px 0 0; padding: 0; display: grid; gap: 5px; list-style: none; }
.rn-solar-values[hidden] { display: none; }
.rn-solar-values li { padding: 8px 10px; display: flex; justify-content: space-between; background: var(--rn-hanji); font-size: 12px; }
.rn-solar-values b { color: var(--rn-accent-dark); }

/* ``나 어떤 사람이야`` 결과 — 02 무료존 B1~B7 정본. */
.rn-me-result,
.rn-me-result-hero { background: #ffffff; }
.rn-me-result-hero { color: var(--rn-text); text-align: left; }
.rn-me-result-hero .rn-result-hero-art { background: #fcfaf9; }
.rn-me-cover-wrap { padding: 20px; }
.rn-me-cover {
  padding: 20px 18px 18px;
  color: #ffffff;
  background: #151110;
  text-align: left;
}
.rn-me-cover__brand { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.rn-me-cover__brand img { width: 25px !important; height: 25px !important; display: block; border-radius: 3px; object-fit: contain !important; }
.rn-me-cover__brand span { color: #ffffff; font: 700 17px "Gowun Batang",serif; letter-spacing: 0; }
.rn-me-cover .rn-cover-pillars { margin-top: 14px; }
.rn-me-cover .rn-cover-pillar { padding: 7px 3px 6px; border-radius: 0; }
.rn-me-cover .rn-cover-pillar > img { width: 40px !important; height: 40px !important; }
/* 카드 위의 묻는 한 줄.
   「언제 하면 좋아」가 쓰던 차림을 셋이 함께 쓴다 — 작은 글씨가 묻고 큰 글씨가
   답한다. 남의 화면에서 이 카드를 처음 보는 사람에게는 이 한 줄이 전부다. */
/* `.rn-result__hero p` 가 (0,1,1) 로 이 자리를 회색으로 덮는다. 요소까지
   붙여 같은 무게로 맞추고, 뒤에 오므로 이긴다. 이 파일에서 세 번째로 같은
   함정에 걸렸다 — 표지 안의 글자는 언제나 바깥의 `p` 규칙과 겨룬다. */
p.rn-cover-question {
  margin: 20px 0 0;
  color: var(--rn-accent-on-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -.01em;
}
.rn-duo-cover p.rn-cover-question { color: #f0b8a6; }

.rn-me-cover h1, .rn-me-cover h2 { margin: 5px 0 4px; color: #ffffff; font: 700 27px/1.42 "Gowun Batang", serif; letter-spacing: -.02em; word-break: keep-all; }
.rn-me-cover h1 em, .rn-me-cover h2 em { color: #f76240; font-style: normal; }
.rn-me-cover__types { margin-top: 18px; }
.rn-me-share { margin: 12px 0 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
.rn-me-share > div { display: grid; grid-template-columns: minmax(0,1fr) 116px; gap: 8px; }
.rn-me-share .rn-btn { min-height: 48px; padding-inline: 10px; font-size: 15px; }
.rn-me-share .rn-btn + .rn-btn { margin-top: 0; }
.rn-me-share > p { margin: 8px 0 0; color: var(--rn-text-3); text-align: center; }
.rn-me-share [role="status"] { margin-top: 3px; text-align: center; }
/* 아래 여백이 100px 이었습니다. 하단 고정 바를 피하려던 값으로 보이는데 이
   화면에는 그런 바가 없고, 이 상자 바로 뒤에 「다시 해볼까요」가 이어집니다.
   그래서 8(이어서 볼 것 아래) + 100 + 28(다시 해볼까요 위) = 136px 짜리 빈
   띠가 본문 한가운데 생겼습니다.

   24px 로 줄여 60px 을 만듭니다. 절이 갈린 것은 분명하되 비어 보이지는
   않습니다 — 바로 위 「이어서 볼 것」이 자기 위에 두는 간격(30+22=52px)과도
   비슷하고, 무료 「날」 결과(.rn-days-result__body)가 이미 쓰는 값입니다. */
.rn-me-result__body { padding: 32px 26px 24px; }
.rn-me-profile > h2 { margin: 0; font: 700 24px/1.4 "Gowun Batang",serif; }
.rn-me-profile__lede { margin: 8px 0 0; color: var(--rn-text-2); font-size: 14px; line-height: 1.7; }
.rn-me-profile-card { margin-top: 20px; padding: 18px; background: var(--rn-hanji-deep); border-color: var(--rn-hanji-line); border-radius: 0; }
.rn-me-profile-card + .rn-me-profile-card { margin-top: 12px; }
.rn-me-profile-card.rn-result-card--standout { border: 2px solid var(--rn-accent); }
.rn-me-profile-card .rn-result-card__label { color: var(--rn-pine); font-size: 13px; }
.rn-me-profile-card .rn-profile-cue { display: inline-flex; align-items: center; gap: 6px; color: var(--rn-text-2); font-size: 12px; font-weight: 500; }
.rn-me-profile-card .rn-profile-cue::before { content: ""; width: 14px; height: 2px; display: block; background: var(--rn-line-strong); }
.rn-me-profile-card.rn-result-card--standout .rn-profile-cue { color: var(--rn-accent-dark); font-weight: 700; }
.rn-me-profile-card.rn-result-card--standout .rn-profile-cue::before { background: var(--rn-accent); }
.rn-me-profile-card h2 { margin-top: 6px; font-size: 26px; }
.rn-me-profile-card .rn-evidence { margin-top: 14px; padding: 12px 14px; background: #ffffff; border: 0; border-left: 3px solid var(--rn-accent); }
.rn-me-profile-card .rn-evidence p { margin: 0; font-family: "Gowun Batang",serif; font-size: 15px; line-height: 1.8; }
.rn-me-profile-card .rn-evidence p + p { margin-top: 6px; color: var(--rn-text-2); font-family: "IBM Plex Sans KR",sans-serif; font-size: 12px; }
.rn-me-profile-card .rn-no-split { margin-top: 10px; background: #ffffff; }
.rn-me-profile-card .rn-card-deep-link { min-height: 46px; margin: 12px 0 0; padding: 10px 12px; color: #ffffff; background: var(--rn-pine-bright); border: 0; justify-content: center; }
.rn-me-profile-card .rn-card-deep-link span { display: none; }
.rn-me-profile-card .rn-card-deep-link b { color: #ffffff; font-size: 14px; }
.rn-me-result .rn-time-unlock-result { border-style: solid; border-radius: 0; }
.rn-me-method { margin-top: 16px; border-radius: 0; }
.rn-me-result .rn-solar-card { margin-top: 24px; border-radius: 0; }
.rn-me-result .rn-solar-switch button { border-radius: 0; }

.rn-connection-chart { width: 100%; height: auto; margin-top: 16px; overflow: visible; color: var(--rn-text-3); font: 12px "IBM Plex Sans KR",sans-serif; }
.rn-connection-chart circle { fill: #fff; stroke: var(--rn-accent); stroke-width: 1.5; }
.rn-connection-chart circle.rn-connection-second { stroke: var(--rn-info); }
.rn-connection-chart .rn-connection-glyph { fill: var(--rn-text); font: 19px "Song Myung",serif; }
.rn-connection-legend { display: flex; justify-content: center; gap: 14px; color: var(--rn-text-3); font-size: 12px; }
.rn-connection-legend span::before { content: ""; width: 18px; margin-right: 5px; display: inline-block; vertical-align: middle; border-top: 2px solid; }
.rn-connection-legend .is-clash::before { border-color: var(--rn-accent); border-top-style: dashed; }
.rn-connection-legend .is-harmony::before { border-color: var(--rn-pine-bright); }
.rn-connection-legend .is-trine::before { border-color: var(--rn-success); }
.rn-link-list { margin: 17px 0 0; padding: 0; display: grid; gap: 7px; list-style: none; font-size: 13px; }
.rn-link-list li { padding: 10px; background: var(--rn-hanji); border-left: 3px solid var(--rn-gold); }
.rn-date-big { margin-top: 15px; color: var(--rn-accent-dark); font: 700 48px/1 "Gowun Batang", serif; }
.rn-date-list { margin-top: 10px; display: grid; gap: 6px; }
.rn-date-list > div { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--rn-hanji); border: 1px solid var(--rn-hanji-line); font-size: 13px; }
.rn-date-list b { display: grid; }
.rn-date-list small { color: var(--rn-text-3); font-size: 12px; font-weight: 400; }
.rn-date-list span { color: var(--rn-accent-dark); font-weight: 700; }
.rn-outside-window { margin-top: 14px; padding: 14px; background: #edf5f2; border: 1px solid rgba(27,86,75,.35); border-radius: 12px; }
.rn-outside-window > span { color: var(--rn-green); font-size: 12px; font-weight: 700; }
.rn-outside-window p { margin-top: 5px; font-size: 12px; }

.rn-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 14px; }
.rn-calendar-head { margin-top: 18px; display: grid; grid-template-columns: repeat(7, 1fr); color: var(--rn-text-3); font-size: 12px; text-align: center; }
.rn-calendar__blank { min-height: 44px; }
.rn-calendar__weekday { padding: 4px 0; color: var(--rn-text-3); font-size: 12px; text-align: center; }
.rn-day { min-height: 44px; padding: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--rn-line); font-size: 12px; }
.rn-day b { font-size: 13px; }
.rn-day[data-level="3"] { color: #fff; background: var(--rn-pine); }
.rn-day[data-level="2"] { background: #79b0a3; }
.rn-day[data-level="1"] { background: #edf5f2; }
.rn-day[data-level="0"] { background: var(--rn-accent-wash); }
.rn-day.is-top-pick { outline: 2px solid var(--rn-accent); outline-offset: -2px; }
.rn-day.is-harder-pick { color: var(--rn-text-3); background: var(--rn-line); }

@media (max-width: 760px) {
  .rn-nav__inner { padding-inline: 12px; gap: 8px; }
  .rn-nav__links { display: none; }
  .rn-nav__menu { display: block; }
  .rn-mobile { border-inline: 0; box-shadow: none; }
  .rn-chapters { grid-template-columns: 1fr; }
  .rn-trust-heading { padding: 52px 20px 40px; }
  .rn-trust-heading h1 { font-size: 36px; }
  .rn-trust-heading p { font-size: 15px; }
  .rn-trust-hero { padding: 58px 22px 52px; }
  .rn-trust-main { padding: 48px 20px 94px; }
  .rn-trust-section + .rn-trust-section, .rn-quality-step + .rn-quality-step { margin-top: 50px; }
  .rn-trust-section > h2, .rn-quality-step > h2, .rn-faq-group > h2 { font-size: 26px; }
  .rn-promise-grid, .rn-free-contract { grid-template-columns: 1fr; }
  .rn-trust-section--hanji { margin-inline: -20px; padding-inline: 20px; }
  .rn-free-contract a { min-height: 94px; }
  .rn-company-list { grid-template-columns: 108px 1fr; }
  .rn-quality-table { grid-template-columns: 88px 1fr; }
  .rn-quality-table dt, .rn-quality-table dd { padding: 12px; }
  .rn-faq-group { padding-top: 44px; }
  .rn-review-empty { padding: 52px 20px; }
  .rn-account-wrap { width: min(100% - 28px, 960px); padding-top: 18px; }
  .rn-account-tabs { margin-inline: -14px; padding-inline: 8px; }
  .rn-account-head { padding: 36px 2px 22px; }
  .rn-account-grid { grid-template-columns: 1fr; gap: 0; }
  .rn-account-panel { padding: 19px; }
  .rn-profile-editor { padding: 0; }
  .rn-profile-editor > summary { min-height: 70px; padding: 17px 19px; }
  .rn-profile-editor__body { padding: 18px 19px 20px; }
  .rn-account-actions > div { grid-template-columns: 1fr; }
  .rn-account-actions a { min-height: 58px; }
  .rn-account-order { align-items: flex-start; }
  .rn-account-definition > div { grid-template-columns: 82px 1fr; }
}

@media (max-width: 370px) {
  .rn-head h1 { font-size: 26px; }
  .rn-paid-card h3 { min-height: 42px; font-size: 15px; }
  .rn-paid-card--lead h3 { font-size: 18px; }
  .rn-door { grid-template-columns: 124px minmax(0, 1fr) auto; gap: 7px; padding-inline: 6px; }
  .rn-door__action { padding-inline: 6px; font-size: 12px; }
  .rn-row { grid-template-columns: 1fr; }
  .rn-row--birth { grid-template-columns: 80px minmax(0, 1fr); }
  .rn-order-wrap { padding-inline: 18px; }
  .rn-birth-primary { grid-template-columns: 72px 66px minmax(0, 1fr); gap: 6px; }
  .rn-birth-primary .rn-input,
  .rn-birth-primary .rn-select { padding-inline: 6px; font-size: 13px; }
  .rn-free-time-panel { grid-template-columns: minmax(104px, .72fr) minmax(0, 1.28fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.rn-invite-ready { margin-top: 26px; padding: 24px; color: var(--rn-text); background: var(--rn-paper-soft); border: 1px solid var(--rn-line); border-radius: 14px; }
.rn-invite-ready h2 { margin: 8px 0; font: 700 25px/1.4 "Gowun Batang", serif; }
.rn-invite-ready p { color: var(--rn-text-2); line-height: 1.75; }
.rn-invite-ready input { width: 100%; margin: 10px 0; padding: 12px; color: var(--rn-text); background: #fff; border: 1px solid var(--rn-line-strong); border-radius: 12px; font-size: 12px; }
/* 보내는 두 길을 나란히 둔다 — 공유 창이 있는 기기에서는 「공유하기」가
   주(主)이고 「링크 복사」가 그 곁이다. 공유 창이 없는 기기에서는 화면이
   공유 버튼을 지우고 복사 하나만 남긴다(`showInviteReady`). */
.rn-invite-ready__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rn-invite-ready__acts .rn-btn { flex: 1 1 140px; }
/* 결과가 열린 뒤의 버튼. 「지금 해야 할 일」의 빨강이 아니라 결과 화면과 같은
   색이다 — 다 된 일을 여는 자리라서. 빨강 둘이 나란히 서던 자리를 없앤다. */
.rn-invite-ready__open {
  color: #ffffff !important;
  background: var(--rn-pine-bright);
  border-color: var(--rn-pine-bright);
}
.rn-invite-ready__open:hover {
  background: var(--rn-pine);
  border-color: var(--rn-pine);
}
/* 상대를 기다리는 줄. 링크를 보낸 사람이 이 화면에 남아 있는 동안 여기가
   혼자 바뀐다 — 기다림도 화면의 상태다. */
.rn-invite-ready__wait {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rn-line);
  font-size: 13px;
  line-height: 1.75;
  word-break: keep-all;
}
.rn-invite-ready__wait b { display: block; color: var(--rn-pine); font-weight: 700; }
.rn-invite-ready__wait .rn-btn { margin-top: 10px; }

/* 무료 2인·타이밍 결과 — docs/renovation/design/02, 12 정본. */
.rn-duo-result,
.rn-days-result { color: var(--rn-text); background: #ffffff; }
.rn-duo-result-hero,
.rn-days-result-hero { background: #fcfaf9; }
.rn-duo-result-hero .rn-result-hero-art,
.rn-days-result-hero .rn-result-hero-art { width: 100% !important; height: auto !important; display: block; }
.rn-days-result-hero { aspect-ratio: 1600 / 801; overflow: hidden; }
.rn-days-result-hero .rn-result-hero-picture { height: 100%; }
.rn-days-result-hero .rn-result-hero-art {
  height: 100% !important;
  object-fit: cover;
  transform: scale(1.025);
}
.rn-duo-result__body,
.rn-days-result__body { padding: 26px 26px 24px; }

.rn-duo-mode { margin-bottom: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rn-duo-mode span { min-height: 40px; display: grid; place-items: center; color: var(--rn-text-3); background: var(--rn-hanji-deep); border: 1px solid #b3aaa5; font-size: 14px; }
.rn-duo-mode span.is-active { color: #ffffff; background: var(--rn-ink); border-color: var(--rn-ink); font-weight: 700; }
.rn-duo-cover { padding: 20px 18px 18px; color: #ffffff; background: #151110; }
.rn-duo-cover__brand { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.rn-duo-cover__brand img { width: 25px !important; height: 25px !important; display: block; border-radius: 3px; object-fit: contain !important; }
.rn-duo-cover__brand span { color: #ffffff; font: 700 17px "Gowun Batang",serif; letter-spacing: 0; }
.rn-days-cover__brand { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.rn-days-cover__brand img { width: 25px !important; height: 25px !important; display: block; border-radius: 3px; object-fit: contain !important; }
.rn-days-cover__brand span { color: #ffffff; font: 700 17px "Gowun Batang",serif; letter-spacing: 0; }
.rn-duo-people { margin: 14px auto 17px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.rn-duo-people > span { color: var(--rn-pine-bright); font: 400 20px "Song Myung",serif; opacity: .75; }
.rn-duo-person { min-width: 0; text-align: center; }
.rn-duo-person img { width: 66px; height: 66px; margin: 0 auto 7px; display: block; object-fit: contain; }
.rn-duo-person img.is-mirrored { transform: scaleX(-1); }
.rn-duo-person b { max-width: 130px; margin: 0 auto; display: block; overflow: hidden; color: #ffffff; font: 700 17px/1.35 "Gowun Batang",serif; text-overflow: ellipsis; white-space: nowrap; }
.rn-duo-person small { margin-top: 3px; display: block; color: #c0b8b4; font-size: 14px; line-height: 1.4; }
.rn-duo-cover h1, .rn-duo-cover h2 { margin: 5px 0 0; color: #ffffff; font: 700 27px/1.43 "Gowun Batang",serif; letter-spacing: -.02em; word-break: keep-all; }
.rn-duo-cover h1 em, .rn-duo-cover h2 em { font-style: normal; }
.rn-duo-cover h1 em.is-first, .rn-duo-cover h2 em.is-first { color: #f76240; }
.rn-duo-cover h1 em.is-second, .rn-duo-cover h2 em.is-second { color: #70a7d3; }
.rn-duo-cover__axes { margin-top: 19px; }
.rn-duo-cover__axes > span { min-height: 48px; padding: 9px 12px; grid-template-columns: minmax(0,1fr) minmax(68px,auto); gap: 10px; }
.rn-duo-cover__axes small { overflow: hidden; color: #c0b8b4; font-size: 14px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.rn-duo-cover__axes b { min-width: 0; color: #ffffff; font: 700 17px/1.4 "Gowun Batang",serif; text-align: right; }
.rn-duo-cover__axes b.is-first { color: #f76240; }
.rn-duo-cover__axes b.is-second { color: #70a7d3; }
.rn-duo-cover__axes b.is-neutral { color: #b7afaa; }
.rn-duo-section-title { margin: 26px 0 12px; font: 700 22px/1.4 "Gowun Batang",serif; }
.rn-duo-axes { display: grid; gap: 10px; }
.rn-duo-axis { padding: 17px 16px 16px; background: var(--rn-hanji-deep); border: 1px solid var(--rn-hanji-line); }
.rn-duo-axis.is-standout { padding: 16px 15px 15px; background: #ffffff; border: 2px solid var(--rn-accent); }
.rn-duo-axis__head { display: block; }
.rn-duo-axis__head h3 { margin: 0; font: 700 18px/1.4 "Gowun Batang",serif; }
.rn-duo-axis__answer { margin-top: 12px; padding: 11px 12px; color: var(--rn-text); background: #ffffff; border-left: 4px solid #a8a09c; }
.rn-duo-axis__answer.is-first { border-left-color: var(--rn-accent); }
.rn-duo-axis__answer.is-second { border-left-color: var(--rn-info); }
.rn-duo-axis__answer b { font: 700 15px/1.5 "Gowun Batang",serif; }
.rn-duo-axis.is-standout .rn-duo-axis__answer { background: var(--rn-hanji-deep); }
.rn-duo-axis__chart { margin-top: 13px; padding: 11px 12px; display: grid; gap: 8px; background: rgba(255,255,255,.64); }
.rn-duo-axis.is-standout .rn-duo-axis__chart { background: var(--rn-hanji-deep); }
.rn-duo-score-row { min-width: 0; display: grid; grid-template-columns: minmax(38px,62px) minmax(0,1fr) 40px; align-items: center; gap: 8px; color: var(--rn-text-2); font-size: 12px; }
.rn-duo-score-row > b { min-width: 0; overflow: hidden; color: var(--rn-text-2); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rn-duo-score-row > div { height: 9px; overflow: hidden; background: #ded8d4; }
.rn-duo-score-row > div i { min-width: 2px; height: 100%; display: block; background: var(--rn-accent); }
.rn-duo-score-row.is-second > div i { background: var(--rn-info); }
.rn-duo-score-row > span { color: var(--rn-text-3); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rn-duo-axis > p { margin: 13px 0 0; padding-top: 12px; color: var(--rn-text-2); border-top: 1px solid #d8d0cc; font-size: 13px; line-height: 1.75; }
.rn-duo-connection { margin-top: 22px; padding: 18px; background: #ffffff; border: 1px solid var(--rn-hanji-line); }
.rn-duo-connection > h2 { margin: 0; font: 700 20px/1.45 "Gowun Batang",serif; }
.rn-duo-connection > p { margin: 5px 0 0; color: var(--rn-text-2); font-size: 13px; }
.rn-duo-connection__summary { margin: 12px 0 0; padding: 10px 12px; color: var(--rn-text-2); background: var(--rn-hanji-deep); border-left: 3px solid var(--rn-pine-bright); font-size: 13px; line-height: 1.7; }
.rn-duo-share { min-height: 48px; margin-top: 14px; background: var(--rn-pine-bright); border-color: var(--rn-pine-bright); border-radius: 0; }
.rn-share-status { min-height: 1.5em; margin-top: 6px; display: block; color: var(--rn-green); font-size: 12px; text-align: center; }
.rn-duo-lock { border-radius: 0; }

.rn-days-covers { display: block; }
.rn-days-cover__card { padding: 20px 18px 18px; color: #ffffff; background: #151110; }
.rn-days-cover__question { margin: 17px 0 0; color: #70a99d; font-size: 13px; font-weight: 600; line-height: 1.55; }
.rn-days-cover__card > h1 { margin: 5px 0 0; color: #ffffff; font: 700 25px/1.43 "Gowun Batang",serif; letter-spacing: -.025em; word-break: keep-all; }
.rn-days-cover__date { margin-top: 14px; display: flex; align-items: baseline; gap: 9px; }
.rn-days-cover__date .rn-date-big { margin: 0; color: #ffffff; font: 700 clamp(34px,9vw,40px)/1 "Gowun Batang",serif; white-space: nowrap; }
.rn-days-cover__date > span { color: var(--rn-pine-bright); font: 700 18px/1 "Gowun Batang",serif; white-space: nowrap; }
.rn-days-cover__date > em { margin-left: auto; padding: 3px 8px; color: #d6cec9; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font: normal 17px "Song Myung",serif; white-space: nowrap; }
.rn-days-cover__reason { margin: 11px 0 0; color: #ded6d1; font-size: 13px; line-height: 1.78; }
.rn-days-cover__reason > b { display: none; }
.rn-days-cover__reason strong { color: #ffffff; }
.rn-days-cover__source { margin-top: 13px; padding: 10px 11px; display: grid; gap: 2px; color: #ffffff; background: rgba(255,255,255,.07); border-left: 3px solid var(--rn-pine-bright); }
.rn-days-cover__source span { font: 700 14px/1.5 "Gowun Batang",serif; }
.rn-days-cover__source small { color: #a8a09c; font-size: 12px; }
.rn-days-cover__score { margin-top: 13px; padding: 12px 12px 11px; background: rgba(79,151,135,.12); border-left: 3px solid var(--rn-pine-bright); }
.rn-days-cover__score > strong { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #ffffff; font: 700 15px/1.5 "Gowun Batang",serif; }
.rn-days-cover__score > strong > b { flex: 0 0 auto; color: #ffffff; font-size: 20px; font-variant-numeric: tabular-nums; }
.rn-days-cover__score > span { margin-top: 3px; display: block; color: #c0b8b4; font-size: 12px; line-height: 1.65; }
.rn-days-cover__numbers { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12); }
.rn-days-cover__numbers > span { color: #a8a09c; font-size: 12px; }
.rn-days-cover__numbers > div { margin-top: 8px; display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.rn-days-cover__numbers b { aspect-ratio: 1; display: grid; place-items: center; color: #ffffff; background: rgba(79,151,135,.26); border: 1px solid rgba(112,169,157,.62); border-radius: 50%; font-size: 13px; }
.rn-days-result .rn-share-status { margin: 2px 0 0; }
.rn-days-intro { margin-top: 22px; }
.rn-days-intro__question { margin: 0; color: var(--rn-text); font: 700 23px/1.45 "Gowun Batang",serif; word-break: keep-all; }
.rn-days-intro > b { margin-top: 8px; display: inline-block; color: var(--rn-pine); font-size: 13px; }
.rn-days-today-answer { margin: 13px 0 0; padding: 13px 14px; color: var(--rn-text-2); background: #edf5f2; border-left: 3px solid var(--rn-pine); font-size: 14px; line-height: 1.7; }
.rn-days-calendar { margin-top: 18px; }
.rn-days-calendar > h2 { margin: 0; font: 700 20px/1.45 "Gowun Batang",serif; }
.rn-days-calendar > p { margin: 4px 0 0; color: var(--rn-text-2); font-size: 13px; line-height: 1.65; }
.rn-days-calendar__frame { margin-top: 12px; padding: 14px; background: #ffffff; border: 1px solid var(--rn-hanji-line); }
.rn-days-calendar .rn-calendar-head { margin: 0; color: var(--rn-text-2); font-size: 13px; }
.rn-days-calendar .rn-calendar { gap: 3px; margin-top: 6px; }
.rn-days-calendar .rn-calendar__blank,
.rn-days-calendar .rn-day { min-height: 43px; }
.rn-days-calendar .rn-day { padding: 3px; color: var(--rn-text); font-size: 13px; }
.rn-days-calendar .rn-day b { font-size: 13px; font-weight: 500; }
.rn-days-calendar .rn-day small { margin-top: 1px; display: block; font-size: 12px; font-variant-numeric: tabular-nums; opacity: .78; }
.rn-days-calendar .rn-day[data-level="0"] { background: #fbe4dd; }
.rn-days-calendar .rn-day[data-level="1"] { background: #efe8e4; }
.rn-days-calendar .rn-day[data-level="2"] { background: #d7e6d6; }
.rn-days-calendar .rn-day[data-level="3"] { color: var(--rn-text); background: #97bfa0; }
.rn-days-calendar .rn-day[data-level="4"] { color: #ffffff; background: #1e7448; }
.rn-days-calendar .rn-day.is-top-pick { outline: 2px solid var(--rn-accent); outline-offset: -2px; }
.rn-days-calendar .rn-day.is-harder-pick { color: inherit; }
.rn-days-calendar .rn-day.is-harder-pick[data-level="4"] { color: #ffffff; }
.rn-calendar-legend { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; color: var(--rn-text-2); font-size: 12px; }
.rn-calendar-legend i { display: flex; gap: 3px; }
.rn-calendar-legend i b { width: 18px; height: 9px; display: block; background: #fbe4dd; }
.rn-calendar-legend i b:nth-child(2) { background: #efe8e4; }
.rn-calendar-legend i b:nth-child(3) { background: #d7e6d6; }
.rn-calendar-legend i b:nth-child(4) { background: #97bfa0; }
.rn-calendar-legend i b:nth-child(5) { background: #1e7448; }
.rn-days-picks { margin-top: 14px; padding: 16px; background: var(--rn-hanji-deep); border: 1px solid var(--rn-hanji-line); }
.rn-days-picks h2 { margin: 0; font: 600 15px/1.5 "IBM Plex Sans KR",sans-serif; }
.rn-days-picks h2:not(:first-child) { margin-top: 16px; }
.rn-days-result .rn-date-list { margin-top: 10px; gap: 8px; }
.rn-days-result .rn-date-list > div { padding: 10px 12px; display: grid; grid-template-columns: 62px 42px minmax(0,1fr); justify-content: initial; gap: 10px; background: #ffffff; }
.rn-days-result .rn-date-list > div > b { display: block; color: var(--rn-text); font-size: 14px; white-space: nowrap; }
.rn-days-result .rn-date-list > div > em { font: normal 16px "Song Myung",serif; }
.rn-days-result .rn-date-list > div > span { color: var(--rn-text-2); font-size: 12px; font-weight: 400; line-height: 1.5; }
.rn-days-result .rn-date-list > div > span b { display: inline; color: var(--rn-text); }
.rn-days-result .rn-date-list > div.is-best { border-left: 3px solid var(--rn-accent); }
.rn-days-result .rn-date-list > div.is-good { border-left: 3px solid var(--rn-pine-bright); }
.rn-days-result .rn-date-list > div.is-pause { border-left: 3px solid #a8a09c; }
.rn-days-result .rn-date-list strong { margin-top: 3px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--rn-accent-dark); font-weight: 700; }
.rn-days-result .rn-date-list strong > span { min-width: 0; }
.rn-days-result .rn-date-list strong > b { flex: 0 0 auto; color: currentColor !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn-days-result .rn-date-list .is-good strong { color: var(--rn-green); }
.rn-days-result .rn-date-list .is-pause strong { color: var(--rn-text-3); }
.rn-days-next { margin-top: 16px; padding: 20px; background: #f6f2f0; border: 1px solid var(--rn-hanji-line); border-top: 3px solid var(--rn-accent); }
.rn-days-next h2 { margin: 0; color: var(--rn-text); font: 700 20px/1.48 "Gowun Batang",serif; word-break: keep-all; }
.rn-days-next p { margin: 9px 0 0; color: var(--rn-text-2); font-size: 14px; line-height: 1.75; }
.rn-days-next .rn-btn { min-height: 50px; margin-top: 15px; }
.rn-days-again { min-height: 50px; margin-top: 10px; display: grid; place-items: center; color: var(--rn-pine); background: #ffffff; border: 1px solid var(--rn-pine); font-size: 14px; font-weight: 600; }
@media (max-width: 430px) {
  .rn-demo-account-notice { display: grid; }
}
@media (max-width: 370px) {
  .rn-duo-result__body,
  .rn-days-result__body { padding-inline: 20px; }
  .rn-days-cover__date { gap: 6px; }
  .rn-days-cover__date .rn-date-big { font-size: 31px; }
  .rn-days-cover__date > span { font-size: 16px; }
  .rn-days-result .rn-date-list > div { grid-template-columns: 55px 38px minmax(0,1fr); gap: 6px; padding-inline: 8px; }
}

/* ── 상세 페이지의 「실제 이력」 ─────────────────────────────────────────
   후기는 지어낼 수 있지만 이력은 못 지어낸다. 그래서 이 세 블록은 꾸미지 않고
   실제 문장과 목차를 그대로 보여준다. 장식이 붙을수록 광고처럼 읽힌다. */
.rn-detail-answers ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

/* 이력 열 건을 세로로 쌓으면 스크롤 벽이 된다. 옆으로 넘기게 둔다 —
   한 건씩 눈에 들어오고, 넘길수록 「다 다른 걸 물었네」가 쌓인다.
   가장자리를 화면 밖으로 빼서 다음 장이 걸쳐 보이게 한다. 안 그러면
   넘길 수 있다는 것 자체를 모른다. */
/* 한 번에 한 장, 가운데.
   여러 장이 반쯤 걸쳐 흐르면 눈이 옆으로 새고, 스크롤바는 「긴 목록」이라는
   신호라 읽기 전에 지치게 한다. 넘기는 일은 동그란 버튼과 끌기가 한다. */
.rn-showcase-deck { margin-top: 14px; }
.rn-showcase-rail::-webkit-scrollbar { display: none; }
.rn-showcase-nav {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.rn-showcase-arrow {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--rn-pine, #1b564b);
  background: var(--rn-paper, #fff);
  border: 1px solid var(--rn-line, #e4dedb);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.rn-showcase-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rn-showcase-arrow:hover:not(:disabled),
.rn-showcase-arrow:focus-visible { border-color: var(--rn-pine, #1b564b); background: rgba(27,86,75,.06); }
.rn-showcase-arrow:disabled { opacity: .32; cursor: default; }
.rn-showcase-count {
  min-width: 64px;
  color: var(--rn-text-3, #7a726d);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rn-showcase-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rn-showcase-rail.is-dragging * { pointer-events: none; }

.rn-showcase-rail {
  margin: 0;
  /* 좌우 여백은 **컨테이너가 아니라 첫·끝 항목**이 만든다. 스크롤 컨테이너의
     padding-inline-end 는 끝까지 밀었을 때 브라우저가 버린다 — 왼쪽은 남고
     오른쪽만 사라져서, 마지막 카드가 화면 모서리에 붙어 잘린 것처럼 보였다. */
  padding: 2px 0 10px;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
}

/* 한 장이 폭을 다 쓰므로 가장자리 여백을 따로 만들 필요가 없다.
   예전에는 첫·끝 항목이 그 여백을 만들었는데, 지금은 그 자리가 어긋난 칸이
   된다. */
.rn-showcase-rail > li { scroll-snap-align: center; }

.rn-showcase-rail:focus-visible {
  outline: 2px solid var(--rn-accent, #b32f13);
  outline-offset: 2px;
}

.rn-answer,
.rn-showcase {
  padding: 15px 16px;
  background: var(--rn-paper-2, #f6f2ee);
  border-radius: 10px;
}

/* 카드 안에서는 질문이 주인공이다. 예전에는 질문과 부 제목이 같은 회색 문단으로
   나란히 쌓여 있어서, 목차만 늘어놓은 것처럼 읽혔다. */
.rn-showcase { display: flex; flex-direction: column; }
.rn-showcase .rn-showcase__ask {
  margin: 7px 0 0;
  color: var(--rn-text);
  font: 700 15px/1.65 "Gowun Batang", serif;
  word-break: keep-all;
}
.rn-showcase__bridge {
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--rn-line);
  color: var(--rn-text-3);
  font-size: 12px;
}
.rn-showcase__parts {
  margin: 9px 0 0;
  padding-left: 17px;
  display: grid;
  gap: 9px;
}
.rn-showcase__parts b {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: keep-all;
}
.rn-showcase__parts span {
  display: block;
  margin-top: 2px;
  color: var(--rn-text-3);
  font-size: 12.5px;
  line-height: 1.6;
  word-break: keep-all;
}

.rn-answer__ask,
.rn-showcase__ask {
  margin: 0 0 8px;
  font-size: 14.5px;
  color: var(--rn-ink-3, #6f645c);
  word-break: keep-all;
}

.rn-answer__said {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  word-break: keep-all;
}

.rn-answer__from,
.rn-showcase__part {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--rn-ink-3, #6f645c);
  word-break: keep-all;
}

.rn-showcase__part {
  margin-top: 6px;
  line-height: 1.65;
}

.rn-detail-answers__note,
/* 발행본에서 그대로 떠 온 한 장. 인용이라는 것이 보여야 하므로 카드가 아니라
   들여쓴 지면처럼 둔다. */
.rn-excerpt {
  margin: 14px 0 0;
  padding: 16px 18px;
  background: var(--rn-paper-2, #f6f2ee);
  border-left: 2px solid var(--product, var(--rn-accent-dark));
  border-radius: 0 6px 6px 0;
}
.rn-excerpt figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.rn-excerpt figcaption b { font: 700 14px "Gowun Batang", serif; }
.rn-excerpt figcaption span { color: var(--rn-text-3); font-size: 12.5px; }
.rn-excerpt p { margin: 0 0 9px; font-size: 14.5px; line-height: 1.85; word-break: keep-all; }
.rn-excerpt p:last-child { margin-bottom: 0; }
.rn-detail-showcase__lede,
.rn-detail-outline__lede {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--rn-ink-3, #6f645c);
  word-break: keep-all;
}

.rn-detail-showcase__lede,
.rn-detail-outline__lede {
  margin: 6px 0 0;
}

.rn-outline {
  margin: 14px 0 0;
  display: grid;
  gap: 12px;
}

.rn-outline__part b {
  display: block;
  font-size: 14.5px;
}

.rn-outline__part ol {
  margin: 6px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 3px;
}

.rn-outline__part li {
  font-size: 13.5px;
  color: var(--rn-ink-2, #4a423c);
  word-break: keep-all;
}

/* 상대가 있는 질문은 값이 달라서 줄을 나눠 둔다. 다음 화면에서 고르게 하면
   값이 바뀌는 순간이 결제 직전이 된다.

   두 줄은 **같은 모양**이어야 한다. 하나만 버튼처럼 생기면 나머지 하나는
   덤으로 읽히는데, 둘 다 파는 물건이다. 값은 오른쪽 끝에 자리를 맞춰 세워
   위아래로 바로 견줄 수 있게 한다. */
.rn-buy-rows { margin-top: 18px; display: grid; gap: 9px; }
.rn-buy-row {
  min-height: 60px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--rn-text);
  background: var(--rn-paper-card);
  border: 1px solid var(--rn-line-strong);
  border-radius: 12px;
  text-decoration: none;
}
.rn-buy-row span { display: grid; gap: 2px; font-size: 15px; font-weight: 700; }
.rn-buy-row i { color: var(--rn-text-3); font-size: 12.5px; font-style: normal; font-weight: 400; }
.rn-buy-row b { flex: 0 0 auto; font: 700 19px/1 "Gowun Batang", serif; font-variant-numeric: tabular-nums; }
.rn-buy-row--lead {
  color: var(--rn-paper);
  background: var(--product, var(--rn-accent-dark));
  border-color: transparent;
}
.rn-buy-row--lead i { color: rgba(255, 255, 255, .72); }
@media (hover: hover) { .rn-buy-row:hover { border-color: var(--product, var(--rn-accent-dark)); } }

.rn-detail__dock-alt {
  margin-top: 8px;
}

.rn-detail__dock-alt .rn-btn {
  display: block;
  width: 100%;
  text-align: center;
}

.rn-showcase__who {
  /* 이제 질문 위에 홀로 선다. 예전에는 질문 문단 안에 끼어 있었다. */
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--rn-paper-3, #eae2d8);
  color: var(--rn-text-2);
  font-size: 12px;
}

/* 「못 봐요」와 「대신 이건 됩니다」를 한 줄로 붙여 둔다. 거절만 늘어놓으면
   벽이고, 대안이 붙으면 안내가 된다. */
.rn-refusals {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.rn-refusal b {
  display: block;
  font-size: 14.5px;
  word-break: keep-all;
}

.rn-refusal span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--rn-ink-3, #6f645c);
  word-break: keep-all;
}

/* ── 문 아래에 붙는 질문 조각 ────────────────────────────────────────
   「언제 하면 좋아」 안에는 네 가지가 들어 있는데 문패에는 그 이름 한 줄뿐이라
   누르기 전에는 아무도 알 수 없었다. 안에 뭐가 있는지 모르면 누를 이유도 없다.
   그래서 질문을 문 밖으로 꺼내 조각으로 붙인다 — 카테고리 이름이 아니라 사람이
   실제로 하는 질문 그대로. */
.rn-door-asks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: -1px 0 0;
  padding: 8px;
  background: var(--rn-hanji-deep);
  border: 1px solid #d5cdc9;
  border-top: 0;
  border-left: 4px solid var(--rn-green-deep, #123f37);
}
.rn-door-ask {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 56px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #ded7d3;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.rn-door-ask:hover,
.rn-door-ask:focus-visible { border-color: var(--rn-green-deep, #123f37); transform: translateY(-1px); }
.rn-door-ask b {
  font: 700 13.5px/1.45 "Gowun Batang", serif;
  color: var(--rn-ink, #2a2320);
  word-break: keep-all;
}
.rn-door-ask small { color: #7a726d; font-size: 12px; letter-spacing: .01em; }
@media (max-width: 359px) {
  .rn-door-asks { grid-template-columns: 1fr; }
}

/* 「기준 모집단이 무엇인가」 — 숫자의 정체를 밝히는 자리.
   신뢰를 얻으려고 쓴 숫자가 정체를 안 밝히면 오히려 의심을 부른다. */
.rn-quality-note {
  margin: 18px 0 0;
  padding: 17px 18px;
  background: var(--rn-hanji-deep);
  border: 1px solid #d5cdc9;
  border-left: 3px solid var(--rn-green, #135735);
}
.rn-quality-note > b {
  display: block;
  margin-bottom: 9px;
  font: 700 15px/1.5 "Gowun Batang", serif;
  color: var(--rn-ink, #2a2320);
}
.rn-quality-note p { margin: 0 0 9px; font-size: 14.5px; line-height: 1.8; color: #4a443c; }
.rn-quality-note p:last-child { margin: 0; }

/* 결제 버튼 앞에 세우는 「이런 걸 봐 드려요」.
   페이지가 못 하는 일 목록으로 끝나면 마지막 인상이 부정이 된다.

   카드로 띄워 두었더니 위아래 통단면 사이에 이것만 상자로 떠서 덧붙인 것처럼
   읽혔다. 「이런 때 보면 좋아요」·「이건 저희가 못 봐요」와 같은 꼴로 두면
   목록 셋이 한 줄기로 읽히고, 색만 상품 색으로 바꿔 마지막 자리를 표시한다. */
.rn-detail-includes { background: var(--rn-hanji-deep); }
.rn-detail-includes h2 { color: var(--product, var(--rn-text)); }
.rn-detail-includes ul {
  margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px;
}
.rn-detail-includes li {
  position: relative; padding-left: 15px;
  color: var(--rn-text-2); font-size: 14px; line-height: 1.7; word-break: keep-all;
}
.rn-detail-includes li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 1px; background: var(--product, var(--rn-line-strong));
}
/* 결과 표지에는 편집 제목이, 목록에는 산 질문이 선다. 사기 전에 둘을 한 줄로
   이어 두지 않으면 펼쳤을 때 다른 물건을 받은 것처럼 읽힌다. */
.rn-detail-includes__title {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--rn-line);
  color: var(--rn-text-3); font-size: 13.5px; line-height: 1.7; word-break: keep-all;
}
.rn-detail-includes__title b { color: var(--rn-text); font-weight: 700; }

/* 무료 결과의 「어느 글자에서 봤나요」.
   근거는 없애지 않되, 처음 온 사람 앞에 한자를 먼저 내밀지는 않는다. */
.rn-evidence__why { margin-top: 9px; }
.rn-evidence__why > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px;
  color: var(--rn-text-3, #7a726d); font-size: 12.5px;
  border-bottom: 1px dotted #cdc5c0; padding-bottom: 1px;
}
.rn-evidence__why > summary::-webkit-details-marker { display: none; }
.rn-evidence__why > summary::after { content: '+'; font-size: 13px; }
.rn-evidence__why[open] > summary::after { content: '−'; }
.rn-evidence__why > p {
  margin: 9px 0 0; padding: 10px 12px; background: #f4f1ec; border-radius: 3px;
  color: #4a443c; font-size: 13px; line-height: 1.75;
}

/* 무료 결과 맨 끝의 「이어서 볼 것」.
   끝까지 읽었다는 건 관심이 가장 높다는 뜻인데 그 자리가 비어 있었다. */
.rn-next { margin: 30px 0 8px; padding-top: 22px; border-top: 1px solid #ded7d3; }
.rn-next > h2 { margin: 0 0 14px; font: 700 19px/1.5 "Gowun Batang", serif; }
.rn-next__paid {
  display: grid; gap: 3px; padding: 17px 18px; margin-bottom: 12px;
  background: var(--rn-hanji-deep); border: 1px solid #d5cdc9;
  border-left: 4px solid var(--rn-accent, #9c2810);
  color: inherit; text-decoration: none;
}
.rn-next__paid > span { color: #7a726d; font-size: 12.5px; }
.rn-next__paid > b { font: 700 18px/1.45 "Gowun Batang", serif; color: var(--rn-accent-dark, #7d1f0c); }
.rn-next__paid > em { font-style: normal; color: #4a443c; font-size: 13.5px; line-height: 1.7; }
.rn-next__free { display: grid; gap: 8px; }
.rn-next__free a {
  display: grid; gap: 2px; padding: 13px 15px;
  background: #fff; border: 1px solid #ded7d3; color: inherit; text-decoration: none;
}
.rn-next__free b { font: 700 15px/1.5 "Gowun Batang", serif; }
.rn-next__free span { color: #7a726d; font-size: 12.5px; }
.rn-next__paid:hover, .rn-next__free a:hover { border-color: var(--rn-accent, #9c2810); }

/* `hidden` 을 붙였는데도 보이던 자리.
   `.rn-form__group` 의 display 선언이 브라우저 기본 `[hidden]` 규칙을 이긴다.
   초대를 고르면 상대 입력칸이 사라져야 하는데 회색으로 남아 있었다. */
.rn-form__group[hidden],
.rn-duo-how[hidden] { display: none !important; }

/* 미리 체크된 「시간 모름」 옆의 한 줄. 아무 말도 없으면 아는 사람도 지나친다. */
.rn-field-hint { display: block; margin-top: 7px; color: var(--rn-text-3, #7a726d); font-size: 12.5px; line-height: 1.65; }

/* 지난번에 본 사주 한 줄. 폼을 통째로 감추던 요약 카드를 대신한다. */
.rn-last-birth {
  margin: 0 0 14px;
  padding: 9px 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--rn-hanji-deep, #f4f0ee);
  border-radius: 8px;
  color: #6f6763;
  font-size: 13px;
  line-height: 1.6;
}
.rn-last-birth::before {
  content: "지난번";
  flex: none;
  color: var(--rn-pine, #1b564b);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.rn-last-birth[hidden] { display: none !important; }
.rn-last-birth span { color: var(--rn-text, #1a1614); }

/* 무료 결과 발치의 「다시 해볼까요」.
   이 길이 없어서 반복이 전부 새 계산이 됐다. 결과를 다 읽은 자리에 둔다. */
.rn-again {
  margin: 28px 16px 8px;
  padding: 20px 18px 18px;
  background: var(--rn-paper-soft, #faf8f7);
  border: 1px solid var(--rn-line, #e4dedb);
  border-radius: var(--rn-radius, 14px);
}
.rn-again h2 {
  margin: 0 0 4px;
  font-size: 17px;
  letter-spacing: -.01em;
}
.rn-again__lead {
  margin: 0 0 12px;
  color: #6f6763;
  font-size: 13.5px;
}
.rn-again__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.rn-again__chip {
  display: block;
  padding: 11px 12px;
  border: 1px solid var(--rn-line, #e4dedb);
  border-radius: 10px;
  background: var(--rn-paper, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.rn-again__chip:hover,
.rn-again__chip:focus-visible {
  border-color: var(--rn-pine, #1b564b);
  transform: translateY(-1px);
}
.rn-again__chip.is-current {
  background: var(--rn-hanji-deep, #f4f0ee);
  border-style: dashed;
  cursor: default;
}
.rn-again__chip b {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.rn-again__chip small {
  display: block;
  color: #7a726d;
  font-size: 12px;
  line-height: 1.5;
}
.rn-again__note {
  margin: 10px 0 0;
  color: #857c78;
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 380px) {
  .rn-again__chips { grid-template-columns: 1fr; }
}

/* 풀이함의 무료 선반. 링크를 잃으면 30일짜리 결과가 그냥 사라지던 자리. */
/* 무료 선반은 **작게** 둔다.
   산 풀이 아래에 붙는 자리이고, 여기 것은 사흘 뒤 사라진다. 그런데 카드가
   산 것과 비슷한 덩치라 스무 개가 쌓이면 화면의 대부분을 무료가 차지했다.
   위에 숨 쉴 자리를 주고, 칸은 좁히고, 카드는 한 줄짜리로 낮춘다. */
/* ── 무료로 본 것 ────────────────────────────────────────────────────
   규칙이 두 벌 겹쳐 있었다. 아래쪽 것이 위쪽 것을 조용히 덮었고, 「무료」 표는
   절대 위치로 띄운 뒤 카드 위쪽 패딩으로 자리를 비켜 두는 방식이었다 — 한쪽만
   줄이면 바로 제목을 가린다. 실제로 그랬다.

   흐름 안으로 들여놓는다. 표와 남은 날이 한 줄에 마주 보고, 제목이 그 아래
   온다. 겹칠 수가 없고, 좁은 칸에서도 두 값이 양끝으로 갈려 읽기 쉽다. */
.rn-free-shelf-panel { margin-top: 26px; }
.rn-free-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
}
.rn-free-shelf__card {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 10px 11px;
  border: 1px solid var(--rn-line, #e4dedb);
  border-radius: 10px;
  background: var(--rn-paper, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.rn-free-shelf__card:hover,
.rn-free-shelf__card:focus-visible {
  border-color: var(--rn-pine, #1b564b);
  background: #f7faf9;
}

/* 표와 남은 날이 마주 보는 줄. */
.rn-free-shelf__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
/* 무료 표. 산 풀이와 한눈에 갈려야 한다 — 여기 것은 사흘 뒤 사라진다.
   소나무색이 이 화면에서 「무료」의 색이다. */
.rn-free-shelf__tag {
  flex: none;
  padding: 2px 7px;
  background: #eaf2ee;
  border-radius: 999px;
  color: var(--rn-pine, #1b564b);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}
.rn-free-shelf__card small {
  flex: none;
  color: var(--rn-text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* 제목은 두 줄까지. 「누가 더 애쓰고 있어」가 좁은 칸에서 세 줄이 되면 카드가
   저 혼자 길어져 줄이 어긋난다. */
.rn-free-shelf__card b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
  word-break: keep-all;
}
.rn-free-shelf__card span {
  color: var(--rn-pine, #1b564b);
  font-size: 12px;
  line-height: 1.35;
}

.rn-free-shelf__hint { color: var(--rn-text-3); font-size: 12px; }
/* 「몇 개 중 몇 개」. 한도가 있다는 것을 세는 자리에서 함께 말한다. */
.rn-free-shelf__count { color: var(--rn-text-2) !important; font-variant-numeric: tabular-nums; }
.rn-free-shelf__count i { color: var(--rn-text-3); font-style: normal; font-weight: 600; }

/* 생년월일시를 무엇에 쓰는지 알리는 한 줄. 체크박스가 있던 자리에 온다 —
   무료 계산은 요청 이행이 근거라 동의는 받지 않고 사실만 짧게 말한다.
   (.rn-consent-kept 는 옛 이름 — 캐시된 화면이 아직 부를 수 있다.) */
.rn-free-note,
.rn-consent-kept {
  margin: 4px 0 12px;
  padding: 11px 13px;
  background: var(--rn-hanji-deep, #f4f0ee);
  border-radius: 8px;
  color: #6f6763;
  font-size: 13px;
  line-height: 1.7;
}
.rn-free-note a,
.rn-consent-kept a { color: var(--rn-pine, #1b564b); }

/* 카드 위의 「어떤 사주로 본 결과인가」.
   원국 여덟 글자만으로는 며칠 뒤에 내 것인지 친구 것인지 못 알아본다.
   공유 그림에서는 이 덩이만 들어낸다 — data-rn-card-birth. */
.rn-card-birth {
  margin-top: 14px;
  padding-top: 12px;
  display: grid;
  gap: 5px;
  /* 그라데이션 `border-image` 로 그었더니 **공유 그림에서 굵은 회색 띠**가
     됐다. 카드를 그림으로 구울 때는 계산된 스타일을 하나씩 옮겨 심는데,
     border-image 는 그 과정에서 테두리 폭을 잃고 상자 전체에 칠해진다.
     같은 선을 평범하게 긋는다 — 화면에서도 구운 그림에서도 같게 나온다. */
  border-top: 1px solid currentColor;
  opacity: .72;
  font-size: 12px;
  letter-spacing: .01em;
}
.rn-card-birth__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 7px;
  line-height: 1.5;
}
.rn-card-birth__who {
  font-weight: 700;
  letter-spacing: .02em;
}
.rn-card-birth__row i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
/* 가운뎃점은 진짜 글자다. `::before` 로 그리면 공유 그림에서 사라진다 —
   카드를 구울 때 가상 요소는 복제에 딸려오지 않는다. */
.rn-card-birth__dot { font-weight: 400; opacity: .55; }

/* 공유 그림에 사주 정보를 넣을지. 기본은 빼는 쪽이다. */
.rn-share-birth {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--rn-text-2, #4a413d);
  font-size: 13px;
  cursor: pointer;
}
.rn-share-birth input { width: 18px; height: 18px; accent-color: var(--rn-pine, #1b564b); }


/* 저장 제안 안에서 성별을 받는 자리. 성별 칸이 없는 화면(둘·날)에서만 뜬다.
   안내 문장이 자기 줄을 차지하고, 두 선택지는 그 아래 한 줄에 나란히 선다. */
.rn-profile-offer__gender {
  margin-top: 8px;
  display: grid;
  justify-items: start;
  gap: 6px;
}
.rn-profile-offer__gender[hidden] { display: none !important; }
.rn-profile-offer__gender small {
  color: var(--rn-text-3);
  font-size: 12px;
  line-height: 1.5;
}
/* 두 선택지를 한 줄에 묶는 자리. 좁아져도 「여성」과 그 동그라미가 갈라지지
   않도록 각 조각은 통째로 움직인다. */
.rn-profile-offer__gender > span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.rn-profile-offer__gender label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rn-text-2);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.rn-profile-offer__gender input { width: 16px; height: 16px; margin: 0; accent-color: var(--rn-pine, #1b564b); }
/* 이름을 묻는 칸. 성별 칸과 같은 자리, 같은 결로 선다 — 한 카드가 두 가지
   방식으로 묻지 않게. (예전에는 여기서 브라우저 `prompt` 창이 떴다.) */
.rn-profile-offer__name {
  margin-top: 8px;
  display: grid;
  gap: 4px;
}
.rn-profile-offer__name[hidden] { display: none !important; }
.rn-profile-offer__name label {
  color: var(--rn-text-3);
  font-size: 12px;
  line-height: 1.5;
}
.rn-profile-offer__name input {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  color: var(--rn-text);
  background: var(--rn-paper);
  border: 1px solid var(--rn-line-strong);
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
}
.rn-profile-offer__name input:focus-visible {
  outline: 2px solid var(--rn-pine, #1b564b);
  outline-offset: 1px;
}
/* 성별을 묻는 순간 이 띠는 두 배로 길어진다. 좁은 화면에서는 왼쪽 글과
   오른쪽 단추가 서로 폭을 뺏어 「저장할까요?」가 넉 줄로 갈라졌다.
   그때는 위아래로 나눠 각자 온전한 폭을 준다. */
@media (max-width: 430px) {
  .rn-profile-offer:has(.rn-profile-offer__gender:not([hidden])) {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .rn-profile-offer:has(.rn-profile-offer__gender:not([hidden])) .rn-profile-offer__actions > * {
    flex: 1 1 0;
  }
}

/* ── 신뢰 명판 ──────────────────────────────────────────────
   문단으로 늘어놓던 것을 한 장의 명판으로 바꿨다. 계산으로 만든 값을 말하는
   자리라, 모눈 바탕에 위아래 굵은 선을 두르고 제목을 세로로 세운 옛 인쇄물의
   꼴을 빌렸다. 숫자에는 一·二·三을 매기고 아래에 인장을 찍는다 — 읽기 전에
   「이건 재 본 값이구나」가 먼저 전해진다. */
.rn-trust { padding-inline: 0; }
.rn-plate {
  margin-inline: auto;
  width: min(100%, 358px);
  padding: 15px 16px 13px;
  display: flex;
  gap: 14px;
  background: #ffffff;
  background-image:
    repeating-linear-gradient(to right, rgba(26,22,20,.045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(to bottom, rgba(26,22,20,.045) 0 1px, transparent 1px 22px);
  border-top: 2px solid var(--rn-ink, #1a1614);
  border-bottom: 2px solid var(--rn-ink, #1a1614);
}
/* 제목과 인장을 **한 덩이로 가운데** 세운다.
   위아래로 밀어 두었더니(space-between) 카드가 길어지면서 사이에 270px 짜리
   빈 자리가 생겼다. 원안은 카드가 짧아 그 배치가 맞았지만, 우리 글이 더 길다. */
.rn-plate__spine {
  flex: none;
  padding-right: 13px;
  border-right: 1px solid var(--rn-ink, #1a1614);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.rn-plate__spine h2 {
  margin: 0;
  writing-mode: vertical-rl;
  /* 한 줄로 세운다. 안 막으면 카드 높이에 맞춰 세 줄로 접혀서, 세로 제목이
     아니라 좁은 문단이 된다. */
  white-space: nowrap;
  font-family: "Gowun Batang", serif;
  font-weight: 700;
  /* 기둥을 채우는 크기다.
     20px 로 두면 글자 열한 자가 220px 인데 기둥은 430px 라, 가운데로 모아도
     위아래에 큰 빈자리가 남는다. 세로로 세운 제목은 기둥을 채워야 명판으로
     읽힌다. 열한 자 × 27px 이면 기둥 430px 를 거의 채운다. */
  font-size: 27px;
  line-height: 1.4;
  letter-spacing: .02em;
}
.rn-plate__spine h2 span { color: var(--rn-accent, #d13a14); }
.rn-plate__seal {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--rn-accent, #d13a14);
  border: 1.5px solid var(--rn-accent, #d13a14);
  font-family: "Song Myung", serif;
  font-size: 16px;
}
.rn-plate__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rn-plate__lede {
  margin: 1px 0 11px;
  color: #4b4643;
  font-size: 12px;
  line-height: 1.7;
  word-break: keep-all;
}
.rn-plate__fact { padding-top: 9px; border-top: 1px solid #ebe5e2; }
.rn-plate__fact:first-of-type { border-top-color: var(--rn-ink, #1a1614); }
.rn-plate__num {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: "Song Myung", serif;
}
.rn-plate__num i { flex: none; font-style: normal; font-size: 12px; color: #716966; }
.rn-plate__num b {
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.rn-plate__num em { font-style: normal; font-size: 16px; color: #4b4643; }
/* 설명은 **숫자 왼쪽 끝**에 맞춘다.
   一·二·三 표식과 같은 자리에서 시작하면 표식이 글에 파묻혀, 셋을 세고 있다는
   것이 안 보인다. 표식(12px) + 사이(8px) = 20px. */
.rn-plate .rn-plate__note {
  margin: 5px 0 10px;
  padding-left: 20px;
  color: #4b4643;
  font-size: 12px;
  line-height: 1.72;
  word-break: keep-all;
}
.rn-plate__foot {
  margin: auto 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--rn-ink, #1a1614);
  color: #716966;
  /* 원안은 11.5px 였다. 이 사이트에는 12px 하한이 있고 그 규칙이 맞다 —
     읽으라고 쓴 글이 안 읽히면 없는 것과 같다. */
  font-size: 12px;
  line-height: 1.65;
  word-break: keep-all;
}
/* 색 조각은 글의 첫 낱말처럼 줄 안에 둔다.
   옆에 세워 두면 45px 짜리 홈이 생겨서 남는 폭이 223px 로 줄고, 「계산 근거」가
   혼자 다음 줄로 떨어졌다. 안에 넣으면 글이 폭을 다 쓴다. */
.rn-plate__chips {
  display: inline-flex;
  gap: 3px;
  margin-right: 7px;
  vertical-align: 2px;
}
.rn-plate__chips i { width: 5px; height: 5px; display: block; }
.rn-plate__foot a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  /* 「계산 근거」가 「계산」과 「근거」로 갈라져 줄을 넘었다. 누를 것이 두
     조각으로 보이면 누를 것으로 안 읽힌다. */
  white-space: nowrap;
  border-bottom: 1px solid var(--rn-accent, #d13a14);
}
@media (max-width: 360px) {
  .rn-plate { gap: 11px; padding-inline: 13px; }
  .rn-plate__spine h2 { font-size: 21px; }
}

/* 「출생지 모름」을 제목 줄 오른쪽에 둔다.
   아래에 한 줄로 놓으면 바로 밑의 개인정보 동의 체크와 나란히 붙어 보여서,
   무엇에 대한 체크인지 헷갈린다. 「생시 모름」이 이미 같은 꼴이다. */
.rn-me-fieldset__label--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rn-me-fieldset__label--split .rn-time-unknown {
  margin: 0;
  color: var(--rn-text-2, #4a413d);
  font-size: 12px;
  letter-spacing: 0;
}
.rn-me-place-note {
  margin: 9px 0 0;
  color: #857c78;
  font-size: 12px;
  line-height: 1.6;
}

/* ── 구매내역 조회 · 오류 화면 ──────────────────────────────
   이 둘의 뼈대(`pay__*` · `card` · `field` · `btn` · `oops*`)도 `site.css` 에만
   있었다. 그 파일을 renovation 화면에서 빼면서 라벨과 입력칸이 한 줄에 뒤엉키고
   버튼이 글자 크기로 쪼그라들었다. 여기서 다시 쓴다. */
.rn-lookup-page .pay__main { padding: 0 20px 40px; }
.rn-lookup-page .pay__wrap { width: 100%; }
.rn-lookup-page .pay__head { padding: 30px 0 22px; text-align: center; }
.rn-lookup-page .pay__head h1 {
  margin: 14px 0 0;
  font: 700 26px/1.35 "Gowun Batang", serif;
  letter-spacing: -.02em;
}
.rn-lookup-page .pay__head p {
  margin: 9px 0 0;
  color: var(--rn-text-2);
  font-size: 14px;
  line-height: 1.75;
  word-break: keep-all;
}
.rn-lookup-page .seal {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--rn-accent);
  border-radius: 10px;
  font-family: "Song Myung", serif;
  font-size: 22px;
}
.rn-lookup-page .card {
  display: grid;
  gap: 16px;
  padding: 20px 18px;
  background: var(--rn-paper);
  border: 1px solid var(--rn-line);
  border-radius: var(--rn-radius);
}
/* 라벨·입력칸·설명이 위아래로 서야 한다. 한 줄에 흐르면 설명이 다음 칸의
   라벨처럼 읽힌다 — 실제로 그렇게 보였다. */
.rn-lookup-page .field { display: grid; gap: 7px; }
.rn-lookup-page .field__label { font-size: 13.5px; font-weight: 600; }
.rn-lookup-page .field__hint {
  color: var(--rn-text-3);
  font-size: 12px;
  line-height: 1.6;
  word-break: keep-all;
}
.rn-lookup-page .input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  color: var(--rn-text);
  background: var(--rn-paper-soft);
  border: 1px solid var(--rn-line);
  border-radius: 10px;
  font-size: 15px;
}
.rn-lookup-page .input:focus-visible { outline: 2px solid var(--rn-pine); outline-offset: 1px; }
.rn-lookup-page .btn {
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.rn-lookup-page .btn--accent { color: #fff; background: var(--rn-accent); }
.rn-lookup-page .btn--block { width: 100%; }

/* 오류 화면 — 홈으로 돌아갈 길이 보여야 하는 자리다. */
.oops {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background: var(--rn-bg, #f6f2f0);
}
.oops__card {
  width: min(100%, 390px);
  padding: 30px 22px 26px;
  text-align: center;
  background: var(--rn-paper, #fff);
  border: 1px solid var(--rn-line, #e4dedb);
  border-radius: var(--rn-radius, 14px);
}
.oops__character { width: 88px; height: auto; margin: 0 auto 14px; display: block; }
.oops__title { margin: 8px 0 0; font: 700 23px/1.4 "Gowun Batang", serif; }
.oops__lede {
  margin: 10px 0 0;
  color: var(--rn-text-2);
  font-size: 14px;
  line-height: 1.75;
  word-break: keep-all;
}
.oops__actions { margin-top: 20px; display: grid; gap: 8px; }
.oops__actions .btn {
  min-height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.oops__actions .btn--accent { color: #fff; background: var(--rn-accent); }
.oops__actions .btn--paper {
  color: var(--rn-text);
  background: var(--rn-paper);
  border-color: var(--rn-line-strong);
}
.oops__id {
  margin: 16px 0 0;
  color: var(--rn-text-3);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
}

/* ── 생년월일시 한 벌 ─────────────────────────────────────────────────────
   화면마다 따로 짜던 세 벌을 하나로 합쳤습니다. 여기서는 두 가지만 합니다 —
   촘촘하게 조이고, 두 사람일 때 누구 것인지 덩어리로 보이게 합니다. */

/* `rn-me-birth` 는 테두리를 지운 판이라 무료 「나」에서만 맞았습니다. 주문
   폼처럼 여러 덩이가 이어지는 화면에서는 각 덩이가 서 있어야 합니다. */
.rn-me-birth.rn-birth-card {
  padding: 16px 16px 18px;
  border: 1px solid var(--rn-line);
  border-radius: 14px;
  background: #ffffff;
}
.rn-birth-card + .rn-birth-card { margin-top: 14px; }

/* 누구 것인지 알려 주는 이름표. 칸 이름이 아니라 덩어리에 붙어야 나란히 놓인
   같은 모양의 칸들이 사람 단위로 갈립니다. */
.rn-birth-card__who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.rn-birth-card__who > span {
  display: inline-flex;
  align-items: center;
  min-width: 34px;
  height: 24px;
  padding: 0 10px;
  justify-content: center;
  border-radius: 999px;
  background: var(--rn-accent-wash);
  color: var(--rn-accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.rn-birth-card__who::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rn-line);
}

/* 요밀조밀하게. 덩이 사이 22px 는 한 화면에 세 덩이가 들어가는 폼에서 너무
   벌어집니다 — 스크롤이 길어지면 아래 것을 아예 못 봅니다. */
.rn-me-birth .rn-me-fieldset + .rn-me-fieldset { margin-top: 16px; }
.rn-me-birth .rn-me-fieldset__label { margin-bottom: 7px; }
.rn-me-birth .rn-birth-card__name { margin-bottom: 14px; }
.rn-me-birth .rn-me-place-note,
.rn-me-birth .rn-free-time-help { margin-top: 6px; }

/* ── 내비의 이름표 ────────────────────────────────────────────────────────
   지금 누구로 보고 있는지가 어느 화면에서든 보여야 합니다. 메뉴를 열어야만
   알 수 있으면, 계정이 여럿인 사람은 남의 결과를 자기 것으로 읽습니다. */
.rn-nav__who {
  margin-left: auto;
  margin-right: 8px;
  padding: 6px 11px;
  border: 1px solid var(--rn-line);
  border-radius: 999px;
  color: var(--rn-text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 메뉴 버튼도 `margin-left:auto` 를 갖고 있습니다. 둘 다 밀면 남은 자리를
   나눠 가져서 이름표와 버튼 사이가 벌어집니다. 이름표가 보일 때만 버튼의
   밀기를 끕니다 — 숨어 있을 때는 버튼이 그대로 오른쪽 끝을 잡습니다. */
.rn-nav__who:not([hidden]) + .rn-nav__menu { margin-left: 0; }
.rn-nav--dark .rn-nav__who {
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .82);
}

/* ── 풀이함 ───────────────────────────────────────────────────────────────
   「지금 이 계정에 무엇이 있는가」를 머리말에서 끝내고, 목록은 사람별로 묶습니다.
   한 줄로 늘어놓으면 나·엄마·연인 것이 섞여서 길어질수록 못 찾습니다. */

/* 제목은 공통 머리말이 맡는다. 여기 남는 것은 「지금 이 계정에 무엇이
   있는가」 — 누구 것인지 한 줄과 세 숫자다. */
.rn-library-head {
  margin: 0 0 18px;
  padding: 16px 17px 17px;
  background: #fffaf4;
  color: var(--rn-text);
  border: 1px solid #e5d9cc;
  border-radius: 16px;
}
.rn-library-head__who {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rn-text-3);
  word-break: keep-all;
}

.rn-library-stats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
/* 세 칸은 이제 눌립니다 — 그 숫자에 해당하는 것만 골라 봅니다. 누를 수 있는
   것은 누를 수 있게 보여야 하므로, 지금 보고 있는 칸은 밝은 바탕으로 세우고
   위에 밑줄 한 줄을 얹습니다. */
.rn-library-stats > a {
  min-width: 0;
  padding: 11px 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid #e5d9cc;
  border-radius: 10px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background .15s ease, border-color .15s ease;
}
.rn-library-stats > a:hover { background: #fff; border-color: var(--rn-line-strong); }
.rn-library-stats > a.is-kept.is-on { background: #fff; border-color: #bdb3ad; }
.rn-library-stats > a.is-open.is-on { background: #eef7f3; border-color: #b7d6cc; }
.rn-library-stats > a.is-new.is-on { background: #fff0eb; border-color: #efc8bd; }
.rn-library-stats > a.is-on::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: currentColor;
}
.rn-library-stats > a.is-kept.is-on::before { background: var(--rn-text-2); }
.rn-library-stats > a.is-open.is-on::before { background: var(--rn-pine); }
.rn-library-stats > a.is-new.is-on::before { background: var(--rn-accent); }
.rn-library-stats > a:focus-visible {
  outline: 2px solid var(--rn-accent);
  outline-offset: -2px;
}
.rn-library-stats b { font-size: 23px; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 세 숫자는 세는 대상이 다릅니다. 색이 같으면 눈이 셋을 한 덩이로 읽습니다.
   보관 중은 전체라 바탕색 그대로 두고, 열려 있는 것은 소나무색, 아직 손대지
   않은 것은 카드의 「아직 안 읽음」 배지와 같은 주홍으로 맞췄습니다. */
.rn-library-stats .is-kept b { color: var(--rn-text); }
.rn-library-stats .is-open b { color: var(--rn-pine); }
.rn-library-stats .is-new  b { color: var(--rn-accent-dark); }
.rn-library-stats .is-open small { color: var(--rn-pine); }
.rn-library-stats .is-new  small { color: var(--rn-accent-dark); }
/* 셀 수 0이면 색을 뺀다 — 없는 것을 강조할 이유가 없습니다. */
.rn-library-stats a.is-zero b,
.rn-library-stats a.is-zero small { color: #aaa29e; }
.rn-library-stats small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--rn-text-3);
  /* 한국어는 어절 단위로 끊어야 「지금 읽을 수 / 있음」처럼 갈리지 않는다. */
  word-break: keep-all;
  text-align: center;
}

.rn-library-intro { margin-bottom: 6px; }
.rn-library-intro > div { display: flex; align-items: center; gap: 10px; }
.rn-library-intro h2 { margin: 0; font-size: 20px; }
.rn-library-intro__count {
  padding: 4px 9px;
  background: var(--rn-paper-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rn-text-2);
}
.rn-library-intro p {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rn-text-3);
}

/* 사람 묶음 */
/* ── 풀이함 선반 ──────────────────────────────────────────────────────
   갈래마다 제 색을 준다.

   예전에는 흰 상자가 흰 바탕 위에 줄지어 있었다. 열 장이 쌓이면 어느 것이
   어느 것인지 제목을 한 줄씩 읽어야 했다. 색은 장식이 아니라 **찾는 시간을
   줄이는 표식**이다. */
/* 풀이함은 최신순 한 줄이다.
   갈래로 묶어 두었었다. 그런데 갈래는 산 사람이 찾는 기준이 아니다 — 찾는
   것은 언제나 방금 산 것이거나 아직 안 읽은 것이고, 그 둘은 머리말의 숫자로
   이미 골라 볼 수 있다. 갈래로 나누면 방금 산 것이 세 번째 묶음 안에 앉는다.

   색은 카드마다 들고 간다. 갈래 머리가 없어져도 「짧은 풀이는 붉은 쪽」이라는
   표식은 남아, 스크롤만 해도 눈이 먼저 간다. 색은 새로 짓지 않고 상품이 이미
   쓰는 것을 그대로 가져온다 — 질문은 소나무, 종합은 먹, 짧은 풀이는 주(朱). */
.rn-library-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.rn-library-card { --shelf: var(--rn-text-3); --shelf-wash: #f4f1ef; }
.rn-library-card--ask  { --shelf: var(--rn-pine); --shelf-wash: #eef4f2; }
.rn-library-card--full { --shelf: #30506f; --shelf-wash: #eef1f5; }
.rn-library-card--mini { --shelf: var(--rn-accent-dark); --shelf-wash: #f7efec; }

/* 풀이 한 장 — 그림이 왼쪽, 글이 오른쪽.
   바탕은 흰색이 아니라 그 갈래 색을 아주 옅게 깐 것이다. 흰 화면 위의 흰
   상자는 테두리 한 줄로만 구분되는데, 그 한 줄은 목록이 길어지면 사라진다. */
.rn-library-card {
  position: relative;
  overflow: hidden;
  padding: 13px 14px;
  background: var(--shelf-wash);
  border: 1px solid var(--rn-line);
  border-radius: 14px;
}
.rn-library-card.has-thumb {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}
.rn-library-card__thumb {
  overflow: hidden;
  border-radius: 10px;
  /* 그림이 없거나 늦게 와도 자리가 무너지지 않게 비율을 먼저 잡는다. */
  aspect-ratio: 380 / 286;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(31, 24, 20, .12);
}
.rn-library-card__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rn-library-card__body { min-width: 0; }

.rn-library-card.is-waiting {
  /* 아직 못 읽는 것은 한 걸음 물러선다. 색을 빼면 읽을 수 있는 것이 먼저 보인다. */
  background: var(--rn-paper-soft);
  border-style: dashed;
}
.rn-library-card.is-waiting .rn-library-card__thumb { filter: grayscale(.75) opacity(.72); }
.rn-library-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--rn-text-3);
}
.rn-library-card__top > span:first-child { flex: none; white-space: nowrap; }
.rn-library-card__new {
  flex: none;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rn-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.rn-library-card__pill {
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--shelf);
  border: 1px solid var(--rn-line);
  font-size: 12px;
  font-weight: 600;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rn-library-card h3 {
  margin: 7px 0 0;
  font-size: 16px;
  line-height: 1.45;
  text-wrap: balance;
}
.rn-library-card__who { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.rn-library-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: #ffffff;
  border: 1px solid var(--rn-line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--rn-text-2);
  font-variant-numeric: tabular-nums;
}
.rn-library-chip b { font-weight: 700; }
.rn-library-chip--me b { color: var(--rn-green); }
.rn-library-chip--you b { color: var(--rn-accent-dark); }

/* 좁은 화면에서는 그림을 조금 줄인다. 82px 를 그대로 두면 제목이 두 자씩
   끊긴다. */
@media (max-width: 370px) {
  .rn-library-card.has-thumb { grid-template-columns: 66px minmax(0, 1fr); gap: 11px; }
  .rn-library-card { padding: 12px; }
}

.rn-library-card__foot {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(31, 24, 20, .10);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rn-library-card__foot > b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rn-text-2);
  font-variant-numeric: tabular-nums;
}
.rn-library-card__foot > b.is-soon { color: var(--rn-accent-dark); }
/* `.rn-body a { color: inherit }` 가 (0,1,1) 이라 클래스 하나로는 진다.
   요소까지 붙여 같은 무게로 맞추고, 뒤에 오므로 이긴다. */
a.rn-library-card__cta {
  margin-left: auto;
  padding: 9px 15px;
  border-radius: 9px;
  /* 「바로 읽기」도 그 갈래의 색을 입는다. 카드 안에서 가장 진한 것이 눌러야
     할 자리이고, 그 색이 머리의 도장과 같으면 어느 선반의 것인지도 함께
     말한다. */
  background: var(--shelf, var(--rn-ink-deep));
  color: #faf8f7;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.rn-library-card.is-waiting a.rn-library-card__cta {
  background: transparent;
  border: 1px solid var(--rn-line);
  color: var(--rn-text-2);
}

/* 더 물어보고 싶다면 */
.rn-library-more {
  margin: 26px 0 0;
  padding: 19px;
  background: var(--rn-paper-soft);
  border: 1px solid var(--rn-line);
  border-radius: 14px;
}
.rn-library-more h2 { margin: 0; font-size: 20px; }
.rn-library-more > p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rn-text-3);
}
.rn-library-more > div { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rn-library-more a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  background: #ffffff;
  border: 1px solid var(--rn-line);
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
}
.rn-library-more a b { font-size: 15px; font-weight: 700; }
.rn-library-more a span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8f1ee;
  color: var(--rn-green);
  font-size: 12px;
  font-weight: 700;
}
.rn-library-more a i {
  margin-left: auto;
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  color: var(--rn-text-3);
}
.rn-library-chip i { font-style: normal; color: var(--rn-text-3); }

/* ── 계정 화면의 글자 계층 ────────────────────────────────────────────────
   풀이함·구매·사주 정보·설정이 한 탭 줄로 묶여 있는데, 화면마다 같은 구실을
   하는 글자의 크기가 달랐습니다. 행 이름만 해도 세 가지였습니다 —
   정의 목록 13px, 로그인 수단 14px, 알림 토글 16px. 탭을 옮길 때마다 모양이
   달라지면 같은 화면 안에 있다는 느낌이 사라집니다.

   여기서 한 벌로 못 박습니다.
     화면 제목 26  ·  묶음 제목 20  ·  행 이름 14(600)  ·  행 값 14
     보조 설명 13  ·  행 안의 동작 13(700)
   최소 12px 바닥은 그대로 지킵니다. */

.rn-account-page .rn-account-head { padding: 22px 2px 18px; }
.rn-account-page .rn-account-head h1 { font-size: 26px; line-height: 1.3; }
.rn-account-page .rn-account-head p { font-size: 14px; line-height: 1.6; }

.rn-account-page .rn-account-panel { padding: 18px; }
.rn-account-page .rn-account-panel h2 { margin-bottom: 14px; font-size: 20px; }
.rn-account-page .rn-account-panel__head h2 { margin-bottom: 0; }

/* 행 — 이름과 값 */
.rn-account-page .rn-account-definition dt { font-size: 14px; font-weight: 600; color: var(--rn-text-3); }
.rn-account-page .rn-account-definition dd { font-size: 14px; line-height: 1.55; }
/* 행 이름만. 같은 자리의 동작·상태까지 잡으면 그쪽이 다시 커집니다. */
.rn-account-page .rn-login-method > span:not(.rn-login-method__action) {
  font-size: 14px;
  font-weight: 600;
}

/* 행 안의 상태와 동작 */
.rn-account-page .rn-login-method b { font-size: 13px; font-weight: 500; }
.rn-account-page .rn-login-method b.is-connected { font-weight: 700; }
.rn-account-page .rn-login-method .rn-login-method__action {
  font-size: 13px;
  font-weight: 700;
}
/* 보조 설명 */
.rn-account-page .rn-account-muted,
.rn-account-page .rn-field label { font-size: 13px; }

/* 화면 아래쪽 작은 동작들. 로그아웃만 16px 로 튀어 있었습니다. */
.rn-account-page .rn-text-button { font-size: 14px; }

/* 설정 화면의 이메일 아이콘이 검은 사각형으로 나왔습니다.
   봉투는 선으로 그린 그림인데 칠하는 규칙이 없어 면이 다 찼습니다.
   로그인 버튼 쪽에는 같은 규칙이 이미 있고, 여기만 빠져 있었습니다. */
.rn-login-method__icon--email svg,
.rn-login-method__icon:not([class*="--"]) svg {
  fill: none;
  stroke: var(--rn-text-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 계정 관리의 세 항목 ──────────────────────────────────────────────────
   로그아웃·비밀번호 변경·회원 탈퇴가 서로 다른 물건으로 그려져 있었습니다.
   앞의 둘은 밑줄 링크(13px/14px)인데 회원 탈퇴만 높이 46px 짜리 테두리 버튼이라,
   한 줄에 놓으니 크기도 밑줄도 세로 위치도 다 어긋났습니다.

   셋 다 같은 일을 합니다 — 계정에 대한 동작을 글자로 고르는 것. 같은 꼴로
   세우고, 되돌리기 어려운 「회원 탈퇴」만 색으로 구분합니다. */
.rn-account-security > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.rn-account-security > div > * {
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--rn-text-2) !important;
}
.rn-account-security > div > .rn-withdraw-link {
  /* 되돌릴 수 없는 자리는 색으로만 구분합니다. 크기를 키우면 가장 눌리면
     안 되는 것이 가장 크게 보입니다. */
  color: var(--rn-danger) !important;
}

/* ── 입력 상자 한 벌 ──────────────────────────────────────────────────────
   묻는 것이 사주든, 결과 받을 곳이든, 질문이든 같은 상자에 담깁니다. 화면마다
   상자 모양이 다르면 사람은 새 화면마다 「여기는 뭘 넣는 데지」를 다시 읽습니다.

   일부러 촘촘합니다. 라벨을 칸 위에 얹으면 줄마다 높이가 두 배가 되고, 넷만
   물어도 화면 한 장을 넘깁니다. 라벨은 왼쪽 60px 열에 세우고 칸을 그 오른쪽에
   붙여서 네 줄이 한눈에 들어오게 했습니다. */

.rn-bcard {
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--rn-paper);
  border: 1px solid #cfc7c3;
  border-radius: 14px;
  overflow: hidden;
}
.rn-bcard[hidden] { display: none !important; }
.rn-bcard + .rn-bcard { margin-top: 10px; }
/* `legend` 은 이름표로만 남깁니다 — 보이는 제목은 머리띠가 맡습니다. */
.rn-bcard > legend {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.rn-bcard__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: var(--rn-paper-soft);
  border-bottom: 1px solid var(--rn-line);
}
.rn-bcard__head > b {
  min-width: 0;
  font: 700 15px/1.35 "Gowun Batang", serif;
  letter-spacing: -.01em;
  word-break: keep-all;
}
.rn-bcard__head > small {
  min-width: 0;
  /* 12px 본문이라 4.5:1 이 필요합니다. 시안의 #948b87 은 흰 바탕에서 3.3:1
     이라 기준 미달이었습니다 — 토큰(5.36:1)으로 올립니다. */
  color: var(--rn-text-3);
  font-size: 12px;
  word-break: keep-all;
}
/* 누구 것인지는 칸 이름이 아니라 상자에 붙습니다. 둘의 사주를 볼 때 같은 모양의
   칸 여덟 개가 나란히 서면 어디까지가 내 것인지 눈으로 안 갈립니다. */
.rn-bcard__who {
  flex: none;
  padding: 3px 9px;
  background: var(--rn-ink);
  color: #faf8f7;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
}
.rn-bcard__head .rn-last-birth {
  margin: 0 0 0 auto;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--rn-text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rn-bcard__head .rn-last-birth[hidden] { display: none; }

.rn-bcard__body {
  min-width: 0;
  padding: 12px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rn-bcard__row {
  min-width: 0;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
/* 긴 글을 받는 칸만 라벨을 위에 얹습니다. 60px 열 옆에 다섯 줄짜리 칸을
   붙이면 라벨만 허공에 뜨고 칸 폭도 그만큼 좁아집니다. */
.rn-bcard__row--stack { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.rn-bcard__label {
  color: var(--rn-text-3);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  word-break: keep-all;
}
.rn-bcard__help {
  margin: 0;
  color: var(--rn-text-3);
  font-size: 12px;
  line-height: 1.55;
  word-break: keep-all;
}
.rn-bcard__help[hidden] { display: none; }

/* ── 칸 ── */
.rn-bcard__in {
  width: 100%;
  min-height: 42px;
  height: 42px;
  padding: 0 11px;
  background: var(--rn-paper);
  color: var(--rn-text);
  border: 1px solid #cfc7c3;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.rn-bcard__in::placeholder { color: #8b817d; }
.rn-bcard__in:focus {
  border-color: var(--rn-pine-bright);
  outline: 2px solid rgba(47, 125, 108, .16);
  outline-offset: 0;
}
.rn-bcard__in:read-only,
.rn-bcard__in:disabled { background: var(--rn-hanji-deep); color: var(--rn-text-2); }
.rn-bcard__area {
  height: auto;
  min-height: 60px;
  padding: 10px 11px;
  line-height: 1.7;
  resize: vertical;
}
.rn-bcard__area--tall { min-height: 116px; }
.rn-bcard__act { margin-top: 3px; }

.rn-bcard__sel { position: relative; display: block; min-width: 0; }
.rn-bcard__sel > select {
  width: 100%;
  height: 42px;
  padding: 0 24px 0 10px;
  background: var(--rn-paper);
  color: var(--rn-text);
  border: 1px solid #cfc7c3;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.rn-bcard__sel > select:focus {
  border-color: var(--rn-pine-bright);
  outline: 2px solid rgba(47, 125, 108, .16);
}
.rn-bcard__sel > select:disabled { background: var(--rn-hanji-deep); color: #948b87; cursor: default; }
/* ▾ 는 그림입니다 — 글자로 두면 기기마다 다르게 생깁니다. */
.rn-bcard__sel > i {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 0; height: 0;
  margin-top: -2px;
  border: 4px solid transparent;
  border-top-color: #948b87;
  pointer-events: none;
}

/* ── 줄 안의 묶음 ── */
.rn-bcard__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rn-bcard__seg > label {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rn-paper);
  color: var(--rn-text-2);
  border: 1px solid #cfc7c3;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  word-break: keep-all;
}
.rn-bcard__seg > label > input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rn-bcard__seg > label:has(input:checked) {
  background: #edf5f2;
  color: var(--rn-pine);
  border-color: var(--rn-pine);
  font-weight: 700;
}
.rn-bcard__seg > label:has(input:focus-visible) { outline: 3px solid rgba(47,125,108,.28); outline-offset: 2px; }

.rn-bcard__when { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 6px; }
.rn-bcard__clock { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; }
.rn-bcard__checks { display: flex; align-items: center; gap: 12px; }
.rn-bcard__place { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: center; gap: 6px; }
.rn-bcard__sel--wide { grid-column: 1 / -1; }

.rn-bcard__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rn-text-2);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.rn-bcard__check[hidden] { display: none; }
.rn-bcard__check > input {
  width: 15px; height: 15px;
  margin: 0;
  flex: none;
  accent-color: var(--rn-pine);
}

/* ── 바닥 띠 — 그 자리에서 알아야 할 것 ── */
.rn-bcard__note {
  padding: 11px 13px;
  background: #f4f7f5;
  border-top: 1px solid #dfe8e4;
}
.rn-bcard__note > b {
  display: block;
  color: var(--rn-pine);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}
.rn-bcard__note > span {
  display: block;
  margin-top: 3px;
  color: var(--rn-text-2);
  font-size: 12px;
  line-height: 1.55;
  word-break: keep-all;
}
.rn-bcard__note > b + span { margin-top: 4px; }

/* 출생지 모름을 켜면 시·도·시·군·구가 흐려집니다. */
.rn-bcard:has(input[name$="city_unknown"]:checked) .rn-bcard__place > .rn-bcard__sel { opacity: .42; }

/* 상자들 사이는 10px 입니다. 폼 전체가 22px 로 벌어져 있으면 상자 하나가
   화면 하나가 되어 다음 칸이 안 보입니다. */
.rn-form:has(.rn-bcard) { gap: 12px; }

/* 좁은 화면 — 60px 라벨 열은 「태어난 곳」이 딱 들어가는 폭입니다. 360px 에서
   시·도/시·군·구 두 칸에 모름까지 한 줄에 넣으면 글자가 잘립니다. */
@media (max-width: 380px) {
  .rn-bcard__body { padding: 11px 11px 12px; }
  .rn-bcard__row { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; }
  .rn-bcard__place { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .rn-bcard__place > .rn-bcard__check { grid-column: 1 / -1; }
  .rn-bcard__clock { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
  .rn-bcard__checks { gap: 9px; }
}

/* 상자를 또 두르지 않는 자리 — 로그인은 이미 접힘 상자 안이라, 칸 생김새만
   같게 하고 테두리는 겹치지 않게 둡니다. */
.rn-bcard__body--bare { padding: 0; gap: 10px; }

/* `data-rn-profile-fields` 는 프로필 스크립트가 잡는 자리라 남겨 둡니다. 예전
   격자(12px)가 그대로 걸려 있으면 카드 안 줄 간격이 9px 과 어긋납니다. */
.rn-bcard__body > [data-rn-profile-fields] {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rn-bcard__body > [data-rn-profile-fields][hidden] { display: none; }

/* ── 좁은 자리에 놓인 상자 ────────────────────────────────────────────────
   같은 상자가 주문 화면(346px)에도, 계정 패널 속(258px)에도 놓입니다. 패널은
   여백이 세 겹(14+18+19)이라 양쪽에서 51px 씩 먹혔고, 「시·군·구」가 잘렸습니다.

   화면 너비가 아니라 **상자 너비**로 접습니다 — 같은 폰이라도 상자가 놓인
   자리에 따라 남는 폭이 다릅니다. */
.rn-bcard { container-type: inline-size; }

@container (max-width: 340px) {
  /* 「모름」을 아랫줄로 내리면 시·도와 시·군·구가 반씩 온전히 갖습니다. */
  .rn-bcard__place { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; }
  .rn-bcard__place > .rn-bcard__check { grid-column: 1 / -1; }
}
@container (max-width: 300px) {
  .rn-bcard__row { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
  .rn-bcard__when { grid-template-columns: 66px minmax(0, 1fr); }
  .rn-bcard__clock { grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
  .rn-bcard__checks { gap: 9px; }
}

/* 상자가 스스로 여백을 갖고 있으니, 감싼 패널이 또 밀어 넣을 이유가 없습니다. */
.rn-profile-editor__body { padding-inline: 12px; }
.rn-account-page .rn-account-panel.rn-profile-editor { padding-inline: 12px; }

/* ── 빠진 칸 ──────────────────────────────────────────────────────────────
   「결제하기」를 눌렀는데 화면이 그대로면 사람은 버튼이 고장 났다고 봅니다.
   빠진 줄을 눈에 띄게 하고, 무슨 칸인지는 폼 아래 한 줄로 적습니다. */
.rn-bcard__row.is-missing > .rn-bcard__label { color: var(--rn-danger); font-weight: 700; }
.rn-bcard__row.is-missing :is(input, select, textarea):not([type="radio"]):not([type="checkbox"]),
.rn-bcard__row.is-missing .rn-bcard__seg > label {
  border-color: var(--rn-danger);
  background: #fff7f5;
}
.rn-bcard__row.is-missing { scroll-margin-top: 80px; }
.rn-bcard__row.is-missing:focus-visible,
.rn-bcard__row.is-missing:focus { outline: 2px solid var(--rn-danger); outline-offset: 3px; border-radius: 8px; }
label.rn-check.is-missing { outline: 2px solid var(--rn-danger); outline-offset: 3px; border-radius: 8px; }
label.rn-check.is-missing > span { color: var(--rn-danger); }
/* 빠진 칸을 알리는 한 줄. 비어 있을 때는 자리를 차지하지 않습니다. */
.rn-form [data-error]:not(:empty) {
  margin: 2px 0 0;
  padding: 10px 12px;
  background: var(--rn-accent-wash);
  border-left: 3px solid var(--rn-danger);
  border-radius: 0 8px 8px 0;
  color: var(--rn-accent-dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

/* ── 메뉴바 ───────────────────────────────────────────────────────────────
   내비의 이름표를 알약 하나로 묶습니다. 이 서비스에서 계정을 가르는 것은
   이름이 아니라 사주라서, 일간 캐릭터를 이름 앞에 세웁니다 — 같은 이름으로
   여러 사주를 저장해 두는 사람이 있고, 그림 하나면 「지금 누구 걸로 보고
   있나」가 글자보다 빨리 읽힙니다. */
.rn-nav__who {
  margin-left: auto;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  background: var(--rn-paper-soft);
  border: 1px solid var(--rn-line);
  border-radius: 999px;
  color: var(--rn-text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
/* 캐릭터는 <img> 가 아니라 스타일시트가 칠합니다. 장을 넘길 때마다 새 <img>
   를 만들면 브라우저가 그림을 꺼내 디코딩할 때까지 이 동그라미만 떠 있고,
   그 한 박자가 「캐릭터가 사라졌다 나타나는」 것이었습니다. 그림은
   `.rn-nav__face--<일간>` 이 얹습니다(파일 끝의 생성 블록). */
.rn-nav__face {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
  background-color: #f4ece4;
  background-repeat: no-repeat;
  background-size: cover;
  /* 캐릭터 그림은 전신이라, 가운데를 잡으면 얼굴이 아니라 몸통이 들어옵니다. */
  background-position: center 22%;
  border-radius: 999px;
}
/* 안 읽은 풀이가 있다는 표시. 숫자는 메뉴 안에서 보여 줍니다 — 내비는 좁아서
   숫자까지 넣으면 이름이 밀립니다. */
.rn-nav__dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--rn-accent);
  border-radius: 999px;
}
.rn-nav--dark .rn-nav__who { background: rgba(255, 255, 255, .08); }
/* `display` 를 주는 순간 `[hidden]` 의 기본 규칙을 이깁니다. 로그인하기 전에는
   서버가 이 자리를 `hidden` 으로 내보내는데, 그대로 두면 **빈 회색 알약**이
   모든 로그아웃 화면 맨 위에 떠 있습니다. 실제로 그랬습니다. */
.rn-nav__who[hidden] { display: none; }

/* ── 메뉴 서랍의 머리 ───────────────────────────────────────────────────
   먹지색으로 둡니다. 이 서랍에서 가장 먼저 답해야 하는 것이 「지금 누구로
   들어와 있나」인데, 흰 바탕에 글자만 있으면 그게 아래 목록에 묻힙니다. */
.rn-menu-head {
  position: relative;
  flex: none;
  padding: 12px 18px 20px;
  background: var(--rn-ink);
  color: #faf8f7;
  overflow: hidden;
}
.rn-menu-head__glow {
  position: absolute;
  right: -26px; top: -30px;
  width: 150px; height: 150px;
  background: rgba(255, 255, 255, .045);
  border-radius: 50%;
}
.rn-menu-head__seal {
  position: absolute;
  right: 14px; top: 8px;
  color: rgba(247, 134, 104, .14);
  font: 400 74px/1 "Song Myung", "Gowun Batang", serif;
}
.rn-menu-head__bar { position: relative; display: flex; align-items: center; gap: 10px; }
.rn-menu-head__bar strong { font: 700 15px/1.4 "Gowun Batang", serif; letter-spacing: .02em; }
.rn-menu-head__close {
  margin-left: auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .08);
  border: 0; border-radius: 999px;
  color: #faf8f7;
  cursor: pointer;
}
.rn-menu-head__close:hover { background: rgba(255, 255, 255, .16); }
.rn-menu-head__close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.rn-menu-head__body { position: relative; }
.rn-menu-head__who {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}
.rn-menu-head__who--guest { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.rn-menu-head__who--guest b { font: 700 18px/1.35 "Gowun Batang", serif; }
.rn-menu-head__who--guest small { color: #a89f9b; font-size: 12.5px; line-height: 1.6; }
.rn-menu-head__face {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: #3a2c26;
  border: 1px solid rgba(247, 134, 104, .45);
  border-radius: 14px;
  overflow: hidden;
}
.rn-menu-head__face img { width: 52px; height: 52px; object-fit: contain; object-position: bottom; }
.rn-menu-head__face--empty { color: rgba(247, 134, 104, .6); font: 400 26px/1 "Song Myung", serif; }
.rn-menu-head__name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rn-menu-head__name b {
  font: 700 21px/1.3 "Gowun Batang", serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rn-menu-head__name small {
  color: #a89f9b;
  font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 메인 사주 — 「지금 어느 사주로 보고 있나」. 주문 화면이 이걸로 칸을 채웁니다. */
.rn-menu-main {
  position: relative;
  margin-top: 14px;
  padding: 12px 13px;
  display: block;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
a.rn-menu-main:hover { background: rgba(255, 255, 255, .1); }
.rn-menu-main__top { display: flex; align-items: center; gap: 8px; }
.rn-menu-main__tag {
  flex: none;
  padding: 3px 8px;
  background: var(--rn-accent);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.rn-menu-main__top b {
  min-width: 0;
  font: 700 14px/1.4 "Gowun Batang", serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rn-menu-main__swap {
  margin-left: auto;
  flex: none;
  color: var(--rn-accent-on-ink);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.rn-menu-main__swap:hover { text-decoration: underline; text-underline-offset: 3px; }
.rn-menu-main__birth {
  margin: 9px 0 0;
  color: #c0b8b4;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.rn-menu-main__stem {
  margin-top: 9px;
  padding-top: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.rn-menu-main__hanja { color: var(--rn-accent-on-ink); font: 400 15px/1 "Song Myung", serif; }
.rn-menu-main__stem b { color: #faf8f7; font-size: 13px; font-weight: 700; }
.rn-menu-main__stem small { color: #a89f9b; font-size: 12px; }

/* ── 메뉴 줄 ─────────────────────────────────────────────────────────── */
.rn-menu-links { display: grid; gap: 3px; }
.rn-menu-links .rn-menu-link {
  min-height: 46px;
  padding: 0 11px 0 8px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: var(--rn-paper);
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--rn-text);
  text-decoration: none;
}
.rn-menu-links .rn-menu-link.is-primary { background: var(--rn-paper-soft); border-color: var(--rn-line); }
.rn-menu-links .rn-menu-link:hover { background: var(--rn-paper-soft); border-color: var(--rn-line); }
.rn-menu-links .rn-menu-link::after { content: none; }
.rn-menu-link__icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--rn-paper-soft);
  border: 1px solid var(--rn-hanji-line);
  border-radius: 7px;
  color: var(--rn-text-3);
}
.rn-menu-link.is-primary .rn-menu-link__icon { color: var(--rn-accent-dark); border-color: #efd8d0; }
.rn-menu-link__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rn-menu-link__text { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.rn-menu-links .rn-menu-link__text b { font-size: 14px; font-weight: 700; line-height: 1.4; }
.rn-menu-link__badge {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: grid; place-items: center;
  background: var(--rn-accent);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.rn-menu-link__go { color: var(--rn-line-strong); font-size: 17px; font-style: normal; }

.rn-menu-logout {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--rn-paper);
  border: 1px solid #d8d1cd;
  border-radius: 9px;
  color: var(--rn-text-2);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.rn-menu-logout:hover { background: var(--rn-paper-soft); }
.rn-menu-logout svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rn-menu-keep { margin: 8px 0 0; color: #948b87; font-size: 12px; line-height: 1.6; text-align: center; }

/* 서랍은 오른쪽에 꽉 차게 섭니다.
   떠 있는 카드였을 때는 뒤 화면이 위아래로 비쳐서, 「메뉴를 열었다」가 아니라
   「뭔가 떴다」로 읽혔습니다. 시안대로 오른쪽에서 밀려 나오게 두면 어디서
   왔는지가 분명하고, 먹지색 머리도 화면 끝까지 이어집니다. */
.rn-menu-sheet {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(384px, 100vw);
  max-height: none;
  border-width: 0 0 0 1px;
  border-color: #d8d1cd;
  border-radius: 0;
  box-shadow: -22px 0 56px rgba(34, 24, 20, .24);
  opacity: 1;
  transform: translateX(100%);
  transition: transform .24s ease;
}
.rn-menu-layer.is-open .rn-menu-sheet { transform: translateX(0); }
.rn-menu-backdrop { background: rgba(26, 22, 20, .34); backdrop-filter: blur(1.5px); }
/* 서랍의 위쪽은 먹지 머리라, 그 안쪽 여백은 머리가 스스로 갖습니다. */
.rn-menu-sheet__scroll { padding: 14px 14px 16px; }

@media (prefers-reduced-motion: reduce) {
  .rn-menu-sheet { transition: none; }
}

/* ── 지난번에 쓴 로그인 수단 ───────────────────────────────────────────────
   「어느 걸로 가입했더라」가 계정이 갈리는 가장 흔한 원인입니다. 재방문의
   대부분은 같은 기기라, 이 표 하나가 사고의 대부분을 미리 없앱니다.

   버튼 안에 조용히 얹습니다 — 색을 새로 쓰지 않고, 각 제공자의 글자색을
   물려받아 흐리게 둡니다. 카카오는 검정 글씨, 네이버는 흰 글씨인데 표만
   따로 색을 가지면 브랜드 규격을 흐트러뜨립니다. */
.rn-auth-provider.is-last { position: relative; }
.rn-auth-provider__last {
  position: absolute;
  top: -9px; right: 14px;
  padding: 3px 9px;
  background: var(--rn-ink-deep);
  border-radius: 999px;
  box-shadow: 0 0 0 2px #ffffff;
  color: #faf8f7;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.rn-auth-provider__last[hidden] { display: none; }

/* ── 처음 오신 분께 합치는 길 ─────────────────────────────────────────────
   제공자마다 메일이 달라서, 다른 버튼을 누르면 계정이 하나 더 생깁니다.
   막지는 않습니다 — 막으면 진짜 처음 온 사람도 못 들어옵니다. 대신 사고가 난
   그 자리에서 되돌릴 길을 알려 줍니다.

   묻지 않고 알리기만 하므로 조용해야 합니다. 풀이함의 먹지색 머리말 바로 위에
   한 줄로 눕습니다. */
.rn-joined {
  margin: 14px 0 0;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--rn-paper-soft);
  border: 1px solid var(--rn-line);
  border-radius: 12px;
}
/* 소셜로 처음 들어온 사람의 가입 확인 머리.
   ─────────────────────────────────────────────────────────────────────
   아래 동의 칸은 이메일 가입의 동의 화면과 **같은 판**을 쓴다. 같은 일이므로
   같은 얼굴이어야 한다. 여기서 더하는 것은 앞의 한 문단뿐이다 — 어느 수단으로
   무엇을 받아 계정을 만들었는지. 도장 하나를 두어 「새로 시작하는 자리」임을
   말없이 알린다. */
.rn-welcome {
  margin: 0 0 18px;
  padding: 20px 19px 18px;
  background: var(--rn-hanji-deep);
  border: 1px solid var(--rn-line-strong);
  border-radius: 14px;
}
.rn-welcome__seal {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--rn-ink-deep);
  border-radius: 9px;
  color: #faf8f7;
  font: 400 19px/1 "Song Myung", "Gowun Batang", serif;
}
.rn-welcome h2 {
  margin: 13px 0 0;
  font: 700 21px/1.4 "Gowun Batang", serif;
  letter-spacing: -.01em;
  word-break: keep-all;
}
.rn-welcome p {
  margin: 8px 0 0;
  color: var(--rn-text-2);
  font-size: 13.5px;
  line-height: 1.75;
  word-break: keep-all;
}
/* 받은 것을 이름표와 값으로 나란히 적는다. 문장으로 늘어놓으면 무엇이
   넘어왔는지 세어 보기 어렵다. */
.rn-welcome__got {
  margin: 15px 0 0;
  padding-top: 13px;
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--rn-line);
}
.rn-welcome__got > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.rn-welcome__got dt { flex: 0 0 78px; color: var(--rn-text-3); }
.rn-welcome__got dd {
  margin: 0;
  min-width: 0;
  color: var(--rn-text);
  font-weight: 600;
  word-break: break-all;
}
/* 나가는 문. 확인 없이 만들어진 계정이라 되돌릴 길이 같은 자리에 있어야 한다. */
.rn-welcome__out {
  margin: 14px 0 0;
  color: var(--rn-text-3);
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
  word-break: keep-all;
}
.rn-welcome__out a { color: var(--rn-text-2); text-decoration: underline; text-underline-offset: 3px; }

.rn-joined__seal {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--rn-ink-deep);
  border-radius: 8px;
  color: #faf8f7;
  font: 400 16px/1 "Song Myung", "Gowun Batang", serif;
}
.rn-joined > div { min-width: 0; flex: 1; }
.rn-joined b { display: block; font: 700 14.5px/1.45 "Gowun Batang", serif; }
.rn-joined p {
  margin: 3px 0 0;
  color: var(--rn-text-3);
  font-size: 12.5px;
  line-height: 1.55;
  word-break: keep-all;
}
.rn-joined a {
  flex: none;
  padding: 8px 13px;
  background: var(--rn-paper);
  border: 1px solid var(--rn-line-strong);
  border-radius: 9px;
  color: var(--rn-text) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.rn-joined a:hover { border-color: var(--rn-accent); color: var(--rn-accent-dark) !important; }

/* ── 수단을 붙이고 돌아왔을 때 ────────────────────────────────────────────
   무슨 일이 일어났는지 그대로 적습니다. 특히 「합쳤다」는 반드시 말해야 합니다
   — 계정 하나가 조용히 닫혔는데 아무 말도 없으면, 나중에 그 수단으로 들어왔을
   때 「내 계정이 어디 갔지」가 됩니다. */
.rn-link-notice {
  margin: 0 0 14px;
  padding: 15px 17px;
  border-radius: 12px;
  border: 1px solid var(--rn-line);
  border-left-width: 4px;
  background: var(--rn-paper);
}
.rn-link-notice b {
  display: block;
  font: 700 15.5px/1.5 "Gowun Batang", serif;
}
.rn-link-notice p {
  margin: 6px 0 0;
  color: var(--rn-text-2);
  font-size: 13.5px;
  line-height: 1.7;
  word-break: keep-all;
}
.rn-link-notice--done { border-left-color: var(--rn-pine); background: #f4f7f5; }
.rn-link-notice--done b { color: var(--rn-pine); }
.rn-link-notice--warn { border-left-color: var(--rn-accent); background: var(--rn-accent-wash); }
.rn-link-notice--warn b { color: var(--rn-accent-dark); }

/* >>> 일간 캐릭터 — scripts/build_renovation_faces.py 가 만듭니다. 손대지 마세요. */
.rn-nav__face--byeong { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22 role=%22img%22 aria-label=%22%E4%B8%99 %EB%82%AE%EC%97%90 %EB%9C%AC %ED%95%B4%22><path d=%22M50 82h20v13a9 9 0 0 1-9 9h-2a9 9 0 0 1-9-9z%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><circle cx=%2260%22 cy=%2256%22 r=%2230%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22></circle><path d=%22M42 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0M61.2 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0%22 fill=%22%23fff%22></path><path d=%22M45.6 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0M64.8 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0%22 fill=%22%231b1510%22></path><path d=%22M30.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0M78.39999999999999 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0%22 fill=%22%23ef7a52%22></path><path d=%22M33.6 44a30 30 0 0 1 52.8 0z%22 fill=%22%23e0502a%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><path d=%22M46 30v8M60 26v9M74 30v8%22 stroke=%22%23d9a13c%22 stroke-width=%225%22 stroke-linecap=%22round%22></path></svg>"); }
.rn-nav__face--eul { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22 role=%22img%22 aria-label=%22%E4%B9%99 %EA%B0%90%EC%95%84 %EC%98%A4%EB%A5%B4%EB%8A%94 %EB%8D%A9%EA%B5%B4%22><path d=%22M50 82h20v13a9 9 0 0 1-9 9h-2a9 9 0 0 1-9-9z%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><circle cx=%2260%22 cy=%2256%22 r=%2230%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22></circle><path d=%22M42 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0M61.2 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0%22 fill=%22%23fff%22></path><path d=%22M45.6 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0M64.8 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0%22 fill=%22%231b1510%22></path><path d=%22M30.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0M78.39999999999999 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0%22 fill=%22%23ef7a52%22></path><path d=%22M25 43c2-19 21-31 40-26 14 4 20 16 14 22-5 5-14 1-12-7%22 fill=%22none%22 stroke=%22%232f7d3a%22 stroke-width=%229.5%22 stroke-linecap=%22round%22></path><circle cx=%2268%22 cy=%2233%22 r=%226%22 fill=%22%23d9a13c%22 stroke=%22%231b1510%22 stroke-width=%223.2%22></circle><path d=%22M26 37c-7-5-7-14 0-18 6 5 6 13 0 18z%22 fill=%22%232f7d3a%22 stroke=%22%231b1510%22 stroke-width=%223.2%22 stroke-linejoin=%22round%22></path></svg>"); }
.rn-nav__face--gap { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22 role=%22img%22 aria-label=%22%E7%94%B2 %EA%B3%A7%EA%B2%8C %EC%9E%90%EB%9D%BC%EB%8A%94 %EB%82%98%EB%AC%B4%22><path d=%22M50 82h20v13a9 9 0 0 1-9 9h-2a9 9 0 0 1-9-9z%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><circle cx=%2260%22 cy=%2256%22 r=%2230%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22></circle><path d=%22M42 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0M61.2 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0%22 fill=%22%23fff%22></path><path d=%22M45.6 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0M64.8 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0%22 fill=%22%231b1510%22></path><path d=%22M30.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0M78.39999999999999 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0%22 fill=%22%23ef7a52%22></path><path d=%22M60 27V7%22 stroke=%22%232f7d3a%22 stroke-width=%225%22 stroke-linecap=%22round%22></path><path d=%22M58 13C46 3 30 5 27 13c9 9 25 8 31 1zM62 13c12-10 28-8 31 0-9 9-25 8-31 1z%22 fill=%22%232f7d3a%22 stroke=%22%231b1510%22 stroke-width=%223.2%22 stroke-linejoin=%22round%22></path></svg>"); }
.rn-nav__face--gi { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22 role=%22img%22 aria-label=%22%E5%B7%B1 %EB%B0%AD%EC%9D%98 %ED%9D%99%22><path d=%22M64 106c0-38 12-56 28-56s26 18 26 56z%22 fill=%22%23c8892c%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><path d=%22M10 106c0-26 13-40 30-40s30 14 30 40z%22 fill=%22%23c8892c%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><circle cx=%2260%22 cy=%2256%22 r=%2230%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22></circle><path d=%22M42 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0M61.2 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0%22 fill=%22%23fff%22></path><path d=%22M45.6 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0M64.8 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0%22 fill=%22%231b1510%22></path><path d=%22M30.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0M78.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0%22 fill=%22%23ef7a52%22></path></svg>"); }
.rn-nav__face--gye { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22 role=%22img%22 aria-label=%22%E7%99%B8 %EB%82%B4%EB%A6%AC%EB%8A%94 %EB%B9%84%22><path d=%22M60 10c25 33 33 48 33 59a33 33 0 1 1-66 0c0-11 8-26 33-59z%22 fill=%22%231f6f9e%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><circle cx=%2260%22 cy=%2264%22 r=%2226%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22></circle><path d=%22M45 68a7.4 9.6 0 1 0 14.8 0a7.4 9.6 0 1 0-14.8 0M62 68a7.4 9.6 0 1 0 14.8 0a7.4 9.6 0 1 0-14.8 0%22 fill=%22%23fff%22></path><path d=%22M48.2 68a4.4 6.6 0 1 0 8.8 0a4.4 6.6 0 1 0-8.8 0M65.2 68a4.4 6.6 0 1 0 8.8 0a4.4 6.6 0 1 0-8.8 0%22 fill=%22%231b1510%22></path><path d=%22M35 74a5 3.6 0 1 0 10 0a5 3.6 0 1 0-10 0M76 74a5 3.6 0 1 0 10 0a5 3.6 0 1 0-10 0%22 fill=%22%23ef7a52%22></path><path d=%22M60 2c4 6 5 9 5 11a5 5 0 1 1-10 0c0-2 1-5 5-11z%22 fill=%22%23d9a13c%22 stroke=%22%231b1510%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22></path></svg>"); }
.rn-nav__face--gyeong { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22 role=%22img%22 aria-label=%22%E5%BA%9A %EB%8B%A4%EB%93%AC%EC%A7%80 %EC%95%8A%EC%9D%80 %EC%87%A0%22><path d=%22M100.6 74.8L76.8 98.6H43.2L19.4 74.8V41.2L43.2 17.4h33.6L100.6 41.2z%22 fill=%22%236b7f92%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><circle cx=%2260%22 cy=%2256%22 r=%2230%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22></circle><path d=%22M42 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0M61.2 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0%22 fill=%22%23fff%22></path><path d=%22M45.6 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0M64.8 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0%22 fill=%22%231b1510%22></path><path d=%22M30.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0M78.39999999999999 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0%22 fill=%22%23ef7a52%22></path><path d=%22M44 18l7 9M100 42l-8 6M77 98l-6-8%22 stroke=%22%231b1510%22 stroke-width=%222.6%22 opacity=%22.32%22 stroke-linecap=%22round%22></path></svg>"); }
.rn-nav__face--im { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22 role=%22img%22 aria-label=%22%E5%A3%AC %ED%9D%90%EB%A5%B4%EB%8A%94 %ED%81%B0 %EB%AC%BC%22><circle cx=%2260%22 cy=%2256%22 r=%2230%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22></circle><path d=%22M42 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0M61.2 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0%22 fill=%22%23fff%22></path><path d=%22M45.6 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0M64.8 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0%22 fill=%22%231b1510%22></path><path d=%22M30.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0M78.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0%22 fill=%22%23ef7a52%22></path><path d=%22M6 76q13.5-12 27 0t27 0t27 0t27 0v30q-13.5 12-27 0t-27 0t-27 0t-27 0z%22 fill=%22%231f6f9e%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path></svg>"); }
.rn-nav__face--jeong { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22 role=%22img%22 aria-label=%22%E4%B8%81 %EB%B0%A4%EC%97%90 %EC%BC%A0 %EB%93%B1%EB%B6%88%22><path d=%22M50 82h20v13a9 9 0 0 1-9 9h-2a9 9 0 0 1-9-9z%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><circle cx=%2260%22 cy=%2256%22 r=%2230%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22></circle><path d=%22M42 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0M61.2 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0%22 fill=%22%23fff%22></path><path d=%22M45.6 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0M64.8 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0%22 fill=%22%231b1510%22></path><path d=%22M30.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0M78.39999999999999 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0%22 fill=%22%23ef7a52%22></path><path d=%22M60 3c12 13 15 22 8 28-6 6-17 3-17-6 0-7 5-13 9-22z%22 fill=%22%23ef7a2f%22 stroke=%22%231b1510%22 stroke-width=%223.8%22 stroke-linejoin=%22round%22></path><path d=%22M60 15c5 6 6 12 3 14-4 3-8 0-8-5 0-3 2-6 5-9z%22 fill=%22%23d9a13c%22></path></svg>"); }
.rn-nav__face--mu { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22 role=%22img%22 aria-label=%22%E6%88%8A %EB%84%93%EC%9D%80 %EB%93%A4%22><path d=%22M14 106C14 70 34 48 60 48s46 22 46 58z%22 fill=%22%23c8892c%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><path d=%22M24 78q36-15 72 0%22 fill=%22none%22 stroke=%22%23d9a13c%22 stroke-width=%224.5%22 stroke-linecap=%22round%22></path><path d=%22M50 82h20v13a9 9 0 0 1-9 9h-2a9 9 0 0 1-9-9z%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><circle cx=%2260%22 cy=%2256%22 r=%2230%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22></circle><path d=%22M42 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0M61.2 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0%22 fill=%22%23fff%22></path><path d=%22M45.6 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0M64.8 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0%22 fill=%22%231b1510%22></path><path d=%22M30.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0M78.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0%22 fill=%22%23ef7a52%22></path></svg>"); }
.rn-nav__face--sin { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22 role=%22img%22 aria-label=%22%E8%BE%9B %EB%8B%A4%EB%93%AC%EC%96%B4 %EB%86%93%EC%9D%80 %EB%B3%B4%EC%84%9D%22><path d=%22M50 82h20v13a9 9 0 0 1-9 9h-2a9 9 0 0 1-9-9z%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><circle cx=%2260%22 cy=%2256%22 r=%2230%22 fill=%22%23fbf1dc%22 stroke=%22%231b1510%22 stroke-width=%224.5%22></circle><path d=%22M42 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0M61.2 62a8.4 11 0 1 0 16.8 0a8.4 11 0 1 0-16.8 0%22 fill=%22%23fff%22></path><path d=%22M45.6 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0M64.8 62a5 7.6 0 1 0 10 0a5 7.6 0 1 0-10 0%22 fill=%22%231b1510%22></path><path d=%22M30.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0M78.4 68a5.6 4 0 1 0 11.2 0a5.6 4 0 1 0-11.2 0%22 fill=%22%23ef7a52%22></path><path d=%22M49 44V21l11-13 11 13v23z%22 fill=%22%236b7f92%22 stroke=%22%231b1510%22 stroke-width=%224.5%22 stroke-linejoin=%22round%22></path><path d=%22M60 11l6.5 8-6.5 6.5-6.5-6.5z%22 fill=%22%23d9a13c%22></path></svg>"); }
/* <<< 일간 캐릭터 */

/* ── 결제 화면 ─────────────────────────────────────────────────────────────
   여기만 두 칸짜리 PC 판이었고 옛 스타일시트를 쓰고 있었습니다. 나머지는
   전부 430px 폰 화면인데, 돈을 내는 자리에서 갑자기 넓어지고 글꼴과 버튼까지
   달라지니 다른 사이트로 넘어온 것처럼 보였습니다.

   한 칸으로 세우고 읽는 차례대로 놓습니다 — 무엇을 사는지 · 얼마인지 ·
   쿠폰 · 누가 사는지 · 어떻게 낼지. 마크업은 그대로 두고(법정 표시 문구와
   결제위젯 자리가 거기 붙어 있습니다) 옛 이름에 새 옷만 입힙니다. */
.rn-pay { background: var(--rn-paper-soft); }
.rn-pay__main { padding: 0 14px 40px; }
.rn-pay__head { padding: 26px 4px 18px; }
.rn-pay__head h1 { margin: 7px 0 0; font: 700 30px/1.3 "Gowun Batang", serif; }
.rn-pay__head p { margin: 8px 0 0; color: var(--rn-text-2); font-size: 13.5px; }

.rn-pay .card {
  margin-bottom: 12px;
  padding: 18px;
  background: var(--rn-paper);
  border: 1px solid var(--rn-line);
  border-radius: 14px;
}
.rn-pay .card__title {
  margin: 0 0 14px;
  font: 700 17px/1.45 "Gowun Batang", serif;
}
.rn-pay .card__note {
  margin: 10px 0 0;
  color: var(--rn-text-3);
  font-size: 12px;
  line-height: 1.7;
  word-break: keep-all;
}
.rn-pay .card__note a { color: var(--rn-accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* 상품 — 손님이 눌러서 들어온 그 카드의 그림을 그대로 씁니다. */
.rn-pay .product { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 13px; }
.rn-pay .product__pic { display: block; }
.rn-pay .product__shot {
  width: 96px;
  height: 72px;
  display: block;
  background: var(--rn-hanji-deep);
  border-radius: 10px;
  object-fit: cover;
}
.rn-pay .product__body { min-width: 0; }
.rn-pay .product__name { margin: 0; font: 700 16px/1.45 "Gowun Batang", serif; word-break: keep-all; }
.rn-pay .product__desc {
  margin: 6px 0 0;
  color: var(--rn-text-2);
  font-size: 12.5px;
  line-height: 1.7;
  word-break: keep-all;
}
.rn-pay .product__points { margin: 9px 0 0; padding-left: 17px; display: grid; gap: 3px; }
.rn-pay .product__points li { color: var(--rn-text-2); font-size: 12.5px; line-height: 1.65; }
/* 법정 표시 셋(디지털 콘텐츠 · 제공기간 · 제공방식)은 그리드 밖 전체 폭으로
   내려 둡니다. 96px 그림 옆에서 접히면 읽히지 않습니다. */
.rn-pay .product__kind,
.rn-pay .product__period,
.rn-pay .product__method {
  grid-column: 1 / -1;
  margin: 9px 0 0;
  color: var(--rn-text-3);
  font-size: 12px;
  line-height: 1.7;
  word-break: keep-all;
}
.rn-pay .product__period b { color: var(--rn-text-2); }

/* 금액 */
.rn-pay .amount {
  margin: 14px 0 0;
  padding-top: 13px;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--rn-line);
}
.rn-pay .amount__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.rn-pay .amount__row dt { color: var(--rn-text-3); font-size: 13px; }
.rn-pay .amount__row dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.rn-pay .amount__row s { color: var(--rn-text-3); }
.rn-pay .amount__row--coupon dd b { color: var(--rn-pine); }
/* 실제로 청구되는 금액이 주문 금액과 다를 때만 서는 줄(0원 결제 권한).
   총액 자리를 덮어쓰지 않고 그 아래 붙는다 — 덮어쓰면 쿠폰이 먹었는지
   안 먹었는지 화면에서 가릴 방법이 없어진다. */
.rn-pay .amount__row--waived {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--rn-line);
}
.rn-pay .amount__row--waived dt { color: var(--rn-accent-dark); font-weight: 700; }
.rn-pay .amount__row--waived dd b { color: var(--rn-accent-dark); font-size: 15px; }
.rn-pay .amount__row--total {
  margin-top: 4px;
  padding-top: 11px;
  align-items: center;
  border-top: 1px solid var(--rn-line);
}
.rn-pay .amount__row--total dt { color: var(--rn-text); font-size: 14px; font-weight: 700; }
.rn-pay .amount__row--total b { font: 700 24px/1.1 "Gowun Batang", serif; font-variant-numeric: tabular-nums; }

/* 쿠폰. 값을 정하는 자리 옆에 붙는 작은 줄이지, 따로 선 상자가 아닙니다.
   `.coupon__field` 는 라벨을 감싸는 `<label>` 이고 입력과 버튼은 그 안의
   `.coupon__row` 에 있습니다. 바깥을 가로로 눕히면 버튼이 라벨 옆으로 밀려
   아래로 떨어집니다 — 실제로 그렇게 보였습니다. */
.rn-pay .coupon { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rn-line); }
.rn-pay .coupon__field { display: block; }
.rn-pay .coupon .field__label {
  display: block;
  margin-bottom: 6px;
  color: var(--rn-text-3);
  font-size: 12px;
}
.rn-pay .coupon__row { display: flex; align-items: stretch; gap: 6px; }
.rn-pay .coupon input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  background: var(--rn-paper);
  border: 1px solid var(--rn-line-strong);
  border-radius: 9px;
  color: var(--rn-text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.rn-pay .coupon input::placeholder { color: var(--rn-line-strong); letter-spacing: .04em; }
.rn-pay .coupon input:focus-visible { outline: 2px solid var(--rn-accent); outline-offset: 1px; }
.rn-pay .coupon__apply {
  flex: none;
  height: 40px;
  padding: 0 14px;
  background: var(--rn-ink);
  border: 1px solid var(--rn-ink);
  border-radius: 9px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.rn-pay .coupon__apply:hover { background: #000; }
.rn-pay .coupon__apply:disabled { opacity: .5; cursor: not-allowed; }
/* 쿠폰함 — 가진 쿠폰을 눌러서 바로 붙입니다.
   「SJ-」로 시작하는 여덟 자리를 다른 화면에서 보고 와 손으로 치는 일은,
   가진 사람도 못 쓰게 만드는 가장 흔한 자리입니다. 입력칸은 그대로 둡니다 —
   선물처럼 남에게 받은 번호는 목록에 없습니다. */
.rn-pay .coupon-wallet { margin-top: 10px; }

.rn-pay .coupon-wallet__open {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: var(--rn-hanji);
  border: 1px solid var(--rn-hanji-line);
  border-radius: 9px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.rn-pay .coupon-wallet__open::-webkit-details-marker { display: none; }
.rn-pay .coupon-wallet__open:hover { border-color: var(--rn-line-strong); }
.rn-pay .coupon-wallet__open:focus-visible {
  outline: 2px solid var(--rn-accent);
  outline-offset: 1px;
}
.rn-pay .coupon-wallet__label {
  flex: 1;
  min-width: 0;
  color: var(--rn-text);
  font-size: 13px;
  font-weight: 700;
}
.rn-pay .coupon-wallet__count {
  flex: none;
  padding: 2px 8px;
  background: var(--rn-paper);
  border-radius: 999px;
  color: var(--rn-text-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* 펼침 표시. 문자로 찍으면 글꼴에 따라 크기가 제각각이라 선 두 개로 그립니다. */
.rn-pay .coupon-wallet__chev {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 1.6px solid var(--rn-text-3);
  border-bottom: 1.6px solid var(--rn-text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.rn-pay .coupon-wallet[open] .coupon-wallet__chev {
  transform: rotate(225deg) translate(-2px, -2px);
}

.rn-pay .coupon-wallet__list { display: grid; gap: 7px; margin-top: 8px; }

/* 한 장. 왼쪽에 깎이는 값, 가운데 번호와 남은 기간, 오른쪽에 「적용」.
   값이 가장 먼저 읽혀야 어느 것을 쓸지 한 번에 고릅니다. */
.rn-pay .coupon-wallet__pick {
  display: grid;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  background: var(--rn-paper);
  border: 1px solid var(--rn-line-strong);
  border-radius: 9px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rn-pay .coupon-wallet__pick:hover {
  border-color: var(--rn-ink);
  background: var(--rn-hanji);
}
.rn-pay .coupon-wallet__pick:focus-visible {
  outline: 2px solid var(--rn-accent);
  outline-offset: 1px;
}
.rn-pay .coupon-wallet__pick:disabled { opacity: .5; cursor: not-allowed; }
.rn-pay .coupon-wallet__off {
  font: 700 15px/1.3 "Gowun Batang", serif;
  color: var(--rn-accent-dark);
  white-space: nowrap;
}
.rn-pay .coupon-wallet__meta { display: grid; gap: 2px; min-width: 0; }
.rn-pay .coupon-wallet__meta b {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--rn-text-2);
  font-variant-numeric: tabular-nums;
}
.rn-pay .coupon-wallet__meta small { font-size: 12px; color: var(--rn-text-3); }
.rn-pay .coupon-wallet__meta small.is-soon { color: var(--rn-accent-dark); font-weight: 700; }
.rn-pay .coupon-wallet__use {
  flex: none;
  padding: 5px 11px;
  background: var(--rn-ink);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.rn-pay .coupon-wallet__fine {
  margin: 8px 0 0;
  color: var(--rn-text-3);
  font-size: 12px;
}

/* 붙어 있을 때. 「적용됨」과 「빼기」가 한 줄에서 양끝으로 갑니다. */
.rn-pay .coupon--on {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.rn-pay .coupon__applied { flex: 1; min-width: 0; color: var(--rn-text-2); font-size: 13px; }
.rn-pay .coupon__applied b { color: var(--rn-pine); font-variant-numeric: tabular-nums; }
.rn-pay .coupon__remove {
  flex: none;
  height: 30px;
  padding: 0 10px;
  background: var(--rn-paper);
  border: 1px solid var(--rn-line-strong);
  border-radius: 8px;
  color: var(--rn-text-2);
  font-size: 12px;
  cursor: pointer;
}
.rn-pay .coupon__remove:hover { border-color: var(--rn-accent); color: var(--rn-accent-dark); }
/* 할 말이 있을 때만 자리를 차지합니다. */
.rn-pay .coupon__msg { flex: 1 1 100%; margin: 6px 0 0; color: var(--rn-text-3); font-size: 12px; }
.rn-pay .coupon__msg:empty { display: none; }
.rn-pay .coupon__msg.is-bad { color: var(--rn-accent-dark); }

/* 주문자 */
/* 결제 결과 — 성공과 실패가 같은 상자를 쓴다.
   결과 화면만 옛 스타일시트를 쓰고 있었다. 머리말과 바닥글은 새 쪽에서
   가져오는데 그 규칙이 저쪽에 없어서 로고가 제 크기를 못 찾고 거대하게 떴다. */
.rn-pay .card--result {
  margin-top: 22px;
  padding: 30px 22px 26px;
  text-align: center;
}

.rn-pay .result__seal {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 12px;
  background: var(--rn-pine);
  color: #fff;
  font: 400 21px/1 "Gowun Batang", serif;
}

.rn-pay .card--result-fail .result__seal {
  background: var(--rn-accent-dark);
  font-weight: 700;
}

.rn-pay .result__title {
  margin: 0;
  font: 700 22px/1.4 "Gowun Batang", serif;
  color: var(--rn-text);
  word-break: keep-all;
}

.rn-pay .result__message {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--rn-text-2);
  word-break: keep-all;
}

/* 값은 가운데 정렬한 글 아래에서 다시 왼쪽으로 선다 — 숫자와 번호는
   가운데로 모으면 자릿수가 달라질 때마다 줄이 흔들린다. */
.rn-pay .card--result .kv {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rn-line);
  text-align: left;
}

.rn-pay .card--result .btn { margin-top: 20px; }

.rn-pay .result__lookup {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--rn-text-3);
  word-break: keep-all;
}
.rn-pay .result__lookup a {
  color: var(--rn-accent-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rn-pay .kv { margin: 0; display: grid; gap: 9px; }
.rn-pay .kv__row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.rn-pay .kv__row dt { color: var(--rn-text-3); font-size: 12.5px; }
.rn-pay .kv__row dd { margin: 0; font-size: 13.5px; word-break: break-all; }

/* 결제수단 — 위젯이 제 UI 를 그리는 자리라 여백만 잡아 줍니다. */
.rn-pay .card--widget { padding: 14px; }
.rn-pay #payment-method, .rn-pay #agreement { margin-inline: -6px; }
.rn-pay .withdrawal {
  margin: 12px 0 0;
  padding: 12px 13px;
  color: var(--rn-text-2);
  background: var(--rn-paper-soft);
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.7;
  word-break: keep-all;
}
.rn-pay__withdrawal-consent {
  margin: 12px 0 0;
  padding: 13px;
  display: flex;
  gap: 10px;
  background: var(--rn-accent-wash);
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.65;
  word-break: keep-all;
  cursor: pointer;
}
.rn-pay__withdrawal-consent input { margin-top: 2px; flex: none; width: 18px; height: 18px; accent-color: var(--rn-accent); }
.rn-pay .pay__error { margin: 10px 0 0; color: var(--rn-accent-dark); font-size: 13px; }
.rn-pay .pay__error:empty { display: none; }
.rn-pay .pay__fine { margin: 10px 0 0; color: var(--rn-text-3); font-size: 12px; line-height: 1.7; word-break: keep-all; }

/* 결제 버튼 — 사이트의 다른 마지막 버튼과 같은 자리, 같은 모양.
   결과 화면의 「진행 상황 보기」도 여기 같이 든다. 옛 스타일시트의 `.btn` 을
   기대하고 있었는데 이 화면은 그 파일을 안 쓴다 — 그래서 버튼이 그냥 글씨로
   떠 있었다. */
.rn-pay #payment-button,
.rn-pay .card--result .btn,
.rn-pay .card--free button[type="submit"] {
  width: 100%;
  min-height: 56px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--rn-accent);
  border: 1px solid var(--rn-accent);
  border-radius: var(--rn-radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.rn-pay #payment-button:disabled { opacity: .5; cursor: not-allowed; }
.rn-pay .card--result .btn { text-decoration: none; }
.rn-pay .card--result .btn:hover { background: var(--rn-accent-dark); border-color: var(--rn-accent-dark); }

/* 전액 할인 */
.rn-pay .card--free { text-align: center; }
.rn-pay .free__badge {
  margin: 0 auto;
  padding: 4px 11px;
  width: fit-content;
  color: var(--rn-pine);
  background: #eaf2ee;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.rn-pay .free__title { margin: 10px 0 0; font: 700 21px/1.4 "Gowun Batang", serif; }

/* 「이 기기에서 로그인 유지」. 기본은 꺼져 있고, 켠 사람에게만 30일을 줍니다.
   PC방이나 남의 노트북에서 열어 본 사람이 나간 뒤에도 풀이함이 열려 있으면
   안 되기 때문입니다. */
.rn-remember {
  margin-top: 14px;
  padding: 12px 13px;
  display: flex;
  gap: 10px;
  background: var(--rn-paper-soft);
  border: 1px solid var(--rn-line);
  border-radius: 11px;
  cursor: pointer;
}
.rn-remember input { margin-top: 2px; flex: none; width: 17px; height: 17px; accent-color: var(--rn-pine); }
.rn-remember b { display: block; font-size: 13.5px; }
.rn-remember small { display: block; margin-top: 3px; color: var(--rn-text-3); font-size: 12px; line-height: 1.55; }

/* 접어 둔 상품 상세 */
.rn-pay .product__more { grid-column: 1 / -1; margin-top: 9px; }
.rn-pay .product__more > summary {
  color: var(--rn-text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.rn-pay .product__more[open] > summary { margin-bottom: 7px; }

/* 이름표는 풀이함으로 가는 문입니다. 누를 수 있게 보여야 합니다. */
.rn-nav__who { text-decoration: none; }
.rn-nav__who:hover { border-color: var(--rn-line-strong); }
.rn-nav__who:focus-visible { outline: 2.5px solid var(--rn-accent); outline-offset: 2px; }
/* 안 읽은 풀이가 있을 때. 점 하나는 지나치기 쉬워서 테두리까지 물들입니다. */
.rn-nav__who.is-new {
  background: var(--rn-accent-wash);
  border-color: #f0b8a6;
  color: var(--rn-text);
}
.rn-nav--dark .rn-nav__who.is-new { background: rgba(247, 134, 104, .18); border-color: rgba(247, 134, 104, .5); }

/* 발치의 문의 줄. 전화번호는 전자상거래법 제10조가 요구하는 표시라 지울 수
   없지만, 받지 않는 번호를 그냥 두면 전화가 옵니다. 어디로 물어야 하는지를
   번호 바로 아래에서 말해 둡니다. */
.rn-footer__contact {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--rn-text-3);
  font-size: 12px;
  line-height: 1.7;
  word-break: keep-all;
}
.rn-footer__contact img,
.rn-footer__contact svg { width: 18px; height: 18px; flex: none; }

/* ── 구운 공유 카드 ───────────────────────────────────────────────────
   손님이 「링크 공유하기」나 「이미지로 저장」을 누르면 화면이 카드를 그림으로
   굽는다. 그때부터 카드 자리에는 그 그림이 놓인다 — 보낸 것과 화면이 다르면
   「내가 보낸 게 이게 맞나」를 헷갈린다. 카드는 세로로 길고 폭이 제각각이라
   높이를 정하지 않고 폭에만 맞춘다. */
.rn-baked-card { margin: 0; }
.rn-baked-card img { width: 100%; height: auto; display: block; border-radius: 14px; }

/* 굽는 동안 카드 위에 덮는 안내. 0.5~2초가 걸리는데 아무 표시가 없으면
   버튼이 안 눌린 줄 알고 한 번 더 누른다. 카드를 가리지 않고 살짝 어둡게만
   덮어서, 지금 무엇을 굽고 있는지 보이게 둔다. */
.rn-me-cover-wrap, .rn-duo-result__body { position: relative; }
.is-baking { filter: brightness(.55) saturate(.8); transition: filter .18s ease; }
.rn-card-baking {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: #ffffff; font-size: 14px; font-weight: 650;
  text-align: center; pointer-events: none;
}
.rn-card-baking b { font-weight: 650; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.rn-card-baking__spin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.28); border-top-color: #ffffff;
  animation: rn-card-baking-spin .8s linear infinite;
}
@keyframes rn-card-baking-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rn-card-baking__spin { animation-duration: 2.4s; }
  .is-baking { transition: none; }
}

/* duo 도 「나 어떤 사람이야」와 같은 두 버튼을 쓴다. */
/* duo 도 「나 어떤 사람이야」와 같은 두 버튼을 쓴다.
   `.rn-duo-share` 는 통짜 버튼이던 시절의 `margin-top` 과 각진 모서리를 아직
   갖고 있다. 행 안에서 그대로 두면 한 칸만 아래로 밀려 내려가고, 옆 칸은
   늘어난 행 높이에 맞춰 혼자 커진다 — 「저장 버튼이 갑자기 커진다」가 이것이다.
   행 안에서는 그 두 값을 걷는다. */
.rn-duo-share-row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 116px;
  gap: 8px;
  align-items: stretch;
}
.rn-duo-share-row .rn-btn {
  min-height: 48px;
  margin-top: 0;
  padding-inline: 10px;
  border-radius: var(--rn-radius);
  font-size: 15px;
}

/* 받을 이메일 고르기.
   인증된 메일이 둘 이상일 때만 선다. 라디오는 눌러야 할 자리가 작으므로
   줄 전체를 누를 수 있게 하고, 고른 줄은 색으로 표시한다. */
.rn-primary-email { margin-top: 14px; display: grid; gap: 8px; }
.rn-primary-email__row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  background: var(--rn-paper-soft);
  border: 1px solid var(--rn-line);
  border-radius: 11px;
  cursor: pointer;
}
.rn-primary-email__row:has(input:checked) {
  background: #eef4f2;
  border-color: var(--rn-pine-bright);
}
.rn-primary-email__row b { display: block; font-size: 14px; font-weight: 650; word-break: break-all; }
.rn-primary-email__row small { display: block; margin-top: 2px; color: var(--rn-text-3); font-size: 12px; }
.rn-primary-email > .rn-btn { margin-top: 4px; }

/* 무료 카드의 「어느 사주로 본 것인가」.
   나·엄마·친구 것이 나란히 서면 상품 이름만으로는 구분이 안 된다. 좁은 칸
   이므로 가장 작게, 가장 옅게 — 찾을 때만 눈에 들어오면 된다. */
.rn-free-shelf__birth {
  display: grid;
  gap: 1px;
  margin-top: 1px;
  color: var(--rn-text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.rn-free-shelf__birth i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 둘이 나오는 결과는 한 줄을 통째로 쓴다.
   132px 칸에 두 사람의 이름과 생년월일시를 넣으면 「초대한 사람 1987.10…」
   처럼 잘려서, 어느 조합의 결과인지 카드만 보고는 못 찾는다. */
.rn-free-shelf__card--pair { grid-column: 1 / -1; }
.rn-free-shelf__card--pair .rn-free-shelf__birth i {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}


/* ── 무료 입력 화면 머리의 예시 카드 ────────────────────────────
   어떤 결과가 나오는지 보여 주지도 않고 생년월일시를 넣으라고 하던 자리다.
   결과 화면과 같은 표지 카드를 가상 사주로 한 장 놓고, 「예시 · 가상 사주」
   표를 붙인다. 후킹 한 줄이 상황을 짚고 큰 글씨가 「내 건?」으로 이끈다.
   (클로드 디자인 시안 2026-09-17, 질문형) */
.rn-free-hook { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.rn-free-hook__lead { margin: 0; font-size: 15px; line-height: 1.7; color: #57504b; }
.rn-free-hook__q { margin: 0; font: 700 21px/1.45 "Gowun Batang", serif; color: var(--rn-accent); word-break: keep-all; }
/* 카드는 미리 구운 그림 한 장이다(표지 마크업이면 SVG 여덟 장이 딸려 온다).
   너비·높이 속성이 있어 그림이 오기 전에도 자리를 잡는다. */
.rn-free-sample { margin-top: 14px; overflow: hidden; border-radius: 14px; background: #151110; }
.rn-free-sample > picture > img { display: block; width: 100%; height: auto; }
.rn-free-micro { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.rn-free-micro span { padding: 5px 10px; border-radius: 999px; background: var(--rn-hanji-deep, #f4f0ee); color: #57504b; font-size: 12px; line-height: 1.5; }
.rn-free-micro span.is-strong { color: var(--rn-pine, #1b564b); font-weight: 700; }
/* 예시 카드 다음의 리드는 카드에서 한 숨 떨어뜨린다. */
.rn-free-micro + .rn-form-wrap__lede { margin-top: 22px; }