/* 소리부적 · Moonlit Sanctuary / revision 3
   Presentation only. Original copy, routes, events and application states are preserved. */
:root {
  color-scheme: dark;
  --bg:#07131d; --bg2:#102831; --bg3:#17343d;
  --dim:#29464d; --dim2:#3c5e65;
  --gold:#cbb586; --gold2:#efddaf; --gold3:#fff4d8;
  --red:#95685b; --red2:#bf8977; --red3:#edc1af;
  --blue:#245463; --blue2:#568e9f; --blue3:#b2dbe4;
  --txt:#e1ebe7; --txt2:#b3c9c9; --txt3:#89a7ac;
  --sb-edge:rgba(193,215,199,.22);
  --sb-surface:linear-gradient(145deg,rgba(25,56,63,.94),rgba(11,32,42,.96));
  --sb-glow:0 18px 48px rgba(0,8,16,.30),inset 0 1px rgba(235,230,192,.08);
}
html {
  background:#07131d;
  background-image:linear-gradient(rgba(7,19,29,.55),rgba(7,19,29,.85)),url('assets/moonlit-sanctuary.webp');
  background-position:center top; background-size:cover; background-attachment:fixed;
  scrollbar-color:#647c7c #07131d;
}
body {
  position:relative; isolation:isolate;
  width:100%; max-width:480px; min-height:100vh;
  background:linear-gradient(180deg,transparent 400px,rgba(7,19,29,.55) 740px,#07131d 1000px);
  color:var(--txt); -webkit-font-smoothing:antialiased;
}
body::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1020px;
  z-index:0; pointer-events:none;
  background-image:linear-gradient(180deg,rgba(7,19,29,.06),rgba(7,19,29,.08) 35%,rgba(7,19,29,.72) 72%,#07131d 100%),url('assets/moonlit-sanctuary.webp');
  background-repeat:no-repeat; background-position:center top; background-size:100% 100%,auto 860px;
}
.page { position:relative; z-index:1; }
#stars { opacity:.45; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--gold2); outline-offset:3px;
}
::selection { background:#467c81; color:var(--gold3); }
header { padding:20px 22px 0; }
.logo-seal { width:36px; height:36px; border-color:var(--gold); background:rgba(10,35,43,.6); box-shadow:0 0 22px rgba(216,199,149,.15); }
.logo-seal::before { border-color:#9bc8c7; }
.logo-text { font-size:1rem; letter-spacing:.08em; }
.logo-sub { color:#b3c9c9; letter-spacing:.12em; }
#header-guest button { border-radius:30px!important; border-color:rgba(212,226,211,.3)!important; background:rgba(9,30,40,.55)!important; color:var(--txt)!important; }
.danchung-line { background:linear-gradient(90deg,transparent,#689b9a 25%,#e2d3a8 50%,#689b9a 75%,transparent); opacity:.48; height:1px; }
/* First screen: the original seal and copy float over a moonlit landscape. */
body[data-design-page="index"] .hero { padding:34px 22px 0; }
.hero > div:first-child > div:first-child {
  width:92px!important; height:92px!important; margin-bottom:24px!important;
  filter:drop-shadow(0 0 20px rgba(214,228,199,.3));
}
.hero > div:first-child > div:first-child > div:first-child { border-color:rgba(206,225,203,.3)!important; border-width:1px!important; }
.hero > div:first-child > div:first-child > div:nth-child(2) { border-color:#94c4c1!important; opacity:.7!important; }
.hero > div:first-child > div:first-child > div:nth-child(3) { border-color:var(--gold2)!important; }
.hero > div:first-child > div:first-child > div:nth-child(4) {
  background:radial-gradient(circle at 40% 25%,rgba(130,169,156,.65),rgba(19,57,64,.86))!important;
  box-shadow:0 0 22px rgba(209,221,179,.16),inset 0 0 16px rgba(226,226,183,.1);
}
.hero > div:first-child > div:first-child span { font-size:1.5rem!important; font-weight:600!important; }
.hero > div:first-child > div:nth-child(2) {
  background:transparent!important; border-color:transparent!important; padding:12px 0 18px!important;
  text-shadow:0 2px 18px #07131d,0 1px 5px #07131d;
}
.hero > div:first-child > div:nth-child(2) > div:first-child {
  color:#d4ddc5!important; font-size:.6875rem!important; letter-spacing:.22em!important; margin-bottom:14px!important;
}
.hero > div:first-child > div:nth-child(2) > div:nth-child(2) {
  color:#fff1d1!important; font-size:clamp(1.23rem,5.3vw,1.55rem)!important;
  line-height:1.65!important; letter-spacing:-.05em; margin-bottom:14px!important; word-break:keep-all;
}
.hero > div:first-child > div:nth-child(2) > div:nth-child(3) { font-size:.875rem!important; color:#dfebe6!important; line-height:1.95!important; margin-bottom:20px!important; }
.hero > div:first-child > div:nth-child(2) > div:nth-child(4) { gap:6px!important; }
.hero > div:first-child > div:nth-child(2) > div:nth-child(4) > span { background:rgba(9,29,38,.7)!important; padding:5px 9px!important; }
.hero > div:first-child > div:nth-child(2) > div:last-child { color:var(--gold2)!important; font-size:.875rem!important; margin-top:16px; }
.hero-hook {
  background:linear-gradient(120deg,rgba(27,60,66,.83),rgba(12,34,43,.88));
  border:1px solid rgba(200,216,191,.25); border-radius:18px; padding:17px 13px;
  box-shadow:var(--sb-glow); backdrop-filter:blur(8px);
}
.hero-hook-main { color:var(--gold2); font-size:1rem; line-height:1.65; margin-bottom:6px; }
.hero-hook-sub { font-size:.8125rem; line-height:1.75; }
.hero-hook-sub em { color:#e4d6b8; }
.hero-free-badge { background:rgba(25,57,61,.82); border-color:rgba(211,203,161,.42); color:var(--gold2); padding:7px 17px; margin:2px 0 16px; letter-spacing:.04em; }
/* Frosted blue-green surfaces, with quiet gold boundaries. */
.saju-form-card,.report-card,.sample-card,.reality-card,.review-card,.special-card,
.player-card,.analysis-card,.profile-card,.order-card,.price-section,.preview-panel {
  background:var(--sb-surface); border-color:var(--sb-edge); border-radius:20px;
  box-shadow:var(--sb-glow);
}
.saju-form-card { padding:24px 18px; border-top:1px solid rgba(234,215,168,.65); backdrop-filter:blur(12px); }
.saju-form-title { font-size:1rem; line-height:1.8; margin-bottom:22px; }
.field-label { font-size:.8125rem; color:#d9d4b7; margin-bottom:10px; }
.field-required { color:#ddc29c; border-color:rgba(217,195,150,.25); background:rgba(204,183,141,.055); }
.date-input { height:48px; border-radius:11px; background:rgba(7,26,35,.62); border-color:#34545b; color:#ecf1e7; }
.date-input:focus { border-color:#b5c8ae; box-shadow:0 0 0 3px rgba(148,193,183,.10); }
.date-input::placeholder { color:#96b0b5; }
.gender-btn { height:44px; border-radius:11px; background:rgba(7,26,35,.34); }
.gender-btn.on { color:#f1e3bb; background:rgba(140,166,143,.18); border-color:#b9c1a2; }
.sigan-grid { gap:7px; }
.sigan-btn { border-radius:10px; padding:9px 2px; background:rgba(7,26,35,.56); border-color:#2d4b52; }
.sigan-name { color:#bed0cd; font-size:.75rem; }
.sigan-hanja { color:#a1bfc0; }
.sigan-time { font-size:.625rem; color:#8faeb4; }
.sigan-btn.on { background:rgba(191,188,139,.12); border-color:var(--gold); box-shadow:0 0 14px rgba(202,183,135,.07); }
.sigan-unknown { border-radius:10px; height:40px; font-size:.8125rem; }
.sigan-unknown.on { background:rgba(108,170,171,.12); border-color:#79b4b5; color:#c2e3df; }
.btn-analyze,.btn-main,.btn-next,.btn-generate,.btn-pay,.btn-download,.btn-new { border-radius:14px; }
.btn-analyze:not(:disabled) {
  background:linear-gradient(115deg,#e8d7ac,#c6b783); color:#172c2c;
  box-shadow:0 7px 26px rgba(216,197,144,.19),inset 0 1px rgba(255,250,224,.6);
}
.btn-analyze:disabled { background:#29434b; color:#92a8ab; }
.btn-main:not(:disabled),.btn-next:not(:disabled),.btn-generate:not(:disabled),.btn-pay:not(:disabled),.btn-new,.btn-make {
  background:linear-gradient(110deg,#397a80,#24535e); border-color:#6a9c98;
  color:#fff1d4; box-shadow:0 6px 22px rgba(47,111,116,.21),inset 0 1px rgba(209,229,209,.14);
}
.btn-download:not(:disabled) { background:linear-gradient(110deg,#877747,#5d613d); border-color:var(--gold); }
.section-divider { margin-top:38px; margin-bottom:26px; }
.section-divider::before { background:linear-gradient(90deg,transparent,#758978); }
.section-divider::after { background:linear-gradient(90deg,#758978,transparent); }
.section-divider span { font-size:.75rem; color:#b8c3ac; letter-spacing:.12em; }
.sample-card { padding:20px 18px; position:relative; overflow:hidden;
  background:linear-gradient(120deg,rgba(19,52,61,.94),rgba(8,29,40,.90)),url('assets/moonlit-sanctuary.webp') center 64% / cover;
  border-color:rgba(190,204,166,.35);
}
.sample-title { color:var(--gold2); font-size:.9375rem; }
.sample-desc,.sample-note { font-size:.8125rem; line-height:1.7; }
.wave-wrap { height:48px; margin:16px 0; opacity:.85; }
.wave-wrap svg { filter:drop-shadow(0 0 4px rgba(155,205,185,.25)); }
.wave-wrap svg path { stroke:#b5cba2; }
.play-btn { background:linear-gradient(135deg,#548f8b,#2b5c67); border-color:#aec4a2; box-shadow:0 0 20px rgba(145,195,173,.13); }
.bar-fill,.bar-progress,.pv-bar-fill { background:linear-gradient(90deg,#78b7b1,#e2cfa0); }
.reality-item,.review-item { padding:17px 16px; border-bottom-color:rgba(183,210,199,.12); }
.reality-text,.review-text,.special-desc,.faq-a { font-size:.875rem; line-height:1.85; }
.review-info,.review-badge { font-size:.75rem; }
.special-card { padding:18px 16px; }
.special-icon { background:rgba(138,186,171,.08); border-color:#78998a; border-radius:12px; }
.special-title,.faq-q-text { font-size:.9375rem; }
.faq-item { background:rgba(17,43,52,.9); border-color:var(--sb-edge); border-radius:15px; }
.faq-q { padding:18px 16px; }
.faq-a { padding-left:16px; padding-right:16px; }
.faq-item.open { border-color:rgba(216,204,161,.5); }
.price-section { border-top:1px solid #b5bd9b; padding:28px 20px; background:radial-gradient(ellipse at top,rgba(125,154,117,.12),transparent 75%),var(--sb-surface); }
.price-item,.price-sub { font-size:.875rem; line-height:1.75; }
.price-check { border-color:#82aaa0; color:#d9e8c8; background:rgba(100,161,139,.15); }
footer { border-top-color:rgba(143,184,174,.18); background:rgba(7,19,29,.75); }
.footer-copy { opacity:1; }
/* Follow-through pages inherit the same landscape and material palette. */
.top-nav { position:relative; z-index:1; }
nav { background:rgba(7,25,34,.94); border-bottom-color:var(--sb-edge); }
.back-btn,.nav-back,.nav-home { background:rgba(12,40,49,.76); border-color:#527572; }
.page-title,.result-title { font-weight:600; line-height:1.5; text-shadow:0 2px 24px #07131d; }
.page-desc,.result-sub { color:#d2e1d9; font-size:.9375rem; line-height:1.85; text-shadow:0 2px 9px #07131d; }
.page-eyebrow,.complete-eyebrow { color:#d2d7b9; }
.progress-fill,.prog-fill { background:linear-gradient(90deg,#5c9c9e,#dec997); }
.luck-card { background:var(--sb-surface); border-color:#38575c; border-radius:17px; }
.luck-card.selected { border-color:var(--gold); box-shadow:0 0 22px rgba(184,186,130,.12); }
.seal-core,.modal-seal { background:radial-gradient(circle at 35% 20%,#355b60,#102f3b); box-shadow:0 0 40px rgba(172,200,160,.16),inset 0 0 18px rgba(230,221,166,.08); }
.modal,.inapp-box,.event-box { background:linear-gradient(145deg,#1a3942,#0d2430); border-color:#7a9b8a; box-shadow:0 24px 80px rgba(0,8,16,.65); }
body[data-design-page="terms"] .page,body[data-design-page="privacy"] .page,body[data-design-page="refund"] .page { background:rgba(7,25,34,.90); }
@media (min-width:700px) {
  body { box-shadow:0 0 100px 30px rgba(4,18,26,.55); }
}
@media (max-width:360px) {
  body[data-design-page="index"] .hero { padding-left:16px; padding-right:16px; }
  .hero > div:first-child > div:nth-child(2) > div:nth-child(4) > span { padding:4px 7px!important; }
  .saju-form-card { padding-left:14px; padding-right:14px; }
  .sigan-grid { gap:5px; }
}
@media (hover:hover) {
  .sigan-btn:hover:not(.on),.gender-btn:hover:not(.on) { border-color:#8da99c; }
  .btn-analyze:not(:disabled):hover,.btn-main:not(:disabled):hover,.btn-pay:not(:disabled):hover { filter:brightness(1.07); }
}
@media (prefers-reduced-motion:reduce) {
  .star,.hero > div:first-child > div:first-child div,.hero > div:first-child > div:first-child span { animation:none!important; }
}