:root{--bg:#ffffff;--sf:#fff;--ink:#14231b;--mu:#5b6b61;--ln:#d5ded6;--ct:#1f5d46;--cs:#e1eee6;--bl:#d9e84a;--bi:#2b3300;--wn:#b3412d;--ws:#f8e4df;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1a14;--sf:#16241c;--ink:#e8efe9;--mu:#9db0a3;--ln:#2a3d32;--ct:#7cc9a1;--cs:#1b3328;--wn:#f08a74;--ws:#3a1f1a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f1a14;--sf:#16241c;--ink:#e8efe9;--mu:#9db0a3;--ln:#2a3d32;--ct:#7cc9a1;--cs:#1b3328;--wn:#f08a74;--ws:#3a1f1a;color-scheme:dark}
/* 탭에 따라 화면 색상 전환: 단식=흰색, 복식=연한 초록 */
:root[data-view="s"]{--bg:#ffffff;--sf:#ffffff;--ink:#14231b;--mu:#5b6b61;--ln:#d5ded6;--ct:#1f5d46;--cs:#e1eee6;--bl:#d9e84a;--bi:#2b3300;--wn:#b3412d;--ws:#f8e4df;color-scheme:light}
:root[data-view="d"]{--bg:#e9f3ec;--sf:#f6faf7;--ink:#14231b;--mu:#4d6455;--ln:#c9dccf;--ct:#1f5d46;--cs:#d6e9dc;--bl:#d9e84a;--bi:#2b3300;--wn:#b3412d;--ws:#f5e1dc;color-scheme:light}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);transition:background-color .35s,color .35s;font-family:'Noto Sans KR',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;line-height:1.6;word-break:keep-all}
:focus-visible{outline:3px solid var(--ct);outline-offset:2px;border-radius:4px}
.wrap{max-width:760px;margin:0 auto;padding:20px 20px 120px}
.club{font-size:14px;font-weight:700;color:var(--ct)}
h1{font-size:clamp(30px,7vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1.15;margin:4px 0 16px}
h2{font-size:18px;margin:30px 0 10px}
select,input{font:inherit;color:var(--ink);background:var(--sf);border:1px solid var(--ln);border-radius:10px;padding:10px 12px;min-height:44px;max-width:100%}
.me-bar{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mu);margin-bottom:14px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--ln);margin-bottom:18px}
.tabs button{font:inherit;font-weight:700;background:none;border:0;color:var(--mu);padding:10px 16px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--ink);border-color:var(--bl)}
[hidden]{display:none!important}
.sub-seg{display:inline-flex;border:1px solid var(--ln);border-radius:10px;overflow:hidden;margin-bottom:12px}
.sub-seg button{font:inherit;font-size:14px;background:var(--sf);color:var(--mu);border:0;padding:8px 16px;cursor:pointer}
.sub-seg button[aria-pressed=true]{background:var(--ct);color:var(--bg);font-weight:700}
.list{background:var(--sf);border:1px solid var(--ln);border-radius:14px;overflow:hidden}
.r{display:grid;grid-template-columns:40px 1fr auto auto;gap:10px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--ln)}
.r:last-child{border-bottom:0}
.r .n{font-weight:900;font-size:18px;text-align:center;font-variant-numeric:tabular-nums}
.r:nth-child(-n+3) .n{color:var(--ct)}
.r .nm{font-weight:700}.r .s{font-size:13px;color:var(--mu);display:block;font-weight:400}
.pt{font-weight:900;font-variant-numeric:tabular-nums}
.r.me{background:color-mix(in srgb,var(--bl) 22%,transparent)}
.chip{font-size:12px;font-weight:700;border-radius:99px;padding:2px 10px;white-space:nowrap}
.chip.ok{background:var(--cs);color:var(--ct)}.chip.me{background:var(--bl);color:var(--bi)}.chip.no{background:var(--ln);color:var(--mu)}
.hint{font-size:13px;color:var(--mu);margin:10px 2px 0}
.log{list-style:none;margin:0;padding:0}
.log li{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:10px 14px;margin-bottom:8px;display:flex;justify-content:space-between;gap:10px;font-size:15px}
.log .d{color:var(--mu);font-size:13px;white-space:nowrap}.log .sc{font-weight:900}
.card{background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:16px;font-size:14.5px}
.rules{padding-left:20px;margin:0}.rules li{margin-bottom:10px}.rules ul{margin:6px 0 0;padding-left:18px;color:var(--mu)}
.btn{font:inherit;font-weight:700;background:var(--bl);color:var(--bi);border:0;border-radius:10px;padding:12px 16px;cursor:pointer;min-height:48px}
.btn.sec{background:var(--sf);color:var(--ink);border:1px solid var(--ln)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));border-radius:99px;padding:14px 22px;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:5}
.reset{font:inherit;font-size:13px;color:var(--mu);background:none;border:0;text-decoration:underline;cursor:pointer;margin-top:26px;padding:8px 0}
.regs{display:grid;gap:4px;font-size:14px;border-top:1px dashed var(--ln);padding-top:10px}
.regs .btn{justify-self:start;margin-top:6px}
.tagrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tag{font-size:clamp(17px,4.5vw,22px);font-weight:700;margin:0;max-width:24ch;line-height:1.4}
.rulelink{font:inherit;font-size:13px;font-weight:700;color:var(--wn);background:none;border:0;cursor:pointer;padding:10px 0 10px 8px;min-height:44px;white-space:nowrap}
.stats{display:flex;gap:28px;margin:4px 0 20px}
.stats b{display:block;font-size:clamp(30px,8vw,40px);font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.stats span{font-size:13px;color:var(--mu)}
.sec{margin:26px 0 0}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.05em;color:var(--wn);text-transform:uppercase}
.sechd{display:flex;justify-content:space-between;align-items:flex-end;margin:2px 0 14px}
.sechd h2{margin:0;font-size:22px;font-weight:500}
.sechd small{color:var(--mu);font-size:13px;font-weight:700}
.top3{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:12px;align-items:end;border-bottom:1px solid var(--ln);padding-bottom:22px}
.pod{text-align:center;padding:12px 6px 14px;border-bottom:4px solid var(--c)}
.pod.g1{--c:#d4a437;padding-top:26px}.pod.g2{--c:#7b8aa3}.pod.g3{--c:#b0733f}
.pod .no{font-size:32px;font-weight:900;line-height:1.1;color:var(--c)}
.pod b{display:block;font-size:17px;margin-top:2px}.pod span{font-size:13px;color:var(--mu)}
.rec{border-top:1px solid var(--ln);margin-bottom:28px}
.rec>div{display:grid;grid-template-columns:84px 1fr auto;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid var(--ln)}
.rec small{color:var(--mu);font-size:13px;font-weight:700}.rec b{font-size:17px}.rec em{font-style:normal;font-weight:900;font-size:17px}
.rtitle{font-size:clamp(32px,8vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1.15;margin:6px 0 14px}
.rdesc{color:var(--mu);max-width:46ch;margin:0 0 28px}
.rsec{border-top:1px solid var(--ln);padding-top:28px;margin-bottom:12px}
.rsec h3{font-size:22px;margin:0 0 14px}
.rl{list-style:none;padding:0;margin:0;border-top:1px solid var(--ln)}
.rl li{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:20px 0;border-bottom:1px solid var(--ln)}
.rn{color:var(--wn);font-weight:900;font-size:14px;padding-top:3px}
.rl b{font-size:17px}.rl p{margin:4px 0 0;color:var(--mu);font-size:15px}
.toprow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
@media(prefers-reduced-motion:reduce){body{transition:none}}
.rr{display:grid;grid-template-columns:64px 1fr 72px 76px 134px;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ln)}
.rr:last-child{border-bottom:0}
.rr.me{background:color-mix(in srgb,var(--bl) 22%,transparent)}
.rr.rh{font-size:13px;font-weight:700;color:var(--mu);padding-top:10px;padding-bottom:10px}
.rr.rh div:nth-child(n+3){text-align:right}
.rr .n{font-weight:900;font-size:18px;display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.mv{font-size:12px;font-weight:900}.mv.up{color:#2f7d4f}.mv.dn{color:#d6334f}
.rr .nm{font-weight:700}.rr .s{font-size:13px;color:var(--mu);display:block;font-weight:400}
.rr .pt{text-align:right}
.rc{text-align:right}.rc b{display:block;font-size:15px}.rc span{font-size:13px;color:var(--mu)}
.ci{display:flex;gap:6px;justify-content:flex-end}
.dot{width:22px;height:22px;border-radius:50%;background:var(--ln);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;color:#fff}
.dot.w{background:#2f7d4f}.dot.l{background:#d6334f}
@media(max-width:560px){.rr{grid-template-columns:56px 1fr auto auto;row-gap:8px}.rr.rh{display:none}.rr .ci{grid-column:2/5;justify-content:flex-start}}
.brand{display:flex;align-items:center;gap:14px;margin:4px 0 16px;font-size:clamp(30px,7vw,44px)}
.brand h1{margin:0;font-size:1em;font-weight:700;text-align:center}
.logo{width:2.3em;height:2.3em;flex:none}
/* dialog */
dialog{border:0;border-radius:20px 20px 0 0;padding:0;background:var(--bg);color:var(--ink);width:min(560px,100%);max-height:92vh;margin:auto auto 0;overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.5)}
@media(min-width:600px){dialog{border-radius:20px;margin:auto}}
.dh{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0}
.dh b{font-size:18px}.x{font:inherit;font-size:24px;line-height:1;background:none;border:0;color:var(--mu);cursor:pointer;min-width:44px;min-height:44px}
.dform{padding:16px 20px 24px;display:grid;gap:16px}
.lab{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.dform select,.dform input[type=date]{width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode{display:flex;gap:8px;padding:12px 20px 0}
.mode button{flex:1;font:inherit;font-weight:700;border:1px solid var(--ln);background:var(--sf);color:var(--mu);border-radius:10px;padding:10px;cursor:pointer;min-height:44px}
.mode button[aria-selected=true]{background:var(--ct);color:var(--bg);border-color:var(--ct)}
.pads{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pads button{font:inherit;font-weight:900;font-size:18px;border:1px solid var(--ln);background:var(--sf);color:var(--ink);border-radius:12px;padding:12px 0;cursor:pointer;min-height:52px;font-variant-numeric:tabular-nums}
.pads button[aria-pressed=true]{background:var(--bl);color:var(--bi);border-color:var(--bl)}
.msg{border-radius:10px;padding:12px 14px;font-size:14.5px;background:var(--cs)}
.msg.err{background:var(--ws);color:var(--wn)}.msg.warn{background:var(--ws);color:var(--wn)}
.vs{font-weight:700;font-size:15px}
.pv{display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.pv span b{font-variant-numeric:tabular-nums}
.badge{display:inline-block;font-size:13px;font-weight:700;background:var(--bl);color:var(--bi);border-radius:8px;padding:3px 10px;margin-top:6px}
/* result */
.res{padding:28px 24px 24px;text-align:center;position:relative;overflow:hidden}
.res h3{margin:6px 0 16px;font-size:20px}
.res ul{list-style:none;padding:0;margin:0 0 20px;text-align:left;display:grid;gap:10px}
.res li{background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:10px 14px;font-size:14.5px}
.res .big{font-size:44px;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.cf{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:fall 1.8s ease-in forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(420px) rotate(540deg);opacity:0}}
@keyframes pop{from{transform:scale(.3)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.cf{display:none}.res .big{animation:none}}
@media(max-width:520px){.two{grid-template-columns:1fr}.r{grid-template-columns:34px 1fr auto}.r .chip{grid-column:2/4;justify-self:start}}
/* 참고 사이트(스크린샷 실측) 비율에 맞춘 모바일 타이포 */
body{font-size:14px;letter-spacing:-.02em}
.wrap{padding:16px 30px 120px}
.club{font-size:11px;font-weight:700;color:var(--mu);border:1px solid var(--ln);border-radius:99px;padding:4px 12px;background:var(--sf)}
.toprow{margin-bottom:14px}
.brand{font-size:22px;gap:12px;margin:0 0 18px}
.brand h1{font-size:1em;line-height:1.27;letter-spacing:-.03em}
.logo{width:2.2em;height:2.2em}
.tag{font-size:13px;font-weight:700;max-width:none;line-height:1.45}
.rulelink{font-size:12px}
.hint{font-size:11px}
#subline{font-size:10.5px;font-weight:500}
.stats{gap:14px;margin:10px 0 24px}
.stats b{font-size:28px}
.stats span{font-size:10.5px;font-weight:500}
.me-bar{font-size:12px}
#me{font-size:13px;min-height:36px;padding:6px 10px}
.tabs button{font-size:14px;padding:10px 14px}
.sec{margin:26px -16px 0;padding:26px 16px 0;border-top:1px solid var(--ln)}
.eyebrow{font-size:10.5px;letter-spacing:.02em}
.sechd{margin:3px 0 16px}
.sechd h2{font-size:16px;font-weight:400;letter-spacing:-.03em}
#p-s .sechd h2,#p-d .sechd h2{font-size:18px}
.sechd small,#toLog{font-size:10.5px;font-weight:500}
.top3{gap:0;border-bottom:0;padding-bottom:0}
.pod{border-bottom:0;padding:16px 0 0}
.pod::after{content:"";display:block;height:3px;background:var(--c);margin:10px 14px 0}
.pod+.pod{border-left:1px solid var(--ln)}
.pod.g1{padding-top:8px}
.pod .no{font-size:21px}.pod.g1 .no{font-size:29px}
.pod b{font-size:12px;margin-top:6px}
.pod span{font-size:10.5px;display:block;margin-top:5px}
.rec{margin-bottom:8px}
.rec>div{grid-template-columns:78px 1fr auto;padding:14px 0}
.rec small{font-size:10px}.rec b,.rec em{font-size:12px}
.list{margin:0 -16px;border:0;border-radius:0;background:transparent}
.rr{padding:7px 14px 6px 11px}
.rr .n{font-size:15px;align-self:center}
.rr .nm{font-size:13px}.rr .s{font-size:10px;font-weight:500}
.spt{display:none;color:var(--ink);font-weight:700}
.mv{font-size:11px}
.rc b{font-size:12px}.rc span{font-size:10px}
.ci{gap:5px}.dot{width:18px;height:18px;font-size:10px}
.rr .chip{font-size:10px;padding:1px 7px;margin-left:4px}
.rr.rh{font-size:11px}
.r{padding:10px 14px 10px 11px}.r .n{font-size:15px}.r .nm{font-size:13px}.r .s{font-size:10px}
.log li{font-size:12px;padding:9px 12px}.log .d{font-size:11px}
h2{font-size:16px}
.btn{font-size:14px}.fab{font-size:14px;padding:12px 18px}
@media(max-width:560px){
 .rr{grid-template-columns:48px 1fr auto;column-gap:10px;row-gap:3px}
 .rr.rh{display:none}
 .rr .n{grid-row:1/3}
 .rr .nm{grid-row:1/3;grid-column:2}
 .rr .pt{display:none}
 .rr .spt{display:inline}
 .rr .rc{grid-column:3;grid-row:1;align-self:end}
 .rr .ci{grid-column:3;grid-row:2;justify-content:flex-end}
}

/* --- API 연동 추가 UI --- */
.auth{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.auth .who{font-weight:700;color:var(--ink)}
.auth .btn{min-height:36px;padding:6px 12px;font-size:12px}
.pend li{align-items:center;flex-wrap:wrap}
.pend .acts{display:flex;gap:6px}
.pend .btn{min-height:34px;padding:4px 12px;font-size:12px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13px;z-index:20;max-width:90vw}
.banner{background:var(--cs);color:var(--ct);border-radius:12px;padding:10px 14px;font-size:13px;font-weight:700;margin:0 0 14px}
#seasonSel{min-height:36px;padding:4px 10px;font-size:12px;font-weight:700}
.delta{font-weight:900;margin-left:6px}
#rankHead{margin-bottom:8px}
.exam-form{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:8px;align-items:center}
.exam-form input{min-width:0}
@media(max-width:560px){.exam-form{grid-template-columns:1fr}}
.lform input{width:100%}

.ptbl-wrap{overflow-x:auto;margin:0 -16px}
.ptbl{border-collapse:collapse;width:100%;font-size:12px;min-width:680px}
.ptbl th,.ptbl td{border-bottom:1px solid var(--ln);padding:6px 4px;text-align:left;white-space:nowrap}
.ptbl th{color:var(--mu);font-weight:700}
.ptbl input{min-height:32px;padding:4px 6px;font-size:12px}
.ptbl input[type=checkbox]{min-height:auto}
.ptbl .btn{min-height:32px;padding:4px 10px;font-size:12px}
.ptbl tr.off td{color:var(--mu)}