:root {
  --bg: #0d0a07;
  --bg-glow: #2a1b0e;
  --gold: #d8b36a;
  --gold-bright: #f4dc9f;
  --cream: #f0e4cb;
  --muted: #b9a98c;
  --ink: #2a180c;
  --parchment: #dccfb5;
  --leather: #3f211c;
  --leather-dark: #271512;
  --gold-matte: #b0935e; /* 표지에 쓰는 광택 없는 금색 */
  --open: 1.05s cubic-bezier(.42, 0, .2, 1); /* 책이 펼쳐지는 동안 모든 부분이 함께 쓰는 속도 */
  --font: "Gowun Batang", "Noto Serif KR", "AppleMyungjo", "Batang", serif;

  /* 책 크기: 폰 너비와 화면 높이에 맞춰 자동으로 정해집니다 */
  --pw: min(45vw, 30vh, 220px);
  --ph: calc(var(--pw) * 1.38);
  --thick: calc(var(--pw) * .17); /* 덮었을 때 책 두께 */
  --diamond-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l4 4-4 4-4-4z' fill='%23d8b36a'/%3E%3C/svg%3E");
  --diamond-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l4 4-4 4-4-4z' fill='%237b5a28'/%3E%3C/svg%3E");
  --lines: repeating-linear-gradient(transparent 0 11px, rgba(70, 45, 20, .13) 11px 12.5px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-lang="en"] { --font: "EB Garamond", "Georgia", serif; }
[data-lang="ja"] { --font: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; }
[data-lang="zh"] { --font: "Noto Serif SC", "Songti SC", "SimSun", serif; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--cream);
  background:
    radial-gradient(90% 55% at 50% 44%, var(--bg-glow), transparent 75%),
    var(--bg);
  font-family: var(--font);
  line-height: 1.5;
  overflow-x: clip; /* 빛이나 입자가 화면 밖으로 번져도 가로 스크롤이 생기지 않게 */
}

/* 밤하늘의 별 두 겹: 서로 다른 박자로 반짝입니다 */
body::before, body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  animation: twinkle 5s ease-in-out infinite;
}
body::before {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #f4dc9f, transparent),
    radial-gradient(1px 1px at 28% 72%, #f0e4cb, transparent),
    radial-gradient(1.5px 1.5px at 44% 9%, #f4dc9f, transparent),
    radial-gradient(1px 1px at 63% 88%, #f4dc9f, transparent),
    radial-gradient(1.3px 1.3px at 86% 26%, #f0e4cb, transparent),
    radial-gradient(1px 1px at 93% 64%, #f4dc9f, transparent),
    radial-gradient(1.2px 1.2px at 6% 58%, #f4dc9f, transparent);
}
body::after {
  animation-delay: -2.5s;
  background-image:
    radial-gradient(1px 1px at 20% 40%, #f0e4cb, transparent),
    radial-gradient(1.4px 1.4px at 36% 93%, #f4dc9f, transparent),
    radial-gradient(1px 1px at 55% 22%, #f0e4cb, transparent),
    radial-gradient(1.3px 1.3px at 74% 12%, #f4dc9f, transparent),
    radial-gradient(1px 1px at 80% 80%, #f0e4cb, transparent),
    radial-gradient(1.2px 1.2px at 96% 44%, #f4dc9f, transparent),
    radial-gradient(1px 1px at 4% 84%, #f0e4cb, transparent);
}
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.app {
  width: 100%;
  max-width: 560px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding:
    max(8px, env(safe-area-inset-top))
    16px
    max(10px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 머리글 */
.top {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 48px;
  padding-bottom: 6px;
}
/* 제목 아래 금빛 장식선 */
.top::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 150px; height: 9px;
  transform: translateX(-50%);
  background:
    var(--diamond-gold) center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 42%, transparent 42% 58%, var(--gold) 58%, transparent) center / 100% 1px no-repeat;
}
.top h1 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: .24em; text-indent: .24em;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(244, 210, 130, .4);
  white-space: nowrap;
}
[data-lang="en"] .top h1 { font-size: 1.15rem; letter-spacing: .05em; text-indent: .05em; }

.icon-btn {
  position: absolute; right: -6px; top: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--gold);
}
.icon-btn[aria-pressed="true"] .sound-off,
.icon-btn[aria-pressed="false"] .sound-on { display: none; }

.lang {
  position: absolute; left: -4px; top: 0;
  height: 44px;
  display: flex; align-items: center; gap: 3px;
  color: var(--gold);
}
.lang svg { flex: none; pointer-events: none; }
.lang select {
  height: 44px; max-width: 74px;
  padding: 0;
  font-size: 16px; /* 16px 미만이면 아이폰이 화면을 확대합니다 */
  color: var(--gold);
  background: none; border: 0;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.lang select option { color: var(--cream); background: #1b130c; }

/* 질문 */
.question { min-height: 76px; margin-bottom: 12px; position: relative; z-index: 1; }
.question label { display: block; margin-bottom: 4px; font-size: .9rem; color: var(--gold); }
.question label small { color: var(--muted); font-size: .8rem; }
.field { position: relative; color: var(--gold); }
.field svg { position: absolute; left: 12px; top: 14px; pointer-events: none; }
.question input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 38px;
  font-size: 16px; /* 16px 미만이면 아이폰이 화면을 확대합니다 */
  color: var(--cream);
  background: rgba(24, 16, 9, .92);
  border: 1px solid rgba(216, 179, 106, .5);
  border-radius: 8px;
  outline: 1px solid rgba(216, 179, 106, .16);
  outline-offset: 2px;
}
.question input::placeholder { color: var(--muted); opacity: .85; }
.question input:focus { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(216, 179, 106, .2); }
.asked {
  margin: 0;
  min-height: 76px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 1rem;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
[data-lang="ja"] .asked, [data-lang="zh"] .asked { word-break: normal; }

/* 책이 놓이는 무대 */
.stage {
  position: relative;
  align-self: center;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  margin: auto 0 34px; /* 위: 남는 공간을 나눠 가운데쯤 / 아래: 그림자가 안내 문구에 닿지 않는 간격 */
  perspective: 1100px;
  perspective-origin: 50% 35%;
  flex: none;
  z-index: 2; /* 책이 질문 칸에 가려져 잘리지 않게 */
  animation: float 5.5s ease-in-out infinite; /* 펼친 뒤에도 이어져 누르는 순간 튀지 않습니다 */
}
@keyframes float { 50% { transform: translateY(-4px); } }
/* 책이 바닥에 드리우는 부드러운 그림자. 안내 문구에 닿지 않는 길이입니다 */
.stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: calc(100% - 12px);
  width: calc(var(--pw) * 1.25); height: 24px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
  pointer-events: none;
  transition: width var(--open);
}
.stage.is-open::after { width: calc(var(--pw) * 2.1); }
.stage::before {
  content: "";
  position: absolute;
  inset: -16% -16px -8%; /* 좌우는 화면 여백 안에서만 번지게 합니다 */
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 210, 130, .42), rgba(216, 160, 70, .12) 55%, transparent);
  opacity: .55;
  pointer-events: none;
  transition: opacity .6s ease;
  animation: breathe 4.5s ease-in-out infinite;
}
.stage.is-holding::before { opacity: 1; animation: candle 1.4s ease-in-out infinite; }
.stage.is-revealed::before { opacity: .9; animation: none; }
@media (min-width: 600px) { .stage::before { inset: -22% -22% -10%; } }
@keyframes breathe { 50% { opacity: .9; } }
@keyframes candle { 0%, 100% { opacity: 1; } 35% { opacity: .78; } 60% { opacity: .95; } }

/* 뒤에서 도는 마법진. 위아래는 질문 칸·안내 문구와 겹치지 않게 지웁니다 */
.ring {
  position: absolute;
  left: 50%; top: 50%;
  width: min(100%, calc(var(--ph) * 1.3));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--gold);
  opacity: .42;
  pointer-events: none;
  transition: opacity .5s ease;
  -webkit-mask-image: linear-gradient(transparent 7%, #000 17%, #000 76%, transparent 86%);
  mask-image: linear-gradient(transparent 7%, #000 17%, #000 76%, transparent 86%);
}
.is-holding .ring { opacity: .85; }
.ring__outer, .ring__inner { transform-origin: 50px 50px; transform-box: view-box; }
.ring__outer { animation: spin 70s linear infinite; }
.ring__inner { animation: spin 46s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.book {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  transform-style: preserve-3d;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  border-radius: 6px;
}
.book:disabled { cursor: default; }

/* 책의 자세: 아래 숫자만 바꾸면 놓인 각도가 달라집니다 */
.book__inner {
  --rx: 17deg;  /* 앞뒤로 눕힌 각도 */
  --ry: 27deg;  /* 좌우로 돌린 각도. 클수록 책등이 많이 보입니다 */
  --rz: -3deg;  /* 살짝 비스듬히 놓인 각도 */
  --x: calc(var(--pw) * -.5);
  --s: .9;      /* 덮인 책 크기. 비스듬히 놓여도 질문 칸에 닿지 않는 크기입니다 */
  position: absolute; inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) translateX(var(--x)) scale(var(--s));
  transition: transform var(--open);
}
.stage:not(.is-open) .book:not(:disabled):active .book__inner { --s: .88; }
/* 펼치면 책상에 눕고, 누르는 동안 들렸다가, 손을 떼면 천천히 내려앉습니다 */
.is-open .book__inner {
  --rx: 9deg; --ry: 0deg; --rz: 0deg; --x: 0px; --s: 1;
  transition: transform .9s cubic-bezier(.3, .9, .35, 1);
}
.is-holding .book__inner {
  --rx: 18deg; --s: .97;
  transition: transform var(--open);
}

.board, .cover { position: absolute; top: 0; left: 50%; width: var(--pw); height: var(--ph); display: block; }

/* 뒤표지: 펼쳤을 때 종이 둘레로 가죽이 조금 보입니다 */
.board {
  border-radius: 2px 6px 6px 2px;
  background: var(--grain), var(--leather-dark);
}

/* 책등: 둥글게 보이도록 명암을 넣고 금빛 띠를 둘렀습니다. 펼치면 두께와 함께 접힙니다 */
.spine {
  position: absolute; top: 0; left: 50%;
  display: block;
  width: var(--thick); height: var(--ph);
  transform-origin: left center;
  transform: rotateY(-90deg);
  border-radius: 3px;
  background:
    linear-gradient(transparent 12%, var(--gold-matte) 12% 13%, transparent 13% 24%, var(--gold-matte) 24% 25%, transparent 25% 75%, var(--gold-matte) 75% 76%, transparent 76% 87%, var(--gold-matte) 87% 88%, transparent 88%),
    linear-gradient(90deg, #1e0f0d, #47251f 45%, #27140f);
  transition: transform var(--open);
}

/* 아랫면: 앞뒤 표지 사이로 종이 단면이 보입니다 */
.underside {
  position: absolute; top: 100%; left: 50%;
  display: block;
  width: var(--pw); height: var(--thick);
  transform-origin: top center;
  transform: rotateX(90deg);
  background:
    linear-gradient(var(--leather-dark) 0 9%, transparent 9% 91%, var(--leather-dark) 91%),
    repeating-linear-gradient(#95866a 0 1px, #dacdb3 1px 2.5px);
  transition: transform var(--open);
}
.is-open .spine { transform: rotateY(-90deg) scaleX(0); }
.is-open .underside { transform: rotateX(90deg) scaleY(0); }

/* 오른쪽 종이 뭉치: img/page.svg에 휜 윤곽·글줄·명암이 그려져 있습니다.
   filter는 겹겹이 쌓인 종이 옆면으로, 넘길수록 오른쪽은 얇아집니다 */
.block {
  position: absolute; top: 0; left: 50%;
  display: block;
  width: var(--pw); height: var(--ph);
  background: url(../img/page.svg) center / 100% 100% no-repeat;
  filter: drop-shadow(1px .6px 0 #a9997b) drop-shadow(1px .6px 0 #dccfb5) drop-shadow(1px .6px 0 #9b8c70) drop-shadow(.8px .6px 0 #d2c4a9);
  transform: translateZ(var(--thick));
  transition: transform var(--open), filter 1.4s ease;
}
.is-open .block {
  transform: none;
  filter: drop-shadow(1px .6px 0 #a9997b) drop-shadow(1px .6px 0 #cfc1a6) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent);
}

/* 책갈피 끈 */
.ribbon {
  position: absolute;
  top: calc(100% - 1px); left: calc(50% + var(--pw) * .72);
  display: block;
  width: 10px; height: 20px;
  background: linear-gradient(90deg, #5e2622, #763430 50%, #552320);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  transform-origin: top center;
  translate: 0 0 calc(var(--thick) * .5);
  transition: translate var(--open);
  animation: sway 3.6s ease-in-out infinite;
}
.is-open .ribbon { translate: none; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }

/* 날아가는 책장: 조각을 겹겹이 이어 붙여 종이가 휘게 합니다 */
.leaves {
  position: absolute; inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform: translateZ(var(--thick)); /* 종이 뭉치와 같은 높이로 함께 내려갑니다 */
  transition: transform var(--open);
  pointer-events: none;
}
.is-open .leaves { transform: none; }
.leaf {
  position: absolute; top: 3.5%; left: 50%;
  display: block;
  width: calc(var(--pw) * .95); height: 93%;
  transform-origin: left center;
  transform-style: preserve-3d;
}
.segment {
  position: absolute; top: 0;
  left: calc(100% - .5px);
  display: block;
  width: 100%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
}
.segment b {
  position: absolute; inset: 0;
  display: block;
  background: var(--lines), #ddd0b7;
}
.leaf > .segment { left: 0; width: 25%; }
/* 가운데 쪽 조각은 고정된 면과 같은 곡선·명암으로 이어지게 합니다 */
.leaf > .segment > b, .leaf > .segment > i {
  clip-path: polygon(0 3.6%, 15% 2%, 40% .7%, 100% 0, 100% 100%, 40% 99.3%, 15% 98%, 0 96.4%);
}
.leaf > .segment > b {
  background: linear-gradient(90deg, rgba(46, 28, 11, .6), rgba(58, 37, 16, .1) 55%, transparent), var(--lines), #ddd0b7;
}
.segment i {
  position: absolute; inset: 0;
  display: block;
  background: #3c2208;
  opacity: 0;
}

/* 표지 */
.cover {
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--thick) + 1px)) rotateY(0);
  transition: transform var(--open);
}
.is-open .cover { transform: translateZ(0) rotateY(-180deg); }
.face {
  position: absolute; inset: 0;
  display: block;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 2px 7px 7px 2px;
}
/* 앞표지: 광택 없는 가죽. 금속 귀퉁이도 배경으로 그려 뒷면에 비치지 않습니다 */
.face.front {
  --corner: calc(var(--pw) * .15);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9%;
  color: var(--gold-matte);
  background:
    radial-gradient(circle at 100% 100%, transparent 54%, var(--gold-matte) 55%) calc(var(--pw) * .05) 0 / var(--corner) var(--corner) no-repeat,
    radial-gradient(circle at 0 100%, transparent 54%, var(--gold-matte) 55%) 100% 0 / var(--corner) var(--corner) no-repeat,
    radial-gradient(circle at 100% 0, transparent 54%, var(--gold-matte) 55%) calc(var(--pw) * .05) 100% / var(--corner) var(--corner) no-repeat,
    radial-gradient(circle at 0 0, transparent 54%, var(--gold-matte) 55%) 100% 100% / var(--corner) var(--corner) no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 225, 190, .05) 2%, rgba(0, 0, 0, .34) 4.5%, rgba(255, 225, 190, .04) 6%, transparent 9%),
    linear-gradient(125deg, rgba(255, 225, 190, .04), transparent 45%, rgba(0, 0, 0, .14)),
    var(--grain),
    var(--leather);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  transition: visibility 0s .3s; /* 덮을 때: 표지가 세워지기 전에 다시 보이게 */
}
.is-open .face.front { visibility: hidden; transition-delay: .62s; } /* 펼칠 때: 표지가 넘어간 뒤 숨김 */
.face.front::after {
  content: "";
  position: absolute; inset: 7% 7% 7% 12%;
  border: 1px solid rgba(176, 147, 94, .55);
  border-radius: 6px;
}
.face.front svg { width: 50%; }
.face.front b {
  max-width: 76%;
  font-size: calc(var(--pw) * .112);
  line-height: 1.25;
  letter-spacing: .16em; text-indent: .16em;
  text-align: center;
  word-break: keep-all;
}
[data-lang="en"] .face.front b { letter-spacing: .04em; text-indent: .04em; }

/* 앞표지 안쪽: 가죽 위에 왼쪽 종이가 얹혀 있습니다 */
.face.back {
  transform: rotateY(180deg);
  border-radius: 7px 2px 2px 7px;
  background: var(--grain), var(--leather-dark);
}
.face.back::before {
  content: "";
  position: absolute; inset: 0;
  background: url(../img/page.svg) center / 100% 100% no-repeat;
  transform: scaleX(-1); /* 오른쪽 면을 거울처럼 뒤집어 씁니다 */
  /* 왼쪽 종이 옆면. 넘길수록 두꺼워집니다 */
  filter: drop-shadow(1px .6px 0 #a9997b) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent);
  transition: filter 1.4s ease;
}
.is-open .face.back::before {
  filter: drop-shadow(1px .6px 0 #a9997b) drop-shadow(1px .6px 0 #dccfb5) drop-shadow(1px .6px 0 #9b8c70) drop-shadow(.8px .6px 0 #d2c4a9);
}

/* 책 사이에서 새어 나오는 빛 */
.beam {
  position: absolute;
  z-index: 4;
  left: 50%; top: -12%;
  width: 34%; height: 124%;
  transform: translateX(-50%) scaleX(.2);
  background: radial-gradient(closest-side, rgba(255, 238, 190, .55), rgba(244, 210, 130, .16) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease, transform .9s ease;
}
.is-holding .beam { opacity: 1; transform: translateX(-50%) scaleX(1); }

/* 금빛 입자 */
.mote {
  position: absolute;
  z-index: 4;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px 2px rgba(244, 210, 130, .75);
  pointer-events: none;
}

/* 답변 */
.answer {
  position: absolute; inset: 0;
  z-index: 5;
  margin: 0;
  padding: 0 9%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.6rem, 7.6vw, 2.5rem);
  line-height: 1.32;
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
  border-radius: 5px;
  background: radial-gradient(closest-side, var(--parchment) 72%, rgba(220, 207, 181, 0));
  opacity: 0;
  filter: blur(7px);
  transform: scale(.97);
  pointer-events: none;
  transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}
[data-lang="en"] .answer { font-size: clamp(1.4rem, 6.6vw, 2.3rem); line-height: 1.2; word-break: normal; }
[data-lang="ja"] .answer, [data-lang="zh"] .answer { font-size: clamp(1.45rem, 6.8vw, 2.3rem); word-break: normal; line-break: strict; }
[data-lang="ja"] .answer { word-break: auto-phrase; }
/* 답변 위아래 잉크 장식선 */
.answer::before, .answer::after {
  content: "";
  flex: none;
  width: 104px; height: 8px;
  background:
    var(--diamond-ink) center / 8px 8px no-repeat,
    linear-gradient(90deg, transparent, #7b5a28 42%, transparent 42% 58%, #7b5a28 58%, transparent) center / 100% 1px no-repeat;
}
.is-revealed .answer {
  opacity: 1; filter: none; transform: none;
  transition: opacity 1s ease .5s, filter 1.15s ease .5s, transform 1.15s ease .5s; /* 마지막 장이 내려앉은 뒤 떠오릅니다 */
}

/* 안내 */
.hint { position: relative; z-index: 1; min-height: 56px; text-align: center; }
.hint strong { display: block; font-size: 1.1rem; font-weight: 700; color: var(--gold-bright); text-shadow: 0 0 14px rgba(244, 210, 130, .35); }
.hint span { display: block; font-size: .9rem; color: var(--muted); }

/* 버튼 */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions[hidden] { display: grid !important; visibility: hidden; } /* 자리를 미리 잡아 답이 나올 때 책이 움직이지 않게 */
.actions--notice { min-height: 104px; align-content: start; } /* 버튼이 적어도 평소 2줄 높이를 유지합니다 */
.actions--notice .btn { grid-column: 1 / -1; }
.btn {
  min-height: 48px;
  padding: 8px 10px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(24, 16, 9, .85);
  border: 1px solid rgba(216, 179, 106, .6);
  border-radius: 8px;
  outline: 1px solid rgba(216, 179, 106, .14);
  outline-offset: -5px;
  color: var(--gold-bright);
  transition: background-color .15s ease, transform .1s ease;
}
.btn svg { flex: none; }
.btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.btn:active { transform: scale(.98); background: rgba(70, 48, 22, .9); }
@media (hover: hover) { .btn:hover { background: rgba(56, 38, 18, .9); } }
.btn--primary {
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-bright);
  outline-color: rgba(70, 45, 15, .4);
  box-shadow: 0 0 18px rgba(244, 210, 130, .24);
}
@media (hover: hover) { .btn--primary:hover { background: linear-gradient(180deg, #fbe9b9, #e2c07a); } }
.btn--primary:active { background: var(--gold); }

/* 조금 작은 폰: 간격을 줄여 한 화면에 들어오게 합니다 */
@media (max-height: 700px) {
  .app { gap: 5px; }
  .stage { margin-bottom: 26px; }
  .hint { min-height: 50px; }
}

/* 키가 작은 폰: 버튼을 한 줄로 줄여 스크롤 없이 보이게 합니다 */
@media (max-height: 640px) {
  .btn { min-height: 44px; padding: 6px 4px; font-size: .88rem; }
  .btn svg { display: none; }
  .question, .asked { min-height: 60px; }
  .question { margin-bottom: 4px; }
  .stage { margin-bottom: 22px; }
  .hint { min-height: 44px; }
  .hint span { font-size: .84rem; }
}

a { color: var(--gold-bright); text-decoration: none; }
@media (hover: hover) { a:hover { color: #fff3cf; } }

.foot { margin: auto 0 0; text-align: center; font-size: .75rem; color: var(--muted); }

/* 금빛 장식선 */
.orn {
  height: 9px; margin: 18px auto; border: 0;
  width: 150px; max-width: 100%;
  background:
    var(--diamond-gold) center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 42%, transparent 42% 58%, var(--gold) 58%, transparent) center / 100% 1px no-repeat;
}
.sheet .orn {
  background:
    var(--diamond-ink) center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, #7b5a28 42%, transparent 42% 58%, #7b5a28 58%, transparent) center / 100% 1px no-repeat;
}

/* 하위 페이지 머리글 */
.site-head {
  position: relative; z-index: 3;
  background: rgba(13, 10, 7, .82);
  border-bottom: 1px solid rgba(216, 179, 106, .24);
}
.site-head__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  width: 100%; max-width: 760px;
  margin: 0 auto;
  padding: 4px 16px 0;
}
.site-brand {
  min-height: 48px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .1em;
  color: var(--gold);
}
.site-brand svg { flex: none; color: var(--gold); }
[data-lang="en"] .site-brand { letter-spacing: .02em; }
.site-head .lang { position: static; }
.site-nav {
  order: 3;
  display: flex;
  flex-basis: 100%;
  margin: 0 -8px;
}
.site-nav a {
  position: relative;
  flex: 1 1 auto;
  min-height: 44px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  color: var(--muted);
  white-space: nowrap;
}
.site-nav--home { order: 0; flex: none; border-bottom: 1px solid rgba(216, 179, 106, .24); }
.site-nav a[aria-current="page"] { color: var(--gold-bright); font-weight: 700; }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute; left: 12%; right: 12%; bottom: 0;
  height: 2px;
  background: var(--gold);
}
@media (min-width: 640px) {
  .site-head__inner { padding-top: 0; flex-wrap: nowrap; }
  .site-head .lang { order: 3; }
  .site-nav { order: 2; flex-basis: auto; margin: 0 auto 0 12px; }
  .site-nav a { flex: none; min-height: 56px; padding: 0 12px; }
  .site-nav--home { order: 0; margin: 0; justify-content: center; }
  .site-nav--home a { min-height: 44px; }
}

/* 하위 페이지 본문 */
.page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 32px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
[data-lang="ja"] .page, [data-lang="zh"] .page { word-break: normal; }
.page-head { margin-bottom: 20px; text-align: center; }
.page-head h1 { margin: 0; font-size: 1.65rem; line-height: 1.35; color: var(--gold-bright); }
.page-head p { margin: 8px auto 0; max-width: 34em; color: var(--muted); }
.page > h2, .section-title {
  margin: 32px 0 12px;
  font-size: 1.15rem;
  color: var(--gold-bright);
}

/* 책장처럼 읽는 양피지 */
.sheet {
  position: relative;
  padding: 28px 20px 32px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(70, 48, 22, .13), transparent 5%, transparent 95%, rgba(70, 48, 22, .13)),
    var(--grain),
    var(--parchment);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 245, 220, .12), 0 10px 26px rgba(0, 0, 0, .45);
  font-size: 1.05rem;
  line-height: 1.85;
}
.sheet h1 { margin: 0; font-size: 1.55rem; line-height: 1.35; text-align: center; color: var(--ink); }
.sheet h2 { margin: 28px 0 8px; font-size: 1.15rem; line-height: 1.45; color: #4f2e12; }
.sheet p { margin: 0 0 12px; }
.sheet ul { margin: 0 0 12px; padding-left: 1.2em; }
.sheet li { margin-bottom: 6px; }
.sheet li::marker { color: #7b5a28; }
.sheet a { color: #6b2f14; text-decoration: underline; text-underline-offset: 3px; }
.sheet strong { color: #3a1f0b; }
.eyebrow {
  display: block;
  margin-bottom: 6px;
  text-align: center;
  font-size: .85rem; letter-spacing: .08em;
  color: #553f24;
}
.sheet__lead { margin: 0; text-align: center; color: #5a4630; font-size: .98rem; line-height: 1.6; }
@media (min-width: 640px) { .sheet { padding: 44px 56px 48px; } }

/* 글·링크 카드 */
.card-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.link-card {
  display: block;
  min-height: 44px;
  padding: 14px 16px;
  color: var(--cream);
  background: rgba(24, 16, 9, .85);
  border: 1px solid rgba(216, 179, 106, .3);
  border-radius: 8px;
  transition: border-color .15s ease, background-color .15s ease;
}
@media (hover: hover) { .link-card:hover { color: var(--cream); border-color: var(--gold-bright); background: rgba(44, 30, 15, .9); } }
.link-card:active { background: rgba(44, 30, 15, .9); }
.link-card strong { display: block; color: var(--gold-bright); line-height: 1.45; }
.link-card span { display: block; margin-top: 3px; font-size: .88rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 640px) { .card-list--two { grid-template-columns: 1fr 1fr; } }
.related { margin-top: 28px; }

/* 첫 화면 아래 */
.home-more {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 16px 8px;
  border-top: 1px solid rgba(216, 179, 106, .24);
  word-break: keep-all;
}
[data-lang="ja"] .home-more, [data-lang="zh"] .home-more { word-break: normal; }
.home-more h2 { margin: 0 0 14px; text-align: center; font-size: 1.2rem; color: var(--gold-bright); }
.home-more .ko-only { margin-top: 36px; }
.steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center;
  padding: 14px 16px;
  background: rgba(24, 16, 9, .85);
  border: 1px solid rgba(216, 179, 106, .3);
  border-radius: 8px;
}
.steps li::before {
  content: counter(step);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-radius: 50%;
}
@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
html:not([data-lang="ko"]) .ko-only { display: none; }

/* 광고 자리: 코드를 넣기 전에는 공간을 차지하지 않습니다. 버튼과 떨어져 있습니다 */
.ad-slot { margin: 32px 0; min-height: 100px; }
.ad-slot:empty { display: none; }

/* 공통 바닥글 */
.site-footer {
  width: 100%;
  max-width: 760px;
  margin: 12px auto 0;
  padding: 20px 16px max(20px, env(safe-area-inset-bottom));
  text-align: center;
}
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; }
.site-footer__links a {
  min-height: 44px; padding: 0 10px;
  display: inline-flex; align-items: center;
  font-size: .86rem;
  color: var(--muted);
}
@media (hover: hover) { .site-footer__links a:hover { color: var(--gold-bright); } }
.site-footer p { margin: 4px 0 0; font-size: .75rem; color: var(--muted); }

/* 게시판 */
.btn { text-decoration: none; }
.page .btn--wide { width: 100%; }
.board-cta { display: flex; justify-content: center; }
.board-cta .btn { min-width: 200px; }
.post-list { display: grid; gap: 12px; margin: 20px 0; }
.post-card {
  display: block;
  padding: 16px;
  color: var(--cream);
  background: rgba(24, 16, 9, .85);
  border: 1px solid rgba(216, 179, 106, .3);
  border-radius: 8px;
  transition: border-color .15s ease, background-color .15s ease;
}
@media (hover: hover) { .post-card:hover { color: var(--cream); border-color: var(--gold-bright); background: rgba(44, 30, 15, .9); } }
.post-card:active { background: rgba(44, 30, 15, .9); }
.post-card__q { display: block; font-size: .95rem; line-height: 1.5; color: var(--cream); }
.post-card__a { display: block; margin: 8px 0 10px; font-size: 1.2rem; line-height: 1.4; color: var(--gold-bright); }
.post-card__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(216, 179, 106, .16);
  font-size: .8rem; color: var(--muted);
}
.empty-state {
  margin: 20px 0;
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(216, 179, 106, .35);
  border-radius: 8px;
}
.board-status:empty { display: none; }
.back-link {
  min-height: 44px; margin-bottom: 4px;
  display: inline-flex; align-items: center;
  color: var(--gold);
}
.post-detail { text-align: center; }
.post-detail h1 { font-size: 1.02rem; font-weight: 400; line-height: 1.6; color: #4f3a22; }
.post-detail__a { margin: 0; font-size: 1.65rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.post-detail .meta-row { justify-content: center; margin-top: 8px; color: #5a4630; }
.meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; font-size: .82rem; color: var(--muted); }
.meta-row .text-btn { margin-left: auto; }
.post-detail .meta-row .text-btn { margin-left: 0; }
.text-btn {
  min-height: 44px; min-width: 44px; padding: 0 4px;
  background: none; border: 0;
  color: inherit;
  font-size: .82rem;
}
@media (hover: hover) { .text-btn:hover:not(:disabled) { text-decoration: underline; } }
.text-btn:disabled { opacity: .55; cursor: default; }
.post-actions { display: flex; justify-content: center; margin: 16px 0 0; }
.post-actions .btn { min-width: 200px; }
.comment-list { margin: 0; padding: 0; list-style: none; }
.comment {
  margin-bottom: 8px;
  padding: 12px 14px 2px;
  background: rgba(24, 16, 9, .85);
  border: 1px solid rgba(216, 179, 106, .2);
  border-radius: 8px;
}
.comment p { margin: 0; line-height: 1.6; color: var(--cream); }
.count {
  margin-left: 6px;
  font-size: .9rem; font-weight: 400;
  color: var(--muted);
}

/* 입력 양식 */
.board-form, .dialog form { display: grid; gap: 6px; }
.board-form {
  margin-top: 16px;
  padding: 16px;
  background: rgba(24, 16, 9, .85);
  border: 1px solid rgba(216, 179, 106, .3);
  border-radius: 8px;
}
.board-form label, .dialog label { margin-top: 4px; font-size: .9rem; color: var(--gold); }
.board-form textarea, .board-form input, .dialog textarea, .dialog input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cream);
  background: #120c07;
  border: 1px solid rgba(216, 179, 106, .45);
  border-radius: 8px;
  resize: vertical;
}
.board-form textarea::placeholder { color: var(--muted); opacity: .85; }
.board-form textarea:focus, .board-form input:focus, .dialog textarea:focus, .dialog input:focus {
  outline: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(216, 179, 106, .2);
}
.form-error { margin: 0; font-size: .9rem; color: #f1a48e; }
.form-error:empty { display: none; }
/* 자동 프로그램을 걸러내는 칸: 사람에게는 보이지 않습니다 */
.trap { position: absolute !important; left: -9999px; width: 1px !important; height: 1px; opacity: 0; }

.dialog {
  width: min(100vw - 32px, 440px);
  padding: 22px 20px 20px;
  color: var(--cream);
  background: #171009;
  border: 1px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .7);
}
.dialog::backdrop { background: rgba(0, 0, 0, .72); }
.dialog h2 { margin: 0; text-align: center; font-size: 1.1rem; color: var(--gold); }
.dialog__answer {
  margin: 8px 0 6px;
  padding: 14px 12px;
  text-align: center;
  font-size: 1.25rem; font-weight: 700; line-height: 1.35;
  color: var(--ink);
  background: var(--grain), var(--parchment);
  border-radius: 4px;
}
.dialog__notice { margin: 8px 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.dialog__buttons { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 4px; }

/* 관리자 */
.admin-list { margin: 16px 0 0; padding: 0; list-style: none; }
.admin-item {
  margin-bottom: 8px;
  padding: 14px;
  background: rgba(24, 16, 9, .85);
  border: 1px solid rgba(216, 179, 106, .25);
  border-radius: 8px;
}
.admin-item.is-hidden { opacity: .6; }
.admin-item p { margin: 0; color: var(--cream); }
.admin-item small { display: block; margin: 4px 0 10px; color: var(--muted); }
.admin-item .btn { display: inline-flex; margin-right: 8px; }

.toast {
  position: fixed;
  left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--ink);
  background: var(--gold-bright);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .answer { filter: none; transform: none; }
  .is-holding .book__inner { --rx: 9deg; --s: 1; }
}