/* 라이징스타 발굴기 - 공통 디자인 토큰 (index.html 과 동일, 임의 변경 금지) */
:root{
--paper:#F4F3F0; --surface:#FFFFFF; --surface-2:#FAFAF8;
--ink:#1B1A17; --ink-2:#57544E; --ink-3:#8A867E;
--line:#E3E1DB; --line-strong:#CFCCC4;
--up:#E53935; --up-ink:#B3211D; --up-wash:rgba(229,57,53,.10);
--down:#1E88E5; --down-ink:#1565C0; --down-wash:rgba(30,136,229,.10);
--gold:#C08A2E; --gold-ink:#8F6618; --gold-wash:rgba(192,138,46,.13); --gold-on-ink:#E2B45C;
--on-ink:#F4F3F0; --on-ink-dim:#9B978F; --focus:#1B1A17;
--sans:"IBM Plex Sans KR","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
--mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
--step--1:.75rem; --step-0:.9375rem; --step-1:1.0625rem;
--step-2:1.375rem; --step-3:1.875rem;
--step-4:clamp(2rem,1.4rem + 2.4vw,3.125rem);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--paper:#100F0E; --surface:#1A1917; --surface-2:#211F1D;
--ink:#F3F1EC; --ink-2:#A8A49B; --ink-3:#78746C;
--line:#2C2A27; --line-strong:#3D3A36;
--up:#FF6B62; --up-ink:#FF8A82; --up-wash:rgba(255,107,98,.14);
--down:#5BA9F5; --down-ink:#7DBDF8; --down-wash:rgba(91,169,245,.14);
--gold:#E0AE55; --gold-ink:#EBC27C; --gold-wash:rgba(224,174,85,.16); --gold-on-ink:#8F6618;
--on-ink:#100F0E; --on-ink-dim:#57534C; --focus:#F3F1EC;
}
}
:root[data-theme="dark"]{
--paper:#100F0E; --surface:#1A1917; --surface-2:#211F1D;
--ink:#F3F1EC; --ink-2:#A8A49B; --ink-3:#78746C;
--line:#2C2A27; --line-strong:#3D3A36;
--up:#FF6B62; --up-ink:#FF8A82; --up-wash:rgba(255,107,98,.14);
--down:#5BA9F5; --down-ink:#7DBDF8; --down-wash:rgba(91,169,245,.14);
--gold:#E0AE55; --gold-ink:#EBC27C; --gold-wash:rgba(224,174,85,.16); --gold-on-ink:#8F6618;
--on-ink:#100F0E; --on-ink-dim:#57534C; --focus:#F3F1EC;
}
html{-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
.wrap-narrow{max-width:560px;margin-inline:auto;padding-inline:20px}
/* ---------- 상단바 ---------- */
.topbar{border-bottom:1px solid var(--line);background:var(--surface)}
.topbar-in{display:flex;align-items:center;gap:28px;min-height:60px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:8px;font-weight:700;letter-spacing:-.02em;
font-size:var(--step-1);text-decoration:none}
.brand .mark{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.14em;
border:1px solid var(--gold);color:var(--gold-ink);background:var(--gold-wash);
border-radius:3px;padding:2px 5px;line-height:1;transform:translateY(-2px)}
.nav{display:flex;gap:22px;margin-right:auto;font-size:var(--step-0);color:var(--ink-2);flex-wrap:wrap}
.nav a{text-decoration:none;padding-block:4px}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold)}
.nav a:hover{color:var(--ink)}
.userchip{display:flex;align-items:center;gap:9px;font-size:var(--step--1);color:var(--ink-2)}
.userchip .av{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);
display:grid;place-items:center;font-family:var(--mono);font-size:.6875rem;font-weight:600;flex:none}
/* ---------- 계기판 띠 ---------- */
.readout{background:var(--ink);color:var(--on-ink-dim)}
.readout-in{display:flex;gap:10px 30px;flex-wrap:wrap;align-items:center;padding-block:9px;
font-family:var(--mono);font-size:var(--step--1);letter-spacing:.02em}
.readout b{font-weight:600;color:var(--on-ink)}
.readout b.hl{color:var(--gold-on-ink)}
.readout .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-on-ink);
display:inline-block;margin-right:7px;vertical-align:1px}
@media (prefers-reduced-motion:no-preference){.readout .dot{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ---------- 버튼 / 입력 ---------- */
.btn{font-family:var(--sans);font-size:var(--step-0);font-weight:600;border-radius:4px;
border:1px solid var(--ink);padding:8px 16px;cursor:pointer;background:var(--ink);
color:var(--surface);transition:opacity .15s ease}
.btn:hover{opacity:.84}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);opacity:1}
.btn-block{width:100%;padding:12px 16px}
.btn-sm{padding:5px 11px;font-size:var(--step--1)}
.field{display:flex;align-items:center;gap:10px;background:var(--surface);
border:1px solid var(--line-strong);border-radius:4px;padding:0 14px}
.field:focus-within{border-color:var(--ink)}
.field svg{flex:none;color:var(--ink-3)}
.field input{flex:1;border:0;background:transparent;font-family:var(--sans);
font-size:var(--step-0);color:var(--ink);padding:13px 0;min-width:0}
.field input:focus{outline:none}
.field input::placeholder{color:var(--ink-3)}
.field.is-error{border-color:var(--up)}
.field.is-error:focus-within{border-color:var(--up)}
/* ---------- 숫자 / 지표 ---------- */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--step-0)}
.num-sub{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);
font-variant-numeric:tabular-nums}
.mult{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;
font-size:var(--step-1);letter-spacing:-.02em}
.delta{font-family:var(--mono);font-size:var(--step--1);font-variant-numeric:tabular-nums;
display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:3px}
.up{color:var(--up-ink);background:var(--up-wash)}
.down{color:var(--down-ink);background:var(--down-wash)}
.grade{font-family:var(--mono);font-size:.625rem;font-weight:600;line-height:1;padding:3px 5px;
border-radius:3px;border:1px solid var(--line-strong);color:var(--ink-2);flex:none}
.grade[data-g="A"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.grade[data-g="B"]{border-color:var(--ink);color:var(--ink)}
.eyebrow{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.18em;
text-transform:uppercase;color:var(--gold-ink);margin:0 0 14px}
/* ---------- 카드 / 패널 ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px}
.card-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
padding:18px 20px 16px;border-bottom:1px solid var(--line)}
.card-head h2{margin:0;font-size:var(--step-2);letter-spacing:-.025em;font-weight:700}
.card-head .meta{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);margin-left:auto}
.card-body{padding:20px}
/* ---------- 빈 상태 ---------- */
.empty{padding:64px 20px;text-align:center;color:var(--ink-2)}
.empty .big{font-family:var(--mono);font-size:var(--step-1);color:var(--ink);margin-bottom:8px}
/* ---------- 푸터 ---------- */
.foot{border-top:1px solid var(--line);padding-block:22px 40px;color:var(--ink-3);font-size:var(--step--1)}
.foot .note{font-family:var(--mono);display:flex;gap:8px;align-items:flex-start;margin:0}
.foot .note b{color:var(--ink-2);font-weight:600}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:var(--step--1)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
/* ---------- 알림 문구 ---------- */
.msg{font-size:var(--step--1);margin:8px 0 0;display:flex;gap:6px;align-items:flex-start}
.msg-error{color:var(--up-ink)}
.msg-ok{color:var(--ink-2)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);
color:var(--on-ink);font-size:var(--step--1);padding:10px 18px;border-radius:4px;
box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:50}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}