*{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:'Pretendard','Malgun Gothic',sans-serif; color:#5b4a52; min-height:100vh;
    background:
      radial-gradient(circle at 15% 12%, #f7f0ff 0, transparent 42%),
      radial-gradient(circle at 85% 18%, #eafaf4 0, transparent 38%),
      radial-gradient(circle at 75% 92%, #fff6e6 0, transparent 42%),
      #fffaf3;
    padding:30px 16px 56px;
    --page-pad-t:30px; --page-pad-l:16px; --page-pad-r:16px;
  }
  /* 넓게 씁니다. 오른쪽 리모콘(최대 186px + 여백) 자리만 비워둬요. */
  .wrap{ max-width:1560px; margin:0 auto; }
  @media (min-width:1000px){
    body{ padding-left:26px; padding-right:calc(clamp(150px,13vw,186px) + clamp(24px,2.2vw,40px) + 22px); }
    .wrap{ margin:0; }                 /* 가운데 고정을 풀어 왼쪽 공간까지 씁니다 */
  }

  /* 상단 */
  .top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
  .home{ text-decoration:none; font-family:'Jua',sans-serif; font-size:15px; color:#7c4ddb;
    background:#fff; padding:10px 18px; border-radius:999px; box-shadow:0 6px 16px rgba(124,77,219,.16); }
  .home:hover{ transform:translateY(-2px); }
  .ttl{ font-family:'Jua',sans-serif; font-size:26px; color:#7c4ddb; }
  .stamp{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12.5px; color:#a99aa2; }
  #st-refresh{ font-family:inherit; font-size:13px; color:#7c4ddb; background:#fff; cursor:pointer;
    border:1.5px solid #e9dcfb; border-radius:999px; padding:6px 14px; }
  #st-refresh.spin{ opacity:.5; pointer-events:none; }

  /* 탭 */
  .tabs{ display:flex; gap:9px; margin-bottom:20px; }
  .tab{ flex:1; font-family:'Jua',sans-serif; font-size:16px; cursor:pointer; background:#fff;
    color:#8d8189; border:2px solid #f1e8ee; border-radius:16px; padding:14px 10px; transition:.16s; }
  .tab:hover{ transform:translateY(-2px); border-color:#c9a9f0; }
  .tab.on{ background:linear-gradient(135deg,#8f5fe0,#a97ce8); border-color:#8f5fe0; color:#fff;
    box-shadow:0 8px 20px rgba(124,77,219,.24); }

  .view{ display:none; }

  /* ── ♥ 엔돌핀 선수 탭 — 기존 탭과 같은 크기·모양, 하트만 포인트 ── */
  .tab.me i{ font-style:normal; color:#ff5f9e; }
  .tab.me.on i{ color:#fff; }
  /* 엔돌핀 화면에서는 '남 찾기' 도구를 접습니다 (기능은 그대로 살아 있어요) */
  body.on-me .searchbar, body.on-me .fbar{ display:none; }

  /* ── 엔돌핀 선수 카드 — 페이지의 기존 카드 규칙 그대로 ── */
  .me-card{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
    background:#fff; border:2px solid #f6eef2; border-radius:20px;
    padding:18px 20px; margin:0 0 16px;
    box-shadow:0 6px 18px rgba(124,77,219,.1); }
  html[data-theme="dark"] .me-card{ background:var(--surface); border-color:var(--line);
    box-shadow:var(--shadow-sm); }
  .me-thumb{ width:74px; height:74px; flex:0 0 74px; border-radius:50%; overflow:hidden;
    background:#f2ebfb; display:flex; align-items:center; justify-content:center;
    font-size:32px; box-shadow:0 0 0 3px #fff, 0 0 0 5px #ff8fb1; }
  html[data-theme="dark"] .me-thumb{ box-shadow:0 0 0 3px var(--surface), 0 0 0 5px #ff8fb1; }
  .me-thumb img{ width:100%; height:100%; object-fit:cover; }
  .me-body{ flex:1 1 220px; min-width:0; }
  .me-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .me-nm{ font-family:'Jua',sans-serif; font-size:24px; color:var(--ink,#5b4a52); }
  .me-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
  .me-tag{ font-size:12.5px; font-weight:800; padding:5px 11px; border-radius:999px;
    color:#fff; background:var(--tc,#7c4ddb); }
  .me-tag.ghost{ color:var(--ink-2,#8d8189); background:var(--bg-2,#f7f2f5);
    border:1.5px solid var(--line,#f1e8ee); }
  .me-live{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
    padding:3px 9px; border-radius:999px; background:#ff3d71; color:#fff; }
  .me-live .dot{ width:5px; height:5px; border-radius:50%; background:#fff;
    display:inline-block; animation:blink 1.1s infinite; }
  .me-off{ font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px;
    background:#e6e2e4; color:#94898f; }
  html[data-theme="dark"] .me-off{ background:var(--bg-2); color:var(--ink-3); }

  .view.on{ display:block; }

  /* 대학 칩 */
  .chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
  .chip{ font-family:'Jua',sans-serif; font-size:14px; cursor:pointer; background:#fff;
    color:#8d8189; border:2px solid #f1e8ee; border-radius:999px; padding:8px 15px;
    display:inline-flex; align-items:center; gap:6px; transition:.15s; }
  .chip:hover{ transform:translateY(-2px); border-color:#a97ce8; }
  .chip.on{ background:#7c4ddb; border-color:#7c4ddb; color:#fff; }
  .chip .n{ font-size:11.5px; background:#f2ebfb; color:#7c4ddb; border-radius:999px; padding:1px 7px; }
  .chip.on .n{ background:rgba(255,255,255,.28); color:#fff; }
  .chip .lv{ font-size:11.5px; background:#ffe9f0; color:#e0568a; border-radius:999px; padding:1px 7px; }
  .chip.on .lv{ background:rgba(255,255,255,.28); color:#fff; }

  /* 보기 필터 (전체 / LIVE만 / OFF만) */
  .showbar{ display:flex; gap:8px; margin-bottom:16px; }
  .sbtn{ font-family:'Jua',sans-serif; font-size:13.5px; cursor:pointer; background:#fff;
    color:#8d8189; border:2px solid #f1e8ee; border-radius:999px; padding:7px 14px;
    display:inline-flex; align-items:center; gap:6px; transition:.15s; }
  .sbtn:hover{ transform:translateY(-2px); border-color:#a97ce8; }
  .sbtn.on{ background:#5b4a52; border-color:#5b4a52; color:#fff; }
  .sbtn .sn{ font-size:11px; background:#f2ebfb; color:#7c4ddb; border-radius:999px; padding:1px 7px; }
  .sbtn.on .sn{ background:rgba(255,255,255,.28); color:#fff; }

  /* 선수 카드 */
  .plist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(226px,1fr)); gap:12px; }
  .pcard{ display:flex; gap:12px; align-items:center; text-decoration:none; color:#5b4a52;
    background:#fff; border-radius:18px; padding:13px; border:2px solid #f6eef2;
    box-shadow:0 6px 18px rgba(124,77,219,.1); transition:.16s; }
  .pcard:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(124,77,219,.2); }
  .pcard.live{ border-color:#ffbcd2; background:#fffafc; }
  .pcard.off{ background:#f4f2f3; border-color:#eae5e8; box-shadow:none; }
  .pcard.off .pthumb img{ filter:grayscale(1); opacity:.55; }
  .pcard.off .pname{ color:#a19aa0; }
  .pcard.unknown{ background:#fffdf7; border-color:#fdeecb; }
  .pcard.me{ border-color:#ff8fb1; }

  .pthumb{ width:52px; height:52px; flex:0 0 52px; border-radius:50%; overflow:hidden;
    background:#f2ebfb; display:flex; align-items:center; justify-content:center; font-size:22px; }
  .pthumb img{ width:100%; height:100%; object-fit:cover; }
  .pbody{ min-width:0; flex:1; }
  .ptop{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .pbadge{ font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px; }
  .pbadge.live{ background:#ff3d71; color:#fff; display:inline-flex; align-items:center; gap:4px; }
  .pbadge.off{ background:#e6e2e4; color:#94898f; }
  .pbadge.unknown{ background:#fdeecb; color:#b07d11; }
  .dot{ width:5px; height:5px; border-radius:50%; background:#fff; display:inline-block;
    animation:blink 1.1s infinite; }
  @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
  .ptier{ font-size:10.5px; font-weight:700; color:var(--tc); background:#fff;
    border:1px solid currentColor; border-radius:999px; padding:1px 7px; opacity:.9; }
  .prace{ font-size:10.5px; font-weight:800; color:#fff; background:var(--rc);
    border-radius:5px; padding:1px 6px; }
  .pname{ font-family:'Jua',sans-serif; font-size:16.5px; margin-top:5px; }
  .pmeta{ font-size:12px; color:#8d8189; margin-top:2px; }
  .ptitle{ font-size:12px; color:#8d8189; margin-top:3px; overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .ptitle.dim{ color:#b0a8ad; }
  .pview{ font-size:12px; font-weight:700; color:#f26d97; margin-top:3px; }

  /* 티어표 — 대학 현황판과 같은 카드 사용 */
  .trow{ background:#fff; border-radius:20px; padding:16px 18px;
    margin-bottom:13px; border:2px solid #f6eef2; box-shadow:0 6px 18px rgba(124,77,219,.09);
    border-left:6px solid var(--tc); }
  .tlabel{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
  .tlabel .tl-nm{ font-family:'Jua',sans-serif; font-size:19px; color:var(--tc); }
  .tlabel .cnt{ font-size:12px; color:#a99aa2; font-weight:600; }
  .tmembers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(226px,1fr)); gap:11px; }
  .tempty{ font-size:13px; color:#c1b8bd; }

  .empty{ text-align:center; color:#a99aa2; font-size:15px; padding:34px 0; }
  .empty b{ color:#7c4ddb; }
  .note{ margin-top:26px; font-size:12.5px; color:#b4a8ae; line-height:1.7; text-align:center; }
  .note a{ color:#8f5fe0; }

  /* 🔴 켜짐/꺼짐 변경 알림 (새로고침 후) */
  #st-changes{ display:none; }
  #st-changes.on{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;
    animation:chIn .3s ease; }
  @keyframes chIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
  .ch-g{ font-size:13px; line-height:1.5; padding:10px 15px; border-radius:14px; flex:1 1 260px; }
  .ch-g b{ display:block; font-family:'Jua',sans-serif; font-size:13.5px; margin-bottom:2px; }
  .ch-g.on{ background:#fff0f6; color:#c2306a; border:1.5px solid #ffbcd2; }
  .ch-g.off{ background:#f2f0f1; color:#7d7278; border:1.5px solid #e4dfe2; }
  #st-changes.none .ch-t{ font-size:12.5px; color:#a99aa2; background:#faf7fd;
    border:1.5px solid #f0e8f8; border-radius:14px; padding:9px 15px; width:100%; text-align:center; }

  /* 🎥 방송 미리보기 (마우스 올리면) */
  #st-preview{ position:fixed; z-index:80; width:320px; pointer-events:none;
    background:#fff; border:2px solid #ffbcd2; border-radius:16px; overflow:hidden;
    box-shadow:0 18px 44px rgba(90,40,70,.3);
    opacity:0; visibility:hidden; transform:scale(.97); transition:opacity .16s, transform .16s, visibility .16s; }
  #st-preview.on{ opacity:1; visibility:visible; transform:scale(1); }
  .pv-imgbox{ position:relative; width:100%; padding-top:56.25%; background:#1a1420; }
  .pv-imgbox img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .pv-live{ position:absolute; top:9px; left:9px; display:inline-flex; align-items:center; gap:5px;
    font-family:'Jua',sans-serif; font-size:11.5px; color:#fff; background:#ff3d71;
    padding:3px 9px; border-radius:999px; }
  .pv-refresh{ position:absolute; bottom:8px; right:9px; font-size:10.5px; color:#fff;
    background:rgba(0,0,0,.5); padding:2px 8px; border-radius:999px; }
  .pv-info{ padding:11px 13px 13px; }
  .pv-nm{ font-family:'Jua',sans-serif; font-size:16px; color:#5b4a52; }
  .pv-tt{ font-size:12.5px; color:#8d8189; margin-top:3px; line-height:1.4;
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .pv-vw{ font-size:12.5px; font-weight:700; color:#f26d97; margin-top:5px; }
  @media (hover:none){ #st-preview{ display:none !important; } }

  /* ⬆ 맨 위로 버튼 — 스크롤 내리면 오른쪽에 등장 */
  #st-top{
    position:fixed; right:22px; bottom:26px; z-index:50;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    width:58px; height:58px; cursor:pointer; font-family:'Jua',sans-serif;
    color:#fff; background:linear-gradient(135deg,#8f5fe0,#a97ce8);
    border:none; border-radius:50%; box-shadow:0 10px 26px rgba(124,77,219,.4);
    opacity:0; visibility:hidden; transform:translateY(14px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  #st-top.on{ opacity:1; visibility:visible; transform:translateY(0); }
  #st-top:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(124,77,219,.5); }
  #st-top:active{ transform:translateY(0) scale(.94); }
  .tp-arrow{ font-size:21px; line-height:1; font-weight:700; }
  .tp-txt{ font-size:9.5px; letter-spacing:-.3px; opacity:.95; }

  @media (max-width:640px){
    body{ padding:18px 12px 40px;
      --page-pad-t:18px; --page-pad-l:12px; --page-pad-r:12px; }
    .ttl{ font-size:22px; }
    .stamp{ width:100%; margin-left:0; justify-content:flex-end; }
    .tab{ font-size:14px; padding:12px 6px; }
    .plist{ grid-template-columns:1fr; }
    .tmembers{ grid-template-columns:1fr; }
    .trow{ padding:13px 14px; border-left-width:5px; }
    .tlabel .tl-nm{ font-size:17px; }
    #st-top{ right:14px; bottom:18px; width:50px; height:50px; }
    .tp-arrow{ font-size:18px; } .tp-txt{ font-size:8.5px; }
  }

  /* ══════════════════════════════════════════════════════
     오른쪽 퀵 내비게이션 (스크롤을 따라다니는 플로팅 메뉴)
     ══════════════════════════════════════════════════════ */
  .trow{ scroll-margin-top:110px; }          /* 헤더에 제목이 가리지 않게 */

  .qnav{ position:fixed; top:110px; right:clamp(24px,2.2vw,40px); z-index:70;
    width:clamp(150px,13vw,186px);
    background:var(--surface);
    border:1.5px solid var(--line); border-radius:26px;
    padding:14px 12px; box-shadow:0 18px 48px rgba(0,0,0,.10), 0 2px 8px rgba(47,42,51,.05);
    animation:qnFloat 5.5s ease-in-out infinite;
    transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s; }
  html[data-theme="dark"] .qnav{ box-shadow:0 18px 48px rgba(0,0,0,.5), 0 0 22px rgba(124,58,237,.14); }
  @keyframes qnFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }
  .qnav:hover{ transform:translateY(-4px); animation-play-state:paused;
    box-shadow:0 26px 60px rgba(0,0,0,.14), 0 3px 10px rgba(47,42,51,.07); }
  .qnav.busy{ animation-play-state:paused; }

  .qn-sec{ padding:8px 2px; }
  .qn-sec + .qn-sec{ border-top:1.5px solid var(--line); }
  .qn-h{ font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.2px;
    margin-bottom:8px; text-align:center; }

  .seg{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
  .seg-b{ font-family:inherit; font-size:11.5px; font-weight:800; cursor:pointer;
    padding:8px 4px; border-radius:11px; border:1.5px solid var(--line);
    background:var(--bg-2); color:var(--ink-3); transition:.16s; white-space:nowrap; }
  .seg-b:hover{ border-color:var(--lav); color:var(--ink-2); }
  .seg-b[aria-pressed="true"][data-prev="on"]{ color:#fff; border-color:transparent;
    background:linear-gradient(135deg,#ff2d78,#ff8a6b); box-shadow:0 6px 14px rgba(255,45,120,.3); }
  .seg-b[aria-pressed="true"][data-prev="off"]{ color:#fff; border-color:transparent;
    background:linear-gradient(135deg,#8b5cf6,#c4b5fd); box-shadow:0 6px 14px rgba(124,58,237,.3); }

  .qn-prev{ margin-top:9px; border:1.5px solid var(--line); border-radius:14px;
    padding:10px 9px; background:var(--bg-2); }
  .pv-cap{ font-size:9.5px; font-weight:700; color:var(--ink-3); text-align:center; margin-bottom:7px; }
  .pv-badge{ display:flex; align-items:center; justify-content:center; gap:6px;
    font-family:'Jua',sans-serif; font-size:14.5px; color:#fff; letter-spacing:.3px;
    border-radius:var(--r-pill); padding:8px 6px;
    background:linear-gradient(135deg,#8b5cf6,#c4b5fd); box-shadow:0 6px 16px rgba(124,58,237,.3); }
  .pv-dot{ width:9px; height:9px; border-radius:50%; border:2.5px solid #fff; flex:0 0 auto; }
  .qn-prev[data-state="on"] .pv-badge{ background:linear-gradient(135deg,#ff2d78,#ff8a6b);
    box-shadow:0 6px 18px rgba(255,45,120,.36); animation:pvPulse 2.4s ease-in-out infinite; }
  @keyframes pvPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
  .pv-btn{ margin-top:7px; text-align:center; font-family:'Jua',sans-serif; font-size:11.5px;
    color:#fff; border-radius:var(--r-pill); padding:7px 6px;
    background:linear-gradient(135deg,#7c3aed,#a78bfa); }
  .qn-prev[data-state="on"] .pv-btn{ background:linear-gradient(135deg,#ff2d78,#ff7e5f); }

  .qn-refresh{ width:100%; display:flex; align-items:center; justify-content:center; gap:6px;
    font-family:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
    color:var(--lav-ink); background:var(--bg-2); border:1.5px solid var(--line);
    border-radius:12px; padding:9px 6px; transition:.16s; }
  .qn-refresh:hover{ border-color:var(--lav); transform:translateY(-1px); }
  .qn-refresh[disabled]{ opacity:.6; cursor:not-allowed; transform:none; }
  .qn-refresh .rf-ico{ display:inline-block; font-size:14px; }
  .qn-refresh.spin .rf-ico{ animation:rfSpin .9s linear infinite; }
  @keyframes rfSpin{ to{ transform:rotate(360deg); } }
  .qn-note{ font-size:10.5px; font-weight:700; color:#12855a; text-align:center;
    margin-top:6px; opacity:0; transition:opacity .2s; }
  .qn-note.show{ opacity:1; }
  html[data-theme="dark"] .qn-note{ color:#34d399; }
  .qn-last{ font-size:10px; color:var(--ink-3); text-align:center; margin-top:4px; }

  .qn-list{ display:flex; flex-direction:column; gap:3px; max-height:44vh; overflow-y:auto;
    scrollbar-width:thin; }
  .qn-top, .qn-item{ font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
    text-align:left; color:var(--ink-2); background:transparent; border:none;
    border-radius:10px; padding:7px 9px; display:flex; align-items:center; gap:6px;
    transition:background .16s, color .16s, transform .16s; }
  .qn-top{ font-weight:800; color:var(--lav-ink); background:var(--bg-2); margin-bottom:4px; }
  .qn-top:hover, .qn-item:hover{ background:var(--bg-2); color:var(--ink); }
  .qn-top.dim{ opacity:.45; }
  .qn-item .dot{ width:6px; height:6px; border-radius:50%; background:transparent; flex:0 0 auto; }
  .qn-item[aria-current="true"]{ background:var(--pink-soft); color:var(--pink-ink);
    font-weight:800; transform:translateX(3px); }
  .qn-item[aria-current="true"] .dot{ background:var(--pink); }
  html[data-theme="dark"] .qn-item[aria-current="true"]{ background:var(--lav-soft); color:var(--lav); }
  html[data-theme="dark"] .qn-item[aria-current="true"] .dot{ background:var(--lav); }
  .qn-item .cnt2{ margin-left:auto; font-size:10px; color:var(--ink-3); font-weight:600; }

  .qn-collapse{ display:none; position:absolute; left:-14px; top:16px;
    width:28px; height:34px; align-items:center; justify-content:center; cursor:pointer;
    font-size:12px; color:var(--ink-2); background:var(--surface);
    border:1.5px solid var(--line); border-right:none; border-radius:12px 0 0 12px; }

  .qn-sheet-btn{ display:none; margin-left:auto; align-items:center; gap:5px;
    font-family:inherit; font-size:11.5px; font-weight:800; cursor:pointer;
    color:var(--ink-2); background:var(--bg-2); border:1.5px solid var(--line);
    border-radius:12px; padding:8px 11px; }

  /* 폰 — 3개를 한 줄에 넣으면 글자가 눌려서, 엔돌핀은 윗줄에 크게 */
  @media (max-width:640px){
    .tabs{ flex-wrap:wrap; }
    .tab.me{ flex:1 1 100%; }
  }

  @media (max-width:767px){
    .qnav{ width:150px; padding:12px 10px; }
    .qn-item, .qn-top{ font-size:11.5px; padding:6px 8px; }
  }
  @media (max-width:767px){
    .qnav{ top:96px; right:0; border-radius:22px 0 0 22px; border-right:none; }
    .qn-collapse{ display:flex; }
    .qnav.folded{ width:34px; padding:12px 4px; }
    .qnav.folded .qn-body{ display:none; }
    .qnav.folded .qn-collapse{ left:auto; right:2px; border:none; background:transparent; }
  }
  @media (max-width:767px){
    .qnav{ position:fixed; top:auto; bottom:0; left:0; right:0; width:auto;
      border-radius:20px 20px 0 0; border-right:1.5px solid var(--line);
      padding:9px 12px calc(9px + env(safe-area-inset-bottom));
      animation:none; box-shadow:0 -8px 30px rgba(0,0,0,.14); }
    .qn-collapse{ display:none; }
    .qnav .qn-body{ display:flex !important; align-items:center; gap:8px; }
    .qn-sec{ padding:0; border:none !important; }
    .qn-sec + .qn-sec{ border-top:none; }
    .qn-h, .qn-prev, .qn-last{ display:none; }
    .seg{ grid-template-columns:auto auto; gap:4px; }
    .seg-b{ font-size:10.5px; padding:8px 9px; }
    .qn-refresh{ width:auto; padding:8px 11px; }
    .qn-refresh .rf-tx{ display:none; }
    .qn-note{ position:absolute; left:0; right:0; top:-26px; margin:0; }
    .qn-list{ position:fixed; left:0; right:0; bottom:64px; max-height:52vh;
      background:var(--surface); border-top:1.5px solid var(--line);
      border-radius:20px 20px 0 0; padding:12px 14px; gap:4px;
      box-shadow:0 -10px 34px rgba(0,0,0,.18);
      transform:translateY(112%); transition:transform .26s cubic-bezier(.2,.7,.3,1); }
    .qn-list.open{ transform:translateY(0); }
    .qn-sheet-btn{ display:flex !important; }
    #st-top{ bottom:78px !important; }
    body{ padding-bottom:96px; }
  }

  @media (prefers-reduced-motion:reduce){
    .qnav{ animation:none !important; }
    .qn-prev[data-state="on"] .pv-badge{ animation:none !important; }
    .qn-refresh.spin .rf-ico{ animation:none !important; }
  }

  /* ── 스트리머 검색 ── */
  .searchbar{ display:flex; align-items:center; gap:9px; margin-bottom:16px;
    background:#fff; border:2px solid #f1e8ee; border-radius:16px; padding:10px 14px; }
  html[data-theme="dark"] .searchbar{ background:var(--surface); border-color:var(--line); }
  .searchbar .s-ico{ font-size:15px; flex:0 0 auto; opacity:.7; }
  .searchbar input{ flex:1; min-width:0; border:none; outline:none; background:transparent;
    font-family:inherit; font-size:15px; color:inherit; }
  .searchbar input::placeholder{ color:#b4a8ae; }
  .s-clear{ flex:0 0 auto; cursor:pointer; font-size:13px; line-height:1;
    color:#8d8189; background:#f2ebfb; border:none; border-radius:50%;
    width:22px; height:22px; }
  html[data-theme="dark"] .s-clear{ background:var(--bg-2); color:var(--ink-3); }
  .s-count{ flex:0 0 auto; font-size:12.5px; font-weight:700; color:#7c4ddb; white-space:nowrap; }
  html[data-theme="dark"] .s-count{ color:var(--lav); }

  /* ── 리모컨: 지금 방송 상태 ── */
  .qn-live{ display:flex; align-items:center; justify-content:center; gap:7px;
    font-family:'Jua',sans-serif; font-size:15px; color:#fff; letter-spacing:.3px;
    border-radius:var(--r-pill); padding:9px 8px;
    background:linear-gradient(135deg,#8b5cf6,#c4b5fd); box-shadow:0 6px 16px rgba(124,58,237,.3); }
  .qn-live[data-state="on"]{ background:linear-gradient(135deg,#ff2d78,#ff8a6b);
    box-shadow:0 6px 18px rgba(255,45,120,.36); animation:qlPulse 2.4s ease-in-out infinite; }
  @keyframes qlPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
  .ql-dot{ width:9px; height:9px; border-radius:50%; border:2.5px solid #fff; flex:0 0 auto; }
  .qn-live[data-state="on"] .ql-dot{ background:#fff; animation:qlDot 1.2s infinite; }
  @keyframes qlDot{ 0%,100%{opacity:1} 50%{opacity:.3} }
  .qn-livesub{ font-size:10.5px; color:var(--ink-3); text-align:center; margin-top:6px; line-height:1.4; }

  /* 대학 현황판에선 리모컨 숨김 (티어표 전용) */
  .qnav[hidden]{ display:none !important; }
  @media (prefers-reduced-motion:reduce){
    .qn-live[data-state="on"]{ animation:none; }
    .qn-live[data-state="on"] .ql-dot{ animation:none; }
  }

  /* ── 리모컨: 방송 상태 필터 (클릭됨) ── */
  .qn-filter{ display:flex; flex-direction:column; gap:5px; }
  .qf-btn{ display:flex; align-items:center; gap:7px; cursor:pointer;
    font-family:inherit; font-size:12px; font-weight:800; text-align:left;
    color:var(--ink-2); background:var(--bg-2); border:1.5px solid var(--line);
    border-radius:12px; padding:8px 10px; transition:.16s; }
  .qf-btn:hover{ transform:translateY(-1px); border-color:var(--lav); }
  .qf-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto;
    border:2px solid currentColor; }
  .qf-btn.live .qf-dot{ border-color:#ff2d78; }
  .qf-btn.off  .qf-dot{ border-color:var(--ink-3); }
  .qf-nm{ white-space:nowrap; }
  .qf-n{ margin-left:auto; font-size:11px; font-weight:700; opacity:.85;
    background:rgba(0,0,0,.06); border-radius:var(--r-pill); padding:1px 7px; }
  html[data-theme="dark"] .qf-n{ background:rgba(255,255,255,.12); }
  /* 선택됨 */
  .qf-btn[aria-pressed="true"]{ color:#fff; border-color:transparent;
    background:linear-gradient(135deg,#8f5fe0,#a97ce8); box-shadow:0 6px 14px rgba(124,58,237,.28); }
  .qf-btn.live[aria-pressed="true"]{ background:linear-gradient(135deg,#ff2d78,#ff8a6b);
    box-shadow:0 6px 16px rgba(255,45,120,.34); }
  .qf-btn.live[aria-pressed="true"] .qf-dot{ border-color:#fff; background:#fff;
    animation:qlDot 1.2s infinite; }
  .qf-btn.off[aria-pressed="true"]{ background:linear-gradient(135deg,#6b7280,#9ca3af);
    box-shadow:0 6px 14px rgba(107,114,128,.3); }
  .qf-btn.off[aria-pressed="true"] .qf-dot{ border-color:#fff; }
  .qf-btn[aria-pressed="true"] .qf-n{ background:rgba(255,255,255,.24); }

  /* ── 대학 간판(마크) ── */
  .chip .ck-mk{ width:20px; height:20px; border-radius:6px; object-fit:cover;
    flex:0 0 auto; box-shadow:0 1px 3px rgba(0,0,0,.18); }
  .chip{ display:inline-flex; align-items:center; gap:7px; }

  /* 리모컨 — 대학 바로가기 */
  .qn-usec[hidden]{ display:none; }
  .qu-all{ width:100%; font-family:inherit; font-size:12px; font-weight:800; cursor:pointer;
    color:var(--ink-2); background:var(--bg-2); border:1.5px solid var(--line);
    border-radius:12px; padding:7px 10px; margin-bottom:7px; transition:.16s; }
  .qu-all:hover{ border-color:var(--lav); }
  .qu-all[aria-pressed="true"]{ color:#fff; border-color:transparent;
    background:linear-gradient(135deg,#8f5fe0,#a97ce8); box-shadow:0 6px 14px rgba(124,58,237,.28); }
  .qn-univ{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .qu-btn{ position:relative; aspect-ratio:1/1; padding:0; cursor:pointer; overflow:hidden;
    background:none; border:2px solid transparent; border-radius:12px; transition:.16s;
    box-shadow:0 2px 6px rgba(0,0,0,.14); }
  .qu-btn img{ width:100%; height:100%; object-fit:cover; display:block; }
  .qu-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.22); }
  .qu-btn[aria-pressed="true"]{ border-color:var(--pink);
    box-shadow:0 0 0 3px rgba(255,111,168,.26), 0 6px 14px rgba(0,0,0,.2); }
  .qu-btn .qu-n{ position:absolute; right:2px; bottom:2px; font-size:9px; font-weight:800;
    color:#fff; background:rgba(0,0,0,.62); border-radius:6px; padding:0 4px; line-height:14px; }
  .qu-btn .qu-lv{ position:absolute; left:3px; top:3px; width:7px; height:7px; border-radius:50%;
    background:#ff2d78; box-shadow:0 0 0 2px #fff; animation:qlDot 1.2s infinite; }

  @media (max-width:767px){
    /* 하단 바에서는 간판을 가로로 넘겨 봄 */
    .qn-usec .qn-h{ margin-bottom:5px; }
    .qu-all{ margin-bottom:6px; padding:5px 10px; }
    .qn-univ{ display:flex; gap:6px; overflow-x:auto; padding-bottom:3px;
      scrollbar-width:none; }
    .qn-univ::-webkit-scrollbar{ display:none; }
    .qu-btn{ flex:0 0 44px; width:44px; }
  }

  /* hidden 표시가 display 설정에 밀리지 않도록 (대학 현황판에선 티어 목록 감춤) */
  .qn-list[hidden], .qn-sheet-btn[hidden], .qn-usec[hidden], .qn-univ[hidden]{ display:none !important; }

  /* ── 리모컨: 종족 필터 ── */
  .qn-race{ display:flex; flex-direction:column; gap:5px; }
  .qr-btn{ display:flex; align-items:center; gap:7px; cursor:pointer;
    font-family:inherit; font-size:12px; font-weight:800; text-align:left;
    color:var(--ink-2); background:var(--bg-2); border:1.5px solid var(--line);
    border-radius:12px; padding:8px 10px; transition:.16s; }
  .qr-btn:hover{ transform:translateY(-1px); border-color:var(--lav); }
  .qr-nm{ white-space:nowrap; }
  .qr-n{ margin-left:auto; font-size:11px; font-weight:700; opacity:.85;
    background:rgba(0,0,0,.06); border-radius:var(--r-pill); padding:1px 7px; }
  html[data-theme="dark"] .qr-n{ background:rgba(255,255,255,.12); }
  .qr-btn[aria-pressed="true"]{ color:#fff; border-color:transparent; }
  .qr-btn.all[aria-pressed="true"]{ background:linear-gradient(135deg,#8f5fe0,#a97ce8);
    box-shadow:0 6px 14px rgba(124,58,237,.28); }
  .qr-btn.T[aria-pressed="true"]{ background:linear-gradient(135deg,#2f7dc0,#57a5e0);
    box-shadow:0 6px 14px rgba(47,125,192,.3); }
  .qr-btn.Z[aria-pressed="true"]{ background:linear-gradient(135deg,#7c4ddb,#a17ceb);
    box-shadow:0 6px 14px rgba(124,77,219,.3); }
  .qr-btn.P[aria-pressed="true"]{ background:linear-gradient(135deg,#d98908,#eeb03d);
    box-shadow:0 6px 14px rgba(217,137,8,.3); }
  .qr-btn[aria-pressed="true"] .qr-n{ background:rgba(255,255,255,.24); }

  /* 리모콘 대학 아이콘 말풍선 (star.js 가 body 에 하나 만들어 씁니다) */
  .qu-tip{ position:fixed; z-index:200; pointer-events:none;
    display:flex; align-items:center; gap:7px; white-space:nowrap;
    padding:8px 12px; border-radius:12px;
    font-family:'Jua',sans-serif; font-size:13.5px; color:#fff;
    background:rgba(48,40,58,.94); box-shadow:0 10px 26px rgba(0,0,0,.28);
    opacity:0; transform:translateY(-50%) scale(.93);
    transition:opacity .13s ease, transform .13s cubic-bezier(.16,1,.3,1); }
  .qu-tip.on{ opacity:1; transform:translateY(-50%) scale(1); }
  .qu-tip.up{ transform:translateY(0) scale(.93); }
  .qu-tip.up.on{ transform:translateY(0) scale(1); }
  .qu-tip b{ font-weight:400; letter-spacing:-.2px; }
  .qu-tip i{ font-style:normal; font-size:11.5px; opacity:.66; }
  .qu-tip u{ text-decoration:none; font-size:11px; font-weight:800;
    color:#ffd0e2; padding:2px 7px; border-radius:999px;
    background:rgba(255,111,168,.26); }
  /* 꼬리 — 왼쪽에 뜰 땐 오른쪽에, 위에 뜰 땐 아래에 */
  .qu-tip::after{ content:""; position:absolute; width:8px; height:8px;
    background:rgba(48,40,58,.94); transform:rotate(45deg); }
  .qu-tip:not(.up)::after{ right:-3px; top:50%; margin-top:-4px; }
  .qu-tip.up::after{ bottom:-3px; left:50%; margin-left:-4px; }

  /* ══ 티어 바로가기 가로 띠 ═══════════════════════════════
     예전엔 오른쪽 리모콘 안에 세로로 있었는데, 티어가 17개라
     스크롤해야 했습니다. 위쪽 가로 띠로 옮겨 한눈에 보이게 함.
     리모콘에는 '방송 상태'와 '종족'만 남습니다. */
  .tierbar{ position:sticky; top:8px; z-index:40;
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    padding:11px 13px; margin:0 0 18px;
    background:var(--surface); border:1.5px solid var(--line);
    border-radius:20px; box-shadow:var(--shadow-sm);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .tierbar .qn-top{ margin:0 4px 0 0; padding:7px 12px; border-radius:999px;
    font-size:12px; font-weight:800; flex:0 0 auto; }
  .tierbar .qn-item{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
    width:auto; margin:0; padding:7px 12px; border-radius:999px;
    font-size:12.5px; font-weight:800; letter-spacing:-.2px;
    border:1.5px solid var(--line); background:var(--bg-2); color:var(--ink-2);
    transition:transform .14s, border-color .14s, background .14s; }
  .tierbar .qn-item:hover{ transform:translateY(-2px); border-color:var(--line-2); }
  .tierbar .qn-item .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .tierbar .qn-item .cnt2{ margin-left:1px; font-size:10.5px; font-weight:700;
    color:var(--ink-3); }
  .tierbar .qn-item[aria-current="true"]{
    background:var(--pink-soft); color:var(--pink-ink); border-color:var(--pink); }
  .tierbar .qn-item[aria-current="true"] .cnt2{ color:var(--pink-ink); opacity:.75; }
  html[data-theme="dark"] .tierbar .qn-item[aria-current="true"]{
    background:var(--lav-soft); color:var(--lav); border-color:var(--lav); }
  @media (max-width:767px){
    .tierbar{ top:4px; gap:5px; padding:9px 10px; border-radius:16px;
      flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
    .tierbar::-webkit-scrollbar{ display:none; }
    .tierbar .qn-item, .tierbar .qn-top{ font-size:11.5px; padding:6px 10px; }
  }

  /* ══ ① 선수 프로필 창 ═══════════════════════════════════════
     카드를 누르면 열립니다. SOOP 방송국에 공개된 값만 보여줍니다. */
  .pf{ position:fixed; inset:0; z-index:300; display:flex;
    align-items:center; justify-content:center; padding:20px; }
  .pf[hidden]{ display:none !important; }
  .pf-dim{ position:absolute; inset:0; background:rgba(60,40,52,.44);
    backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
    opacity:0; transition:opacity .2s; }
  .pf.on .pf-dim{ opacity:1; }
  .pf-card{ position:relative; width:min(520px,100%); max-height:88vh; overflow-y:auto;
    background:var(--surface); border:1.5px solid var(--line); border-radius:26px;
    box-shadow:0 26px 70px rgba(160,80,120,.26); padding:26px 24px 22px;
    opacity:0; transform:translateY(16px) scale(.97);
    transition:opacity .22s, transform .22s cubic-bezier(.16,1,.3,1); }
  .pf.on .pf-card{ opacity:1; transform:none; }
  html[data-theme="dark"] .pf-card{ box-shadow:0 26px 70px rgba(0,0,0,.6); }

  .pf-x{ position:absolute; top:14px; right:14px; width:34px; height:34px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-size:21px; line-height:1; color:var(--ink-3); font-family:inherit;
    background:var(--bg-2); border:1.5px solid var(--line); border-radius:50%;
    transition:.16s; }
  .pf-x:hover{ color:var(--ink); border-color:var(--pink); transform:rotate(90deg); }

  /* 머리 */
  .pf-top{ display:flex; align-items:center; gap:15px; padding-right:38px; }
  .pf-face{ position:relative; width:76px; height:76px; flex:0 0 auto; border-radius:22px;
    overflow:hidden; background:var(--bg-2); border:2px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:30px; }
  .pf-face img{ width:100%; height:100%; object-fit:cover; }
  .pf-face.live{ border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-soft); }
  .pf-id{ min-width:0; }
  .pf-nm{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-family:'Jua',sans-serif; font-size:23px; letter-spacing:-.4px; }
  .pf-live{ display:inline-flex; align-items:center; gap:5px; font-family:'Pretendard',sans-serif;
    font-size:10.5px; font-weight:900; letter-spacing:.5px; color:#fff;
    background:linear-gradient(135deg,#ff5f9e,#ff8ab8);
    padding:3px 9px; border-radius:999px; }
  .pf-live i{ width:5px; height:5px; border-radius:50%; background:#fff;
    animation:pfBlink 1.3s infinite; }
  @keyframes pfBlink{ 0%,100%{opacity:1} 50%{opacity:.25} }
  .pf-uv{ margin-top:5px; font-size:13px; font-weight:700; color:var(--ink-3); }
  .pf-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
  .pf-tag{ font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px;
    color:#fff; background:var(--tc,#999); }
  .pf-tag.rc{ opacity:.86; }

  /* 불러오는 중 · 없음 */
  .pf-load{ display:flex; align-items:center; justify-content:center; gap:9px;
    padding:46px 0 40px; font-size:13.5px; font-weight:700; color:var(--ink-3); }
  .pf-load i{ width:15px; height:15px; border-radius:50%; display:block;
    border:2.5px solid var(--line-2); border-top-color:var(--pink);
    animation:pfSpin .8s linear infinite; }
  @keyframes pfSpin{ to{ transform:rotate(360deg); } }
  .pf-none{ margin-top:20px; padding:22px 18px; text-align:center;
    background:var(--bg-2); border-radius:var(--r); }
  .pf-none b{ display:block; font-family:'Jua',sans-serif; font-weight:400; font-size:16px; }
  .pf-none span{ display:block; margin-top:7px; font-size:13px; line-height:1.65; color:var(--ink-3); }

  /* 몸통 */
  .pf-body{ margin-top:20px; }
  .pf-say{ padding:13px 15px; border-radius:var(--r); font-size:13.5px; line-height:1.6;
    color:var(--ink-2); background:var(--bg-2); white-space:pre-wrap; word-break:break-word; }
  .pf-now{ margin-top:11px; padding:14px 16px; border-radius:var(--r);
    background:linear-gradient(135deg,var(--pink-soft),var(--lav-soft)); }
  .pf-now-t{ font-family:'Jua',sans-serif; font-size:15.5px; line-height:1.45; }
  .pf-now-v{ margin-top:6px; font-size:12.5px; font-weight:800; color:var(--pink-ink); }

  .pf-nums{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; }
  .pf-cell{ display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:14px 6px 12px; border-radius:var(--r); background:var(--bg-2); text-align:center; }
  .pc-ic{ font-size:15px; }
  .pc-v{ font-family:'Jua',sans-serif; font-size:15px; letter-spacing:-.3px; word-break:keep-all; }
  .pc-l{ font-size:10.5px; font-weight:700; color:var(--ink-3); }

  .pf-since{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
    margin-top:11px; padding:11px 15px; border-radius:var(--r);
    font-size:13px; color:var(--ink-2); background:var(--bg-2); }
  .pf-since b{ font-weight:800; color:var(--pink-ink); }
  .pf-since i{ font-style:normal; margin-left:auto; font-size:11.5px; color:var(--ink-3); }

  .pf-sec{ display:flex; align-items:center; margin:20px 0 10px;
    font-family:'Jua',sans-serif; font-size:15px; }
  .pf-sec span{ margin-left:auto; font-family:'Pretendard',sans-serif;
    font-size:11.5px; font-weight:700; color:var(--ink-3); }
  .pf-vods{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .pf-vod{ display:block; padding:8px; border-radius:14px; background:var(--bg-2);
    border:1.5px solid transparent; transition:.16s; }
  .pf-vod:hover{ border-color:var(--pink); transform:translateY(-2px); }
  .pv-th{ display:block; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
    background:var(--line); margin-bottom:7px; }
  .pv-th img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pv-t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; font-size:12.5px; font-weight:700; line-height:1.45; }
  .pv-d{ display:block; margin-top:4px; font-size:10.5px; color:var(--ink-3); }

  .pf-go{ display:flex; gap:8px; margin-top:20px; }
  .pf-btn{ flex:1; text-align:center; padding:13px 10px; border-radius:var(--r-pill);
    font-size:13.5px; font-weight:800; color:var(--ink-2);
    background:var(--bg-2); border:1.5px solid var(--line); transition:.16s; }
  .pf-btn:hover{ border-color:var(--pink); transform:translateY(-1px); }
  .pf-btn.main{ color:#fff; border-color:transparent;
    background:linear-gradient(135deg,#ff5f9e,#ff8ab8);
    box-shadow:0 8px 20px rgba(255,95,158,.3); }

  .pcard{ cursor:pointer; }

  @media (max-width:520px){
    .pf{ padding:0; align-items:flex-end; }
    .pf-card{ width:100%; max-height:92vh; border-radius:26px 26px 0 0; padding:22px 18px 18px; }
    .pf-nums{ grid-template-columns:1fr 1fr; }
    .pf-face{ width:64px; height:64px; }
    .pf-nm{ font-size:20px; }
  }
  @media (prefers-reduced-motion:reduce){
    .pf-card, .pf-dim{ transition:none; }
    .pf-live i{ animation:none; }
  }

  /* 대학대전 전적 */
  .mcsec{ margin:0 0 24px; }
  .mcsec:has(#luv-match:empty){ display:none; }
  .mc-h{ font-family:'Jua',sans-serif; font-weight:400; font-size:18px;
    letter-spacing:-.3px; margin:0 0 12px 3px; }

  /* ── 🕹 걸어온 길 — 왼쪽 예전 / 오른쪽 현재 ──
     폰에서는 자리가 좁으면 저절로 위아래로 쌓입니다. */
  .way{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
  .way-box{ position:relative; overflow:hidden; padding:16px 18px 18px;
    border-radius:var(--r-lg); background:var(--surface);
    border:2px solid var(--line); box-shadow:var(--shadow-sm); }
  .way-box::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; }
  .way-box.past::before{ background:linear-gradient(90deg,#7c4ddb,#a17ceb); }
  .way-box.now::before{  background:linear-gradient(90deg,#2f7dc0,#57a5e0); }
  .way-box.past{ opacity:.92; }

  .way-h{ display:flex; align-items:center; gap:8px; }
  .way-lb{ font-family:'Jua',sans-serif; font-size:15px; color:var(--ink-3);
    background:var(--bg-2); border-radius:var(--r-pill); padding:4px 13px; }
  .way-box.now .way-lb{ color:#fff; background:linear-gradient(135deg,#2f7dc0,#57a5e0); }

  .way-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  .way-tag{ font-family:'Jua',sans-serif; font-size:14px; color:#fff;
    padding:5px 13px; border-radius:var(--r-pill); }
  .way-tag.tier{ background:#7c4ddb; }
  .way-tag.tier.baby{ background:#d183ae; }
  .way-tag.zerg{ background:#7c4ddb; }
  .way-tag.terran{ background:#2f7dc0; }

  .way-rec{ margin-top:14px; padding-top:13px; border-top:1.5px dashed var(--line-2); }
  .way-line{ display:flex; align-items:baseline; gap:10px; margin-top:4px; }
  .way-k{ font-family:'Jua',sans-serif; font-size:13.5px; color:var(--ink-3); min-width:58px; }
  .way-v{ font-size:16px; font-weight:800; color:var(--ink); }
  .way-v b{ color:var(--slate); }
  .way-v.pink{ font-family:'Jua',sans-serif; font-weight:400; font-size:20px; color:var(--pink-ink); }
  .way-bar{ margin-top:10px; height:9px; border-radius:var(--r-pill);
    background:rgba(0,0,0,.07); overflow:hidden; }
  html[data-theme="dark"] .way-bar{ background:rgba(255,255,255,.1); }
  .way-bar span{ display:block; height:100%; border-radius:var(--r-pill);
    background:linear-gradient(90deg,#7c4ddb,#a17ceb); }
  .way-note{ font-size:13.5px; line-height:1.7; color:var(--ink-3); }

  @media (max-width:767px){
    .way{ grid-template-columns:1fr; }
    .way-box{ padding:15px 16px 16px; }
  }

  /* 아이디를 못 찾은 사람 — '방송 안 함' 과 구분되게 */
  .pbadge.none{ background:#ece9f3; color:#8b83a3; }
  html[data-theme="dark"] .pbadge.none{ background:#2b2745; color:#a79fc4; }
  .pcard.none{ opacity:.72; border-style:dashed; }
  .pcard.none .pthumb{ filter:grayscale(.5); }

  /* 아무도 안 보일 때 '전체 보기' 단추 */
  .empty-all{ margin-top:14px; padding:11px 22px; cursor:pointer; font-family:inherit;
    font-size:13.5px; font-weight:800; color:#fff; border:none; border-radius:999px;
    background:linear-gradient(135deg,#ff6fa8,#ff96c0);
    box-shadow:0 8px 20px rgba(255,111,168,.3); }
  .empty-all:hover{ transform:translateY(-1px); }

  /* ── 카드 오른쪽 방송국 단추 ── */
  .pcard{ position:relative; }
  .pgo{ position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:38px; height:38px; flex:0 0 auto; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    border-radius:13px; border:1.5px solid var(--line);
    background:var(--bg-2); color:var(--ink-3);
    transition:transform .16s, background .16s, color .16s, border-color .16s; }
  .pgo svg{ width:19px; height:19px; fill:none; stroke:currentColor;
    stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .pgo:hover, .pgo:focus-visible{ color:#fff; border-color:transparent;
    background:linear-gradient(135deg,#ff5f9e,#ff8ab8);
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 7px 16px rgba(255,95,158,.34); }
  .pgo:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }
  .pcard.live .pgo{ color:var(--pink-ink); border-color:var(--pink); }
  /* 단추 자리만큼 글자를 비워둡니다 */
  .pcard .pbody{ padding-right:44px; }
  @media (max-width:520px){
    .pgo{ width:34px; height:34px; right:8px; }
    .pgo svg{ width:17px; height:17px; }
    .pcard .pbody{ padding-right:38px; }
  }

  /* ══ 가로 필터 띠 (방송 상태 + 종족) ══════════════════
     예전엔 오른쪽 리모콘에 세로로 있었는데, 가로가 눈이 편해서 위로 옮김.
     리모콘에는 '티어로 이동' 과 '대학 간판' 만 남습니다. */
  .fbar{ position:sticky; top:8px; z-index:45;
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    padding:10px 12px; margin:0 0 18px;
    background:var(--surface); border:1.5px solid var(--line);
    border-radius:20px; box-shadow:var(--shadow-sm);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .fbar .fb-grp{ display:flex; flex-direction:row; gap:6px; flex-wrap:wrap; }
  .fb-sep{ width:1.5px; align-self:stretch; margin:2px 4px;
    background:var(--line); border-radius:2px; }
  .fbar .qf-btn, .fbar .qr-btn{ width:auto; justify-content:center; }
  .fbar .qn-livesub{ margin:0 0 0 auto; text-align:right; white-space:nowrap; }
  @media (max-width:900px){
    .fb-sep{ display:none; }
    .fbar .qn-livesub{ margin:2px 0 0; width:100%; text-align:center; }
  }
  @media (max-width:520px){
    .fbar{ top:4px; gap:6px; padding:9px 10px; border-radius:16px; }
    .fbar .qf-btn, .fbar .qr-btn{ padding:6px 10px; font-size:11.5px; }
  }

  /* ══════════════════════════════════════════════════════
     글씨 키우기 · 정리 (2026-08-26)
     화면을 넓게 쓰게 되면서 글씨가 상대적으로 작아 보여서 전부 키웠습니다.
     ══════════════════════════════════════════════════════ */
  .ttl{ font-size:31px; }
  .home{ font-size:16.5px; }
  .stamp{ font-size:13.5px; }
  #st-refresh{ font-size:14px; padding:7px 14px; }

  .tab{ font-size:19px; padding:15px 8px; }
  .chip{ font-size:16px; padding:9px 15px; }
  .chip .n, .chip .lv{ font-size:13px; padding:2px 9px; }

  #st-search{ font-size:16px; }
  .s-count{ font-size:13.5px; }

  /* 선수 카드 */
  .pcard{ padding:15px 14px; }
  .pthumb{ width:56px; height:56px; font-size:25px; }
  .pname{ font-size:19px; margin-top:6px; }
  .pmeta{ font-size:13.5px; margin-top:3px; }
  .ptitle{ font-size:13.5px; margin-top:4px; }
  .pview{ font-size:13.5px; margin-top:4px; }
  .pbadge{ font-size:12px; padding:3px 10px; }
  .ptier, .prace{ font-size:12px; padding:2px 9px; }

  /* 티어표 */
  .tlabel .tl-nm{ font-size:23px; }
  .tlabel .cnt{ font-size:13.5px; }
  .trow{ padding:20px 22px; }
  .tempty{ font-size:14.5px; }
  .empty{ font-size:17px; padding:44px 0; }
  .note{ font-size:13.5px; margin-top:32px; }

  /* 가로 띠 — 두 줄 구조 */
  .fbar{ flex-direction:column; align-items:stretch; gap:10px; padding:13px 15px; }
  .fbar .fb-row{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
  .fbar .fb-grp{ gap:7px; }
  .fbar .qf-btn, .fbar .qr-btn{ font-size:14.5px; padding:9px 15px; border-radius:999px; }
  .fbar .qf-n, .fbar .qr-n{ font-size:12.5px; }
  .fb-sep{ margin:0 6px; }

  /* 둘째 줄 — 티어 이동 */
  .fb-tiers{ display:flex; flex-direction:row; flex-wrap:wrap; gap:7px;
    max-height:none; overflow:visible;
    padding-top:11px; border-top:1.5px solid var(--line); }
  .fb-tiers[hidden]{ display:none !important; }
  .fb-tiers .qn-top{ margin:0 5px 0 0; padding:8px 14px; border-radius:999px;
    font-size:13.5px; font-weight:800; flex:0 0 auto; }
  .fb-tiers .qn-item{ display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
    width:auto; margin:0; padding:8px 14px; border-radius:999px;
    font-size:14.5px; font-weight:800; letter-spacing:-.2px;
    border:1.5px solid var(--line); background:var(--bg-2); color:var(--ink-2);
    transition:transform .14s, border-color .14s, background .14s; }
  .fb-tiers .qn-item:hover{ transform:translateY(-2px); border-color:var(--line-2); }
  .fb-tiers .qn-item .dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
  .fb-tiers .qn-item .cnt2{ margin-left:1px; font-size:12px; font-weight:700; color:var(--ink-3); }
  .fb-tiers .qn-item[aria-current="true"]{
    background:var(--pink-soft); color:var(--pink-ink); border-color:var(--pink); }
  html[data-theme="dark"] .fb-tiers .qn-item[aria-current="true"]{
    background:var(--lav-soft); color:var(--lav); border-color:var(--lav); }

  /* 리모콘이 사라졌으니 오른쪽 여백도 없앰 */
  @media (min-width:1000px){
    body{ padding-left:26px; padding-right:26px;
      --page-pad-l:26px; --page-pad-r:26px; }
    .wrap{ margin:0 auto; }
  }

  @media (max-width:767px){
    .ttl{ font-size:24px; }
    .tab{ font-size:16px; padding:13px 6px; }
    .chip{ font-size:14.5px; padding:8px 13px; }
    .pname{ font-size:17.5px; }
    .tlabel .tl-nm{ font-size:20px; }
    .fbar{ padding:11px 12px; gap:8px; }
    .fbar .qf-btn, .fbar .qr-btn{ font-size:13px; padding:8px 12px; }
    .fb-tiers .qn-item{ font-size:13px; padding:7px 12px; }
    .fb-tiers{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
    .fb-tiers::-webkit-scrollbar{ display:none; }
  }

  /* ══════════════════════════════════════════════════════
     위쪽 고정 + 칸 맞춘 격자 + 글씨 더 키움 (2026-08-26)
     ══════════════════════════════════════════════════════ */

  /* ── 위에 붙어 따라오는 머리 ── */
  .headfix{ position:sticky; top:var(--nav-h,0px); z-index:60;   /* 공통 헤더 높이만큼 내려서 겹치지 않게 */
    padding:10px 0 12px; margin-bottom:16px;
    background:linear-gradient(#fffaf3 78%, rgba(255,250,243,.86));
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  html[data-theme="dark"] .headfix{
    background:linear-gradient(var(--bg) 78%, rgba(15,18,32,.86)); }
  .headfix .fbar{ position:static; margin:0; }
  .headfix .tabs, .headfix .searchbar{ margin-bottom:10px; }
  .headfix .chips{ margin:11px 0 0; padding-top:11px; border-top:1.5px solid var(--line); }
  .headfix .chips[hidden]{ display:none !important; }

  /* ── 목록을 볼 때는 위 고정줄을 얇게 ─────────────────────
     처음 들어오면 탭·검색·필터가 다 보입니다.
     스크롤을 내리면 탭·검색·요약줄을 감추고 필터만 남겨서
     선수 카드가 훨씬 많이 보이게 합니다(약 420px → 150px).
     위로 올리거나 손잡이를 누르면 다시 펼쳐집니다.
     ※ 다른 규칙에 밀리지 않게 !important 를 씁니다. */
  body.hf-slim .headfix .tabs,
  body.hf-slim .headfix .searchbar,
  body.hf-slim .headfix .univinfo{ display:none !important; }
  /* 대학 고르기는 한 줄만 남기고 옆으로 밀어 봅니다 */
  body.hf-slim .headfix .chips{
    flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none;
    max-height:48px; margin:8px 0 0 !important; padding-top:8px !important; }
  body.hf-slim .headfix .chips::-webkit-scrollbar{ display:none; }
  body.hf-slim .headfix .chips .chip{ flex:0 0 auto; }
  body.hf-slim .headfix .fbar{ padding:8px 11px !important; gap:6px !important; }
  /* 얇아졌을 때 눌러서 다시 펼치는 손잡이 */
  .hf-grip{ display:none; }
  body.hf-slim .hf-grip{
    display:block; width:44px; height:4px; margin:7px auto 0;
    background:var(--line); border-radius:99px; cursor:pointer; }

  /* ── 칸을 똑같이 맞춘 격자 (티어·대학 공통) ── */
  .fb-tiers{ display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:7px;
    padding-top:11px; border-top:1.5px solid var(--line); }
  .fb-tiers .qn-top{ grid-column:1 / -1; width:100%; margin:0 0 3px;
    justify-content:center; }
  .fb-tiers .qn-item{ display:flex !important; width:100% !important;
    justify-content:flex-start; align-items:center; gap:7px;
    padding:9px 12px; font-size:15.5px; }
  .fb-tiers .qn-item .cnt2{ margin-left:auto !important; font-size:13px; }

  .chips{ display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:7px; }
  .chips .chip{ display:flex; width:100%; justify-content:flex-start;
    align-items:center; gap:7px; padding:9px 12px; font-size:16.5px; }
  .chips .chip .ck-mk{ flex:0 0 auto; }
  .chips .chip .n{ margin-left:auto; }
  .chips .chip .lv{ margin-left:0; }

  /* ── 글씨 한 번 더 키움 ── */
  .ttl{ font-size:34px; }
  .home{ font-size:18px; }
  .tab{ font-size:21px; padding:16px 8px; }
  #st-search{ font-size:17.5px; padding:14px 44px; }
  .s-count{ font-size:14.5px; }
  .fbar .qf-btn, .fbar .qr-btn{ font-size:16px; padding:10px 17px; }
  .fbar .qf-n, .fbar .qr-n{ font-size:13.5px; }

  .pcard{ padding:16px 15px; }
  .pthumb{ width:62px; height:62px; font-size:27px; }
  .pname{ font-size:21px; margin-top:6px; }
  .pmeta{ font-size:15px; margin-top:4px; }
  .ptitle{ font-size:14.5px; margin-top:5px; }
  .pview{ font-size:14.5px; }
  .pbadge{ font-size:13px; padding:3px 11px; }
  .ptier, .prace{ font-size:13px; padding:3px 10px; }
  .plist{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
  .tmembers{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
  .tlabel .tl-nm{ font-size:26px; }
  .tlabel .cnt{ font-size:15px; }
  .empty{ font-size:18px; }
  .note{ font-size:14.5px; }
  .trow{ scroll-margin-top:280px; }     /* 고정 머리에 가리지 않게 */

  @media (max-width:767px){
    .headfix{ padding:8px 0 10px; }
    .ttl{ font-size:25px; }
    .tab{ font-size:17px; padding:13px 6px; }
    #st-search{ font-size:16px; padding:12px 40px; }
    .fbar .qf-btn, .fbar .qr-btn{ font-size:13.5px; padding:8px 12px; }
    .fb-tiers{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)) !important;
      overflow:visible !important; }
    .fb-tiers .qn-item{ font-size:13.5px; padding:8px 10px; }
    .chips{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)) !important; }
    .chips .chip{ font-size:14.5px; padding:8px 10px; }
    .pname{ font-size:18px; }
    .tlabel .tl-nm{ font-size:21px; }
    .trow{ scroll-margin-top:240px; }
  }

  /* ── 고정 머리 높이 다듬기 (2026-08-26) ──
     .fbar 가 '세로 + 줄바꿈' 이라 높이가 이상하게 늘어났었습니다.
     세로 방향에서는 줄바꿈을 꺼야 합니다. */
  .fbar{ flex-wrap:nowrap !important; }

  /* 머리가 화면을 너무 먹지 않게 */
  .headfix{ padding:8px 0 10px; margin-bottom:14px;
    max-height:52vh; overflow-y:auto; scrollbar-width:thin; }
  .headfix .tabs, .headfix .searchbar{ margin-bottom:8px; }
  .headfix .fbar{ padding:11px 13px; gap:9px; }
  #st-search{ padding:12px 42px; }

  /* '맨 위로' 는 한 칸만 차지 (한 줄을 통째로 쓰지 않게) */
  .fb-tiers .qn-top{ grid-column:auto !important; margin:0 !important;
    justify-content:flex-start !important; }
  .fb-tiers{ align-content:start; grid-auto-rows:min-content; }
  /* 15개를 한 줄에 넣으면 글자가 잘려서, 줄을 고르게 나눕니다 (8 + 7) */
  .chips{ align-content:start; grid-auto-rows:min-content;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) !important; }
  @media (min-width:1180px){
    .chips{ grid-template-columns:repeat(8,1fr) !important; }
  }
  .headfix .chips{ margin:9px 0 0; padding-top:9px; }
  .chips .chip{ padding:8px 9px; font-size:15.5px; gap:5px; }
  .chips .chip .n, .chips .chip .lv{ font-size:11.5px; padding:1px 6px; }
  .chips .chip .ck-mk{ width:19px; height:19px; }
  @media (max-width:900px){
    .chips{ grid-template-columns:repeat(auto-fill,minmax(112px,1fr)) !important; }
  }

  /* ── 대학 칩 = 이름만 (간판·숫자 뺌) ── */
  .chips{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)) !important; gap:7px; }
  .chips .chip{ justify-content:center !important; text-align:center;
    padding:10px 8px; font-size:16.5px; gap:0; }
  .chips .chip .ck-mk{ display:none !important; }

  /* ── 고른 대학 설명 한 줄 ── */
  .univinfo{ display:flex; align-items:center; flex-wrap:wrap; gap:10px;
    margin-top:9px; padding:9px 14px; border-radius:14px;
    background:var(--bg-2); font-size:15px; }
  .univinfo[hidden]{ display:none !important; }
  .univinfo b{ font-family:'Jua',sans-serif; font-weight:400; font-size:18px; color:var(--ink); }
  .univinfo .ui-n{ font-weight:800; color:var(--ink-2); }
  .univinfo .ui-live{ display:inline-flex; align-items:center; gap:6px;
    font-weight:800; color:#fff; padding:3px 11px; border-radius:999px;
    background:linear-gradient(135deg,#ff5f9e,#ff8ab8); font-size:13.5px; }
  .univinfo .ui-live i{ width:6px; height:6px; border-radius:50%; background:#fff;
    animation:uiBlink 1.3s infinite; }
  @keyframes uiBlink{ 0%,100%{opacity:1} 50%{opacity:.25} }
  .univinfo .ui-off{ font-size:13.5px; color:var(--ink-3); font-weight:700; }
  .univinfo .ui-none{ margin-left:auto; font-size:12.5px; color:var(--ink-3); }
  @media (max-width:767px){
    .chips{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr)) !important; }
    .chips .chip{ font-size:14px; padding:8px 6px; }
    .univinfo{ font-size:13.5px; padding:8px 11px; gap:8px; }
    .univinfo b{ font-size:16px; }
    .univinfo .ui-none{ margin-left:0; }
  }
  @media (prefers-reduced-motion:reduce){ .univinfo .ui-live i{ animation:none; } }

  /* ── 티어 줄 나누기 · 글씨 한 번 더 키움 (2026-08-26) ── */
  .fb-tiers .qn-item.nl{ grid-column-start:1; }   /* 0티어부터 새 줄 */

  .ttl{ font-size:38px; }
  .home{ font-size:19px; }
  .tab{ font-size:23px; padding:17px 8px; }
  #st-search{ font-size:19px; padding:14px 46px; }
  .s-count{ font-size:16px; }
  .stamp{ font-size:15px; }
  #st-refresh{ font-size:15px; padding:8px 15px; }

  .fbar .qf-btn, .fbar .qr-btn{ font-size:17px; padding:11px 18px; }
  .fbar .qf-n, .fbar .qr-n{ font-size:14.5px; }
  .fb-tiers .qn-item{ font-size:17px; padding:10px 13px; }
  .fb-tiers .qn-item .cnt2{ font-size:14px; }
  .fb-tiers .qn-top{ font-size:15px; padding:10px 13px; }
  .fb-tiers{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)) !important; }

  .chips .chip{ font-size:18.5px; padding:11px 8px; }
  .chips{ grid-template-columns:repeat(auto-fill,minmax(116px,1fr)) !important; }
  .univinfo{ font-size:16.5px; padding:10px 15px; }
  .univinfo b{ font-size:20px; }
  .univinfo .ui-live, .univinfo .ui-off{ font-size:15px; }

  .pname{ font-size:23px; }
  .pmeta{ font-size:16px; }
  .ptitle{ font-size:15.5px; }
  .pview{ font-size:15.5px; }
  .pbadge{ font-size:14px; padding:4px 12px; }
  .ptier, .prace{ font-size:14px; padding:3px 11px; }
  .pthumb{ width:66px; height:66px; font-size:29px; }
  .plist, .tmembers{ grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); }
  .tlabel .tl-nm{ font-size:29px; }
  .tlabel .cnt{ font-size:16.5px; }
  .empty{ font-size:19px; }
  .note{ font-size:15.5px; }
  .pgo{ width:44px; height:44px; }
  .pgo svg{ width:22px; height:22px; }
  .pcard .pbody{ padding-right:50px; }

  @media (max-width:767px){
    .ttl{ font-size:26px; }
    .tab{ font-size:18px; padding:14px 6px; }
    #st-search{ font-size:16.5px; padding:12px 40px; }
    .fbar .qf-btn, .fbar .qr-btn{ font-size:14px; padding:8px 12px; }
    .fb-tiers{ grid-template-columns:repeat(auto-fill,minmax(106px,1fr)) !important; }
    .fb-tiers .qn-item{ font-size:14px; padding:8px 10px; }
    .chips .chip{ font-size:15px; padding:9px 6px; }
    .pname{ font-size:19px; }
    .pmeta, .ptitle, .pview{ font-size:14px; }
    .tlabel .tl-nm{ font-size:22px; }
    .pgo{ width:38px; height:38px; }
    .pcard .pbody{ padding-right:44px; }
  }

/* ══════════════════════════════════════════════════════
   GAME › 스타크래프트 하위 페이지용 — 2026-09-05
   화면이 하나뿐이라 탭 줄을 숨깁니다.
   ★ 탭 버튼(.tab)은 지우지 않고 '숨기기만' 합니다.
     star.js 가 '지금 어느 화면인지' 를 .tab.on 으로 판단하기 때문에,
     지워버리면 검색·필터 접힘 같은 동작이 헷갈립니다.
   ══════════════════════════════════════════════════════ */
body.one-view .tabs{ display:none !important; }