:root { --ink:#17211b; --muted:#69736d; --paper:#f5f7f5; --card:#fff; --green:#0b6b47; --lime:#d9ff62; --line:#dce3de; }
* { box-sizing:border-box; }
html { overflow-x:hidden; }
body { min-width:280px; margin:0; color:var(--ink); background:var(--paper); font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif; line-height:1.5; overflow-x:hidden; }
button,select,input { font:inherit; }
.shell { position:relative; width:min(1080px, calc(100% - 32px)); margin:auto; padding:clamp(32px, 6.5vw, 72px) 0 32px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px; }
.top-nav { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; min-width:0; margin-bottom:4px; }
.brand { color:var(--green); font-size:1.35rem; font-weight:800; line-height:1.25; text-decoration:none; }
.auth-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 12px; min-width:0; } .username { max-width:16rem; overflow:hidden; color:var(--muted); font-size:.82rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.nav-link { padding:9px 14px; border:1px solid var(--green); border-radius:999px; color:var(--green); background:transparent; font-family:inherit; font-size:.78rem; font-weight:700; text-decoration:none; cursor:pointer; }
.hero { padding:24px 36px 24px 4px; grid-row:span 2; }
.eyebrow,.step { color:var(--green); font-size:.72rem; font-weight:800; letter-spacing:.16em; }
h1 { margin:18px 0; font-size:clamp(2.6rem, 6vw, 5.8rem); font-weight:750; line-height:1.25; letter-spacing:-.045em; overflow-wrap:break-word; word-break:keep-all; }
h1 span { color:var(--green); } .intro { max-width:390px; color:var(--muted); line-height:1.8; }
.panel { min-width:0; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px; box-shadow:0 12px 40px rgba(36,55,44,.06); }
.section-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-bottom:22px; }
.section-heading>div { display:flex; align-items:center; gap:12px; } .step { margin:0; } h2 { margin:0; font-size:1.15rem; }
h2 { line-height:1.3; word-break:keep-all; }
.status { color:var(--muted); font-size:.75rem; } .status::before { content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#dba52e; }
.status.online::before { background:#2ead70; } .status.offline::before { background:#d7594e; }
fieldset { margin:0 0 20px; padding:0; border:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } fieldset legend { display:none; }
label.option { position:relative; display:block; overflow:hidden; cursor:pointer; }
.option input[type="radio"],.option input { appearance:none; -webkit-appearance:none; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0, 0, 0, 0); position:absolute; pointer-events:none; border:0; opacity:0; }
.option span { display:block; min-height:82px; padding:16px; border:1px solid var(--line); border-radius:14px; transition:.2s; }
.option small,.option strong { display:block; } .option small { color:var(--muted); margin-top:7px; line-height:1.4; } .option input:checked+span { border-color:var(--green); background:#eff8f2; box-shadow:inset 0 0 0 1px var(--green); }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:end; margin:12px 0; } label { min-width:0; color:var(--muted); font-size:.8rem; font-weight:650; }
select,input[type=number] { width:100%; margin-top:7px; padding:12px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); }
.toggle { display:flex; gap:9px; align-items:center; height:43px; } .toggle input { accent-color:var(--green); }
.generate { width:100%; min-width:0; margin-top:10px; padding:15px 18px; border:0; border-radius:12px; color:white; background:var(--green); font-size:.95rem; font-weight:750; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.generate:hover { background:#09563a; } .generate:disabled { opacity:.65; cursor:wait; }
.results { min-height:280px; } .text-button { border:0; background:none; color:var(--green); font-weight:750; cursor:pointer; } .text-button:disabled { color:#a5aca8; }
.empty { padding:34px 0; text-align:center; color:var(--muted); } .clover { width:48px; height:48px; margin:auto; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:var(--green); font-size:1.5rem; }
.games { display:grid; gap:12px; } .game { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:14px 0; border-top:1px solid var(--line); }
.balls { display:flex; flex:1 1 270px; flex-wrap:wrap; gap:7px; min-width:0; } .ball { flex:0 0 38px; width:38px; height:38px; border:1px solid rgba(0,0,0,.08); border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.86rem; line-height:1; text-shadow:0 1px 1px rgba(0,0,0,.32); box-shadow:inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.2), 0 3px 7px rgba(23,33,27,.2); }
.ball-1to10 { color:#473400; background:linear-gradient(145deg,#ffe873,#e7ad18); text-shadow:0 1px 1px rgba(255,255,255,.65); }
.ball-11to20 { background:linear-gradient(145deg,#78c9f5,#2186c4); }
.ball-21to30 { background:linear-gradient(145deg,#ff8b7d,#dc4d43); }
.ball-31to40 { background:linear-gradient(145deg,#b8bec3,#747d84); }
.ball-41to45 { background:linear-gradient(145deg,#7dcc98,#32935a); }
.game-meta { flex:0 0 auto; color:var(--muted); font-size:.73rem; white-space:nowrap; }
.message { margin:12px 0 0; color:#bd4339; font-size:.82rem; } .stats { grid-column:1/-1; }
.stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .stat-grid div { min-width:0; display:flex; flex-direction:column; gap:6px; padding:10px 18px; border-left:1px solid var(--line); } .stat-grid div:first-child { border:0; } .stat-grid strong { color:var(--green); font-size:2.2rem; font-weight:750; line-height:1.25; overflow-wrap:anywhere; } .stat-grid span { color:var(--muted); font-size:.75rem; }
footer { grid-column:1/-1; padding:10px; text-align:center; color:var(--muted); font-size:.72rem; }
.auth-shell { position:relative; width:min(920px, calc(100% - 32px)); min-height:100vh; min-height:100svh; margin:auto; padding:32px 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,430px); gap:clamp(28px,6vw,60px); align-items:center; }
.auth-intro { min-width:0; }
.auth-intro h1 { font-size:clamp(3.5rem, 7vw, 6rem); } .auth-intro .brand { display:inline-block; margin-bottom:70px; }
.auth-panel { padding:36px; } .auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:32px; padding:5px; background:var(--paper); border-radius:12px; }
.auth-tab { padding:10px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-weight:750; cursor:pointer; } .auth-tab.active { color:var(--green); background:white; box-shadow:0 2px 12px rgba(36,55,44,.08); }
.auth-description { margin:8px 0 25px; color:var(--muted); font-size:.85rem; } .auth-panel form { display:grid; gap:16px; }
.auth-panel input { width:100%; margin-top:7px; padding:13px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:white; }
.auth-panel input:focus { outline:2px solid #b9dbc9; border-color:var(--green); } .back-link { display:block; margin-top:28px; color:var(--muted); font-size:.78rem; text-align:center; text-decoration:none; }
@media (max-width:800px) { .shell { grid-template-columns:minmax(0,1fr); padding-top:28px; } .hero { grid-row:auto; padding:16px 4px; } .stats,footer { grid-column:auto; } }
@media (max-width:800px) { .auth-shell { grid-template-columns:minmax(0,1fr); gap:22px; } .auth-intro .brand { margin-bottom:25px; } .auth-intro h1 { margin:12px 0; } }
@media (max-width:520px) { .shell,.auth-shell { width:calc(100% - 20px); } .panel { padding:20px; border-radius:17px; } fieldset,.form-row { grid-template-columns:minmax(0,1fr); } .option span { min-height:0; } .game { align-items:flex-start; flex-direction:column; } .balls { flex-basis:auto; } .ball { flex-basis:34px; width:34px; height:34px; } .stat-grid { grid-template-columns:1fr; } .stat-grid div { padding:12px 4px; border-top:1px solid var(--line); border-left:0; } .stat-grid div:first-child { border-top:0; } .auth-panel { padding:24px 20px; } }
@media (max-width:360px) { .top-nav { align-items:flex-start; flex-direction:column; } .auth-nav { justify-content:flex-start; width:100%; } h1,.auth-intro h1 { font-size:2.35rem; } }
.site-links,.preset-actions { display:flex; flex-wrap:wrap; gap:8px; }
.tab.active { color:white; background:var(--green); }
.latest-banner { grid-column:1/-1; padding:16px 24px; color:var(--green); font-weight:750; }
.secondary-button,.preset-actions button { margin-top:14px; padding:10px 14px; border:1px solid var(--green); border-radius:10px; color:var(--green); background:white; font-weight:700; cursor:pointer; }
.secondary-button:disabled { opacity:.4; }
.pension-group { color:#764ba2; font-size:1.1rem; }
.pension-ball { background:#764ba2; box-shadow:none; text-shadow:none; }
.p0{background:#ef6c57}.p1{background:#e89f31}.p2{background:#dbbd35}.p3{background:#4eaa77}.p4{background:#458dcc}.p5{background:#7959a7}
.single-shell { width:min(960px,calc(100% - 32px)); margin:auto; padding:40px 0; }
.single-shell .top-nav { margin-bottom:24px; }.page-title{font-size:clamp(2rem,5vw,3.5rem);margin:8px 0}.help{color:var(--muted)}
.weight-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(95px,1fr)); gap:9px; margin:24px 0; }.weight-cell{padding:9px;border:1px solid var(--line);border-radius:12px;text-align:center}.weight-cell input{width:100%}.number-state{width:34px;height:34px;border:0;border-radius:50%;font-weight:800}.weight-cell[data-status="fixed"]{background:#e4f5e9}.weight-cell[data-status="excluded"]{background:#fde9e7}.weight-cell[data-status="excluded"] .number-state{text-decoration:line-through;color:#b42c24}
.history-list{display:grid;gap:12px}.history-card{padding:18px;border:1px solid var(--line);border-radius:14px;display:grid;gap:12px}.history-card>div:first-child{display:flex;justify-content:space-between}.rank{color:var(--green);font-weight:800}

/* Compact dashboard */
.dashboard-shell { width:min(1200px,calc(100% - 24px)); min-height:100vh; padding:12px 0 8px; display:block; }
.dashboard-shell .top-nav { min-height:38px; margin:0 0 8px; flex-wrap:nowrap; gap:10px; }
.dashboard-shell .site-links { justify-content:center; flex-wrap:nowrap; }
.dashboard-shell .nav-link { padding:6px 9px; font-size:.7rem; white-space:nowrap; }
.dashboard-header { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:4px 2px 7px; }
.dashboard-header .eyebrow { margin:0 0 2px; }
.dashboard-header h1 { margin:0; font-size:clamp(1.35rem,2.2vw,2rem); line-height:1.2; letter-spacing:-.025em; }
.dashboard-header .intro { margin:0; max-width:none; font-size:.78rem; line-height:1.4; }
.dashboard-shell .latest-banner { min-height:38px; margin-bottom:8px; padding:8px 14px; border:1px solid #cfe0d5; border-radius:12px; background:#edf7f0; font-size:.82rem; }
.dashboard-grid { display:grid; grid-template-columns:minmax(330px,.8fr) minmax(470px,1.2fr); gap:10px; }
.dashboard-grid .panel { padding:15px 18px; border-radius:16px; box-shadow:0 6px 20px rgba(36,55,44,.05); }
.dashboard-grid .section-heading { margin-bottom:10px; }
.dashboard-grid fieldset { margin-bottom:8px; }
.dashboard-grid .option span { min-height:58px; padding:9px 11px; }
.dashboard-grid .option small { margin-top:2px; font-size:.7rem; }
.dashboard-grid .form-row { margin:7px 0; gap:9px; }
.dashboard-grid select,.dashboard-grid input[type=number] { margin-top:3px; padding:7px 9px; }
.dashboard-grid .toggle { height:33px; }
.dashboard-grid .generate { margin-top:7px; padding:10px 13px; }
.dashboard-grid .results { min-height:0; }
.dashboard-grid .empty { padding:36px 0 25px; }
.dashboard-grid .games { gap:0; max-height:300px; overflow:auto; }
.dashboard-grid .game { min-height:50px; padding:7px 0; gap:8px; }
.dashboard-grid .balls { flex-basis:250px; gap:5px; }
.dashboard-grid .ball { flex-basis:32px; width:32px; height:32px; font-size:.76rem; }
.result-actions { display:flex; justify-content:flex-end; }
.dashboard-grid .secondary-button { margin-top:8px; padding:7px 11px; }
.dashboard-grid .message { min-height:1.2em; margin:4px 0; }
.dashboard-grid .stat-grid { margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.dashboard-grid .stat-grid div { padding:4px 10px; }
.dashboard-grid .stat-grid strong { font-size:1.25rem; }
.dashboard-grid .stat-grid span { font-size:.68rem; }
.compact-help { margin:0 0 22px; }
.dashboard-shell footer { padding:6px; }

/* Shared navigation and secondary pages */
.nav-link.active { color:white; background:var(--green); }
.single-shell { width:min(1120px,calc(100% - 24px)); padding:18px 0 32px; }
.single-shell .top-nav { margin-bottom:18px; }
.page-header { margin:18px 2px; }
.page-header .page-title { margin:2px 0; }
.page-header .help { margin:0; }
.draws-shell { width:min(1160px,calc(100% - 24px)); }
.draws-panel,.frequency-panel { margin-bottom:14px; padding:20px; }
.draw-toolbar { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.draw-tabs { display:flex; gap:6px; padding:4px; border-radius:12px; background:var(--paper); }
.draw-tab,.draw-search button { padding:8px 12px; border:1px solid var(--line); border-radius:9px; color:var(--green); background:white; font-weight:750; cursor:pointer; }
.draw-tab.active { color:white; border-color:var(--green); background:var(--green); }
.draw-search { display:flex; align-items:end; gap:6px; }
.draw-search label { display:flex; flex-direction:column; }
.draw-search input { width:150px; margin-top:3px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; }
.draw-list { max-height:470px; overflow:auto; }
.draw-row { display:grid; grid-template-columns:120px minmax(360px,1fr) 110px; align-items:center; gap:14px; padding:12px 4px; border-top:1px solid var(--line); }
.draw-summary { display:flex; flex-direction:column; }
.draw-summary time,.draw-label { color:var(--muted); font-size:.74rem; }
.draw-row .balls { flex-basis:auto; }
.plus { align-self:center; color:var(--muted); font-weight:800; }
.bonus-ball { background:linear-gradient(145deg,#a78ad0,#684594); }
.pension-number { display:flex; align-items:center; gap:7px; }
.pension-number>strong { min-width:36px; color:#684594; }
.frequency-grid { display:grid; grid-template-columns:repeat(15,minmax(42px,1fr)); gap:8px; }
.frequency-cell { min-width:0; display:grid; justify-items:center; grid-template-rows:28px 64px 18px; gap:5px; }
.frequency-number { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:white; font-size:.72rem; font-weight:800; }
.frequency-track { position:relative; width:9px; height:64px; overflow:hidden; border-radius:8px; background:#edf0ee; }
.frequency-track i { position:absolute; right:0; bottom:0; left:0; border-radius:8px; background:var(--green); }
.frequency-cell strong { color:var(--muted); font-size:.66rem; }
.login-shell { width:min(1120px,calc(100% - 24px)); margin:auto; padding:18px 0; }
.login-shell>.top-nav { margin-bottom:12px; }
.login-shell .auth-shell { width:min(920px,100%); min-height:calc(100vh - 100px); padding:10px 0; }

@media (max-width:760px) {
  .dashboard-shell .top-nav { flex-wrap:wrap; }
  .dashboard-shell .site-links { order:3; width:100%; justify-content:flex-start; overflow-x:auto; }
  .dashboard-grid { grid-template-columns:minmax(0,1fr); }
  .dashboard-header { align-items:flex-start; flex-direction:column; gap:2px; }
  .dashboard-grid .games { max-height:none; }
  .draw-toolbar { align-items:stretch; flex-direction:column; }
  .draw-row { grid-template-columns:90px minmax(0,1fr); }
  .draw-label { grid-column:2; }
  .frequency-grid { grid-template-columns:repeat(9,minmax(34px,1fr)); }
}
@media (max-width:600px) {
  .single-shell .top-nav { align-items:flex-start; }
  .single-shell .site-links { order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; }
  .nav-link { white-space:nowrap; }
  .draw-search { align-items:stretch; flex-wrap:wrap; }
  .draw-search label { width:100%; }
  .draw-search input { width:100%; }
  .draw-row { grid-template-columns:1fr; }
  .draw-label { grid-column:auto; }
  .frequency-grid { grid-template-columns:repeat(5,minmax(36px,1fr)); }
}