/* ============================================================================
   MOON DIVINART — main.css · final polish
   Editorial Liquid Glass · Mercury × Midnight × Blue Flame (restrained)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ----------------------------------------------------------------------------
   Tokens
   ---------------------------------------------------------------------------- */
:root {
  /* Surface */
  --ink:           #050810;
  --ink-2:         #0A0E1A;
  --ink-3:         #11162A;
  --ink-4:         #1A2238;

  /* Foreground */
  --bone:          #F4F1EA;
  --bone-2:        #E4E0D6;
  --mercury:       #C2CAD7;
  --ash:           #6E7787;
  --shadow:        #424A58;

  /* Brand flame — slightly muted for sophistication */
  --flame:         #6FB4E0;
  --flame-bright:  #92CCEC;
  --flame-deep:    #2D5577;
  --flame-glow:    rgba(111, 180, 224, 0.42);

  /* Aurora — more vivid so it shows through glass */
  --aurora-cyan:   rgba(90, 180, 240, 0.52);
  --aurora-violet: rgba(130, 100, 220, 0.42);
  --aurora-rose:   rgba(210, 130, 175, 0.26);
  --aurora-deep:   rgba(28, 56, 110, 0.55);
  --aurora-warm:   rgba(255, 180, 140, 0.14);

  /* Glass — more defined edges + brighter highlights */
  --gloss-bg:        linear-gradient(140deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%);
  --gloss-bg-deep:   linear-gradient(140deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  --gloss-bg-strong: linear-gradient(140deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 100%);
  --gloss-border:    rgba(255, 255, 255, 0.22);
  --gloss-border-2:  rgba(255, 255, 255, 0.14);
  --gloss-border-strong: rgba(255, 255, 255, 0.34);

  /* Liquid Glass shadows — refined w/ stronger highlights for refraction feel */
  --gloss-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset,
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 36px -10px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.26);

  --gloss-shadow-elev:
    0 1px 0 rgba(255, 255, 255, 0.36) inset,
    0 -1px 0 rgba(0, 0, 0, 0.22) inset,
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 64px -16px rgba(0, 0, 0, 0.60),
    0 6px 20px rgba(0, 0, 0, 0.32);

  --halo:        0 0 32px rgba(111, 180, 224, 0.36);
  --halo-soft:   0 0 18px rgba(111, 180, 224, 0.18);

  /* Hairlines */
  --line:        rgba(244, 241, 234, 0.08);
  --line-2:      rgba(244, 241, 234, 0.16);
  --line-3:      rgba(244, 241, 234, 0.04);

  /* Typography */
  --serif:       'Cormorant Garamond', 'Italiana', 'Times New Roman', serif;
  --display:     'Italiana', 'Cormorant Garamond', serif;
  --sans:        'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:        'JetBrains Mono', monospace;

  /* Geometry */
  --container-w: 430px;
  --pad:         24px;
  --pad-sm:      18px;
  --pad-lg:      36px;
  --r-xs:        2px;
  --r-sm:        6px;
  --r-md:        14px;
  --r-lg:        22px;
  --r-pill:      999px;

  /* Motion */
  --ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-back:   cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ----------------------------------------------------------------------------
   Reset
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  /* Reserve scrollbar space → all pages have identical content width */
  scrollbar-gutter: stable;
  /* Always show scrollbar to avoid width jumps between short/long pages */
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;   /* iOS 글자 자동확대 방지 */
  text-size-adjust: 100%;
}
/* Subtle scrollbar (Webkit/Chrome) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(244, 241, 234, 0.10);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(244, 241, 234, 0.20); }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--bone);
  background: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.004em;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; letter-spacing: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--flame); color: var(--ink); }

/* ----------------------------------------------------------------------------
   Stage + Aurora
   ---------------------------------------------------------------------------- */
.stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;   /* 모바일 주소창 보정 */
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--ink);
  isolation: isolate;
  overflow: hidden;
}
.stage::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 34% at 16% 20%, var(--aurora-cyan), transparent 60%),
    radial-gradient(32% 30% at 84% 32%, var(--aurora-violet), transparent 60%),
    radial-gradient(50% 38% at 50% 96%, var(--aurora-deep), transparent 70%),
    radial-gradient(28% 24% at 92% 78%, var(--aurora-cyan), transparent 58%),
    radial-gradient(24% 22% at 8% 76%, var(--aurora-rose), transparent 58%),
    radial-gradient(20% 18% at 70% 12%, var(--aurora-warm), transparent 62%);
  filter: blur(56px);
  z-index: -2;
  animation: drift 38s ease-in-out infinite alternate;
}
.stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.78  0 0 0 0 0.9  0 0 0 0.030 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(2%, -2%) rotate(1deg); }
  100% { transform: translate(-2%, 2%) rotate(-0.5deg); }
}

/* ----------------------------------------------------------------------------
   Frame (mobile container) — FIXED width on desktop, fluid on mobile
   ---------------------------------------------------------------------------- */
.frame {
  position: relative;
  width: var(--container-w);
  max-width: 100%;
  flex: 0 0 var(--container-w);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0.32), rgba(5, 8, 16, 0.68));
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-left: 1px solid var(--gloss-border-2);
  border-right: 1px solid var(--gloss-border-2);
  box-shadow:
    0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 80px 160px -40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}
/* Global floating orbs inside frame (behind all content) */
.frame::before,
.frame::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.frame::before {
  width: 240px; height: 240px;
  top: 18%; left: -100px;
  background: radial-gradient(circle at 35% 35%, rgba(120, 195, 255, 0.55), rgba(60, 140, 230, 0) 70%);
  animation: orbFrame-1 26s ease-in-out infinite alternate;
}
.frame::after {
  width: 280px; height: 280px;
  bottom: 10%; right: -120px;
  background: radial-gradient(circle at 40% 30%, rgba(150, 120, 230, 0.45), rgba(80, 60, 180, 0) 72%);
  animation: orbFrame-2 32s ease-in-out infinite alternate;
}
@keyframes orbFrame-1 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(40px, 80px); }
}
@keyframes orbFrame-2 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-60px, -50px); }
}
@media (max-width: 480px) {
  .frame { border: 0; box-shadow: none; }
}

/* ----------------------------------------------------------------------------
   Top bar (refined)
   ---------------------------------------------------------------------------- */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 50;
  background: linear-gradient(180deg, rgba(5, 8, 16, 0.42) 0%, rgba(5, 8, 16, 0) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar .icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(244, 241, 234, 0.04);
  border: 1px solid rgba(244, 241, 234, 0.10);
  border-radius: 50%;
  color: var(--mercury);
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 300;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.32s var(--ease);
  cursor: pointer;
}
.topbar .icon-btn:hover {
  color: var(--bone);
  border-color: rgba(244, 241, 234, 0.22);
  background: rgba(244, 241, 234, 0.08);
}
.topbar .icon-btn:active {
  transform: scale(0.95);
  transition-duration: 0.12s;
}
.topbar .icon-btn svg {
  width: 13px; height: 13px;
  opacity: 0.86;
}
.topbar .brand {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  color: var(--mercury);
  text-indent: 0.42em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
   Page
   ---------------------------------------------------------------------------- */
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ----------------------------------------------------------------------------
   Typography — refined hierarchy
   ---------------------------------------------------------------------------- */
/* MAIN TITLE — only place that uses serif */
.h-hero {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 8.4vw, 40px);
  line-height: 1.10;
  letter-spacing: -0.003em;
  color: var(--bone);
  text-wrap: balance;
}
/* Everything else — sans-serif */
.h-display {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 6.4vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--bone);
}
.h-section {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(19px, 4.8vw, 22px);
  line-height: 1.22;
  letter-spacing: -0.002em;
  color: var(--bone);
}
.eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--mercury);
  text-indent: 0.52em;
}
.label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--mercury);
  text-indent: 0.30em;
}
.code {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ash);
  text-transform: uppercase;
  text-indent: 0.22em;
}
.body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.84;
  color: var(--bone);
  letter-spacing: 0.005em;
}
.body-small {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.74;
  color: var(--mercury);
}
.quote {
  font-family: var(--sans);
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.002em;
  color: var(--bone);
}
.line {
  font-family: var(--sans);
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  line-height: 1.62;
  letter-spacing: 0.002em;
  color: var(--bone);
  text-align: center;
}
.line-large { font-size: 18px; line-height: 1.45; letter-spacing: 0.001em; font-weight: 400; }
.line .em { color: var(--flame-bright); font-style: italic; }
.muted { color: var(--ash); }
.mercury { color: var(--mercury); }
.flame { color: var(--flame-bright); }

/* Mobile sizes handled by clamp() above */

/* ----------------------------------------------------------------------------
   Liquid Glass surfaces
   ---------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--gloss-bg);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--gloss-border-2);
  border-radius: var(--r-md);
  box-shadow: var(--gloss-shadow);
  padding: 22px;
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent);
  pointer-events: none;
}

.glass-elev {
  background: var(--gloss-bg-strong);
  backdrop-filter: blur(36px) saturate(180%);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  border: 1px solid var(--gloss-border);
  border-radius: var(--r-lg);
  box-shadow: var(--gloss-shadow-elev);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.glass-elev::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.46), transparent);
  pointer-events: none;
}

.glass-deep {
  background: var(--gloss-bg-deep);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--gloss-shadow);
}

/* ----------------------------------------------------------------------------
   Buttons — refined
   ---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
   Buttons — refined glass pills with precise state hierarchy
   ---------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  min-height: 38px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.10) inset,
    0 5px 16px -6px rgba(0, 0, 0, 0.30);
  transition: transform 0.32s var(--ease), background 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.42s var(--ease), color 0.3s var(--ease);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  text-indent: 0.28em;
  -webkit-tap-highlight-color: transparent;
}
/* Refractive top edge highlight */
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: 24%; right: 24%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease), left 0.4s var(--ease), right 0.4s var(--ease);
}
.btn:hover::before {
  opacity: 1;
  left: 14%; right: 14%;
}
.btn:hover {
  border-color: var(--gloss-border);
  color: #fff;
  background: var(--gloss-bg-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32) inset,
    0 -1px 0 rgba(0, 0, 0, 0.14) inset,
    0 10px 28px -8px rgba(0, 0, 0, 0.40),
    var(--halo-soft);
  transform: translateY(-1px);
}
.btn:focus-visible {
  outline: none;
  border-color: var(--flame);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 0 0 3px rgba(111, 180, 224, 0.18),
    0 8px 24px -8px rgba(0, 0, 0, 0.38);
}
.btn:active {
  transform: translateY(0) scale(0.978);
  transition-duration: 0.12s;
}
.btn[disabled],
.btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-block { display: flex; width: 100%; }

/* Primary — frosted glass with subtle inner glow (not solid white) */
.btn-primary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  color: var(--bone);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.36) inset,
    0 -1px 0 rgba(0, 0, 0, 0.14) inset,
    0 8px 22px -6px rgba(0, 0, 0, 0.32);
}
.btn-primary::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.52), transparent);
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.46);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.50) inset,
    0 -1px 0 rgba(0, 0, 0, 0.16) inset,
    0 12px 32px -8px rgba(0, 0, 0, 0.42),
    var(--halo-soft);
}

/* Flame — secondary accent CTA */
.btn-flame {
  background: linear-gradient(135deg, rgba(111, 180, 224, 0.22), rgba(45, 85, 119, 0.12));
  border-color: rgba(146, 204, 236, 0.42);
  color: var(--bone);
}
.btn-flame:hover {
  background: linear-gradient(135deg, rgba(111, 180, 224, 0.32), rgba(45, 85, 119, 0.18));
  border-color: rgba(146, 204, 236, 0.66);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 12px 32px -8px rgba(0, 0, 0, 0.40),
    var(--halo);
}

/* Ghost — minimal text-only with hairline */
.btn-ghost {
  background: transparent;
  border-color: rgba(244, 241, 234, 0.20);
  color: var(--mercury);
  box-shadow: none;
}
.btn-ghost::before { display: none; }
.btn-ghost:hover {
  background: rgba(244, 241, 234, 0.05);
  border-color: rgba(244, 241, 234, 0.42);
  color: var(--bone);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
}

/* Small / micro buttons */
.btn-sm {
  padding: 9px 18px;
  min-height: 36px;
  font-size: 10px;
  letter-spacing: 0.30em;
  text-indent: 0.30em;
}
.btn-xs {
  padding: 7px 14px;
  min-height: 30px;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
}

/* ----------------------------------------------------------------------------
   Dialog bubbles
   ---------------------------------------------------------------------------- */
.dialog {
  position: relative;
  background: var(--gloss-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--gloss-border-2);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: 0.003em;
  color: var(--bone);
  box-shadow: var(--gloss-shadow);
  overflow: hidden;
}
.dialog::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  pointer-events: none;
}
.dialog .em { color: var(--flame-bright); }

/* ----------------------------------------------------------------------------
   Form fields
   ---------------------------------------------------------------------------- */
.field {
  width: 100%;
  background: var(--gloss-bg-deep);
  border: 1px solid var(--gloss-border-2);
  color: var(--bone);
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  outline: none;
  border-radius: var(--r-sm);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 4px 14px rgba(0, 0, 0, 0.18);
  transition: all 0.3s var(--ease);
}
.field::placeholder { color: var(--shadow); font-style: normal; font-weight: 300; }
.field:focus {
  border-color: var(--flame);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 18px rgba(0, 0, 0, 0.24),
    var(--halo-soft);
}

/* ----------------------------------------------------------------------------
   Option pills
   ---------------------------------------------------------------------------- */
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt {
  flex: 1;
  min-width: 72px;
  padding: 8px 14px;
  min-height: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--mercury);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 2px 6px rgba(0, 0, 0, 0.14);
  transition: all 0.3s var(--ease);
  text-align: center;
  cursor: pointer;
  text-indent: 0.22em;
}
.opt:hover {
  background: var(--gloss-bg);
  border-color: var(--gloss-border);
  color: var(--bone);
  transform: translateY(-0.5px);
}
.opt:active { transform: scale(0.97); transition-duration: 0.10s; }
.opt.active {
  background: linear-gradient(135deg, rgba(244, 241, 234, 0.92), rgba(220, 220, 220, 0.78));
  color: var(--ink);
  border-color: rgba(244, 241, 234, 0.44);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 4px 14px -2px rgba(0, 0, 0, 0.28);
  animation: optPop 0.42s var(--ease-back);
}
@keyframes optPop {
  0%   { transform: scale(0.95); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.opt-stack { display: flex; flex-direction: column; gap: 6px; }
.opt-stack .opt {
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
  border-radius: var(--r-sm);
  text-indent: 0;
}
.opt-stack .opt::before {
  content: '';
  width: 8px; height: 8px;
  background: transparent;
  border: 1px solid var(--mercury);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.25s var(--ease);
}
.opt-stack .opt.active::before {
  background: var(--ink);
  border-color: var(--ink);
}

/* ----------------------------------------------------------------------------
   Progress — Apple-style minimal
   ---------------------------------------------------------------------------- */
/* Single continuous thin line that fills smoothly */
.progress-line {
  position: relative;
  width: 100%;
  height: 1.5px;
  background: rgba(244, 241, 234, 0.08);
  overflow: hidden;
}
.progress-line .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--bone-2), var(--bone));
  transition: width 0.7s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 0 12px rgba(244, 241, 234, 0.32);
}

/* Step counter — refined typography */
.step-counter {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.42em;
  color: var(--mercury);
  text-indent: 0.42em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* Legacy segments — kept for backward compat but more refined */
.progress {
  display: flex; gap: 4px;
  padding: 6px 0 22px;
}
.progress .seg {
  flex: 1;
  height: 1.5px;
  background: rgba(244, 241, 234, 0.08);
  border-radius: 2px;
  transition: background 0.6s var(--ease);
}
.progress .seg.active { background: var(--bone); box-shadow: 0 0 8px rgba(244, 241, 234, 0.24); }

/* ----------------------------------------------------------------------------
   Asset placeholder (editorial — looks intentional)
   ---------------------------------------------------------------------------- */
.asset-ph {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--ash);
  font-family: var(--mono);
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 18px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-transform: uppercase;
}
.asset-ph::before {
  content: '— ASSET SLOT —';
  position: absolute;
  top: 12px;
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--shadow);
  text-indent: 0.42em;
}
.asset-ph .fname {
  color: var(--mercury);
  font-weight: 400;
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
}
.asset-ph .dim {
  color: var(--ash);
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.20em;
}
.asset-ph .desc {
  color: var(--ash);
  margin-top: 14px;
  font-family: var(--sans);
  font-weight: 300;
  font-style: italic;
  font-size: 11px;
  max-width: 80%;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.6;
}

/* ----------------------------------------------------------------------------
   Media slot
   ---------------------------------------------------------------------------- */
.media-slot {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.media-slot img,
.media-slot video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media-slot .real-asset[hidden] { display: none; }

.ar-vert  { aspect-ratio: 9 / 16; }
.ar-panel { aspect-ratio: 1080 / 1400; }
.ar-sq    { aspect-ratio: 1 / 1; }

/* ----------------------------------------------------------------------------
   Webtoon panels — soft edge fade
   ---------------------------------------------------------------------------- */
.panel { position: relative; width: 100%; }
.panel img.real-asset,
.panel video.real-asset,
.fade-edges {
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,0.30) 4%, rgba(0,0,0,0.75) 7%,
    #000 11%, #000 89%, rgba(0,0,0,0.75) 93%,
    rgba(0,0,0,0.30) 96%, transparent 100%) !important;
  mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,0.30) 4%, rgba(0,0,0,0.75) 7%,
    #000 11%, #000 89%, rgba(0,0,0,0.75) 93%,
    rgba(0,0,0,0.30) 96%, transparent 100%) !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.panel .dialog {
  position: absolute;
  max-width: 76%;
  font-size: 14px;
  padding: 14px 18px;
  background: rgba(5, 8, 16, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-color: var(--gloss-border-2);
  z-index: 5;
}

/* ----------------------------------------------------------------------------
   Pillars (saju chart)
   ---------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}
.pillar {
  position: relative;
  aspect-ratio: 1;
  background: var(--gloss-bg-deep);
  border: 1px solid var(--gloss-border-2);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 28px;
  color: var(--mercury);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--gloss-shadow);
  overflow: hidden;
}
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 10px; right: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
}
.pillar.flame-on { color: var(--flame-bright); text-shadow: var(--halo-soft); }

.pillar-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ash);
  text-align: center;
  margin-top: 10px;
  text-indent: 0.42em;
}

/* ----------------------------------------------------------------------------
   Modal
   ---------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.70);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}
.modal-backdrop.open { display: flex; animation: fadeIn 0.35s var(--ease); }
.modal {
  width: 100%;
  max-width: var(--container-w);
  position: relative;
  background: var(--gloss-bg-strong);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-top: 1px solid var(--gloss-border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  animation: slideUp 0.46s var(--ease-back);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24) inset,
    0 -40px 100px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.52), transparent);
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Sticky CTA bar
   ---------------------------------------------------------------------------- */
.cta-bar {
  position: sticky;
  bottom: 0;
  padding: 18px var(--pad) calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(5, 8, 16, 0) 0%, rgba(5, 8, 16, 0.94) 38%, var(--ink) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 20;
}

/* ----------------------------------------------------------------------------
   Section dividers (refined)
   ---------------------------------------------------------------------------- */
.rule {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 46px var(--pad) 22px;
  color: var(--mercury);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.58em;
  font-weight: 400;
  text-transform: uppercase;
  text-indent: 0.58em;
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gloss-border-2));
}
.rule::after { background: linear-gradient(-90deg, transparent, var(--gloss-border-2)); }

/* Ornamental divider (with center dot) */
.rule-dot {
  position: relative;
  height: 28px;
  margin: 36px var(--pad);
}
.rule-dot::before, .rule-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gloss-border-2));
  width: calc(50% - 12px);
}
.rule-dot::before { left: 0; }
.rule-dot::after { right: 0; background: linear-gradient(-90deg, transparent, var(--gloss-border-2)); }
.rule-dot .dot {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--flame);
  box-shadow: var(--halo-soft);
}

/* ----------------------------------------------------------------------------
   Reviews
   ---------------------------------------------------------------------------- */
.review {
  padding: 28px var(--pad);
  border-bottom: 1px solid var(--line);
}
.review:last-of-type { border-bottom: 0; }
.review .stars {
  color: var(--flame-bright);
  font-size: 11px;
  letter-spacing: 0.32em;
  margin-bottom: 12px;
}
.review .quote { font-size: 16px; line-height: 1.66; font-style: italic; }
.review .byline {
  color: var(--ash);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-top: 14px;
  text-indent: 0.34em;
}

/* ----------------------------------------------------------------------------
   Sound toggle pulse + hint
   ---------------------------------------------------------------------------- */
.sound-btn { position: relative; }
@keyframes sound-pulse {
  0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 2px 6px rgba(0, 0, 0, 0.14); }
  50%      { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 4px 12px rgba(0, 0, 0, 0.20), 0 0 24px rgba(111, 180, 224, 0.42); border-color: var(--flame-bright); }
}
.sound-btn.attention { animation: sound-pulse 2.4s ease-in-out infinite; }

.sound-hint {
  position: absolute;
  top: 62px;
  right: 12px;
  background: rgba(5, 8, 16, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(244, 241, 234, 0.10);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.30em;
  color: var(--mercury);
  text-transform: uppercase;
  text-indent: 0.30em;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 18px rgba(0,0,0,0.32);
  animation: hint-show 0.6s 1.4s var(--ease) forwards, hint-hide 0.6s 6s var(--ease) forwards;
}
@keyframes hint-show { to { opacity: 1; transform: translateY(0); } }
@keyframes hint-hide { to { opacity: 0; transform: translateY(-6px); } }
.sound-hint.dismissed {
  animation: none !important;
  opacity: 0 !important;
  transition: opacity 0.4s var(--ease);
}

/* ----------------------------------------------------------------------------
   Blurred reveal (teaser hidden info)
   ---------------------------------------------------------------------------- */
.blur-reveal {
  filter: blur(4px);
  color: var(--flame-bright);
  letter-spacing: 0.06em;
  user-select: none;
  font-weight: 400;
}

/* ----------------------------------------------------------------------------
   Animations
   ---------------------------------------------------------------------------- */
@keyframes fadeIn  { from {opacity: 0} to {opacity: 1} }
@keyframes slideUp { from {transform: translateY(40px); opacity: 0} to {transform: translateY(0); opacity: 1} }
@keyframes rise    { from {transform: translateY(28px); opacity: 0} to {transform: translateY(0); opacity: 1} }

.rise-1 { animation: rise 0.9s 0.20s var(--ease) both; }
.rise-2 { animation: rise 0.9s 0.55s var(--ease) both; }
.rise-3 { animation: rise 0.9s 0.90s var(--ease) both; }
.rise-4 { animation: rise 0.9s 1.25s var(--ease) both; }

.fade-1 { animation: fadeIn 0.9s 0.10s var(--ease-soft) both; }
.fade-2 { animation: fadeIn 0.9s 0.35s var(--ease-soft) both; }
.fade-3 { animation: fadeIn 0.9s 0.60s var(--ease-soft) both; }
.fade-4 { animation: fadeIn 0.9s 0.85s var(--ease-soft) both; }

/* Subtle breathing glow on key CTAs */
@keyframes breathe {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.40) inset,
      0 -1px 0 rgba(0, 0, 0, 0.18) inset,
      0 12px 32px -10px rgba(0, 0, 0, 0.34);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.52) inset,
      0 -1px 0 rgba(0, 0, 0, 0.18) inset,
      0 16px 40px -10px rgba(0, 0, 0, 0.42),
      0 0 28px rgba(111, 180, 224, 0.30);
  }
}
.breathe { animation: breathe 3.6s ease-in-out infinite; }

/* Hero lines — preserve h-hero typography inside spans */
.h-hero .line {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: center;
  white-space: nowrap;
}
.h-hero .line-1 { color: var(--bone); }
.h-hero .line-2 { color: var(--mercury); margin-top: 2px; }

/* Tiny ornament — refined dot accent (above eyebrow on landing, etc.) */
.ornament-dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--flame);
  box-shadow: var(--halo-soft);
  margin: 0 auto;
}
.ornament-line {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, var(--gloss-border-2), transparent);
  margin: 0 auto;
}

/* ----------------------------------------------------------------------------
   Floating Orbs — decorative spheres visible behind glass
   (references the glassmorphism style — orbs floating, glass overlays)
   ---------------------------------------------------------------------------- */
.orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.55;
  will-change: transform;
}
.orb-1 {
  width: 220px; height: 220px;
  top: -40px; left: -60px;
  background: radial-gradient(circle at 35% 35%, rgba(120, 195, 255, 0.85), rgba(60, 140, 230, 0.0) 70%);
  animation: orbFloat-1 22s ease-in-out infinite;
}
.orb-2 {
  width: 280px; height: 280px;
  top: 30%; right: -100px;
  background: radial-gradient(circle at 40% 30%, rgba(150, 120, 230, 0.78), rgba(80, 60, 180, 0.0) 72%);
  animation: orbFloat-2 28s ease-in-out infinite;
}
.orb-3 {
  width: 180px; height: 180px;
  bottom: -40px; left: 20%;
  background: radial-gradient(circle at 50% 40%, rgba(90, 165, 220, 0.72), rgba(40, 100, 170, 0.0) 70%);
  animation: orbFloat-3 24s ease-in-out infinite;
}
.orb-4 {
  width: 160px; height: 160px;
  top: 50%; left: -30px;
  background: radial-gradient(circle at 45% 40%, rgba(210, 140, 190, 0.55), rgba(150, 80, 130, 0.0) 70%);
  animation: orbFloat-4 32s ease-in-out infinite;
}
@keyframes orbFloat-1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, 60px); }
}
@keyframes orbFloat-2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-50px, 40px); }
}
@keyframes orbFloat-3 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(60px, -50px); }
}
@keyframes orbFloat-4 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(80px, -30px); }
}

/* ----------------------------------------------------------------------------
   Helpers
   ---------------------------------------------------------------------------- */
.center { text-align: center; }
.flex   { display: flex; }
.col    { flex-direction: column; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.pad    { padding: var(--pad); }
.pad-h  { padding-left: var(--pad); padding-right: var(--pad); }
.divider { width: 1px; height: 32px; background: var(--line); margin: 0 auto; }
.hr { height: 1px; background: var(--line); margin: 24px var(--pad); }

@media (max-width: 480px) {
  :root { --pad: 22px; }
}

/* ============================================================================
   Oracle Frame — Korean-style gold line border (모든 페이지 공통)
   app.js 가 .frame 안에 .oracle-frame 오버레이를 주입함
   ============================================================================ */
:root{
  --gold:        #C7A24A;
  --gold-bright: #ECD49A;
  --gold-deep:   #8C6B26;
}
.oracle-frame{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:60;
}
/* 이중 금색 헤어라인 */
.oracle-frame .of-border{
  position:absolute; inset:11px;
  border:1.6px solid #D8B24A;
  box-shadow:
    inset 0 0 30px rgba(199,162,74,0.18),
    0 0 0 1px rgba(216,178,74,0.55),
    0 0 16px -2px rgba(216,178,74,0.45);
}
.oracle-frame .of-border::after{
  content:''; position:absolute; inset:4px;
  border:1px solid rgba(199,162,74,0.50);
}
/* 색감 글로우 — Yun 블루 / Rin 퍼플 */
.oracle-frame.yun .of-border{ box-shadow:
    inset 0 0 26px rgba(199,162,74,0.10),
    0 0 0 0.5px rgba(236,212,154,0.20),
    0 0 46px -10px rgba(111,180,224,0.30); }
.oracle-frame.rin .of-border{ box-shadow:
    inset 0 0 26px rgba(199,162,74,0.10),
    0 0 0 0.5px rgba(236,212,154,0.20),
    0 0 46px -10px rgba(182,157,235,0.34); }

/* 모서리 ㄱ자 브래킷 */
.oracle-frame .of-corner{ position:absolute; width:34px; height:34px; }
.oracle-frame .of-corner::before,
.oracle-frame .of-corner::after{
  content:''; position:absolute; background:#E6C25A;
  box-shadow:0 0 8px rgba(216,178,74,0.8);
}
.oracle-frame .of-corner::before{ width:100%; height:2px; }
.oracle-frame .of-corner::after { width:2px;  height:100%; }
.of-corner.tl{ top:7px;  left:7px;  }  .of-corner.tl::before{ top:0; left:0; }     .of-corner.tl::after{ top:0; left:0; }
.of-corner.tr{ top:7px;  right:7px; }  .of-corner.tr::before{ top:0; right:0; }    .of-corner.tr::after{ top:0; right:0; }
.of-corner.bl{ bottom:7px;left:7px;  }  .of-corner.bl::before{ bottom:0; left:0; }  .of-corner.bl::after{ bottom:0; left:0; }
.of-corner.br{ bottom:7px;right:7px; }  .of-corner.br::before{ bottom:0; right:0; } .of-corner.br::after{ bottom:0; right:0; }

/* 하단 명패 (카르투슈) — 하단 CTA 없는 페이지에서만 주입됨 */
.oracle-frame .of-plate{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  padding:7px 28px;
  border:1px solid var(--gold);
  background:linear-gradient(180deg, rgba(18,14,7,0.55), rgba(9,7,3,0.66));
  box-shadow:inset 0 0 14px rgba(199,162,74,0.18);
}
.oracle-frame .of-plate::before,
.oracle-frame .of-plate::after{
  content:''; width:5px; height:5px;
  border:1px solid var(--gold-bright); transform:rotate(45deg);
}
.oracle-frame .of-plate span{
  font-family:var(--serif); letter-spacing:0.40em; text-indent:0.40em;
  font-size:12px; color:var(--gold-bright);
  text-transform:uppercase; white-space:nowrap;
}

/* ============================================================================
   Paywall — Google 로그인 단계
   ============================================================================ */
.pay-step[hidden]{ display:none; }
.gsignin{ text-align:center; padding:6px 0 2px; }
.gsignin .g-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:21px; color:var(--bone); margin-bottom:8px;
}
.gsignin .g-sub{
  font-size:12px; color:var(--mercury); margin:0 auto 22px;
  font-family:var(--sans); max-width:80%; line-height:1.6;
}
.g-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; padding:13px 16px;
  background:#ffffff; color:#1f1f1f;
  border:1px solid #dadce0; border-radius:8px;
  font-family:'Inter',Roboto,Arial,sans-serif; font-size:14px; font-weight:500;
  letter-spacing:0; text-indent:0;
  box-shadow:0 1px 2px rgba(0,0,0,0.22);
  transition:background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.g-btn:hover{ background:#f6f7f8; box-shadow:0 1px 4px rgba(0,0,0,0.34); }
.g-btn:active{ transform:translateY(1px); }
.g-btn svg{ width:18px; height:18px; }
.g-fine{ margin-top:18px; font-size:11px; color:var(--ash); font-family:var(--sans); line-height:1.6; }
/* 로그인 완료 후 계정 칩 */
.g-account{
  display:flex; align-items:center; gap:11px; padding:11px 14px;
  border:1px solid var(--gloss-border-2); border-radius:var(--r-md);
  background:rgba(255,255,255,0.04); margin-bottom:18px;
}
.g-account .g-avatar{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,#7AB8E6,#B69DEB);
  display:grid; place-items:center; color:#fff; font-weight:600; font-size:14px;
}
.g-account .g-meta b{ display:block; font-weight:500; font-size:13px; color:var(--bone); }
.g-account .g-meta small{ display:block; color:var(--ash); font-size:11px; margin-top:1px; }
.g-account .g-check{ margin-left:auto; color:#34A853; font-size:15px; }

/* ============================================================================
   Frame revision (v2) — 흐린 화이트 라인 + 안쪽 매트 여백 + 명패 제거
   ============================================================================ */
/* 모든 콘텐츠를 라인 안쪽으로: .frame 에 잉크색 매트 테두리 */
main.frame{
  border: 14px solid var(--ink) !important;
  box-shadow:
    0 0 1px rgba(255,255,255,0.05) inset,
    0 80px 160px -40px rgba(0,0,0,0.5) !important;
}
@media (max-width:480px){
  main.frame{ border: 13px solid var(--ink) !important; box-shadow: none !important; }
}
/* 라인: 골드 이중선 (화이트 → 골드로 변경) */
.oracle-frame .of-border{
  inset: 0;
  border: 1px solid rgba(216,178,74,0.72);
  box-shadow: inset 0 0 22px rgba(216,178,74,0.12);
}
.oracle-frame .of-border::after{
  inset: 5px;
  border: 1px solid rgba(216,178,74,0.45);
}
.oracle-frame.yun .of-border{
  box-shadow: inset 0 0 22px rgba(216,178,74,0.12), 0 0 40px -14px rgba(111,180,224,0.20);
}
.oracle-frame.rin .of-border{
  box-shadow: inset 0 0 22px rgba(216,178,74,0.12), 0 0 40px -14px rgba(182,157,235,0.22);
}
/* 모서리 브래킷: 골드, 라인 모서리에 정렬 */
.oracle-frame .of-corner{ width: 30px; height: 30px; }
.oracle-frame .of-corner::before,
.oracle-frame .of-corner::after{
  background: #E6C25A;
  box-shadow: 0 0 6px rgba(216,178,74,0.6);
}
.of-corner.tl{ top:0; left:0; }   .of-corner.tr{ top:0; right:0; }
.of-corner.bl{ bottom:0; left:0; } .of-corner.br{ bottom:0; right:0; }
/* 하단 명패 완전 제거 */
.oracle-frame .of-plate{ display: none !important; }

/* ============================================================================
   Frame revision (v3) — 겉 테두리(바깥 perimeter)에도 아주 얇은 흰선 추가
   결과: [겉 얇은 흰선] → 짙은 매트 여백 → [안쪽 흐린 흰선] → 콘텐츠
   ============================================================================ */
main.frame{
  box-shadow:
    inset 0 0 0 1px rgba(216,178,74,0.55),          /* 겉 테두리 얇은 골드선 */
    0 0 1px rgba(216,178,74,0.10) inset,
    0 80px 160px -40px rgba(0,0,0,0.5) !important;
}
@media (max-width:480px){
  main.frame{
    box-shadow:
      inset 0 0 0 1px rgba(216,178,74,0.52) !important;
  }
}

/* ============================================================================
   Frame revision (v4) — 겉 perimeter 에 진짜 외곽 흰선 (non-inset)
   레이어: [겉 얇은 흰선] · 짙은 매트 14px · [안쪽 흐린 흰선(of-border)] · 콘텐츠
   ============================================================================ */
main.frame{
  box-shadow:
    0 0 0 1px rgba(216,178,74,0.62),                /* ← 겉 테두리 얇은 골드선 (바깥) */
    0 0 14px rgba(216,178,74,0.14),
    0 80px 160px -40px rgba(0,0,0,0.5) !important;
}
@media (max-width:480px){
  main.frame{
    box-shadow: 0 0 0 1px rgba(216,178,74,0.6) !important;
  }
}


/* ============================================================================
   Language toggle (EN default / 한국어) — fixed top-right, outside the frame
   ============================================================================ */
.lang-toggle{
  position: fixed; top: 12px; right: 14px; z-index: 200;
  display:flex; align-items:center; gap:8px;
  padding:5px 11px; border-radius: 999px;
  background: rgba(10,14,26,0.50);
  border:1px solid rgba(255,255,255,0.20);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:0 6px 20px rgba(0,0,0,0.40);
}
.lang-toggle button{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.06em;
  color: rgba(244,241,234,0.48); padding:2px 3px; line-height:1; background:none; cursor:pointer;
  transition: color .25s var(--ease);
}
.lang-toggle button.on{ color: var(--flame-bright); }
.lang-toggle .div{ width:1px; height:12px; background:rgba(255,255,255,0.22); }


/* ============================================================================
   Korean mode — keep type tidy / not oversized, tighten wide tracking
   ============================================================================ */
html[data-lang="kr"] .h-hero{ font-size: clamp(19px, 5.2vw, 25px); letter-spacing: 0; line-height: 1.34; }
html[data-lang="kr"] .h-1, html[data-lang="kr"] .h-hero .line{ letter-spacing: 0; }
html[data-lang="kr"] .title-main{ letter-spacing: 0.14em; text-indent: 0.14em; font-size: clamp(20px,5.6vw,26px); }
html[data-lang="kr"] .eyebrow,
html[data-lang="kr"] .title-sub,
html[data-lang="kr"] .label .sub,
html[data-lang="kr"] .prompt{ letter-spacing: 0.1em; text-indent: 0; }
html[data-lang="kr"] .h-section{ letter-spacing: 0; }
html[data-lang="kr"] .g-title{ font-size: 18px; }
html[data-lang="kr"] .bubble{ font-size: 13px; line-height: 1.55; letter-spacing: 0; }

/* ============================================================================
   Global cohesion polish — tactile feedback + accessible focus (site-wide)
   ============================================================================ */
button, .btn, .icon-btn, .rd-btn, a.icon-btn { transition: transform .14s var(--ease), opacity .2s var(--ease), background .2s var(--ease); }
button:active, .btn:active, .icon-btn:active, .rd-btn:active, a.icon-btn:active { transform: scale(0.97); }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; border-radius: 6px; }
img { -webkit-user-drag: none; user-select: none; }

/* result pager: clear the fixed 60px topbar so headings don't overlap */
.rd-page{ padding-top: 66px; }
.rd-cover, .rd-close{ padding-top: 70px; }
.rd-chap{ padding-top: 80px; }

/* KR mode: serif display elements lack Korean glyphs → fall back to Korean sans */
html[data-lang="kr"] .rd-greet,
html[data-lang="kr"] .rd-chap-t,
html[data-lang="kr"] .rd-ilju-sub,
html[data-lang="kr"] .rd-year{
  font-family: 'Inter','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-style: normal;
}
html[data-lang="kr"] .rd-greet{ font-size:18px; line-height:1.6; }


/* ============================================================================
   Dancheong (단청) — monochrome traditional band along the bottom edge.
   Sits BEHIND all content (z-index 0, pointer-events none), injected into .frame.
   ============================================================================ */
.dancheong{
  position:absolute; left:0; right:0; bottom:0; height:128px;
  pointer-events:none;
  background-image:url("../assets/images/ornament/dancheong_l.png"), url("../assets/images/ornament/dancheong_r.png");
  background-repeat:no-repeat, no-repeat;
  background-position:left bottom, right bottom;
  background-size:130px auto, 130px auto;
  opacity:0.15; z-index:45;
}
@media (max-width:480px){ .dancheong{ height:108px; background-size:108px auto, 108px auto; } }

/* main marketing phrase (select page) */
.kphrase{ font-family:var(--sans); font-size:13.5px; font-weight:600; letter-spacing:0.04em;
  color:var(--gold); text-align:center; margin:14px auto 0; max-width:90%; line-height:1.5; }
.kphrase .k{ color:var(--bone); }

/* ============================================================================
   모바일 마무리 — 영어 고정(토글 숨김) + 한 화면에 욱여넣지 말고 아래로 스크롤
   ============================================================================ */
@media (max-width: 768px){
  .lang-toggle{ display: none !important; }            /* 모바일 영어 고정 */
  /* 선택(choose) 화면만 세로 긴 '웹 비율' — 하단 버튼 없는 쇼케이스라 안전. 길면 스크롤 */
  .frame:has(.select-page){ min-height: max(100dvh, 200vw); }
}

/* ============================================================================
   영상 부드러운 등장 — 로딩 갭을 어두운 화면 + 페이드인으로 매끄럽게 (영상만)
   ============================================================================ */
/* 영상은 기본 '보임'(절대 사라지지 않게). 로딩 중엔 아래 어두운 자리표시가 덮고, 로드되면 그 위로 자연스럽게 나타남 */
.media-slot .real-asset,
.input-bg-video,
.intro-video-el { transition: opacity 0.5s ease; }
/* 로딩 중 자리: 개발용 파일명 텍스트 숨기고, 잔잔한 다크 그라데이션만 */
.asset-ph .fname, .asset-ph .dim, .asset-ph .desc { display: none !important; }
.asset-ph { background: radial-gradient(120% 80% at 50% 40%, rgba(122,184,230,0.06), rgba(5,8,16,0.0)), var(--ink) !important; }