/* Pretendard — 한글 UI 라벨용. 시스템 고딕 폴백은 작은 크기에서 뭉개진다 */
  @font-face{font-family:'Pretendard';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/pretendard-400.woff2') format('woff2')}
  @font-face{font-family:'Pretendard';font-style:normal;font-display:swap;font-weight:600;src:url('/fonts/pretendard-600.woff2') format('woff2')}
  @font-face{font-family:'Pretendard';font-style:normal;font-display:swap;font-weight:700;src:url('/fonts/pretendard-700.woff2') format('woff2')}
  @font-face{font-family:'Pretendard';font-style:normal;font-display:swap;font-weight:800;src:url('/fonts/pretendard-800.woff2') format('woff2')}

  /* Barlow Condensed — 헤딩 전용(라틴). 한글은 Pretendard가 받는다 */
  @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
    src:url("/fonts/barlow-condensed-600.woff2") format("woff2")}
  @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
    src:url("/fonts/barlow-condensed-700.woff2") format("woff2")}

  :root{
    /* 표면: 슬레이트 4단 */
    --bg:#06090f; --bg2:#0b111c; --panel:#0f1622; --panel2:#161f2e;
    --line:#1c2635; --line2:#293448;
    --txt:#e4e9f2; --mut:#737f95;
    /* 액센트 없음 — 강조는 흰색·굵기·배경 한 톤으로만. 채도는 데이터에만 배급한다 */
    /* 데이터색: 상태 */
    --fa:#ffa53d; --stay:#3fd18b; --unk:#5b6079;
    /* 데이터색: 포지션 (롤 팬에게 학습된 언어 — 변경 금지) */
    --top:#e05656; --jgl:#4ade80; --mid:#5aa9ff; --bot:#ffcf4d; --sup:#c98bff;
    /* 순위 */
    --gold:#ffd75e; --silver:#c9d4e8; --bronze:#e8a06a;
    /* 라운딩: 용도별로 다르게 — 전부 14px이던 것을 3단으로 분리 */
    --r-panel:10px; --r-ctl:7px; --r-pill:20px;
    /* 타이포 */
    --f-head:"Barlow Condensed","Pretendard","Apple SD Gothic Neo",sans-serif;
    /* 타이포 스케일 — 역할별로 크기를 하나씩만 정의한다.
       탭마다 같은 성격의 글자가 다른 크기로 보이던 문제(특히 팀 로스터 행)를
       막기 위해, 개별 규칙에 px를 직접 쓰지 말고 아래 토큰을 쓸 것. */
    --fs-hero:17px;    /* 예측 슬롯의 선수 이름 — 의도적으로 한 단계 위 */
    --fs-title:15px;   /* 카드 헤더: 팀명 · 랭킹 팀명 · 모달 제목 */
    --fs-row:13.5px;   /* 행 단위 본문: 선수 이름 · 표 셀 */
    --fs-note:13px;    /* 안내문 · 빈 상태 · 오류 */
    --fs-meta:12px;    /* 보조: 소속팀 · 날짜 · 국적 */
    --fs-micro:10.5px; /* 미세 캡션 */
  }
  /* 섹션 헤딩·소형 라벨: 대문자 + 자간, FM 계열 화면의 기본 문법 */
  .hd{font-family:var(--f-head);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--mut);font-size:13px;line-height:1.2}
  .hd.lg{font-size:22px;color:var(--txt);letter-spacing:.02em}
  .lbl{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--mut)}
  .num{font-variant-numeric:tabular-nums}

  /* ── 컨텍스트 바: "지금 무엇을 보고 있는가"를 숫자로 (FM 헤더 문법) */
  .ctxbar{background:var(--bg2);border-bottom:1px solid var(--line)}
  .ctx{max-width:1180px;margin:0 auto;padding:6px 20px;display:flex;align-items:center;gap:9px;
    font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);
    overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .ctx::-webkit-scrollbar{display:none}
  .ctx .v{color:var(--txt);font-variant-numeric:tabular-nums}
  .ctx .sep{opacity:.3}
  .ctx .right{margin-left:auto;text-transform:none;letter-spacing:.02em;font-weight:600;padding-left:14px}

  /* ── 리그 서브탭: 드롭다운을 탭으로 승격 */
  .subtabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
  .subtabs::-webkit-scrollbar{display:none}
  .stab{border:0;background:transparent;color:var(--mut);font-family:var(--f-head);font-weight:600;
    font-size:15px;letter-spacing:.04em;padding:8px 12px;white-space:nowrap;
    border-bottom:2px solid transparent;margin-bottom:-1px;transition:.1s}
  .stab:hover{color:var(--txt)}
  .stab.on{color:var(--txt);border-bottom-color:var(--txt)}

  /* ── 상태: 키보드 포커스·누름·비활성·로딩 */
  :where(button,select,input,a,[tabindex]):focus-visible{outline:2px solid var(--txt);outline-offset:2px;border-radius:3px}
  button:not(:disabled):active{transform:translateY(1px)}
  button:disabled{opacity:.4;cursor:not-allowed}
  .is-loading{position:relative;color:transparent !important}
  .is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;
    border:2px solid rgba(255,255,255,.25);border-top-color:var(--txt);animation:spin .6s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* 랭킹 갱신 중 — 표를 흐리게 하지 않는다(어두워져서 읽기 어렵다는 피드백).
     밝기는 그대로 두고 컨트롤 줄에 작은 스피너만 띄운다.
     자리는 항상 잡아두고 0.25초 뒤에야 나타나므로, 레이아웃이 밀리지도 않고
     응답이 빠르면 아예 보이지 않는다. */
  #rank-body.busy{pointer-events:none}
  .rkbusy{width:13px;height:13px;border-radius:50%;flex-shrink:0;
    border:2px solid rgba(255,255,255,.22);border-top-color:var(--txt);
    display:inline-block;vertical-align:-2px;margin-left:2px;opacity:0}
  .rkbusy.on{animation:spin .6s linear infinite, rkfade .12s .25s both}
  @keyframes rkfade{to{opacity:1}}
  .skel{height:30px;border-bottom:1px solid var(--line);background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent) 0 0/220% 100%;animation:sh 1.1s linear infinite}
  @keyframes sh{to{background-position:-220% 0}}
  .errbox{padding:22px;text-align:center;color:var(--mut);font-size:var(--fs-note)}
  .errbox b{display:block;color:var(--txt);font-size:13.5px;margin-bottom:5px}
  /* 착지 페이지 소개 — 검색으로 들어온 방문자가 먼저 읽는 진짜 콘텐츠다.
     예전처럼 화면 밖(left:-9999px)에 숨기지 않는다. 숨김 텍스트는 검색·광고 정책
     위반이고, 어차피 이 내용은 사람이 봐도 쓸모가 있다.
     앱 안에서 다른 화면으로 이동하면 syncURL()이 제거한다. */
  .lede{max-width:1180px;margin:0 auto;padding:20px 20px 4px}
  .lede h1{font-family:var(--f-head);font-weight:700;letter-spacing:.01em;
    font-size:26px;line-height:1.15;margin:0 0 8px}
  .lede h1 .sub{color:var(--mut);font-weight:600}
  .lede p{margin:0 0 14px;color:var(--mut);font-size:var(--fs-note);line-height:1.65;max-width:78ch}
  .lede .card{margin-bottom:8px}
  .lede .more{font-size:var(--fs-meta);color:var(--mut);margin:0}
  /* 푸터 사이트맵 — 크롤러가 전체 페이지를 타고 들어오는 경로이자 사람에게도 목차다 */
  .sitenav{margin-top:34px;display:flex;flex-wrap:wrap;gap:5px 14px;font-size:var(--fs-meta);
    border-top:1px solid var(--line);padding-top:14px}
  .sitenav b{width:100%;color:var(--mut);font-family:var(--f-head);font-weight:700;
    font-size:11px;letter-spacing:.07em;text-transform:uppercase;margin:6px 0 -1px}
  .sitenav a{color:var(--mut);text-decoration:none}
  .sitenav a:hover{color:var(--txt);text-decoration:underline}
  /* 문서 페이지(개인정보 처리방침 · 소개) */
  .doc{max-width:820px;margin:0 auto;padding:26px 20px 60px;line-height:1.75}
  .doc h1{font-family:var(--f-head);font-size:28px;font-weight:700;margin:0 0 4px;letter-spacing:.01em}
  .doc h2{font-family:var(--f-head);font-size:18px;font-weight:700;margin:30px 0 8px;letter-spacing:.03em}
  .doc p,.doc li{color:var(--mut);font-size:var(--fs-note)}
  .doc li{margin:4px 0}
  .doc b,.doc strong{color:var(--txt)}
  .doc a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
  .doc table{width:100%;border-collapse:collapse;font-size:var(--fs-row);margin:10px 0 4px}
  .doc td,.doc th{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
  .doc th{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
  .doc .upd{font-size:var(--fs-meta)}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  /* 안드로이드 크롬의 자동 글자 확대(font boosting) 차단.
     크기를 명시하지 않은 블록만 브라우저가 임의로 키우기 때문에
     탭을 옮길 때마다 글자 크기가 튀는 원인이 된다. */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{background:var(--bg);
    color:var(--txt);font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh}
  a{color:inherit}
  button{font-family:inherit;cursor:pointer}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:#2a3350;border-radius:6px}
  ::-webkit-scrollbar-track{background:transparent}

  header.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);
    background:rgba(7,11,20,.9);border-bottom:1px solid var(--line);
    padding-top:env(safe-area-inset-top)}
  .top-inner{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;font-weight:800;letter-spacing:-.3px}
  .brand b{font-size:16px}
  .brand small{display:block;font-size:11px;color:var(--mut);font-weight:600;letter-spacing:.2px}
  nav.tabs{display:flex;gap:2px;margin-left:auto;background:var(--panel);padding:3px;border-radius:var(--r-ctl);border:1px solid var(--line)}
  nav.tabs button{border:0;background:transparent;color:var(--mut);font-weight:700;font-size:13px;
    padding:8px 15px;border-radius:5px;transition:.12s}
  nav.tabs button:hover{color:var(--txt)}
  nav.tabs button.on{background:var(--panel2);color:var(--txt);box-shadow:inset 0 -2px 0 var(--txt)}
  .langbtn{margin-left:8px;background:var(--panel);border:1px solid var(--line2);color:var(--mut);
    font-family:var(--f-head);font-weight:700;font-size:12px;letter-spacing:.06em;
    padding:7px 10px;border-radius:var(--r-ctl);min-height:34px}
  .langbtn:hover{color:var(--txt);border-color:var(--mut)}

  main{max-width:1180px;margin:0 auto;padding:0 20px 72px}
  .controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 10px}
  select,input[type=text]{background:var(--panel);border:1px solid var(--line2);color:var(--txt);
    padding:9px 12px;border-radius:var(--r-ctl);font-size:14px;font-weight:600;outline:none}
  select:focus,input:focus{border-color:var(--mut)}
  input[type=text]{font-weight:500;min-width:220px}
  .search-wrap{position:relative;flex:1;min-width:200px;max-width:340px}
  .search-wrap input{width:100%;padding-left:36px}
  .search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}

  .rolechips{display:flex;gap:6px;flex-wrap:wrap}
  .rchip{border:1px solid var(--line2);background:var(--panel);color:var(--mut);font-weight:700;
    font-size:12px;padding:7px 12px;border-radius:20px;transition:.12s}
  .rchip.on{color:#0a0c12}
  .rchip[data-r=TOP].on{background:var(--top);border-color:var(--top)}
  .rchip[data-r=JGL].on{background:var(--jgl);border-color:var(--jgl)}
  .rchip[data-r=MID].on{background:var(--mid);border-color:var(--mid)}
  .rchip[data-r=BOT].on{background:var(--bot);border-color:var(--bot)}
  .rchip[data-r=SUP].on{background:var(--sup);border-color:var(--sup)}
  .rchip.on[data-r=ALL]{background:var(--txt);border-color:var(--txt)}

  /* role pill */
  .role{display:inline-grid;place-items:center;min-width:38px;height:22px;border-radius:6px;font-size:11px;
    font-weight:800;letter-spacing:.3px;padding:0 7px}
  .role.TOP{background:rgba(224,86,86,.16);color:#ff8a8a} .role.JGL{background:rgba(74,222,128,.14);color:#7ff0a8}
  .role.MID{background:rgba(90,169,255,.16);color:#8dc4ff} .role.BOT{background:rgba(255,207,77,.16);color:#ffdd82}
  .role.SUP{background:rgba(201,139,255,.16);color:#dcb3ff} .role.NA{background:#22283a;color:var(--mut)}

  img.fl{width:18px;height:auto;border-radius:2px;vertical-align:-2px;margin-right:2px;
    box-shadow:0 0 0 1px rgba(255,255,255,.08)}
  .tl{width:20px;height:20px;object-fit:contain;vertical-align:-5px;margin-right:6px;flex:none}
  .tl.sm{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
  .tl.lg{width:26px;height:26px;vertical-align:-7px;margin-right:8px}
  .lgo{width:17px;height:17px;object-fit:contain;vertical-align:-3px;margin-right:6px;opacity:.9}
  .mono{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;flex:none;
    background:var(--panel2);border:1px solid var(--line2);color:var(--mut);
    font-family:var(--f-head);font-size:9px;font-weight:700;margin-right:6px;vertical-align:-5px}

  .badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:0;white-space:nowrap}
  .badge.fa{background:rgba(255,157,66,.15);color:var(--fa);border:1px solid rgba(255,157,66,.3)}
  .badge.stay{background:rgba(74,222,128,.13);color:var(--stay);border:1px solid rgba(74,222,128,.28)}
  .badge.unk{background:#20263a;color:var(--mut);border:1px solid var(--line2)}

  /* FA market table */
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
  table{width:100%;border-collapse:collapse;font-size:var(--fs-row)}
  thead th{text-align:left;font-size:11px;letter-spacing:.02em;color:var(--mut);
    font-weight:700;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--bg2);cursor:pointer;user-select:none}
  thead th:hover{color:var(--txt)}
  tbody td{padding:6px 14px;border-bottom:1px solid var(--line)}
  tbody tr:nth-child(even){background:rgba(255,255,255,.014)}
  tbody tr:last-child td{border-bottom:0}
  tbody tr:hover{background:var(--panel2)}
  .pname{font-weight:800}
  .tname{color:var(--mut);font-weight:600;font-size:var(--fs-meta)}
  .muted{color:var(--mut)}
  .empty{padding:34px 20px;text-align:center;color:var(--mut);font-weight:600;font-size:var(--fs-note)}
  .empty .sub{display:block;margin-top:5px;font-size:12px;font-weight:500;opacity:.75}

  /* team grid */
  .teamgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
  .teamcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
  .teamcard .th{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);
    background:var(--bg2)}
  .teamcard .th b{font-size:var(--fs-title)}
  .teamcard .th .mini{margin-left:auto;font-size:11px;font-weight:700;color:var(--mut)}
  .prow{display:flex;align-items:center;gap:9px;padding:5px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-row)}
  .prow:last-child{border-bottom:0}
  .prow .pn{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .prow .dt{font-size:var(--fs-meta);color:var(--mut);font-variant-numeric:tabular-nums}

  /* builder */
  .builder-head{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:12px;font-weight:700;color:var(--mut)}
  .slots{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:22px}
  .slot{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-panel);
    padding:14px;min-height:132px;display:flex;flex-direction:column;gap:9px;position:relative;transition:.15s}
  .slot:hover{border-color:var(--line2)}
  .slot.is-stay{border-color:rgba(63,209,139,.35);background:var(--panel)}
  .slot .stay-tag{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--stay);background:rgba(74,222,128,.13);
    border:1px solid rgba(74,222,128,.3);padding:2px 6px;border-radius:20px;letter-spacing:0}
  .slot .slotrole{font-size:12px;font-weight:800;letter-spacing:.5px;display:flex;align-items:center;gap:7px;padding-right:30px}
  .slot .dot{width:9px;height:9px;border-radius:50%}
  .dot.TOP{background:var(--top)}.dot.JGL{background:var(--jgl)}.dot.MID{background:var(--mid)}.dot.BOT{background:var(--bot)}.dot.SUP{background:var(--sup)}
  .slot .picked{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px}
  .slot .picked .nm{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.3px}
  .slot .picked .fr{font-size:var(--fs-meta);color:var(--mut);font-weight:600}
  .slot .empty-slot{flex:1;display:grid;place-items:center;color:var(--mut);font-weight:700;font-size:13px;
    border:1.5px dashed var(--line2);border-radius:9px}
  .slot .act{position:absolute;top:10px;right:10px;display:flex;gap:5px}
  .slot .act button{border:0;background:var(--panel2);color:var(--mut);width:24px;height:24px;border-radius:7px;
    font-size:13px;display:grid;place-items:center}
  .slot .act button:hover{background:var(--panel2);color:var(--txt)}
  .btn{border:0;padding:9px 16px;border-radius:var(--r-ctl);font-weight:800;font-size:14px}
  .btn.ghost{background:var(--panel);border:1px solid var(--line2);color:var(--txt)}
  .btn.sm{padding:7px 12px;font-size:12.5px}
  .rowbtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

  .hint{font-size:var(--fs-note);color:var(--mut);margin:4px 0 18px}
  .hint b{color:var(--txt)}

  /* saved summary */
  .savedgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:24px}

  /* vote & ranking */
  .votebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg2);
    border:1px solid var(--line2);border-radius:var(--r-panel);padding:14px 18px;margin-bottom:22px}
  .btn.vote{background:var(--txt);color:var(--bg);border:0;font-weight:800;
    padding:10px 20px;border-radius:var(--r-ctl);font-size:14px}
  .btn.vote:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
  .btn.vote.done{background:var(--panel2);color:var(--stay);border:1px solid rgba(74,222,128,.35)}
  .rankcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;margin-bottom:8px}
  .rankcard .rh{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);
    background:var(--bg2);cursor:pointer;width:100%;text-align:left;border-width:0 0 1px;font-family:inherit}
  .rankcard .rh .no{font-size:18px;font-weight:800;color:var(--mut);min-width:30px}
  .rankcard .rh .no.gold{color:var(--gold)}.rankcard .rh .no.silver{color:var(--silver)}.rankcard .rh .no.bronze{color:var(--bronze)}
  .rankcard .rh b{font-size:var(--fs-title)}
  .rankcard .rh .vv{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--txt)}
  .consensus{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
  .consensus .cs{padding:11px 8px;text-align:center;border-right:1px solid var(--line)}
  .consensus .cs:last-child{border-right:0}
  .consensus .cs .rr{font-size:10px;font-weight:800;letter-spacing:.4px;margin-bottom:4px}
  .consensus .cs .nn{font-weight:800;font-size:var(--fs-row);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .consensus .cs .ff{font-size:var(--fs-micro);color:var(--mut);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .posdist{border-top:1px solid var(--line);padding:12px 16px;display:none}
  .rankcard.open .posdist{display:block}
  .distrow{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:var(--fs-row)}
  .distrow .bar{height:7px;border-radius:1px;background:var(--mut);min-width:2px}
  .distrow .dn{min-width:110px;font-weight:700}
  .distrow .dv{color:var(--mut);font-size:var(--fs-meta);min-width:34px;text-align:right}

  /* modal picker */
  .modal-bg{position:fixed;inset:0;background:rgba(4,6,12,.72);backdrop-filter:blur(4px);z-index:100;
    display:none;align-items:flex-start;justify-content:center;padding:6vh 16px}
  .modal-bg.on{display:flex}
  .modal{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-panel);width:min(560px,100%);
    max-height:82vh;display:flex;flex-direction:column;box-shadow:0 30px 80px -20px #000}
  .modal .mh{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
  .modal .mh b{font-size:var(--fs-title)}
  .modal .mh .x{margin-left:auto;background:var(--panel2);border:0;color:var(--mut);width:30px;height:30px;border-radius:8px;font-size:16px}
  .modal .msearch{padding:12px 16px;border-bottom:1px solid var(--line)}
  .modal .msearch input{width:100%}
  .modal .mlist{overflow:auto;padding:6px}
  .grp-label{font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.02em;padding:12px 12px 6px}
  .pick{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:5px;cursor:pointer;
    width:100%;text-align:left;border:0;background:transparent;color:inherit;font-family:inherit}
  .pick:hover{background:var(--panel2)}
  .pick .pn{font-weight:800;font-size:var(--fs-row)}
  .pick .meta{font-size:var(--fs-meta);color:var(--mut);margin-left:auto;text-align:right}
  .footnote{margin-top:30px;font-size:12px;color:var(--mut);line-height:1.7;border-top:1px solid var(--line);padding-top:16px}
  .footnote a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
  .tag{display:inline-block;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;
    padding:2px 7px;font-size:11px;font-weight:700;color:var(--mut)}

  @media(max-width:820px){
    .slots{grid-template-columns:repeat(2,1fr)}
    nav.tabs{margin-left:0;width:100%;order:3}
    thead th.hidesm,tbody td.hidesm{display:none}
  }

  /* ---------- mobile ≤480px ---------- */
  @media(max-width:480px){
    /* 크기 조정은 여기 한 곳에서만 — 화면별로 따로 줄이면 다시 튄다 */
    :root{--fs-hero:15px; --fs-meta:11.5px}

    /* 헤더: 세로 공간이 가장 귀한 자원이므로 2줄로 압축한다
       1줄 = 브랜드 + 언어 전환 / 2줄 = 탭 전체폭 */
    .top-inner{padding:8px 12px;gap:8px}
    .brand b{font-size:15px}
    .brand small{display:none}            /* 부제는 모바일에서 군더더기 */
    .langbtn{order:2;margin-left:auto;min-height:40px;padding:6px 10px}
    nav.tabs{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;
      -webkit-overflow-scrolling:touch;scrollbar-width:none}
    nav.tabs::-webkit-scrollbar{display:none;height:0}
    nav.tabs button{flex:1 0 auto;min-height:44px;padding:8px 12px;white-space:nowrap;font-size:12.5px}

    .ctx{padding:5px 12px;font-size:10px;gap:7px;letter-spacing:.04em}
    .ctx .right{padding-left:10px}
    .stab{min-height:44px;padding:8px 10px;font-size:14px}

    main{padding:0 12px 56px}
    footer{padding:0 12px 40px !important}

    /* iOS 자동 줌 방지(16px 미만이면 확대됨) + 컨트롤 풀너비 */
    select,input[type=text]{font-size:16px}
    input[type=text]{min-width:0;width:100%}
    .controls{gap:8px;margin:10px 0 8px}
    .controls select{width:100%}
    .search-wrap{width:100%;max-width:none}
    .rchip{min-height:36px;padding:8px 12px}
    .builder-head{gap:10px}
    .builder-head .field,.builder-head select{width:100%}
    .builder-head .rowbtns{margin-left:0 !important;width:100%;justify-content:space-between}

    /* FA 테이블: 팀명이 길어 행이 접히므로 말줄임 처리 */
    thead th{padding:8px 10px}
    tbody td{padding:7px 10px}
    .tname .tn{display:inline-block;max-width:96px;overflow:hidden;text-overflow:ellipsis;
      white-space:nowrap;vertical-align:middle}
    .pname{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

    .teamgrid,.savedgrid{grid-template-columns:1fr}

    /* 예측 빌더: 폰에서는 5개 슬롯을 1열 5행으로.
       세로 카드를 그대로 1열로 늘리면 화면이 지나치게 길어지므로
       로스터 목록처럼 가로 한 줄짜리 행으로 바꾼다. */
    .slots{grid-template-columns:1fr;gap:6px}
    .slot{flex-direction:row;align-items:center;gap:10px;
      min-height:58px;padding:9px 12px;position:relative}
    .slot .slotrole{flex-direction:column;align-items:flex-start;gap:2px;
      min-width:52px;flex-shrink:0;padding-right:0;font-size:11.5px;line-height:1.15}
    .slot .slotrole span[style]{font-size:10px}     /* 한글 포지션명 축소 */
    .slot .stay-tag{position:absolute;top:8px;right:44px;margin-left:0;font-size:9.5px}
    .slot .picked{flex:1;min-width:0;gap:1px;padding-right:34px}
    .slot .picked .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .slot .picked .fr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .slot .empty-slot{flex:1;min-height:38px;font-size:12.5px;margin-right:0}
    .slot .act{top:50%;transform:translateY(-50%);right:10px}
    .slot .act button{width:32px;height:32px}

    .votebar{padding:12px 14px}
    .votebar .btn.vote{width:100%}

    /* 팬 랭킹: 5열 그리드는 폰에서 읽히지 않는다 → 5행 목록으로 전환 */
    .consensus{display:block}
    .consensus .cs{display:flex;align-items:center;gap:9px;text-align:left;
      padding:8px 12px;border-right:0;border-bottom:1px solid var(--line)}
    .consensus .cs:last-child{border-bottom:0}
    .consensus .cs .rr{min-width:32px;margin-bottom:0;font-size:10px}
    .consensus .cs .nn{flex:1;min-width:0}
    .consensus .cs .ff{margin:0 0 0 auto;max-width:44%;text-align:right}
    .rankcard .rh{padding:10px 12px}
    .distrow .dn{min-width:86px}

    /* 선수 선택 모달 → 전체 화면 시트 */
    .modal-bg{padding:0;align-items:stretch}
    .modal{width:100%;max-width:none;border-radius:0;border:0;
      height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}
    .modal .mh,.modal .msearch{flex-shrink:0}
    .modal .mh{padding-top:max(16px,env(safe-area-inset-top))}
    .modal .mh .x{width:40px;height:40px}
    .modal .mlist{flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
      padding-bottom:max(10px,env(safe-area-inset-bottom))}
    .pick{min-height:46px;padding:10px 12px}
    .pick .meta{max-width:42%}
  }

  @media(max-width:380px){
    .brand b{font-size:14px}
    .slot{padding:8px 10px;gap:8px}
    .slot .slotrole{min-width:46px}
    nav.tabs button{padding:8px 9px;font-size:12px}
    .tname .tn{max-width:70px}
    .pname{max-width:104px}
  }

  @media(max-width:480px){
    .lede{padding:14px 12px 2px}
    .lede h1{font-size:21px}
    .doc{padding:20px 12px 48px}
    .doc h1{font-size:23px}
  }