/* See ../DESIGN.md — Melissandra mockups (character now Gye-Mi 계미): deep navy + moonlight silver, sans UI (Inter), hairline borders, no radius. */
:root{--bg:#070b14;--panel:#0c1220;--silver:#c8d0dc;--dim:#8a94a6;--moon:#e8eef6;--line:rgba(200,208,220,.14);--glow:rgba(200,208,220,.16);--gold:#c9a96e;
--serif:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR","Noto Sans TC",sans-serif;--sans:var(--serif)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--silver);font-family:var(--serif);-webkit-font-smoothing:antialiased;min-height:100%}
.shell{max-width:480px;width:100%;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;border-left:1px solid var(--line);border-right:1px solid var(--line);
 background:radial-gradient(ellipse at 50% 0,#111a30 0,transparent 55%),linear-gradient(180deg,#0a1020 0,var(--bg) 30%)}
main{flex:1;display:flex;flex-direction:column}
.mark{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(138,148,166,.6);text-align:center;padding:1.2rem}
.mark .logos{font-family:Cinzel,"Times New Roman",serif;font-weight:500;font-size:1.15em;letter-spacing:.12em;text-transform:uppercase;color:inherit}
.top{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.4rem;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.top a,.top button{color:var(--dim);background:none;border:0;font:inherit;letter-spacing:inherit;cursor:pointer;text-decoration:none}
.top .begin{color:var(--silver);border-bottom:1px solid var(--line);padding-bottom:2px}
.dots{display:flex;gap:6px}.dots i{width:5px;height:5px;border-radius:50%;background:#2a3344}.dots i.on{background:var(--moon)}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem 1.4rem 3rem}
.portrait{width:220px;height:220px;border-radius:50%;object-fit:cover;object-position:center top;border:1px solid var(--line);box-shadow:0 0 60px var(--glow)}
.portrait.sm{width:72px;height:72px;box-shadow:0 0 24px var(--glow)}
h1{font-weight:normal;color:var(--moon);font-size:2rem;letter-spacing:.18em;margin-top:1.6rem}
.title{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--dim);margin-top:.5rem}
.rule{width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--silver),transparent);margin:1.6rem auto}
.lede{font-style:italic;color:var(--silver);font-size:1.05rem;line-height:1.7;max-width:320px}
.q{font-weight:normal;color:var(--moon);font-size:1.35rem;letter-spacing:.06em;margin-top:1.4rem;line-height:1.4}
.hint{font-style:italic;color:var(--dim);font-size:.9rem;margin-top:.8rem;line-height:1.5}
.field{width:100%;margin-top:2rem}
input[type=text],input[type=email],input[type=date],input[type=time]{width:100%;padding:1rem;background:var(--panel);border:1px solid var(--line);color:var(--moon);
 font-family:var(--sans);font-size:1.05rem;letter-spacing:.06em;text-align:center;outline:none;color-scheme:dark}
input:focus{border-color:rgba(200,208,220,.4)}
.check{display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:.9rem;font-style:italic;color:var(--dim);font-size:.88rem}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:2rem;width:100%}
.btn{display:block;width:100%;margin-top:2.2rem;padding:1rem;background:transparent;border:1px solid var(--moon);color:var(--moon);font-family:var(--serif);
 font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.btn:hover,.btn.sel{background:rgba(232,238,246,.08)}.choices .btn{margin-top:0}
.btn.ghost{border-color:var(--line);color:var(--dim);margin-top:.8rem}.btn.inline{width:auto;display:inline-block;padding:1rem 2.4rem}
.foot{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-top:2rem}
.err{color:#d9a0a0;font-style:italic;font-size:.88rem;margin-top:1rem;min-height:1.2em}
/* report */
.head{display:flex;gap:.8rem;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.head img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center top;border:1px solid var(--line)}
.head b{display:block;font-weight:normal;color:var(--moon);letter-spacing:.2em;font-size:.82rem}.head i{color:var(--dim);font-size:.75rem}
.pillars-bar{position:sticky;top:0;z-index:5;background:rgba(7,11,20,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:.85rem 1rem 1rem}
.label{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);text-align:center;margin-bottom:.65rem}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.pillar{border:1px solid var(--line);background:rgba(12,18,32,.75);text-align:center;padding:.55rem .2rem .65rem}
.pillar .k{font-family:var(--sans);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:.35rem}
.pillar .hanja{font-size:1.6rem;line-height:1.15;color:var(--moon)}.pillar .hanja span{display:block}
.pillar .py{font-size:.72rem;color:var(--silver);margin-top:.35rem;font-style:italic}.pillar .ko{font-family:var(--sans);font-size:.62rem;color:var(--dim);margin-top:.1rem}
.pillar .stage{font-family:var(--serif);font-size:.52rem;line-height:1.35;color:var(--dim);font-style:italic;margin-top:.4rem;padding:0 .15rem}
.pillar.day{border-color:rgba(201,169,110,.45)}.pillar.day .k{color:var(--gold)}.pillar.day .stage{color:rgba(201,169,110,.85)}
.chart-sum{text-align:center;padding:1rem 1.4rem .35rem;font-style:italic;color:var(--moon);font-size:1.02rem;letter-spacing:.02em;line-height:1.55}
.thread{padding:1.4rem 1.2rem 2rem;display:flex;flex-direction:column;gap:1.6rem}
.who{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-bottom:.45rem}
.sec h2{font-weight:normal;color:var(--moon);font-size:1.05rem;letter-spacing:.04em;line-height:1.5}
.sec p{font-size:.95rem;line-height:1.7;color:var(--moon);margin-top:.5rem}.sec p.muted{color:var(--dim);font-style:italic;font-size:.88rem}
.z{white-space:nowrap}.z small{font-size:.78em;color:var(--dim);font-style:italic}
.meta{border:1px solid var(--line);background:rgba(200,208,220,.04);padding:.7rem .85rem;font-family:var(--sans);font-size:.72rem;line-height:1.6;color:var(--silver)}
.meta b{font-weight:normal;color:var(--moon)}
table{width:100%;border-collapse:collapse;margin-top:.7rem;font-size:.85rem}
td{padding:.55rem .3rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--moon)}
td:first-child{font-family:var(--sans);font-size:.7rem;color:var(--dim);white-space:nowrap;width:5.5rem}
tr.now td{background:rgba(201,169,110,.06)}tr.now td:first-child{color:var(--gold)}

/* responsive widen: mobile-first, desktop up to 880px */
@media (min-width:640px){.shell{max-width:640px}.lede{max-width:440px}.pillar .hanja{font-size:2rem}.pillar .py{font-size:.78rem}.pillar .ko{font-size:.72rem}.pillar .stage{font-size:.62rem}.thread{padding:1.8rem 2rem 2.4rem}.field,.choices{max-width:440px}}
@media (min-width:960px){.shell{max-width:880px}.thread{padding:2rem 3rem 3rem}.sec p{font-size:1rem}.pillars{gap:.8rem}.pillar .hanja{font-size:2.3rem}.hero .field,.hero .choices,.hero .btn{max-width:440px}}
.pillar .ko{color:var(--silver)}.pillar .py{color:var(--dim)}
.langbar{display:inline-flex;align-items:center;gap:.45rem;padding:0 .9rem;color:var(--dim);flex-shrink:0}
.langbar .globe{display:block;opacity:.85;flex-shrink:0}
.langbar select{-webkit-appearance:none;appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5' fill='%238a94a6'/%3E%3C/svg%3E") no-repeat right .6rem center;color:var(--dim);border:1px solid var(--line);font-family:var(--sans);font-size:.7rem;letter-spacing:.02em;text-transform:none;padding:.32rem 1.6rem .32rem .6rem;border-radius:0;color-scheme:dark;cursor:pointer;max-width:9.5rem}
.langbar select option{background:var(--bg,#0b1426);color:var(--moon);letter-spacing:normal;text-transform:none;padding:.3rem .6rem}
.langbar select:focus-visible{outline:1px solid var(--moon);outline-offset:2px}
.head .langbar{margin-left:auto;padding-right:.2rem}.top{gap:.6rem}.head{display:flex;align-items:center}

.deep{margin-top:1rem;padding:.9rem 1rem;border-left:1px solid var(--line);background:rgba(200,208,220,.03)}.deep .dlab{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}.deep .dlab .z small{letter-spacing:0;text-transform:none}.sec .deep p{color:var(--silver,#c8d0dc);margin-top:.55rem}.sec .deep p b{color:var(--moon);font-weight:500}

.brand{display:inline-flex;align-items:baseline;gap:.45rem}.brand .han{font-family:"Nanum Brush Script",cursive;font-weight:400;letter-spacing:0;text-transform:none;color:var(--moon);line-height:1}
h1 .brand{gap:.6rem}h1 .han{font-size:1.45em;opacity:.95}.top .brand .han{font-size:1.9em;color:var(--moon)}.head .brand .han{font-size:1.5em}