/*
 * 한자에만 적용되는 글꼴.
 *
 * 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: #f6f5f2;
  --surface: #ffffff;
  --ink: #1c1b19;
  --muted: #6f6b64;
  --line: #dedad2;
  --accent: #7a2e2e;
  --danger: #b3261e;

  /*
   * 오행 다섯 가지의 색. 구분을 위한 것일 뿐 길흉을 뜻하지 않으며, 색만으로 알리지 않도록
   * 화면에는 늘 이름을 함께 적는다. 막대·표 칸·일간 카드가 같은 값을 쓴다.
   */
  --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-family: 'HanjaLocal', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Malgun Gothic', system-ui, sans-serif;
  line-height: 1.6;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

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

h1 {
  margin: 0 0 1.75rem;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.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);
  border-color: var(--accent);
}

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

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

.step.is-done .step-num {
  color: #fff;
  background: #8a8578;
}

.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.1rem 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.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.55rem 0.6rem;
  font-size: 1rem;
  font-family: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.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.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

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

.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.15rem;
  background: #efece6;
  border-radius: 999px;
}

.view-mode-btn {
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  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: 12px;
  overflow: hidden;
  table-layout: fixed;
}

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

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

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

.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.1rem;
  padding: 0.85rem 1rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.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 {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 12px;
}

.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.35rem;
  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.5rem;
  padding: 1rem 1.15rem 1.1rem;
  background: #fdf8ef;
  border: 1px solid #e6d9be;
  border-left: 4px solid var(--accent);
  border-radius: 12px;
}

.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.4rem;
  padding-top: 1.1rem;
  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);
}

.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);
  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);
  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: #f4f2ee;
  border-radius: 999px;
  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: 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);
}

.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: #f4efe8;
  font-weight: 600;
}

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

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

/* 한자 간지는 원어 확인용으로만 남기고, 줄에서 눈에 먼저 들어오는 자리는 십신 풀이에 준다. */
.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: #f4f2ee;
  border-radius: 999px;
  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.6rem;
  padding-top: 1.2rem;
  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.6rem 0.8rem;
  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: 0.6rem;
  cursor: pointer;
}

/* 시스템 공유가 있는 기기에서는 그게 기본 경로다. */
#share-system {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

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

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

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

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