/* 사이트 기능 "운세와 사주"(/site/fortune) 전용 스타일. 이 페이지에서만 싣는다
   (site_features/_fortune 파셜이 head 에 dynamic 추적 스타일시트로 건다 - 홈 히어로와 같은 방식).

   **Tailwind 를 거치지 않는 순수 CSS 다**(Propshaft 가 그대로 내보낸다). 그래서 dark: 변형이나
   @apply 를 쓸 수 없고, 테마는 조상 셀렉터(.dark)와 CSS 변수로 가른다.

   무대 카드와 게임 dialog 는 **테마와 무관하게 어두운 세계**(먹색·쪽빛·금)다 - 배경 영상이 밤의
   장면이라 라이트 모드에 맞춰 밝히면 영상과 글자가 따로 논다. 라이트 모드에서는 무대 카드의 테두리와
   그림자가 액자 구실을 한다. 패널의 목록은 Tailwind 클래스로 사이트 테마를 따른다.

   글자 크기는 em 으로 적고 뿌리에서 큰글씨 모드의 배율(--silver-scale)을 한 번 곱한다 - 곳곳에
   크기를 적어 두지 않아도 단계 버튼 하나로 전부 따라온다(application.css 의 큰글씨 모드와 같은 생각).

   연출은 영상 없이도 완결된다. 영상은 그 위의 덧칠이라, 모션 줄이기·데이터 절약·영상 끄기
   스위치·재생 거부 어느 경우에도 포스터와 아래 keyframes 만으로 같은 흐름이 돈다. */

.fortune {
  --f-night: #070a16;
  --f-ink: #0d1226;
  --f-indigo: #161d40;
  --f-panel: rgb(16 22 48 / 0.74);
  --f-panel-strong: rgb(13 18 38 / 0.9);
  --f-gold: #e6c36a;
  --f-gold-soft: #f4e2ac;
  --f-gold-deep: #b8892f;
  --f-line: rgb(230 195 106 / 0.3);
  --f-line-soft: rgb(230 195 106 / 0.16);
  --f-text: #eef0f8;
  --f-muted: #a9b0cc;
  --f-amber: #f59e0b;
  --f-el-wood: #4ade80;
  --f-el-fire: #f87171;
  --f-el-earth: #fbbf24;
  --f-el-metal: #e5e7eb;
  --f-el-water: #60a5fa;
  --f-serif: "Noto Serif KR", "Nanum Myeongjo", "Hiragino Mincho ProN", "Yu Mincho", ui-serif, Georgia, serif;
}

.fortune-hanzi { font-family: var(--f-serif); font-weight: 600; }

/* ── 무대 카드(패널 안) ─────────────────────────────────────────────────────────── */
.fortune-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  min-height: 17rem;
  border-radius: 1.25rem;
  background-color: var(--f-night);
  background-size: cover;
  background-position: center;
  color: var(--f-text);
  font-size: calc(1rem * var(--silver-scale, 1));
  box-shadow: 0 0 0 1px rgb(184 137 47 / 0.35), 0 18px 40px -18px rgb(15 23 42 / 0.55);
}
/* 비율은 **최소 높이**로만 준다(보이지 않는 받침이 폭의 75% 만큼 세운다). aspect-ratio 로 높이를 못박으면
   큰글씨 모드나 긴 문구(스페인어)에서 내용이 넘치는데, 아래 정렬 + overflow:hidden 이라 넘친 만큼 **위쪽** - 제목과
   시작 버튼 - 이 잘려 나간다(2026-09-17 검수 실측: 큰글씨 3단 320px 에서 버튼 윗부분까지 잘림). */
.fortune-stage::before { width: 0; padding-bottom: 75%; content: ""; }
@media (min-width: 1024px) {
  .fortune-stage::before { padding-bottom: min(62.5%, 54vh); }
}
.dark .fortune-stage { box-shadow: 0 0 0 1px var(--f-line), 0 18px 40px -18px rgb(0 0 0 / 0.7); }

.fortune-stage-video,
.fortune-backdrop-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.fortune-stage-video[data-ready="true"],
.fortune-backdrop-video[data-ready="true"] { opacity: 1; }

.fortune-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 0%, rgb(7 10 22 / 0.55) 70%),
    linear-gradient(180deg, rgb(7 10 22 / 0.1) 0%, rgb(7 10 22 / 0.3) 45%, rgb(7 10 22 / 0.92) 100%);
}

.fortune-stage-body {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 1.25em;
}
.fortune-stage-title {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--f-gold-soft);
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.7);
}
.fortune-stage-tagline {
  margin: 0.35em 0 0;
  font-size: 0.875em;
  line-height: 1.55;
  color: var(--f-text);
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.8);
}
.fortune-stage-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625em;
  margin-top: 1em;
}
.fortune-stage-notice { margin: 0.75em 0 0; font-size: 0.72em; color: var(--f-muted); }
/* 오늘 남은 횟수. 스크립트가 채우기 전에는 hidden 이라 자리를 차지하지 않는다 - 그래서 아래 안내 문구의
   여백은 이 줄이 실제로 섰을 때만 좁힌다(늘 좁히면 줄이 없는 동안 버튼과 안내가 붙는다).
   방문자가 "한 번 더 볼까" 를 정하는 데 쓰는 수치라 안내 문구보다 밝게 둔다. */
.fortune-stage-quota { margin: 0.75em 0 0; font-size: 0.78em; font-weight: 600; color: var(--f-gold-soft); }
.fortune-stage-quota:not([hidden]) + .fortune-stage-notice { margin-top: 0.3em; }

/* 천간·지지 원반. 글자는 DOM 이다 - 영상에 글자를 넣으면 AI 가 깨뜨리므로 영상은 글자 없는 그림만
   맡고, 읽히는 글자는 전부 여기서 얹는다. 두 고리가 서로 반대로 아주 느리게 돈다. */
.fortune-wheel {
  --r: 7.2em;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 38%;
  width: 0;
  height: 0;
  color: var(--f-gold);
  opacity: 0.5;
  pointer-events: none;
}
.fortune-wheel-ring { position: absolute; inset: 0; animation: fortune-spin 90s linear infinite; }
.fortune-wheel-stems { --r: 5em; animation-duration: 70s; animation-direction: reverse; }
.fortune-wheel-ring span {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-serif);
  font-size: 0.95em;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(var(--r) * -1));
  text-shadow: 0 0 10px rgb(230 195 106 / 0.6);
}
.fortune-wheel-sm { --r: 4.9em; top: 50%; opacity: 0.9; }
/* dialog 가 화면을 덮는 동안 그 뒤의 무대는 멈춘다(영상은 스크립트가 멈춘다). */
.fortune:has(.fortune-dialog[open]) .fortune-stage * { animation-play-state: paused; }
.fortune-wheel-sm .fortune-wheel-ring { animation-duration: 24s; }

/* ── 버튼 ─────────────────────────────────────────────────────────────────────
   이름이 btn- 으로 시작하지 않는다 - 그 이름은 application.css 에 정의된 셋만 쓰는 규칙이고
   (button_styles_test), 이 버튼들은 이 기능의 어두운 화면 전용이다. */
.fortune-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  min-height: 3em;
  padding: 0.6em 1em;
  border: 1px solid var(--f-line);
  border-radius: 0.9em;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--f-text);
  background: var(--f-panel);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.fortune-btn:hover { border-color: var(--f-gold); box-shadow: 0 0 22px -6px rgb(230 195 106 / 0.65); }
.fortune-btn:active { transform: scale(0.98); }
.fortune-btn:focus-visible,
.fortune-tile:focus-visible,
.fortune-pill:focus-visible,
.fortune-segment-btn:focus-visible,
.fortune-crumb:focus-visible,
.fortune-card3d:focus-visible,
.fortune-charge:focus-visible,
.fortune-icon-btn:focus-visible { outline: 2px solid var(--f-gold-soft); outline-offset: 2px; }
.fortune-btn-gold {
  color: #2a1d05;
  border-color: transparent;
  background: linear-gradient(135deg, var(--f-gold-soft), var(--f-gold) 55%, var(--f-gold-deep));
}
.fortune-btn-indigo { background: linear-gradient(135deg, rgb(49 62 140 / 0.92), rgb(22 29 64 / 0.92)); }
.fortune-btn-ghost { background: rgb(13 18 38 / 0.55); }
.fortune-btn-wide { width: 100%; }
.fortune-btn-label { font-size: 1em; }
.fortune-btn-desc { font-size: 0.7em; font-weight: 500; opacity: 0.85; }

/* ── 공개 목록의 표식(패널 안 - 사이트 테마를 따른다) ──────────────────────────────── */
.fortune-list-mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  font-family: var(--f-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #7c5a12;
  background: linear-gradient(135deg, #fdf3d3, #f3dc9b);
}
/* 사주와 계산 도구(좋은 날·이름 기운)는 같은 표식 칸을 쓴다 - 셋 다 태어난 때로 셈한 결과다(2026-09-20). */
.fortune-list-mark-saju,
.fortune-list-mark-days,
.fortune-list-mark-name { color: #25306e; background: linear-gradient(135deg, #e3e8ff, #c4cdf8); }
/* 사주 표식은 일간 글자 대신 그 읽는 소리다(한국어 "경" 은 한 글자). 영어 Gyeong·일본어 つちのえ 처럼 여러 글자인 언어는
   칸(2.5rem 정사각형)을 늘리지 않고 글자를 줄인다 - 칸 폭이 줄마다 달라지면 목록의 글 머리가 들쭉날쭉해진다. */
.fortune-list-mark-word { font-family: inherit; font-size: 0.62rem; letter-spacing: -0.02em; white-space: nowrap; }
.dark .fortune-list-mark { color: var(--f-gold-soft); background: linear-gradient(135deg, #3a2d0c, #5a4413); }
.dark .fortune-list-mark-saju,
.dark .fortune-list-mark-days,
.dark .fortune-list-mark-name { color: #cdd5ff; background: linear-gradient(135deg, #1b2452, #2b3780); }

/* ── 게임 dialog ───────────────────────────────────────────────────────────────
   UA 기본값(max-width·max-height·margin·padding)을 풀고 화면 전체를 덮는다. 높이에 dvh 를 쓰지 않는다 -
   모바일 주소창이 드나들 때 값이 출렁이는 함정은 이 저장소가 /social·/videos 에서 이미 겪었다
   (sites/show 뷰 주석). inset:0 + height:100% 는 top layer 의 뷰포트를 그대로 따른다. */
.fortune-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: var(--f-text);
  background: #070a16;
  font-size: calc(1rem * var(--silver-scale, 1));
}
.fortune-dialog::backdrop { background: #070a16; }
/* <dialog> 를 모르는 브라우저에서는 위의 fixed + inset:0 이 닫힌 상태에도 걸려 화면을 통째로 덮는다. */
.fortune-dialog:not([open]) { display: none; }
.fortune-dialog[open] { animation: fortune-fade-in 0.35s ease both; }

.fortune-backdrop {
  position: absolute;
  inset: 0;
  background-color: #070a16;
  background-size: cover;
  background-position: center;
  transition: background-image 0.6s ease;
}
/* 입력 화면에서는 바닥을 더 눌러 칸의 글자가 읽히게 하고, 대기·공개에서는 영상이 주인공이 되게 연다. */
.fortune-dialog .fortune-scrim { background: rgb(7 10 22 / 0.8); transition: background-color 0.8s ease; }
.fortune-dialog[data-state="loading"] .fortune-scrim { background: radial-gradient(90% 70% at 50% 45%, rgb(7 10 22 / 0.2), rgb(7 10 22 / 0.78)); }
.fortune-dialog[data-state="reveal"] .fortune-scrim { background: rgb(7 10 22 / 0.15); }
.fortune-dialog[data-state="result"] .fortune-scrim { background: rgb(7 10 22 / 0.72); }
.fortune-backdrop-reveal { z-index: 1; }

/* 별빛 - 점 여러 개를 box-shadow 로 찍은 두 겹이 다른 박자로 깜빡인다(영상이 없을 때의 밤하늘). */
.fortune-stars,
.fortune-stars::after {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  content: "";
  box-shadow:
    8vw 12vh #f4e2ac, 21vw 38vh #fff, 33vw 9vh #f4e2ac, 47vw 27vh #fff, 58vw 14vh #f4e2ac,
    69vw 41vh #fff, 82vw 19vh #f4e2ac, 91vw 33vh #fff, 14vw 66vh #f4e2ac, 27vw 84vh #fff,
    41vw 71vh #f4e2ac, 55vw 88vh #fff, 66vw 63vh #f4e2ac, 78vw 79vh #fff, 89vw 58vh #f4e2ac;
  animation: fortune-twinkle 4.2s ease-in-out infinite;
}
.fortune-stars::after {
  box-shadow:
    4vw 44vh #fff, 17vw 22vh #f4e2ac, 29vw 57vh #fff, 38vw 35vh #f4e2ac, 51vw 52vh #fff,
    63vw 29vh #f4e2ac, 74vw 8vh #fff, 86vw 47vh #f4e2ac, 95vw 72vh #fff, 9vw 91vh #f4e2ac,
    45vw 5vh #fff, 71vw 93vh #f4e2ac;
  animation-duration: 6.4s;
  animation-delay: -2.1s;
}

/* 완료 순간의 금빛 번쩍임 - reveal 영상이 제때 준비되지 않았을 때 그 자리를 대신한다. */
.fortune-flash {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgb(255 244 205 / 0.95) 0%, rgb(230 195 106 / 0.55) 22%, transparent 60%);
  pointer-events: none;
}
.fortune-flash[data-play="true"] { animation: fortune-flash 1.6s ease-out both; }

/* 결과 화면 맨 아래에 광고가 서므로 **이 요소에 height 를 걸지 않는다.** AdSense 는 광고가 채워지는
   순간 자기 ins 의 조상 전부에 height:auto !important 를 인라인으로 박는다(듣기 모달에서 겪은 것과
   같은 함정). height:100% 로 두면 그 순간 shell 이 결과 글 전체 높이로 늘어나 안쪽 스크롤 영역 대신
   dialog 가 통째로 잘리고, 하단 버튼 막대가 글 맨 끝으로 밀려난다.
   그래서 위·아래 오프셋에서 높이를 얻는다(inset). 가로 가운데 정렬은 width 를 주지 않은 채
   left/right:0 + margin:0 auto 가 맡는다 - width:100% 를 함께 주면 over-constrained 가 되어
   margin auto 가 죽는다. dialog 자체의 height:100% 는 그대로 둔다(구글이 dialog 는 건드리지 않고,
   shell 이 out-of-flow 라 기준 높이가 있어야 한다). */
.fortune-shell {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  max-width: 36rem;
  margin: 0 auto;
}
/* 세 칸 격자 - 가운데 제목이 양옆 칸의 폭과 무관하게 화면 가운데에 선다. 왼쪽 칸의 주인은 화면마다 다르다
   (입력 화면은 둥근 [이전], 결과 화면은 그보다 넓은 "쉽게 보기" 스위치). 종전의 space-between 은 양옆 폭이 같을
   때만 제목이 가운데였다.
   **양옆 칸은 제 내용 폭 아래로 줄지 않는다**(minmax(max-content, 1fr)) - 종전의 1fr 1fr(+ 왼쪽 칸 min-width:0)은 360px 영어
   화면에서 왼쪽 칸을 스위치보다 좁게 잘라 "Plain words" 가 제목 "Fortune" 을 19px 덮었다(2026-09-19 검수). 자리가 모자라면
   제목이 가운데를 양보하고, 그래도 모자라면 제목이 줄임표로 줄어든다(minmax(0, auto) - 제목은 아래 칩이 한 번 더 말한다). */
.fortune-topbar {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center;
  gap: 0.5em;
  padding: max(0.75em, env(safe-area-inset-top)) 0.75em 0.5em;
}
.fortune-topbar-start { display: flex; align-items: center; justify-self: start; }
.fortune-topbar-end { justify-self: end; }
/* 결과 화면에는 뒤로 갈 곳이 없다 - [이전] 자리를 스위치에 내준다. */
.fortune-dialog[data-state="result"] .fortune-topbar-start .fortune-icon-btn { display: none; }
.fortune-dialog:not([data-state="result"]) .fortune-view-switch { display: none; }

/* "쉽게 보기" 스위치. 켜짐(aria-checked=true)이 쉬운 판이다. 높이는 옆의 둥근 버튼(2.75em)과 맞춘다 - 터치 표적 44px. */
.fortune-view-switch {
  display: inline-flex;
  height: 2.75em;
  align-items: center;
  gap: 0.55em;
  padding: 0 0.45em 0 0.95em;
  border: 1px solid var(--f-line);
  border-radius: 999px;
  color: var(--f-gold-soft);
  background: rgb(13 18 38 / 0.7);
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.fortune-view-switch:hover { border-color: rgb(230 195 106 / 0.6); }
.fortune-view-switch:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 2px; }
.fortune-view-switch-label { font-size: 0.8125em; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.fortune-view-switch-track {
  position: relative;
  flex-shrink: 0;
  width: 2.4em;
  height: 1.4em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  transition: background-color 0.25s ease;
}
.fortune-view-switch-thumb {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: var(--f-text);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
  transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.2, 1), background-color 0.25s ease;
}
.fortune-view-switch[aria-checked="true"] { border-color: rgb(230 195 106 / 0.55); background: rgb(230 195 106 / 0.12); }
.fortune-view-switch[aria-checked="true"] .fortune-view-switch-track { background: var(--f-gold); }
.fortune-view-switch[aria-checked="true"] .fortune-view-switch-thumb { background: #2a1d05; transform: translateX(1em); }
.fortune-view-switch[aria-checked="false"] { color: var(--f-muted); }
/* 큰글씨 1.5배 + 좁은 화면(346px 이하 - 320px 폰)에서는 스위치 글자가 한 줄이면 제목을 0 까지 줄여도 닫기 버튼이 화면 밖으로
   5~14px 밀린다(영어·일본어·스페인어 실측). 그때만 스위치 글자를 두 줄로 접고 여백을 좁힌다. 창은 늘 화면 폭이라 화면 폭으로 가른다. */
@media (max-width: 346px) {
  html.silver[data-silver-scale="3"] .fortune-topbar {
    grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr);
    gap: 0.35em;
  }
  html.silver[data-silver-scale="3"] .fortune-view-switch { gap: 0.4em; padding: 0 0.35em 0 0.6em; }
  html.silver[data-silver-scale="3"] .fortune-view-switch-label { line-height: 1.1; white-space: normal; }
}
.fortune-topbar-title {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--f-serif);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--f-gold);
}
.fortune-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  padding: 0;
  border: 1px solid var(--f-line-soft);
  border-radius: 50%;
  color: var(--f-text);
  background: rgb(13 18 38 / 0.55);
  cursor: pointer;
}
.fortune-icon-btn svg { width: 1.25em; height: 1.25em; }

.fortune-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fortune-screens {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5em 1em max(1.25em, env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: var(--f-line) transparent;
}
/* 짧은 화면은 세로 가운데에 놓는다(margin auto 는 넘칠 때 0 이 되어 스크롤을 막지 않는다 - justify-content:center 는
   넘친 위쪽을 잘라 먹는다). fill-mode 는 backwards 다 - both 로 두면 끝난 뒤에도 transform 이 남아 안쪽 요소의
   위치 기준이 된다. */
.fortune-screen { width: 100%; margin-block: auto; animation: fortune-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.fortune-screen[hidden] { display: none; }
.fortune-screen-result { margin-block: 0; }
/* 공개 화면은 등장 애니메이션을 쓰지 않는다 - 도는 동안에는 이 section 의 transform 이 [건너뛰기](absolute)의
   기준이 되고 끝나면 바깥으로 바뀌어, 버튼이 0.45초 뒤에 아래로 튄다(실측 394 → 689px). */
.fortune-screen[data-screen="reveal"] { animation: none; }
.fortune-screen-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fortune-screen-center[hidden] { display: none; }
.fortune-screen-title {
  margin: 0.25em 0 0.35em;
  font-family: var(--f-serif);
  font-size: 1.375em;
  font-weight: 700;
  line-height: 1.35;
  color: var(--f-gold-soft);
  outline: none;
}
.fortune-screen-hint { margin: 0 0 1em; font-size: 0.875em; line-height: 1.6; color: var(--f-muted); }
.fortune-fineprint { margin: 0.6em 0 0; font-size: 0.75em; line-height: 1.55; color: var(--f-muted); }
.fortune-screen-actions { display: flex; flex-wrap: wrap; gap: 0.625em; justify-content: center; margin-top: 1.25em; }
.fortune-screen-actions .fortune-btn { flex: 1 1 9em; }
/* 한도 화면의 크레딧 칸(2026-09-18). 한도 안내와 [다른 풀이 구경하기] 사이에 금빛 테두리 상자로 선다 - "여기서 이어서
   볼 수 있다" 가 한도 안내에 묻히지 않게. 로그인 버튼(공용 파셜)은 흰 버튼이라 가운데로만 맞춘다. */
.fortune-paid { width: 100%; max-width: 24em; margin: 0.25em auto 0; padding: 1em 1.1em; border: 1px solid var(--f-line); border-radius: 1em; background: rgb(230 195 106 / 0.08); }
.fortune-paid[hidden] { display: none; }
.fortune-paid-text { margin: 0; font-size: 0.875em; line-height: 1.6; color: var(--f-text); }
.fortune-paid .fortune-screen-actions { margin-top: 0.85em; }
.fortune-paid-login { display: flex; justify-content: center; margin-top: 0.85em; }
/* 버튼 줄이 비면(비회원 - 결제·충전 둘 다 hidden) 여백까지 접는다. 두지 않으면 로그인 칸 위에 빈 줄이 하나 선다. */
.fortune-paid .fortune-screen-actions:not(:has(> :not([hidden]))) { display: none; }
/* 공용 로그인 버튼(binder/_login_prompt)은 사이트 테마(dark:)와 rem 글자를 따른다 - 이 어두운 창에서는 다크 테마의 어두운
   버튼이 바탕에 묻히고, 큰글씨 모드에서도 혼자 작게 남는다. 이 자리에서만 흰 버튼·em 글자로 고정한다(이 파일은 레이어 밖이라
   Tailwind 유틸리티를 이긴다). */
.fortune-paid-login button { font-size: 0.875em; color: #1f2937; border-color: rgb(255 255 255 / 0.7); background: #fff; }
.fortune-paid-login button:hover { background: #f3f4f6; }
.fortune-paid .fortune-fineprint { text-align: center; }
/* 크레딧 칸이 서면 그것이 주된 길이다 - 아래 [다른 풀이 구경하기] 는 금빛을 내려놓고 보조 버튼 모양이 된다
   (금빛 버튼 둘이 나란하면 어느 쪽이 다음 걸음인지 흐려진다). */
.fortune-paid:not([hidden]) ~ .fortune-screen-actions .fortune-btn-gold { color: var(--f-text); border-color: var(--f-line); background: rgb(13 18 38 / 0.55); }
.fortune-field { margin-top: 1.1em; }
.fortune-field-label { margin: 0 0 0.5em; font-size: 0.8125em; font-weight: 600; color: var(--f-gold); }

/* ── 고르는 칸들 ── 터치 표적은 높이 48px 이상이다(큰글씨 모드에서는 배율만큼 더 커진다). 7열 날짜 칸은
   320px 폭에서 가로가 36px 까지 줄지만 최소 기준(24px)은 넘는다. */
.fortune-grid { display: grid; gap: 0.5em; }
.fortune-grid-zodiac { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fortune-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fortune-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fortune-grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35em; }
.fortune-grid-hour { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) {
  .fortune-grid-zodiac { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fortune-tile,
.fortune-pill,
.fortune-segment-btn,
.fortune-crumb {
  border: 1px solid var(--f-line-soft);
  color: var(--f-text);
  background: var(--f-panel);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.fortune-tile {
  display: flex;
  min-height: 4.25em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  padding: 0.5em 0.25em;
  border-radius: 0.85em;
}
.fortune-tile:hover,
.fortune-pill:hover,
.fortune-segment-btn:hover { border-color: var(--f-gold); }
.fortune-tile:active { transform: scale(0.96); }
.fortune-tile-glyph { font-size: 1.5em; line-height: 1; color: var(--f-gold-soft); }
.fortune-tile-label { min-width: 0; font-size: 0.78em; line-height: 1.3; overflow-wrap: anywhere; }
.fortune-tile-sub { font-size: 0.68em; color: var(--f-muted); }
.fortune-tile-sm { min-height: 3em; font-size: 0.95em; font-weight: 600; }
.fortune-grid-7 .fortune-tile { min-height: 3em; padding: 0.25em 0; font-weight: 600; }
.fortune-tile-hour { flex-direction: row; justify-content: flex-start; gap: 0.6em; min-height: 3.1em; padding: 0.4em 0.75em; }
.fortune-tile-hour .fortune-tile-glyph { font-size: 1.2em; width: 1.2em; text-align: center; }
.fortune-tile-hour .fortune-tile-label { text-align: left; }
.fortune-tile-unknown { grid-column: 1 / -1; justify-content: center; border-style: dashed; }
.fortune-tile[disabled] { opacity: 0.28; cursor: not-allowed; }

[aria-pressed="true"].fortune-tile,
[aria-pressed="true"].fortune-pill,
[aria-pressed="true"].fortune-segment-btn {
  color: #2a1d05;
  border-color: transparent;
  background: linear-gradient(135deg, var(--f-gold-soft), var(--f-gold));
  box-shadow: 0 0 24px -8px rgb(230 195 106 / 0.8);
}
[aria-pressed="true"].fortune-tile .fortune-tile-glyph,
[aria-pressed="true"].fortune-tile .fortune-tile-sub { color: #4a3508; }

.fortune-chips-row { display: flex; flex-wrap: wrap; gap: 0.5em; }
.fortune-pill { min-height: 3em; padding: 0.5em 1.1em; border-radius: 999px; font-weight: 600; }

.fortune-toggles { display: flex; flex-wrap: wrap; gap: 0.625em; margin-top: 0.5em; }
.fortune-segment { display: inline-flex; overflow: hidden; border: 1px solid var(--f-line-soft); border-radius: 0.8em; }
.fortune-segment-btn { min-height: 2.9em; padding: 0.4em 0.95em; border: 0; border-radius: 0; font-size: 0.875em; font-weight: 600; }
.fortune-segment-btn + .fortune-segment-btn { border-left: 1px solid var(--f-line-soft); }
/* 묶음의 overflow:hidden 이 바깥 링을 자른다 - 안쪽으로 그린다. */
.fortune-segment-btn:focus-visible { outline-offset: -3px; }
.fortune-leap { display: grid; gap: 0.75em; margin-top: 1em; }
.fortune-leap .fortune-check { margin-top: 0; }

.fortune-crumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4em; margin: 1em 0 0.85em; }
.fortune-crumb { display: flex; min-height: 3em; flex-direction: column; align-items: center; justify-content: center; padding: 0.3em; border-radius: 0.7em; }
.fortune-crumb-name { font-size: 0.68em; color: var(--f-muted); }
.fortune-crumb-value { min-width: 0; max-width: 100%; font-size: 0.9em; font-weight: 700; color: var(--f-gold-soft); overflow-wrap: anywhere; text-align: center; }
.fortune-crumb[aria-current="step"] { border-color: var(--f-gold); box-shadow: inset 0 0 0 1px var(--f-gold); }
.fortune-crumb[disabled] { opacity: 0.4; cursor: default; }

.fortune-date-error { margin: 0 0 0.75em; padding: 0.6em 0.8em; border: 1px solid rgb(248 113 113 / 0.5); border-radius: 0.7em; font-size: 0.8125em; color: #fecaca; background: rgb(127 29 29 / 0.35); }

.fortune-check { display: flex; align-items: flex-start; gap: 0.6em; margin-top: 1em; font-size: 0.875em; cursor: pointer; }
.fortune-check[hidden] { display: none; }
.fortune-check input { width: 1.35em; height: 1.35em; margin-top: 0.1em; accent-color: var(--f-gold); flex-shrink: 0; }
.fortune-check-share { margin-top: 1.5em; padding: 0.75em 0.9em; border: 1px solid var(--f-line-soft); border-radius: 0.85em; background: rgb(13 18 38 / 0.5); }
.fortune-check-label { display: block; font-weight: 600; }
.fortune-check-desc { display: block; margin-top: 0.15em; font-size: 0.8em; color: var(--f-muted); }

/* ── 괘 뽑기: 엎어 둔 여덟 장 ── 누르면 3D 로 뒤집히고 나머지는 물러난다. */
.fortune-deck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; }
/* perspective 는 뒤집히는 요소의 **부모**에 있어야 닿는다(덱에 두면 손자인 inner 까지 가지 않아 깊이 없이 눌렸다
   펴지는 뒤집기가 된다). 등장 애니메이션의 fill-mode 는 backwards 다 - both 면 끝난 뒤의 채움 상태가 아래의
   "뽑은 뒤" 규칙(나머지는 흐려지고 뽑은 장은 커진다)을 통째로 이긴다(애니메이션 출처가 일반 선언보다 세다). */
.fortune-card3d {
  perspective: 900px;
  aspect-ratio: 3 / 4.4;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: fortune-deal 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i) * 60ms);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.fortune-card3d:hover { transform: translateY(-4px); }
.fortune-card3d-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1); }
.fortune-card3d[data-flipped="true"] .fortune-card3d-inner { transform: rotateY(180deg); }
.fortune-card3d-back,
.fortune-card3d-front {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--f-line);
  border-radius: 0.7em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fortune-card3d-back {
  background:
    radial-gradient(circle at 50% 50%, rgb(230 195 106 / 0.35) 0 12%, transparent 13%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgb(230 195 106 / 0.12) 0deg 15deg, transparent 15deg 30deg),
    linear-gradient(160deg, #1d2654, #0d1226);
  box-shadow: inset 0 0 0 3px rgb(7 10 22 / 0.6), inset 0 0 0 4px var(--f-line-soft);
}
.fortune-card3d-front { gap: 0.3em; color: #2a1d05; background: linear-gradient(160deg, #fdf6dd, #ecd48d); transform: rotateY(180deg); }
.fortune-card3d-symbol { font-size: 2em; line-height: 1; }
.fortune-card3d-name { padding: 0 0.2em; font-size: 0.68em; font-weight: 700; text-align: center; }
.fortune-deck[data-drawn="true"] .fortune-card3d:not([data-flipped="true"]) { opacity: 0.18; transform: scale(0.94); pointer-events: none; }
.fortune-deck[data-drawn="true"] .fortune-card3d[data-flipped="true"] { transform: scale(1.06); }

/* ── 기운 모으기 ── 누르는 동안 --charge(0~1)가 차오르며 고리가 돈다. */
.fortune-charge-wrap { display: flex; justify-content: center; padding: 1.5em 0 0.5em; }
.fortune-charge {
  --charge: 0;
  position: relative;
  width: 12em;
  height: 12em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(230 195 106 / calc(0.12 + var(--charge) * 0.5)) 0%, rgb(22 29 64 / 0.85) 62%);
  box-shadow: 0 0 calc(18px + var(--charge) * 70px) calc(var(--charge) * 14px) rgb(230 195 106 / calc(0.2 + var(--charge) * 0.45));
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  animation: fortune-breathe 3.2s ease-in-out infinite;
}
.fortune-charge-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--f-gold) calc(var(--charge) * 360deg), rgb(230 195 106 / 0.14) 0);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%);
  mask: radial-gradient(circle, transparent 64%, #000 65%);
}
.fortune-charge-core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-serif);
  font-size: 3.4em;
  color: var(--f-gold-soft);
  text-shadow: 0 0 calc(10px + var(--charge) * 40px) rgb(230 195 106 / 0.9);
  transform: scale(calc(1 + var(--charge) * 0.18));
}
.fortune-charge[data-full="true"] { animation: fortune-burst 0.7s ease-out both; }

/* ── 대기 ── 진행 고리의 --p(0~100)는 스크립트가 점근식으로 올린다. */
.fortune-progress { position: relative; width: 13.5em; height: 13.5em; margin-bottom: 1.25em; border-radius: 50%; background: radial-gradient(circle, rgb(7 10 22 / 0.55) 0 58%, transparent 72%); }
.fortune-dialog[data-state="loading"] .fortune-screen-title,
.fortune-stage-line { text-shadow: 0 2px 14px rgb(0 0 0 / 0.95), 0 0 30px rgb(0 0 0 / 0.8); }
.fortune-progress svg,
.fortune-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fortune-ring-track { fill: none; stroke: rgb(230 195 106 / 0.22); stroke-width: 5; }
.fortune-progress-value {
  fill: none;
  stroke: var(--f-gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc((100 - var(--p)) * 1px);
  filter: drop-shadow(0 0 6px rgb(230 195 106 / 0.8));
  transition: stroke-dashoffset 0.6s ease;
}
.fortune-stage-line { min-height: 1.6em; margin: 0; font-size: 0.95em; color: var(--f-text); animation: fortune-pulse 2.4s ease-in-out infinite; }
.fortune-trivia { max-width: 26em; margin-top: 2em; padding: 0.9em 1.1em; border: 1px solid var(--f-line-soft); border-radius: 0.9em; background: rgb(13 18 38 / 0.72); }
.fortune-trivia-label { margin: 0 0 0.35em; font-size: 0.7em; font-weight: 700; letter-spacing: 0.12em; color: var(--f-gold); }
.fortune-trivia-text { margin: 0; font-size: 0.85em; line-height: 1.65; color: var(--f-muted); }
.fortune-trivia-text[data-swap="true"] { animation: fortune-rise 0.5s ease both; }
.fortune-longwait { margin-top: 1.5em; font-size: 0.875em; color: var(--f-muted); }
.fortune-longwait[hidden] { display: none; }

/* ── 공개(reveal) ── */
.fortune-reveal-ready { margin: 0 0 0.6em; font-size: 0.8125em; letter-spacing: 0.2em; color: var(--f-gold); animation: fortune-rise 0.8s ease 0.5s both; }
.fortune-reveal-headline {
  max-width: 18em;
  margin: 0;
  font-family: var(--f-serif);
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.45;
  color: #fff8e1;
  text-shadow: 0 2px 26px rgb(0 0 0 / 0.85), 0 0 40px rgb(230 195 106 / 0.5);
  outline: none;
  animation: fortune-unveil 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s both;
}
.fortune-skip { position: absolute; right: 1em; bottom: max(1.25em, env(safe-area-inset-bottom)); min-height: 2.6em; font-size: 0.8125em; }

/* ── 결과 ── */
.fortune-result { display: flex; flex-direction: column; gap: 0.85em; }
/* 판 두 벌(쉬운 판·원래 판). 판 안의 간격은 결과 전체와 같다. 가려진 판은 [hidden] 이 접는다. */
.fortune-view { display: flex; flex-direction: column; gap: 0.85em; }
.fortune-view[hidden] { display: none; }
/* 스위치로 판을 바꾼 뒤(data-reveal="done")에는 판 전체가 한 번 옅게 떠오른다 - 항목별 연출은 다시 돌리지 않는다. */
.fortune-result[data-reveal="done"] .fortune-view:not([hidden]) { animation: fortune-fade-in 0.35s ease both; }
.fortune-result p { margin: 0; font-size: 0.9375em; line-height: 1.8; color: var(--f-text); }
.fortune-result-head { padding: 0.5em 0 0.25em; text-align: center; }
.fortune-chips { display: flex; flex-wrap: wrap; gap: 0.35em; justify-content: center; margin: 0 0 0.75em; }
.fortune-chip { padding: 0.2em 0.7em; border: 1px solid var(--f-line-soft); border-radius: 999px; font-size: 0.72em; color: var(--f-muted); background: rgb(13 18 38 / 0.6); }
.fortune-chip-kind { color: #2a1d05; border-color: transparent; background: var(--f-gold); font-weight: 700; }
.fortune-headline { margin: 0; font-family: var(--f-serif); font-size: 1.5em; font-weight: 700; line-height: 1.45; color: var(--f-gold-soft); outline: none; }
/* 한국어 제목은 낱말 가운데에서 끊지 않는다(큰글씨 모드 390px 에서 "하루" 가 "하/루" 로 갈렸다). 일본어는 낱말 사이에
   띄어쓰기가 없어 keep-all 이면 넘치므로 한국어에만 건다. */
.fortune-headline:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
.fortune-result .fortune-badge { display: inline-block; margin: 0.6em 0 0; padding: 0.15em 0.65em; border-radius: 999px; font-size: 0.68em; line-height: 1.6; color: var(--f-muted); background: rgb(255 255 255 / 0.07); }
.fortune-result .fortune-summary { margin-top: 0.85em; text-align: left; }

.fortune-card,
.fortune-pillars,
.fortune-drawn {
  padding: 1em 1.1em;
  border: 1px solid var(--f-line-soft);
  border-radius: 1em;
  background: var(--f-panel-strong);
}
.fortune-card-title { margin: 0 0 0.55em; font-family: var(--f-serif); font-size: 1em; font-weight: 700; color: var(--f-gold); }
.fortune-card-sub { margin-left: 0.4em; font-family: inherit; font-size: 0.75em; font-weight: 500; color: var(--f-muted); }
.fortune-card-advice { border-color: rgb(230 195 106 / 0.5); }
.fortune-card-caution { border-color: rgb(245 158 11 / 0.45); }
.fortune-card-caution .fortune-card-title { color: var(--f-amber); }
.fortune-card-basis { background: rgb(7 10 22 / 0.75); }
.fortune-result .fortune-card-basis p,
.fortune-notes { font-size: 0.8125em; color: var(--f-muted); }
.fortune-notes { margin: 0.6em 0 0; padding-left: 1.1em; line-height: 1.7; }
.fortune-pair { display: grid; gap: 0.85em; }
@media (min-width: 560px) { .fortune-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fortune-result .fortune-disclaimer { padding: 0 0.25em; font-size: 0.72em; line-height: 1.6; color: var(--f-muted); text-align: center; }

/* 풀이 맨 아래 광고 자리. 어두운 화면이라 색을 여기서 준다(다른 모달 광고는 Tailwind 회색을 쓴다).
   구분선과 "광고" 라벨은 우발적 클릭을 막는 표시라 광고와 한 묶음으로 서고 함께 사라진다
   (ad-shell - 겉 래퍼 판정과 unfilled 접기 양쪽이 이 클래스를 본다). */
.fortune-ad { margin-top: 0.4em; padding-top: 0.9em; border-top: 1px solid var(--f-line-soft); }
.fortune-ad-label { margin: 0 0 0.5em; font-size: 0.68em; letter-spacing: 0.04em; color: var(--f-muted); }

/* 쉬운 판의 "이것이 무엇인가" 한 줄. 본문보다 작고 옅게 두어 풀이 글과 섞여 읽히지 않게 한다. */
.fortune-result .fortune-guide { margin: -0.15em 0 0.7em; font-size: 0.8125em; line-height: 1.65; color: var(--f-muted); }
.fortune-result .fortune-badge-easy { color: var(--f-gold-soft); background: rgb(230 195 106 / 0.12); }

.fortune-easy-card { display: flex; align-items: center; gap: 0.9em; margin-bottom: 0.7em; }
.fortune-result .fortune-easy-card-meaning { margin-top: 0.15em; font-size: 0.875em; color: var(--f-text); }

/* 쉬운 판의 여덟 글자 - 한자 대신 읽는 소리(크게)·비유·기운 이름·쉬운 역할을 쌓는다. 원래 판의 기둥(.fortune-glyph)과
   같은 오행 색을 쓰되, 글자가 여러 줄이라 칸 높이는 내용에 맡긴다. */
.fortune-easy-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45em; perspective: 900px; }
.fortune-easy-pillar { display: grid; align-content: start; gap: 0.4em; text-align: center; }
.fortune-result .fortune-easy-pillar-name { margin: 0; font-size: 0.72em; font-weight: 700; line-height: 1.4; color: var(--f-muted); }
.fortune-easy-cell {
  --el: var(--f-line);
  display: flex;
  min-height: 5.6em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  padding: 0.5em 0.2em;
  border: 1px solid var(--el);
  border-radius: 0.7em;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0));
  box-shadow: inset 0 0 22px -12px var(--el);
  overflow-wrap: anywhere;
  /* 읽는 소리(.fortune-easy-main)의 글자 크기를 칸 폭에 맞추는 기준(cqi). */
  container-type: inline-size;
}
.fortune-easy-cell-me { box-shadow: inset 0 0 0 1px var(--el), 0 0 20px -6px var(--el); }
.fortune-easy-cell-empty { border-style: dashed; opacity: 0.55; }
/* 읽는 소리는 낱말 중간에서 끊지 않고(nowrap) 칸 폭에 들어가게 글자 수만큼 줄인다 - 종전의 overflow-wrap 은 360px 에서
   "Jeong" 을 "Jeon / g", "みずのえ" 를 "みずの / え" 로 갈랐다(2026-09-19 검수). 칸 폭(cqi)을 여덟 칸 중 가장 긴 읽기의 글자 수
   (--len, 파셜이 칸 묶음에 적는다 - 여덟 칸이 같은 크기다) ×
   글자 폭(--char-w)으로 나눈 값과 기본 크기 중 작은 쪽이다 - 칸 폭으로 일괄 줄이면 한 글자인 한국어("경")까지 작아져 큰글씨에서
   비유 글자보다 작아졌다. 글자 폭은 로마자 굵은 글씨 실측(0.64em)에 여유를 둔 값, 한글·가나는 한 글자 1em 이다. */
.fortune-easy-main {
  --char-w: 0.68;
  font-size: min(var(--cap, 1.3em), calc(92cqi / (var(--len, 6) * var(--char-w))));
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--el);
}
.fortune-easy-main:lang(ko) { --char-w: 1.02; }
.fortune-easy-image { font-size: 0.7em; font-weight: 600; line-height: 1.35; color: var(--f-text); }
.fortune-easy-el { font-size: 0.62em; font-weight: 700; color: var(--el); }
.fortune-easy-role { font-size: 0.6em; line-height: 1.3; color: var(--f-muted); }
.fortune-easy-me-mark { padding: 0.05em 0.5em; border-radius: 999px; font-size: 0.62em; font-weight: 800; color: #2a1d05; background: var(--f-gold); }
.fortune-result .fortune-easy-me-line { margin-top: 0.75em; font-size: 0.875em; color: var(--f-gold-soft); }
/* 일본어 읽기(つちのえ 등)는 여러 글자라 기본 크기부터 한 단계 작게 둔다. */
.fortune-easy-main:lang(ja) { --cap: 1.1em; --char-w: 1.02; }

.fortune-drawn { display: flex; align-items: center; gap: 0.9em; }
.fortune-drawn-symbol { display: flex; width: 2.1em; height: 2.6em; align-items: center; justify-content: center; border-radius: 0.35em; font-size: 1.7em; color: #2a1d05; background: linear-gradient(160deg, #fdf6dd, #ecd48d); }
.fortune-drawn-text { display: flex; flex-direction: column; }
.fortune-drawn-label { font-size: 0.72em; color: var(--f-muted); }
.fortune-drawn-name { font-family: var(--f-serif); font-size: 1.1em; font-weight: 700; color: var(--f-gold-soft); }

/* 명식 네 기둥. 오행 색은 글자 칸의 테두리와 글자에 입힌다. */
.fortune-pillar-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5em; perspective: 900px; }
.fortune-pillar { text-align: center; }
.fortune-pillar-name { margin: 0 0 0.4em !important; font-size: 0.72em !important; line-height: 1.4 !important; color: var(--f-muted) !important; }
.fortune-pillar-me { margin-left: 0.3em; padding: 0.05em 0.4em; border-radius: 999px; font-size: 0.9em; font-weight: 700; color: #2a1d05; background: var(--f-gold); }
.fortune-pillar-body { display: grid; gap: 0.4em; }
.fortune-glyph {
  --el: var(--f-line);
  display: flex;
  min-height: 4.4em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  border: 1px solid var(--el);
  border-radius: 0.7em;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0));
  box-shadow: inset 0 0 22px -12px var(--el);
}
.fortune-glyph .fortune-hanzi { font-size: 1.9em; line-height: 1; color: var(--el); }
.fortune-glyph-sub { font-size: 0.62em; color: var(--f-muted); }
.fortune-pillar-self .fortune-glyph:first-child { box-shadow: inset 0 0 0 1px var(--el), 0 0 20px -6px var(--el); }
.fortune-pillar-empty .fortune-glyph { border-style: dashed; opacity: 0.55; }
.fortune-el-wood { --el: var(--f-el-wood); }
.fortune-el-fire { --el: var(--f-el-fire); }
.fortune-el-earth { --el: var(--f-el-earth); }
.fortune-el-metal { --el: var(--f-el-metal); }
.fortune-el-water { --el: var(--f-el-water); }

.fortune-elements { display: grid; gap: 0.45em; margin: 0 0 0.85em; padding: 0; list-style: none; }
/* 이름 칸은 글자에 맞춘다 - "목" 은 한 글자지만 "Madera" 는 여섯 글자라 고정 폭이면 막대를 덮는다. */
.fortune-element { display: grid; grid-template-columns: minmax(2.4em, max-content) 1fr 1.2em minmax(3.2em, max-content); align-items: center; gap: 0.5em; font-size: 0.8125em; }
.fortune-element-name { font-weight: 700; color: var(--el); }
.fortune-element-track,
.fortune-bar-track { height: 0.6em; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 0.08); }
.fortune-element-bar { display: block; width: calc(var(--n) / var(--total) * 100%); min-width: 0; height: 100%; border-radius: 999px; background: var(--el); transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; }
.fortune-element-count { text-align: right; font-variant-numeric: tabular-nums; }
.fortune-element-tag { font-size: 0.85em; color: var(--f-muted); }

.fortune-scores-grid { display: grid; gap: 1em; align-items: center; }
@media (min-width: 480px) { .fortune-scores-grid { grid-template-columns: 9em 1fr; } }
.fortune-ring { position: relative; width: 9em; height: 9em; margin: 0 auto; }
.fortune-ring-value {
  fill: none;
  stroke: var(--f-gold);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc((100 - var(--score)) * 1px);
  filter: drop-shadow(0 0 6px rgb(230 195 106 / 0.7));
  transition: stroke-dashoffset 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s;
}
.fortune-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fortune-result .fortune-ring-number { font-family: var(--f-serif); font-size: 2.2em; font-weight: 700; line-height: 1; color: var(--f-gold-soft); font-variant-numeric: tabular-nums; }
.fortune-ring-name { margin-top: 0.25em; font-size: 0.72em; color: var(--f-muted); }
.fortune-bars { display: grid; gap: 0.6em; margin: 0; padding: 0; list-style: none; }
.fortune-bar { display: grid; grid-template-columns: 5em 1fr 2em; align-items: center; gap: 0.6em; font-size: 0.8125em; }
.fortune-bar-value { display: block; width: calc(var(--score) * 1%); height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--f-gold-deep), var(--f-gold-soft)); transition: width 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s; }
.fortune-bar-number { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--f-gold-soft); }

.fortune-lucky { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5em; margin: 0; }
@media (min-width: 480px) { .fortune-lucky { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fortune-lucky-cell { padding: 0.7em 0.5em; border: 1px solid var(--f-line-soft); border-radius: 0.75em; text-align: center; background: rgb(255 255 255 / 0.03); }
.fortune-lucky dt { font-size: 0.68em; color: var(--f-muted); }
.fortune-lucky dd { display: flex; min-height: 2.2em; align-items: center; justify-content: center; gap: 0.4em; margin: 0.3em 0 0; font-size: 0.9em; font-weight: 600; }
.fortune-lucky-number { font-family: var(--f-serif); font-size: 1.5em !important; color: var(--f-gold-soft); }
.fortune-swatch { width: 1.2em; height: 1.2em; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 50%; }
.fortune-compass { position: relative; width: 1.3em; height: 1.3em; border: 1px solid var(--f-line); border-radius: 50%; }
.fortune-compass::after { position: absolute; left: 50%; top: 50%; width: 2px; height: 0.55em; border-radius: 2px; background: var(--f-gold); content: ""; transform-origin: 50% 100%; transform: translate(-50%, -100%) rotate(var(--deg, 0deg)); }
.fortune-compass-northeast { --deg: 45deg; }
.fortune-compass-east { --deg: 90deg; }
.fortune-compass-southeast { --deg: 135deg; }
.fortune-compass-south { --deg: 180deg; }
.fortune-compass-southwest { --deg: 225deg; }
.fortune-compass-west { --deg: 270deg; }
.fortune-compass-northwest { --deg: 315deg; }
.fortune-compass-center::after { height: 4px; width: 4px; border-radius: 50%; transform: translate(-50%, -50%); }

/* 세 버튼의 폭은 1 : 1 : 1.3([닫기])이다. 격자(1fr 1fr 1.3fr)였을 때는 큰글씨에서 세 버튼이 한 줄에 들지 않으면 [닫기] 가 화면
   밖으로 잘렸다(360px 에서 1.3배부터 - "Compartir" 처럼 한 낱말은 접히지 않는다, 2026-09-19 검수 중 실측). 줄바꿈 flex 로 두면
   들어갈 때는 같은 비율의 한 줄, 안 들어가면 [닫기] 가 다음 줄 전체를 쓴다(폭 기준을 따로 두지 않는다 - 글자 배율·언어마다 다르다). */
.fortune-actionbar {
  display: none;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.75em 1em max(0.85em, env(safe-area-inset-bottom));
  border-top: 1px solid var(--f-line-soft);
  background: rgb(7 10 22 / 0.9);
}
.fortune-dialog[data-state="result"] .fortune-actionbar { display: flex; }
.fortune-actionbar .fortune-btn { flex: 1 1 0; min-height: 2.9em; font-size: 0.9em; }
.fortune-actionbar .fortune-btn-gold { flex-grow: 1.3; }

/* 공개 연출. 스크립트가 결과를 끼운 직후 data-reveal="ready"(값을 0 으로 접어 둠) → "play"(펼침)로
   바꾼다. 스크립트가 없으면 속성이 없으므로 처음부터 최종 값이 보인다.
   조각들은 --order 순서로 떠오르고, 기둥은 --i 순서(연 → 월 → 일 → 시)로 하나씩 뒤집힌다. */
.fortune-result[data-reveal="ready"] .fortune-reveal-item,
.fortune-result[data-reveal="ready"] .fortune-result-head { opacity: 0; }
.fortune-result[data-reveal="ready"] .fortune-ring-value { stroke-dashoffset: 100; transition: none; }
.fortune-result[data-reveal="ready"] .fortune-bar-value,
.fortune-result[data-reveal="ready"] .fortune-element-bar { width: 0; transition: none; }
.fortune-result[data-reveal="play"] .fortune-result-head { animation: fortune-rise 0.7s ease both; }
.fortune-result[data-reveal="play"] .fortune-reveal-item { animation: fortune-rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.25s + var(--order, 0) * 0.11s); }
.fortune-result[data-reveal="play"] .fortune-pillar,
.fortune-result[data-reveal="play"] .fortune-easy-pillar { animation: fortune-flip 0.75s cubic-bezier(0.3, 0.7, 0.2, 1) both; animation-delay: calc(0.55s + var(--i) * 0.4s); }

/* ── keyframes ── */
@keyframes fortune-spin { to { transform: rotate(360deg); } }
@keyframes fortune-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.95; } }
@keyframes fortune-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fortune-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fortune-deal { from { opacity: 0; transform: translateY(28px) rotate(-6deg) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes fortune-flip { from { opacity: 0; transform: rotateY(-95deg) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fortune-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes fortune-burst { 0% { transform: scale(1); } 40% { transform: scale(1.16); filter: brightness(1.6); } 100% { transform: scale(0.2); opacity: 0; } }
@keyframes fortune-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes fortune-flash { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes fortune-unveil { from { opacity: 0; letter-spacing: 0.3em; filter: blur(10px); } to { opacity: 1; letter-spacing: normal; filter: none; } }

/* ── 모션 줄이기 ── 이 저장소의 애니메이션은 예외 없이 이 설정을 따른다(home_hero.css).
   영상은 CSS 로 멈출 수 없어 스크립트가 아예 붙이지 않는다(lib/fortune/media.js) - 여기서는 나머지
   움직임을 끈다. 공개 연출의 "접어 둠" 상태도 풀어 값이 곧바로 보이게 한다. */
@media (prefers-reduced-motion: reduce) {
  .fortune *,
  .fortune *::before,
  .fortune *::after { animation: none !important; transition: none !important; }
  .fortune-result[data-reveal="ready"] .fortune-reveal-item,
  .fortune-result[data-reveal="ready"] .fortune-result-head { opacity: 1; }
}

/* ── 큰글씨 모드 ── 글자는 뿌리의 배율을 따라 이미 커진다. 여기서는 눌러야 하는 칸의 여유와 획을 보탠다. */
html.silver .fortune-tile,
html.silver .fortune-pill,
html.silver .fortune-segment-btn,
html.silver .fortune-btn { font-weight: 700; }
html.silver .fortune-tile-label { font-size: 0.85em; }
html.silver .fortune-result p { font-weight: 500; line-height: 1.9; }
html.silver .fortune-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.silver .fortune-grid-7 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html.silver .fortune-grid-hour { grid-template-columns: minmax(0, 1fr); }

/* ── 계산 도구: 좋은 날·조심할 날, 이름 기운(2026-09-19) ─────────────────────────
   결과는 풀이 결과와 같은 틀(.fortune-result·.fortune-card)을 쓰고, 여기에는 이 도구에만 있는 조각만 둔다. */
/* 무대의 시작 버튼이 홀수(한국어가 아닌 화면 - 이름 기운이 없다)면 마지막 버튼이 한 줄을 다 쓴다. */
.fortune-stage-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* 셈을 보내는 동안(game.js 의 setBusy) - 다시 누르지 못하게 흐리게 한다. */
.fortune-screens[aria-busy="true"] { cursor: progress; }
.fortune-screens[aria-busy="true"] .fortune-screen:not([hidden]) { opacity: 0.55; pointer-events: none; transition: opacity 0.2s ease; }

.fortune-tool-tabs { display: flex; width: 100%; }
.fortune-tool-tabs .fortune-segment-btn { flex: 1 1 0; }
.fortune-tool-tab-count { margin-left: 0.25em; font-size: 0.85em; font-weight: 500; color: var(--f-muted); }
/* 눌린 탭은 금빛 바탕이라 흐린 글자색이 묻힌다 - 버튼 글자색을 따르고 옅게만 한다. */
.fortune-segment-btn[aria-pressed="true"] .fortune-tool-tab-count { color: inherit; opacity: 0.75; }
.fortune-tool-panel { display: flex; flex-direction: column; gap: 0.85em; }
.fortune-tool-panel[hidden] { display: none; }

.fortune-result .fortune-tool-date { font-family: var(--f-serif); font-size: 1.35em; font-weight: 700; line-height: 1.4; color: var(--f-gold-soft); }
.fortune-result .fortune-tool-meta { font-size: 0.8125em; color: var(--f-muted); }
.fortune-tool-cat { font-weight: 700; }
.fortune-tool-cat[data-cat="good"] { color: var(--f-gold); }
.fortune-tool-cat[data-cat="caution"] { color: var(--f-amber); }
.fortune-tool-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5em;
  margin: 0.75em 0;
  padding: 0.6em 0.5em;
  border-radius: 0.8em;
  background: rgb(255 255 255 / 0.04);
  text-align: center;
}
.fortune-result .fortune-tool-compare p { display: flex; flex-direction: column; gap: 0.15em; font-size: 0.8125em; line-height: 1.5; }
.fortune-tool-compare-label { font-size: 0.85em; color: var(--f-muted); }
.fortune-tool-compare-text { color: var(--f-text); overflow-wrap: anywhere; }
.fortune-tool-compare-arrow { color: var(--f-gold); }
.fortune-tool-reasons { display: flex; flex-direction: column; gap: 0.35em; margin: 0 0 0.6em; padding-left: 1.1em; list-style: disc; font-size: 0.875em; line-height: 1.7; color: var(--f-text); }
.fortune-tool-reasons li::marker { color: var(--f-gold); }
.fortune-result .fortune-tool-hour { margin-top: 0.5em; font-size: 0.875em; font-weight: 600; color: var(--f-gold-soft); }

.fortune-day-list { display: flex; flex-direction: column; gap: 0.6em; margin: 0; padding: 0; list-style: none; }
.fortune-day-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.6em; font-size: 0.875em; line-height: 1.6; color: var(--f-text); }
.fortune-day-list-label { min-width: 8.5em; color: var(--f-muted); }
.fortune-day-list-date { color: var(--f-gold-soft); }
.fortune-day-list-meta { font-size: 0.9em; color: var(--f-muted); }
.fortune-day-list-note { flex-basis: 100%; font-size: 0.9em; color: var(--f-text); }

/* 30일 달력. 칸의 색이 뜻을 싣고, 같은 뜻을 aria-label 이 말로 읽어 준다. */
.fortune-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3em; }
.fortune-cal-head { padding-bottom: 0.2em; font-size: 0.68em; color: var(--f-muted); text-align: center; }
.fortune-cal-day {
  position: relative;
  display: flex;
  min-height: 2.6em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--f-line-soft);
  border-radius: 0.55em;
  font-size: 0.8125em;
  font-variant-numeric: tabular-nums;
  color: var(--f-text);
}
.fortune-cal-day[data-cat="good"] { border-color: var(--f-gold); background: rgb(230 195 106 / 0.22); color: var(--f-gold-soft); font-weight: 700; }
.fortune-cal-day[data-cat="caution"] { border-color: rgb(245 158 11 / 0.6); background: rgb(245 158 11 / 0.14); color: var(--f-amber); font-weight: 700; }
.fortune-cal-day[data-today] { box-shadow: 0 0 0 2px var(--f-gold-soft); }
.fortune-cal-day[data-son]::after { content: ""; position: absolute; bottom: 0.25em; width: 0.3em; height: 0.3em; border-radius: 999px; background: var(--f-el-water); }
.fortune-cal-month { font-size: 0.72em; font-weight: 500; line-height: 1.1; color: var(--f-muted); }

/* 이름 기운 - 첫소리 칸과 결과의 글자 줄. */
.fortune-crumbs-name { display: flex; }
.fortune-crumbs-name .fortune-crumb { flex: 1 1 0; }
/* .fortune-grid-7 .fortune-tile 의 굵기(600)보다 구체적이어야 먹는다. */
.fortune-grid-7 .fortune-tile-initial { min-height: 3em; font-size: 1.15em; font-weight: 700; }
/* 글자 수 버튼은 큰글씨·좁은 폭에서 "2글/자" 로 끊겼다 - 한 줄로 둔다. */
.fortune-name-length .fortune-segment-btn { white-space: nowrap; }
.fortune-name-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em; margin: 0; padding: 0; list-style: none; }
.fortune-name-letter { display: flex; min-width: 3.6em; flex-direction: column; align-items: center; gap: 0.15em; padding: 0.5em 0.6em; border: 1px solid var(--el); border-radius: 0.8em; }
.fortune-name-letter-glyph { font-size: 1.8em; font-weight: 700; line-height: 1.1; color: var(--el); }
.fortune-name-letter-element { font-size: 0.75em; color: var(--f-muted); }

html.silver .fortune-cal-day { min-height: 3em; }