@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap");
:root{--bg:#ffffff;--panel:#ffffff;--panel2:#ffffff;--ink:#111111;--muted:#555555;--hair:#dedede;--purple:#111111;--pink:#111111;--cyan:#111111;--yellow:#111111;--green:#111111;--radius:18px;--font:"Manrope","Noto Sans KR",system-ui,sans-serif;--mono:"DM Mono",monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#ffffff;color:#111111;font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:#111111}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
::selection{background:#ffffff;color:#111111}
.hidden{display:none!important}
h1,h2,h3,p{margin-top:0}
.site-shell{max-width:1340px;margin:0 auto;min-height:100vh;padding:0 48px}
.topbar{height:94px;display:flex;align-items:center;gap:45px;border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{height:39px;width:39px;display:grid;place-items:center;color:#111111;background:#ffffff;border-radius:12px}
.mark-asterisk{font-size:30px;line-height:1;transform:translateY(-1px)}
.brand-text{font-size:20px;font-weight:800;letter-spacing:-.07em;line-height:1}
.brand-text .accent{color:#111111}
.brand-text small{font-family:"Noto Sans KR",sans-serif;display:block;font-size:9px;font-weight:500;color:#111111;letter-spacing:.08em;margin-top:7px}
.topnav{display:flex;gap:7px;align-items:center;margin:auto}
.nav-link{display:flex;gap:9px;align-items:center;white-space:nowrap;padding:12px 13px;border-radius:9px;color:#111111;font-size:12px;font-weight:700;transition:.2s}
.nav-link:hover,.nav-link.active{color:#111111;background:#ffffff}
.nav-link.active .nav-icon{color:#111111}
.nav-icon{font-size:18px;font-weight:500}
.tiny-lock{color:#111111;font-size:11px}
.secondary-btn{border:1px solid #424863;background:#ffffff;color:#111111;border-radius:10px;padding:11px 16px;white-space:nowrap;font-size:12px;font-weight:750;transition:.2s}
.secondary-btn:hover{background:#ffffff;border-color:#d0d0d0}
.top-login{display:flex;gap:15px;justify-content:space-between;align-items:center}
.top-login span{color:#111111}
.account-chip{border:1px solid var(--hair);background:#ffffff;color:#111111;border-radius:30px;padding:7px 13px 7px 7px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;max-width:185px}
.account-chip .chip-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.content-area{min-height:calc(100vh - 220px)}
.page-view{animation:reveal .3s ease}
@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ticker{display:flex;align-items:center;gap:11px;color:#111111;padding:31px 0 26px;font-size:10px;font-weight:700;letter-spacing:.10em}
.ticker-right{margin-left:auto;color:#111111;letter-spacing:0}
.tracking{font-family:var(--mono);font-size:10px}
.status-dot{width:7px;height:7px;border-radius:50%;background:#ffffff}
.home-columns{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,.9fr);gap:22px}
.roll-panel{min-width:0;padding:12px 0 16px}
.eyebrow{color:#111111;font-family:var(--mono),"Noto Sans KR",sans-serif;font-size:11px;font-weight:700;letter-spacing:.09em}
.small-spark{font-size:16px;vertical-align:-1px;margin-right:5px}
.hero-heading h1{margin:16px 0 19px;font-size:clamp(34px,4.4vw,55px);line-height:1.3;letter-spacing:-.065em;font-weight:800}
.hero-heading em,.page-head em{font-style:normal;background:#ffffff;color:#111111}
.hero-heading p{color:#111111;font-size:13px;line-height:1.95}
.machine{background:#ffffff;border:1px solid #303651;border-radius:17px;padding:21px 25px 16px;position:relative;overflow:hidden;margin-top:30px}
.machine:after{content:"";pointer-events:none;position:absolute;inset:0;background:#ffffff;background-size:6px 6px}
.machine-top,.machine-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.08em;color:#111111;font-family:var(--mono);font-weight:500}
.machine-top>span:first-child{color:#111111}
.machine-led{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ffffff;margin-right:7px}
.machine-display{height:144px;display:grid;place-items:center}
.number-glow{font-family:var(--mono);font-size:clamp(35px,5.1vw,65px);font-weight:500;letter-spacing:.035em;color:#111111;font-variant-numeric:tabular-nums;white-space:nowrap}
.machine.drawn .number-glow{color:#111111}
.machine.spinning .number-glow{animation:flicker .12s infinite alternate}
@keyframes flicker{from{opacity:.55}to{opacity:1}}
.hero-actions{display:flex;align-items:center;gap:22px;margin-top:20px;flex-wrap:wrap}
.primary-btn{min-height:49px;border:0;padding:13px 24px;background:#ffffff;border-radius:11px;color:#111111;font-weight:850;letter-spacing:-.025em;display:flex;gap:11px;align-items:center;justify-content:center;transition:transform .2s,filter .2s}
.primary-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}
.primary-btn.narrow{max-width:350px;width:100%;margin:24px auto 0}
.btn-star{font-size:19px}
.btn-arrow{margin-left:15px}
.roll-note{color:#111111;font-size:11px}
.roll-feedback{min-height:15px;margin-top:12px;font-size:11px;color:#111111}
.side-panel{border:1px solid var(--hair);border-radius:17px;background:#ffffff;padding:27px;display:flex;flex-direction:column;min-height:495px}
.side-panel-top{display:flex;align-items:center;justify-content:space-between}
.panel-star{color:#111111;font-size:20px}
.quick-stat{padding:30px 0 26px}
.quick-stat-label{color:#111111;font-size:13px;font-weight:600;display:flex;justify-content:space-between}
.quick-stat-label span{font-family:var(--mono);color:#111111;font-size:11px}
.quick-stat strong{display:block;font-size:clamp(32px,3.5vw,48px);font-family:var(--mono);letter-spacing:-.07em;margin:11px 0 3px}
.stat-unit{font-family:var(--mono);font-size:9px;color:#111111;letter-spacing:.14em}
.stats-divider{height:1px;background:#ffffff;margin-bottom:10px}
.stat-line{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid #ffffff0b}
.stat-line>div{display:flex;align-items:center;gap:12px;color:#111111;font-size:12px}
.stat-line strong{font-size:14px;font-family:var(--mono);color:#111111;letter-spacing:-.03em}
.stat-line-icon{font-size:17px;color:#111111;width:20px;text-align:center}
.side-note{display:flex;gap:10px;margin-top:auto;background:#ffffff;border-radius:10px;padding:14px;color:#111111;font-size:11px;line-height:1.75}
.note-icon{color:#111111;font-size:16px}
.section-caption{display:flex;align-items:end;justify-content:space-between;margin:67px 0 21px}
.section-caption>div{position:relative;padding-left:61px}
.section-index{position:absolute;left:0;top:5px;font-family:var(--mono);font-size:10px;color:#111111}
.section-caption h2{font-size:23px;letter-spacing:-.05em;margin:0 0 9px}
.section-caption p{color:#111111;font-size:12px;margin:0}
.inline-link{color:#111111;font-size:12px;font-weight:700;padding-bottom:2px}
.inline-link span{margin-left:7px}
.badge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.badge-card{background:#ffffff;border:1px solid #293045;border-radius:15px;padding:20px;min-height:186px;position:relative;overflow:hidden;transition:transform .18s,border-color .18s}
.badge-card:hover{transform:translateY(-3px);border-color:#d0d0d0}
.badge-card:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:#ffffff;opacity:.55}
.badge-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.badge-icon{width:39px;height:39px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--rarity-color,#a398ff) 33%,transparent);border-radius:10px;background:#ffffff;color:#111111;font-size:21px}
.rarity-pill{font-size:9px;letter-spacing:.06em;font-weight:800;color:#111111;border:1px solid color-mix(in srgb,var(--rarity-color,#a398ff) 22%,transparent);padding:5px 8px;border-radius:6px}
.badge-card h3{font-size:14px;margin:0 0 6px;font-weight:750;letter-spacing:-.04em}
.badge-card p{font-size:10px;color:#111111;line-height:1.65;min-height:34px;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff0b;padding-top:11px}
.badge-ep{color:#111111;font-family:var(--mono);font-size:11px}
.badge-state{font-size:10px;color:#111111}
.badge-card.owned .badge-state{color:#111111}
.badge-card.unowned{opacity:.81}
.badge-card.unowned .badge-icon{filter:grayscale(.45)}
.badge-card.unowned h3{color:#111111}
.empty-card{border:1px dashed #35405b;border-radius:14px;grid-column:1/-1;background:#ffffff;display:grid;place-items:center;color:#111111;min-height:130px;padding:25px;text-align:center;font-size:12px;line-height:1.8}
.bottom-callout{display:flex;align-items:center;gap:22px;background:#ffffff;border:1px solid #353759;border-radius:14px;padding:25px 30px;margin:38px 0 65px}
.callout-symbol{display:grid;place-items:center;flex-shrink:0;color:#111111;font-size:25px;width:55px;height:55px;border-radius:14px;background:#ffffff}
.bottom-callout strong{font-size:14px}
.bottom-callout p{font-size:11px;color:#111111;margin:8px 0 0}
.bottom-callout a{margin-left:auto;font-size:12px;color:#111111;white-space:nowrap;font-weight:700}
.page-head{padding:55px 0 30px}
.page-head h1{font-size:clamp(38px,5vw,58px);letter-spacing:-.08em;margin:18px 0 14px}
.page-head p{font-size:13px;color:#111111;line-height:1.8}
.catalog-progress{background:#ffffff;border:1px solid var(--hair);border-radius:14px;padding:24px;display:flex;align-items:center;gap:25px;margin:8px 0 19px}
.catalog-progress>div:first-child{white-space:nowrap;font-size:13px;color:#111111}
.catalog-progress strong{font-size:28px;font-family:var(--mono);font-weight:500;color:#111111}
.catalog-progress>div:first-child>span:last-child{font-size:11px;margin-left:12px}
.progress-track{height:7px;flex:1;border-radius:20px;background:#ffffff;overflow:hidden}
.progress-track>span{display:block;height:100%;background:#111111;border-radius:20px;transition:width .4s}
.catalog-progress>span{font-size:11px;color:#111111;font-family:var(--mono)}
.filter-bar{display:flex;gap:9px;flex-wrap:wrap;padding:17px 0 2px}
.search-field{flex:1 1 250px;position:relative}
.search-field span{position:absolute;left:14px;top:6px;font-size:23px;color:#111111}
.search-field input{width:100%;height:45px;padding:0 15px 0 44px}
.filter-bar select{height:45px;padding:0 11px;max-width:205px;color:#111111;cursor:pointer}
.check-label{background:#ffffff;border:1px solid #30394f;border-radius:10px;display:flex;align-items:center;padding:0 12px;gap:8px;font-size:11px;color:#111111;min-height:45px;white-space:nowrap}
.check-label input{accent-color:#aaa0ff}
.catalog-count{font-size:11px;color:#111111;margin:22px 0 16px}
.gate-container{text-align:center;padding:85px 25px 100px;border:1px solid var(--hair);background:#ffffff;border-radius:18px}
.gate-icon{height:78px;width:78px;border-radius:22px;display:grid;place-items:center;font-size:39px;color:#111111;background:#ffffff;border:1px solid #8881a751;margin:0 auto 28px}
.gate-container h2{font-size:29px;line-height:1.45;letter-spacing:-.05em;margin:18px 0}
.gate-container p{color:#111111;font-size:13px;line-height:1.95}
.board-note{display:flex;justify-content:space-between;color:#111111;font-family:var(--mono);font-size:10px;letter-spacing:.08em;margin:5px 0 25px}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:26px}
.podium-card{position:relative;text-align:center;padding:28px 12px;background:#ffffff;border:1px solid #2d3450;border-radius:16px;min-height:182px}
.podium-card:nth-child(2){border-color:#d0d0d0;background:#ffffff;transform:translateY(-7px)}
.podium-medal{display:grid;place-items:center;height:58px;width:58px;margin:0 auto 14px;border-radius:18px;font-size:26px;background:#ffffff}
.podium-card:nth-child(2) .podium-medal{background:#ffffff}
.podium-rank{font-size:10px;color:#111111;font-family:var(--mono)}
.podium-card h3{margin:7px 0;font-size:15px}
.podium-card strong{font-family:var(--mono);color:#111111}
.leaderboard-list{border-radius:14px;overflow:hidden;border:1px solid #2e3549;background:#ffffff}
.leader-row{display:grid;grid-template-columns:80px minmax(0,1fr) 120px 120px;gap:10px;align-items:center;padding:17px 23px;border-bottom:1px solid var(--hair);font-size:12px;color:#111111}
.leader-row:last-child{border-bottom:0}
.leader-row.labels{font-size:10px;font-weight:700;background:#ffffff;color:#111111}
.leader-row strong{color:#111111;font-family:var(--mono)}
.leader-row .leader-name{color:#111111;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leader-row.me{background:#ffffff}
.rank-number{font-family:var(--mono);color:#111111}
.privacy-foot{font-size:11px;color:#111111;margin:22px 0 60px}
.profile-overview{display:flex;justify-content:space-between;gap:18px;padding:30px;background:#ffffff;border:1px solid #333b5e;border-radius:16px}
.profile-identity{display:flex;align-items:center;gap:19px}
.profile-identity h2{font-size:23px;margin:10px 0 7px;letter-spacing:-.05em}
.profile-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:20px}
.profile-metrics>div{border:1px solid var(--hair);border-radius:14px;padding:22px;background:#ffffff}
.profile-metrics span{display:block;color:#111111;font-size:11px;margin-bottom:13px}
.profile-metrics strong{font-size:24px;font-family:var(--mono);color:#111111;letter-spacing:-.05em}
.history-list{background:#ffffff;border:1px solid var(--hair);border-radius:15px;overflow:hidden;margin-bottom:10px}
.history-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;padding:17px 24px;border-bottom:1px solid #ffffff0a;align-items:center}
.history-row:last-child{border-bottom:0}
.history-row span{color:#111111;font-size:12px}
.history-row strong{font-family:var(--mono);font-size:15px}
.history-row .history-score{color:#111111;text-align:right}
.profile-history-head{margin-top:50px}
.profile-logout{display:flex;justify-content:end;gap:20px;margin:28px 0 60px}
.danger-text{color:#111111!important}
.text-button{background:transparent;border:0;color:#111111;text-decoration:underline;font-weight:700;font-size:12px}
.footer{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--hair);padding:24px 0 32px;color:#111111;font-size:10px}
.footer>div:first-child{display:flex;align-items:center;gap:18px}
.footer-logo{font-weight:800;letter-spacing:-.04em;color:#111111;font-size:13px}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(11px);display:flex;align-items:center;justify-content:center;padding:20px}
.login-dialog{position:relative;width:min(430px,100%);border:1px solid #4c477b;border-radius:22px;background:#ffffff;padding:36px;text-align:center}
.modal-close{position:absolute;right:15px;top:10px;border:0;background:transparent;color:#111111;font-size:26px;line-height:1}
.login-illustration{width:83px;height:83px;border-radius:25px;border:1px solid #ffffff2f;background:#ffffff;display:grid;place-items:center;margin:0 auto 25px}
.login-illustration>span{font-size:48px;color:#111111}
.login-dialog h2{font-size:29px;letter-spacing:-.055em;line-height:1.42;margin:16px 0}
.login-dialog>p{font-size:12px;color:#111111;line-height:1.9}
.school-address{color:#111111;background:#ffffff;border:1px dashed #4b4b7b;padding:12px;margin:20px 0;border-radius:9px;font:11px var(--mono);word-break:break-all}
.google-login-slot{display:flex;justify-content:center;min-height:45px;align-items:center}
.login-warning{color:#111111!important;background:#ffffff;padding:9px;border-radius:7px;margin-top:15px}
.demo-login-btn{display:block;width:100%;margin-top:12px;padding:12px;border-radius:9px;border:1px solid #776bcb;color:#111111;background:#ffffff;font-weight:700;font-size:12px}
.login-footer{border-top:1px solid #ffffff14;margin-top:24px;padding-top:18px;color:#111111;font-size:10px}
.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,25px);background:#ffffff;color:#111111;padding:13px 22px;border-radius:12px;font-size:12px;font-weight:750;opacity:0;pointer-events:none;z-index:101;transition:.2s;max-width:calc(100vw - 36px);text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1}
@media (max-width:1100px){.site-shell{padding:0 30px}
.topbar{gap:22px}
.topnav{gap:1px}
.nav-link{padding:12px 9px;font-size:11px}
.badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.side-panel{padding:22px}
.machine-display{height:125px}}
@media (max-width:780px){.site-shell{padding:0 19px}
.topbar{height:77px;flex-wrap:wrap;justify-content:space-between;gap:0}
.brand-text{font-size:17px}
.brand-mark{width:34px;height:34px}
.topnav{order:3;overflow-x:auto;width:100%;margin:0 -19px;padding:5px 16px;border-top:1px solid var(--hair);justify-content:space-between}
.topbar{height:120px}
.nav-link{font-size:10px;gap:4px;padding:9px 6px}
.nav-icon{font-size:14px}
.top-login{padding:8px 11px}
.home-columns{grid-template-columns:1fr}
.hero-heading h1{font-size:43px}
.side-panel{min-height:0}
.side-note{margin-top:18px}
.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.section-caption{margin-top:47px}
.bottom-callout{flex-wrap:wrap}
.bottom-callout a{margin-left:77px}
.podium{gap:8px}
.podium-card{padding:20px 5px}
.profile-overview{flex-direction:column}
.profile-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.filter-bar select{flex:1;min-width:125px;max-width:none}
.footer{flex-direction:column;align-items:start;gap:10px}}
@media (max-width:470px){.hero-heading h1{font-size:35px}
.hero-heading p{font-size:12px}
.machine{padding:17px 15px 14px;margin-top:22px}
.machine-display{height:105px}
.number-glow{font-size:39px}
.machine-top,.machine-bottom{font-size:8px}
.hero-actions{gap:14px}
.roll-note{font-size:10px}
.badge-grid{gap:9px}
.badge-card{padding:15px;min-height:184px}
.badge-icon{width:35px;height:35px}
.badge-card h3{font-size:12px}
.badge-card p{font-size:10px}
.badge-ep{font-size:10px}
.section-caption>div{padding-left:45px}
.section-caption h2{font-size:20px}
.inline-link{font-size:10px}
.bottom-callout{padding:19px;gap:12px}
.bottom-callout a{margin:0}
.gate-container h2{font-size:23px}
.catalog-progress{gap:8px;padding:16px}
.catalog-progress>div:first-child>span:last-child{display:block;margin:4px 0 0}
.profile-overview{padding:20px}
.profile-identity{gap:12px}
.profile-metrics>div{padding:15px}
.profile-metrics strong{font-size:20px}
.leader-row{grid-template-columns:35px minmax(0,1fr) 90px;gap:7px;padding:15px 12px}
.leader-row> :nth-child(4){display:none}
.login-dialog{padding:27px 20px}
.history-row{padding:16px 13px}
.footer{font-size:9px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* White-only surfaces, black-first typography, no gradients. */
:root{color-scheme:light}
body,.site-shell,.content-area,.page-view{background:#fff;color:#111}
:focus-visible{outline:2px solid #111;outline-offset:2px}
::selection{background:#e8e8e8;color:#111}
.date-line{text-align:right;font-family:var(--mono);font-size:11px;color:#555;padding:27px 0 4px}
.hero-heading h1{margin-top:10px}
.hero-heading em,.page-head em{font-style:normal;color:#111}
.brand-mark{background:#fff;border:1px solid #111;box-shadow:none}
.brand-text .accent{color:#111}
.brand-text small,.ticker-right,.stat-unit,.section-caption p,.page-head p,.roll-note,.privacy-foot,.footer,.catalog-count{color:#555}
.nav-link,.nav-link:hover,.nav-link.active{background:#fff;color:#111}
.nav-link.active{border:1px solid #111}
.nav-link{border:1px solid transparent}
.nav-link.active .nav-icon,.nav-icon,.tiny-lock{color:#111}
.secondary-btn,.primary-btn,.demo-login-btn,.account-chip{background:#fff;color:#111;border:1px solid #111;box-shadow:none}
.primary-btn:hover:not(:disabled),.secondary-btn:hover,.demo-login-btn:hover{background:#fff;color:#111;filter:none;transform:none;border-color:#555}
.top-login span,.eyebrow,.inline-link,.inline-link span,.section-index,.panel-star,.stat-line-icon,.note-icon{color:#111}
.account-chip{padding:10px 13px;max-width:200px}
.machine,.side-panel,.badge-card,.empty-card,.bottom-callout,.catalog-progress,.gate-container,.podium-card,.leaderboard-list,.profile-overview,.profile-metrics>div,.history-list,.login-dialog,.side-note,.school-address,.toast,.search-field input,.filter-bar select,.check-label,.demo-login-btn{background:#fff;color:#111;border-color:#d5d5d5;box-shadow:none}
.machine{border-color:#111}
.machine:after,.badge-card:before{display:none}
.machine-top,.machine-top>span:first-child,.machine-bottom,.number-glow,.machine.drawn .number-glow,.quick-stat-label,.quick-stat-label span,.stat-line>div,.stat-line strong,.badge-card h3,.badge-ep,.badge-state,.badge-card.owned .badge-state,.badge-card.unowned h3,.catalog-progress strong,.catalog-progress>span,.podium-card strong,.leader-row strong,.leader-row .leader-name,.rank-number,.profile-metrics strong,.history-row .history-score,.footer-logo{color:#111;text-shadow:none}
.machine-led,.status-dot{background:#111;box-shadow:none}
.stat-line,.badge-bottom,.leader-row,.history-row,.login-footer{border-color:#e2e2e2}
.side-note{border:1px solid #e2e2e2}
.badge-icon,.rarity-pill,.gate-icon,.podium-medal,.login-illustration,.callout-symbol{background:#fff;color:#111;border:1px solid #d5d5d5;box-shadow:none}
.rarity-pill{color:#111;border-color:#d5d5d5}
.badge-card p,.bottom-callout p,.login-dialog>p,.gate-container p,.history-row span,.stat-line strong,.quick-stat-label,.profile-metrics span,.leader-row,.leader-row.labels,.board-note,.profile-overview h2{color:#111}
.badge-card.unowned{opacity:1}
.badge-card:hover{border-color:#111}
.progress-track{background:#fff;border:1px solid #dedede}
.progress-track>span{background:#111}
.podium-card:nth-child(2){background:#fff;border-color:#111}
.podium-card:nth-child(2) .podium-medal{background:#fff}
.leader-row.labels{background:#fff}
.leader-row.me{background:#fff;box-shadow:inset 3px 0 #111}
.profile-overview{padding:20px 26px}
.profile-identity{gap:0}
.profile-identity h2{margin:0}
.login-warning{background:#fff!important;color:#111!important;border:1px solid #111}
.modal-backdrop{background:rgba(255,255,255,.92);backdrop-filter:none}
.toast{border:1px solid #111}
.search-field input,.filter-bar select,.check-label{border-color:#d5d5d5;color:#111}
.search-field input:focus,.filter-bar select:focus{border-color:#111}
.check-label input{accent-color:#111}
.danger-text{color:#111!important}
.text-button{color:#111}
@media(max-width:780px){.date-line{padding-top:19px}}

/* Clean UI revision: no glyph icons or machine labels. */
.brand {font-size:22px;font-weight:800;letter-spacing:-.055em;line-height:1.2}
.nav-link {gap:0}
.top-login {gap:0}
.machine {padding:0 22px;margin-top:30px}
.machine-display {height:235px}
.machine.drawn .number-glow {color:#111}
.side-panel {min-height:0}
.quick-stat {padding:0 0 24px}
.quick-stat-label {display:block}
.stat-score {display:flex;align-items:baseline;gap:.18em;white-space:nowrap;margin:11px 0 0}
.stat-score strong {font-family:var(--mono),"Noto Sans KR",sans-serif;font-size:clamp(32px,3.5vw,48px);line-height:1.3;font-weight:700;letter-spacing:-.07em;margin:0}
.stat-score-unit {font-family:var(--mono),"Noto Sans KR",sans-serif!important;font-size:clamp(32px,3.5vw,48px)!important;font-weight:700!important;letter-spacing:-.07em!important}
.stats-divider {background:#e2e2e2;margin-bottom:10px}
.stat-line>div {gap:0}
.section-caption>div {padding-left:0}
.search-field input {padding-left:15px}
.badge-top {justify-content:flex-end}
.bottom-callout {gap:18px}
.bottom-callout a {margin-left:auto}
.modal-close {font-size:12px;right:15px;top:16px;padding:6px}
@media(max-width:1100px){.machine-display{height:195px}}
@media(max-width:780px){.machine-display{height:175px}.side-panel{min-height:0}.topbar{gap:0}}
@media(max-width:470px){.machine-display{height:140px}.stat-score strong,.stat-score-unit{font-size:36px!important}}


/* Number draw: vertical reels drop from top to bottom, settling left to right. */
.machine.spinning .number-glow {animation:none;opacity:1}
.number-glow.roulette-active {display:inline-flex;align-items:center;justify-content:center;letter-spacing:0;max-width:100%;vertical-align:middle}
.roulette {display:inline-flex;justify-content:center;align-items:center;height:1.08em;max-width:100%;font:inherit;letter-spacing:0;white-space:nowrap;overflow:hidden}
.roulette-digit {width:.64em;flex:0 0 auto;height:1em;overflow:hidden;position:relative;transition:width .25s ease,opacity .25s ease}
.roulette-strip {display:flex;flex-direction:column;width:100%;font:inherit;line-height:1;will-change:transform}
.roulette-glyph {display:flex;align-items:center;justify-content:center;width:100%;height:1em;flex:0 0 1em;line-height:1}
.roulette-separator {display:inline-flex;align-items:center;justify-content:center;width:.28em;flex:0 0 auto;height:1em;overflow:hidden;transition:width .25s ease,opacity .25s ease}
.roulette-leading {width:0;opacity:0}
@media(prefers-reduced-motion:reduce){.roulette-digit,.roulette-separator{transition:none}}


/* Prevent horizontal page movement when switching to the scrollable leaderboard. */
html {scrollbar-gutter:stable}
#view-leaderboard {width:100%;min-width:0}

/* Home actions belong alongside the discovery heading; no bottom callout. */
.section-caption.home-discovery-heading {align-items:center;gap:14px;flex-wrap:wrap}
.section-caption .section-links {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 22px;padding:0;margin:0 0 9px}
.section-links .inline-link {white-space:nowrap}
@media(max-width:560px){
  .section-caption.home-discovery-heading {align-items:flex-start}
  .section-caption .section-links {justify-content:flex-start;gap:10px 16px;width:100%;margin:0}
}

/* Roulette and settled number share IDENTICAL glyph widths, height, alignment. */
.number-glow.roulette-number {display:inline-flex;align-items:center;justify-content:center;letter-spacing:0;line-height:1;max-width:100%;vertical-align:middle}
.roulette-number .roulette {height:1.08em;line-height:1}
.roulette-number .roulette-digit {font-variant-numeric:tabular-nums}

/* Badge catalog: earned cards first, then monochrome unearned cards. */
.catalog-section {margin:30px 0 0}
.catalog-section+.catalog-section {margin-top:56px;padding-top:28px;border-top:1px solid #d9d9d9}
.catalog-group-title {display:flex;align-items:baseline;gap:14px;font-size:21px;letter-spacing:-.035em;margin:0 0 19px;color:#111}
.catalog-group-title span {font:500 12px var(--mono);letter-spacing:0;color:#555}
.badge-card.owned {border-color:var(--rarity-color);border-width:1px}
.badge-card.owned .rarity-pill {border:1px solid var(--rarity-color);color:var(--rarity-color)}
.badge-card.owned .badge-state {color:var(--rarity-color);font-weight:750}
.badge-card.unowned {border-color:#c8c8c8;background:#fff;color:#111;filter:grayscale(1)}
.badge-card.unowned .rarity-pill,.badge-card.unowned .badge-state {color:#666;border-color:#a9a9a9}
.badge-card.unowned .badge-state {border:0}
.badge-card.owned:hover {border-color:var(--rarity-color)}
/* Explicit four-sided border: fixes browser-native search input edges. */
.search-field input[type="search"] {appearance:none;-webkit-appearance:none;display:block;width:100%;height:45px;border:1px solid #aaa;border-radius:7px;background:#fff;color:#111;box-shadow:none;outline:none;padding:0 15px;}
.search-field input[type="search"]:focus {border:1px solid #111;outline:1px solid #111;outline-offset:0}
/* Square checkbox and its control's corners. */
.check-label {border-radius:0}
.check-label input[type="checkbox"] {appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;margin:0;border:1.5px solid #111;border-radius:0;background:#fff;position:relative;cursor:pointer}
.check-label input[type="checkbox"]:checked {background:#111}
.check-label input[type="checkbox"]:checked::after {content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Segmented leaderboard periods, monochrome so rarity colors stay in badges only. */
.leaderboard-tabs {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:1px 0 22px}
.period-tab {background:#fff;color:#111;border:1px solid #bbb;border-radius:0;padding:11px 23px;min-height:43px;font-size:12px;font-weight:700;white-space:nowrap}
.period-tab.is-active,.period-tab[aria-pressed="true"] {background:#111;color:#fff;border-color:#111}
.period-tab:hover:not(.is-active) {border-color:#111}
@media(max-width:470px){.leaderboard-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.period-tab{padding:9px 3px;font-size:11px}}

/* Leaderboard podium: rank fills available space without overflowing cards. */
.podium-card {min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:20px 12px;overflow:hidden}
.podium-rank {font-family:var(--font);font-size:clamp(25px,3.5vw,46px);font-weight:800;letter-spacing:-.055em;line-height:1.15;white-space:nowrap}
.podium-card h3 {font-size:clamp(12px,1.6vw,18px);line-height:1.4;max-width:100%;overflow-wrap:anywhere;margin:4px 0 0}
.podium-student-id {font-family:var(--mono);font-size:clamp(10px,1.1vw,13px);color:#444;overflow-wrap:anywhere}
.podium-card strong {font-size:clamp(12px,1.7vw,20px);max-width:100%;overflow-wrap:anywhere}
.leader-row {grid-template-columns:70px minmax(100px,1.3fr) minmax(65px,.8fr) minmax(85px,1fr) 90px}
.leader-student-id {font-family:var(--mono);font-size:12px;white-space:nowrap}

/* Personal ranking visibility, opt-in and reversible. */
.leaderboard-visibility {border:1px solid #d5d5d5;border-radius:14px;padding:23px 25px;margin-top:22px;background:#fff}
.leaderboard-visibility h2 {margin:0 0 16px;font-size:18px;letter-spacing:-.03em}
.visibility-choice {display:flex;gap:7px}
.visibility-btn {min-width:100px;border:1px solid #111;border-radius:0;background:#fff;color:#111;font-size:13px;font-weight:700;padding:11px 20px}
.visibility-btn.is-active {background:#111;color:#fff}
.visibility-btn:disabled {opacity:.5}
.leaderboard-visibility p {margin:15px 0 0;color:#444;font-size:12px;line-height:1.8}
.history-row {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}

@media(max-width:780px) {
  .podium-card {padding:18px 8px}
  .podium-rank {font-size:clamp(23px,5vw,36px)}
  .leader-row {grid-template-columns:48px minmax(76px,1.3fr) minmax(60px,.8fr) minmax(65px,1fr) 65px;gap:6px;padding:14px 10px;font-size:11px}
}
@media(max-width:470px) {
  .podium {gap:6px}
  .podium-card {min-height:155px;padding:14px 5px}
  .podium-rank {font-size:clamp(21px,6vw,29px)}
  .podium-card h3 {font-size:11px}
  .podium-student-id {font-size:10px}
  .podium-card strong {font-size:12px}
  .leader-row {grid-template-columns:36px minmax(65px,1.1fr) minmax(48px,.7fr) minmax(57px,1fr) 38px;gap:3px;padding:12px 7px;font-size:10px}
  .leader-student-id {font-size:10px}
  .leader-row.labels {font-size:9px}
  .leaderboard-visibility {padding:20px 15px}
  .visibility-btn {flex:1}
}

/* Override legacy 4-column mobile rule: always show the score; omit draw count only on narrow phones. */
@media(max-width:470px) {
  .leader-row {grid-template-columns:35px minmax(75px,1.1fr) minmax(56px,.8fr) minmax(65px,1fr)}
  .leader-row > :nth-child(4) {display:block}
  .leader-row > :nth-child(5) {display:none}
}


/* Recent earned badges header; catalog still shows the full collection. */
.section-caption.profile-recent-heading {align-items:center;gap:16px;flex-wrap:wrap}
.profile-recent-heading .section-links {display:flex;align-items:center;padding-left:0}
.profile-recent-heading .inline-link {margin-bottom:9px;white-space:nowrap}

/* Score tier tints only the result number and its frame; everything else stays white. */
.machine.result-colored {border-color:var(--result-color,#111)!important;transition:border-color .35s ease}
.machine.result-colored .number-glow {color:var(--result-color,#111)!important;transition:color .35s ease}
.podium-card.result-tier {border-color:var(--result-color,#111)!important}
.podium-card.result-tier .podium-rank,
.podium-card.result-tier strong {color:var(--result-color,#111)!important}
.leader-row.result-tier {border-left:3px solid var(--result-color,#111)}
.leader-row.result-tier strong {color:var(--result-color,#111)!important}
.leader-row.result-tier.me {box-shadow:none}

/* Custom, keyboard accessible leaderboard publication confirmation dialog. */
#visibilityModal {z-index:120}
.visibility-dialog {width:min(450px,100%);background:#fff;color:#111;border:1px solid #111;border-radius:14px;padding:30px 28px;box-shadow:0 14px 50px rgba(0,0,0,.10)}
.visibility-dialog h2 {margin:0 0 14px;font-size:23px;letter-spacing:-.045em}
.visibility-dialog p {font-size:13px;line-height:1.85;color:#333;margin:0 0 26px}
.visibility-dialog-actions {display:flex;justify-content:flex-end;gap:10px}
.visibility-dialog-actions button {border-radius:0;min-width:94px;padding:12px 17px;font-weight:700}
.visibility-confirm-btn {background:#111;color:#fff;border:1px solid #111}
.visibility-confirm-btn:hover {background:#333}
@media(max-width:470px){
  .visibility-dialog {padding:24px 19px}
  .visibility-dialog-actions {display:grid;grid-template-columns:1fr 1fr}
}


/* 2026-11: unified leaderboard typography and reordered columns.
   Order: rank / student ID / name (with breathing room) / score / draw count.
   The last column remains visible at every breakpoint. */
.leader-row {
  grid-template-columns:70px 112px minmax(150px,1.65fr) minmax(95px,.9fr) 102px;
  column-gap:10px;
  font-family:var(--font);
}
.leaderboard-list .leader-row > *,
.podium-card > * {
  font-family:var(--font);
}
.leader-row .leader-name {padding-left:13px;min-width:0}
.leader-row .leader-student-id {font-size:inherit;min-width:0}
.leader-row.labels {font-size:12px}
.leader-row.labels span {font-weight:700}
@media(max-width:780px) {
  .leader-row {grid-template-columns:45px 72px minmax(92px,1fr) 75px 74px;column-gap:5px;padding:13px 9px;font-size:11px}
  .leader-row.labels {font-size:11px}
  .leader-row .leader-name {padding-left:8px}
}
@media(max-width:470px) {
  .leader-row {grid-template-columns:31px 52px minmax(58px,1fr) 58px 53px;column-gap:4px;padding:12px 6px;font-size:10px}
  .leader-row.labels {font-size:10px}
  .leader-row .leader-name {padding-left:5px}
  /* Override the old narrow-screen rule that hid draw count. */
  .leader-row > :nth-child(5) {display:block}
}


/* Full draw history, kept monochrome except for the existing score-tier accents. */
.profile-history-head {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.profile-history-head .section-links {display:flex;align-items:center;gap:12px;padding:0;margin:0 0 9px}
.history-page-head {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.history-page-head .inline-link {white-space:nowrap}
.history-controls {display:flex;align-items:end;gap:13px;flex-wrap:wrap;margin:15px 0 18px}
.history-controls label {font:600 13px var(--font);display:flex;flex-direction:column;gap:8px;color:#111;min-width:180px}
.history-controls select {appearance:none;-webkit-appearance:none;background:#fff;color:#111;border:1px solid #999;border-radius:0;padding:11px 34px 11px 12px;min-height:44px;font:inherit;cursor:pointer}
.history-controls select:focus-visible {outline:2px solid #111;outline-offset:2px}
.history-count {font-size:13px;color:#555;margin:8px 0 12px}
.full-history-list {display:grid;gap:10px}
.full-history-item {border:1px solid #d4d4d4;border-left:4px solid var(--result-color,#777);border-radius:0;background:#fff;min-width:0;padding:14px 18px}
.full-history-summary {display:grid;grid-template-columns:minmax(125px,1.5fr) minmax(100px,1fr) minmax(95px,1fr) 110px;align-items:center;gap:12px;font-family:var(--font)}
.full-history-date {font-size:13px;color:#333}
.full-history-number {font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:-.025em;color:#111}
.full-history-score {font-size:17px;color:var(--result-color,#111);font-variant-numeric:tabular-nums}
.full-history-badge-count {font-size:12px;color:#555;text-align:right}
.full-history-badges {margin-top:12px;padding-top:12px;border-top:1px solid #ededed}
.full-history-badges summary {width:max-content;max-width:100%;cursor:pointer;color:#333;font-size:12px;font-weight:650;list-style-position:inside}
.full-history-badge-tags {display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.full-history-badge-tag {display:inline-block;padding:5px 8px;border:1px solid #ccc;font-size:12px;color:#111}
.history-pagination {display:flex;align-items:center;justify-content:center;gap:18px;margin:28px 0 10px}
.history-pagination button {min-width:74px;border-radius:0}
.history-pagination button:disabled {opacity:.35;cursor:not-allowed}
.history-pagination span {font-weight:650;font-variant-numeric:tabular-nums}
@media(max-width:650px) {
  .history-controls {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .history-controls label {min-width:0;font-size:12px}
  .history-controls select {width:100%;min-width:0;padding-right:6px;font-size:12px}
  .full-history-item {padding:12px 11px}
  .full-history-summary {grid-template-columns:1fr 1fr;gap:9px}
  .full-history-number {font-size:19px}
  .full-history-score {font-size:16px;text-align:right}
  .full-history-badge-count {text-align:right}
}