/* 밤하늘 공통 화면. 페이지마다 html data-tint로 색만 바꾼다. */
:root { --sky:#0B1222; --deep:#101B33; --tint:#D9B66F; --wave:#2C4A6E; color-scheme:dark; }
html[data-tint="saju"] { --tint:#7FA6DA; --wave:#2C4A6E; }
html[data-tint="yukhyo"] { --tint:#B58CE6; --wave:#5B2E91; }
html[data-tint="time"] { --tint:#E0A15E; --wave:#A0612D; }
html[data-tint="tarot"] { --tint:#E58FB0; --wave:#8E3B5E; }
html[data-tint="juyeok"] { --tint:#7FC49A; --wave:#3F6B4F; }
html[data-tint="daily"] { --tint:#D9B66F; --wave:#7A5F2A; }
html { background:var(--sky); }
html body { background:transparent !important; overflow-x:clip; }
#sky { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:-2; pointer-events:none; }

/* 첫 화면: 위는 밤하늘, 파도 아래는 짙은 바탕 */
.hero:not(.hub), .book-hero { position:relative; z-index:-1; width:100vw; max-width:none; margin:8px calc(50% - 50vw) 24px !important; padding:44px 28px 150px !important; text-align:center; overflow:hidden; box-shadow:0 0 0 1000vmax var(--deep); clip-path:inset(0 0 -1000vmax 0); }
.hero:not(.hub) h1, .book-hero h1 { font:400 clamp(2.1rem, 10vw, 3.4rem)/1.35 'Gowun Batang', serif; color:#F4EFE4; margin:14px 0 18px; word-break:keep-all; text-shadow:0 0 30px rgba(11,18,34,.9); animation:fade-up 1s both; }
.hero:not(.hub) p, .book-hero p { color:#B7BFCD !important; max-width:30em; margin:0 auto; word-break:keep-all; animation:fade-up 1s .32s both; }
.book-hero .book-kicker, .hero .book-kicker { margin-bottom:10px; font-size:.875rem; letter-spacing:3px; color:var(--tint); animation:fade-up 1s both; }

.waves { position:absolute; left:0; right:0; bottom:-1px; height:150px; overflow:hidden; pointer-events:none; }
.waves > svg { position:absolute; left:0; bottom:0; width:200% !important; height:100% !important; margin:0 !important; animation:drift 22s linear infinite; }
.waves > svg:nth-child(2) { animation-duration:15s; animation-direction:reverse; height:78% !important; }
.waves > svg:nth-child(3) { animation-duration:10s; height:54% !important; }

.sky-foot { position:relative; background:var(--deep); color:#8E97A8; font:400 12.5px/1.75 "Noto Sans KR", sans-serif; text-align:center; padding:40px 16px 40px; border-top:1px solid rgba(217,182,111,.16); margin:0 calc(50% - 50vw); width:100vw; word-break:keep-all; }
.sky-foot summary { display:inline-block; min-height:44px; line-height:44px; padding:0 12px; color:#B7BFCD; font-weight:500; letter-spacing:2px; cursor:pointer; list-style:none; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(183,191,205,.4); }
.sky-foot summary::-webkit-details-marker { display:none; }
.sky-foot details[open] summary { text-decoration:none; }
.sky-foot p { margin:0; }
.sky-foot span { color:var(--tint); margin-right:8px; }
.sky-foot a { color:#B7BFCD; }
.sky-foot small { display:block; margin-top:12px; color:#6B7383; }
html body:has(.sky-foot) { padding-bottom:0 !important; }
#still:not([hidden]), #cast:not([hidden]), #done:not([hidden]) { animation:fade-up .7s both; }
@keyframes fade-up { from { opacity:0; transform:translateY(20px); } }
@keyframes drift { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* PDF 저장(인쇄): 어두운 배경과 움직임을 빼고 내용만 밝게 담는다 */
@media print {
  :root, html[data-tint] { --bg:#fff; --panel:#fff; --ink:#24211C; --soft:#5C574D; --line:#CFC8B8; --accent:#2C4A6E; --gold:#8A7F6A; --tint:#2C4A6E; --coin:#2C4A6E; --deep:#fff; --veil:#fff; color-scheme:light; }
  html, html body { background:#fff !important; color:#24211C; padding:0; overflow:visible; }
  * { animation:none !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #sky, .waves, .back, #restart, #savePdf, #shareImg, .keep, #doneTitle, #closing, .sky-foot { display:none !important; }

  /* 카드·괘 */
  .cards { display:block !important; }
  .card.open, .gua { background:#fff !important; border:1px solid #CFC8B8 !important; color:#24211C; margin-bottom:10px; break-inside:avoid; }
  .notice { color:#8A2F2F !important; }

  /* 사주풀이: 입력 화면을 빼고 탭에 가려진 장을 모두 펼친다 */
  .wrap > *:not(#generalResult) { display:none !important; }
  .book-tabs, .book-count, .book-pager, .book-months, .book-hint, .share-bar, .compass-pick, .compass-nav, .compass-foot { display:none !important; }
  .book-panel[hidden], .book-month[hidden] { display:block !important; }
  .book-panel:has(.compass-answer[hidden]) { display:none !important; }
  html[data-tint] body.mode-general #generalResult { margin:0; padding:0; border-radius:0; }
  .book-cover, .book-caution { margin:0; break-inside:avoid; }
  .sinsu h3, .sinsu h4 { break-after:avoid; }
  .sinsu p, .book-month { orphans:3; widows:3; }
}