:root {
  touch-action: pan-x pan-y;
  --paper: #f3f1ed;
  --paper-deep: #e6e1d9;
  --surface: #fcfbf8;
  --surface-soft: #ebe8e2;
  /* Three inks, and all three have to be readable — the quiet one was carrying
     every form hint on the site at 2.9:1 against the band it sits on. Raising
     only the faint one collapsed it onto the soft one (they landed 1.00 apart),
     so the scale moves together: 14.1, 8.0, 5.9 against --surface, which is a
     step of 1.76 and then 1.36. It was 14.1, 5.8, 3.7. */
  --ink: #25292f;
  --ink-soft: #4c4e54;
  --ink-faint: #63625e;
  /* Night indigo. This used to be a real plum, #4a2c46, with public_redesign.css
     quietly aliasing --plum to the indigo on top of it. Every public screen got
     indigo and the share screen — which loads this sheet alone — got the purple,
     on a site whose rules forbid it. One name, one colour. */
  --brand: #3d4d65;
  --brand-deep: #2b384b;
  --brand-soft: #f1e6d0;
  --mineral: #54666a;
  --mineral-soft: #dfe7e6;
  --brass: #a9814d;
  /* The brass that reads on night indigo rather than on paper. */
  --brass-light: #c7a268;
  /* Brass is an edge, a focus ring and a fill — at those jobs #a9814d is right.
     As a letter on paper it is 2.7:1, and it was setting the step numerals on
     이용 안내 and 궁합. This is the same brass taken down until it can be read;
     the ornamental one keeps its value so nothing that was a line becomes mud. */
  --brass-ink: #7b5e38;
  --brass-soft: #f4ebda;
  --line: #d9d4cc;
  --line-strong: #b4aea5;
  /* A full-width band that alternates against the page. Separate from
     --surface-soft, which dresses small wells and chips: reusing that put the
     band 8/255 away from the page it was meant to divide, which reads as a
     rendering fault rather than a section. */
  --band: #e8e3d9;
  /* A result screen stands on night and carries its writing on paper. The night
     continues the film the visitor came in through; the paper is where a
     several-thousand-word reading is actually read. */
  --night: #0e1422;
  --night-soft: #18202f;
  --night-line: rgba(201, 166, 105, 0.22);
  --night-ink: #f0e8d8;
  --night-ink-soft: rgba(240, 232, 216, 0.72);
  --hanji: #f4eee0;
  --hanji-edge: #ddd0b4;
  --hanji-rule: #ded3bd;
  --success: #4f685b;
  --danger: #b42318;
  /* The whole palette lives here, in the sheet both layouts load. It used to be
     declared twice, and sixteen of the twenty-five shared tokens held different
     values in the two copies — so the share screen, which loads this sheet on its
     own, was a different paper, a different ink and a different rule colour from
     every other page, and the 오행 colours it asks for did not exist there at all.
     public_redesign.css loads last and its values were the ones on screen, so
     those are the ones kept. */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* 웹에서도 모바일 폭으로 본다 — 클라이언트가 정한 것이고 디자인도 모바일만 온다.
     반응형이 아니라 한 폭이다. 근거는 docs/18. */
  --app-width: 430px;
  --app-ambient: #05070d;
  /* 열이 한 폭으로 고정된 뒤로 `vw` 는 이 앱에서 틀린 단위다 — 창을 재기 때문에
     1440 창에서 430 열 안의 값이 데스크톱 값으로 부푼다. 실제로 풀이 지면의 안쪽
     여백이 22 → 72px 이 되어 본문이 한 줄에 14.9자였다(같은 열, 모바일 19.1자).
     `--col` 은 화면이 아니라 열의 폭이다. 뷰포트를 기준으로 잡아야 하는 것 —
     열을 화면 가운데 놓는 `calc(var(--col) * 0.5)` 계산 — 만 vw 로 남는다. */
  --col: min(100vw, var(--app-width));
  /* psd 의 상단 pill 과 하단 바가 같은 값이다. 테두리는 psd 에서 흰색 4px 획인데
     레이어 자체가 57% 이라 실제로 찍히는 것은 57% 흰 선 한 줄이다 — 크림 28% 로
     두면 그 절반 밝기라 알약의 윤곽이 사라진다. */
  --bar-veil: rgba(18, 22, 34, 0.569);
  --bar-veil-day: rgba(13, 17, 29, 0.94);
  --bar-line: rgba(247, 243, 234, 0.46);
  --bottom-bar-height: 95px;
  /* 헤더는 흐름 안에 있고 높이가 정해져 있다 — `.site-header__inner` 의 min-height
     60 에 아래 선 1. 마당을 그 높이만큼 끌어올려 밤이 화면 꼭대기부터 시작하게
     하는 데 쓴다. */
  --header-height: 61px;
  /* Two shapes the corner scale cannot describe, because they are not corners.
     The seal is a stamp, cut short on one diagonal; a bar is capped at the top
     and sits flat on the line it is measured from. They were written out by hand
     in six places, in four slightly different ways, which is how a shape stops
     being a shape and becomes six numbers. */
  --radius-seal: 11px 5px 11px 5px;
  --radius-seal-sm: 9px 4px 9px 4px;
  --radius-bar: 5px 5px 2px 2px;
  /* 우리 패널 눈금이 아니라 클라이언트가 그린 그림의 모서리다. psd 는 1080 폭에서
     80px 이고 열이 430 으로 고정돼 있으므로 32px 이다. 네 문의 그림은 이미 이
     모서리로 잘려 나왔고, 이 값은 그 잘린 모양을 따라 빛을 두르기 위한 것이다.
     서랍도 같은 80px 이라 같은 값을 쓴다. */
  --radius-door: 32px;
  /* 이 그림자는 부품을 띄우는 것이 아니라 열 전체가 어두운 마당 위에 선 판임을
     말한다 — 그래서 평소의 납작한 --shadow 규칙과 다른 자리이고, 이름을 갖는다. */
  --shadow-column: 0 0 0 1px rgba(236, 226, 205, 0.05), 0 26px 90px rgba(0, 0, 0, 0.55);
  /* Offset, barely blurred, mostly invisible. A 55px blur is the sign a surface
     is not working without it. */
  --shadow: 0 1px 2px rgba(38, 36, 33, 0.07);
  /* The one exception to the flat-shadow rule, and the reason it is named: a
     sheet of paper lying on the night has to lift off it, and 2px of blur on a
     dark ground is not visible at all. */
  --shadow-sheet: 0 16px 34px -26px rgba(0, 0, 0, 0.9);
  --font-sans: "Pretendard", sans-serif;
  --font-solmoe: "Solmoe KimDaeGeon", "Noto Serif KR", serif;
  /* 명조 for the things a 만세력 sets in 명조: the eight characters, the 대운 and
     기간 pillars, the day master, and the headings over a reading. Eleven rules
     already asked for --font-display and it had never been defined, so all of
     them were quietly getting the sans. Running body text stays sans — it is
     read at 16px for several thousand words, which is not what a serif is for. */
  --font-display: "Noto Serif KR", serif;
  --content-width: 1160px;
  --reading-width: 760px;
  --accent: #8b4942;
  --accent-soft: #efe1dd;
  --element-wood: #20674a;
  --element-wood-soft: #dcece2;
  --element-fire: #a82128;
  --element-fire-soft: #f6dcdc;
  --element-earth: #775917;
  --element-earth-soft: #f7eac6;
  --element-metal: #5f5b52;
  --element-metal-soft: #edebe3;
  --element-water: #23262e;
  --element-water-soft: #dddee3;
  --brass-line: rgba(169, 129, 77, 0.5);
  --field-well: #f6f2e9;
}

/* 오행 색은 여기서 한 번만 고른다.
   부품마다 다섯 줄을 다시 쓰면 한 색을 여러 번 적게 되고, 한 번 고칠 때 다른
   쪽은 틀린 채로 남는다 — 실제로 같은 다섯 줄이 `.element-count`·
   `.sexagenary__char`·`.gan-ji` 셋에 흩어져 있었다. 그래서 오행을 지닌 요소는
   `data-element` 하나만 달면 되고, 부품은 그것을 글자에 칠할지 바탕에 칠할지만
   고른다.
   `--element-*` 는 scope 마다 다시 정의되므로(`.reading-world` 는 밤 값,
   `.reading-sheet` 는 낮 값) 여기 var() 는 쓰는 자리의 scope 에서 풀린다. */
[data-element="목"] { --element-ink: var(--element-wood); --element-wash: var(--element-wood-soft); }
[data-element="화"] { --element-ink: var(--element-fire); --element-wash: var(--element-fire-soft); }
[data-element="토"] { --element-ink: var(--element-earth); --element-wash: var(--element-earth-soft); }
[data-element="금"] { --element-ink: var(--element-metal); --element-wash: var(--element-metal-soft); }
[data-element="수"] { --element-ink: var(--element-water); --element-wash: var(--element-water-soft); }

/* 오행을 값으로 부르는 자리 — 용신, 일간의 오행, 십성처럼 글자가 곧 기운인 곳. */
.element-mark {
  color: var(--element-ink, inherit);
  font-weight: 600;
}

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 3%, rgba(177, 132, 61, 0.08), transparent 27rem),
    radial-gradient(circle at 91% 18%, rgba(77, 108, 125, 0.07), transparent 30rem),
    var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

button,
summary,
input,
select,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-weight: 720;
  line-height: 1.23;
  letter-spacing: -0.038em;
}

:focus-visible {
  outline: 3px solid rgba(77, 108, 125, 0.72);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: white;
  background: var(--brand);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.page-shell {
  width: min(calc(100% - 48px), var(--content-width));
  margin-inline: auto;
}

.narrow-shell,
.document-shell {
  max-width: 920px;
}

/* 종이는 무언가 위에 놓여야 종이로 읽힌다. 판(#f3f1ed)과 한지(#f4eee0)는 네 값
   차이라, 변란 혼자 그 일을 하고 있었다. :has()는 이 저장소가 이미 쓰는 방식이고
   (.check-field:has(input:checked)), 뒤에 문서 화면이 하나 더 생겨도 따라온다. */
.section-pad:has(> .document-shell) {
  background: var(--band);
}

/* 문서는 표제로 열리지 4.6rem짜리 히어로로 열리지 않는다. 약관 제목이 랜딩
   페이지 헤드라인과 같은 크기·같은 활자로 조판되어 있었고, 그것이 이 화면들을
   "마크다운을 상자에 담은 것"으로 읽히게 한 절반이었다. 명조는 결과 세계의
   얼굴이지만 그 이유는 표제이기 때문이지 결과이기 때문이 아니다 — 조문 표제도
   표제다. 본문은 그대로 Pretendard로 읽는다. */
.section-pad:has(> .document-shell) .page-intro h1 {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, calc(var(--col) * 0.03), 2.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.22;
}

/* 문서 화면 위의 카드도 같은 종이에 앉는다. 판(--band) 위에 한지 leaf 하나와
   흰 카드 여럿이 섞이면 한 페이지에 재료가 셋이 되고, 그 흰 카드가 어느
   제품에서든 볼 수 있는 그 카드다. 변란은 본문 leaf만 두른다 — 모든 것이
   테두리를 두 겹 두르면 두 겹이라는 사실이 아무 말도 하지 않는다. */
.section-pad:has(> .document-shell) .disclaimer-grid article,
.section-pad:has(> .document-shell) .principle-card,
.section-pad:has(> .document-shell) .contact-primary,
.section-pad:has(> .document-shell) .contact-hours,
.section-pad:has(> .document-shell) .feature-note {
  border-color: var(--hanji-edge);
  border-radius: var(--radius-xs);
  background: var(--hanji);
}

.section-pad:has(> .document-shell) .page-intro {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hanji-rule);
  box-shadow: 0 3px 0 -2px var(--hanji-rule);
}

.section-pad--bottom {
  padding-top: 72px;
  padding-bottom: 120px;
}

.section-muted {
  border-block: 1px solid rgba(201, 188, 170, 0.55);
  background: var(--band);
}

/* One eyebrow. It was declared here in brass and again in public_redesign.css in
   indigo, at a different size and a different tracking, so the share screen —
   which loads this sheet alone — wore a different one from every other page. The
   page intros then coloured theirs 주칠 빨강, which this site reserves for numbers,
   and on the four dark journeys that put it at 2.3:1 on night. */
.eyebrow {
  margin-bottom: 11px;
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

/* Three sizes and a hero. There used to be a fourth, 25px, three pixels from the
   default — a distinction no one can see and everyone has to choose between. */
.ui-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

.ui-icon--small {
  width: 17px;
  height: 17px;
}

.ui-icon--large {
  width: 31px;
  height: 31px;
}

.ui-icon--hero {
  width: 54px;
  height: 54px;
  stroke-width: 1.25;
}

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 19px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 690;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease, background 170ms ease;
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.52;
}

.button--small {
  min-height: 40px;
  padding: 9px 15px;
  font-size: 0.88rem;
}

.button--large {
  min-height: 52px;
  padding: 14px 22px;
}

.button--full {
  width: 100%;
}

.button--primary {
  color: #fffdf8;
  background: var(--brand);
  box-shadow: var(--shadow);
}

.button--primary:hover:not(:disabled) {
  background: var(--brand-deep);
  box-shadow: var(--shadow);
}

.button--quiet {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 253, 248, 0.82);
}

.button--danger-quiet {
  color: var(--danger);
  border-color: rgba(154, 76, 71, 0.3);
  background: transparent;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.text-link--strong {
  font-weight: 740;
}

/* Header and footer */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid rgba(221, 211, 197, 0.72);
  background: rgba(247, 242, 234, 0.96);
}

.site-header__inner {
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__seal {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--surface);
  background: var(--brand);
  border-radius: var(--radius-seal);
  font-size: 1rem;
  font-weight: 760;
}

/* The client's own wordmark — the seal and the two characters the visitor has
   just watched come up out of the film. It was drawn in CSS everywhere but the
   intro, so the one screen that carried the brand was the one screen nobody
   arrives back at. Sized by height because the artwork is fixed at 189x74; the
   grounds it sits on (site header, site footer, share header) are all night, and
   the mark's own characters are near-white, so it must not be placed on paper
   without a dark-ink version of the file. */
.wordmark__mark {
  width: auto;
  height: 27px;
  display: block;
  flex: 0 0 auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-header__signup {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 680;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__signup:hover {
  color: var(--ink);
}

/* Rails-owned account access */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.7fr);
  gap: clamp(44px, calc(var(--col) * 0.08), 112px);
  align-items: center;
  max-width: 1080px;
}

.auth-shell--single {
  display: block;
  max-width: 560px;
}

.auth-intro h1 {
  margin: 10px 0 20px;
  font-size: clamp(2.4rem, calc(var(--col) * 0.05), 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.auth-intro > p:last-of-type {
  max-width: 560px;
  color: var(--ink-soft);
  line-height: 1.85;
}

.auth-assurance {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 30px;
  padding-top: 22px;
  color: var(--mineral);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.65;
}

.auth-assurance .ui-icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.auth-card {
  padding: clamp(26px, calc(var(--col) * 0.04), 42px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-card__heading {
  margin-bottom: 28px;
}

.auth-card__heading h1,
.auth-card__heading h2 {
  margin: 12px 0 8px;
  font-size: clamp(1.65rem, calc(var(--col) * 0.03), 2.2rem);
  letter-spacing: -0.035em;
}

.auth-card__heading p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.65;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-form .field-group {
  display: grid;
  gap: 8px;
}

.auth-form label:not(.auth-consent) {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.auth-form input:focus {
  border-color: var(--brand);
  outline: 3px solid rgba(61, 77, 101, 0.14);
}

.auth-form small {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.auth-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.6;
}

.auth-consent input {
  margin-top: 4px;
}

.auth-consent a,
.auth-card__links a {
  color: var(--brand);
  font-weight: 700;
}

.auth-card__links {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line-soft);
  font-size: 0.84rem;
  text-align: center;
}

.flash-region:empty {
  display: none;
}

.flash-region {
  position: relative;
  z-index: 40;
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 12px 12px 16px;
  color: var(--success);
  border: 1px solid rgba(65, 107, 88, 0.25);
  border-radius: var(--radius-sm);
  background: #f3f8f4;
  font-size: 0.9rem;
  transition: opacity 260ms ease, transform 260ms ease;
}

.flash > span {
  flex: 1;
}

.flash.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.flash__dismiss {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: inherit;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  cursor: pointer;
  opacity: 0.6;
}

.flash__dismiss:hover {
  opacity: 1;
}

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

.flash--alert {
  color: var(--danger);
  border-color: rgba(154, 76, 71, 0.24);
  background: #fbf1ef;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2.1fr repeat(3, 1fr);
  gap: 54px;
  padding-block: 64px;
}

.wordmark--footer {
  color: white;
}

.site-footer__brand p {
  max-width: 340px;
  margin-top: 18px;
  margin-bottom: 0;
  color: #bdb4bc;
  font-size: 0.86rem;
}

.footer-links {
  display: grid;
  align-content: start;
  /* 13.4px 링크에 40px 행(32 + 8)은 데스크톱 간격이다. 한 열 안에서는 링크 열두
     개가 그대로 화면 하나가 된다 — 마당을 다 보고 내려온 사람에게 두 번째 빈
     화면을 주는 셈이었다. */
  gap: 2px;
}

.footer-links__title {
  margin-bottom: 8px;
  color: white;
  font-size: 0.82rem;
  font-weight: 720;
}

.footer-links a {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  color: #bdb4bc;
  font-size: 0.84rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: white;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  color: #938991;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
}

.site-footer__bottom p {
  margin: 0;
}

/* Shared headings and cards */
.page-intro {
  max-width: 790px;
  margin-bottom: 54px;
}

.page-intro h1 {
  max-width: 760px;
  margin-bottom: 20px;
  font-size: clamp(2.45rem, calc(var(--col) * 0.05), 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.06em;
}

.page-intro__lead {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, calc(var(--col) * 0.015), 1.14rem);
  line-height: 1.85;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, calc(var(--col) * 0.04), 3.2rem);
}

.section-heading > p {
  max-width: 500px;
  margin-bottom: 4px;
  color: var(--ink-soft);
}

.section-heading--center {
  display: block;
  text-align: center;
}

.status-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.02em;
}

.feature-note,
.catalog-note,
.policy-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 18px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.88rem;
  line-height: 1.65;
}

.feature-note p,
.catalog-note p,
.policy-notice p {
  margin: 0;
}

.feature-note strong,
.catalog-note strong,
.policy-notice strong {
  color: var(--ink);
}

.feature-note--wide {
  max-width: 840px;
  margin: 34px auto 0;
}

.preview-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  color: var(--ink-faint);
  font-size: 0.78rem;
  line-height: 1.5;
}

.preview-note--center {
  justify-content: center;
  margin-top: 28px;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-block: 24px;
}

.pillar-grid > div {
  min-width: 0;
  display: grid;
  justify-items: center;
  padding: 15px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

/* 라벨은 칸의 직계 자식이다. 느슨한 `span` 은 간지 글자까지 잔글씨로 끌어내린다. */
.pillar-grid > div > span,
.pillar-grid small {
  color: var(--ink-faint);
  font-size: 0.66rem;
}

.pillar-grid strong {
  margin-block: 4px;
  color: var(--brand);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.52rem;
  letter-spacing: 0.04em;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.principle-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.principle-card > .ui-icon {
  color: var(--mineral);
}

.principle-card h3 {
  margin: 26px 0 10px;
  font-size: 1.2rem;
}

.principle-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.89rem;
}

/* Guide and pricing */
.chooser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.chooser-card {
  min-height: 290px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* The recommended card marked itself with a plum wash, a colour this site no
   longer speaks; its brass edge is enough. */
.chooser-card--primary {
  border-color: var(--brass-line);
}

.chooser-card__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  float: right;
  color: var(--brand);
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
}

.chooser-card h2 {
  margin-bottom: 12px;
  font-size: 1.55rem;
}

.chooser-card > p:not(.eyebrow) {
  max-width: 490px;
  min-height: 72px;
  color: var(--ink-soft);
}

.journey-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.journey-list li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
}

.journey-list > li > span {
  color: var(--brass-ink);
  font-family: Georgia, serif;
  font-size: 1.25rem;
}

.journey-list h3 {
  margin-bottom: 6px;
  font-size: 1.18rem;
}

.journey-list p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 18px;
  font-weight: 680;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary .ui-icon {
  transition: transform 180ms ease;
}

.faq-list details[open] summary .ui-icon {
  transform: rotate(180deg);
}

.faq-list details p {
  max-width: 740px;
  padding-bottom: 22px;
  color: var(--ink-soft);
}

.pricing-grid {
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-inline: auto;
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.price-card--detail {
  border-color: rgba(74, 44, 70, 0.3);
  box-shadow: var(--shadow);
}

.price-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.price-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--brand);
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
}

.price-card h2 {
  margin-bottom: 12px;
  font-size: 1.65rem;
}

.price-card > p:not(.eyebrow) {
  min-height: 74px;
  color: var(--ink-soft);
}

.check-list {
  display: grid;
  gap: 11px;
  margin: 14px 0 28px;
  padding: 20px 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.check-list .ui-icon {
  color: var(--success);
}

.price-card .button {
  margin-top: auto;
}

.catalog-note {
  max-width: 900px;
  margin: 18px auto 0;
}

.catalog-note--wide {
  max-width: none;
  margin-top: 24px;
}

.catalog-price-list {
  display: grid;
  gap: 0;
  margin: 14px 0 28px;
  padding: 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.catalog-price-list li {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.catalog-price-list li:last-child {
  border-bottom: 0;
}

.catalog-price-list strong {
  color: var(--ink);
  white-space: nowrap;
}

.catalog-empty {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 28px;
  padding: 24px;
  color: var(--ink-soft);
  border-block: 1px solid var(--line);
  text-align: center;
}

.catalog-empty p,
.catalog-empty h3 {
  margin: 0;
}

.catalog-empty--wide {
  min-height: 190px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.catalog-empty--wide > .ui-icon {
  color: var(--mineral);
}

.point-pack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.point-pack-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.point-pack-card--recommended {
  border-color: rgba(77, 108, 125, 0.58);
  box-shadow: inset 0 0 0 1px rgba(77, 108, 125, 0.14), var(--shadow);
}

.point-pack-card__heading {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--mineral);
  flex-wrap: wrap;
}

.purchase-intent {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin: -16px 0 42px;
  padding: 24px 0;
  border-block: 2px solid var(--ink);
}

.purchase-intent h2 {
  margin: 4px 0 8px;
  font-size: clamp(1.5rem, calc(var(--col) * 0.03), 2.2rem);
}

.purchase-intent p:last-child {
  margin: 0;
  color: var(--ink-soft);
}

.point-pack-card h3 {
  margin: 24px 0 4px;
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
}

.point-pack-card > p {
  min-height: 42px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.point-pack-card > strong {
  margin: 20px 0 18px;
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
}

.point-pack-card .button {
  margin-top: auto;
}

.point-pack-card form {
  width: 100%;
  margin-top: auto;
}

.point-pack-card form .button {
  margin-top: 0;
}

/* Sandbox payment checkout */
.checkout-shell {
  max-width: 1080px;
}

.checkout-heading {
  max-width: 700px;
  margin-bottom: 42px;
}

.checkout-heading h1 {
  margin: 8px 0 14px;
  font-size: clamp(2.35rem, calc(var(--col) * 0.05), 4.2rem);
  letter-spacing: -0.045em;
}

.checkout-heading > p:last-child {
  max-width: 640px;
  margin: 0;
  color: var(--ink-soft);
}

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 22px;
  align-items: start;
}

.checkout-card,
.checkout-assurance {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.checkout-card {
  padding: clamp(24px, calc(var(--col) * 0.04), 42px);
}

.checkout-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--mineral);
}

.checkout-card h2 {
  margin: 28px 0 24px;
  font-size: clamp(1.55rem, calc(var(--col) * 0.03), 2.15rem);
}

.checkout-summary {
  margin: 0 0 30px;
  border-block: 1px solid var(--line);
}

.checkout-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 2px;
}

.checkout-summary > div + div {
  border-top: 1px solid var(--line-soft);
}

.checkout-summary dt {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.checkout-summary dd {
  margin: 0;
  font-weight: 730;
  font-variant-numeric: tabular-nums;
}

.checkout-action__status {
  min-height: 24px;
  margin: 12px 2px 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-align: center;
}

.checkout-complete {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 14px 16px;
  color: var(--success);
  border-radius: var(--radius-sm);
  background: #f3f8f4;
}

.checkout-assurance {
  padding: 28px;
}

.checkout-assurance h2 {
  margin: 0 0 18px;
  font-size: 1.1rem;
}

.checkout-assurance ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkout-assurance li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink);
  font-size: 0.9rem;
}

.checkout-assurance li .ui-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--success);
}

.checkout-assurance > p {
  margin: 24px 0 16px;
  padding-top: 20px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}

/* Feature entry and forms */
.feature-entry__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
  align-items: start;
  gap: 80px;
}

.feature-entry__copy {
  position: sticky;
  top: 132px;
  padding-top: 28px;
}

.feature-entry__copy h1,
.chat-entry__copy h1 {
  margin-bottom: 22px;
  font-size: clamp(2.7rem, calc(var(--col) * 0.05), 4.7rem);
  line-height: 1.08;
}

.chat-entry__copy h1 {
  font-size: clamp(2.7rem, calc(var(--col) * 0.042), 3.5rem);
  word-break: keep-all;
}

.feature-entry__copy > p:not(.eyebrow),
.chat-entry__copy > p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.85;
}

.fact-interpretation-key {
  display: grid;
  gap: 12px;
  margin-block: 30px;
}

.fact-interpretation-key > div {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 12px;
}

.fact-interpretation-key p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.entry-card {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.entry-card__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.entry-card__header h2 {
  margin-bottom: 0;
  font-size: 1.65rem;
}

.entry-form {
  display: grid;
  gap: 22px;
  padding-top: 26px;
}

.profile-options {
  border-block: 1px solid var(--line);
}

.profile-options summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 12px;
  cursor: pointer;
  list-style: none;
}

.profile-options summary::-webkit-details-marker {
  display: none;
}

.profile-options summary > span {
  display: grid;
  gap: 3px;
}

.profile-options summary strong {
  font-size: 0.87rem;
}

.profile-options summary small {
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.profile-options summary .ui-icon {
  transition: transform 180ms ease;
}

.profile-options[open] summary .ui-icon {
  transform: rotate(180deg);
}

.profile-options__fields {
  display: grid;
  gap: 20px;
  padding: 8px 0 22px;
}

.field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field > label,
.field legend {
  display: block;
  margin-bottom: 8px;
  font-size: 0.86rem;
  font-weight: 690;
}

.field label span,
.field legend span {
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 520;
}

/* A control is a control wherever it stands. Keying this on a short list of
   container classes is what left the 환불 사유 select 23px tall and the 탈퇴
   비밀번호 field 34px with the browser's own chrome: their forms were simply not
   on the list. Everything that takes typing or a choice is matched here, and the
   things that are really buttons or boxes are named out. */
input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="file"]),
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fffefb;
  /* `font: inherit` had these picking up whatever the panel around them was set
     to — 11.68px for the 무물 select inside a 0.73rem block. Under 16px iOS also
     zooms the page on focus, so the size is stated rather than inherited. */
  font-size: 1rem;
  line-height: 1.4;
}

input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="file"]):hover,
select:hover,
textarea:hover {
  border-color: var(--line-strong);
}

.field small,
.form-footnote {
  display: block;
  margin: 6px 0 0;
  color: var(--ink-faint);
  font-size: 0.74rem;
  line-height: 1.55;
}

.field-row {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 12px;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.segmented-control--three {
  grid-template-columns: repeat(3, 1fr);
}

.segmented-control label {
  position: relative;
}

.segmented-control input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.segmented-control span {
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 8px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  cursor: pointer;
}

.segmented-control input:checked + span {
  color: var(--brand);
  border-color: rgba(74, 44, 70, 0.45);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(74, 44, 70, 0.1);
}

.segmented-control input:focus-visible + span {
  outline: 3px solid rgba(77, 108, 125, 0.72);
  outline-offset: 3px;
}

.check-field {
  min-height: 54px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  cursor: pointer;
}

.check-field input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--brand);
}

.check-field span {
  display: grid;
  gap: 2px;
}

.check-field strong {
  font-size: 0.86rem;
}

.check-field small {
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.person-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.person-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  color: var(--mineral);
}

.person-card__top > span {
  color: var(--line-strong);
  font-family: Georgia, serif;
}

.person-card h2 {
  margin-bottom: 10px;
  font-size: 1.45rem;
}

.person-card > p:not(.eyebrow),.preview-note) {
  min-height: 70px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.relationship-knot span {
  position: absolute;
  top: 9px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  background: var(--paper);
}

.relationship-knot span:first-child { left: 1px; }
.relationship-knot span:last-child { right: 1px; }

.field--compact {
  margin-top: 20px;
}

.catalog-cost {
  min-height: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0 0;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.catalog-cost span {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.catalog-cost strong {
  color: var(--brand);
  font-size: 1.25rem;
}

.feature-empty-state {
  max-width: 700px;
  margin-inline: auto;
}

/* Four peers in three columns left 장기 운세 alone on a second row, a third of
   the width, reading as an afterthought rather than the fourth of a set. */
.fortune-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.fortune-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* 하루 운세 is the card people come back for. It marked itself with the same plum
   wash the 이용 안내 card used; the edge and the one filled button carry it. */
.fortune-card--today {
  border-color: var(--brass-line);
  box-shadow: var(--shadow);
}

.fortune-card--muted {
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--paper));
}

.fortune-unlock-form {
  display: grid;
  gap: 9px;
  margin-top: auto;
}

.fortune-card__top {
  min-height: 54px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 32px;
}

.fortune-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--brass-ink);
  border-radius: 50%;
  background: var(--brass-soft);
}

.fortune-card h2 {
  margin-bottom: 12px;
  font-size: 1.5rem;
}

.fortune-card > p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* The list closed with a rule and .catalog-cost opened with one, so every card
   carried a 46px empty band framed by two hairlines. The cost row already draws
   the divider; the list only needs the one above it. */
.fortune-card ul {
  display: grid;
  gap: 7px;
  margin: 8px 0 4px;
  padding: 18px 0 0 20px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}

/* The cost and its button travel together to the foot of the card, so uneven
   card content leaves its slack above the divider rather than inside it. */
.fortune-card .catalog-cost {
  margin-top: auto;
}

.fortune-card > .button,
.fortune-card .fortune-unlock-form {
  margin-top: 14px;
}

.chat-entry__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 80px;
}

.question-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 28px;
}

.question-examples span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: var(--brand);
  border: 1px solid rgba(74, 44, 70, 0.16);
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  font-size: 0.78rem;
}

.chat-preview {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.chat-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 4px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
}

.chat-preview__header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-preview__header > span {
  color: var(--ink-faint);
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5b8c70;
  box-shadow: 0 0 0 4px rgba(91, 140, 112, 0.12);
}

.chat-preview__messages {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding-block: 28px;
}

.message {
  max-width: 82%;
  padding: 13px 15px;
  border-radius: var(--radius-lg);
  font-size: 0.88rem;
}

.message--user {
  align-self: flex-end;
  color: white;
  border-bottom-right-radius: 5px;
  background: var(--brand);
}

.message--assistant {
  display: grid;
  grid-template-columns: 29px 1fr;
  gap: 10px;
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  background: var(--surface-soft);
}

.message--assistant .wordmark__seal {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-seal-sm);
  font-size: 0.72rem;
}

.message--assistant p {
  margin: 0;
  color: var(--ink-soft);
}

.chat-composer {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr 40px;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 15px;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fffefb;
  font-size: 0.82rem;
}

.chat-composer button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--brand);
  opacity: 0.48;
}

.chat-preview .preview-note {
  margin-block: 12px;
}

.chat-entry__grid--product:has(.chat-product-shell) {
  grid-template-columns: minmax(270px, 0.58fr) minmax(0, 1.42fr);
  align-items: start;
  gap: 44px;
}

.chat-product-shell {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.62fr) minmax(340px, 1.38fr);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.chat-thread-panel {
  min-width: 0;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 84%, white);
}

.chat-thread-panel__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 16px;
  border-bottom: 1px solid var(--line);
}

.chat-thread-panel__header h2 {
  margin: 0;
  font-size: 1.02rem;
}

.chat-thread-list {
  display: grid;
  margin: 12px 0 18px;
}

.chat-thread-link {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 11px 10px;
  border-radius: var(--radius-md);
  text-decoration: none;
}

.chat-thread-link:hover,
.chat-thread-link.is-active {
  background: var(--brand-soft);
}

.chat-thread-link > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chat-thread-link strong,
.chat-thread-link small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-link strong {
  font-size: 0.78rem;
}

.chat-thread-link small,
.chat-thread-empty {
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.chat-thread-empty {
  padding: 18px 8px;
}

.chat-new-thread {
  display: grid;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.chat-new-thread label {
  font-size: 0.72rem;
  font-weight: 700;
}

.chat-new-thread select {
  min-width: 0;
}

.chat-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-workspace__header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}

.chat-workspace__header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-workspace__header h2 {
  overflow: hidden;
  margin: 0;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-messages {
  min-height: 405px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 24px 20px;
}

.chat-messages .message p {
  margin: 0;
}

.chat-messages .message p + p {
  margin-top: 8px;
}

.chat-messages .message--user p {
  color: white;
}

.chat-messages .message small {
  display: block;
  margin-top: 7px;
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 0.68rem;
}

.chat-workspace__empty {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 32px;
  color: var(--ink-faint);
  text-align: center;
}

.chat-workspace__empty--large {
  min-height: 620px;
}

.chat-workspace__empty h2,
.chat-workspace__empty p {
  margin: 0;
}

.chat-workspace__empty p {
  max-width: 360px;
  font-size: 0.82rem;
}

.chat-composer--active {
  grid-template-columns: minmax(0, 1fr) 42px;
  margin: auto 18px 0;
  padding-left: 13px;
}

.chat-composer--active textarea {
  width: 100%;
  min-height: 58px;
  max-height: 150px;
  resize: vertical;
  padding: 9px 0;
  border: 0;
  outline: 0;
  background: transparent;
  line-height: 1.45;
}

.chat-composer--active button {
  opacity: 1;
}

/* Account shells */
.account-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
}

.account-heading h1 {
  margin-bottom: 9px;
  font-size: clamp(2.3rem, calc(var(--col) * 0.05), 4rem);
}

.account-heading p:last-child {
  margin: 0;
  color: var(--ink-soft);
}

.dashboard-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.dashboard-summary article {
  display: grid;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.dashboard-summary span,
.dashboard-summary small {
  color: var(--ink-faint);
  font-size: 0.75rem;
}

.dashboard-summary strong {
  margin-block: 8px;
  font-size: 1.8rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.55fr;
  gap: 16px;
}

.account-record-list {
  display: grid;
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.account-record {
  min-height: 70px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

a.account-record {
  transition: color 160ms ease, background 160ms ease;
}

a.account-record:hover {
  color: var(--brand);
  background: rgba(74, 44, 70, 0.025);
}

.account-record__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--mineral);
  border-radius: var(--radius-md);
  background: var(--mineral-soft);
}

.account-record__body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.account-record__body strong,
.account-record__body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-record__body small {
  color: var(--ink-faint);
  font-size: 0.74rem;
}

.dashboard-panel {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.panel-heading h2 {
  margin-bottom: 0;
  font-size: 1.35rem;
}

.empty-state {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 36px;
  text-align: center;
}

.empty-state > span,
.signed-out-gate__icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  color: var(--mineral);
  border-radius: 50%;
  background: var(--mineral-soft);
}

.empty-state h3 {
  margin-bottom: 8px;
  font-size: 1.12rem;
}

.empty-state p {
  max-width: 430px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.quick-actions {
  display: grid;
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.quick-actions a {
  min-height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
  font-weight: 620;
  text-decoration: none;
}

.quick-actions a > span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.quick-actions a > span .ui-icon {
  color: var(--mineral);
}

.account-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* The grid already levels each row; a floor of 240px on top of that only forced
   the shorter cards open, leaving up to 155px of nothing between the sentence
   and the link under it. */
.account-menu-grid article {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.account-menu-grid article > span:first-child {
  color: var(--mineral);
}

.account-menu-grid h2 {
  margin: 26px 0 9px;
  font-size: 1.24rem;
}

.account-menu-grid p {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.account-menu-grid .preview-label,
.account-menu-grid .text-link {
  margin-top: auto;
}

.preview-label {
  color: var(--ink-faint);
  font-size: 0.76rem;
}

.account-card-value {
  margin-top: auto;
  color: var(--ink);
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
}

.account-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.account-detail-panel,
.account-recharge {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.account-detail-panel .panel-heading > strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.account-record-list--compact .account-record {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.point-delta {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.point-delta.is-positive {
  color: var(--success);
}

.point-delta.is-negative {
  color: var(--danger);
}

.account-panel-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--ink-faint);
  text-align: center;
}

.account-panel-empty p {
  margin: 0;
  font-size: 0.84rem;
}

.account-recharge {
  margin-top: 18px;
}

.section-heading--compact {
  margin-bottom: 24px;
}

.section-heading--compact h2 {
  font-size: 1.35rem;
}

.point-pack-grid--compact .point-pack-card {
  padding: 20px;
}

.point-pack-grid--compact .point-pack-card h3 {
  margin-top: 12px;
}

.account-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.account-session-row p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.signed-out-gate {
  max-width: 720px;
  display: grid;
  justify-items: center;
  margin: 20px auto 40px;
  padding: 60px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.signed-out-gate h1 {
  margin-bottom: 18px;
  font-size: clamp(2.1rem, calc(var(--col) * 0.05), 3.7rem);
}

.signed-out-gate > p:not(.eyebrow) {
  max-width: 570px;
  margin-bottom: 28px;
  color: var(--ink-soft);
}

.signed-out-gate__assurance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 25px;
  color: var(--ink-faint);
  font-size: 0.78rem;
}

.signed-out-gate__links {
  display: flex;
  gap: 20px;
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

/* Company, contact, and policy documents */
/* 면책·회사소개·문의도 같은 판에 찍힌다. 한 제품 안에서 문서가 두 종류의
   종이에 앉아 있을 이유가 없다. */
.editorial-document {
  padding: 42px;
  color: var(--ink);
  border: 1px solid var(--hanji-edge);
  border-radius: var(--radius-xs);
  background: var(--hanji);
  box-shadow: inset 0 0 0 6px var(--hanji), inset 0 0 0 7px var(--hanji-rule);
}

.company-story {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
}

.company-story__statement h2 {
  margin-bottom: 0;
  font-size: clamp(1.8rem, calc(var(--col) * 0.04), 2.7rem);
}

.company-story__copy p {
  color: var(--ink-soft);
}

.company-story__copy p:last-child {
  margin-bottom: 0;
}

.company-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-block: 16px 52px;
}

.company-values article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.company-values h2 {
  margin: 0 0 9px;
  font-size: 1.16rem;
}

.company-values p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.83rem;
}

.company-details {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 48px;
  padding: 36px 0;
  border-block: 1px solid var(--line);
}

.company-details h2 {
  font-size: 1.6rem;
}

.company-details dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 30px;
  margin: 0;
}

.company-details dl > div {
  display: grid;
  grid-template-columns: 125px 1fr;
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.83rem;
}

.company-details__wide {
  grid-column: 1 / -1;
}

.company-details dt {
  color: var(--ink-faint);
}

.company-details dd {
  margin: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 16px;
}

.contact-primary,
.contact-hours {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.contact-primary__icon,
.contact-hours > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 34px;
  color: var(--brand);
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
}

.contact-primary h2,
.contact-hours h2 {
  overflow-wrap: anywhere;
  font-size: clamp(1.35rem, calc(var(--col) * 0.03), 2rem);
}

.contact-primary > p:not(.eyebrow),
.contact-hours > p:not(.eyebrow) {
  color: var(--ink-soft);
}

.contact-primary .button {
  margin-top: 10px;
}

.contact-checklist {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 50px;
  margin-top: 56px;
}

.contact-checklist h2 {
  font-size: 1.7rem;
}

.contact-checklist ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.contact-checklist li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 15px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}

.contact-checklist li > span {
  color: var(--brass-ink);
  font-family: Georgia, serif;
}

.contact-checklist p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.policy-notice {
  max-width: var(--reading-width);
  margin: -20px auto 18px;
  border-color: rgba(177, 132, 61, 0.3);
  background: var(--brass-soft);
}

/* 약관·처리방침·환불정책은 조문이다 — 목판으로 찍은 한 장이지, 카드에 담은
   마크다운이 아니다. 전에는 h2 하나와 p 하나가 흰 상자 안에서 반복될 뿐이라,
   41개 요소 중 클래스를 가진 것이 10개였다. 페이지가 디자인되지 않았다는 뜻이다.

   여기서 쓰는 것은 인쇄물의 구조다. 변란(邊欄)은 바깥 테두리와 안쪽 괘선 두
   겹이고, 조 번호는 본문에서 빠져나와 판의 여백에 선다. 조 번호는 장식이 아니라
   실제 순서이므로 여백에 세울 자격이 있다 — 순서가 아닌 것에 번호를 붙이면
   그때부터는 장식이다. */
.legal-document {
  max-width: var(--reading-width);
  margin-inline: auto;
  padding: 52px 48px;
  color: var(--ink);
  border: 1px solid var(--hanji-edge);
  border-radius: var(--radius-xs);
  background: var(--hanji);
  /* 변란: 테두리 안쪽으로 한 칸 띄운 두 번째 괘선. 그림자가 아니라 선이므로
     번짐이 없고, --shadow 토큰 규칙과도 다투지 않는다. */
  box-shadow: inset 0 0 0 6px var(--hanji), inset 0 0 0 7px var(--hanji-rule);
}

.legal-document section {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0 20px;
}

/* 괘선은 한 줄이 아니라 두 줄이다. 굵은 줄 하나는 상자를 나누고, 가는 줄이
   따라붙으면 판이 접힌 자리가 된다. */
.legal-document section + section {
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px solid var(--hanji-rule);
  box-shadow: 0 -3px 0 -2px var(--hanji-rule);
}

.legal-document h2 {
  display: contents;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* 조 번호는 여백에 선다. 본문과 같은 줄에 앉히면 다시 문장이 되고, 문장이 되면
   구조가 아니라 접두사가 된다. */
.legal-document .clause__mark {
  grid-column: 1;
  padding-top: 0.15em;
  color: var(--brass-ink);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.legal-document h2 + * {
  grid-column: 2;
  margin-top: 10px;
}

.legal-document section > *:not(.clause__mark) {
  grid-column: 2;
}

.legal-document p + p,
.legal-document ul + p {
  margin-top: 12px;
}

.legal-document p,
.legal-document li {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.85;
}

.legal-document p:last-child,
.legal-document ul:last-child {
  margin-bottom: 0;
}

.legal-document a {
  color: var(--brand);
}

.legal-document ul {
  padding-left: 22px;
}

/* 간기(刊記). 문서는 날짜 한 줄로 끝나지 않고, 언제 찍은 판인지를 밝히고 인장을
   찍으며 끝난다. 인장은 이 저장소에 이미 있는 모양(--radius-seal)이고, 붉은 것은
   클라이언트 워드마크의 낙관과 같은 자리에 있다. */
.document-colophon {
  max-width: var(--reading-width);
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.82rem;
}

.document-colophon::after {
  content: "運";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--hanji);
  border-radius: var(--radius-seal-sm);
  background: var(--accent);
  font-size: 0.86rem;
  line-height: 1;
}

.disclaimer-lead {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 24px;
  margin-bottom: 16px;
}

.disclaimer-lead > span {
  color: var(--mineral);
}

.disclaimer-lead h2 {
  font-size: 1.6rem;
}

.disclaimer-lead p {
  margin: 0;
  color: var(--ink-soft);
}

.disclaimer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.disclaimer-grid article {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.disclaimer-grid .ui-icon {
  color: var(--mineral);
}

.disclaimer-grid h2 {
  margin: 24px 0 9px;
  font-size: 1.18rem;
}

.disclaimer-grid p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

[hidden] {
  display: none !important;
}

.form-errors {
  padding: 16px 18px;
  color: #713b38;
  border: 1px solid rgba(154, 76, 71, 0.3);
  border-radius: var(--radius-sm);
  background: #f8e9e6;
}

.form-errors__title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.form-errors ul {
  margin: 9px 0 0;
  padding-left: 24px;
  font-size: 0.82rem;
}

.page-shell--reading {
  max-width: 1040px;
}

.result-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
}

.result-heading h1 {
  margin-bottom: 12px;
  font-size: clamp(2.3rem, calc(var(--col) * 0.05), 4.1rem);
}

.result-heading p:not(.eyebrow) {
  max-width: 690px;
  margin: 0;
  color: var(--ink-soft);
}

.result-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  align-items: start;
  gap: 18px;
}

.result-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.result-card__topline,
.element-counts__heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}

.result-card__topline h2,
.element-counts__heading h2 {
  margin: 0;
  font-size: 1.52rem;
}

.result-card__topline > span,
.element-counts__heading > p {
  margin: 3px 0 0;
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.pillar-grid--result {
  margin-block: 28px 34px;
}

.pillar-grid--result > div {
  min-height: 126px;
  align-content: center;
}

.pillar-grid--result strong {
  font-size: clamp(1.35rem, calc(var(--col) * 0.03), 1.85rem);
}

.element-counts {
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.element-counts__heading > p {
  max-width: 160px;
  text-align: right;
}

.element-counts__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 22px;
}

.element-count {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--ink-soft);
}

/* The track height is a token rather than a value so a scope can shorten it
   without out-specifying the --0 rule below. When .reading-sheet set the height
   directly, its two-class selector beat .element-count--0's one and the zero
   bars kept the full 64px — an element the chart does not contain was drawn as
   the tallest block on the graph, taller than the 금 4 beside it. */
.element-count > span {
  width: 100%;
  height: var(--bar-track, 86px);
  align-self: end;
  border-radius: var(--radius-bar);
  transform-origin: bottom;
}

.element-count--1 > span { transform: scaleY(0.25); }
.element-count--2 > span { transform: scaleY(0.38); }
.element-count--3 > span { transform: scaleY(0.5); }
.element-count--4 > span { transform: scaleY(0.62); }
.element-count--5 > span { transform: scaleY(0.74); }
.element-count--6 > span { transform: scaleY(0.84); }
.element-count--7 > span { transform: scaleY(0.92); }
.element-count--8 > span { transform: scaleY(1); }

/* 오방색, and they live here rather than in public_redesign.css because the share
   screen loads this sheet on its own and was drawing all five in one blue-grey. */
.element-count[data-element] > span { background: var(--element-ink); }
.element-count[data-element] strong b { color: var(--element-ink); }

/* None of this element is present. A stub bar at 12% still reads as "a little",
   which is the one thing it is not; a rule on the baseline reads as none. It has
   to sit after the colours so it is the one that lands.

   The rule is painted onto a full-height track rather than shrinking the track to
   2px: the cell is a grid, so a 2px box collapses its row and the zero columns
   float free of the four that still have a bar to stand on. */
.element-count--0 > span,
.element-count--0[data-element] > span {
  transform: none;
  border-radius: 0;
  background: linear-gradient(var(--line-strong), var(--line-strong)) bottom / 100% 2px no-repeat;
}

.element-count strong {
  font-size: 0.82rem;
}

.element-count strong b {
  color: var(--brand);
  font-size: 1rem;
}

.element-count small {
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.result-card--aside {
  position: sticky;
  top: 112px;
}

.result-card--aside h2 {
  margin: 22px 0 14px;
  font-size: 1.65rem;
}

.result-card--aside > p {
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.quiet-checklist {
  display: grid;
  gap: 10px;
  margin: 24px 0;
  padding: 20px 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.quiet-checklist li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.quiet-checklist .ui-icon {
  flex: 0 0 auto;
  color: var(--success);
}

.reading-sample {
  margin: -4px 0 22px;
  border-bottom: 1px solid var(--line);
}

.reading-sample summary {
  padding: 0 0 14px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.reading-sample p {
  margin: 0;
  padding: 16px;
  color: var(--ink-soft);
  border-left: 2px solid var(--brass);
  background: var(--surface-soft);
  font-size: 0.78rem;
  line-height: 1.7;
}

.reading-sample small {
  display: block;
  padding: 9px 0 16px;
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.text-link--center {
  display: block;
  margin-top: 14px;
  color: var(--ink-faint);
  font-size: 0.78rem;
  text-align: center;
}

.result-card--aside form {
  width: 100%;
}

.offer-balance {
  margin: 12px 0 0;
  color: var(--ink-faint);
  font-size: 0.76rem;
  text-align: center;
}

.offer-balance strong {
  color: var(--ink-soft);
  font-weight: 700;
}

.reading-document__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 44px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.reading-document__header h1 {
  margin: 7px 0 10px;
  font-size: clamp(2.35rem, calc(var(--col) * 0.06), 4.25rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.055em;
}

.reading-document__header > div > p:last-child {
  color: var(--ink-faint);
  font-size: 0.8rem;
}

.reading-summary {
  margin-bottom: 58px;
  padding: 28px 30px;
  border: 1px solid color-mix(in srgb, var(--brass) 24%, var(--line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-soft) 78%, white);
  box-shadow: var(--shadow);
}

.reading-summary > p {
  margin-top: 15px;
  color: var(--ink);
  font-size: clamp(1.1rem, calc(var(--col) * 0.023), 1.42rem);
  line-height: 1.85;
  word-break: keep-all;
}

.reading-sections {
  display: grid;
  gap: 0;
}

.reading-section {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 25px;
  padding-block: 42px;
  border-top: 1px solid var(--line);
}

.reading-section__number {
  padding-top: 2px;
  color: var(--brass-ink);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
}

.reading-section h2 {
  margin: 7px 0 22px;
  font-size: clamp(1.65rem, calc(var(--col) * 0.03), 2.25rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.reading-prose {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 2;
  word-break: keep-all;
}

.reading-prose p + p {
  margin-top: 18px;
}

.reading-section aside {
  margin-top: 25px;
  padding: 19px 21px;
  border-left: 2px solid var(--brass);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.75;
}

.reading-section aside strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.reading-state-card,
.reading-empty {
  min-height: 330px;
}

.reading-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.reading-list__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 16px;
  min-height: 84px;
  padding: 16px 20px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 160ms ease;
}

.reading-list__item + .reading-list__item {
  border-top: 1px solid var(--line);
}

.reading-list__item:hover {
  background: var(--surface-soft);
}

.reading-list__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--brass-ink);
}

.reading-list__body {
  display: grid;
  gap: 5px;
}

.reading-list__body strong {
  font-size: 1.06rem;
  font-weight: 600;
}

.reading-list__body small {
  color: var(--ink-faint);
  font-size: 0.75rem;
}

.share-management {
  display: grid;
  gap: 18px;
  margin: 64px 0 0;
  padding: 26px;
  border: 1px solid color-mix(in srgb, var(--mineral) 22%, var(--line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 88%, var(--mineral-soft));
  box-shadow: var(--shadow);
}

.share-management__heading,
.share-manage-card__heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.share-management__heading .eyebrow,
.share-manage-card__heading .eyebrow {
  margin-bottom: 3px;
}

.share-management__heading h2,
.share-manage-card__heading h2 {
  margin: 0;
  font-size: 1.2rem;
}

.share-management__icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--mineral);
  border-radius: 50%;
  background: var(--mineral-soft);
}

.share-management > p,
.share-management > small {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.share-management > small {
  color: var(--ink-faint);
  text-align: center;
}

.share-management__links {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.share-management__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 17px;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 11px 14px;
  text-decoration: none;
}

.share-management__link + .share-management__link {
  border-top: 1px solid var(--line);
}

.share-management__link span {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.share-management__link strong {
  color: var(--success);
  font-size: 0.75rem;
}

.share-manage-heading {
  max-width: 700px;
}

.share-manage-card {
  max-width: 700px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.share-manage-card__heading {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  padding-bottom: 23px;
  border-bottom: 1px solid var(--line);
}

.share-issued-link {
  margin-block: 24px;
  padding: 20px;
  border-radius: var(--radius-sm);
  background: var(--mineral-soft);
}

.share-issued-link label {
  display: block;
  margin-bottom: 9px;
  font-size: 0.78rem;
  font-weight: 720;
}

.share-issued-link input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--mineral) 24%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.8rem;
}

.share-issued-link p {
  margin: 10px 0 15px;
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.share-token-unavailable {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-block: 24px;
  padding: 17px;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.share-token-unavailable .ui-icon {
  flex: 0 0 auto;
  color: var(--mineral);
}

.share-token-unavailable p {
  margin: 0;
  font-size: 0.8rem;
}

.share-manage-meta {
  margin: 0;
  border-top: 1px solid var(--line);
}

.share-manage-meta > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}

.share-manage-meta dt {
  color: var(--ink-faint);
}

.share-manage-meta dd {
  margin: 0;
  color: var(--ink-soft);
}

.share-manage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.share-site-header {
  color: var(--night-ink);
  border-bottom: 1px solid var(--night-line);
  background: var(--night);
}

.share-site-header__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.share-site-header__label {
  color: var(--night-ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.035em;
}

.share-site-footer {
  padding-block: 28px;
  color: var(--night-ink-soft);
  border-top: 1px solid var(--night-line);
  background: var(--night);
}

.share-site-footer .page-shell {
  display: flex;
  justify-content: space-between;
  gap: 28px;
}

.share-site-footer p {
  margin: 0;
  font-size: 0.7rem;
}

.page-shell--shared-result {
  width: min(calc(100% - 48px), 820px);
}

.shared-result__header {
  max-width: 650px;
  margin: 0 auto 42px;
  text-align: center;
}

.shared-result__seal {
  display: grid;
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  place-items: center;
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 50%;
  background: var(--brand-soft);
}

.shared-result__header h1,
.shared-result-unavailable h1 {
  margin-bottom: 14px;
  font-size: clamp(2.45rem, calc(var(--col) * 0.07), 4.4rem);
  font-weight: 520;
  letter-spacing: -0.055em;
}

.shared-result-unavailable > p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

/* 공유본의 풀이는 이제 소유자 화면과 같은 판식 지면(`.reading-document`)이라
   자기 변란과 첫 대목 규칙을 스스로 들고 있다. 예전의 `.shared-reading-sections`
   보정은 그 지면 위에 군더더기 선을 하나 더 그을 뿐이라 사라졌다. */
.shared-chart-card {
  padding: 36px;
  border-bottom: 1px solid var(--line);
}

.shared-result--unavailable {
  display: grid;
  min-height: 68vh;
  align-items: center;
}

.shared-result-unavailable {
  max-width: 590px;
  margin-inline: auto;
  text-align: center;
}

.shared-result-unavailable .button {
  margin-top: 27px;
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 1080px */
  .wordmark__tagline { display: none; }
  .site-header__inner { gap: 18px; }
  .point-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-entry__grid { grid-template-columns: 0.8fr 1.2fr; gap: 42px; }
  .chat-entry__grid--product:has(.chat-product-shell) { grid-template-columns: 1fr; }
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 880px */
  .site-header__inner { grid-template-columns: 1fr auto; }
  .feature-entry__grid,.chat-entry__grid,.company-story,.company-details,.contact-checklist { grid-template-columns: 1fr; }
  .feature-entry__copy { position: static; padding-top: 0; }
  .feature-entry__copy > p:not(.eyebrow), .chat-entry__copy > p:not(.eyebrow) { max-width: 680px; }
  .fortune-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-entry__grid { gap: 48px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .account-detail-grid { grid-template-columns: 1fr; }
  .account-menu-grid { grid-template-columns: repeat(2, 1fr); }
  .company-story { gap: 30px; }
  .company-details { gap: 20px; }
  .contact-checklist { gap: 20px; }
  .site-footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; }
  .result-layout { grid-template-columns: 1fr; }
  .result-card--aside { position: static; }
  .reading-document__header { margin-bottom: 34px; }
  .checkout-grid { grid-template-columns: 1fr; }
  .auth-shell { grid-template-columns: 1fr; gap: 42px; max-width: 680px; }
  .auth-intro h1 { font-size: clamp(2.65rem, calc(var(--col) * 0.08), 4rem); }
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 760px */
  /* 여백에 세운 조 번호는 판이 넓을 때 성립한다. 390px에서는 92px 여백이 폭의
     4분의 1을 가져가 한 문장이 일곱 줄이 됐다. 좁아지면 번호는 표제 위로
     올라간다 — 여백이 없으면 여백에 세울 수 없다. */
  .legal-document {
    padding: 34px 22px;
  }

  .legal-document section {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .legal-document .clause__mark {
    grid-column: 1;
    margin-bottom: 6px;
    padding-top: 0;
    font-size: 0.84rem;
  }

  .legal-document section > *:not(.clause__mark),
  .legal-document h2 + * {
    grid-column: 1;
  }

  .editorial-document {
    padding: 26px 20px;
  }
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 680px */
  .page-shell { width: min(calc(100% - 32px), var(--content-width)); }
  .section-pad { padding-block: 64px; }
  .section-pad--tight { padding-block: 54px; }
  .section-pad--bottom { padding-top: 48px; padding-bottom: 80px; }
  .site-header__inner { min-height: 64px; }
  .wordmark__seal { width: 32px; height: 32px; }
  .page-intro { margin-bottom: 38px; }
  .page-intro h1 { font-size: clamp(2.25rem, calc(var(--col) * 0.12), 3.25rem); }
  .page-intro__lead { font-size: 0.98rem; }
  .section-heading { display: block; margin-bottom: 28px; }
  .section-heading > p { margin-top: 14px; }
  .pillar-grid { gap: 5px; }
  .pillar-grid > div { padding-inline: 3px; }
  .pillar-grid strong { font-size: 1.23rem; }
  .chooser-grid,.pricing-grid,.point-pack-grid,.fortune-grid,.principle-grid,.company-values,.contact-grid,.disclaimer-grid,.account-menu-grid { grid-template-columns: 1fr; }
  .journey-list li { grid-template-columns: 48px 1fr; gap: 12px; }
  .entry-card { padding: 23px 18px; }
  .field-row { grid-template-columns: 1fr; }
  .segmented-control--three { grid-template-columns: 1fr; }
  .fact-interpretation-key > div { grid-template-columns: 100px 1fr; }
  .relationship-knot { margin: -4px auto; transform: rotate(90deg); }
  .person-card > p:not(.eyebrow) { min-height: auto; }
  .chat-preview { padding: 16px; }
  .chat-preview__messages { min-height: 270px; }
  .message { max-width: 92%; }
  .chat-product-shell { grid-template-columns: 1fr; }
  .chat-thread-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-thread-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .chat-workspace__empty--large { min-height: 340px; }
  .chat-messages { min-height: 340px; }
  .chat-composer--active { margin-inline: 12px; }
  /* The way back is not the reason anyone opened the page. Stretching it made it
     the largest thing on the screen, sitting above the content it leads away
     from; it goes first, small, the way a back link reads. */
  .account-heading { display: grid; align-items: start; gap: 18px; }
  .account-heading > div { order: 1; }
  .account-heading .button { justify-self: start; width: auto; }
  .dashboard-summary { grid-template-columns: 1fr; }
  .account-record { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; }
  .account-record > .ui-icon { display: none; }
  .account-record .status-pill { grid-column: 2; width: max-content; }
  .account-record-list--compact .account-record { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .account-detail-panel, .account-recharge { padding: 21px 17px; }
  .account-session-row { display: grid; }
  .account-session-row form, .account-session-row .button { width: 100%; }
  .signed-out-gate { padding: 38px 20px; }
  .auth-shell { gap: 30px; }
  .auth-intro h1 { font-size: clamp(2.4rem, calc(var(--col) * 0.12), 3.2rem); }
  .auth-intro > p:last-of-type { font-size: 0.93rem; }
  .auth-assurance { margin-top: 22px; padding-top: 18px; }
  .auth-card { padding: 25px 20px; }
  .editorial-document { padding: 27px 22px; }
  .company-details dl { grid-template-columns: 1fr; }
  .company-details dl > div { grid-template-columns: 110px 1fr; }
  .company-details__wide { grid-column: auto; }
  .contact-primary, .contact-hours { padding: 26px; }
  .legal-document { padding: 30px 22px; }
  .policy-notice { margin-top: -10px; }
  .disclaimer-lead { grid-template-columns: 1fr; }
  .result-heading { align-items: start; flex-direction: column; }
  .result-card { padding: 22px; }
  .page-shell--reading-document { width: min(calc(100% - 32px), 880px); }
  .reading-document__header { display: grid; gap: 18px; }
  .reading-document__header h1 { font-size: 2.65rem; }
  .reading-summary { padding: 23px 21px; }
  .reading-section { grid-template-columns: 1fr; gap: 12px; padding-block: 34px; }
  .reading-list__item { grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 12px; padding-inline: 15px; }
  .reading-list__item .status-pill { grid-column: 2; width: max-content; }
  .reading-list__item > .ui-icon { grid-column: 3; grid-row: 1 / span 2; }
  .share-management { margin-top: 46px; padding: 21px 18px; }
  .share-manage-card { padding: 24px 19px; }
  .share-manage-card__heading { grid-template-columns: 42px minmax(0, 1fr); }
  .share-manage-card__heading .status-pill { grid-column: 2; width: max-content; }
  .share-manage-actions { display: grid; }
  .share-manage-actions form, .share-manage-actions .button { width: 100%; }
  .share-site-header__inner { min-height: 64px; }
  .share-site-header__label { max-width: 130px; text-align: right; }
  .page-shell--shared-result { width: min(calc(100% - 32px), 820px); }
  .shared-result__header { margin-bottom: 25px; }
  .shared-result__header h1, .shared-result-unavailable h1 { font-size: 2.8rem; }
  .shared-chart-card { padding: 23px 18px; }
  .share-site-footer .page-shell { display: grid; gap: 5px; }
  .checkout-heading { margin-bottom: 30px; }
  .checkout-card, .checkout-assurance { padding: 22px 18px; }
  .checkout-summary > div { align-items: flex-start; }
  .element-counts__heading { display: block; }
  .element-counts__heading > p { max-width: none; text-align: left; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; padding-block: 48px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { display: grid; }
}

@media (max-width: 390px) {
  .page-shell { width: min(calc(100% - 28px), var(--content-width)); }
  .wordmark__mark { height: 24px; }
  .pillar-grid strong { font-size: 1.06rem; }
  .pillar-grid > div > span, .pillar-grid small { font-size: 0.64rem; }
  .chooser-card,.price-card,.fortune-card,.person-card,.dashboard-panel { padding: 22px; }
  .segmented-control span { font-size: 0.82rem; }
  /* Stacked, the chip is the only thing in its row, and a grid item fills its
     track — so it stretched the full width and read as an empty input. */
  .fact-interpretation-key > div { grid-template-columns: 1fr; justify-items: start; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

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

@media print {
  .site-header, .site-footer, .skip-link, .button { display: none !important; }
  body { background: white; }
  .section-pad { padding-block: 20px; }
  .legal-document, .editorial-document { border: 0; box-shadow: none; }
}

/* ------------------------------------------------------------------
   결과 화면 — 밤 위의 한지

   The three screens that carry a finished result (원국, 풀이, 공유본) were the
   only place the film the visitor arrived through disappeared entirely: flat
   grey, stacked white boxes, a spreadsheet where the eight characters should
   be. This puts them back on the night the intro and the four rooms stand on,
   and puts the writing itself on paper.

   The split is not decoration. It is the product's own rule made visible: what
   the calculator worked out sits on the night, engraved; what was written from
   it sits on the sheet, read. A reader can see which is which without being
   told.

   It works by re-pointing the palette rather than by re-colouring parts. Every
   rule in this file already says var(--ink) or var(--line); a rule that names a
   colour twice, once for paper and once for night, is a rule that will be
   corrected once and stay wrong in the other place. Naming the ground once
   means the several hundred rules underneath come along on their own.

   This lives in application.css rather than public_redesign.css because the
   share screen loads only this sheet, and a shared reading is the same reading.
   ------------------------------------------------------------------ */

.reading-world {
  --paper: var(--night);
  --paper-deep: #070c16;
  --surface: var(--night-soft);
  --surface-soft: rgba(0, 0, 0, 0.26);
  --band: var(--night-soft);
  --ink: var(--night-ink);
  --ink-soft: var(--night-ink-soft);
  --ink-faint: rgba(240, 232, 216, 0.56);
  --line: var(--night-line);
  --line-strong: rgba(201, 166, 105, 0.4);
  --brand: var(--brass-light);
  --brand-deep: var(--brass-light);
  --brass: var(--brass-light);
  --brass-ink: var(--brass-light);
  --brass-soft: rgba(201, 166, 105, 0.14);
  /* 주칠 keeps its job — it still marks the numbers — but the pigment that reads
     on paper is 2.6:1 on night. */
  --accent: #c9776a;
  --accent-soft: rgba(201, 119, 106, 0.16);
  --field-well: rgba(0, 0, 0, 0.26);
  --shadow: none;

  /* 오방색 as it survives on night. The paper values are pigment on a light
     ground — 금 #5f5b52 and 수 #23262e simply do not exist on #0e1422 — so each
     keeps its hue and gives up the depth it borrowed from the paper. 백 is the
     one that gains: on night, 금 can finally be white.

     수 is 흑, and 흑 on a dark ground can only be carried by a cool light slate.
     While 목 was a pure blue that put the two 9.4 ΔE apart — the same colour to
     anyone reading eight characters. 청 covers blue-green (청산, 청포도, 청룡),
     so 목 is the one that moves: a celadon that leaves 수 the only cool blue.
     `color_contrast_contract_test.rb` measures both the contrast and the gap. */
  --element-wood: #84c4a4;
  --element-fire: #dd8f8b;
  --element-earth: #d3b276;
  --element-metal: #cdc9bf;
  --element-water: #93a6c2;

  position: relative;
  color: var(--ink);
  background: var(--night);
}

/* The band has to reach the header above it and the footer below it, or the
   page shows a seam of paper at each end. */
.reading-world::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1px 0;
  background: var(--night);
}

.reading-world > * {
  position: relative;
  z-index: 1;
}

.reading-world h1,
.reading-world h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.reading-world .chart-headline {
  color: var(--brass-light);
}

.reading-world .life-cycle-strip {
  background:
    linear-gradient(90deg, var(--night) 40%, rgba(14, 20, 34, 0)) left center,
    linear-gradient(90deg, rgba(14, 20, 34, 0), var(--night) 60%) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 46px 100%, 46px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

.reading-world .life-cycle__now {
  color: var(--night);
}

/* Two fixed columns left half the row empty whenever there was one fact to
   state, which is the usual case for a 상세 사주. The row holds what it has. */
.reading-world .reading-context {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--line);
}

.reading-world .reading-context > div {
  min-width: 210px;
  flex: 0 1 auto;
}

/* 다음 단계 — an action is neither a calculation nor a reading, so it stands on
   the night with the rest of the furniture rather than as a second sheet
   competing with the one that carries the 만세력. */
.reading-world .result-card--aside {
  background: var(--surface);
}

/* One quote vocabulary: a rule in 주칠 down the left, on the sample and on the
   advice alike. */
.reading-world .reading-sample p {
  border-left-color: var(--accent);
}

/* ------------------------------------------------------------------
   한지 — the sheet the writing sits on
   ------------------------------------------------------------------ */

.reading-sheet {
  --paper: var(--hanji);
  --paper-deep: #e6dcc4;
  --surface: rgba(255, 255, 255, 0.5);
  --surface-soft: rgba(139, 73, 66, 0.05);
  --band: rgba(0, 0, 0, 0.03);
  --ink: #241f19;
  --ink-soft: #55504a;
  --ink-faint: #645f56;
  --line: var(--hanji-rule);
  --line-strong: var(--hanji-edge);
  --brand: #3d4d65;
  --brand-deep: #2b384b;
  --brass: #8e6a3c;
  --brass-ink: #795a33;
  --brass-soft: rgba(142, 106, 60, 0.12);
  --accent: #8b4942;
  --accent-soft: rgba(139, 73, 66, 0.1);
  --shadow: none;
  /* An 86px track under a heading and a note left a hand's width of nothing
     above the bars. */
  --bar-track: 64px;

  /* 오행 is the character's own colour, and on paper the paper's values are the
     ones that were tuned for it. .reading-world redefines these for the night it
     stands on, and this sheet sits inside that night, so it takes them back. */
  --element-wood: #20674a;
  --element-fire: #a82128;
  --element-earth: #775917;
  --element-metal: #5f5b52;
  --element-water: #23262e;

  color: var(--ink);
  border: 1px solid var(--hanji-edge);
  border-radius: var(--radius-xs);
  background: var(--hanji);
  box-shadow: var(--shadow-sheet);
}

.reading-sheet .eyebrow {
  color: var(--brand);
}

/* The free taste is part of the same printed sheet, not a second card. Its
   sentences are reviewed, deterministic surfaces selected from the structural
   engine, so the layout reads like two short annotations in the margin. */
.free-reading-preview {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}

.free-reading-preview header h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
}

.free-reading-preview__entries {
  display: grid;
  gap: 0;
  margin-top: 18px;
  border-block: 1px solid var(--line);
}

.free-reading-preview__entries article {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 16px 0;
}

.free-reading-preview__entries article + article {
  border-top: 1px solid var(--line);
}

.free-reading-preview__entries article > span {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.72rem;
  line-height: 1.5;
}

.free-reading-preview__entries h3 {
  margin: 2px 0 6px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.45;
  word-break: keep-all;
}

.free-reading-preview__entries small {
  display: block;
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 700;
}

.free-reading-preview__entries p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.75;
  word-break: keep-all;
}

.free-reading-preview__continuation {
  margin-top: 16px;
  padding: 15px 14px;
  border-left: 2px solid var(--accent);
  background: rgba(139, 73, 66, 0.05);
}

.free-reading-preview__continuation strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.free-reading-preview__continuation p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.65;
  word-break: keep-all;
}

/* ------------------------------------------------------------------
   한지 지면의 안쪽 — the written reading
   ------------------------------------------------------------------ */

/* 변란(匡郭)은 아래 판식 절의 설명을 참고. 선언이 한 곳이어야 하므로 여기 있다. */
.reading-world .reading-document {
  margin-top: 26px;
  padding: clamp(28px, calc(var(--col) * 0.05), 64px) clamp(22px, calc(var(--col) * 0.05), 72px);
  border: 0;
  box-shadow:
    inset 0 0 0 9px var(--hanji),
    inset 0 0 0 10px var(--hanji-edge);
}

/* ------------------------------------------------------------------
   풀이는 판식(版式)을 가진 지면이다

   고치기 전 이 지면의 순서는 제목 → 목차 → 소제목 → 본문 → 인용, 그리고 그것이
   전부였다. 인쇄물의 장치가 하나도 없다. 비교 대상이 같은 저장소 안에 있다:
   **이용약관 화면이 이 유료 풀이보다 더 인쇄물처럼 조판되어 있었다** — 변란도,
   여백에 세운 조 번호도, 두 줄 괘선도, 끝의 간기와 인장도 약관에만 있었다.

   그래서 이 지면이 약관이 이미 쓰던 판식을 가져온다. 더하는 장치는 넷이고
   전부 내용이 실제로 값을 치른 것이다: 판심(무슨 글의 몇 대목인지), 난외(대목
   번호와 근거), 두 줄 괘선(장이 접히는 자리), 간기(무엇으로 언제 찍은 판인지).
   ------------------------------------------------------------------ */

/* 변란(匡郭)은 종이 가장자리를 두 겹으로 둘러 판을 만든다 — 조문 화면의
   `.document-shell` 과 같은 장치이고, 번짐이 없어 `--shadow` 규칙과 다투지 않는다.
   선언은 이 절 위의 `.reading-world .reading-document` 한 곳에 있다.

   판심(版心). 옛 책은 판마다 무슨 책의 몇 번째 장인지를 밝히고 시작한다. 이
   지면은 아무 표시 없이 본문으로 들어가서, 스크롤을 내리고 나면 자기가 무엇을
   읽는 중인지 말해 주는 것이 하나도 남지 않았다. */
.reading-world .reading-document .reading-plate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 30px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 -2px var(--line);
  color: var(--brass-ink);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* 한 지면은 하나의 판에 앉는다. 대목들은 난외 148px + 본문 단으로 조판되는데
   서두의 요약과 차례만 그 판을 무시하고 폭 전체를 쓰고 있었다 — 그래서 이 글을
   여는 한 문장이 자기가 소개하는 본문(34자)보다 긴 60자로 조판됐다. 셋 다 같은
   난외에 라벨을 세우고 같은 단에 글을 놓는다. */
.reading-world .reading-document .reading-summary,
.reading-world .reading-document .reading-toc {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 0 28px;
  align-items: start;
}

/* The reading opens with the one sentence it would give if it had only one, so
   it is set like an opening line rather than filed in a box. */
.reading-world .reading-document .reading-summary {
  margin: 0 0 38px;
  padding: 0;
  border: 0;
  background: none;
}

.reading-world .reading-document .reading-summary > p {
  max-width: 26em;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.12rem, calc(var(--col) * 0.021), 1.34rem);
  line-height: 1.95;
}

/* 난외에 서는 것은 알약이 아니다. 대목 번호와 같은 자리에 같은 주칠로 선다 —
   이 지면에서 무엇이 계산이고 무엇이 쓴 글인지는 여전히 이 하나가 말한다. */
.reading-world .reading-document .status-pill--interpretation {
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.94rem;
  letter-spacing: 0.02em;
}

/* A table of contents is a list of what is coming, in the order it comes. Two
   columns made the reader work out which way to read it first.

   차례는 번호가 여백에 서고 표제가 단에 서며 그 사이를 이음선이 잇는다. 줄마다
   테두리를 그으면 목록이 아니라 표가 되고, 표는 읽는 것이 아니라 조회하는 것이다. */
.reading-world .reading-document .reading-toc {
  margin: 0 0 12px;
  padding: 0 0 30px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
}

.reading-world .reading-document .reading-toc > .eyebrow {
  margin: 6px 0 0;
  color: var(--brass-ink);
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

.reading-world .reading-document .reading-toc ol {
  grid-template-columns: 1fr;
  gap: 0;
}

.reading-world .reading-document .reading-toc li + li {
  border-top: 0;
}

.reading-world .reading-document .reading-toc a {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  align-items: baseline;
  gap: 0 14px;
  padding: 9px 2px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.96rem;
}

.reading-world .reading-document .reading-toc__mark {
  color: var(--brass-ink);
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* 이음선. 표제 뒤로 점선을 이어 두는 것이 차례를 차례로 만든다. */
.reading-world .reading-document .reading-toc__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.reading-world .reading-document .reading-toc__title::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-bottom: 1px dotted var(--line-strong);
  opacity: 0.65;
  transform: translateY(-0.28em);
}

.reading-world .reading-document .reading-toc a:hover {
  color: var(--accent);
}

.reading-world .reading-document .reading-section:first-child {
  border-top: 0;
  padding-top: 8px;
}

/* 괘선은 한 줄이 아니라 두 줄이다. 굵은 줄 하나는 상자를 나누고, 가는 줄이
   따라붙으면 판이 접힌 자리가 된다 — 조문 화면이 쓰는 것과 같은 접힘. */
.reading-world .reading-document .reading-section + .reading-section {
  box-shadow: 0 -4px 0 -3px var(--line);
}

/* 난외(欄外). 대목 번호와 그 대목이 딛고 선 근거가 여백에 선다. 본문 단에는
   손님이 돈을 주고 산 그 글만 남는다 — 번호와 출처는 글이 아니라 장치다. */
.reading-world .reading-document .reading-section {
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 28px;
}

.reading-world .reading-document .reading-section__margin {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 4px;
}

@media all {
  /* 여백이 없으면 여백에 세울 수 없다. 좁은 화면에서 난외는 표제 위로 올라와 한
  줄이 되고, 번호와 근거가 나란히 선다.
  이 블록은 위 규칙 **뒤에** 있어야 한다 — 특정도가 같으므로 미디어 쿼리라도
  소스 순서로 승자가 갈린다. 500줄 위의 760px 블록에 적었을 때는 지고 있었고,
  390px에서 난외가 148px을 그대로 차지해 본문이 한 줄에 여덟 자였다. */
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 760px */
  .reading-world .reading-document .reading-section,
  .reading-world .reading-document .reading-summary,
  .reading-world .reading-document .reading-toc {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .reading-world .reading-document .reading-toc > .eyebrow {
    margin: 0;
  }

  .reading-world .reading-document .reading-section__margin {
    grid-template-columns: max-content minmax(0, 1fr);
    justify-content: start;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-top: 0;
  }

  .reading-world .reading-document .reading-section__basis {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    padding-top: 0;
    border-top: 0;
  }

  .reading-world .reading-document .reading-section__basis > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

.reading-world .reading-document .reading-section__number {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1rem;
}

/* 이 화면에서 명조가 아닌 것은 단 하나, 손님이 돈을 주고 산 그 글이었다.
   표제 64px 명조 · 조 표제 36px 명조 · 요약 21px 명조 · 번호 16px 명조,
   그리고 본문만 16px Pretendard. 36 → 16은 2.25배 낙차이고 그 사이에서 활자가
   바뀌니, 큰 간판 밑에 깨알 글씨가 붙은 꼴이 된다. 낙차를 1.6배로 좁히고 본문을
   같은 활자로 옮긴다 — 지면은 이미 한지이고, 한지 위의 산세리프가 어긋난 쪽이다. */
.reading-world .reading-document .reading-section h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, calc(var(--col) * 0.022), 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* 본문을 명조로 옮기되 16px로는 옮기지 않는다 — 원래 규칙이 금한 것은 명조 자체가
   아니라 몇천 자를 16px 명조로 읽게 하는 일이었다. 17.3px에 행간 1.95, 그리고
   34em(≈34자)으로 단을 좁힌다. 760px에서는 한 줄이 44자였고, 한글은 35자 근처가
   편하다. */
.reading-world .reading-document .reading-prose {
  max-width: 34em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.95;
  letter-spacing: -0.005em;
}

.reading-world .reading-document .reading-prose p + p {
  margin-top: 1.05em;
}

@media all {
  /* 390px에서 단은 312px뿐이라 17.3px로는 한 줄이 18자가 된다. 한글 모바일 본문은
  20자 근처가 보통이고, 그보다 짧으면 문장이 토막나 읽힌다. 폭을 늘릴 수 없으면
  글자를 줄이는 쪽이 맞다. */
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 480px */
  .reading-world .reading-document .reading-prose {
    font-size: 1.02rem;
    line-height: 1.9;
  }
}

/* 한 칸짜리 줄. 기준 기간도 출생 프로필도 셀이 하나뿐인데, 이 띠는 inline-flex라
   내용만큼만 줄어든다 — 폭 212px짜리 작은 상자가 오른쪽을 비워 둔 채 떠 있었다.
   (public_redesign 쪽 grid-template-columns는 여기서 display가 바뀌므로 애초에
   아무 일도 하지 않는다.) 한 칸이면 한 줄로 눕는다: 문서 머리의 메타데이터 띠이지
   카드가 아니다. */
/* 한 줄로 눕히고 나니 그 다음이 보였다: 사실 하나를 담은 채 테두리와 배경을 두른
   띠는 여전히 카드다. 문서 머리의 메타데이터는 카드가 아니라 표제 아래 한 줄이므로,
   상자를 벗고 아래 괘선만 남긴다. */
.reading-world .reading-context:has(> div:only-child) {
  display: flex;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.reading-world .reading-context > div:only-child {
  flex: 1 1 auto;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: 4px 14px;
  padding: 0 0 14px;
  background: none;
}

/* 연간 운세는 지나가는 간지가 연운 하나뿐이라, 세 칸이 들어차던 자리에 260px
   카드 하나가 남고 나머지가 빈다. 하나뿐이면 카드를 그만두고 한 줄로 눕는다. */
.reading-world .period-pillars > li:only-child {
  flex: 1 1 100%;
  max-width: none;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  align-items: baseline;
  gap: 16px;
  padding: 15px 20px;
}

/* ------------------------------------------------------------------
   밤 위의 계산도 인쇄된 것이다

   결과 화면의 규칙은 "밤 위의 한지"였는데, 실제로 인쇄된 것은 한지뿐이었다.
   한지에는 만세력 판식·명조·괘선·근거 인용이 다 들어갔고, 종이를 벗어나는 순간
   같은 계산이 전부 같은 부품 하나로 그려졌다 — 1px 테두리의 둥근 상자. 기준 기간,
   원국 스트립, 기둥 칸, 지나가는 간지, 월 칸, 대운 칸, 접기, 점수까지 여덟 가지
   일을 그 상자 하나가 했다.

   그래서 밤 위에서도 계산은 상자에 담기지 않고 **인쇄된다.** 칸을 나누는 것은
   테두리가 아니라 세로 괘선이고, 간지는 한 덩어리가 아니라 한자를 첨자로 진 두
   글자이며, 오행은 배경이 아니라 글자 자신의 색이다. 원국 화면이 한지 위에서 이미
   하고 있던 그것을, 같은 여덟 글자를 쓰는 나머지 화면이 이어받는다.
   ------------------------------------------------------------------ */

/* 간지는 `신유` 한 덩어리가 아니라 신辛·유酉 두 글자다. 색을 지는 것은 글자이지
   글자가 앉은 면이 아니다. 오행을 못 받은 자리는 색 없이 글자만 찍는다. */
.sexagenary {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2em;
  font-family: var(--font-display);
  font-weight: 400;
}

.sexagenary__char {
  display: inline-flex;
  align-items: baseline;
}

.sexagenary__char > i {
  margin-left: 0.05em;
  font-size: 0.5em;
  font-style: normal;
  opacity: 0.62;
}

.sexagenary__char[data-element] { color: var(--element-ink); }

/* 원국은 이 페이지에서 유일하게 테두리를 가질 자격이 있는 것이다 — 글이 딛고 선
   계산 자체이므로. 다만 둥근 카드가 아니라 옛 책의 **변란**(두 겹 테두리)이며,
   `.document-shell` 이 조문 화면에서 쓰는 것과 같은 장치다. 이 판이 서고 나면
   나머지 계산 블록은 테두리 없이 괘선만으로 충분해진다. */
.reading-world .reading-natal {
  padding: clamp(18px, calc(var(--col) * 0.022), 26px) clamp(14px, calc(var(--col) * 0.024), 28px) clamp(16px, calc(var(--col) * 0.02), 22px);
  border: 0;
  border-radius: var(--radius-xs);
  box-shadow:
    inset 0 0 0 5px var(--paper),
    inset 0 0 0 6px var(--line);
  background: var(--surface-soft);
}

/* 네 기둥: 상자 넷이 아니라 괘선으로 나뉜 네 칸. 첫 칸에는 왼쪽 괘선이 없다 —
   판식의 변란은 바깥이 맡고 안쪽은 칸만 가른다. */
.reading-world .reading-natal__pillars {
  gap: 0;
}

.reading-world .reading-natal__pillars li {
  gap: 3px;
  padding: 14px 8px 12px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.reading-world .reading-natal__pillars li:first-child {
  border-left: 0;
}

/* 네 칸은 `1fr` 이라 트랙이 내용보다 좁아지지 않는다 — 그래서 글자를 키우면 판이
   화면보다 넓어진다. 390px 에서 한 칸에 쓸 수 있는 폭은 여백을 빼면 81px 이고
   `신辛 유酉` 는 1.5rem 에서 77px 을 먹어 24px 이 밖으로 밀려났다. 좁은 화면에서는
   글자를 줄인다 — 트랙을 줄이면 글자가 이웃 칸을 침범한다. */
.reading-world .reading-natal__pillars strong {
  font-size: clamp(1.15rem, calc(var(--col) * 0.036), 1.5rem);
  line-height: 1.15;
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 480px */
  .reading-world .reading-natal__pillars li {
    padding: 12px 4px 10px;
  }
}


/* ------------------------------------------------------------------
   구조 읽기 — 밤 위에 새긴 판정

   이 블록은 계산이 세운 구조를 그대로 인쇄한다. 그래서 위의 원국과 같은 문법을
   쓴다: 칸을 나누는 것은 테두리가 아니라 괘선이고, 변란을 가질 자격이 있는 것은
   원국 하나이므로 여기에는 없다. 상자가 남는 자리는 누르는 것(접기)뿐이다.

   점수·상태·확신 꼬리표는 고객이 생활에서 무엇을 볼지 말해 주지 않는다. 저장된
   영역별 생활 의미와 계산 근거만 보여 준다.
   ------------------------------------------------------------------ */

.structure-reading {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

/* 엔진이 이미 영역별로 옮겨 둔 생활 의미. 영역은 카드가 아니라 한 지면의 장으로
   나뉘며, 각 문장 아래에는 독자가 실제로 확인할 기준만 짧게 붙는다. */
.structure-insight-groups {
  display: grid;
  gap: 18px;
}

.structure-insight-group {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.structure-insight-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.structure-insight-group h3 {
  margin: 0;
  color: var(--brass-ink);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.5;
}

.structure-insight-group ol {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.structure-insight-group li {
  display: grid;
  gap: 6px;
}

.structure-insight-group p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
}

.structure-insight-group small {
  color: var(--ink-faint);
  font-size: 0.7rem;
  line-height: 1.6;
}

.structure-insight-group small span {
  margin-right: 7px;
  color: var(--brass-ink);
  font-weight: 700;
}

/* 중심 구조. 판정마다 한 줄씩, 사이를 가르는 것은 괘선이다. */
.structure-findings {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.structure-findings > li {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.structure-findings > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.structure-findings p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
}

.structure-findings__topic {
  color: var(--brass-ink);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.structure-capacity {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.structure-capacity > .eyebrow {
  margin: 0;
  line-height: 1.6;
}

.structure-capacity > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.75;
}

.structure-open > .eyebrow,
.structure-day-pillar > .eyebrow,
.structure-markers > .eyebrow {
  margin: 0;
}

/* 일주 한 자리. 네 칸을 세로 괘선으로 가르는 것은 원국 스트립과 같은 판식이고,
   두 열인 것은 한 열이 430px 의 절반이어야 여덟 글자가 접히지 않기 때문이다. */
.structure-day-pillar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.structure-day-pillar__grid > li {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px 12px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.structure-day-pillar__grid > li:nth-child(-n + 2) {
  border-top: 0;
}

.structure-day-pillar__grid > li:nth-child(odd) {
  border-left: 0;
  padding-left: 0;
}

.structure-day-pillar__grid > li > span {
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.structure-day-pillar__grid strong {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 400;
  line-height: 1.2;
}

.structure-day-pillar__grid .structure-hidden {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

.structure-day-pillar__grid small {
  color: var(--ink-soft);
  font-size: 0.68rem;
  line-height: 1.55;
}

/* 보조 표지. 이름만 나열하지 않고 자리와 생활에서 보는 법을 함께 밝힌다. */
.structure-marker-group {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.structure-marker-group__name {
  margin: 0;
  color: var(--brass-ink);
  font-family: var(--font-display);
  font-size: 0.82rem;
}

.structure-marker-group ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.structure-marker-group li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 8px;
  row-gap: 3px;
}

.structure-marker-group li > strong {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 400;
}

.structure-marker-group li > strong > em {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-style: normal;
}

/* 자리와 글자. 글자는 여기서도 만세력처럼 찍히므로 (한글이 본자, 한자가 첨자,
   오행은 글자 자신의 색) 붙어 서지 않게 사이를 벌린다. */
.structure-marker-group li > small {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  grid-column: 1 / -1;
  gap: 7px;
  color: var(--ink-faint);
  font-size: 0.7rem;
}

.structure-marker__seat-label {
  color: var(--brass-ink);
  font-weight: 700;
}

.structure-marker-group li > small .sexagenary {
  font-size: 0.86rem;
}

/* 한 표지가 앉은 글자들은 한 덩어리다. 자리 칸이 좁아지면 이 덩어리째 줄을
   바꾸고, 글자 하나만 떨어져 나가지 않는다. */
.structure-marker__seats {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.structure-marker-group li > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.7;
}

/* 지나가는 간지와 대운·월 칸도 같은 판식이다. */
.reading-world .period-pillars {
  gap: 0;
}

/* 칸마다 줄 수가 다르다 — 연운에는 원국과 만나는 지점이 없고 월운·일운에는 있다.
   칸이 늘어나면 grid 가 남는 높이에 행을 나눠 주므로, 줄이 적은 칸의 간지가 7px
   내려앉고 그 아래가 22px까지 어긋났다. 행은 위에서부터 쌓이고 남는 높이는 아래에
   둔다. */
.reading-world .period-pillars > li {
  align-content: start;
  padding: 15px 14px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.reading-world .period-pillars > li:first-child {
  border-left: 0;
}

.reading-world .period-pillars strong {
  font-size: 1.6rem;
  color: inherit;
}

.reading-world .month-strip,
.reading-world .life-cycle-strip {
  gap: 0;
}

.reading-world .month-cell,
.reading-world .life-cycle {
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.reading-world .month-strip > .month-cell:first-child,
.reading-world .life-cycle-strip > .life-cycle:first-child {
  border-left: 0;
}

.reading-world .month-cell strong,
.reading-world .life-cycle__pillar {
  font-size: 1.3rem;
}

/* 지금 머무는 칸. 테두리 상자가 사라졌으니 표시도 상자가 아니라 지면의 표시다 —
   등잔이 그 칸만 비추듯 아주 옅은 브라스 면에 아래로 한 줄. */
.reading-world .month-cell.is-current,
.reading-world .life-cycle.is-current {
  border-left-color: var(--line);
  box-shadow: inset 0 -2px var(--brass);
  background: var(--brass-soft);
}

/* 밤 위에서 계산을 나누는 것은 테두리가 아니라 괘선이다. 해마다의 칸도 상자를 벗고
   위로 한 줄만 긋는다. */
.reading-world .pair-year {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 0;
  background: none;
}

.reading-world .pair-timeline__years {
  gap: 0;
}

.reading-world .pair-timeline__years > .pair-year:first-child {
  border-top: 0;
}

.reading-world .pair-year.is-current {
  box-shadow: inset 0 -2px var(--brass);
  background: var(--brass-soft);
}

.reading-world .pair-year__head strong {
  font-size: 1.3rem;
}

.reading-world .life-cycle.is-current .life-cycle__pillar {
  color: inherit;
}

/* 점수는 계산이지 대시보드 타일이 아니다. 밤 위에서 계산은 상자에 담기지 않고
   괘선으로 구획되므로 이 판도 테두리를 벗는다. 상자가 남는 자리는 **누르는 것**
   — 접기와 버튼 — 이며, 그게 이 화면에서 상자가 뜻하는 바가 된다. */
.reading-world .compatibility-score-card {
  gap: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.reading-world .compatibility-score-card > div {
  padding: clamp(24px, calc(var(--col) * 0.034), 34px) clamp(20px, calc(var(--col) * 0.026), 30px);
  background: none;
}

.reading-world .compatibility-score-card > div + div {
  border-left: 1px solid var(--line);
}

@media all {
  /* 폭이 한 열로 고정돼(--app-width) 이 규칙은 언제나 적용된다. 창 크기를 조건으로
     두면 넓은 창에서 거짓이 되어 데스크톱 레이아웃이 그대로 열 안으로 밀려 들어온다.
     원래 조건: max-width 980px */
  .reading-world .compatibility-score-card > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* 반복되는 막연한 배지 대신 실제 합·충 관계 이름을 짧게 보여 준다. */
.reading-world .life-cycle__mark {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--brass);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
}

/* 근거 줄. 계산된 사실이므로 풀이의 명조가 아니라 산세리프이고, 색은 이 사이트가
   계산 쪽에 쓰는 브라스다 — 한 지면 안에서 활자가 바뀌는 자리는 글의 종류가 바뀌는
   자리여야 한다. 위에 가는 괘선을 두어 표제에 붙지 않게 한다. */
.reading-world .reading-document .reading-section__basis {
  display: grid;
  justify-items: start;
  gap: 5px;
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.62;
  letter-spacing: 0.01em;
}

.reading-world .reading-document .reading-section__basis-label {
  color: var(--brass-ink);
  font-weight: 700;
  text-decoration: none;
}

.reading-world .reading-document .reading-section__basis-label::after {
  content: "↑";
  margin-left: 3px;
  font-size: 0.86em;
}

.reading-world .reading-document .reading-section__basis-label:hover {
  text-decoration: underline;
}

/* 판이 접히는 자리. 앞은 사람을 읽은 대목이고 여기부터는 표가 붙인 이름과 시기 —
   그 층은 manifest 의 순서에만 있었고 지면에는 아무 표시가 없었다. 대목 사이의
   두 줄 괘선은 이미 접힘이므로 여기서는 그 접힘에 이름만 달아 준다. */
.reading-world .reading-document .reading-section__fold {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 0.82rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* 층의 이름. 이 대목이 사람을 읽은 글이 아니라 표가 붙인 이름이라는 것, 또는
   지금 자료로는 확정할 수 없는 자리라는 것을 표제 위에서 먼저 밝힌다. 계산 쪽의
   말이므로 브라스이고, 글자일 때의 브라스는 --brass-ink 다. */
.reading-world .reading-document .reading-section__layer {
  margin-bottom: 8px;
  color: var(--brass-ink);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

/* 표지 대목의 난외는 각주가 아니다. 이 대목이 말하는 것이 곧 표가 그 자리에 붙인
   이름이고, 글은 그 이름을 풀어 쓴 보조 해설이다. 그래서 이름을 잔글씨에서 계산의
   활자로 올린다.

   올리려면 난외가 가로로 눕지 않아야 한다 — 좁은 열에서 난외는 번호·근거가 한 줄로
   서고 칸이 max-content 라, 이름이 길어지면 열 밖으로 밀려 나간다. 표지 대목에서만
   난외를 제 단으로 세운다. */
.reading-world .reading-document .reading-section--marker .reading-section__margin {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.reading-world .reading-document .reading-section--marker .reading-section__basis {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.reading-world .reading-document .reading-section--marker .reading-section__basis > span {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* 문서 제목 64px은 표지 활자다. 이 지면은 표지가 아니라 본문이 시작되는 곳이다. */
.reading-world .reading-document__header h1 {
  font-size: clamp(2rem, calc(var(--col) * 0.034), 2.6rem);
  letter-spacing: -0.025em;
}

/* The one thing to actually do. It is advice on the same paper, marked in the
   vermilion this site keeps for the things that count, not a grey box.

   책에서 이런 대목은 상자가 아니라 **주(註)** 다 — 본문과 같은 종이에서 위아래
   괘선으로만 구분되고, 표제가 여백 쪽으로 한 칸 나와 선다. 왼쪽 세로줄 하나에
   회색 판을 깔면 본문 옆에 붙은 콜아웃이 되고, 콜아웃은 아무 제품에나 있다. */
.reading-world .reading-document .reading-section aside {
  position: relative;
  margin-top: 30px;
  padding: 18px 0 24px;
  border: 0;
  border-top: 1px solid var(--accent-soft);
  box-shadow: 0 3px 0 -2px var(--accent-soft);
  background: none;
}

.reading-world .reading-document .reading-section aside strong {
  margin-bottom: 9px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* 간기(刊記). 마지막 문단에서 뚝 끊기던 자리. 어미(魚尾)를 하나 찍어 판을 닫고,
   무엇으로 언제 찍은 판인지를 밝히고, 인장으로 끝낸다. 여기 적히는 것은 전부
   실제 기록이다 — 지어낸 공정이 아니라 계산기 판본과 발행 시각과 대목 수. */
.reading-world .reading-document .reading-colophon {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-top: 52px;
  padding: 34px 0 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 0 -3px var(--line), 0 -4px 0 -3px var(--line);
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-align: center;
}

.reading-world .reading-document .reading-colophon p {
  margin: 0;
}

/* 어미(魚尾) — 판이 접히는 자리에 찍던 표. 두 삼각이 마주 본 모양을 그대로 세운다. */
.reading-world .reading-document .reading-colophon__mark {
  width: 0;
  height: 0;
  margin-bottom: 9px;
  border-inline: 7px solid transparent;
  border-top: 9px solid var(--brass);
  opacity: 0.75;
}

.reading-world .reading-document .reading-colophon::after {
  content: "運";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-top: 9px;
  color: var(--hanji);
  border-radius: var(--radius-seal-sm);
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 0.86rem;
}

/* 대운은 글자표가 아니라 눌러 읽는 시기별 풀이입니다. 한 구간의 계산과 생활 해석을
   같은 패널 안에 두어, 공유 화면과 소유자 화면이 같은 내용을 보여 줍니다. */
.life-cycle-accordion {
  display: grid;
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.life-cycle-panel {
  border-bottom: 1px solid var(--line);
}

.life-cycle-panel > summary {
  list-style: none;
}

.life-cycle-panel > summary::-webkit-details-marker {
  display: none;
}

.life-cycle-panel .life-cycle {
  display: grid;
  grid-template-columns: 82px 74px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 17px 4px;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.life-cycle-panel .life-cycle::after {
  content: "⌄";
  color: var(--brass);
  font-size: 1.05rem;
  line-height: 1;
}

.life-cycle-panel[open] .life-cycle::after {
  content: "⌃";
}

.life-cycle__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  color: var(--ink-soft);
  font-size: 0.73rem;
}

.life-cycle__summary b {
  padding: 2px 8px;
  color: var(--night);
  border-radius: var(--radius-pill);
  background: var(--brass);
  font-size: 0.66rem;
}

.life-cycle__action {
  color: var(--ink-faint);
  font-size: 0.69rem;
}

.life-cycle-panel__body {
  padding: 2px 4px 30px;
}

.life-cycle-panel__body h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, calc(var(--col) * 0.026), 1.7rem);
  line-height: 1.45;
  word-break: keep-all;
}

.life-cycle-panel__body > p,
.life-cycle-panel__topics p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.9;
  word-break: keep-all;
}

.life-cycle-panel__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 22px 0;
  padding: 13px 0;
  border-block: 1px solid var(--line);
}

.life-cycle-panel__facts div {
  display: flex;
  gap: 8px;
}

.life-cycle-panel__facts dt {
  color: var(--ink-faint);
  font-size: 0.7rem;
}

.life-cycle-panel__facts dd {
  margin: 0;
  color: var(--brass-ink);
  font-size: 0.72rem;
}

.life-cycle-panel__facts dd small {
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.life-cycle-panel__topics {
  display: grid;
  gap: 20px;
}

.life-cycle-panel__topics h4 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 0.78rem;
}

.life-cycle-panel.is-current {
  background: var(--brass-soft);
}

@media (max-width: 720px) {
  .life-cycle-panel .life-cycle {
    grid-template-columns: 70px 62px minmax(0, 1fr) 18px;
    gap: 9px;
  }

  .life-cycle__action {
    display: none;
  }

  .life-cycle-panel__body {
    padding: 4px 4px 26px;
  }
}

/* ------------------------------------------------------------------
   만세력 지면 — the eight characters as print rather than as tiles

   Each character sat in its own tinted, rounded box, and eight tinted boxes in
   a row is a spreadsheet. In a printed 만세력 the characters carry the ink and
   the paper carries thin rules; the 오행 belongs to the character, not to a
   swatch behind it.
   ------------------------------------------------------------------ */

.reading-sheet .natal-grid {
  gap: 0;
}

.reading-sheet .natal-grid__row {
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.reading-sheet .natal-grid__row--foot {
  border-bottom: 0;
}

.reading-sheet .natal-grid__label {
  padding-right: 12px;
}

.reading-sheet .natal-grid__cell {
  padding: 7px 6px;
  border-left: 1px solid var(--line);
}

.reading-sheet .natal-grid__label + .natal-grid__cell,
.reading-sheet .natal-grid__label + .natal-grid__head {
  border-left: 0;
}

.reading-sheet .natal-grid__head {
  padding: 9px 6px;
  border-bottom: 0;
  border-left: 1px solid var(--line);
}

.reading-sheet .natal-grid__row--foot .natal-grid__cell {
  border-top: 0;
}

/* The element tints are set per data-element in public_redesign.css, which loads
   after this sheet, so clearing them takes the same weight of selector. */
.reading-sheet .gan-ji,
.reading-sheet .gan-ji[data-element],
.reading-sheet .gan-ji--absent {
  padding: 14px 4px 11px;
  border: 0;
  border-radius: 0;
  background: none;
}

.reading-sheet .gan-ji b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, calc(var(--col) * 0.056), 2.1rem);
}

.reading-sheet .gan-ji i {
  opacity: 0.62;
}

.reading-sheet .gan-ji small {
  color: var(--ink-faint);
  font-weight: 520;
  opacity: 1;
}

/* The day stem is what every other character is measured against, so its column
   is the one the paper marks. */
.reading-sheet .natal-grid__head.is-day {
  box-shadow: inset 0 -2px var(--accent);
}

.reading-sheet .natal-grid__head.is-day b {
  color: var(--accent);
}

/* An 86px track under a heading and a note left a hand's width of nothing above
   the bars. */
.reading-sheet .element-counts__grid {
  margin-top: 14px;
}

/* 공유 화면의 원국만 아직 상자 넷이었다. 같은 여덟 글자를 한쪽은 판식으로, 한쪽은
   타일로 찍고 있으면 규칙이 규칙이 아니다 — 여기서도 칸을 나누는 것은 괘선이다. */
.reading-sheet .pillar-grid--result {
  gap: 0;
}

.reading-sheet .pillar-grid--result > div {
  min-height: 112px;
  padding: 15px 4px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.reading-sheet .pillar-grid--result > div:first-child {
  border-left: 0;
}

.reading-sheet .element-counts__heading h2,
.reading-sheet .result-card__topline h2,
.reading-sheet .pillar-grid--result strong {
  font-family: var(--font-display);
  font-weight: 400;
}

.reading-sheet.shared-chart-card {
  padding: clamp(26px, calc(var(--col) * 0.05), 46px);
}

/* ------------------------------------------------------------------
   공유본 — the same result, so the same night
   ------------------------------------------------------------------ */

/* A shared result is the same result, so it stands on the same night — the two
   cream bands top and bottom were the only thing left saying otherwise. */
.public-share-page {
  /* 공유 링크도 공개 화면이므로 같은 한 폭 안에서 열린다. 바깥에서 링크를 받은
     사람이 넓은 창에서 다른 폭의 운운을 보는 일은 없어야 한다. */
  width: 100%;
  max-width: var(--app-width);
  margin-inline: auto;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  --paper: var(--night);
  --surface: var(--night-soft);
  --ink: var(--night-ink);
  --ink-soft: var(--night-ink-soft);
  --ink-faint: rgba(240, 232, 216, 0.56);
  --line: var(--night-line);
  --brand: var(--brass-light);
  --brand-deep: var(--brass-light);
  --brass: var(--brass-light);
  --accent: #c9776a;
  color: var(--ink);
  background: var(--night);
}

.public-share-page .share-site-header {
  border-bottom-color: var(--line);
  background: var(--night);
}

.public-share-page .share-site-footer {
  border-top-color: var(--line);
  background: var(--night);
}

.public-share-page .wordmark__seal,
.public-share-page .shared-result__seal {
  color: var(--night);
  border-color: var(--brass-light);
  background: var(--brass-light);
}

/* Three colours the remap above does not reach, because they are literals or
   sit outside the two grounds. */
.reading-world,
.public-share-page {
  --mineral: #9fb6b7;
  --mineral-soft: rgba(94, 115, 119, 0.28);
  --success: #7fae95;
  --brand-soft: rgba(201, 166, 105, 0.16);
}

.reading-world .status-pill--fact,
.public-share-page .status-pill--fact {
  color: var(--brass-light);
}

/* A filled button on night is brass, and brass takes ink rather than white. */
.reading-world .button--primary,
.reading-world .button--primary:hover:not(:disabled),
.public-share-page .skip-link {
  color: #17130c;
  border-color: var(--brass-light);
  background: var(--brass-light);
}

.reading-world .button--primary:hover:not(:disabled) {
  border-color: #d8b782;
  background: #d8b782;
}

/* ------------------------------------------------------------------
   도착 — the eight characters land in the order they are read

   Not a loading state: the page is already complete when this runs, and the
   whole cascade is over in a fifth of a second. It exists so the 만세력 reads as
   something set down rather than something that was always there, and so the
   eye is told where to start — 시주, nearest the reader.
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .reading-sheet .gan-ji {
    animation: gan-ji-arrives 460ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  .natal-grid__row--tiles .natal-grid__cell:nth-child(2) .gan-ji { animation-delay: 0ms; }
  .natal-grid__row--tiles .natal-grid__cell:nth-child(3) .gan-ji { animation-delay: 70ms; }
  .natal-grid__row--tiles .natal-grid__cell:nth-child(4) .gan-ji { animation-delay: 140ms; }
  .natal-grid__row--tiles .natal-grid__cell:nth-child(5) .gan-ji { animation-delay: 210ms; }

  .reading-world .reading-document .reading-summary {
    animation: reading-summary-arrives 520ms ease-out both;
  }
}

@keyframes gan-ji-arrives {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

@keyframes reading-summary-arrives {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}