/* ASTRAL SYNC hub: a polar star chart. The IP sits at the pole, each medium is a star whose brightness is its status, and every star is wired to the pre-register button. */
:root{
  --void:#08070d;      /* night sky, brand ground */
  --deep:#120f1b;      /* plates, dialogs */
  --star:#f1ecfa;      /* starlight text */
  --haze:#a59db7;      /* secondary text, purple-biased */
  --faint:#6e6684;     /* chart furniture */
  --aether:#b997eb;    /* constellation lines, brand purple */
  --aether-dim:rgba(185,151,235,.34);
  --seal:#ef244a;      /* only for what is sealed */
  --rule:rgba(241,236,250,.12);
  --f-label:'Barlow Condensed','Arial Narrow',sans-serif;
  --f-display:'Cormorant Garamond','Times New Roman',serif;
  --f-body:'Manrope',system-ui,sans-serif;
  --f-ko:'Noto Serif KR','Nanum Myeongjo',serif;
  --dial:min(86vmin,780px);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--void);color:var(--star)}
body{font:15px/1.65 var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--aether);outline-offset:4px}
img{max-width:100%}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--star);color:var(--void);padding:8px 14px;font:600 14px var(--f-label);text-decoration:none}
.skip:focus{top:12px}

.sky{position:fixed;inset:-12px;z-index:0;pointer-events:none;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);will-change:transform}
.sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- top bar ---------- */
.bar{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;justify-content:space-between;align-items:center;
  padding-top:calc(18px + env(safe-area-inset-top,0px));padding-bottom:18px;
  padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));
  font:500 15px var(--f-label);letter-spacing:.06em}
.bar a{text-decoration:none;color:var(--haze);transition:color .2s,border-color .2s,opacity .2s}
.bar nav{display:flex;gap:24px}
.bar-brand{display:block;opacity:.92}
.bar-brand:hover{opacity:1}
.bar-brand img{display:block;height:24px;width:auto}
.bar-link{display:inline-block;padding:9px 18px 8px;border:1px solid rgba(241,236,250,.32);font:600 17px/1 var(--f-label);letter-spacing:.14em;color:var(--star)!important}
.bar-link:hover{border-color:var(--star);background:rgba(241,236,250,.06)}

/* ---------- the chart ---------- */
.chart{position:relative;z-index:1;min-height:100vh;min-height:100svh;overflow:hidden}
@supports (height:100svh){.chart{min-height:max(100svh,660px)}}
.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lines .spoke{fill:none;stroke:var(--aether-dim);stroke-width:1;transition:stroke .35s,stroke-width .35s,stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1)}
.lines .spoke.is-sealed{stroke:rgba(239,36,74,.32);stroke-dasharray:3 6}
.lines .spoke.is-hot{stroke:var(--aether);stroke-width:1.6}
.lines .anchor{fill:var(--void);stroke:var(--aether);stroke-width:1;transition:fill .35s}
.lines .anchor.is-hot{fill:var(--aether)}
.lines .anchor.is-sealed{stroke:var(--seal)}
.lines .minor{fill:none;stroke:rgba(185,151,235,.18);stroke-width:.8;transition:stroke .35s}
.lines .minor.is-hot{stroke:rgba(185,151,235,.55)}
.lines .minor-dot{fill:rgba(241,236,250,.55)}
.is-bonded .lines .spoke{stroke:var(--aether);stroke-width:1.6}
.is-bonded .lines .anchor{fill:var(--aether)}

/* polar dial behind the core */
.dial{position:absolute;left:50%;top:var(--cy,51%);width:var(--dial);height:var(--dial);transform:translate(-50%,-50%);pointer-events:none;overflow:visible}
.dial .ring{fill:none;stroke:var(--rule);stroke-width:1}
.dial .ring-in{fill:none;stroke:rgba(241,236,250,.08);stroke-width:1;stroke-dasharray:2 5}
.dial .tick{stroke:rgba(241,236,250,.22);stroke-width:1}
.dial .tick-h{stroke:rgba(241,236,250,.4)}
.dial text{fill:var(--faint);font:500 10px var(--f-label);letter-spacing:.08em;text-anchor:middle;dominant-baseline:middle}

/* moving parts of the compass: CSS transforms only, so they run on the GPU and never block the page */
.orrery{position:absolute;left:50%;top:var(--cy,51%);width:var(--dial);height:var(--dial);transform:translate(-50%,-50%);pointer-events:none}
.orrery i{position:absolute;left:50%;top:50%;width:0;height:0;will-change:transform}
/* each moving part is a 0x0 pivot at the pole carrying one tiny mark, so the GPU only moves a few pixels */
.orbit::after{content:'';position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--star);box-shadow:0 0 8px 2px rgba(205,180,250,.55)}
.o1{--r:calc(var(--dial) * -.4167);animation:orbit 140s linear infinite reverse}
.o2{--r:calc(var(--dial) * -.2667);animation:orbit 90s linear infinite}
.o2::after{left:-1.5px;top:-1.5px;width:3px;height:3px;background:var(--aether)}
.sweep{--r:calc(var(--dial) * -.3533);animation:orbit 36s linear infinite}
.sweep::before{content:'';position:absolute;left:-120px;top:-1px;width:120px;height:2px;background:linear-gradient(90deg,rgba(185,151,235,0),rgba(214,196,255,.75));border-radius:2px}
.sweep::after{content:'';position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(205,180,250,.7)}
@keyframes orbit{from{transform:rotate(0deg) translateY(var(--r))}to{transform:rotate(360deg) translateY(var(--r))}}
@keyframes spin{to{transform:rotate(360deg)}}
.lines .ping{fill:none;stroke:#e6d9ff;stroke-width:1.6;opacity:0;animation:ping 36s linear infinite}
.lines .ping.is-sealed{stroke:var(--seal);stroke-dasharray:3 6}
@keyframes ping{0%{opacity:0}1%{opacity:.95}9%{opacity:0}100%{opacity:0}}
.paused .orrery i,.paused .lines .ping{animation-play-state:paused}

/* the pole: IP + pre-register */
.core{position:absolute;left:50%;top:var(--cy,51%);transform:translate(-50%,-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;width:min(420px,92vw)}
.core h1{margin:0;line-height:0}
.core-logo{width:clamp(200px,25vmin,310px);height:auto;display:block}
.core-ko{margin:2px 0 0;font:600 clamp(20px,2.4vmin,26px)/1.1 var(--f-ko);letter-spacing:.12em;padding-left:.12em;color:var(--star)}
.core-tag{margin:8px 0 14px;font:400 italic clamp(19px,2.3vmin,23px)/1.3 var(--f-display);color:var(--star);text-wrap:balance}

.prereg{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:18px 46px 16px;min-width:min(320px,86vw);background:var(--star);color:var(--void);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:background .25s,transform .25s;filter:drop-shadow(0 0 26px rgba(185,151,235,.45))}
.prereg-main{font:600 30px/1 var(--f-label);letter-spacing:.16em;padding-left:.16em}
.prereg-sub{font:500 14px/1.2 var(--f-label);letter-spacing:.04em;color:#4a4260}
.prereg:hover{background:#fff;transform:translateY(-1px)}
.prereg:focus-visible{outline-offset:6px}

/* ---------- stars ---------- */
.stars{list-style:none;margin:0;padding:0}
.star{position:absolute;left:var(--x);top:var(--y);z-index:4;transform:translate(-50%,-14px)}
.star-btn{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0;text-align:center}
.glint{position:relative;display:block;width:28px;height:28px}
.glint::before,.glint::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:1px}
.glint::before{width:var(--spike,40px);height:1px;background:linear-gradient(90deg,transparent,rgba(241,236,250,.85),transparent);box-shadow:0 0 0 0 transparent}
.glint::after{width:1px;height:var(--spike,40px);background:linear-gradient(transparent,rgba(241,236,250,.85),transparent)}
.glint i{position:absolute;left:50%;top:50%;width:var(--core,9px);height:var(--core,9px);transform:translate(-50%,-50%);border-radius:50%;
  background:var(--star);box-shadow:0 0 calc(var(--core,9px)*1.6) calc(var(--core,9px)*.5) rgba(205,180,250,.55),0 0 2px #fff}
.mag-1{--core:11px;--spike:58px}
.mag-2{--core:8px;--spike:42px}
.mag-3{--core:6px;--spike:30px}
.mag-4{--core:4px;--spike:0px}
.mag-4 i{background:var(--faint);box-shadow:none}
.mag-4::before,.mag-4::after{display:none}
.mag-4 b{position:absolute;inset:3px;border:1px dashed var(--seal);border-radius:50%;opacity:.8}
.star-btn:hover .glint,.star-btn[aria-expanded="true"] .glint{transform:scale(1.18)}
.glint{transition:transform .3s}
.star-name{display:block;font:400 clamp(23px,2.2vw,30px)/1 var(--f-display);color:var(--star);white-space:nowrap}
.star-name em{font-style:normal;font-size:.62em;color:var(--aether);margin-right:.35em;vertical-align:.18em}
.star[data-star="anime"] .star-name{color:var(--haze)}
.star[data-star="anime"] .star-name em{color:var(--seal)}
.star-btn:hover .star-name,.star-btn[aria-expanded="true"] .star-name{color:#fff}

/* what makes a star read as a button: a targeting reticle around the glint and a framed name with a + */
.reticle{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;--c:rgba(241,236,250,.75);
  background:linear-gradient(var(--c),var(--c)) 0 0/9px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 9px,
    linear-gradient(var(--c),var(--c)) 100% 0/9px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 9px,
    linear-gradient(var(--c),var(--c)) 0 100%/9px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 9px,
    linear-gradient(var(--c),var(--c)) 100% 100%/9px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 9px;
  background-repeat:no-repeat;opacity:.6;animation:breathe 3.4s ease-in-out infinite;transition:transform .3s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.mag-1 .reticle{width:46px;height:46px;margin:-23px 0 0 -23px}
.mag-4 .reticle{--c:rgba(239,36,74,.7)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.2);opacity:.3}}
.star-btn:hover .reticle,.star-btn:focus-visible .reticle,.star-btn[aria-expanded="true"] .reticle{animation:none;transform:scale(.72);opacity:1}
.star-btn:hover .glint,.star-btn[aria-expanded="true"] .glint{transform:none}
.star-chip{position:relative;display:inline-flex;align-items:center;gap:12px;padding:7px 12px 8px 14px;border:1px solid rgba(241,236,250,.26);background:rgba(8,7,13,.5);transition:border-color .25s,background .25s}
.star-btn:hover .star-chip,.star-btn:focus-visible .star-chip,.star-btn[aria-expanded="true"] .star-chip{border-color:var(--star);background:rgba(241,236,250,.08)}
.star[data-star="anime"] .star-chip{border-style:dashed;border-color:rgba(239,36,74,.45)}
.star[data-star="anime"] .star-btn:hover .star-chip{border-color:var(--seal)}
.chip-ico{position:relative;width:13px;height:13px;flex:none;color:var(--aether);transition:transform .3s}
.chip-ico::before,.chip-ico::after{content:'';position:absolute;left:0;top:6px;width:13px;height:1.4px;background:currentColor}
.chip-ico::after{transform:rotate(90deg)}
.star-btn:hover .chip-ico{color:var(--star)}
.star-btn[aria-expanded="true"] .chip-ico{transform:rotate(45deg);color:var(--star)}
.chip-lock{width:12px;height:14px;flex:none;color:var(--seal)}
/* when the compass comet passes a star's line, its frame flashes too */
.star-chip::after{content:'';position:absolute;inset:-1px;border:1px solid #efe6ff;opacity:0;pointer-events:none}
.star.has-ping .star-chip::after{animation:ping 36s linear infinite;animation-delay:var(--ping,0s)}
.star[data-star="anime"] .star-chip::after{border-color:var(--seal);border-style:dashed}
.paused .reticle,.paused .star-chip::after{animation-play-state:paused}
.star-btn:focus-visible{outline-offset:8px}

/* landscape placement */
.star[data-star="novel"]{--x:17%;--y:68%}
.star[data-star="webtoon"]{--x:21%;--y:25%}
.star[data-star="game"]{--x:80%;--y:23%}
.star[data-star="anime"]{--x:84%;--y:70%}

/* ---------- legend (magnitude = status) ---------- */
.legend{position:absolute;z-index:3;left:max(24px,env(safe-area-inset-left,0px));bottom:22px;margin:0;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;font:500 14px/1 var(--f-label);letter-spacing:.04em;color:var(--haze)}
.legend dt{color:var(--star);margin-right:2px}
.legend dd{margin:0;display:flex;align-items:center;gap:8px}
.legend i{display:inline-block;border-radius:50%;background:var(--star)}
.legend .l1{width:9px;height:9px;box-shadow:0 0 8px rgba(205,180,250,.7)}
.legend .l2{width:7px;height:7px}
.legend .l3{width:5px;height:5px}
.legend .l4{width:7px;height:7px;background:none;border:1px dashed var(--seal)}

/* ---------- plates (open a star) ---------- */
.plate{position:absolute;z-index:8;width:min(400px,calc(100vw - 32px));background:var(--deep);border:1px solid var(--rule);
  box-shadow:0 30px 80px rgba(0,0,0,.6);display:grid;grid-template-columns:auto 1fr;gap:0;opacity:0;transform:translateY(6px);
  transition:opacity .25s,transform .25s}
.plate.is-portrait{width:auto;max-width:min(540px,calc(100vw - 32px));grid-template-columns:auto 320px}
.plate.is-landscape{width:auto;max-width:min(640px,calc(100vw - 32px));grid-template-columns:auto 320px}
.plate.is-open{opacity:1;transform:none}
.plate-art{display:block;margin:0;padding:0;position:relative;background:#000;cursor:zoom-in;align-self:start}
.plate-art img{display:block;height:auto}
.is-portrait .plate-art img{height:clamp(220px,34vh,300px);width:auto;max-width:none}
.is-landscape .plate-art img{width:clamp(240px,20vw,300px)}
.plate-art picture{display:block}
.plate-art:focus-visible{outline-offset:-3px}
.plate-body{padding:16px 18px 18px;min-width:0;display:flex;flex-direction:column;gap:7px}
.plate-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.plate h2{margin:0;font:500 28px/1 var(--f-display)}
.plate h2 em{font-style:normal;font-size:.6em;color:var(--aether);margin-right:.3em;vertical-align:.2em}
.plate-ko{font:500 13px var(--f-ko);color:var(--haze);letter-spacing:.2em}
.plate-state{margin:0;font:500 14px/1.3 var(--f-label);letter-spacing:.04em;color:var(--aether)}
.plate p{margin:0;font-size:13.5px;line-height:1.55;color:#cdc6da}
.plate-act{margin-top:6px;display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:10px 16px;background:var(--star);color:var(--void);
  font:600 15px/1 var(--f-label);letter-spacing:.08em;text-decoration:none;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.plate-act:hover{background:#fff}
.plate-acts{margin-top:6px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.plate-acts .plate-act{margin-top:0}
.plate-act.is-alt{background:transparent;color:var(--star);box-shadow:inset 0 0 0 1px rgba(241,236,250,.4);clip-path:none}
.plate-act.is-alt:hover{background:rgba(241,236,250,.08);box-shadow:inset 0 0 0 1px var(--star)}
.plate-cap{position:absolute;left:10px;bottom:9px;padding:4px 8px 3px;background:rgba(8,7,13,.72);color:var(--haze);font:500 12.5px/1 var(--f-label);letter-spacing:.06em}
.plate-x{width:32px;height:32px;margin:-6px -8px 0 0;flex:none;position:relative;color:var(--haze)}
.plate-x::before,.plate-x::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.plate-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.plate-x:hover{color:var(--star)}
.plate.no-art{grid-template-columns:1fr}
.plate.no-art .plate-body{border-top:1px dashed var(--seal)}

#viewer{background:transparent;border:0;padding:0;max-width:96vw;max-height:96vh;overflow:visible}
#viewer::backdrop{background:rgba(4,3,8,.94)}
#viewer img{display:block;max-width:94vw;max-height:92vh;width:auto;height:auto;margin:auto;cursor:zoom-out}
#viewer .dlg-x{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));background:rgba(8,7,13,.7);z-index:2}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;border-top:1px solid var(--rule);background:var(--void);
  padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));
  padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));
  display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;font-size:13px;color:var(--faint)}
.foot p{margin:0}
.foot nav{display:flex;gap:10px 20px;flex-wrap:wrap}
.foot a,.foot button{color:var(--haze);text-decoration:none;font-size:13px;padding:0}
.foot a:hover,.foot button:hover{color:var(--star)}

/* ---------- pre-register dialog ---------- */
dialog{color:var(--star);background:var(--deep);border:1px solid var(--rule);padding:0;max-height:92vh;overflow:auto}
dialog::backdrop{background:rgba(4,3,8,.82);backdrop-filter:blur(6px)}
#newsletter{width:min(520px,calc(100vw - 24px));padding:40px 34px 28px}
.dlg-x{position:absolute;top:12px;right:12px;width:40px;height:40px;color:var(--haze)}
.dlg-x::before,.dlg-x::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.dlg-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.dlg-x:hover{color:var(--star)}
.dlg-kicker{margin:0 0 10px;font:500 14px var(--f-label);letter-spacing:.06em;color:var(--aether)}
#newsletter h2,#panels h2{margin:0 0 10px;font:500 clamp(30px,6vw,40px)/1.05 var(--f-display);text-wrap:balance}
#newsletter .lede{margin:0 0 22px;color:#cdc6da;font-size:14.5px}
#newsletter-form{display:flex;flex-direction:column;gap:16px}
.field label{display:block;margin-bottom:6px;font:500 13px var(--f-label);letter-spacing:.06em;color:var(--haze)}
.field input{width:100%;padding:13px 14px;background:rgba(255,255,255,.04);border:1px solid var(--rule);color:var(--star);font:15px var(--f-body);border-radius:0}
.field input:focus{border-color:var(--aether);outline:none}
.newsletter-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.plat-label{display:block;margin-bottom:8px;font:500 13px var(--f-label);letter-spacing:.06em;color:var(--haze)}
.plat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.plat-grid button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px 8px;border:1px solid var(--rule);color:var(--haze);font:500 12px var(--f-body);transition:border-color .2s,color .2s,background .2s}
.plat-grid button svg{width:19px;height:19px}
.plat-grid button:hover{border-color:var(--aether-dim);color:var(--star)}
.plat-grid button.is-on{border-color:var(--aether);background:rgba(185,151,235,.12);color:#fff}
.consent-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;color:#cdc6da}
.consent-row input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--aether);flex:none}
.consent-row button{color:var(--star);text-decoration:underline;text-underline-offset:2px;padding:0;font-size:inherit}
.pr-err{margin:0;color:#ff8ea0;font-size:13px}
.pr-err:empty{display:none}
.dlg-go{width:100%;padding:16px;background:var(--star);color:var(--void);font:600 22px/1 var(--f-label);letter-spacing:.14em;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.dlg-go:hover{background:#fff}
.dlg-go:disabled{opacity:.55;cursor:wait}
#newsletter-status{margin:0;font-size:13px;color:var(--haze);min-height:1em}
#newsletter-status:empty{display:none}
.newsletter-contact{margin:20px 0 0;font-size:12.5px;color:var(--faint)}
.newsletter-contact a{color:var(--haze)}
.pr-success p{color:#cdc6da;margin:0 0 22px}

/* webtoon panels */
#panels{width:min(760px,calc(100vw - 24px));padding:38px 28px 24px;text-align:center}
.panels-note{margin:0 0 18px;color:var(--haze);font-size:13.5px}
.pn-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px;touch-action:pan-y}
.pn-img{max-height:60vh;max-width:min(76%,520px);border:1px solid var(--rule);transition:opacity .14s;user-select:none}
.pn-img.pn-fade{opacity:0}
.pn-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule);background:rgba(8,7,13,.85);color:var(--star)}
.pn-arrow:hover{border-color:var(--aether)}
.pn-arrow svg{width:16px;height:16px}
.pn-prev{left:0}.pn-next{right:0}
.panels-hud{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px}
.pn-count{font:500 14px var(--f-label);letter-spacing:.08em;color:var(--haze);font-variant-numeric:tabular-nums}
.pn-count b{color:var(--star);font-weight:500}
.pn-dots{display:inline-flex;gap:6px}
.pn-dots i{width:20px;height:3px;background:var(--rule);cursor:pointer;transition:.3s}
.pn-dots i.is-on{background:var(--star);width:30px}

/* ---------- legal modals (markup carried over 1:1) ---------- */
.modal{position:fixed;inset:0;z-index:1800;visibility:hidden;pointer-events:none}
.modal.is-open{visibility:visible;pointer-events:auto}
.mo-back{position:absolute;inset:0;background:rgba(4,3,8,.84);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.modal.is-open .mo-back{opacity:1}
.mo-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-48%);opacity:0;width:min(94vw,820px);max-height:88vh;overflow-y:auto;
  background:var(--deep);border:1px solid var(--rule);transition:transform .35s,opacity .3s}
.modal.is-open .mo-panel{transform:translate(-50%,-50%);opacity:1}
.mo-x{position:sticky;float:right;top:14px;margin:14px 14px 0 0;width:38px;height:38px;border:1px solid var(--rule);background:var(--deep);z-index:2}
.mo-x::before,.mo-x::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1px;background:var(--star);transform:translate(-50%,-50%) rotate(45deg)}
.mo-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mo-doc-head{padding:34px clamp(22px,4vw,44px) 10px}
.mo-badge{display:block;font:500 13px var(--f-label);letter-spacing:.08em;color:var(--aether);margin-bottom:8px}
.mo-doc-head h2{margin:0;font:500 clamp(30px,5vw,42px)/1.05 var(--f-display)}
.mo-date{margin:8px 0 0;color:var(--faint);font-size:13px}
.mo-enonly:empty{display:none}
.mo-doc-body{padding:10px clamp(22px,4vw,44px) 40px}
.prose-policy{color:#cdc6da;font-size:14px;line-height:1.75}
.prose-policy h3{color:var(--star);font:500 22px/1.2 var(--f-display);margin:28px 0 8px}
.prose-policy h4{color:var(--star);font:600 14px var(--f-body);margin:18px 0 6px}
.prose-policy ul{padding-left:20px}
.prose-policy a{color:var(--aether)}
body.modal-open{overflow:hidden}

/* ---------- cookie ---------- */
.cookie{position:fixed;z-index:1700;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:min(380px,calc(100vw - 32px));background:var(--deep);border:1px solid var(--rule);padding:18px 18px 16px;font-size:13px;color:#cdc6da}
.ck-badge{display:block;font:500 14px var(--f-label);letter-spacing:.06em;color:var(--star);margin-bottom:6px}
.ck-main p{margin:0 0 14px;line-height:1.55}
.ck-btns{display:flex;flex-wrap:wrap;gap:8px}
.ck-btns button{padding:8px 12px;border:1px solid var(--rule);font:500 13px var(--f-body);color:var(--star)}
.ck-btns .ck-accept{background:var(--star);color:var(--void);border-color:var(--star)}
.ck-btns button:hover{border-color:var(--aether)}
.ck-detail{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
.ck-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--rule)}
.ck-row b{color:var(--star);font-weight:600}
.ck-row p{margin:2px 0 0;font-size:12px;color:var(--haze)}
.ck-fixed{font-size:12px;color:var(--haze);white-space:nowrap}
.ck-toggle{position:relative;flex:none;width:38px;height:22px}
.ck-toggle input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ck-toggle i{position:absolute;inset:0;border:1px solid var(--rule);border-radius:11px;pointer-events:none}
.ck-toggle i::after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:.2s}
.ck-toggle input:checked+i{border-color:var(--aether)}
.ck-toggle input:checked+i::after{left:19px;background:var(--aether)}
.ck-toggle input:focus-visible+i{outline:2px solid var(--aether);outline-offset:2px}
.ck-detail .ck-btns{margin-top:12px}

/* ---------- load sequence (one moment, CSS only: content is visible even if the script never runs) ---------- */
@keyframes rise{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .dial{animation:rise 1.4s ease both}
  .star{animation:rise 1s .25s ease both}
}

/* ---------- portrait / phone ---------- */
@media (max-width:760px), (max-aspect-ratio:4/5){
  :root{--dial:min(140vw,640px)}
  .chart{--cy:49%}
  @supports (height:100svh){.chart{min-height:max(100svh,720px)}}
  .star[data-star="webtoon"]{--x:26%;--y:12.5%}
  .star[data-star="game"]{--x:76%;--y:15.5%}
  .star[data-star="novel"]{--x:26%;--y:79%}
  .star[data-star="anime"]{--x:74%;--y:82%}
  .star-name{font-size:21px}
  .star-chip{padding:6px 10px 7px 12px;gap:9px}
  .chip-ico{width:11px;height:11px}.chip-ico::before,.chip-ico::after{width:11px;top:5px}
  .mag-1{--core:9px;--spike:46px}
  .mag-2{--core:7px;--spike:34px}
  .mag-3{--core:5px;--spike:26px}
  .core-logo{width:210px}
  .core-ko{font-size:20px}
  .core-tag{font-size:19px;margin-bottom:10px}
  .prereg{padding:16px 30px 14px}
  .prereg-main{font-size:27px}
  .legend{left:50%;transform:translateX(-50%);bottom:16px;gap:12px;width:max-content;max-width:calc(100vw - 32px);justify-content:center;font-size:12px}
  .legend dt{display:none}
  .plate,.plate.is-portrait,.plate.is-landscape{position:fixed;left:0!important;right:0;top:auto!important;bottom:0;width:100%;max-height:82svh;overflow:auto;
    border-left:0;border-right:0;padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(20px)}
  .plate.is-portrait{grid-template-columns:auto 1fr;max-width:none}
  .plate.is-landscape{grid-template-columns:1fr;max-width:none}
  .is-portrait .plate-art img{height:auto;width:128px}
  .is-landscape .plate-art img{width:100%}
  .bar-brand img{height:19px}
  .bar-link{font-size:15px;padding:8px 13px 7px}
  #newsletter{padding:34px 20px 22px}
  .plat-grid{gap:5px}.plat-grid button{font-size:11px;padding:9px 2px 7px}
  .foot{justify-content:center;text-align:center}
  .foot nav{justify-content:center}
}
@media (max-height:700px) and (min-width:761px){
  .core-logo{width:190px}.core{gap:6px}.core-tag{margin:4px 0 8px}
}
/* small phones (iPhone SE, 360px Android): compact pole, stars pushed to the corners */
@media (max-width:760px) and (max-height:760px){
  .chart{--cy:51.5%}
  @supports (height:100svh){.chart{min-height:max(100svh,600px)}}
  .core{gap:6px}
  .core-logo{width:158px}
  .core-ko{font-size:17px}
  .core-tag{font-size:16.5px;margin:2px 0 6px}
  .prereg{padding:12px 22px 11px;min-width:min(280px,84vw)}
  .prereg-main{font-size:23px}.prereg-sub{font-size:12.5px}
  .star[data-star="webtoon"]{--x:26%;--y:12%}
  .star[data-star="game"]{--x:77%;--y:13.5%}
  .star[data-star="novel"]{--x:26%;--y:80.5%}
  .star[data-star="anime"]{--x:74%;--y:83%}
  .star-name{font-size:20px}.star-chip{padding:6px 10px 7px 12px;gap:9px}
  .star-btn{gap:9px}
}
/* phones held sideways: stars move to the left and right edges, the pole shrinks */
@media (max-height:500px) and (min-aspect-ratio:4/3){
  :root{--dial:min(118vh,560px)}
  .chart{--cy:52%}
  @supports (height:100svh){.chart{min-height:max(100svh,360px)}}
  .core{gap:4px;width:min(340px,44vw)}
  .core-logo{width:128px}
  .core-ko{font-size:15px}
  .core-tag{font-size:15px;margin:0 0 4px}
  .prereg{padding:10px 20px 9px;min-width:0}
  .prereg-main{font-size:20px}.prereg-sub{font-size:12px}
  .star[data-star="webtoon"]{--x:14%;--y:24%}
  .star[data-star="novel"]{--x:14%;--y:70%}
  .star[data-star="game"]{--x:86%;--y:24%}
  .star[data-star="anime"]{--x:86%;--y:70%}
  .star-name{font-size:19px}.star-chip{padding:5px 10px 6px 12px;gap:9px}
  .star-btn{gap:8px}
  .legend{left:max(24px,env(safe-area-inset-left,0px));transform:none;bottom:10px;font-size:12px}
  .legend dt{display:none}
  .bar{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px}
  .bar-brand img{height:17px}.bar-link{font-size:14px;padding:6px 12px 5px}
}
@media (prefers-reduced-motion:reduce){
  .reticle{animation:none}.star.has-ping .star-chip::after{animation:none}
  .orrery i{animation:none}.sweep{display:none}.lines .ping{display:none}
  .sky{transition:none}
  .lines .spoke{transition:none}
  .plate{transition:none}
}