:root { --ink:#17212c; --muted:#6d7780; --paper:#f7f6f2; --coral:#ff725d; --mint:#55cbb4; --line:#dfe3de; --navy:#1d2b39; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans KR",sans-serif; }
button { font:inherit; cursor:pointer; }
.page-shell { max-width:1120px; margin:0 auto; padding:28px 32px 70px; }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.logo { color:var(--ink); text-decoration:none; font:800 20px "Manrope",sans-serif; letter-spacing:-1.2px; }.logo span { color:var(--coral); }
.status { font:500 10px "DM Mono",monospace; letter-spacing:1.2px; color:#60707a; }.status i { display:inline-block; width:7px; height:7px; background:var(--mint); border-radius:50%; margin-right:7px; box-shadow:0 0 0 4px #d9f4ed; }
.history-toggle { border:0; background:transparent; color:var(--ink); font-size:13px; font-weight:700; }.history-toggle span { margin-left:5px; padding:2px 7px; border-radius:10px; color:#fff; background:var(--navy); font:11px "DM Mono",monospace; }
.hero { padding:100px 0 58px; }.eyebrow { margin:0 0 12px; color:var(--coral); font:500 11px "DM Mono",monospace; letter-spacing:1.5px; }.hero h1 { margin:0; font:800 clamp(42px,6vw,74px)/1.08 "Noto Sans KR",sans-serif; letter-spacing:-5px; }.hero em { color:var(--coral); font-style:normal; }.intro { margin:27px 0 0; color:var(--muted); font-size:14px; line-height:1.8; }
.prediction-card { position:relative; overflow:hidden; padding:42px; border-radius:28px; color:#f8faf7; background:var(--navy); box-shadow:0 20px 50px #17212c18; }.prediction-card::after { content:""; position:absolute; width:390px; height:390px; right:-140px; top:-170px; border:1px solid #ffffff20; border-radius:50%; box-shadow:0 0 0 40px #ffffff08,0 0 0 80px #ffffff05; }
.card-heading,.result-area,.result-inputs,.input-heading,.input-hint,.analyze-button { position:relative; z-index:1; }.card-heading { display:flex; justify-content:space-between; align-items:end; }.card-heading .eyebrow { color:var(--mint); }.card-heading h2 { margin:0; font-size:26px; letter-spacing:-1.8px; }.round-label { color:#b5c1c9; font:12px "DM Mono",monospace; }
.result-area { text-align:center; padding:27px 0 24px; }.orb-wrap { display:inline-grid; place-items:center; width:122px; height:122px; margin-bottom:11px; border-radius:50%; background:#ffffff10; }.orb { display:grid; place-items:center; width:94px; height:94px; border-radius:50%; background:#f1f3ed; color:var(--navy); font:800 43px "Manrope",sans-serif; box-shadow:inset 0 -8px 0 #d9dfd7; transition:.35s ease; }.orb.odd { color:#fff; background:var(--coral); box-shadow:inset 0 -8px 0 #d45545; }.orb.even { background:var(--mint); box-shadow:inset 0 -8px 0 #37ab96; }.orb.roll { animation:roll .55s ease; }.result-label { margin:0; font-weight:800; font-size:21px; letter-spacing:-1px; }.result-detail { margin:5px 0 0; color:#b9c3c9; font-size:12px; }
.input-heading { display:flex; justify-content:space-between; margin:4px 0 10px; color:#dbe3e6; font-size:12px; font-weight:700; }.input-heading small { color:#aebbc1; font:11px "DM Mono",monospace; }.input-heading b { color:var(--mint); }.result-inputs { display:grid; grid-template-columns:repeat(10,1fr); gap:7px; }.result-inputs button { height:71px; padding:7px 2px; border:1px solid #ffffff25; border-radius:11px; color:#fff; background:#ffffff0c; transition:.2s; }.result-inputs button:hover { transform:translateY(-2px); border-color:#fff8; }.result-inputs small,.result-inputs strong { display:block; }.result-inputs small { color:#aebbc1; font:10px "DM Mono",monospace; }.result-inputs strong { margin-top:8px; font-size:18px; }.result-inputs button.odd { border-color:var(--coral); background:#ff725d33; }.result-inputs button.odd strong { color:#ff9d8d; }.result-inputs button.even { border-color:var(--mint); background:#55cbb433; }.result-inputs button.even strong { color:#8ee3d1; }.input-hint { margin:10px 0 0; color:#aebbc1; font-size:11px; }.input-hint b { color:#eef2ee; }
.analyze-button { width:100%; margin-top:13px; padding:16px; border:0; border-radius:13px; color:var(--navy); background:#f2f3ee; font-weight:800; transition:.2s; }.analyze-button:not(:disabled):hover { transform:translateY(-2px); background:var(--mint); }.analyze-button:disabled { cursor:not-allowed; opacity:.5; }.analyze-button span { float:right; }
.stats-section { padding-top:75px; }.section-heading { display:flex; align-items:end; justify-content:space-between; }.section-heading h2 { margin:0; font-size:26px; letter-spacing:-1.8px; }.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }.stat-card { min-height:145px; padding:23px; border:1px solid var(--line); border-radius:17px; background:#fcfcf9; }.stat-card span { color:var(--muted); font-size:12px; font-weight:700; }.stat-card strong { display:block; margin:12px 0 16px; font:700 27px "Manrope",sans-serif; letter-spacing:-1.8px; }.meter { height:5px; overflow:hidden; border-radius:10px; background:#e9eae5; }.meter i { display:block; width:0; height:100%; border-radius:inherit; background:var(--coral); transition:width .45s; }.meter.mint i { background:var(--mint); }.stat-card.accent { border:0; color:#fff; background:var(--coral); }.stat-card.accent span,.stat-card.accent p { color:#ffe0da; }.stat-card.accent strong { margin-bottom:6px; font-size:21px; }.stat-card p { margin:0; font-size:11px; }
.history-panel { position:fixed; z-index:4; top:0; right:0; width:min(380px,90vw); height:100%; padding:28px; transform:translateX(105%); background:#fff; box-shadow:-10px 0 35px #17212c20; transition:transform .3s; }.history-panel.open { transform:translateX(0); }.panel-heading { display:flex; justify-content:space-between; align-items:center; }.panel-heading h2 { margin:0; font-size:21px; }.panel-heading button { border:0; background:transparent; font-size:30px; color:var(--muted); }.history-panel ol { padding:0; margin:30px 0; list-style:none; }.history-panel li { display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--line); font-size:14px; }.history-panel li b { color:var(--coral); }.history-panel li.even b { color:#15987e; }.history-panel .empty-state { display:block; color:var(--muted); text-align:center; border:0; }.clear-button { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:white; font-size:13px; }.scrim { position:fixed; inset:0; z-index:3; visibility:hidden; opacity:0; background:#17212c55; transition:.3s; }.scrim.visible { visibility:visible; opacity:1; } footer { padding:0 20px 30px; text-align:center; color:#9ca4a3; font:10px "DM Mono",monospace; letter-spacing:.8px; }
@keyframes roll { 50% { transform:scale(.75) rotate(180deg); } 100% { transform:scale(1) rotate(360deg); } }
@media (max-width:600px) { .page-shell { padding:22px 18px 50px; }.status { display:none; }.hero { padding:67px 0 43px; }.hero h1 { font-size:47px; letter-spacing:-3.8px; }.prediction-card { padding:27px 20px; border-radius:21px; }.card-heading h2 { font-size:23px; }.round-label { font-size:9px; }.result-area { padding:22px 0; }.result-inputs { grid-template-columns:repeat(5,1fr); gap:8px; }.result-inputs button { height:63px; }.stat-grid { grid-template-columns:1fr 1fr; }.stat-card.accent { grid-column:span 2; min-height:115px; }.intro { font-size:13px; } }