/* 깨비인포 공통 스타일 — 폰 우선 */
:root{
  --bg:#f4f5fb; --card:#ffffff; --ink:#1b1e2e; --mute:#626879; --line:#e4e6ef;
  --acc:#4453d6; --acc-ink:#ffffff; --acc-soft:#eceefe;
  --gold:#f2b632; --hot:#ef4a5c;
  --ok:#128a57; --ok-soft:#e1f5eb; --warn:#a15c07; --warn-soft:#fdf1dc;
  --chip:#eef0f6; --shadow:0 1px 2px rgba(24,28,60,.05),0 6px 18px rgba(24,28,60,.06);
  --band:linear-gradient(125deg,#232a78 0%,#3c3bb5 48%,#6a44cf 100%);
  --band-ink:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11131b; --card:#1a1d28; --ink:#e9eaf1; --mute:#a2a8b8; --line:#2a2e3c;
    --acc:#8f9bff; --acc-ink:#10121a; --acc-soft:#232848;
    --ok:#6fd3a0; --ok-soft:#1b3328; --warn:#f0b35a; --warn-soft:#3a2d17;
    --chip:#242836; --shadow:0 1px 2px rgba(0,0,0,.3);
    --band:linear-gradient(125deg,#161a4a 0%,#25246e 50%,#3d2a7c 100%);
  }
}
:root[data-theme="dark"]{
    --bg:#11131b; --card:#1a1d28; --ink:#e9eaf1; --mute:#a2a8b8; --line:#2a2e3c;
    --acc:#8f9bff; --acc-ink:#10121a; --acc-soft:#232848;
    --ok:#6fd3a0; --ok-soft:#1b3328; --warn:#f0b35a; --warn-soft:#3a2d17;
    --chip:#242836; --shadow:0 1px 2px rgba(0,0,0,.3);
    --band:linear-gradient(125deg,#161a4a 0%,#25246e 50%,#3d2a7c 100%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;letter-spacing:-.1px}
a{color:var(--acc)}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}
header.top{background:var(--band);color:var(--band-ink);position:sticky;top:0;z-index:10;box-shadow:0 2px 12px rgba(20,20,70,.18)}
header.top .bar{display:flex;align-items:center;gap:10px;height:56px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:#fff;text-decoration:none;letter-spacing:-.4px}
.brand img{border-radius:8px;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.brand small{font-weight:500;color:rgba(255,255,255,.72);font-size:12px;margin-left:2px}
nav.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:14px;transition:background .15s}
nav.tabs a:hover{background:rgba(255,255,255,.22)}
nav.tabs a svg{width:15px;height:15px;opacity:.9}
nav.tabs a.on{background:#fff;color:#2b2f86;font-weight:700}
nav.tabs a.on svg{opacity:1}
main{padding:16px 0 48px}
main.lift{padding-top:0}
main.lift>.wrap{margin-top:-30px;position:relative;z-index:2}
main.lift>.wrap>.card:first-of-type,main.lift>.wrap>div:first-of-type>.card{margin-top:0}
h1{font-size:24px;margin:4px 0 4px;letter-spacing:-.6px;font-weight:800}
h2{font-size:17px;margin:0 0 10px;letter-spacing:-.3px;font-weight:750}
h3{font-size:15px;margin:14px 0 6px}
.lead{color:var(--mute);margin:0 0 14px;font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:14px 0;box-shadow:var(--shadow)}
.card>h2:first-child,.card>.row:first-child>h2{display:flex;align-items:center;gap:8px}
.card>h2:first-child::before,.card>.row:first-child>h2::before{content:"";width:4px;height:16px;border-radius:3px;background:linear-gradient(var(--acc),#8a5cf6);flex:0 0 auto}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:620px){.grid2{grid-template-columns:1fr 1fr}}
.muted{color:var(--mute)} .small{font-size:13px}
.badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;vertical-align:middle;font-weight:600;white-space:nowrap}
.badge.unk{background:var(--warn-soft);color:var(--warn)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.acc{background:var(--acc-soft);color:var(--acc)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:9px 14px;font-size:14px;cursor:pointer;text-decoration:none;min-height:40px}
.btn.p{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:600;box-shadow:0 4px 12px rgba(68,83,214,.25)}
.btn:hover{filter:brightness(1.04)}
.btn.sm{padding:5px 10px;min-height:32px;font-size:13px}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.chip.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
input[type=number],input[type=text],select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:40px;width:100%}
label.f{display:block;font-size:13px;color:var(--mute);margin:8px 0 4px}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th,table.t td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
table.t th{font-size:12px;color:var(--mute);font-weight:600}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums}
.big{font-size:28px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.note{background:var(--warn-soft);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:13px;margin:10px 0}
.info{background:var(--acc-soft);border-radius:10px;padding:10px 12px;font-size:13px;margin:10px 0}
footer.bot{background:#171a2c;padding:22px 0 44px;color:#a9aec2;font-size:12px;line-height:1.7}
footer.bot b{color:#fff;font-size:14px}
footer.bot a{color:#d6d9e8}
.empty{color:var(--mute);text-align:center;padding:18px 8px;font-size:14px}
.sr{position:absolute;left:-9999px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}
.toast.on{opacity:1}

/* 머리말 버튼·전체 메뉴 */
.bar .sp{flex:1}
.ib{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;border-radius:10px;height:36px;min-width:36px;padding:0 10px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-family:inherit}
.ib:hover{background:rgba(255,255,255,.2)}
.menu-box .ib{border-color:var(--line);background:var(--card);color:var(--ink)}
.menu-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;display:none}
.menu-ov.on{display:block}
.menu-box{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--bg);overflow:auto;padding:16px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:720px){main .fgrid{grid-template-columns:repeat(4,1fr)}}
.fcard{position:relative;display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 14px 14px;text-decoration:none;color:var(--ink);min-height:118px;transition:transform .15s,box-shadow .15s,border-color .15s}
.fcard:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,28,60,.1);border-color:transparent}
.fcard .ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;margin-bottom:10px;color:#fff;background:var(--c,#4453d6);box-shadow:0 4px 10px -2px var(--c,#4453d6)}
.fcard .ic svg{width:22px;height:22px}
.fcard b{display:block;font-size:15px;letter-spacing:-.3px}
.fcard span{display:block;font-size:12px;color:var(--mute);margin-top:2px;line-height:1.4}
.fcard .star{position:absolute;right:8px;top:8px;border:0;background:none;font-size:18px;color:var(--mute);cursor:pointer;padding:2px 4px;line-height:1}
.fcard .star.on{color:#e0a100}
.explain{color:var(--ink);font-size:14px;line-height:1.75}
.explain h2{font-size:16px;margin:4px 0 8px}
.explain h3{font-size:14px;margin:14px 0 4px}
.explain p{margin:6px 0}
.dday{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;margin-left:6px;background:var(--chip);color:var(--ink)}
.dday.hot{background:#d6453d;color:#fff}
.pbar{height:8px;background:var(--chip);border-radius:99px;overflow:hidden}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),#8a5cf6);border-radius:99px;transition:width .3s}
.interp{background:var(--acc-soft);border-radius:10px;padding:10px 12px;font-size:14px;margin:10px 0;line-height:1.6}
.interp p{margin:3px 0}

/* 제목 띠 (페이지 머리) */
.phead{background:var(--band);color:#fff;padding:18px 0 44px;position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M0 45a15 15 0 0 1 30 0a15 15 0 0 1 30 0a15 15 0 0 1 30 0a15 15 0 0 1 30 0'/%3E%3Cpath d='M-15 15a15 15 0 0 1 30 0a15 15 0 0 1 30 0a15 15 0 0 1 30 0a15 15 0 0 1 30 0a15 15 0 0 1 30 0'/%3E%3C/g%3E%3C/svg%3E")}
.phead::after{content:"";position:absolute;right:-30px;top:-20px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(242,182,50,.45),rgba(242,182,50,0) 70%)}
.phead .wrap{position:relative;z-index:1}
.phead h1{color:#fff;font-size:26px;margin:0}
.phead .lead{color:rgba(255,255,255,.8);margin:4px 0 0}
.phead a{color:#fff}
header.top+.phead{padding-top:14px}

/* 강조 카드 (출시 카운트다운 등) */
.hero{background:linear-gradient(135deg,#ffffff 0%,#f3f1ff 100%);border:1px solid #dcdaf7}
:root[data-theme="dark"] .hero{background:linear-gradient(135deg,#1d2033 0%,#261f45 100%);border-color:#34306a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero{background:linear-gradient(135deg,#1d2033 0%,#261f45 100%);border-color:#34306a}}
.hero .big{background:linear-gradient(90deg,#3a3fc4,#8a4fd6);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:32px}
:root[data-theme="dark"] .hero .big{background:linear-gradient(90deg,#aab3ff,#d2a8ff);-webkit-background-clip:text;background-clip:text}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero .big{background:linear-gradient(90deg,#aab3ff,#d2a8ff);-webkit-background-clip:text;background-clip:text}}
.hero .tag{display:inline-block;background:var(--gold);color:#3a2800;font-size:12px;font-weight:800;border-radius:999px;padding:2px 10px;margin-bottom:6px}
.hot-card{border-color:#f3b5bc;background:linear-gradient(135deg,var(--card),rgba(239,74,92,.06))}

/* 일정 줄 앞 아이콘 */
.dot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;background:var(--acc-soft);color:var(--acc);flex:0 0 auto;margin-right:10px}
.dot svg{width:17px;height:17px}
.menu-box h3{margin-top:18px}
footer.bot .fb{display:flex;align-items:center;gap:8px;margin-bottom:6px}
footer.bot .fb img{border-radius:6px}
input[type=checkbox]{accent-color:var(--acc)}