/* ==== Sajuvibe KV skin v1 (2026-10-16) — carousel key visual ====
   Load AFTER the existing <style>. Visual only: no layout order, copy, flow or tracking changes.
   Fonts: Righteous (display), Inter (body), Noto Serif KR (hanja, existing). */
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --kv-green:#0F4D36; --kv-green-2:#0B3D2B; --kv-red:#E3262E; --kv-yellow:#F5C431;
  --kv-pink:#F5A3C7; --kv-navy:#2147A6; --kv-ink:#121212; --kv-cream:#FFF8E7; --kv-cream-2:#F6ECD3;
  --display:"Righteous","Arial Black",system-ui,sans-serif;
  --body:"Inter","Helvetica Neue",system-ui,sans-serif;
  --bg:var(--kv-green); --ink:var(--kv-cream); --muted:#CFE0D6; --line:rgba(245,196,49,.45); --field:#FFFDF6;
  --seal:var(--kv-red); --focus:var(--kv-yellow);
  --wood:#2E8B57; --fire:var(--kv-red); --earth:var(--kv-yellow); --water:var(--kv-ink);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:var(--kv-green);--ink:var(--kv-cream);--muted:#CFE0D6;--line:rgba(245,196,49,.45);--field:#FFFDF6;--focus:var(--kv-yellow)}}
body{background:var(--kv-green) radial-gradient(circle at 50% -10%,#16674A 0,var(--kv-green) 55%) no-repeat;background-attachment:fixed;color:var(--kv-cream)}

/* header */
.wordmark{font-family:var(--display);color:var(--kv-yellow);font-size:34px;letter-spacing:.5px;text-shadow:2px 2px 0 var(--kv-ink)}
.tagline{color:var(--muted)}
.badge{border-color:var(--kv-yellow)}
.badge.yeon{background:var(--kv-green) url("/media/yeon-avatar-128.webp") center/cover no-repeat;border:2px solid var(--kv-yellow)}
.badge.yeon svg{display:none}

/* hero: static KV image instead of old Yeon video */
.hero{background:var(--kv-green) url("/media/yeon-hero-900.webp") center top/cover no-repeat;outline:3px solid var(--kv-yellow);
  box-shadow:0 0 0 6px var(--kv-green),0 0 0 8px var(--kv-yellow);border-radius:26px}
.hero video{opacity:0}               /* poster swapped too; mp4 source removed in markup */
.hero .vidbtn{display:none}
.hero .veil{background:linear-gradient(transparent,rgba(11,61,43,.92) 45%)}
.hero .veil b{font-family:var(--display);color:var(--kv-yellow);font-size:28px;text-shadow:2px 2px 0 var(--kv-ink)}
.hero .veil span{color:var(--kv-cream)}

/* form: cream panels like carousel info pages */
fieldset{background:var(--kv-cream);color:var(--kv-green);border:2px solid var(--kv-yellow);border-radius:20px;
  box-shadow:0 0 0 4px var(--kv-green),0 0 0 6px rgba(245,196,49,.55)}
legend{font-family:var(--display);color:var(--kv-cream);background:var(--kv-red);border:2px solid var(--kv-ink);border-radius:999px;padding:2px 14px;font-size:17px}
.field label,.check{color:var(--kv-green);font-weight:600}
.hint{color:#4F6F60}
#form > .hint{color:var(--muted)}
input[type=text],input[type=date],input[type=time],input[type=email]{background:#FFFDF6;color:var(--kv-ink);border:1.5px solid #CDBF95;border-radius:12px}
input:focus-visible{outline:3px solid var(--kv-yellow);outline-offset:1px}
.check input{accent-color:var(--kv-green)}
.error{color:var(--kv-red)}

/* buttons: pill, green+yellow / red+white */
.btn{font-family:var(--display);font-weight:400;letter-spacing:.3px;border:2px solid var(--kv-ink);box-shadow:0 4px 0 var(--kv-ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--kv-ink)}
.btn-primary{background:var(--kv-yellow);color:var(--kv-ink)}
.btn-quiet{background:var(--kv-cream);color:var(--kv-green)}
#unlockBtn{background:var(--kv-red);color:#fff}
.how{color:var(--kv-cream);border-color:var(--kv-yellow)}

/* reading panels */
.readings,.locked{background:var(--kv-cream);color:var(--kv-green);border:2px solid var(--kv-yellow);border-radius:20px}
.readings>h2,.locked h2{font-family:var(--display);color:var(--kv-green)}
.readings>p,.locked>p,.person .meta,.person .zodiac{color:#4F6F60}
.person{border-top-color:#E3D6B0}
.person .chip{border-color:var(--kv-green);color:var(--kv-green);background:#fff}
.locked li{border-top-color:#E3D6B0}
.locked{background:var(--kv-cream) linear-gradient(var(--kv-red),var(--kv-red)) top/100% 8px no-repeat}
.teaser{color:var(--kv-ink)}
.blur{color:#6E7F75}
.foot-note{color:var(--muted)}
.foot-note a{color:var(--kv-yellow)}

/* share card (html2canvas-safe: borders, solid fills, linear gradients only) */
.card,.card.dark{--cbg:var(--kv-cream);--cink:var(--kv-green);--csub:#4F6F60;--cline:var(--kv-green);
  outline:none;border:8px solid var(--kv-green);box-shadow:0 0 0 4px var(--kv-yellow),0 0 0 8px var(--kv-ink);border-radius:22px}
/* the card's own frame sits outside its container query, so cqw here would follow the viewport (30px+ frame on desktop) */
.stripe{height:3.2cqw;border-bottom:0}
.stripe i:nth-child(1){background:var(--kv-green)!important}
.stripe i:nth-child(2){background:var(--kv-red)!important}
.stripe i:nth-child(3){background:var(--kv-yellow)!important}
.stripe i:nth-child(4){background:#fff!important}
.stripe i:nth-child(5){background:var(--kv-navy)!important}
.duo{background:var(--kv-green);color:var(--kv-cream);border-bottom:0.8cqw solid var(--kv-yellow)}
.side + .side{border-left:0.6cqw solid rgba(245,196,49,.6)}
.hanja{color:var(--kv-yellow)}
.char{font-family:var(--display);color:#fff}
.who{color:#DCEBE2}
.seal{background:var(--kv-red);border:1cqw solid var(--kv-cream);box-shadow:0 0 0 0.6cqw var(--kv-ink)}
.seal strong{font-family:var(--display)}
.union{color:var(--kv-red);border-color:var(--kv-red)}
.ctitle{font-family:var(--display);color:var(--kv-green)}
.lines dt{color:var(--kv-red);font-family:var(--display);font-weight:400;letter-spacing:.2px}
.lines dd{color:#1E3B2F}
.cfoot{border-top:0;background:var(--kv-ink);color:var(--kv-cream);border-radius:99px;padding:1.6cqw 3.6cqw;margin-top:auto}
.cfoot b{font-family:var(--display);color:var(--kv-yellow)}

/* dialogs */
dialog{background:var(--kv-cream);color:var(--kv-green);border:2px solid var(--kv-yellow)}
dialog h2,.slide h3{font-family:var(--display);color:var(--kv-green)}
dialog .small,.slide .num,.fact,details ul{color:#4F6F60}
.fact b{color:var(--kv-green)}
.sheet-head{background:var(--kv-cream);border-bottom-color:#E3D6B0}
.x{color:var(--kv-green);border-color:#CDBF95}
.dots i{background:#D9CCA4}.dots i.on{background:var(--kv-red)}
details{border-top-color:#E3D6B0}
.toast{background:var(--kv-ink);color:var(--kv-yellow)}

/* reading overlay */
.reading{background:var(--kv-green) url("/media/yeon-hero-900.webp") center/cover no-repeat}
.reading video{opacity:0}
.reading::before{content:"";position:absolute;inset:0;background:rgba(11,61,43,.72)}
.reading h2{font-family:var(--display);color:var(--kv-yellow)}
.reading .bar i:nth-child(1){--c:var(--kv-green)!important}
.reading .skip{border-color:var(--kv-yellow);color:var(--kv-yellow)}
fieldset,dialog,.readings,.locked{color-scheme:light}