/*
 * 한자에만 적용되는 글꼴.
 *
 * CSP가 'self'만 허용해 웹폰트를 받아올 수 없으므로 local()만 쓴다. 설치된 것이 하나도 없으면
 * 이 @font-face는 걸리지 않고 아래 본문 글꼴로 그냥 넘어간다.
 *
 * unicode-range로 한자 영역만 골라 두었기 때문에 한글은 본문 글꼴(Pretendard 계열) 그대로다.
 * 명조 계열을 앞에 두는 건 획이 많은 한자가 작은 크기에서 고딕보다 덜 뭉치기 때문이다.
 */
@font-face {
  font-family: 'HanjaLocal';
  src:
    local('Noto Serif KR'), local('NotoSerifKR-Regular'), local('본명조'),
    local('Nanum Myeongjo'), local('나눔명조'), local('AppleMyungjo'), local('Batang'), local('바탕');
  unicode-range: U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF;
}

:root {
  color-scheme: light;

  /*
   * 크림 · 남색 · 산호 · 금색. 바탕은 종이(크림)에 가깝게 두고 글자는 남색으로 앉힌다.
   * 산호는 누를 수 있는 것에만, 금색은 장식(구분선·별)에만 쓴다.
   */
  --bg: #faf7f2;
  --surface: #ffffff;
  --ink: #3d4a7a;
  --muted: #626a8a;
  --line: #e7dfd3;
  --accent: #e07a5f;
  --danger: #b3261e;

  /*
   * 산호와 금색은 크림 위에서 글자로 쓰기엔 흐리다(대비 2.8:1, 2.3:1).
   * 그래서 칠하는 색(-strong)과 글자로 쓰는 색(-ink)을 따로 둔다. 눈에는 같은 계열로 보이고
   * 대비만 본문 기준(4.5:1)을 넘긴다. 원래 색은 테두리·장식처럼 글자가 아닌 곳에 쓴다.
   */
  --accent-strong: #c2563a;
  --accent-ink: #a8452c;
  --accent-soft: #fbede7;
  --accent-secondary: #c9a227;
  --accent-secondary-ink: #8a6e12;
  --accent-secondary-soft: #f7efd6;
  --accent-secondary-tint: #fdfaf0;

  /* 카드 테두리를 부드럽게. 한 곳에서 바꾸면 모든 카드가 같이 바뀐다. */
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(61, 74, 122, 0.04), 0 8px 24px rgba(61, 74, 122, 0.05);

  /*
   * 오행 다섯 가지의 색. 구분을 위한 것일 뿐 길흉을 뜻하지 않으며, 색만으로 알리지 않도록
   * 화면에는 늘 이름을 함께 적는다. 막대·표 칸·일간 카드가 같은 값을 쓴다.
   */
  --el-wood: #3f6f4a;
  --el-fire: #a8453a;
  --el-earth: #8a6a2f;
  --el-metal: #6f7681;
  --el-water: #35618f;

  /* 같은 색을 아주 옅게 깐 바탕. 표 칸을 훑을 때 오행이 한눈에 갈린다. */
  --el-wood-bg: #f0f5f1;
  --el-fire-bg: #fbf1ef;
  --el-earth-bg: #f8f3e9;
  --el-metal-bg: #f2f3f5;
  --el-water-bg: #eef3f8;

  /* HanjaLocal이 맨 앞이지만 한자 영역만 맡으므로, 나머지 글자는 그다음 글꼴이 그린다. */
  --font-sans: 'HanjaLocal', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Malgun Gothic', system-ui, sans-serif;

  /*
   * 제목용 명조/세리프. CSP가 'self'만 허용해 웹폰트를 못 받아오므로 전부 기기에 이미 있는 글꼴이다.
   * 하나도 없으면 맨 뒤의 serif로 떨어지고, 그래도 없으면 본문 글꼴과 같아질 뿐 깨지지 않는다.
   * 한글은 나눔명조·AppleMyungjo·바탕이 받고, 라틴 문자는 앞쪽 세리프가 받는다.
   */
  --font-serif: 'HanjaLocal', 'Iowan Old Style', 'Apple Garamond', 'Palatino Linotype', 'Book Antiqua',
    Georgia, 'Nanum Myeongjo', '나눔명조', 'AppleMyungjo', 'Batang', '바탕', serif;

  font-family: var(--font-sans);
  line-height: 1.6;
}

* {
  box-sizing: border-box;
}

/*
 * 바탕은 크림 한 겹 위에 아주 옅은 빛무리 두 개를 얹은 것뿐이다. 한지 결과 밤하늘을 흉내 낸
 * 힌트 정도로만 두고, 그림 파일은 쓰지 않는다(요청이 없으면 아무것도 더 받지 않는다).
 */
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(60rem 30rem at 50% -14rem, rgba(224, 122, 95, 0.07), transparent 70%),
    radial-gradient(44rem 24rem at 110% 6rem, rgba(201, 162, 39, 0.07), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
}

.app {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* 제목은 명조 계열로 세운다. 본문(고딕)과 결이 갈려 읽는 층이 나뉜다. */
h1,
h2,
h3,
.fortune-headline,
.daymaster-plain,
.zodiac-name,
.tarot-name,
.workshop-card-title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.005em;
}

h1 {
  margin: 0 0 1.75rem;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* 제목 아래 금색 짧은 선. 장식이라 글자에는 넣지 않는다. */
.page-title {
  position: relative;
  padding-bottom: 0.7rem;
}

.page-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  border-radius: 2px;
}

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

/* ---------- 진행 단계 ---------- */

.steps {
  margin: 0 0 1.5rem;
}

.steps-list {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border-radius: 50%;
}

.step.is-current {
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.step.is-current .step-num {
  color: #fff;
  background: var(--accent-strong);
}

/* 지나온 단계는 색만으로 구분되지 않도록 숫자 대신 체크 표시를 보여 준다. */
.step.is-done {
  color: var(--ink);
}

.step.is-done .step-num {
  color: #fff;
  background: var(--muted);
}

.step.is-done .step-num span {
  display: none;
}

.step.is-done .step-num::after {
  content: '✓';
  font-size: 0.72rem;
}

/* ---------- form ---------- */

.birth-form fieldset {
  margin: 0 0 1.25rem;
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.birth-form legend {
  padding: 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.75rem;
}

.field label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.field input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.field input:hover {
  border-color: #d8cdbc;
}

.field input:focus-visible,
.submit:focus-visible,
.reset:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field input[aria-invalid='true'] {
  border-color: var(--danger);
}

.field-error {
  margin: 0.3rem 0 0;
  font-size: 0.76rem;
  color: var(--danger);
}

.hint {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.radio-row {
  display: flex;
  gap: 1.25rem;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

/* 누르는 것은 전부 알약 모양이다. 산호색은 이 자리에만 칠한다. */
.submit,
.reset {
  width: 100%;
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent-strong);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.submit:hover {
  background: var(--accent-ink);
}

.reset {
  margin-top: 1.75rem;
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
  font-weight: 500;
}

.reset:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.calc-error {
  margin-top: 1rem;
  color: var(--danger);
  font-size: 0.88rem;
}

/* ---------- result ---------- */

.result-header h2 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.result-birth {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- 표기 모드 ---------- */

/*
 * 쉽게 보기 / 원문 보기. 담는 내용은 두 모드가 같고, 풀이와 원어 중 어느 쪽을 앞에 세울지만 바뀐다.
 */
.view-mode {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.view-mode-btn {
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.view-mode-btn.is-on {
  color: var(--ink);
  background: var(--surface);
  font-weight: 600;
}

.view-mode-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.view-mode-hint {
  margin: 0.4rem 0 0.9rem;
}

/*
 * 표 머리는 두 이름이 이미 마크업에 다 있어, 다시 그리지 않고 위아래 순서만 바꾼다.
 * (셀 안의 값은 내용 자체가 달라져 app.js가 다시 그린다.)
 */
.result[data-mode='source'] .pillar-head {
  flex-direction: column-reverse;
}

.result[data-mode='source'] .pillar-name {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--muted);
}

.result[data-mode='source'] .pillar-term {
  font-size: 0.82rem;
  color: var(--ink);
}

.pillars {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  table-layout: fixed;
  box-shadow: var(--shadow-card);
}

.pillars th,
.pillars td {
  padding: 0.85rem 0.4rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.pillars thead th {
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--bg);
}

.pillars tbody th {
  width: 3.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg);
}

.pillars tbody tr:last-child th,
.pillars tbody tr:last-child td {
  border-bottom: none;
}

/* 열·행 머리는 자리를 풀어 쓴 이름이 크고, 원어(시주·천간)는 그 아래 작게 붙는다. */
.pillar-head {
  display: flex;
  flex-direction: column;
}

.pillar-name {
  font-size: 0.82rem;
  color: var(--ink);
}

.pillar-term {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--muted);
}

.pillars-guide {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}

.pillars-hint {
  margin-top: 0.6rem;
}

/*
 * 한 칸의 위계: 뜻이 통하는 값(오행)이 가장 크고, 한자와 그 소리는 맨 아래 작은 줄이다.
 * 한자를 읽지 못하는 사람에게 큰 글씨가 아무것도 전하지 못하는 상태를 피하려는 배치다.
 */
.ganji {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.15rem 0;
  border-radius: 0.4rem;
}

.ganji-element {
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
}

.ganji-yinyang {
  font-size: 0.75rem;
  color: var(--muted);
}

.ganji-source {
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.ganji[data-element='목'] {
  background: var(--el-wood-bg);
}

.ganji[data-element='목'] .ganji-element {
  color: var(--el-wood);
}

.ganji[data-element='화'] {
  background: var(--el-fire-bg);
}

.ganji[data-element='화'] .ganji-element {
  color: var(--el-fire);
}

.ganji[data-element='토'] {
  background: var(--el-earth-bg);
}

.ganji[data-element='토'] .ganji-element {
  color: var(--el-earth);
}

.ganji[data-element='금'] {
  background: var(--el-metal-bg);
}

.ganji[data-element='금'] .ganji-element {
  color: var(--el-metal);
}

.ganji[data-element='수'] {
  background: var(--el-water-bg);
}

.ganji[data-element='수'] .ganji-element {
  color: var(--el-water);
}

/* ---------- 넉 줄 요약 ---------- */

/*
 * 아래 구역에 흩어져 있던 값 중 굵은 넷을 먼저 읽히게 앞으로 뺀 자리.
 * 새로 계산한 값이 아니라 옮겨 적은 값이라, 아래 구역보다 눈에 덜 띄게 담담히 둔다.
 */
.summary {
  margin: 0 0 1.2rem;
  padding: 1.1rem 1.25rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.summary-list {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
  margin: 0;
}

.summary-label {
  color: var(--muted);
  font-size: 0.78rem;
}

.summary-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 0;
}

.summary-text {
  font-size: 0.95rem;
  font-weight: 600;
}

.summary-value[data-element='목'] .summary-text {
  color: var(--el-wood);
}

.summary-value[data-element='화'] .summary-text {
  color: var(--el-fire);
}

.summary-value[data-element='토'] .summary-text {
  color: var(--el-earth);
}

.summary-value[data-element='금'] .summary-text {
  color: var(--el-metal);
}

.summary-value[data-element='수'] .summary-text {
  color: var(--el-water);
}

.summary-note {
  color: var(--muted);
  font-size: 0.78rem;
}

.summary .hint {
  margin-top: 0.6rem;
}

/* ---------- 일간 카드 ---------- */

/* 여덟 글자 중 "나"에 해당하는 글자. 표보다 위에 두고 표보다 크게 세운다. */
.daymaster {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.2rem;
  padding: 1.2rem 1.35rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/*
 * 오른쪽 위 금색 별. 순전히 장식이라 CSS로만 그리고(그림 파일 없음) 글자에는 넣지 않는다.
 * 네 갈래 별을 conic-gradient 없이 그리려면 마름모 두 개가 가장 싸다.
 */
.daymaster::after {
  content: '✦';
  position: absolute;
  top: 0.55rem;
  right: 0.9rem;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent-secondary);
  opacity: 0.45;
  pointer-events: none;
}

.daymaster[data-element='목'] {
  border-left-color: var(--el-wood);
}

.daymaster[data-element='화'] {
  border-left-color: var(--el-fire);
}

.daymaster[data-element='토'] {
  border-left-color: var(--el-earth);
}

.daymaster[data-element='금'] {
  border-left-color: var(--el-metal);
}

.daymaster[data-element='수'] {
  border-left-color: var(--el-water);
}

.daymaster-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.daymaster-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.2rem 0 0;
}

.daymaster-plain {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.daymaster[data-element='목'] .daymaster-plain {
  color: var(--el-wood);
}

.daymaster[data-element='화'] .daymaster-plain {
  color: var(--el-fire);
}

.daymaster[data-element='토'] .daymaster-plain {
  color: var(--el-earth);
}

.daymaster[data-element='금'] .daymaster-plain {
  color: var(--el-metal);
}

.daymaster[data-element='수'] .daymaster-plain {
  color: var(--el-water);
}

.daymaster-source {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.daymaster-image {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
}

.daymaster .hint {
  margin-top: 0.55rem;
}

/* ---------- 안전 안내 ---------- */

.disclaimer {
  margin: 0 0 1.75rem;
  padding: 1.3rem 1.4rem 1.35rem;
  background: var(--accent-secondary-tint);
  border: 1px solid #efe4c6;
  border-left: 3px solid var(--accent-secondary);
  border-radius: var(--radius-card);
}

.disclaimer h2 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.disclaimer ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.disclaimer li + li {
  margin-top: 0.3rem;
}

.ack {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}

.ack input {
  margin-top: 0.25rem;
}

.disclaimer-lead {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
}

.ack-note {
  margin: -0.6rem 0 1rem;
  padding-left: 1.4rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---------- 오행 분포 / 합·충 ---------- */

.ohang,
.relations,
.unse {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.ohang h3,
.relations h3,
.unse h3 {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.ohang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.ohang-item {
  display: grid;
  grid-template-columns: 4rem 1fr 2.6rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

/* 표의 칸과 같은 이름을 써야 두 곳을 이어 읽을 수 있다. 원어는 옆에 작게. */
.ohang-name {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-weight: 600;
}

.ohang-term {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
}

.ohang-track {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.ohang-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--muted);
}

/* 막대 길이는 여덟 글자 중 차지하는 비율. CSP가 인라인 style을 막으므로 클래스로만 정한다. */
.ohang-item[data-count='0'] .ohang-fill {
  width: 0%;
}

.ohang-item[data-count='1'] .ohang-fill {
  width: 12.5%;
}

.ohang-item[data-count='2'] .ohang-fill {
  width: 25%;
}

.ohang-item[data-count='3'] .ohang-fill {
  width: 37.5%;
}

.ohang-item[data-count='4'] .ohang-fill {
  width: 50%;
}

.ohang-item[data-count='5'] .ohang-fill {
  width: 62.5%;
}

.ohang-item[data-count='6'] .ohang-fill {
  width: 75%;
}

.ohang-item[data-count='7'] .ohang-fill {
  width: 87.5%;
}

.ohang-item[data-count='8'] .ohang-fill {
  width: 100%;
}

/* 막대·표 칸·일간 카드·흐름 막대가 모두 :root의 같은 다섯 값을 쓴다. */
.ohang-item[data-element='목'] .ohang-fill {
  background: var(--el-wood);
}

.ohang-item[data-element='화'] .ohang-fill {
  background: var(--el-fire);
}

.ohang-item[data-element='토'] .ohang-fill {
  background: var(--el-earth);
}

.ohang-item[data-element='금'] .ohang-fill {
  background: var(--el-metal);
}

.ohang-item[data-element='수'] .ohang-fill {
  background: var(--el-water);
}

.ohang-count {
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 0개는 막대가 보이지 않으므로 자리만 점선으로 남긴다. */
.ohang-item.is-missing .ohang-track {
  background: transparent;
  border: 1px dashed var(--line);
}

.ohang-item.is-excess .ohang-count {
  color: var(--ink);
  font-weight: 600;
}

.ohang-note {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}

.ohang .hint,
.relations .hint {
  margin-top: 0.5rem;
}

.relation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

/*
 * 한 줄의 위계: 무슨 일이 일어났는지가 제목, 어느 자리인지가 그다음, 원어와 한자는 맨 아래.
 * 충·합이라는 원어를 앞세우면 무슨 뜻인지 읽히지 않아 순서를 뒤집었다.
 */
.relation-item {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  font-size: 0.85rem;
}

.relation-plain {
  font-weight: 600;
}

/* 충은 변화, 합은 묶임 쪽이라는 표시일 뿐 길흉이 아니라, 색은 구분에만 쓰고 강하게 두지 않는다. */
.relation-item[data-kind='충'] .relation-plain {
  color: var(--accent-ink);
}

.relation-item:not([data-kind='충']) .relation-plain {
  color: #3f6b50;
}

.relation-where {
  color: var(--muted);
}

.relation-extra {
  font-size: 0.82rem;
}

.relation-source {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

.relation-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- 운세 (일진·세운·대운) ---------- */

/* 구역 머리의 안내는 세 칸보다 위에 온다. */
.unse > .hint {
  margin: 0 0 0.9rem;
}

.unse-block {
  margin-top: 0.75rem;
  padding: 0.8rem 0.9rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
}

.unse-heading {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.unse-when {
  margin-left: 0.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.unse-ganji {
  margin: 0.35rem 0 0;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
}

.unse-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0.45rem 0 0;
  padding: 0;
  font-size: 0.82rem;
}

.unse-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.unse-fact-label {
  color: var(--muted);
  font-size: 0.75rem;
}

/* 원어는 풀이 뒤에 작게. 나중에 원어로 찾아볼 사람을 위해 지우지 않고 물려 둔다. */
.unse-fact-term {
  color: var(--muted);
  font-size: 0.72rem;
}

.unse-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  padding: 0;
}

.unse-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
}

/* 충은 변동, 합은 인연 쪽이라는 표시일 뿐 길흉이 아니라, 색은 구분에만 쓰고 강하게 두지 않는다. */
.unse-chip[data-kind='충'] {
  border-color: #e0c9c4;
  background: #fbf1ef;
}

.unse-chip[data-kind='합'] {
  border-color: #c9d6cd;
  background: #f0f5f1;
}

.unse-chip-kind {
  color: var(--accent-ink);
  font-weight: 600;
}

.unse-chip[data-kind='합'] .unse-chip-kind {
  color: #3f6b50;
}

.unse-chip-target {
  color: var(--muted);
}

.unse-chip-source {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.unse-empty,
.unse-note {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.unse-judgment {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.7;
}

/*
 * 흐름 막대: 열 칸을 나이 축 하나로 눕힌다.
 * 표 열 줄을 읽어야 "지금 어디쯤인지"를 알 수 있던 것을, 한눈에 보이게 앞으로 뺀 자리다.
 */
.daeun-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.15rem;
  margin: 0.8rem 0 0;
  padding: 0;
}

.daeun-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* 한 칸을 윗글자·아랫글자 두 오행으로 나눠 칠한다. 색은 구분일 뿐 길흉이 아니다. */
.daeun-seg-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 1.75rem;
  overflow: hidden;
  border-radius: 0.25rem;
  opacity: 0.4;
}

/*
 * 지금 지나는 칸만 진하게 두고 테두리를 두른다. 칸 높이는 건드리지 않는다.
 * 한 칸만 키우면 그 칸의 나이 숫자가 아래로 밀려 열 개가 한 줄에 놓이지 않는다.
 */
.daeun-seg.is-current .daeun-seg-bar {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.daeun-seg-half {
  flex: 1;
  background: var(--line);
}

.daeun-seg-half[data-element='목'] {
  background: var(--el-wood);
}

.daeun-seg-half[data-element='화'] {
  background: var(--el-fire);
}

.daeun-seg-half[data-element='토'] {
  background: var(--el-earth);
}

.daeun-seg-half[data-element='금'] {
  background: var(--el-metal);
}

.daeun-seg-half[data-element='수'] {
  background: var(--el-water);
}

.daeun-seg-age {
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

/* 지금 지나는 칸은 색 진하기만으로 알리지 않는다. 숫자도 함께 굵고 진하게 둔다. */
.daeun-seg.is-current .daeun-seg-age {
  color: var(--accent-ink);
  font-weight: 700;
}

.daeun-track-caption {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* 열 줄짜리 표는 접어 둔다. 원어까지 확인할 사람만 펼친다. */
.daeun-all {
  margin-top: 0.8rem;
}

.daeun-all > summary {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.daeun-all > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 오늘의 운세 ---------- */

/*
 * 오늘 한 칸만 점수·영역·행동으로 펼친다. 매일 다시 보는 자리라 여기서 감흥이 갈린다.
 * 계산에 쓴 값은 "왜 이렇게 나왔나" 안으로 접어 두되 지우지는 않는다.
 */
.fortune-headline {
  margin: 0.5rem 0 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.fortune-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0.7rem;
}

.fortune-gauge {
  flex: 1;
  height: 0.45rem;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.fortune-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  border-radius: 999px;
}

.fortune-num {
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.fortune-label {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.fortune-lead {
  margin: 0;
  font-size: 0.88rem;
}

.fortune-stage {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* 다섯 영역. 이름 · 별 · 한 줄이 열을 맞춰 훑어 읽힌다. */
.fortune-domains {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 0.55rem;
}

.fortune-domain {
  display: grid;
  grid-template-columns: 2.6rem 4.6rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.85rem;
}

.fortune-domain-name {
  font-weight: 600;
}

.fortune-stars {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.fortune-stars-on {
  color: var(--accent-ink);
}

.fortune-stars-off {
  color: var(--line);
}

.fortune-acts {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.8rem;
  font-size: 0.82rem;
}

.fortune-acts p {
  margin: 0;
}

.fortune-act-label {
  margin-right: 0.45rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.fortune-why {
  margin-top: 0.85rem;
}

.fortune-why > summary {
  display: inline-block;
  font-size: 0.76rem;
  color: var(--muted);
  cursor: pointer;
}

.fortune-why > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fortune-why-body {
  margin-top: 0.4rem;
}

/* 근거 칸의 간지는 참고용이라, 위 본문보다 커 보이면 안 된다. */
.fortune-why-body .unse-ganji {
  margin-top: 0.5rem;
  font-size: 1.05rem;
}

.fortune-balance {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.fortune-why .hint {
  margin-top: 0.5rem;
}

/*
 * 막대 길이. CSP가 인라인 style을 막으므로 클래스로만 정한다.
 * 오행 막대와 같은 10단위로 끊는다. 5단위로 잘게 끊어 봐야 눈으로는 구분되지 않으면서
 * 거의 같은 규칙만 두 배로 늘어난다.
 */
.fortune-gauge[data-score='10'] .fortune-fill { width: 10%; }
.fortune-gauge[data-score='20'] .fortune-fill { width: 20%; }
.fortune-gauge[data-score='30'] .fortune-fill { width: 30%; }
.fortune-gauge[data-score='40'] .fortune-fill { width: 40%; }
.fortune-gauge[data-score='50'] .fortune-fill { width: 50%; }
.fortune-gauge[data-score='60'] .fortune-fill { width: 60%; }
.fortune-gauge[data-score='70'] .fortune-fill { width: 70%; }
.fortune-gauge[data-score='80'] .fortune-fill { width: 80%; }
.fortune-gauge[data-score='90'] .fortune-fill { width: 90%; }

/* 옛 응답이라 운세를 못 받은 경우. 펼쳐 둔 근거만 남기고 나머지를 감춘다. */
.fortune.is-plain .fortune-headline,
.fortune.is-plain .fortune-score,
.fortune.is-plain .fortune-lead,
.fortune.is-plain .fortune-stage,
.fortune.is-plain .fortune-domains,
.fortune.is-plain .fortune-acts,
.fortune.is-plain .fortune-why > summary {
  display: none;
}

.fortune.is-plain .fortune-why-body {
  margin-top: 0;
}

.daeun-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

/* 칸: 나이 / 간지 / 시작 연도 / 십신 / 12운성. 열을 맞춰 열 줄을 표처럼 읽는다. */
.daeun-item {
  display: grid;
  grid-template-columns: 4.6rem 2.6rem 3.8rem 1fr auto;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.45rem;
  font-size: 0.8rem;
}

/* 지금 걸려 있는 칸만 배경을 준다. 나머지는 목록처럼 담담하게 둔다. */
.daeun-item.is-current {
  background: var(--accent-soft);
  font-weight: 600;
}

.daeun-age {
  color: var(--muted);
  white-space: nowrap;
}

.daeun-item.is-current .daeun-age {
  color: var(--accent-ink);
}

/* 한자 간지는 원어 확인용으로만 남기고, 줄에서 눈에 먼저 들어오는 자리는 십신 풀이에 준다. */
.daeun-ganji {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.daeun-gods {
  font-weight: 400;
}

.daeun-item.is-current .daeun-gods {
  font-weight: 600;
}

.daeun-stage,
.daeun-year {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 400;
  white-space: nowrap;
}

.daeun-stage {
  justify-self: end;
}

/* ---------- 용어 사전 ---------- */

/* 화면에서 쓴 풀이 표를 그대로 늘어놓는다. 접어 두고 낯선 말을 만난 사람만 펼친다. */
.glossary {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.glossary > summary {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.glossary > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.glossary-body {
  margin-top: 0.9rem;
}

.glossary-group + .glossary-group {
  margin-top: 1.1rem;
}

.glossary-title {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.glossary-note {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--muted);
}

.glossary-entries {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.25rem 0.8rem;
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  font-size: 0.82rem;
}

.glossary-entries dt {
  font-weight: 600;
}

.glossary-entries dd {
  margin: 0;
  color: var(--muted);
}

/* ---------- 공유 ---------- */

/*
 * 담기는 것은 화면에 보이는 결과 문장뿐이다. 생년월일시는 텍스트에도 링크에도 들어가지 않는다.
 * 카카오톡 공식 SDK는 외부 스크립트라 이 앱의 CSP('self'만 허용)에서 불러올 수 없다.
 * 휴대폰에서는 시스템 공유가 카카오톡을 포함한 목록을 그대로 열어 주므로 그쪽으로 보낸다.
 */
.share {
  margin-top: 1.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.share h3 {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.share-btn {
  flex: 1 1 auto;
  min-width: 5.5rem;
  padding: 0.65rem 1rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.share-btn:hover {
  border-color: var(--accent);
}

#share-image:hover,
#share-system:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

/* 시스템 공유가 있는 기기에서는 그게 기본 경로다. */
/* 공유 카드 미리보기. 캔버스로 그린 이미지를 그대로 보여 주고, 누르면 이미지로 공유한다. */
.share-card {
  margin: 0 0 0.8rem;
  text-align: center;
}

.share-card-img {
  display: block;
  width: 100%;
  max-width: 16rem;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.share-card-img:hover {
  border-color: var(--accent);
}

.share-card-caption {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
}

#share-image,
#share-system {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.share-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.share-status {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--accent-ink);
}

.share .hint {
  margin-top: 0.7rem;
}

/* ---------- 사이트 메뉴 (사주 · 별자리 · 타로) ---------- */

.site-nav {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
}

.site-nav-link {
  flex: 1 1 0;
  padding: 0.55rem 0.3rem;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.site-nav-link:hover:not([aria-current='page']) {
  color: var(--accent-ink);
  border-color: var(--accent);
}

.site-nav-link[aria-current='page'] {
  font-weight: 600;
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.site-nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 별자리 ---------- */

.zodiac-card {
  padding: 1.75rem 1.4rem 1.6rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.zodiac-symbol {
  margin: 0;
  font-size: 3rem;
  line-height: 1.1;
  color: var(--accent-strong);
}

.zodiac-name {
  margin: 0.35rem 0 0;
  font-size: 1.35rem;
}

.zodiac-term {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.zodiac-meta {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

.zodiac-trait {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.star-rating {
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--accent-secondary-ink);
}

.stars-action-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
}

.stars-action-list li + li {
  margin-top: 0.25rem;
}

/* ---------- 타로 ---------- */

.tarot-picker {
  padding: 1.6rem 1.4rem 1.5rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.tarot-picker-title {
  margin: 0;
  font-size: 1.15rem;
}

/*
 * 뽑기 전의 덱. 카드 뒷면 그림 한 장을 세 번 겹쳐 놓은 장식이다(스크린 리더에서는 감춘다).
 * 그림을 못 받아 와도 남색 바탕과 금색 테두리가 남아 카드 모양은 그대로 선다.
 */
.tarot-deck {
  position: relative;
  width: 6rem;
  aspect-ratio: 2 / 3;
  margin: 1.1rem auto 0.3rem;
}

.tarot-deck span {
  position: absolute;
  inset: 0;
  background-color: #2f3268;
  background-image: url('/assets/tarot-back.jpg');
  background-position: center;
  background-size: cover;
  border: 2px solid #f3e7c9;
  border-radius: 0.6rem;
  box-shadow: 0 6px 16px rgba(61, 74, 122, 0.18);
}

.tarot-deck span:first-child {
  transform: translate(-0.55rem, 0.2rem) rotate(-8deg);
}

.tarot-deck span:nth-child(2) {
  transform: translate(0.55rem, 0.1rem) rotate(8deg);
}

.tarot-picker-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.tarot-picker .submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.tarot-draw-secondary {
  color: var(--accent-ink);
  background: transparent;
  border: 1px solid var(--accent);
}

.tarot-draw-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
}

.tarot-result-title {
  margin: 0 0 0.9rem;
  font-size: 1.35rem;
}

.tarot-spread {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.tarot-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 1.1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/*
 * 카드 앞면. 저작권이 있는 카드 그림 대신 이중 테두리·원·그라데이션 같은 도형과 기호만 쓴다.
 * CSP가 인라인 style을 막으므로 역방향도 data 속성으로만 뒤집는다.
 */
.tarot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  aspect-ratio: 2 / 3;
  padding: 0.5rem 0.3rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 42%, rgba(224, 122, 95, 0.14) 0 32%, transparent 33%),
    linear-gradient(165deg, #fffdf8, var(--accent-secondary-soft));
  border: 3px double var(--accent-secondary);
  border-radius: 0.6rem;
}

.tarot-card[data-reversed='true'] {
  transform: rotate(180deg);
}

.tarot-numeral {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent-secondary-ink);
}

.tarot-symbol {
  font-size: 2rem;
  line-height: 1;
  color: var(--accent-strong);
}

.tarot-card-name {
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
}

.tarot-position {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.tarot-name {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
}

.tarot-original {
  margin-left: 0.35rem;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--muted);
}

.tarot-orientation {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--accent-ink);
}

.tarot-keywords {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.tarot-meaning {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.7;
}

.tarot-item .hint {
  margin-top: 0.4rem;
}

@media (prefers-reduced-motion: no-preference) {
  .tarot-item {
    animation: tarot-reveal 0.35s ease-out both;
  }

  .tarot-item:nth-child(2) {
    animation-delay: 0.1s;
  }

  .tarot-item:nth-child(3) {
    animation-delay: 0.2s;
  }
}

@keyframes tarot-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 480px) {
  .tarot-item {
    grid-template-columns: 4.5rem 1fr;
    gap: 0.7rem;
  }

  .site-nav-link {
    padding: 0.5rem 0.3rem;
  }
}

/* ---------- 좁은 화면 ---------- */

@media (max-width: 480px) {
  .app {
    padding: 1.5rem 1rem 3rem;
  }

  h1 {
    margin-bottom: 1.25rem;
    font-size: 1.4rem;
  }

  /* 단계 칩은 줄바꿈 대신 가로로 넘긴다. 네 칸이 한 줄에 안 들어가도 흐름이 유지된다. */
  .steps-list {
    gap: 0.3rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
  }

  .steps-list::-webkit-scrollbar {
    display: none;
  }

  .step {
    flex: 0 0 auto;
    padding: 0.4rem 0.6rem;
  }

  .field-grid {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.6rem;
  }

  /* 모바일 사파리가 16px 미만 입력에서 화면을 확대하는 걸 막는다. */
  .field input {
    font-size: 1rem;
  }

  /* 손가락으로 누를 만한 크기를 확보한다. */
  .submit,
  .reset {
    padding: 0.85rem 1rem;
  }

  .radio-row {
    gap: 0.75rem;
  }

  .radio {
    padding: 0.35rem 0;
  }

  .birth-form fieldset {
    padding: 0.9rem 0.9rem 1rem;
  }

  .disclaimer {
    padding: 0.9rem 1rem 1rem;
  }

  .pillars th,
  .pillars td {
    padding: 0.55rem 0.2rem;
  }

  .pillars tbody th {
    width: 2.9rem;
  }

  /* 다섯 영역도 좁은 화면에서는 이름·별만 한 줄에 두고 설명을 아래로 내린다. */
  .fortune-domain {
    grid-template-columns: 2.6rem 1fr;
    gap: 0.15rem 0.5rem;
  }

  .fortune-domain-text {
    grid-column: 1 / -1;
  }

  .fortune-headline {
    font-size: 1.1rem;
  }

  /* 용어 사전은 좁은 화면에서 두 칸을 유지하면 뜻이 한 글자씩 끊긴다. 위아래로 접는다. */
  .glossary-entries {
    grid-template-columns: 1fr;
    gap: 0 0.8rem;
  }

  .glossary-entries dd {
    margin-bottom: 0.45rem;
  }

  .ganji-element {
    font-size: 1.2rem;
  }

  .ganji-source {
    font-size: 0.68rem;
  }

  .pillar-name {
    font-size: 0.74rem;
  }

  .pillar-term {
    font-size: 0.64rem;
  }

  .share {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }

  /*
   * 대운 한 칸을 두 줄로 접는다. 위: 나이·간지·시작 연도·기운의 세기, 아래: 십신 풀이.
   * 십신 풀이는 "자립과 동료 · 압박과 도전"처럼 길어서, 좁은 칸에 넣으면 낱말 가운데서 끊긴다.
   * 그래서 아래 줄을 통째로 내주고 나머지를 한 줄에 몬다.
   */
  .daeun-item {
    grid-template-columns: auto 1fr auto auto;
    row-gap: 0.1rem;
  }

  .daeun-age {
    grid-area: 1 / 1;
  }

  .daeun-ganji {
    grid-area: 1 / 2;
  }

  .daeun-year {
    grid-area: 1 / 3;
    justify-self: end;
  }

  .daeun-stage {
    grid-area: 1 / 4;
    justify-self: end;
  }

  .daeun-gods {
    grid-area: 2 / 1 / auto / 5;
  }
}

/* ---------- 같은 작업실 (다른 도구 소개) ---------- */

/*
 * 본문(.app) 아래에 따로 서는 영역이라 폭과 여백을 스스로 맞춘다.
 * 광고 배너가 아니라 조용한 이웃 카드라서, 본문보다 작은 글씨와 흐린 색을 쓰고
 * 위쪽 실선 하나로만 본문과 구분한다.
 */
.site-footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--line);
}

.workshop-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.workshop-intro {
  margin: 0.2rem 0 0.9rem;
  font-size: 0.82rem;
  color: var(--muted);
}

/* 두 칸. 한 칸이 좁아지면 아래에서 한 줄로 접는다. */
.workshop-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.workshop-card {
  display: block;
  padding: 1rem 1.1rem 1.05rem;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.workshop-card:hover {
  border-color: var(--accent);
}

.workshop-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.workshop-card-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.workshop-card-body {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted);
}

.workshop-card-cta {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--accent-ink);
}

/* 화살표는 장식이라 CSS로만 붙인다 (본문 글자에는 넣지 않는다). */
.workshop-card-cta::after {
  content: ' \2192';
}

@media (max-width: 480px) {
  .site-footer {
    padding: 1.25rem 1rem 2.5rem;
  }

  .workshop-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- 페이지 테마 (사주 · 별자리 · 타로) ---------- */

/*
 * 세 화면은 공용 토큰(:root)을 그대로 쓰고, 여기서 그림과 강조색만 덧입힌다.
 * 그림은 전부 같은 오리진의 JPEG(/assets/*.jpg)이고 CSP는 img-src 'self'라 새로 열 것이 없다.
 * 어느 그림도 못 받아 오면 background-color에 적어 둔 크림/남색이 그대로 남아 화면은 무너지지 않는다.
 * 장식은 전부 CSS(::before)로만 얹어 본문 글자와 스크린 리더 낭독에는 끼어들지 않는다.
 */

/* ---------- 사주: 크림 종이 · 남색 · 산호/금색 ---------- */

/*
 * 제목 위 머리 장식. 오행 다섯을 한 줄에 그린 띠라 폭에 맞춰 깔고 위아래만 조금 잘라 낸다
 * (16/6 창이 그림의 20.8~76.7% 구간을 덮어 다섯 상징이 모두 들어온다).
 */
.theme-saju .page-title::before {
  content: '';
  display: block;
  aspect-ratio: 16 / 6;
  margin: 0 0 1.1rem;
  background-color: var(--bg);
  background-image: url('/assets/saju-hero-deco.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

/*
 * 결과 머리말의 엠블럼. 글 흐름 밖(absolute)에 세워 제목·생년월일 줄을 밀지 않는다.
 * 그림은 16:9 한가운데 원형 도장이라 정사각 칸에서는 cover가 곧 높이 맞춤이 된다.
 */
.theme-saju .result-header {
  position: relative;
  min-height: 4.5rem;
  padding-right: 5.5rem;
}

.theme-saju .result-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4.5rem;
  height: 4.5rem;
  background-color: #faf2e1;
  background-image: url('/assets/saju-emblem.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid var(--accent-secondary-soft);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
}

/* 오행 머리에 두는 얇은 텍스처 띠. 다섯 색이 세로로 서 있어 어느 높이를 잘라도 다섯이 다 보인다. */
.theme-saju .ohang::before {
  content: '';
  display: block;
  height: 0.45rem;
  margin: 0 0 0.9rem;
  background-color: var(--line);
  background-image: url('/assets/saju-ohang-textures.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: var(--radius-pill);
  opacity: 0.75;
}

/*
 * 오행 이름 앞의 동그란 아이콘. 한 장에 다섯이 나란한 시트라 배경 위치로만 잘라 쓴다
 * (가로 5.57배·세로 3.13배로 키우면 지름 214px 원 하나가 칸에 꼭 맞는다).
 * 색만으로 알리지 않도록 이름 글자는 그대로 두고 아이콘은 그 앞에 덧붙이기만 한다.
 */
.theme-saju .ohang-item {
  grid-template-columns: 5.6rem 1fr 2.6rem;
}

.theme-saju .ohang-name::before {
  content: '';
  flex: 0 0 auto;
  align-self: center;
  width: 1.4rem;
  height: 1.4rem;
  background-color: #fdf7ea;
  background-image: url('/assets/saju-ohang-icons.jpg');
  background-repeat: no-repeat;
  background-size: 557% 313%;
  border-radius: 50%;
}

.theme-saju .ohang-item[data-element='목'] .ohang-name::before { background-position: 3% 47%; }
.theme-saju .ohang-item[data-element='화'] .ohang-name::before { background-position: 27% 47%; }
.theme-saju .ohang-item[data-element='토'] .ohang-name::before { background-position: 50% 47%; }
.theme-saju .ohang-item[data-element='금'] .ohang-name::before { background-position: 73% 47%; }
.theme-saju .ohang-item[data-element='수'] .ohang-name::before { background-position: 97% 47%; }

/* ---------- 별자리: 짙은 남색 밤하늘 · 금색 별자리 ---------- */

/* 제목 위 밤하늘 한 줄. 본문은 크림 그대로 두고 여기서만 밤을 보여 준다. */
.theme-stars .page-title::before {
  content: '';
  display: block;
  aspect-ratio: 16 / 5;
  margin: 0 0 1.1rem;
  background-color: #1d2550;
  background-image: url('/assets/stars-bg-night.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: var(--radius-card);
}

/*
 * 별자리 카드만 밤하늘로 뒤집는다. 사진 위에 남색 막을 한 겹 덮어
 * 글자가 어느 부분에 걸리든 대비가 유지되게 한다(크림 글자 기준 12:1 남짓).
 */
.theme-stars .zodiac-card {
  color: #f7f3ea;
  background-color: #141b3e;
  background-image:
    linear-gradient(180deg, rgba(20, 27, 62, 0.84), rgba(16, 22, 52, 0.92)),
    url('/assets/stars-bg-night.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-color: rgba(201, 162, 39, 0.45);
}

.theme-stars .zodiac-symbol {
  color: #f0c86a;
}

.theme-stars .zodiac-term,
.theme-stars .zodiac-trait {
  color: rgba(247, 243, 234, 0.82);
}

/* 별점은 금색으로. 크림 바탕에서 본문 대비를 넘기는 -ink 쪽을 그대로 쓴다. */
.theme-stars .star-rating {
  color: var(--accent-secondary-ink);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
}

/*
 * 각 칸 머리에 붙는 천체 칩. 한 장에 달·별·행성·별자리가 2×2로 있는 시트를
 * 배경 위치로만 잘라 쓴다(가로 3.77배·세로 2.12배면 한 칸이 정사각 칩에 맞는다).
 * 오늘=달, 올해=목성, 해 볼 것=별로 본문 설명과 짝이 맞는다.
 */
.theme-stars .unse-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.theme-stars .unse-heading::before {
  content: '';
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #fdf9f0;
  background-image: url('/assets/stars-symbols.jpg');
  background-repeat: no-repeat;
  background-size: 377% 212%;
  background-position: 25% 3%;
  border: 1px solid var(--accent-secondary-soft);
  border-radius: 50%;
}

.theme-stars .unse-block:nth-of-type(2) .unse-heading::before {
  background-position: 24% 90%;
}

.theme-stars .unse-block:nth-of-type(3) .unse-heading::before {
  background-position: 76% 3%;
}

/* ---------- 타로: 남색 벨벳 · 금색 ---------- */

/*
 * 제목 위 장식 패널. 카드 그림이 아니라 무늬 패널이라 본문 앞에 놓아도 결과를 미리 보여 주지 않는다.
 * 16/6 창이라 원본의 금색 테두리는 잘려 나가므로, 잘린 자리를 대신할 테두리를 요소에 직접 둔다.
 */
.theme-tarot .page-title::before {
  content: '';
  display: block;
  aspect-ratio: 16 / 6;
  margin: 0 0 1.1rem;
  background-color: #241a4d;
  background-image: url('/assets/tarot-mystery-ornament.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: var(--radius-card);
}

/*
 * 뽑기 전 화면은 타로 테이블 위에 올려 둔 느낌으로. 사진 위에 남색 막을 덮어
 * 크림 글자와 버튼이 어느 부분에 걸리든 읽히게 한다.
 */
.theme-tarot .tarot-picker {
  color: #f6f1e6;
  background-color: #1b1b44;
  background-image:
    linear-gradient(180deg, rgba(25, 25, 64, 0.76), rgba(18, 18, 48, 0.9)),
    url('/assets/tarot-table.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-color: rgba(201, 162, 39, 0.45);
}

.theme-tarot .tarot-picker .hint {
  color: rgba(246, 241, 230, 0.82);
}

.theme-tarot .tarot-picker .calc-error {
  color: #ffb4ab;
}

/* 두 번째 버튼은 어두운 바탕에서 테두리만 남는다. 금색으로 바꿔 대비를 살린다. */
.theme-tarot .tarot-draw-secondary {
  color: #f3dfa0;
  background: transparent;
  border-color: rgba(201, 162, 39, 0.7);
}

.theme-tarot .tarot-draw-secondary:hover {
  color: #fbeec2;
  background: rgba(201, 162, 39, 0.16);
  border-color: #e0c46a;
}

/*
 * 덱 뒷면은 개선판(tarot-back-v2.jpg)을 쓴다. 원본은 카드 두 장이 나란한 시트라
 * 왼쪽 한 장만 잘라 쓴다: 세로로 2/3 칸 높이의 94%가 되게 키우면(가로 280%·세로 105%)
 * 카드가 칸 안에 꼭 들어오고 남는 가장자리는 그림 자체의 남색이 메운다.
 */
.theme-tarot .tarot-deck span {
  background-color: #0b1226;
  background-image: url('/assets/tarot-back-v2.jpg');
  background-size: 280% 105%;
  background-position: 19% center;
}

/* ---------- 좁은 화면: 테마 장식만 줄인다 ---------- */

@media (max-width: 480px) {
  .theme-saju .result-header {
    min-height: 3.4rem;
    padding-right: 4.1rem;
  }

  .theme-saju .result-header::before {
    width: 3.4rem;
    height: 3.4rem;
  }

  .theme-saju .ohang-item {
    grid-template-columns: 5.2rem 1fr 2.4rem;
  }

  .theme-stars .unse-heading::before,
  .theme-saju .ohang-name::before {
    width: 1.25rem;
    height: 1.25rem;
  }
}