@font-face{font-family:'GoUnBam';src:url(fonts/title.woff2) format('woff2');font-display:swap}
@font-face{font-family:'GowunDodum';src:url(fonts/body.woff2) format('woff2');font-display:swap}
:root{--ink:#0b1026;--ink2:#141a3a;--gold:#e3c27a;--gold2:#b8924a;--cream:#f3ead7;--dim:#a9a7bf;--line:rgba(227,194,122,.28);
 --fire:#e8876b;--earth:#9fbf86;--air:#e6d68a;--water:#7fb2e0}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--cream)}
body{font-family:'GowunDodum',system-ui,sans-serif;font-size:17px;line-height:1.75;min-height:100vh;word-break:keep-all;overflow-wrap:anywhere;
 background:radial-gradient(120% 70% at 50% 0%,#232a5e 0%,#121839 45%,#0b1026 100%) fixed}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#app{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:28px 16px 40px}
.hero{position:relative;text-align:center;padding:470px 0 18px;isolation:isolate}
.hero .bg{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:350px;max-width:none;height:auto;z-index:-1;pointer-events:none;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 68%,transparent 86%),radial-gradient(ellipse 50% 58% at 50% 44%,#000 55%,transparent 100%);
 -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 68%,transparent 86%),radial-gradient(ellipse 50% 58% at 50% 44%,#000 55%,transparent 100%);mask-composite:intersect}
.hero .title{position:relative;filter:drop-shadow(0 2px 10px rgba(8,10,30,.9)) drop-shadow(0 0 18px rgba(227,194,122,.3))}
.eyebrow{margin:0;letter-spacing:.42em;font-size:12px;color:var(--gold);opacity:.8}
.title{font-family:'GoUnBam',serif;font-weight:400;font-size:64px;line-height:1.1;margin:8px 0 6px;
 background:linear-gradient(180deg,#fff6dc 0%,#e3c27a 60%,#a97f3a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 0 18px rgba(227,194,122,.35))}
.sub{margin:0;color:var(--gold);font-family:'GoUnBam',serif;font-size:24px;letter-spacing:.3em;opacity:.85}
.card{background:linear-gradient(180deg,rgba(30,37,80,.78),rgba(17,22,52,.82));border:1px solid var(--line);border-radius:18px;
 padding:20px 18px;margin:16px 0;box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,240,200,.06)}
.row{margin-bottom:18px}
.lab{display:block;font-size:15px;color:var(--gold);margin-bottom:6px;letter-spacing:.04em}
.lab small{color:var(--dim);margin-left:4px}
.inline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inline span{color:var(--dim);margin-right:6px}
input{font:inherit;color:var(--cream);background:rgba(5,8,26,.6);border:1px solid var(--line);border-radius:10px;padding:10px 10px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,194,122,.18)}
input::placeholder{color:#5d5f80}
#y{width:84px;text-align:center}#m,#d,#hh,#mi{width:56px;text-align:center}
input:disabled{opacity:.35}
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--cream);margin-left:4px;user-select:none}
.chk input{display:none}.chk i{width:22px;height:22px;border:1.5px solid var(--gold2);border-radius:6px;display:inline-block;position:relative;background:rgba(5,8,26,.6)}
.chk input:checked+i{background:var(--gold)}.chk input:checked+i:after{content:'';position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.hint{margin:6px 0 0;font-size:14px;color:var(--dim)}
.cityw{position:relative}#city{width:100%}
#country{display:block;width:100%;margin-bottom:8px;font:inherit;color:var(--cream);background:rgba(5,8,26,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e3c27a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid var(--line);border-radius:10px;padding:10px 38px 10px 10px;-webkit-appearance:none;appearance:none}
#country option{background:#10153a;color:var(--cream)}
.citylist{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#10153a;border:1px solid var(--line);border-radius:10px;max-height:240px;overflow:auto;z-index:5;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.citylist li{padding:9px 12px;border-radius:8px;cursor:pointer}.citylist li:hover,.citylist li.on{background:rgba(227,194,122,.16)}
.citylist small{color:var(--dim);margin-left:6px}
.err{min-height:1.4em;margin:0 0 6px;color:#ff9c8a;font-size:15px}
/* 단추: 놋쇠 천문 의기 판 */
.go{position:relative;display:block;width:100%;border:0;cursor:pointer;padding:0;border-radius:14px;background:linear-gradient(180deg,#f7dc98,#c9a057 55%,#8f6a2c);
 box-shadow:0 6px 0 #5e4519,0 10px 22px rgba(0,0,0,.45),inset 0 1px 0 #fff3c9;transition:transform .08s,box-shadow .08s}
.go span{display:block;margin:3px;border-radius:11px;padding:14px 0;font-family:'GoUnBam',serif;font-size:24px;color:#2a1d07;letter-spacing:.08em;
 border:1px solid rgba(80,55,15,.45);background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 2px,rgba(0,0,0,.03) 2px 4px);text-shadow:0 1px 0 rgba(255,240,200,.6)}
.go:active{transform:translateY(5px);box-shadow:0 1px 0 #5e4519,0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 #fff3c9}
.privacy{margin:12px 0 0;text-align:center;font-size:13px;color:var(--dim)}
.big3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.b3{text-align:center;padding:16px 6px 14px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(40,48,100,.7),rgba(17,22,52,.85))}
.b3 .k{font-size:13px;color:var(--gold);letter-spacing:.1em}.b3 svg{width:46px;height:46px;margin:8px auto 4px;display:block}
.b3 .s{font-family:'GoUnBam',serif;font-size:21px;line-height:1.3}.b3 .x{font-size:12px;color:var(--dim)}
.wheelc{padding:12px}#wheel{width:100%;height:auto;display:block}
.meta{margin:6px 4px 0;font-size:13px;color:var(--dim);text-align:center}
.h2{font-family:'GoUnBam',serif;font-weight:400;font-size:26px;color:var(--gold);margin:0 0 12px;line-height:1.3}
.h3{font-size:19px;margin:22px 0 6px;color:var(--cream);line-height:1.4}.h3 svg{width:22px;height:22px;vertical-align:-4px;margin-right:8px}
.h3 em{display:block;font-style:normal;color:var(--gold);font-size:14.5px;font-weight:400;margin:2px 0 0 30px}
.read p{margin:0 0 6px}.read .lead{font-size:17.5px}
.ptable{width:100%;border-collapse:collapse;font-size:15.5px}
.ptable td{padding:8px 4px;border-bottom:1px solid rgba(227,194,122,.12)}.ptable td:first-child{width:34px}.ptable svg{width:20px;height:20px;display:block}
.ptable .dg{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}.ptable .r{color:#ff9c8a;font-size:13px;margin-left:4px}
.bar{display:flex;align-items:center;gap:10px;margin:8px 0}.bar b{width:44px;font-weight:400;font-size:15px}
.bar .t{flex:1;height:12px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}.bar .t i{display:block;height:100%;border-radius:6px}
.bar .n{width:36px;text-align:right;color:var(--dim);font-size:14px}
.asp{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(227,194,122,.12)}.asp:last-child{border:0}
.asp .gl{flex:none;display:flex;align-items:center;gap:2px}.asp .gl svg{width:20px;height:20px}
.asp .tt{font-size:15px;color:var(--gold)}.asp p{margin:2px 0 0;font-size:15.5px}
.note{font-size:14px;color:var(--dim);margin:8px 0 0}
.again{display:block;margin:20px auto 0;background:none;border:1px solid var(--gold2);color:var(--gold);font:inherit;padding:10px 22px;border-radius:999px;cursor:pointer}
.foot{margin-top:36px;text-align:center;font-size:13px;color:#77779a}.foot p{margin:4px 0}
@media (max-width:520px){.hero{padding-top:410px}.hero .bg{width:300px;top:-10px}}
@media (max-width:420px){.title{font-size:54px}.b3 .s{font-size:18px}body{font-size:16.5px}}
.lb{margin:8px 0 0}.lb b{display:inline-block;font-weight:400;font-size:13px;color:var(--ink);background:var(--gold);border-radius:5px;padding:1px 7px;margin-right:8px;vertical-align:1px}
.tag{display:inline-block;font-weight:400;font-size:13px;color:var(--gold);border:1px solid var(--gold2);border-radius:999px;padding:0 9px;margin-right:8px}
.note2{margin:14px 0 4px;padding:10px 12px;border-left:2px solid var(--gold2);background:rgba(227,194,122,.06);font-size:15.5px}
.traits{margin:6px 0 14px}.traits .bar b{width:72px}
.modbox{margin:6px 0 10px;padding:10px 12px;border-left:2px solid var(--gold);background:rgba(227,194,122,.08);border-radius:0 8px 8px 0}.modbox p{margin:0 0 4px}
p.base{color:#d9d3c2}

/* 옮게임즈 페이지 안(iframe) */
.embed,.embed body{background:transparent}
.embed body{min-height:0;background:radial-gradient(120% 900px at 50% 0%,#232a5e 0%,#121839 45%,#0b1026 100%) #0b1026}
.embed #sky{position:absolute;bottom:auto}
.embed #app{padding:20px 12px 24px}
.embed .hero{padding-top:330px}.embed .hero .bg{width:250px;top:-8px}
@media (max-width:420px){.embed .hero{padding-top:270px}.embed .hero .bg{width:210px}.embed .card{padding:18px 14px}
 .embed #y{width:72px}.embed #m,.embed #d,.embed #hh,.embed #mi{width:48px}.embed .inline span{margin-right:2px}}