/* Pretendard — 한글 UI 라벨용. 시스템 고딕 폴백은 작은 크기에서 뭉개진다 */
  @font-face{font-family:'Pretendard';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/pretendard-400.d9cd08da.woff2') format('woff2')}
  @font-face{font-family:'Pretendard';font-style:normal;font-display:swap;font-weight:600;src:url('/fonts/pretendard-600.12a67cd8.woff2') format('woff2')}
  @font-face{font-family:'Pretendard';font-style:normal;font-display:swap;font-weight:700;src:url('/fonts/pretendard-700.948db842.woff2') format('woff2')}
  @font-face{font-family:'Pretendard';font-style:normal;font-display:swap;font-weight:800;src:url('/fonts/pretendard-800.b935e6f7.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")}

  /* ═══════════════════════════════════════════════════════════════════
     base.css — esportstransfer.com 과 fantasy.esportstransfer.com 이 함께 쓰는 바탕.
     원본은 esportstransfer 저장소이고, 판타지는 빌드 때 복사한다(lol-fantasy/scripts/sync_base.sh).
     여기 있는 것: 토큰 · 리셋 · 헤더 두 줄 · 기본 부품(.card .btn .badge .role .rate 표).
     여기 없는 것: 각 제품의 화면 규칙(app.css).
     ═══════════════════════════════════════════════════════════════════ */
  :root{
    /* 표면: 슬레이트 4단 — 청색기 있는 검정. Figma 조합집으로 치면 'Blue eclipse' 방향 */
    --bg:#06090f; --bg2:#0b111c; --panel:#0f1622; --panel2:#161f2e;
    --line:#1c2635; --line2:#293448;
    /* 글자. --mut 은 세 바탕(bg·panel·panel2) 모두에서 4.5:1 을 넘는 값이어야 한다 —
       예전 #737f95 는 panel2 위에서 4.09 로 미달이었고, 흐린 글자가 안 읽히는 원인이었다. */
    --txt:#e4e9f2; --mut:#8b97ad;
    /* 강조색 없음 — 크롬(헤더·탭·버튼)은 무채색. 채도는 데이터에만 배급한다.
       본진: 포지션·평점 / 판타지: 코인·점수(--gold). */
    --gold:#f5c451; --silver:#c9d4e8; --bronze:#e8a06a;
    /* 데이터색: 계약 상태(화면에서는 색을 안 쓰지만 카드·그래프용으로 남긴다) */
    --fa:#ffa53d; --stay:#3fd18b; --unk:#5b6079;
    /* 데이터색: 포지션 (롤 팬에게 학습된 언어 — 변경 금지) */
    --top:#e05656; --jgl:#4ade80; --mid:#5aa9ff; --bot:#ffcf4d; --sup:#c98bff;
    /* 모서리 3단 */
    --r-panel:10px; --r-ctl:7px; --r-pill:20px;
    /* 페이지 폭. 헤더가 이 값을 쓰므로 각 사이트의 본문 폭과 같아야 한다
       (판타지는 app.css 에서 860px 로 낮춘다 — 헤더만 넓으면 로고가 본문 밖으로 나간다) */
    --w-page:1180px;
    /* 간격 눈금 — gap·padding 은 이 값들만 쓴다. --s0 은 붙은 것들 사이의 실금 */
    --s0:2px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
    /* 글꼴 */
    --f-body:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --f-head:"Barlow Condensed","Pretendard","Apple SD Gothic Neo",sans-serif;
    /* 글자 크기 — 역할별로 하나씩. 개별 규칙에 px 를 쓰지 말 것.
       11px 이 바닥이다: 그보다 작은 글자를 흐린 색으로 두면 안 읽힌다. */
    --fs-hero:17px; --fs-title:15px; --fs-row:13.5px; --fs-note:13px; --fs-meta:12px; --fs-micro:11px;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{background:var(--bg);color:var(--txt);font-family:var(--f-body);
    -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:var(--line2);border-radius:6px}
  ::-webkit-scrollbar-track{background:transparent}
  :focus-visible{outline:2px solid var(--txt);outline-offset:2px;border-radius:4px}
  .num{font-variant-numeric:tabular-nums}
  /* 큰 숫자(평점·득표·일치율)는 콘덴스드로 — 스포츠 데이터 화면의 관용이고 이 사이트의 얼굴 */
  .fig{font-family:var(--f-head);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}

  /* ── 헤더 두 줄 ─────────────────────────────────────────────────────
     1행: 마크 · 워드마크 · 제품 스위치(이적시장 | 판타지) · 오른쪽 자리(제품마다 다름)
     2행: 그 제품의 탭.  1행 마크업은 두 사이트가 같아야 한다(검사가 본다). */
  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-row1{max-width:var(--w-page);margin:0 auto;padding:0 20px;height:52px;display:flex;align-items:center;gap:var(--s3)}
  .brand{display:flex;align-items:center;font-weight:800;letter-spacing:-.3px;flex:none;min-width:0}
  .brand a{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:inherit}
  .brand .mark{width:28px;height:28px;flex:none;border-radius:8px}
  .brand b{font-size:15px;white-space:nowrap}
  .products{display:flex;gap:var(--s0);background:var(--panel);padding:3px;border-radius:var(--r-ctl);
    border:1px solid var(--line);flex:none;margin-left:var(--s1)}
  .products a{text-decoration:none;color:var(--mut);font-family:var(--f-head);font-weight:700;font-size:13px;
    letter-spacing:.06em;padding:5px 12px;border-radius:5px;transition:.12s;white-space:nowrap}
  .products a:hover{color:var(--txt)}
  .products a.on{background:var(--panel2);color:var(--txt);box-shadow:inset 0 -2px 0 var(--txt)}
  .top-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2);flex:none}
  .langbtn{display:inline-flex;align-items:center;text-decoration:none;
    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)}
  .top-row2{max-width:var(--w-page);margin:0 auto;padding:0 20px}
  nav.tabs{display:flex;gap:var(--s0);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs a,nav.tabs button{border:0;background:transparent;color:var(--mut);font-weight:700;font-size:13px;
    padding:9px 12px;border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;
    display:inline-flex;align-items:center;transition:.12s;font-family:inherit}
  nav.tabs a:hover,nav.tabs button:hover{color:var(--txt)}
  nav.tabs a.on,nav.tabs button.on{color:var(--txt);border-bottom-color:var(--txt)}
  @media(max-width:560px){
    .top-row1{padding:0 12px;gap:var(--s2)}
    .brand b{font-size:14px}
    .products a{padding:5px 9px;font-size:12px}
    .top-row2{padding:0 6px}
    nav.tabs a,nav.tabs button{padding:10px 10px;font-size:12.5px;min-height:44px}
  }

  /* ── 기본 부품 ──────────────────────────────────────────────────── */
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
  .btn{border:0;padding:9px 16px;border-radius:var(--r-ctl);font-weight:800;font-size:14px;font-family:inherit}
  .btn.ghost{background:var(--panel);border:1px solid var(--line2);color:var(--txt)}
  .btn.sm{padding:7px 12px;font-size:12.5px}
  .btn.primary{background:var(--txt);color:var(--bg)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .badge{font-size:var(--fs-micro);font-weight:700;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap}
  .badge.fa{background:var(--panel2);color:var(--txt);border:1px solid var(--line2)}
  .badge.stay{background:transparent;color:var(--mut);border:1px solid var(--line2)}
  .badge.unk{background:transparent;color:var(--mut);border:1px dashed var(--line2)}
  .role{display:inline-grid;place-items:center;min-width:38px;height:22px;border-radius:6px;font-size:var(--fs-micro);
    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:var(--panel2);color:var(--mut)}
  .rate{display:inline-flex;align-items:center;gap:var(--s0);font-family:var(--f-head);font-variant-numeric:tabular-nums;
    font-weight:700;font-size:12.5px;letter-spacing:.02em;padding:2px 6px;border-radius:5px;
    background:var(--panel2);color:var(--mut);border:1px solid var(--line2);margin-left:6px;flex:none}
  .rate.hi{color:#8fe3b4;border-color:rgba(63,209,139,.35);background:rgba(63,209,139,.10)}
  .rate.lo{color:#ffb3a0;border-color:rgba(224,86,86,.32);background:rgba(224,86,86,.10)}
  .rate i{font-style:normal;font-size:9px/*icon*/;line-height:1}
  .rate i.up{color:var(--stay)} .rate i.dn{color:var(--fa)}
  img.fl{width:18px;height:12px;object-fit:contain;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}
  table{width:100%;border-collapse:collapse;font-size:var(--fs-row);font-variant-numeric:tabular-nums}
  thead th{text-align:left;font-size:var(--fs-micro);letter-spacing:.02em;color:var(--mut);
    font-weight:700;padding:var(--s2) 14px;border-bottom:1px solid var(--line2);background:var(--bg2)}
  tbody td{padding:6px 14px;border-bottom:1px solid var(--line)}
  tbody tr:last-child td{border-bottom:0}
  th.num,td.num{text-align:right}

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

  /* ── 선수 상세 (양 사이트 공용) ──────────────────────────────────────
     esportstransfer 와 판타지가 **같은 원본(lck-engine)** 을 **같은 마크업**으로
     그리는데 스타일만 각자 갖고 있었다(31개 중 30개가 값이 달랐다). 같은 선수를
     양쪽에서 눌러 보면 다른 화면이 나오는 것이 "따로 논다"의 실체였다.
     마크업을 바꿀 때는 두 사이트의 detailBody() 를 함께 고칠 것. */
  .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:var(--fs-meta);font-weight:500;opacity:.75}
  .dsum{display:flex;align-items:center;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .dbig{font-size:34px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
    display:flex;flex-direction:column;gap:4px}
  .dbig small{font-size:var(--fs-micro);font-weight:700;color:var(--mut);letter-spacing:.3px}
  .dcol{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-row);font-weight:700}
  .dcol .mut,.pdet .mut{color:var(--mut);font-weight:600;font-size:var(--fs-meta)}
  .dstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:2px;
    background:var(--line);border:1px solid var(--line);border-radius:var(--r-ctl);
    overflow:hidden;margin:12px 0 4px}
  .dstat{background:var(--panel);padding:8px 10px;display:flex;flex-direction:column;gap:4px}
  .dstat span{font-size:var(--fs-micro);color:var(--mut);font-weight:700}
  .dstat b{font-size:var(--fs-row);font-variant-numeric:tabular-nums}
  .dsec{font-size:var(--fs-micro);font-weight:800;letter-spacing:.4px;color:var(--mut);
    text-transform:uppercase;margin:16px 0 6px}
  .dtable{width:100%;border-collapse:collapse;font-size:var(--fs-meta)}
  .dtable th{text-align:left;font-size:var(--fs-micro);color:var(--mut);font-weight:700;
    padding:5px 6px;border-bottom:1px solid var(--line)}
  .dtable td{padding:6px;border-bottom:1px solid var(--line);vertical-align:middle}
  .dtable tr:last-child td{border-bottom:0}
  .dtable .num{text-align:right;font-variant-numeric:tabular-nums}
  .dtable th.num{text-align:right}
  .dtable .rate{margin-left:0}
  .dtable .cname{font-weight:700;color:var(--txt)}
  /* 챔피언 — 아이콘과 이름을 한 덩어리로. 아이콘 자리를 미리 잡아 늦게 떠도 줄이 안 밀린다 */
  .cn{display:inline-flex;align-items:center;gap:8px;min-width:0}
  .cn .ci{width:20px;height:20px;flex:none;border-radius:5px;background:var(--panel2)}
  .wl{display:inline-block;min-width:18px;text-align:center;font-weight:800}
  .wl.w{color:var(--txt)} .wl.l{color:var(--mut)}
  .dfoot{margin-top:14px;font-size:var(--fs-micro);color:var(--mut)}
  .dfoot a{color:var(--mut)}
  @media(max-width:480px){
    .dbig{font-size:28px}
    .dtable{font-size:var(--fs-micro)}
  }

  /* ── 페이지 푸터 (양 사이트 공용) ────────────────────────────────────
     예전엔 본진이 구조 있는 푸터, 판타지가 가운데 정렬 한 줄이라 사이트를 오갈 때
     페이지 끝이 전혀 다르게 보였다. 뼈대·간격·색은 여기서 정하고, 안에 넣는 링크만
     각 사이트가 다르게 채운다. */
  .pagefoot{max-width:var(--w-page);margin:0 auto;padding:0 20px 50px}
  .footnote{margin-top:30px;font-size:var(--fs-meta);color:var(--mut);line-height:1.7;
    border-top:1px solid var(--line);padding-top:var(--s4)}
  .footnote a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
  .footnote .legal{margin-top:var(--s3)}
  .footnote .flinks{margin-top:var(--s2)}
  .footnote .flinks a{color:var(--mut);text-decoration:none}
  .footnote .flinks a:hover{color:var(--txt);text-decoration:underline}
  @media(max-width:560px){ .pagefoot{padding:0 12px 40px} }