/* Photographic materials over the functional, independently turning book planes. */
.experience { min-height: 0; }
.experience-content { max-width: 1100px; padding-top: 32px; }
.room { background-position: center top; }
.experience::after { background: linear-gradient(180deg, #fbf5e621, transparent 42%, #faf7f052 72%, #faf7f0f5 92%, var(--paper)); }
.heading-area { margin-bottom: 12px; }
.book-stage {
  width: 100%; max-width: 940px; height: auto; aspect-ratio: 1.25;
  margin: 14px auto 0; perspective: 1800px; overflow: visible;
}
.book-scene {
  left: 0; top: 0; width: 100%; height: 100%;
  transform: rotateY(-5deg) rotateX(1deg); transform-style: preserve-3d;
  filter: drop-shadow(0 14px 14px #26190f4a);
}
.stand-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.stand-front {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: url('./assets/wooden-stand.webp') center / 100% 100% no-repeat;
  clip-path: inset(85% 0 0 0);
}
.book-spread { left: 7%; right: 7%; top: 3%; bottom: 12%; transform-style: preserve-3d; }
.page {
  top: 0; width: 50%; height: 100%; border: 0; border-radius: 0;
  background-image: url('./assets/open-book.webp'); background-size: 200% 100%;
  background-repeat: no-repeat; background-color: transparent; box-shadow: none; overflow: visible;
}
.left-page { left: 0; background-position: left center; opacity: 0; }
.right-page { right: 0; background-position: right center; }
.page-emblem {
  position: absolute; top: 47%; left: 0; width: 100%; text-align: center;
  color: #b59151; font: 18px Georgia, serif;
}
.page-number { bottom: 11%; font-size: 12px; color: #907953; letter-spacing: 1px; }
.printed-answer {
  inset: 14% 16% 15% 10%; gap: 22px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; overflow: visible;
}
.printed-answer p { flex: 0 0 auto; margin: 0; overflow-wrap: anywhere; word-break: normal; }
#printed-answer { font: clamp(22px, 2.2vw, 31px)/1.65 var(--serif); color: #3c3024; }
.answer-star { flex: 0 0 auto; color: #b78b42; font: 16px/1 Georgia, serif; }
.printed-answer .answer-explanation { font: 16px/1.85 var(--serif); color: #7d6a51; }
:lang(ko) #printed-answer, :lang(ko) .answer-explanation { word-break: keep-all; }
.cover { left: 50%; top: 0; width: 47.5%; height: 99%; z-index: 20; }
.cover-front {
  display: block; border: 0; border-radius: 10px;
  background: url('./assets/cloth-cover-medieval.webp') center / 100% 100% no-repeat;
  box-shadow: 5px 7px 11px #201c165e;
}
.cover-inside {
  background: url('./assets/open-book.webp') right center / 200% 100% no-repeat;
  border: 0; border-radius: 0; box-shadow: none;
}
.turning-pages { inset: 4% 6% 7%; }
.turn-sheet {
  background-image: url('./assets/open-book.webp'); background-position: right center;
  background-size: 225% 112%; background-color: #f5ebd4;
  box-shadow: 5px 0 12px #55412b26;
}
.turn-sheet::after { font-size: 21px; line-height: 2.5; filter: blur(4px); opacity: .38; }
.status { margin: -12px 0 18px; min-height: 23px; }
.controls { max-width: 680px; padding-bottom: 24px; }
.quiet-shelf { margin-top: 35px; }
@media (max-width: 650px) {
  .experience-content { padding: 24px 10px 0; }
  .heading-area { margin-bottom: 8px; }
  .book-stage { width: 100%; max-width: none; height: auto; aspect-ratio: 1.08; margin-top: 8px; }
  .book-scene { left: 0; top: 0; width: 100%; height: 100%; }
  .book-spread { left: 5%; right: 5%; top: 3%; bottom: 12%; }
  .printed-answer { inset: 12% 14% 14% 9%; gap: 14px; }
  #printed-answer { font-size: 18px; line-height: 1.65; }
  .printed-answer .answer-explanation { font-size: 13px; line-height: 1.8; }
  .answer-star { font-size: 12px; }
  .page-emblem { font-size: 13px; }
  .page-number { font-size: 9px; bottom: 10%; }
  .cover-front { border: 0; border-radius: 5px; }
  .status { margin: -5px 0 12px; font-size: 13px; }
  .controls { padding: 0 6px 18px; }
  .quiet-shelf { margin-top: 25px; }
  .turn-sheet::after { font-size: 15px; line-height: 2; }
}
@media (max-width: 360px) {
  #printed-answer { font-size: 17px; }
  .printed-answer { gap: 12px; }
}

/* Keep the complete first action visible within the initial viewport. */
.site-header { height: 48px; padding: 0 24px; justify-content: flex-end; }
.brand { position: absolute; left: 50%; transform: translateX(-50%); font-size: 22px; gap: 8px; }
.brand svg { width: 26px; }
.language-toggle { font-size: 12px; padding: 8px 0; }
.language-panel { top: 38px; }
.experience-content { padding-top: 8px; }
.eyebrow { display: none; }
.heading-area { min-height: 0; margin: 0; }
h1 { font-size: 18px; line-height: 1.4; }
.book-stage { width: min(100%, 850px, calc((100svh - 270px) * 1.25)); margin-top: 4px; }
.book-scene { transform: none; filter: none; }
.cover-front { filter: contrast(1.09) saturate(1.08); }
.status { margin: 0 0 5px; min-height: 18px; }
.status:empty { display: none; }
.controls { max-width: 620px; padding-bottom: 12px; }
textarea { min-height: 60px; height: 60px; padding: 10px 15px; }
.primary-actions { margin-top: 8px; }
.button { min-height: 46px; padding: 10px 16px; }
.tagline { margin-top: 10px; }
.quiet-shelf { margin-top: 20px; }
@media (max-width:650px) {
 .site-header { height: 44px; padding: 0 8px; }
 .brand { font-size: 16px; gap: 4px; }
 .brand svg { width: 19px; }
 .language-toggle { font-size: 10px; gap: 4px; }
 .language-toggle svg { width: 14px; height: 14px; }
 .experience-content { padding: 8px 10px 0; }
 h1 { font-size: 16px; }
 .book-stage { width: min(100%, calc((100svh - 260px) * 1.08)); }
 .controls { padding: 0 6px 12px; }
 textarea { min-height: 62px; height: 62px; font-size: 14px; }
 .button { min-height: 46px; padding: 10px; }
 .tagline { margin-top: 10px; }
}
@media (max-width:360px) {
 .brand { font-size: 14px; gap: 3px; }
 .brand svg { width: 16px; }
 .language-toggle { gap: 3px; font-size: 9px; }
}

/* Wider paper, aligned print, and a sequential physical cover/page transition. */
.book-stage { aspect-ratio: 1.65; width: min(100%, 1080px, calc((100svh - 270px) * 1.65)); }
.book-scene, .book-stage[data-state=turning] .book-scene, .book-stage[data-state=result] .book-scene { transform: none; transition: none; }
.cover { width: 50%; height: 100%; transition: none; z-index: 40; }
.cover-inside { background-position: right center; }
.book-stage[data-state=turning] .cover { transform: none; }
.book-stage[data-phase=pages] .cover, .book-stage[data-state=result] .cover { visibility: hidden; }
.left-page { transition: none; }
.book-stage[data-state=turning] .left-page { opacity: 0; }
.book-stage[data-phase=pages] .left-page { opacity: 1; }
.book-stage[data-state=idle] .right-page, .book-stage[data-state=ended] .right-page { visibility: hidden; }
.turning-pages { inset: 0; z-index: 25; }
.turn-sheet { top: 0; height: 100%; background: none; border: 0; border-radius: 0; box-shadow: none; }
.turn-sheet::after { content: none; }
.sheet-face { position: absolute; inset: 0; backface-visibility: hidden; background: #f5ebd4 url('./assets/open-book.webp') right center / 200% 100% no-repeat; }
.sheet-front::after { content: 'A moment. A possibility. Another path. Listen to the quiet. Take your time. A different beginning.'; position: absolute; inset: 23% 18%; color: #8d7856; font: 18px/2.4 var(--serif); filter: blur(4px); opacity: .3; overflow: hidden; }
.sheet-back { transform: rotateY(180deg); background-position: left center; }
.page-emblem { display: none; }
.right-page::after { content: ''; position: absolute; inset: 8% 9% 13%; background: url('./assets/answer-ornament.svg') center / 100% 100% no-repeat; pointer-events: none; opacity: .7; }
.printed-answer { inset: 21% 17% 26%; gap: 14px; }
#printed-answer { font-size: clamp(21px, 2vw, 29px); line-height: 1.65; }
.printed-answer .answer-explanation { font-size: 14px; line-height: 1.7; }
.language-wrap { position: absolute; left: calc(50% + 100px); right: auto; }
.language-panel { right: auto; left: 0; }
@media (max-width:650px) {
 .site-header { justify-content: center; gap: 18px; }
 .brand { position: static; transform: none; }
 .language-wrap { position: relative; left: auto; }
 .language-panel { left: auto; right: -8px; width: min(340px, calc(100vw - 24px)); }
 .book-stage { aspect-ratio: 1.35; width: min(100%, calc((100svh - 260px) * 1.35)); }
 .printed-answer { inset: 19% 16% 24%; gap: 9px; }
 #printed-answer { font-size: 17px; line-height: 1.65; }
 .printed-answer .answer-explanation { font-size: 13px; }
 .sheet-front::after { font-size: 14px; }
}
/* Match the actual paper area, excluding the photographed fore-edge at the right. */
.cover-inside { background-position: left center; }
.sheet-face { background-color: transparent; }
.right-page::after { left: 4%; right: 20%; }
.printed-answer { left: 9%; right: 25%; }
/* Moving leaves use only the paper texture, never the cover or photographed page stack. */
.turn-sheet { top: 5%; width: 42%; height: 88%; }
.sheet-face { background-position: 84% 50%; background-size: 260% 115%; clip-path: polygon(0 3%, 40% 0, 100% 2%, 100% 98%, 55% 96%, 0 100%); }
.sheet-back { background-position: 84% 50%; }
/* Preserve the regenerated lettering proportions on every viewport. */
.cover-front { background-image: url('./assets/cloth-cover-thick-v3.webp'); background-size: contain; background-position: left bottom; box-shadow: none; border-radius: 0; filter: none; }

/* Keep the two-line Korean instruction readable, including wrapped mobile lines. */
:lang(ko) #question { height: 76px; line-height: 1.6; }
@media (max-width:650px) { :lang(ko) #question { height: 112px; } }
/* Touch-and-release ritual prototype; no separate input or opening button. */
#question-form { display: none !important; }
#book-touch { position:absolute; inset:0; z-index:3; border:0; padding:0; background:transparent; cursor:pointer; touch-action:none; user-select:none; -webkit-touch-callout:none; backface-visibility:hidden; border-radius:8px; }
#book-touch:disabled { opacity:1; cursor:default; pointer-events:none; }
#book-touch:focus-visible { outline:2px solid #e0bd70; outline-offset:-8px; }
.touch-star { position:absolute; left:44%; top:39%; color:#ffe0a0; font:22px Georgia; opacity:0; pointer-events:none; transition:opacity .3s,filter 2s; }
#book-touch:hover .touch-star { opacity:.4; }
#book-touch.holding .touch-star { opacity:1; filter:drop-shadow(0 0 14px #ffe4a3) drop-shadow(0 0 25px #ffcd66); }
#book-touch.ready .touch-star { color:#fff6d9; filter:drop-shadow(0 0 20px #ffedb8) drop-shadow(0 0 35px #ffd373); }
#ritual-hint { min-height:44px; max-width:620px; margin:10px auto 8px; padding:0 14px; text-align:center; font:16px/1.7 var(--serif); color:#574634; }
#result-controls .button { font-size:16px; }
@media(max-width:650px){#ritual-hint{font-size:14px;min-height:48px;} .touch-star{font-size:15px;}}

/* A clear green capsule for the hold instruction, with stronger supporting text. */
#ritual-hint {
 width: fit-content; max-width: calc(100% - 24px); min-height: 0;
 margin: 12px auto 14px; padding: 13px 27px;
 border: 1px solid #a6c18a; border-radius: 999px;
 background: #d9ebc5; color: #294425;
 font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.65;
 box-shadow: 0 3px 12px #3044210c;
}
@media(max-width:650px) {
 #ritual-hint { font-size: 14px; padding: 12px 21px; max-width: calc(100% - 16px); }
}

/* Darker book print; preserve the existing typeface and sizes. */
#printed-answer { color: #241b14; font-weight: 600; }
.printed-answer .answer-explanation { color: #483929; font-weight: 500; }

.release-guide { font-size:13px; color:#776b5b; text-decoration:none; padding:8px; }

/* Three remaining pages, beside the book rather than beneath it. */
.book-stage { width: min(calc(100% - 140px), 960px, calc((100svh - 270px) * 1.65)); }
.daily-meter { position:absolute; left:calc(100% + 12px); top:45%; transform:translateY(-50%); width:64px; padding:12px 7px; z-index:8; background:#fbf6e9ed; border:1px solid #bca878; border-radius:18px; box-shadow:0 4px 20px #37271920; display:flex; flex-direction:column; align-items:center; gap:9px; color:#55472d; font:12px/1.25 var(--sans); text-align:center; }
.daily-meter strong { font-size:18px; color:#33492c; font-variant-numeric:tabular-nums; white-space:nowrap; }
.daily-bars { display:flex; flex-direction:column; gap:6px; width:100%; }
.daily-bars i { display:block; height:18px; border-radius:5px; background:#819b5f; border:1px solid #69854c; box-shadow:inset 0 1px 1px #ffffff66; }
.daily-bars i.spent { background:#e8e2d6; border:1px solid #cfc5b4; box-shadow:none; }
.daily-meter[data-empty=true] strong { color:#817764; }
.daily-message { max-width:620px; margin:12px auto; text-align:center; white-space:pre-line; font:14px/1.7 var(--sans); color:#574634; }
#next:disabled { cursor:default; opacity:.6; }
@media(max-width:650px){
 .book-stage { width:calc(100% - 58px); margin-left:0; margin-right:58px; }
 .daily-meter { left:calc(100% + 6px); width:49px; padding:10px 5px; border-radius:13px; font-size:10px; gap:7px; }
 .daily-meter strong { font-size:15px; }
 .daily-bars i { height:16px; }
 .daily-message { font-size:13px; padding:0 12px; }
}

#bonus {font-size:clamp(12px, 2.8vw, 16px);line-height:1.5;}
#bonus-note {font-size:12px;text-align:center;color:#776c60;margin:8px 0;}

#heading { color: #17130f; font-weight: 700; }

/* Essential photographic surfaces use real images, not CSS backgrounds. */
.room,.page,.cover-front,.cover-inside,.sheet-face,.stand-front {background-image:none;}
.photo-texture {position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0;}
.photo-texture img {position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;}
.half-left img,.half-right img {width:200%;}
.half-right img {left:-100%;}
.cover-texture img {object-fit:contain;object-position:left bottom;}
.room-texture img {object-fit:cover;object-position:center top;}
.page-emblem,.page-number,.printed-answer {z-index:1;}
@media(max-width:650px){.room-texture img {object-position:center 45%;}}

/* Match the original moving-paper crop; keep the thick page block stationary. */
.sheet-face .photo-texture img {width:260%;height:115%;left:-134.4%;top:-7.5%;}
.cover-front,.cover-inside,.sheet-face {transform-style:flat;-webkit-backface-visibility:hidden;backface-visibility:hidden;}

/* Keep Korean/English words intact and balance the printed lines. */
:lang(ko) #printed-answer, :lang(ko) #printed-explanation,
:lang(en) #printed-answer, :lang(en) #printed-explanation {
  word-break:keep-all;overflow-wrap:normal;hyphens:none;text-wrap:balance;
}

.printed-answer > p {width:100%;min-width:0;max-width:100%;}


.search-intro{max-width:720px;margin:36px auto;padding:0 24px;color:#675e51;font-size:14px;line-height:1.9}.search-intro h2{font-size:18px}.search-intro h3{font-size:15px;margin-bottom:6px}.search-intro nav{display:flex;flex-wrap:wrap;gap:10px 20px}.search-intro a{color:#4e6042}