/* 시험 화면과 같은 팔레트 — 로그인·닉네임·랭킹 화면이 따로 놀지 않게 */
:root{
  --bg:#FFFFFF; --surf:#F0F4F9; --surf2:#E9EEF6; --card:#FFFFFF;
  --ink:#14171A; --ink2:#2F3338; --ink3:#474C52; --rule:#D5DAE0;
  --blue:#0B57D0; --blue-soft:#E8F0FE; --onblue:#FFFFFF;
  --grad:linear-gradient(90deg,#4285F4 0%,#9B72CB 45%,#D96570 100%);
  --good:#0F7A4D; --good-soft:#E6F4EC; --bad:#C5221F; --bad-soft:#FCE8E6;
  --gold:#9A6800; --gold-soft:#FEF7E0;
  --sans:'Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --mono:'Roboto Mono','D2Coding',Consolas,'Courier New',monospace;
  --r:16px; --r-lg:24px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#131314; --surf:#1E1F20; --surf2:#2C2D2F; --card:#1A1B1C;
    --ink:#E8EAED; --ink2:#C9CCCF; --ink3:#A2A9B0; --rule:#44474B;
    --blue:#A8C7FA; --blue-soft:#1E3A63; --onblue:#062E6F;
    --grad:linear-gradient(90deg,#8AB4F8 0%,#C58AF9 45%,#F2A2A2 100%);
    --good:#7BD69C; --good-soft:#1D3527; --bad:#F2B8B5; --bad-soft:#3E2422;
    --gold:#F0C36A; --gold-soft:#3A3020;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:18px;line-height:1.7;-webkit-text-size-adjust:100%;
  padding:0 16px calc(40px + env(safe-area-inset-bottom));
}
a{color:var(--blue)}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.wrap{max-width:720px;margin:0 auto}
.narrow{max-width:440px}

.mast{padding:34px 0 10px}
.mast h1{
  font-size:34px;font-weight:600;margin:0;letter-spacing:-.025em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;
}
.mast .sub{font-size:17px;color:var(--ink3);margin:4px 0 0}

.topnav{display:flex;align-items:center;gap:8px;padding:14px 0 0;flex-wrap:wrap}
.topnav .sp{flex:1}
.topnav a{font-size:16px;font-weight:500;color:var(--blue);text-decoration:none;
  border-radius:999px;padding:7px 13px;transition:.15s}
.topnav a:hover{background:var(--blue-soft)}
.topnav a.plain{color:var(--ink3)}
.topnav a.plain:hover{background:var(--surf)}

.card{background:var(--surf);border-radius:var(--r-lg);padding:22px 22px 24px;margin:22px 0}
.field{margin-bottom:18px}
.field label{display:block;font-size:16.5px;font-weight:500;margin-bottom:6px}
.field .hint{font-size:15.5px;color:var(--ink3);font-weight:450;margin:5px 0 0}
input.tin{
  width:100%;background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:14px 16px;font-family:var(--sans);font-size:20px;line-height:1.5;color:var(--ink);transition:.15s;
}
input.tin.mono{font-family:var(--mono);letter-spacing:.02em}
input.tin:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
input.tin::placeholder{color:var(--ink3);opacity:.7}

.btn{display:block;width:100%;background:var(--blue);color:var(--onblue);border-radius:999px;
  padding:16px;font-size:18px;font-weight:500;text-align:center;text-decoration:none;transition:.15s}
.btn:hover{filter:brightness(.92)}
.btn.ghost{background:var(--surf2);color:var(--ink)}

.err{background:var(--bad-soft);color:var(--bad);border-radius:14px;
  padding:12px 16px;font-size:16.5px;line-height:1.6;margin:0 0 16px}
.note{font-size:16.5px;color:var(--ink3);line-height:1.65;font-weight:450}
.eyebrow{font-size:23px;font-weight:600;margin:30px 0 12px;letter-spacing:-.015em}

/* ---------- 랭킹 ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.tabs a{border:1px solid var(--rule);background:var(--card);border-radius:999px;
  padding:9px 17px;font-size:17px;color:var(--ink2);text-decoration:none;transition:.15s}
.tabs a:hover{background:var(--surf)}
.tabs a.on{background:var(--blue-soft);border-color:var(--blue-soft);color:var(--blue);font-weight:600}

.mine{background:var(--blue-soft);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:18px}
.mine b{font-size:20px;color:var(--blue)}
.mine .row{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:10px}
.mine .row div{font-size:16.5px;color:var(--ink2)}
.mine .row span{display:block;font-family:var(--mono);font-size:21px;font-weight:600;color:var(--ink)}

.board{background:var(--surf);border-radius:var(--r);padding:2px 14px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:17px}
thead th{font-size:14.5px;font-weight:500;color:var(--ink3);text-align:right;
  padding:12px 6px;border-bottom:1px solid var(--rule);white-space:nowrap}
thead th:nth-child(1),thead th:nth-child(2){text-align:left}
tbody td{padding:13px 6px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody td.rk{width:2.6em;text-align:left;font-family:var(--mono);font-size:16px;color:var(--ink3)}
tbody td.nm{text-align:left;white-space:normal;word-break:break-all;font-weight:500}
tbody td.num{font-family:var(--mono)}
tbody td.pt{font-family:var(--mono);font-weight:600;color:var(--blue)}
tbody td.ago{font-size:15px;color:var(--ink3)}
tbody tr.me{background:var(--blue-soft)}
tbody tr.me td{border-bottom-color:transparent}
.rk.m1,.rk.m2,.rk.m3{font-weight:700;color:var(--gold)}
.empty{padding:26px 6px;text-align:center;color:var(--ink3);font-size:17px}
@media (max-width:520px){
  .hide-sm{display:none}
  table{font-size:16px}
  tbody td{padding:11px 4px}
}
footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:16px;color:var(--ink3);line-height:1.75;font-weight:450}
footer b{font-weight:600;color:var(--ink2)}