/* 오볼치 — 볼링 테마 디자인. PC(상단 메뉴) · 폰(하단 탭) 둘 다. */
:root{
  --navy:#0B1F3A;--navy2:#123C8C;--blue:#2457F5;--blue-dark:#1B3FC7;--cyan:#22D3EE;--gold:#F59E0B;
  --bg:#F3F5F9;--card:#FFFFFF;--text:#0F172A;--muted:#64748B;--line:#E4E8F0;--soft:#EDF2FF;
  --red:#DC2626;--red-soft:#FEE2E2;--green:#15803D;--green-soft:#DCFCE7;--amber:#B45309;--amber-soft:#FEF3C7;
  --hot:#DC2626;--up:#2457F5;--radius:16px;--shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -18px rgba(15,23,42,.25);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font);font-variant-numeric:tabular-nums;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
body.noscroll{overflow:hidden}
a{color:var(--blue);text-decoration:none}
h1{font-size:24px;margin:0 0 10px;letter-spacing:-.3px}h2{font-size:17px;margin:0 0 12px;letter-spacing:-.2px}h3{font-size:15px;margin:14px 0 6px}
.muted{color:var(--muted)}.small{font-size:13px}.big{font-size:24px;font-weight:800;margin:4px 0;letter-spacing:-.4px}.b{font-weight:700}
.warn{color:var(--red);font-weight:600}.up{color:var(--up);font-weight:600}.down{color:var(--red);font-weight:600}.hot{color:var(--hot)}

/* ── 상단 바 */
header.top{position:sticky;top:0;z-index:30;color:#fff;background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 100%);box-shadow:0 2px 12px rgba(11,31,58,.25)}
header.top::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px);opacity:.7}
header.top .topin{position:relative;max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:8px;height:58px;padding:0 14px;padding-top:env(safe-area-inset-top)}
.brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:19px;letter-spacing:-.3px}.brand .logo{width:30px;height:30px}
.back{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;margin:0;padding:0 0 3px;flex:none}
.topnav{display:none;margin-left:12px;gap:2px}
.topnav a{color:rgba(255,255,255,.82);padding:8px 13px;border-radius:10px;font-weight:600;font-size:14.5px;white-space:nowrap}
.topnav a:hover{background:rgba(255,255,255,.1);color:#fff}.topnav a.on{background:rgba(255,255,255,.16);color:#fff}
.topnav a.staffl{margin-left:6px;background:rgba(245,158,11,.18);color:#FCD34D}.topnav a.staffl.on{background:var(--gold);color:var(--navy)}
.who{margin-left:auto;display:flex;align-items:center}
.userchip{color:#fff;font-size:13px;background:rgba(255,255,255,.12);padding:6px 12px;border-radius:999px;white-space:nowrap}.userchip span{opacity:.75;margin-left:2px}
.adminbar{background:rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.08)}
.adminbar .topin{height:auto;padding:6px 10px;gap:0;overflow-x:auto;scrollbar-width:none}.adminbar .topin::-webkit-scrollbar{display:none}
.adminbar a{color:rgba(255,255,255,.8);font-size:13px;padding:6px 10px;border-radius:8px;white-space:nowrap}.adminbar a.on{background:var(--gold);color:var(--navy);font-weight:700}
body.staff header.top{background:linear-gradient(120deg,#0A1730,#0B1F3A)}

/* ── 알림 */
#flash{position:fixed;top:calc(64px + env(safe-area-inset-top));left:0;right:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.flash{max-width:560px;width:calc(100% - 28px);padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:var(--shadow);transition:opacity .5s,transform .5s}
.flash.ok{background:#0F172A;color:#fff}.flash.err{background:var(--red);color:#fff}.flash.gone{opacity:0;transform:translateY(-8px)}

/* ── 본문 */
main{max-width:760px;margin:0 auto;padding:14px}main.wide{max-width:1180px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.card.narrow{max-width:420px;margin:28px auto}.card.issued{border-color:var(--blue);background:var(--soft)}
.card>h2:first-child,.card>h1:first-child{margin-top:-2px}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
.hero{background:linear-gradient(135deg,var(--navy) 0%,#163B8F 60%,#2457F5 100%);color:#fff;border:none;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.22),rgba(255,255,255,.04) 60%,transparent 62%)}
.hero h2,.hero .muted,.hero .small{color:rgba(255,255,255,.85)}.hero .big{color:#fff;font-size:28px}.hero .tag{background:rgba(255,255,255,.18);color:#fff}
.hero button,.hero .button{background:#fff;color:var(--navy);border-color:transparent}.hero button.primary{background:var(--gold);color:var(--navy)}
.hero a{color:#fff;text-decoration:underline}

/* ── 폼 */
form label{display:block;margin:10px 0 6px;font-size:13.5px;color:#334155;font-weight:600}
form input:not([type=checkbox]):not([type=radio]):not([type=file]),form select,form textarea{display:block;width:100%;margin-top:4px;padding:11px 12px;font-size:16px;border:1px solid #CBD5E1;border-radius:12px;background:#fff;font-family:inherit;font-weight:400;transition:border-color .15s,box-shadow .15s}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,87,245,.15)}
form input[type=file]{font-size:14px;margin-top:4px}
form label.check{display:flex;align-items:center;gap:8px;font-weight:500}form label.check input{width:auto;margin:0;accent-color:var(--blue)}
button,.button{display:inline-block;padding:11px 16px;font-size:15px;font-weight:600;border:1px solid #CBD5E1;border-radius:12px;background:#fff;color:var(--text);cursor:pointer;margin-top:10px;font-family:inherit;transition:transform .05s,box-shadow .15s,background .15s}
button:hover,.button:hover{background:#F8FAFC}button:active{transform:translateY(1px)}button:disabled{opacity:.55;cursor:default}
button.primary,.button.primary{background:linear-gradient(135deg,var(--blue),var(--blue-dark));border-color:transparent;color:#fff;box-shadow:0 8px 18px -10px rgba(36,87,245,.7)}button.primary:hover{background:linear-gradient(135deg,#2F62FF,#1B3FC7)}
button.ghost{border:none;background:none;color:var(--muted)}button.ghost:hover{background:#F1F5F9}
button.small,.button.small{padding:7px 11px;font-size:13px;margin-top:4px;border-radius:10px}
button.busy{position:relative;color:transparent}button.busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid rgba(255,255,255,.6);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
button.busy:not(.primary)::after{border-color:#94A3B8;border-top-color:transparent}@keyframes spin{to{transform:rotate(360deg)}}
form.row{display:flex;flex-wrap:wrap;gap:8px;align-items:end}form.row input,form.row select{width:auto;flex:1 1 120px;margin:0}form.row button{margin:0}form.row label{margin:0}
form.inline{display:inline}form.inline input,form.inline select{display:inline-block;width:auto;padding:7px 9px;font-size:14px;margin:0;border-radius:10px}
.row-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 4px}.row-btns form{margin:0}.row-btns button,.row-btns .button{margin:0}.row-btns.end{justify-content:flex-end}.row-btns.center{justify-content:center}
.center{text-align:center}
details summary{cursor:pointer;color:var(--blue);font-weight:600;margin:6px 0}

/* ── 통계 타일 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.stats>div{background:var(--soft);border-radius:12px;padding:10px 4px}.stats .label{display:block;font-size:12px;color:var(--muted)}.stats .value{display:block;font-size:22px;font-weight:800;color:var(--blue);letter-spacing:-.4px}
.scores span{display:inline-block;min-width:36px;padding:3px 5px;margin:2px;background:#F1F5F9;border-radius:8px;font-size:13px;text-align:center;font-weight:600}.scores span.hot{color:var(--hot);background:var(--red-soft)}

/* ── 하단 탭 (폰) */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs a{flex:1;text-align:center;padding:7px 0 9px;font-size:11px;color:var(--muted);font-weight:600;position:relative}
nav.tabs a i{display:block;font-style:normal;font-size:21px;line-height:1.1;margin-bottom:2px;filter:grayscale(1);opacity:.7}
nav.tabs a.on{color:var(--blue)}nav.tabs a.on i{filter:none;opacity:1}nav.tabs a.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--blue)}
nav.subnav{display:flex;gap:6px;margin:0 0 12px;font-size:14px;flex-wrap:wrap}nav.subnav a{padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600}nav.subnav a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:2px 2px 10px;flex-wrap:wrap}
.toggle{display:inline-flex}.toggle a{padding:7px 12px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;color:var(--muted)}.toggle a:first-child{border-radius:10px 0 0 10px}.toggle a:last-child{border-radius:0 10px 10px 0}.toggle a.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ── 표 */
table.list{width:100%;border-collapse:collapse;font-size:14px}table.list th,table.list td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.list th{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.2px;background:#F8FAFC}
table.list tr.me td{background:var(--soft)}table.list td.r,table.list th.r{text-align:right}table.list tr.total td{border-top:2px solid var(--navy);font-weight:700}
table.list tr.head td{background:#F8FAFC;font-weight:700}table.list td.sub{padding-left:22px;color:var(--muted)}
table.rules pre{margin:0;font-size:12px;white-space:pre-wrap;max-width:360px}table.rules tr.sel td{background:var(--soft)}
ul.log{list-style:none;padding:0;margin:0;font-size:13px}ul.log li{padding:7px 0;border-bottom:1px solid var(--line)}
pre#issued-text,pre.copytext{background:#F8FAFC;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13.5px;white-space:pre-wrap;font-family:inherit;line-height:1.55}pre#issued-text{font-size:15px;background:#fff}
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
table.rank{border-collapse:separate;border-spacing:0;font-size:12.5px;white-space:nowrap}
table.rank th,table.rank td{padding:5px 6px;border-bottom:1px solid var(--line);border-right:1px solid #F1F5F9;text-align:center}
table.rank thead th{background:#F8FAFC;font-weight:700;position:sticky;top:0;z-index:2;color:#334155}
table.rank tr.group th{font-size:11px;background:#EEF2FF}table.rank tr.group th.cur{background:#DCFCE7}table.rank tr.group th.prev{background:#E2E8F0}table.rank tr.group th.games{background:#FFEDD5}table.rank tr.group th.avgchg{background:#FDE68A}
table.rank td.num{background:#F8FAFC;font-weight:800}
table.rank th.name,table.rank td.name{position:sticky;left:0;background:#fff;text-align:left;font-weight:700;min-width:70px;box-shadow:1px 0 0 var(--line);z-index:1}table.rank thead th.name{background:#F8FAFC;z-index:3}
table.rank td.hot{color:var(--hot);font-weight:700}table.rank td.up{color:var(--up);font-weight:700}table.rank td.down{color:var(--hot);font-weight:700}
table.rank tr.me td{background:var(--soft)}table.rank tr.me td.name{background:#DBEAFE}table.rank tr.left td{color:#9CA3AF}table.rank td.g{min-width:36px}
table.rank.simple{font-size:14px;width:100%}table.rank.simple th,table.rank.simple td{padding:9px 6px}
table.result td.filled{color:#9CA3AF}table.result tr.teamrow td{background:#F1F5F9;text-align:left;font-size:12px}
table.grid td.fc{font-size:11px}table.grid td.fc.late{color:var(--red);font-weight:700}table.grid td.fc.unpaid{color:#C2410C;font-weight:800}table.grid td.fc.paid{color:var(--green)}
table.ledger tr.head td{background:#F8FAFC;font-weight:700}table.ledger td.sub{padding-left:22px;color:var(--muted)}

/* ── 정기전 */
ul.events{list-style:none;padding:0;margin:0}ul.events li{padding:11px 0;border-bottom:1px solid var(--line)}ul.events li:last-child{border-bottom:none}ul.events li a{color:var(--text);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#E2E8F0;color:#334155;vertical-align:middle}
.tag.registered{background:var(--green-soft);color:var(--green)}.tag.waitlist{background:var(--amber-soft);color:var(--amber)}.tag.cancelled{background:var(--red-soft);color:var(--red)}.tag.soft{background:var(--soft);color:var(--blue)}.tag.gray{background:#E2E8F0;color:#475569}
.scoregrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.scorecell{border:1px solid var(--line);border-radius:14px;padding:10px;background:#FAFBFF}.scorecell input[type=number]{font-size:24px;font-weight:800;text-align:center;letter-spacing:-.5px}.scorecell label{margin:6px 0 4px}
.team{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:8px 0;background:#fff}.team.mine{border-color:var(--blue);background:var(--soft)}
.teamhead{font-size:14px;margin-bottom:6px;font-weight:600}.teamhead .ranks{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}.teamhead .ranks .rk{display:inline-block;margin-right:10px}.rk.r1{color:var(--green);font-weight:800}
.teammembers{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}.teammembers span.me{font-weight:800;color:var(--blue)}.teammembers span.guest{color:var(--muted)}.teammembers b{font-weight:600;margin-left:3px}.teammembers b.hot{color:var(--hot);font-weight:800}
.names span{display:inline-block;margin:3px 10px 3px 0}.names span.me{font-weight:800;color:var(--blue)}
table.scores input.sc{width:60px;padding:7px 4px;font-size:16px;font-weight:700;text-align:center;display:inline-block;margin:0;border-radius:10px}
table.scores label.ac{font-size:10px;color:var(--muted);display:inline-flex;align-items:center;gap:2px;margin:0 0 0 2px;font-weight:600}table.scores label.ac input{width:auto;margin:0;accent-color:var(--blue)}
form.mv{display:inline-flex;align-items:center;gap:4px;margin:2px 8px 2px 0}form.mv select{padding:4px;font-size:13px;width:auto;margin:0;border-radius:8px}

/* ── 회비·기타 */
.feegrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.fc{border:1px solid var(--line);border-radius:10px;padding:6px 4px;text-align:center;font-size:12px}.fc span{display:block;color:var(--muted);font-size:11px}.fc b{display:block}.fc small{display:block;color:var(--muted);font-size:10px}
.fc.paid{background:var(--green-soft);border-color:#BBF7D0}.fc.late{background:var(--red-soft);border-color:#FECACA;color:var(--red)}.fc.unpaid{background:#FFF7ED;border-color:#FED7AA;color:#C2410C}.fc.exempt,.fc.na,.fc.future{color:var(--muted)}
.card.menu{padding:6px 4px}.card.menu a{display:flex;justify-content:space-between;align-items:center;padding:13px 12px;color:var(--text);font-size:15px;font-weight:600;border-bottom:1px solid var(--line)}.card.menu a:last-child{border-bottom:none}.card.menu a::after{content:"›";color:#94A3B8;font-size:18px}.card.menu p{padding:8px 12px 2px;margin:0}
.pollopt{padding:11px 12px;border:1px solid var(--line);border-radius:12px;margin:6px 0;font-weight:500}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.photos figure{margin:0}.photos img{width:100%;border-radius:12px;aspect-ratio:1;object-fit:cover}.photos figcaption{font-size:11px;color:var(--muted)}

/* ── 로그인 */
.auth{max-width:420px;margin:24px auto}.auth .brandbig{text-align:center;margin:10px 0 18px}.auth .brandbig .logo{width:64px;height:64px}.auth .brandbig h1{margin:6px 0 0;font-size:28px}.auth .brandbig p{margin:2px 0 0;color:var(--muted)}

/* ── 확인창 · 이미지 보기 */
dialog#confirm-dlg{border:none;border-radius:16px;padding:20px 20px 14px;max-width:360px;width:calc(100% - 40px);box-shadow:0 20px 60px -20px rgba(0,0,0,.5);font-family:inherit}
dialog#confirm-dlg::backdrop{background:rgba(11,31,58,.5)}#confirm-msg{margin:0 0 6px;font-size:15px;line-height:1.5}
#lightbox[hidden],[hidden]{display:none!important}
#lightbox{position:fixed;inset:0;z-index:50;background:rgba(11,31,58,.92);display:flex;align-items:center;justify-content:center;padding:16px}
#lightbox .lb-in{max-width:100%;max-height:100%;overflow:auto;text-align:center}#lightbox img{max-width:100%;max-height:70vh;border-radius:8px;background:#fff}

/* ── PC */
@media (min-width:900px){
  body{padding-bottom:24px}
  nav.tabs{display:none}
  .topnav{display:flex}
  main{padding:22px 20px}
  .grid2{grid-template-columns:1fr 1fr}
  .scoregrid{grid-template-columns:repeat(4,1fr)}
  table.rank{font-size:13px}
  .back{display:none}
  h2{font-size:18px}
}
@media (max-width:899px){
  .topnav{display:none}
  .userchip b{font-weight:700}
}
@media (max-width:420px){.stats .value{font-size:19px}.userchip span{display:none}}