/* 모바일·태블릿 공통 — 기기 판별은 /assets/device.js 가 html 에 붙인 클래스로 한다.
   화면별 레이아웃(표 → 카드 등)은 각 페이지 <style> 안의 html.m / html.t 규칙에 있다. */

/* 하단 탭바 — PC 에서는 숨긴다 */
.tabbar{display:none}

html.m .tabbar{
  display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#101012;border-top:1px solid #24221D;
  padding-bottom:env(safe-area-inset-bottom);
}
html.m .tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:58px;font-size:10.5px;color:#A8A399;letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;
}
html.m .tabbar a svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.m .tabbar a.on{color:#F5C542;font-weight:600}
html.m body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}

/* 헤더 — 메뉴는 탭바로 옮겼으니 로고만 남겨 한 줄로 */
html.m header .nav{height:50px;min-height:0;padding:0;flex-wrap:nowrap}
html.m header .nav .right,
html.m header .nav nav{display:none}

/* 요약 카드 — 세로로 쌓으면 목록이 한참 아래로 밀린다. 옆으로 넘겨 본다. */
html.m .stats{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-left:-3vw;margin-right:-3vw;padding:0 3vw 4px;scrollbar-width:none;
  scroll-padding-inline:3vw;              /* 끝으로 붙을 때 첫 카드가 화면 가장자리에 닿지 않게 */
}
html.m .stats::-webkit-scrollbar{display:none}
html.m .stat{flex:0 0 auto;min-width:40%;max-width:72%;scroll-snap-align:start;padding:11px 13px}
html.m .stat .v{font-size:17px;white-space:nowrap}

/* 컨트롤 두 칸씩 */
html.m .controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end;padding-bottom:14px}
html.m .ctl{min-width:0}
html.m .ctl.full{grid-column:1 / -1}
html.m select,
html.m .search input{min-width:0;max-width:none;width:100%}
html.m .search{display:block}

html.m .head{padding:18px 0 12px}
html.m .head h1{font-size:21px}
html.m .head p{font-size:13.5px}
html.m .src{font-size:11px;padding:4px 10px}
html.m footer{margin-top:30px;padding:28px 0 26px}

/* 모바일에서만 / PC 에서만 보이는 요소 */
.m-only{display:none!important}
html.m .m-only{display:flex!important}
html.m .pc-only{display:none!important}

/* ── 터치 기기 공통 ─────────────────────────────────────── */
/* iOS 는 16px 보다 작은 입력칸에 포커스하면 화면을 확대해 버린다 */
html.touch select,
html.touch input[type=search],
html.touch input[type=text]{font-size:16px}
html.touch select{padding-top:10px;padding-bottom:10px}
html.touch .slider input[type=range]::-webkit-slider-thumb{width:22px;height:22px}
html.touch .slider input[type=range]::-moz-range-thumb{width:22px;height:22px}
html.touch .slider{height:36px}
html.touch .slider input[type=range]{height:36px}

/* ── 태블릿 ─────────────────────────────────────────────── */
html.t .nav .right,
html.t .nav nav{gap:6px}
html.t .nav .right a,
html.t .nav nav a{padding:10px 9px}          /* 손가락 크기만큼 누를 자리를 넓힌다 */
html.t .controls{gap:12px}

/* 보기 전환 (바닥글) */
.viewswitch{margin-top:16px;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--dim)}
.viewswitch button{background:none;border:1px solid var(--border);color:var(--muted);
  font:inherit;padding:5px 12px;border-radius:999px;cursor:pointer;margin-left:4px}
.viewswitch button.on{border-color:var(--gold);color:var(--gold);font-weight:600}