/* ============================================================================
   ARAM Mayhem · "Howling Frost" 디자인 시스템 레이어  (v=20260613-frost1)
   ----------------------------------------------------------------------------
   적용법: index_v2.html 에서 style_v2.css 바로 "뒤"에 link 한다.
     <link rel="stylesheet" href="style_v2.css?v=...">
     <link rel="stylesheet" href="style_v2.theme.css?v=20260613-frost1">
   - 이 파일은 style_v2.css(12k줄)를 건드리지 않고 "뒤에서" 토큰/핵심 컴포넌트만
     덮어쓴다. 소스 순서상 마지막이라 동일 specificity면 이긴다.
   - 대부분의 다크 스킨이 var(--accent/--line/--good ...)을 쓰므로, §0 토큰만
     갈아끼우면 표 헤더 그라데이션·블루 액센트 같은 하드코딩 핫스팟을 빼고는
     전부 자동으로 새 팔레트를 따라온다.
   - 데이터/집계/JS 로직은 일절 바꾸지 않는다. app_v2.js 가 의존하는 클래스/ID/
     data-* 속성은 그대로 두고 "보이는 것"만 재설계한다.
   - 모드 색분리: JS가 일반칼바람일 때 body.standard-aram-mode 를 붙인다.
     기본(클래스 없음)=증바람=자수정(amethyst), standard=프로스트 시안.
     → JS 수정 0으로 모드별 액센트가 자동 분기된다.
   ============================================================================ */


/* ============================================================================
   §0  파운데이션 — 토큰 시트 (다크 1순위 + 라이트 opt-in)
   ============================================================================ */

/* --- 다크: 실사용(공개+방송) 기본 테마.
   ⚠️ 2026-06-26: 토큰 정본은 design-tokens.css(컴패니언과 공유 단일소스)로 이전.
   이 :root 는 design-tokens.css 로드 실패 시 안전망용 "동일값 폴백"이다. 값 변경은 design-tokens.css 에서. --- */
:root {
  /* 표면(얼음 아래 깊은 물 — 차갑고 약간 푸른 near-black 계열) */
  --bg:          #0d1117;   /* 페이지 바탕 */
  --bg-deep:     #090d13;   /* 그라데이션 바닥 */
  --surface:     #161d27;   /* 카드/패널 */
  --surface-2:   #1d2733;   /* 들린 면, 표 헤더, 칩 */
  --soft:        #1d2733;   /* 구버전 호환 alias */
  --line:        #2a3543;   /* 기본 경계선 */
  --line-strong: #394656;   /* 강조 경계선 */

  /* 글자 */
  --text:   #eaf1fb;
  --muted:  #93a1b5;
  --faint:  #647082;

  /* 액센트 = 모드색. 기본은 증바람(자수정/헥스텍). standard-aram-mode 에서 시안으로 분기 */
  --accent:        #a878ff;
  --accent-strong: #8b5cf6;
  --accent-ink:    #16092e;            /* 액센트 위 글자색(채움 위) */
  --accent-soft:   rgba(168,120,255,.15);
  --accent-line:   rgba(168,120,255,.40);
  --accent-2:      #e3a13a;            /* 보조(방송 골드) */

  /* 의미색 — 좋음/주의/나쁨. 의미 전달 최우선 */
  --good:      #2fcf9a;
  --good-soft: rgba(47,207,154,.15);
  --warn:      #f0b24a;
  --warn-soft: rgba(240,178,74,.15);
  --bad:       #f26d7d;
  --bad-soft:  rgba(242,109,125,.15);

  /* 티어 사다리 — 색+위치 이중신호(색맹 대비). S>A>B>C>D, 6=관찰 */
  --tier-1: #f2c14e;        /* S — 금(최상, 가장 밝고 따뜻) */
  --tier-2: #54cf95;        /* A — 초록(좋음) */
  --tier-3: #4aa3e2;        /* B — 파랑(보통) */
  --tier-4: #8a93a6;        /* C — 회(약함) */
  --tier-5: #e0697f;        /* D — 빨강(나쁨) */
  --tier-sample: #8b97a6;  /* 관찰(표본부족) */

  /* 엘리베이션 — 다크에선 그림자보다 면 대비가 더 잘 읽힘 */
  --shadow:      0 18px 40px rgba(0,0,0,.46);
  --shadow-soft: 0 8px 20px rgba(0,0,0,.32);

  /* 타입 스케일(13px 베이스 유지 — 고밀도). px 고정으로 SSR/CDN 의존 없음 */
  --fs-eyebrow: 11px;
  --fs-cap:     12px;   /* 보조/라벨 */
  --fs-body:    13px;
  --fs-md:      14px;
  --fs-lg:      17px;   /* h2 */
  --fs-xl:      22px;   /* 히어로 */
  --fs-num:     20px;   /* 지표 숫자 */

  /* 간격 스케일(4px 그리드) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 22px;  --sp-6: 30px;

  /* 라운드 */
  --r-sm: 6px;  --r-md: 9px;  --r-lg: 13px;  --r-xl: 16px;  --r-pill: 999px;

  /* 폰트 — 시스템 스택만(외부 CDN 차단 환경). 숫자는 한 벌로 정렬되게 */
  --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Roboto, sans-serif;
  --font-num:  "SF Mono", "Cascadia Mono", "Segoe UI Mono", ui-monospace, monospace;
}

/* --- 모드 색분리: 일반칼바람(프로스트 시안). 증바람은 위 :root 기본값(자수정) --- */
body.standard-aram-mode {
  --accent:        #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-ink:    #052330;
  --accent-soft:   rgba(56,189,248,.15);
  --accent-line:   rgba(56,189,248,.40);
  --tier-2: #54cf95;  /* A=초록(좋음) 고정 — 모드 무관, 좋고나쁨 사다리 일관 */
}

/* --- 라이트: 관리자/로컬 opt-in. html[data-theme="light"] 로만 활성(공개 다크 불변) ---
   ⚠️ 범위 밖 메모: 라이트를 "완전" 활성하려면 style_v2.css 3369줄~의 무조건부
   다크 컴포넌트 스킨을 body.public-viewer 스코프로 감싸는 별도 리팩터가 필요.
   여기선 라이트 토큰셋만 완비해 둔다(원하면 그때 배선). */
html[data-theme="light"] {
  --bg:          #eef1f4;
  --bg-deep:     #e4e9ef;
  --surface:     #ffffff;
  --surface-2:   #f4f7fa;
  --soft:        #f4f7fa;
  --line:        #dbe3ec;
  --line-strong: #c3cfdb;
  --text:   #0f1923;
  --muted:  #5a6b7d;
  --faint:  #8593a3;
  --accent:        #7a4fd0;
  --accent-strong: #6a3fc0;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(122,79,208,.10);
  --accent-line:   rgba(122,79,208,.30);
  --accent-2:      #c08a2a;
  --good:      #0f8b61;  --good-soft: rgba(15,139,97,.10);
  --warn:      #b36b12;  --warn-soft: rgba(179,107,18,.12);
  --bad:       #c23a4a;  --bad-soft:  rgba(194,58,74,.10);
  --shadow:      0 16px 34px rgba(18,31,45,.10);
  --shadow-soft: 0 6px 16px rgba(18,31,45,.07);
}
html[data-theme="light"] body.standard-aram-mode {
  --accent:        #0e7fa6;
  --accent-strong: #0a6789;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(14,127,166,.10);
  --accent-line:   rgba(14,127,166,.30);
}


/* ============================================================================
   §1  프리미티브 — body / 타이포 / 버튼 / 포커스 / 스크롤바
   ============================================================================ */

body {
  background:
    radial-gradient(1200px 380px at 50% -120px, rgba(168,120,255,.10), transparent 70%),
    linear-gradient(180deg, #11161f 0, var(--bg) 200px, var(--bg-deep) 100%) !important;
  color: var(--text);
  font-family: var(--font-sans);
}
/* standard 모드에선 상단 글로우도 시안으로 */
body.standard-aram-mode {
  background:
    radial-gradient(1200px 380px at 50% -120px, rgba(56,189,248,.10), transparent 70%),
    linear-gradient(180deg, #11161f 0, var(--bg) 200px, var(--bg-deep) 100%) !important;
}

/* 숫자는 어디서든 tabular-nums 로(표·지표 정렬). 한글엔 영향 없음 */
.metric strong, .snapshot-card strong, .match-kpis b, td, th,
.tier-asset b, .synergy-kpis b, .public-search-card-summary b {
  font-variant-numeric: tabular-nums;
}

/* 기본 버튼 — 액센트(모드색) 솔리드. 채움 위 글자는 --accent-ink */
button, .button {
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  transition: filter .12s ease, transform .06s ease, background .12s ease;
}
button:hover, .button:hover { filter: brightness(1.07); }
button:active, .button:active { transform: translateY(1px); }
.ghost {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.ghost:hover { background: var(--surface); filter: none; }

/* 일관된 키보드 포커스 링(접근성) */
a:focus-visible, button:focus-visible, input:focus-visible,
.segmented button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 다크에 맞춘 얇은 스크롤바 */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #4a5868; }


/* ============================================================================
   §2  헤더(topbar) + 방송 배너
   ============================================================================ */

/* 스티키 헤더 — 얼음판 위 유리. 모드색 헤어라인 한 줄로 정체성 */
body.public-viewer .topbar,
.topbar {
  background: linear-gradient(180deg, rgba(18,24,33,.96), rgba(13,17,23,.92)) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.40) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* 헤더 하단 모드색 1px 라인(증바람=자수정 / 일반=시안) */
.topbar { position: sticky; isolation: isolate; }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: .55; z-index: 1;
}
.topbar h1 { color: #f5f8ff; font-weight: 800; letter-spacing: -0.01em; }
.eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .04em; }
.topbar .header-sub { color: var(--muted); }

/* 방송 배너 — 수익 요소지만 품위 있게. 얇은 띠 + 모드색 좌측 액센트 */
.streamer-banner {
  position: relative;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg);
  background:
    linear-gradient(90deg, rgba(168,120,255,.10), transparent 42%),
    var(--surface) !important;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.streamer-banner::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: .9;
}
.streamer-banner__eyebrow { color: var(--accent) !important; letter-spacing: .04em; }
.streamer-banner__copy strong { color: var(--text) !important; }
.streamer-banner__link {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  font-weight: 700;
}
.streamer-banner__link:hover { filter: brightness(1.07); }
/* 상/하단 풀폭 배너는 살짝 더 낮게(품위) */
.streamer-banner-top, .streamer-banner-bottom { border-radius: var(--r-lg); }


/* ============================================================================
   §3  히어로 / 공개 진입부(public-entry) + 모드게이트(보조)
   ============================================================================ */

/* ⓘ 히어로 배경은 기존 칼바람나락(Howling Abyss) 아트워크 + 다크 스크림을 그대로
   둔다(Howling Frost 컨셉과 정확히 일치). 배경은 덮지 않고 테두리/모서리만 토큰화. */
.public-entry {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}
.public-entry__intro span { color: var(--accent) !important; font-weight: 700; }
.public-entry__intro h2 { color: #f4f8ff !important; letter-spacing: -0.01em; }
.public-entry__intro p, .public-search-card small { color: var(--muted) !important; }

/* 검색 카드 — 진입부의 1순위 액션. 입력창을 또렷하게 */
.public-search-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg);
  background: var(--surface) !important;
}
.public-search-card label { color: var(--muted) !important; font-weight: 700; }
.public-search-row input {
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-md) !important;
  background: #0f141c !important;
  color: var(--text) !important;
}
.public-search-row input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none;
}
.public-search-row input::placeholder { color: var(--faint) !important; }
.public-search-row button { background: var(--accent) !important; color: var(--accent-ink) !important; }

/* 4카드 퀵그리드 — 호버 어포던스 + 모드색 상단 라인 */
.public-quick-grid a, .public-quick-grid .public-report-card {
  position: relative;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  transition: transform .1s ease, border-color .12s ease, box-shadow .12s ease;
  overflow: hidden;
}
.public-quick-grid a::before, .public-quick-grid .public-report-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent); opacity: 0; transition: opacity .12s ease;
}
.public-quick-grid a:hover, .public-quick-grid .public-report-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line) !important;
  box-shadow: var(--shadow-soft);
}
.public-quick-grid a:hover::before, .public-quick-grid .public-report-card:hover::before { opacity: 1; }
.public-quick-grid strong, .public-quick-grid .public-report-card strong { color: var(--text) !important; }

/* 모드게이트 모달 — index_v2.html 인라인 <style> 도 함께 교체 권장(마크업 메모 참조).
   여기선 보강만(토큰 정합). */
.am-mode-gate__card { background: var(--surface) !important; border-color: var(--line) !important; }
.am-mode-gate__btn--aug:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.am-mode-gate__btn--std:hover { border-color: #38bdf8 !important; background: rgba(56,189,248,.12) !important; }


/* ============================================================================
   §4  탭 시스템 — 4겹 위계 재정립 (마크업/JS 불변, ID별 시각 역할 분리)
   ----------------------------------------------------------------------------
   현재: #seasonTabs / #rangeTabs / #tableCategoryTabs / #tableTabs 가 전부 같은
   .segmented 룩이라 "버튼 4줄"로 읽혀 과부하. 데이터흐름은 그대로 두고 "보이는
   위계"만 3단으로 분리한다:
     · 필터(시즌/범위)  = 작고 muted 한 토글  (보조)
     · 카테고리         = 굵은 1차 내비(밑줄형)
     · 와이드(구체 표)  = 가벼운 칩 레일       (하위)
   ============================================================================ */

/* 공통 베이스: 세그먼트 컨테이너 */
.section-head .segmented {
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  border-radius: var(--r-md);
  box-shadow: none !important;
}
.section-head .segmented button {
  color: var(--muted) !important;
  background: transparent !important;
  border-radius: var(--r-sm);
  font-weight: 700;
  transition: color .12s ease, background .12s ease;
}
.section-head .segmented button:hover { color: var(--text) !important; }
.section-head .segmented button.active {
  color: var(--accent-ink) !important;
  background: var(--accent) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* (1) 필터 레인 — 시즌+범위는 "필터"임을 시각적으로 낮춘다 */
#seasonTabs, #rangeTabs {
  padding: 2px !important;
}
#seasonTabs button, #rangeTabs button {
  min-height: 26px !important;
  padding: 4px 9px !important;
  font-size: var(--fs-cap) !important;
}
/* 활성 필터는 채움 대신 "옅은 액센트 칩"으로(1차 내비와 구분) */
#seasonTabs button.active, #rangeTabs button.active {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--accent-line) !important;
}

/* (2) 카테고리 = 1차 내비. 밑줄형 탭으로 가장 굵게 */
#tableCategoryTabs.category-tabs {
  gap: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#tableCategoryTabs.category-tabs button {
  position: relative;
  min-height: 38px !important;
  padding: 8px 14px !important;
  font-size: var(--fs-md) !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  border-radius: 0 !important;
}
#tableCategoryTabs.category-tabs button:hover { color: var(--text) !important; background: transparent !important; }
#tableCategoryTabs.category-tabs button.active {
  color: var(--text) !important;
  background: transparent !important;
}
#tableCategoryTabs.category-tabs button.active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0;
}

/* (3) 와이드(구체 표) = 하위 칩 레일. 가볍게, 가로 스크롤 허용 */
#tableTabs.wide-tabs {
  gap: 6px !important;
  padding: 8px 0 2px !important;
  border: 0 !important;
  background: transparent !important;
}
#tableTabs.wide-tabs button {
  min-height: 30px !important;
  padding: 6px 11px !important;
  font-size: var(--fs-cap) !important;
  font-weight: 700;
  color: var(--muted) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
}
#tableTabs.wide-tabs button:hover {
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
  background: var(--surface) !important;
}
#tableTabs.wide-tabs button.active {
  color: var(--accent-ink) !important;
  background: var(--accent) !important;
  border-color: transparent !important;
}
/* 고/저 승률 쌍(rate-high/low)은 칩 안에서 의미색 점으로 구분 */
#tableTabs.wide-tabs button.rate-low.active { background: var(--bad) !important; color: #2a0d12 !important; }
#tableTabs.wide-tabs button.rate-high.active { background: var(--good) !important; color: #052a1f !important; }

/* 스냅샷 기간 토글(#snapshotTabs)도 필터 톤으로 통일 */
#snapshotTabs button.active {
  color: var(--accent-ink) !important; background: var(--accent) !important;
}

/* 패널/섹션헤더 — 면 대비 + 라운드 */
.panel {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft);
}
.section-head { border-bottom: 1px solid var(--line) !important; }
.section-head h2 { color: var(--text); }
.section-head .hint { color: var(--muted); }
.status-pill { color: var(--muted); }


/* ============================================================================
   §5  데이터 표 — 스캔성 (스티키 헤더/정렬 어포던스/zebra/호버/티어배지)
   ============================================================================ */

.table-wrap {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-soft);
  background: var(--surface);
}
.table-wrap table, table { background: var(--surface) !important; }

/* 스티키 헤더 — 솔리드 + 강한 하단선으로 본문과 분리 */
th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--line-strong) !important;
  font-size: var(--fs-cap) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  white-space: nowrap;
}
/* 정렬 버튼 — 클릭 가능함을 드러낸다(호버 배경 + 화살표 자리) */
th button[data-sort-key] {
  width: 100%;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 9px; margin: -7px -9px;
  background: transparent !important;
  color: inherit !important;
  font: inherit; font-weight: 800;
  border-radius: var(--r-sm);
  cursor: pointer;
}
th button[data-sort-key]:hover { background: rgba(255,255,255,.05) !important; color: var(--text) !important; }
/* 정렬 활성 헤더 강조(렌더러가 정렬마크 ▲▼ 텍스트를 붙여줌) */
th[aria-sort] button, th button.is-sorted { color: var(--accent) !important; }

td {
  padding: 9px 10px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--text);
}
tbody tr td { background: transparent !important; }
/* zebra — 토큰 기반(은은하게) */
tbody tr:nth-child(even) td { background: rgba(255,255,255,.018) !important; }
/* 호버 — 행 전체를 모드색으로 은은히(스캔 추적) */
tbody tr:hover td { background: var(--accent-soft) !important; }
td strong { color: #f4f8ff !important; }
.table-wrap tbody tr:last-child td { border-bottom: 0 !important; }

/* 승률 의미색 */
.good-text { color: var(--good) !important; }
.bad-text  { color: var(--bad)  !important; }

/* 승/패 등 pill — 의미색 soft 배지 */
.pill {
  border: 1px solid transparent !important;
  border-radius: var(--r-pill) !important;
  font-weight: 800; box-shadow: none !important;
}
.pill.win  { background: var(--good-soft) !important; color: var(--good) !important; border-color: var(--accent-line); }
.pill.loss { background: var(--bad-soft)  !important; color: var(--bad)  !important; }

/* 이동 배지(상승/하락/신규/이탈) — 의미색 유지 + 색맹 대비 위해 ▲▼ 문구 동반 가정 */
.move-badge.up, .move-badge.in   { background: var(--good-soft) !important; color: var(--good) !important; }
.move-badge.down, .move-badge.out { background: var(--bad-soft) !important; color: var(--bad) !important; }
.move-badge.same { background: rgba(147,161,181,.14) !important; color: var(--muted) !important; }

/* 재사용 티어 배지(표 안 S~D 칩) — 색+글자 이중신호 */
.tier-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: var(--r-sm);
  font-size: var(--fs-cap); font-weight: 900; line-height: 1;
  color: #0c0f14;
}
.tier-badge.t1 { background: var(--tier-1); }
.tier-badge.t2 { background: var(--tier-2); }
.tier-badge.t3 { background: var(--tier-3); }
.tier-badge.t4 { background: var(--tier-4); }
.tier-badge.t5 { background: var(--tier-5); }
.tier-badge.t6 { background: var(--tier-sample); color: #f0f3f7; }
/* 표 등급 배지(letter 클래스 tier-s/a/b/c/d)도 보드와 같은 사다리로 통일 — 구 하드코딩(S청록·C보라·D진빨강) 폐기 */
.tier-badge.tier-s { background: var(--tier-1) !important; color: #0c0f14 !important; }
.tier-badge.tier-a { background: var(--tier-2) !important; color: #0c0f14 !important; }
.tier-badge.tier-b { background: var(--tier-3) !important; color: #0c0f14 !important; }
.tier-badge.tier-c { background: var(--tier-4) !important; color: #0c0f14 !important; }
.tier-badge.tier-d { background: var(--tier-5) !important; color: #0c0f14 !important; }
.tier-badge.tier-watch, .tier-badge.tier-관찰 { background: var(--tier-sample) !important; color: #0c0f14 !important; }

/* 에셋 셀(아이콘+이름) — 아이콘 라운드/테두리 정리 */
.asset-cell { gap: 8px; }
.asset-cell .mini-icon, td .mini-icon, img.mini-icon {
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #0f141c;
}
.subtext { color: var(--muted) !important; }

/* 표 밀도 토글(선택) — .table-wrap.is-dense 면 컴팩트. 토글은 선택적 JS(메모) */
.table-wrap.is-dense td { padding: 5px 9px !important; }
.table-wrap.is-dense th button[data-sort-key] { padding: 5px 9px; margin: -5px -9px; }

.table-wrap--compact td {
  padding: 5px 7px !important;
  vertical-align: middle !important;
}
.table-wrap--compact th button[data-sort-key] {
  padding: 5px 7px !important;
  margin: -5px -7px !important;
}
.table-wrap--compact .asset-cell {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.table-wrap--compact .asset-cell strong,
.table-wrap--compact td strong {
  line-height: 1.16;
  word-break: keep-all;
  overflow-wrap: normal;
}
.table-wrap--compact .subtext {
  margin-top: 2px;
  font-size: 11.5px; /* 가독성: 10.5→11.5(사용자 "작은글자" 지적, 밀집테이블 부가정보 "X판 중 Y판") */
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: normal;
}
.table-wrap--compact .entity-time-cell {
  min-width: 54px;
  padding: 3px 5px !important;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.025);
}
.table-wrap--compact .entity-time-cell strong {
  display: block;
  font-size: 12px;
}
.table-wrap--compact .entity-time-cell span {
  display: block;
  margin-top: 1px;
  font-size: 11px; /* 가독성: 10→11(밀집 시간대 셀 부가값) */
}
/* 2026-06-27: compact 높이 override 제거 — 막대 높이 단일화(전 막대 6px). entity-time 막대도 base의 6px 유지. */
.table-wrap--compact .entity-time-bars {
  gap: 4px;
}
.table-wrap--compact .entity-time-chip {
  padding: 4px 5px;
}

@media (max-width: 0px) {
  body.public-viewer .table-wrap--compact {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  body.public-viewer .table-wrap--compact table {
    display: table !important;
    min-width: 680px !important;
    width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }
  body.public-viewer .table-wrap--compact colgroup {
    display: table-column-group !important;
  }
  body.public-viewer .table-wrap--compact thead {
    display: table-header-group !important;
  }
  body.public-viewer .table-wrap--compact tbody {
    display: table-row-group !important;
    width: auto !important;
    gap: 0 !important;
  }
  body.public-viewer .table-wrap--compact tbody tr {
    display: table-row !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  body.public-viewer .table-wrap--compact tbody td {
    display: table-cell !important;
    padding: 4px 5px !important;
    border-bottom: 1px solid var(--line) !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: 10.5px !important;
    line-height: 1.16 !important;
  }
  body.public-viewer .table-wrap--compact tbody td::before {
    content: none !important;
    display: none !important;
  }
  body.public-viewer .table-wrap--compact tbody td:first-child {
    display: table-cell !important;
    padding: 4px 5px !important;
  }
  body.public-viewer .table-wrap--compact tbody td .asset-cell {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: auto !important;
    max-width: none !important;
    gap: 5px !important;
  }
  body.public-viewer .table-wrap--compact tbody td .asset-cell strong {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  body.public-viewer .table-wrap--compact tbody td .mini-icon,
  body.public-viewer .table-wrap--compact tbody td img.mini-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }
  body.public-viewer .table-wrap--compact .entity-time-cell {
    min-width: 0 !important;
    padding: 3px 4px !important;
  }
  body.public-viewer .table-wrap--compact .entity-time-cell strong {
    font-size: 11px !important;
  }
  body.public-viewer .table-wrap--compact .entity-time-cell span {
    font-size: 9.5px !important;
  }
}

body.public-viewer .public-all-section .table-wrap.table-wrap--compact,
body.public-viewer #tableArea .table-wrap.table-wrap--compact {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
}

body.public-viewer .public-all-section .table-wrap.table-wrap--compact table:has(col:nth-child(7)) col:nth-child(1),
body.public-viewer #tableArea .table-wrap.table-wrap--compact table:has(col:nth-child(7)) col:nth-child(1) {
  width: 24% !important;
}

body.public-viewer .public-all-section .table-wrap.table-wrap--compact table:has(col:nth-child(7)) col:nth-child(2),
body.public-viewer #tableArea .table-wrap.table-wrap--compact table:has(col:nth-child(7)) col:nth-child(2) {
  width: 14% !important;
}

body.public-viewer .public-all-section .table-wrap.table-wrap--compact table:has(col:nth-child(7)) col:nth-child(3),
body.public-viewer #tableArea .table-wrap.table-wrap--compact table:has(col:nth-child(7)) col:nth-child(3) {
  width: 12% !important;
}

body.public-viewer .public-all-section .table-wrap.table-wrap--compact table:has(col:nth-child(7)) col:nth-child(n+4),
body.public-viewer #tableArea .table-wrap.table-wrap--compact table:has(col:nth-child(7)) col:nth-child(n+4) {
  width: 12.5% !important;
}

body.public-viewer .public-all-section .table-wrap.table-wrap--compact td,
body.public-viewer #tableArea .table-wrap.table-wrap--compact td {
  overflow-wrap: normal !important;
}


/* ============================================================================
   §6  티어 리포트 / 티어 보드
   ============================================================================ */

.tier-board {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  background: linear-gradient(180deg, #10151d, #0c1118) !important;
  padding: var(--sp-3) !important;
}
.tier-row {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  /* 좌측 두꺼운 티어색 바(--tier-accent 는 .tier-N 에서 주입) */
  box-shadow: inset 5px 0 0 var(--tier-accent, var(--line-strong)) !important;
}
/* 티어색 — §0 토큰으로 일원화 */
.tier-1 .tier-label, .tier-row.tier-1 .tier-label { color: var(--tier-1); }
.tier-2 .tier-label, .tier-row.tier-2 .tier-label { color: var(--tier-2); }
.tier-3 .tier-label, .tier-row.tier-3 .tier-label { color: var(--tier-3); }
.tier-4 .tier-label, .tier-row.tier-4 .tier-label { color: var(--tier-4); }
.tier-5 .tier-label, .tier-row.tier-5 .tier-label { color: var(--tier-5); }
.tier-row.tier-1 { --tier-accent: var(--tier-1); }
.tier-row.tier-2 { --tier-accent: var(--tier-2); }
.tier-row.tier-3 { --tier-accent: var(--tier-3); }
.tier-row.tier-4 { --tier-accent: var(--tier-4); }
.tier-row.tier-5 { --tier-accent: var(--tier-5); }
.tier-row.tier-sample { --tier-accent: var(--tier-sample); }
.tier-row.tier-sample .tier-label { color: var(--tier-sample); }
/* 티어 띠 — 위=좋음(따뜻·진함) → 아래=나쁨(빨강). 색+위치 이중신호로 위계 명확화 */
.tier-row.tier-1 {
  background: linear-gradient(90deg, rgba(242,193,78,.16), var(--surface) 42%) !important;
  border-color: rgba(242,193,78,.40) !important;
}
.tier-row.tier-2 { background: linear-gradient(90deg, rgba(84,207,149,.13), var(--surface) 44%) !important; border-color: rgba(84,207,149,.30) !important; }
.tier-row.tier-3 { background: linear-gradient(90deg, rgba(74,163,226,.10), var(--surface) 46%) !important; border-color: rgba(74,163,226,.24) !important; }
.tier-row.tier-4 { background: linear-gradient(90deg, rgba(138,147,166,.08), var(--surface) 48%) !important; border-color: rgba(138,147,166,.20) !important; }
.tier-row.tier-5 { background: linear-gradient(90deg, rgba(224,105,127,.11), var(--surface) 46%) !important; border-color: rgba(224,105,127,.28) !important; }
/* 상위 티어 크기 위계 (시안 스펙: S 56 → A 48 → B 44 → C·D 40, S 금테밴드). 일반·증바람 양 모드 동일. */
.tier-row.tier-1 .tier-asset { width: 56px; height: 56px; }
.tier-row.tier-1 .tier-asset-wrap { width: 62px; }
.tier-row.tier-1 .tier-asset img { box-shadow: 0 0 0 1px var(--tier-1), 0 0 10px rgba(242,193,78,.35); }
.tier-row.tier-2 .tier-asset { width: 48px; height: 48px; }
.tier-row.tier-2 .tier-asset-wrap { width: 54px; }
.tier-row.tier-3 .tier-asset { width: 44px; height: 44px; }
.tier-row.tier-3 .tier-asset-wrap { width: 50px; }
.tier-row.tier-4 .tier-asset { width: 40px; height: 40px; }
.tier-row.tier-4 .tier-asset-wrap { width: 46px; }
.tier-row.tier-5 .tier-asset { width: 40px; height: 40px; }
.tier-row.tier-5 .tier-asset-wrap { width: 46px; }
.tier-label strong { font-weight: 900; }
.tier-label span { color: var(--muted); font-size: 11px; }
.tier-asset-name { color: var(--text); }
body.public-viewer .tier-asset-name { font-size: 12px !important; line-height: 1.25 !important; max-height: 31px !important; -webkit-line-clamp: 2 !important; }
.tier-asset b { font-weight: 800; }
.tier-asset.up b, .tier-asset.in b { color: var(--good); }
.tier-asset.down b { color: var(--bad); }
.tier-asset img { border-radius: 8px; border: 1px solid var(--line); background: #0f141c; }
/* 컨테이너도 사각화 — 베이스 .tier-asset의 border-radius:50%(원형) 잔재 제거. 순위 상승/하락/신규(.up/.down/.in)의 테두리·배경이 동그라미로 남던 것 → 이미지(8px)·포로마크(9px)와 통일 */
.tier-asset { border-radius: 9px; }
/* 일일 트렌드(방송 리포트)의 챔피언 아이콘도 베이스가 원형(50%) → 사각화 통일 */
.daily-trend-entry img, .daily-trend-entry > span { border-radius: 8px; }
/* 포로마크(꾸준+다양성 우수) — 모드색 링으로 격을 줌 */
.tier-asset-wrap.has-poro .tier-asset { box-shadow: 0 0 0 2px var(--accent), 0 0 14px var(--accent-soft); border-radius: 9px; }


/* ============================================================================
   §7  지표(metrics) / 스냅샷 카드
   ============================================================================ */

.metric, .panel, .snapshot-card, .factor-card, .insight-card, .role-card,
.rarity-card, .rarity-block, .synergy-card, .recommend-hero, .recommend-evidence,
.build-compare > div, .team-panel, .match-metric, .anvil-hero, .anvil-table-card,
.anvil-note-grid article, .time-pattern-summary article, .time-pattern-card {
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  box-shadow: var(--shadow-soft) !important;
  border-radius: var(--r-lg) !important;
}
.metric::before { background: var(--accent) !important; }
.metric span { color: var(--muted) !important; }
.metric strong { color: #f6f8fc !important; font-size: var(--fs-num) !important; }
/* 대표 지표 카드(첫 칸) — 모드색 글로우 */
.metric:first-child {
  background:
    linear-gradient(135deg, var(--accent-soft), rgba(22,29,39,.92) 56%),
    var(--surface) !important;
  border-color: var(--accent-line) !important;
}
.snapshot-card strong { color: var(--text); }
.mini-stats span, .recommend-score-row span, .evidence-line, .synergy-kpis span,
.mini-stat-chip, .team-numbers span {
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--text);
}


/* ============================================================================
   §8  매치 카드(match-card)
   ============================================================================ */

.match-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface) !important;
  overflow: hidden;
}
.match-summary { transition: background .12s ease; }
.match-summary:hover { background: var(--surface-2) !important; }
.match-card[open] .match-summary { border-bottom: 1px solid var(--line) !important; background: var(--surface-2) !important; }
.match-title strong { color: #f4f8ff; }
.match-kpis span { color: var(--muted); }
.match-kpis b { color: var(--text); }
.match-detail { background: var(--surface) !important; }
.match-stat-grid .match-metric {
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  border-radius: var(--r-md) !important;
}
.match-metric strong { color: var(--text); }
/* 승/패 좌측 컬러 액센트 — 결과를 카드 모서리로도 알림(스캔) */
.match-card:has(.pill.win)  { box-shadow: inset 3px 0 0 var(--good); }
.match-card:has(.pill.loss) { box-shadow: inset 3px 0 0 var(--bad); }


/* ============================================================================
   §9  시너지 그리드(synergy-grid)
   ============================================================================ */

.synergy-card {
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border-radius: var(--r-lg) !important;
}
.synergy-card header strong { color: #f4f8ff; }
.synergy-card header .good-text { color: var(--good) !important; }
.synergy-card header .bad-text { color: var(--bad) !important; }
.synergy-card p { color: var(--muted); }
.synergy-kpis b { color: var(--text); }
.synergy-pair-grid > div {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: var(--r-md) !important;
}
.synergy-pair-grid b { color: var(--accent) !important; }


/* ============================================================================
   §10  공개 검색 결과(public-search-results)
   ============================================================================ */

.public-search-results { border-color: var(--line) !important; }
.public-search-result-card {
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border-radius: var(--r-lg) !important;
  transition: transform .1s ease, border-color .12s ease;
}
.public-search-result-card:hover { transform: translateY(-2px); border-color: var(--accent-line) !important; }
.public-search-result-card strong { color: var(--text); }
.public-search-result-section--high h4 { color: var(--good) !important; }
.public-search-result-section--low h4 { color: var(--bad) !important; }
.public-search-detail-button { background: var(--accent) !important; color: var(--accent-ink) !important; }
.public-search-preview-chip img { border-radius: 7px; border: 1px solid var(--line); }


/* ============================================================================
   §11  모바일(<760px) — 간격/타이포/카드 폴백 다듬기
   ----------------------------------------------------------------------------
   기존 mobile pass(style_v2.css 19줄~)의 행→카드 변환을 토큰 정합으로 보강.
   ============================================================================ */
@media (max-width: 0px) {
  body.public-viewer .dashboard > section.panel { padding: 12px !important; border-radius: var(--r-lg) !important; }

  /* 행 카드 — 하드코딩 rgba 대신 토큰 + 모드색 좌측 라인 */
  body.public-viewer .table-wrap tbody tr,
  body.public-viewer .participant-table-wrap tbody tr {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: var(--r-md) !important;
    padding: 11px !important;
  }
  body.public-viewer .table-wrap tbody td::before,
  body.public-viewer .participant-table-wrap tbody td::before {
    color: var(--muted) !important;
    font-weight: 800; letter-spacing: .02em;
  }
  body.public-viewer .table-wrap tbody td,
  body.public-viewer .participant-table-wrap tbody td {
    border-bottom: 0 !important;
  }

  /* 탭 3단 위계 — 모바일에서도 유지 */
  body.public-viewer #tableCategoryTabs.category-tabs {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; gap: 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  body.public-viewer #tableCategoryTabs.category-tabs button {
    flex: 0 0 auto !important; min-height: 36px !important;
    font-size: var(--fs-body) !important; white-space: nowrap !important;
  }
  body.public-viewer #tableTabs.wide-tabs {
    display: flex !important; flex-wrap: wrap !important; gap: 5px !important;
  }
  body.public-viewer #tableTabs.wide-tabs button {
    flex: 0 0 auto !important; min-height: 30px !important;
    font-size: 11px !important; padding: 5px 10px !important;
  }

  /* 히어로/검색 — 모바일에서 더 또렷한 터치 타깃 */
  .public-search-row input { min-height: 42px !important; }
  .public-search-row button { min-height: 42px !important; }
  .public-quick-grid { gap: 8px !important; }

  /* 헤더 모드색 라인은 모바일에서도 유지 */
  .topbar::after { bottom: 0; }

  /* 티어표 — 모바일 고밀도(작은 타일·한 줄에 더 많이 → 세로 스크롤↓) */
  .tier-board { padding: 8px !important; gap: 6px !important; }
  .tier-row { grid-template-columns: 32px minmax(0,1fr) !important; gap: 8px !important; min-height: 0 !important; padding: 6px 6px 6px 0 !important; }
  .tier-asset { width: 34px !important; height: 34px !important; }
  .tier-asset-wrap { width: 38px !important; gap: 1px !important; }
  .tier-row.tier-1 .tier-asset { width: 40px !important; height: 40px !important; }
  .tier-row.tier-1 .tier-asset-wrap { width: 44px !important; }
  .tier-row.tier-2 .tier-asset { width: 37px !important; height: 37px !important; }
  .tier-row.tier-2 .tier-asset-wrap { width: 40px !important; }
  .tier-icons { column-gap: 5px !important; row-gap: 6px !important; }
  .tier-asset-name { font-size: 10px !important; line-height: 1.1 !important; }
  .tier-label strong { font-size: 18px !important; }
}


/* ============================================================================
   §12  #tableArea 대비 가드 위 재배선  ⚠️ 중요
   ----------------------------------------------------------------------------
   style_v2.css 5075~5193 줄에 "Public UI final contrast guard" 가 있다:
     #tableArea :is(table,td,th,...,[class*="card"],[class*="synergy"]...) 에
     background-color/border-color/color 를 !important 로 강제(방송 가독성용).
   → #tableArea "안"의 표·티어보드·카드 surface 는 §5~§9 토큰이 이 가드에 막힌다.
   다행히 가드 베이스색(#151e2a/#344052/#182333/#dfe9f7)이 Howling Frost 계열과
   거의 같아 큰 깨짐은 없다. 여기선 가드와 "동일/상위 specificity + 나중 로드"로
   스캔성 핵심 디테일(헤더 대비·행 호버·승패칩·티어색)만 되찾는다.
   가드를 통째로 끄지 않는다(방송 대비 안전판은 유지).
   ============================================================================ */

/* (a) 표 헤더 — 본문과 또렷이 분리(스캔 1순위). 가드가 th=td 로 평탄화한 걸 되돌림 */
#tableArea .table-wrap thead th,
#tableArea thead th {
  background-color: var(--surface-2) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--line-strong) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}
/* 정렬 버튼 어포던스 */
#tableArea th button[data-sort-key] { color: inherit !important; background: transparent !important; }
#tableArea th button[data-sort-key]:hover { background: rgba(255,255,255,.06) !important; color: var(--text) !important; }
#tableArea th button.is-sorted,
#tableArea th[aria-sort] button { color: var(--accent) !important; }
/* ⓘ 스티키 헤더는 옵션: 이 표들은 가로 스크롤 래퍼라 가드가 position:static 으로
   꺼 둔 상태. 데스크톱 한정으로 켜려면 아래 2줄의 주석을 해제(별도 검증 권장):
   @media(min-width:761px){ #tableArea .table-wrap{overflow:visible}
     #tableArea thead th{position:sticky!important;top:0!important;z-index:3!important} } */

/* (b) 행 호버 — 모드색으로 추적(가드의 평탄 #182333 위에). zebra 는 가드값 유지 */
#tableArea tbody tr:hover td { background-color: var(--accent-soft) !important; }

/* (c) 티어 라벨색 — §0 사다리 토큰으로(가드 5166~5170 보다 늦게·동일 specificity) */
#tableArea .tier-1 .tier-label { color: var(--tier-1) !important; }
#tableArea .tier-2 .tier-label { color: var(--tier-2) !important; }
#tableArea .tier-3 .tier-label { color: var(--tier-3) !important; }
#tableArea .tier-4 .tier-label { color: var(--tier-4) !important; }
#tableArea .tier-5 .tier-label { color: var(--tier-5) !important; }
#tableArea .tier-sample .tier-label { color: var(--tier-sample) !important; }

/* (d) 승/패 칩 — 의미색 soft(가드 5131 의 #1d2837 평탄화를 복구) */
#tableArea .pill.win  { background-color: var(--good-soft) !important; color: var(--good) !important; border-color: var(--accent-line) !important; }
#tableArea .pill.loss { background-color: var(--bad-soft)  !important; color: var(--bad)  !important; border-color: transparent !important; }

/* (e) 표 안 티어 배지(S~D 칩) — 가드가 글자색을 inherit 로 만들어 대비가 깨지는 걸 복구 */
#tableArea .tier-badge.t1 { background-color: var(--tier-1) !important; color:#0c0f14 !important; }
#tableArea .tier-badge.t2 { background-color: var(--tier-2) !important; color:#0c0f14 !important; }
#tableArea .tier-badge.t3 { background-color: var(--tier-3) !important; color:#0c0f14 !important; }
#tableArea .tier-badge.t4 { background-color: var(--tier-4) !important; color:#0c0f14 !important; }
#tableArea .tier-badge.t5 { background-color: var(--tier-5) !important; color:#0c0f14 !important; }
#tableArea .tier-badge.t6 { background-color: var(--tier-sample) !important; color:#f0f3f7 !important; }

/* (f) 시너지 페어 강조수치는 모드색으로(가드의 일반 inherit 는 !important 가 아니라 통과) */
#tableArea .synergy-pair-grid b { color: var(--accent) !important; }

/* (g) 카테고리 1차 내비 베이스라인 — 컨테이너 border-bottom 을 확실히 이기게 */
body.public-viewer #tableCategoryTabs.category-tabs,
#tableCategoryTabs.category-tabs {
  border-bottom: 1px solid var(--line) !important;
}

/* ── 데스크톱 앱 다운로드 CTA (베타) — 진입부. 가독성: 본문 15px/설명 12px, 대비 충분 ── */
.am-dl-cta{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 18px;border-radius:14px;
  text-decoration:none;border:1px solid var(--accent-line);background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 8px 22px -14px rgba(0,0,0,.7);transition:border-color .15s,transform .12s,box-shadow .15s}
.am-dl-cta:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(0,0,0,.7)}
.am-dl-cta__ico{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;
  background:var(--accent);color:var(--accent-ink);font-size:20px;font-weight:800;box-shadow:0 0 14px var(--accent-soft)}
.am-dl-cta__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.am-dl-cta__body strong{color:var(--text);font-size:15px;font-weight:800;letter-spacing:-.2px;display:flex;align-items:center;gap:7px}
.am-dl-cta__body strong em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.4px;color:var(--accent-ink);background:var(--accent);padding:2px 6px;border-radius:5px}
.am-dl-cta__body small{color:var(--muted);font-size:12px;line-height:1.45}
/* OS 선택 다운로드(순수 HTML details, JS 없음) */
.am-dl{margin-top:16px}
.am-dl>.am-dl-cta{margin-top:0;cursor:pointer;list-style:none}
.am-dl>.am-dl-cta::-webkit-details-marker{display:none}
.am-dl-cta__chev{flex:0 0 auto;margin-left:auto;color:var(--muted);font-size:13px;transition:transform .15s}
.am-dl[open] .am-dl-cta__chev{transform:rotate(180deg)}
.am-dl-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.am-dl-choice{position:relative;display:flex;flex-direction:column;gap:4px;padding:13px 16px;border-radius:12px;text-decoration:none;
  border:1px solid var(--accent-line);background:var(--surface);transition:border-color .15s,transform .12s,background .15s}
.am-dl-choice:hover{border-color:var(--accent);transform:translateY(-1px);background:var(--surface-2)}
.am-dl-choice__os{color:var(--text);font-size:14px;font-weight:800;letter-spacing:-.2px}
.am-dl-choice__fmt{color:var(--muted);font-size:11.5px;line-height:1.4}
.am-dl-choice__tag{position:absolute;top:10px;right:12px;font-size:9.5px;font-weight:800;letter-spacing:.3px;
  color:var(--accent-ink);background:var(--accent);padding:2px 6px;border-radius:5px}
.am-dl-choice--pending{opacity:.6}
.am-dl-choice--pending:hover{transform:none;border-color:var(--accent-line);background:var(--surface)}
.am-dl-note{color:var(--muted);font-size:11px;line-height:1.5;margin:9px 4px 2px}
.am-dl-note b{color:var(--text);font-weight:700}
.am-dl-note code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;background:var(--surface-2);border:1px solid var(--accent-line);border-radius:4px;padding:1px 5px;color:var(--text);word-break:break-all}
@media (max-width: 0px) {.am-dl-choices{grid-template-columns:1fr}}

/* 2026-06-15: standard mode mobile polish. Keep brand/header distinct from the hero and prevent Korean names from breaking one syllable per line. */
body.public-viewer .tier-asset-wrap {
  min-width: 46px;
}
body.public-viewer .tier-asset-name {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}
@media (max-width: 0px) {
  body.public-viewer.standard-aram-mode .topbar .header-sub {
    display: none !important;
  }
  body.public-viewer.standard-aram-mode .public-entry__intro span {
    display: none !important;
  }
  body.public-viewer.standard-aram-mode .public-entry {
    padding-top: 16px !important;
  }
  body.public-viewer .tier-icons {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
    align-items: start !important;
  }
  body.public-viewer .tier-asset-wrap {
    width: auto !important;
    min-width: 48px !important;
    max-width: 62px !important;
  }
  body.public-viewer .tier-asset-name {
    min-height: 24px !important;
    max-height: 28px !important;
    font-size: 10.5px !important;
    line-height: 1.18 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
}

/* ── 표 승률 인라인 막대(op.gg/DeepLoL식, 10곳 종합 #2) + 행 호버. 승률 셀 밑에 값만큼 채워진 막대. ── */
body.public-viewer td.am-wr-cell { position: relative !important; }
/* 표 셀 세로정렬 통일(top) — 승률 셀이 %+막대 1.5줄이라 가운데정렬 시 옆 칸과 높이가 어긋나 보였다. 전 셀 top 정렬. */
body.public-viewer table tbody td { vertical-align: top !important; }
body.public-viewer td.am-wr-cell[data-am-high="1"] { --am-bar: var(--good) !important; }
body.public-viewer td.am-wr-cell[data-am-high="0"] { --am-bar: var(--bad) !important; }
/* 2026-06-23: 표 정렬 단일 규칙 — 데이터 셀에 정렬 규칙이 없어 브라우저 기본(th 가운데/td 좌측)으로 갈려 "제멋대로"로 보였고,
   거기에 승률만 가운데(am-wr-cell)로 만들어 더 어긋났다. 헤더·본문 모두 좌측 정렬로 통일(엔티티/숫자 일관). */
body.public-viewer #tableArea th,
body.public-viewer .table-wrap th,
body.public-viewer .participant-table-wrap th { text-align: left !important; }
/* 2026-06-23: 시간대/선택순서 버킷 셀 메타(판·승·패)를 한 줄로 압축 — 좁은 칸에서 3줄 줄바꿈돼 행이 길어지던 것 해소. */
body.public-viewer .am-bucket-meta { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; font-size: 8.5px !important; line-height: 1.2 !important; letter-spacing: -0.03em !important; opacity: 0.75 !important; }
/* 2026-06-24: 막대를 승률 % "바로 아래"에 붙인다. 셀 td가 아니라 strong(%) 자체의 블록 ::after로 두어
   ① 행이 높아도 % 직속(멀리 안 떨어짐) ② 표본 subtext가 있는 셀(많을때 등)에선 %와 subtext 사이에 자연 배치
   ③ % 좌측에 정렬(좌측정렬 텍스트와 일치) ④ td::before는 모바일 카드 data-label 칩에 양보. 트랙+채움 단일 그라디언트(40px). */
body.public-viewer td.am-wr-cell > strong { position: relative !important; z-index: 1 !important; display: block !important; }
/* 2026-06-26: 승률 막대 = 0~100% 좌측부터 채움(폭=승률%). 색은 50%미만 빨강 / 50%이상 녹색(--am-bar, data-am-high).
   2026-06-27: 막대 트랙을 셀(열) 폭에 맞춤(width:100%) — 고정 64px이 좁은 열 넘침/넓은 열 너무 짧던 것 해소. strong=block이라 ::after 100%=셀폭. */
body.public-viewer td.am-wr-cell > strong::after {
  content: "" !important; display: block !important; margin-top: 4px !important;
  width: 100% !important; height: 6px !important; border-radius: 999px !important;
  background: linear-gradient(to right,
    var(--am-bar, var(--bad)) calc(var(--wr, 0) * 1%),
    var(--wr-track, rgba(255,255,255,.09)) calc(var(--wr, 0) * 1%)) !important;
}
body.public-viewer table tbody tr:hover { background: rgba(255, 255, 255, 0.035) !important; }
/* 2026-06-27: 세로 데이터 rail 승률 — 숫자(50%↑녹/↓빨) + 0~100% 좌채움 막대. 표 막대와 동일 규칙. */
body.public-viewer .daily-vertical-rate { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 2px !important; line-height: 1.1 !important; width: 100% !important; }
body.public-viewer .daily-vertical-rate.good { color: var(--good) !important; }
body.public-viewer .daily-vertical-rate.bad { color: var(--bad) !important; }
body.public-viewer .daily-vertical-rate .dvr-bar { width: 100% !important; height: 6px; border-radius: 999px; background: var(--wr-track, rgba(255,255,255,.09)); overflow: hidden; }
body.public-viewer .daily-vertical-rate .dvr-bar i { display: block; height: 100%; border-radius: 999px; background: currentColor; }
/* 2026-06-27: dense 버킷 셀(시간대·선택순서) 승률 단일화 — 숫자든 막대든 50%↑녹/↓빨. 컴패니언 .bcell과 동일.
   ① 선택순서 슬롯셀(augmentSlotStatCell): 좌측앵커 0-100 막대 신규. ② 시간대 버킷셀(entity-time-cell): 숫자 색 + 막대 토큰색 통일. 표시값 불변. */
/* 2026-06-27: dense 표(시간대/선택순서) 막대 — 셀 vertical-align:bottom + 막대 칸폭(100%) 채움으로 메인·버킷·슬롯 막대를 모두 칸 맨 아래 같은 선에 정렬(텍스트 줄수 무관). absolute 미사용(견고). */
body.public-viewer .table-wrap--dense-bars table td { vertical-align: bottom !important; }
body.public-viewer .entity-time-cell { position: static; height: 100%; align-content: end; }
body.public-viewer .entity-time-cell > i,
body.public-viewer .am-slot-bar { display: block !important; width: 100% !important; height: 6px !important; margin-top: 4px !important; border-radius: 999px !important; background: var(--wr-track, rgba(255,255,255,.07)) !important; overflow: hidden; }
body.public-viewer .am-slot-bar > b { display: block; height: 100%; border-radius: 999px; }
body.public-viewer .am-slot-bar.good > b { background: var(--good); }
body.public-viewer .am-slot-bar.bad > b { background: var(--bad); }
body.public-viewer .entity-time-cell.good > strong { color: var(--good) !important; }
body.public-viewer .entity-time-cell.bad > strong { color: var(--bad) !important; }
body.public-viewer .entity-time-cell.good i b { background: var(--good) !important; }
body.public-viewer .entity-time-cell.bad i b { background: var(--bad) !important; }
/* 2026-06-26: 마감 디테일 — 아이콘 슬롯은 고정크기라 레이아웃 시프트는 없음(빈박스→이미지 플래시만).
   렌더 시 짧은 페이드인으로 '팝'을 '페이드'로 부드럽게. 등급(프리즘/골드/실버) 배경/테두리는 불변(이미지에만 적용).
   reduced-motion 사용자는 즉시 표시(접근성). */
@keyframes amIconFade { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: no-preference) {
  body.public-viewer td .mini-icon,
  body.public-viewer td .asset-cell img,
  body.public-viewer td .asset-chip img,
  body.public-viewer td .asset-icon-chip img { animation: amIconFade .2s ease-out both; }
}
/* 인터랙션 전환 부드럽게(호버/탭/배지) — 색만 전환, 레이아웃 불변 */
body.public-viewer table tbody tr,
body.public-viewer .pill,
body.public-viewer .tier-badge { transition: background-color .12s ease, color .12s ease; }

/* 2026-06-24: 순위 번호 전면 제거(JS applyRanks 무력화 + 이 CSS 삭제). 들여쓰기(padding-left:30px) 아티팩트 및
   번호 유무 깜빡임이 근원적으로 사라진다. 첫 칸은 모든 표에서 엔티티에 flush-left. */
/* 엔티티 칸의 반응형 종류 라벨(챔피언/증강/아이템/룬/대상/증강 조합) 중복 제거 — 표 하나는 한 종류뿐. 번호가 없어졌으므로 :not() 게이트 불필요. */
body.public-viewer .table-wrap tbody td[data-label="챔피언"]::before,
body.public-viewer .table-wrap tbody td[data-label="증강"]::before,
body.public-viewer .table-wrap tbody td[data-label="아이템"]::before,
body.public-viewer .table-wrap tbody td[data-label="룬"]::before,
body.public-viewer .table-wrap tbody td[data-label="대상"]::before,
body.public-viewer .table-wrap tbody td[data-label="증강 조합"]::before { content: "" !important; display: none !important; }
body.public-viewer table tbody .asset-cell strong { font-weight: 600 !important; }
body.public-viewer table thead th { color: var(--muted) !important; font-size: 12px !important; font-weight: 700 !important; border-bottom: 1px solid var(--line-strong) !important; }
body.public-viewer table tbody td { border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; }
/* 2026-06-24: 행 높이 축소 — 표 셀 subtext(표본 N승K패 등) 2줄이 행을 부풀리던 것을 컴팩트 사이즈로(신뢰가는 1068 버킷메타와 동급). */
body.public-viewer table tbody td .subtext:not(.am-bucket-meta) { font-size: 11px !important; line-height: 1.15 !important; margin-top: 0 !important; }
body.public-viewer table tbody td { padding-top: 6px !important; padding-bottom: 6px !important; }
/* 2026-06-24: 등급/분류 열 숨김 캐리어 — 필터 칩이 프리즘/골드/실버·메인룬/하위룬/파편을 이미 제공하므로 중복 열은 시각적으로 제거.
   데이터/라벨 텍스트는 DOM에 남겨(display:none) 칩 감지(amEntityFilterFor)·행 숨김(applyEntityFilter)이 그대로 동작. */
/* ⚠️ display:none는 셀을 테이블 컬럼 모델에서 제거→나머지 셀이 colgroup과 한 칸씩 어긋나 엔티티열이 0폭 붕괴.
   대신 컬럼은 모델에 남기되(0폭) 내용만 숨긴다(자식 display:none). 그러면 colgroup 폭 재분배가 정확히 매핑된다.
   applyEntityFilter는 textContent(자식이 display:none이어도 포함)로 등급/분류를 읽으므로 필터·칩은 그대로 동작. */
body.public-viewer th.am-col-hidden, body.public-viewer td.am-col-hidden {
  width: 0 !important; max-width: 0 !important; min-width: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; border-right: 0 !important;
  overflow: hidden !important; white-space: nowrap !important;
}
body.public-viewer th.am-col-hidden > *, body.public-viewer td.am-col-hidden > * { display: none !important; }
/* 2026-06-24: 패치노트 버튼 — 상단바 좌상단 브랜드의 중앙대칭(우상단). nav 안에서 margin-left:auto로 우측 끝에 붙는다. */
body.public-viewer .public-top-nav .am-patch-notes {
  margin-left: auto !important; align-self: center !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 6px 14px !important; border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.36) !important; background: rgba(255, 255, 255, 0.04) !important;
  color: #e5eefc !important; font-weight: 800 !important; font-size: 13px !important; line-height: 1 !important;
  text-decoration: none !important; white-space: nowrap !important; flex: 0 0 auto !important;
}
body.public-viewer .public-top-nav .am-patch-notes::after { content: "↗" !important; font-size: 11px !important; opacity: 0.7 !important; }
body.public-viewer .public-top-nav .am-patch-notes:hover { background: rgba(96, 165, 250, 0.18) !important; border-color: var(--accent, #5ec4ff) !important; color: #fff !important; }

/* ── [전체] 빽빽한 듀얼뷰(.table-wrap--compact): 칸이 너무 좁아 bolt-on 순위/막대를 빼서 텍스트 겹침 방지. ── */
/* 2026-06-23: 추이 숨김 CSS 2줄(entity-time-trend-cell + thead th:last-child) 제거.
   추이 열은 JS(entityTimePatternReportTable의 isAllVariant 가드, app_v2.js)가 [전체]에서만 빼고 고/저엔 유지한다.
   compact는 고/저 entityTime 표에도 붙으므로(amPublicCompactTableClass: entityTime|Pair|…) 이 CSS 숨김은 중복이자 유해:
   ①고/저 추이 그래프를 죽여 빈 열만 남기고 ②쌍/아이템 듀얼뷰의 마지막 데이터 헤더(예 우측 '승패')를 숨겨 헤더-셀 비대칭을 만든다. */
body.public-viewer .table-wrap--compact .asset-cell,
body.public-viewer .table-wrap--compact .asset-chip { padding-left: 0 !important; }
body.public-viewer .table-wrap--compact .asset-cell::before,
body.public-viewer .table-wrap--compact .asset-chip::before { content: none !important; }

/* ── 2026-06-23: 상단 nav 메뉴 '두 개 겹침'(클릭 후 드래그) 근본 수정 ──
   nav는 클릭(.is-open, setGroupOpen이 다른 그룹은 닫음) 기반인데, style_v2.css의 잔재 규칙
   `.public-top-nav__group:hover/:focus-within > .public-top-nav__menu{display:grid!important}`(2026-05-30 'visibility fallback')가
   hover만으로도 메뉴를 연다 → 한 그룹을 클릭(is-open)해 둔 채 커서를 다른 그룹으로 드래그하면 그쪽도 hover로 열려 두 개가 겹침.
   클릭 시스템이 의도된 동작이므로, '클릭으로 열리지 않은(:not(.is-open))' 그룹은 hover/focus-within으로 열리지 않게 막는다.
   (:not(.is-open) 특이도 + theme.css 후순위 로드로 모든 중복 hover 규칙을 한 번에 제압. 클릭-열림 그룹엔 미적용이라 정상 표시.) */
body.public-viewer .public-top-nav__group:hover:not(.is-open) > .public-top-nav__menu,
body.public-viewer .public-top-nav__group:focus-within:not(.is-open) > .public-top-nav__menu {
  display: none !important;
}

/* ── 2026-06-28: 공개분석 "기여 분석"(지분 트렌딩) 탭 ──
   엔티티(챔피언/아이템/룬·증강)의 승률·티어가 "왜 이 위치인지"를 조합 기여 지분으로 분해.
   막대 길이=지분(점유율), 색=승률(≥50 녹/<50 적). 통합검색 상세를 한눈 그래프로 요약. */
.contrib-wrap { display: flex; flex-direction: column; gap: 8px; }
.contrib-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 4px; }
.contrib-toolbar .contrib-chipbtn {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}
.contrib-toolbar .contrib-chipbtn.active { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.contrib-count { font-size: 12px; color: var(--muted); margin-bottom: 2px; }

/* 엔티티 카드 좌우 2열 그리드(세로 스크롤 절반, 공간 활용). 카드별 높이 독립(펼침 시 그 칸만 길어짐). */
.contrib-wrap.contrib-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
@media (max-width: 0px) { .contrib-wrap.contrib-list { grid-template-columns: 1fr; } }
.contrib-entity { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.contrib-wrap.contrib-list > .contrib-entity + .contrib-entity { margin-top: 0; }
.contrib-entity > summary { list-style: none; cursor: pointer; padding: 9px 12px; display: grid; gap: 7px; }
.contrib-entity > summary::-webkit-details-marker { display: none; }
.contrib-entity[open] { border-color: var(--accent); }
.contrib-entity[open] > summary { border-bottom: 1px solid var(--line); }

.contrib-head { display: flex; align-items: center; gap: 9px; }
.contrib-head .contrib-icon { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; background: var(--bg); }
.contrib-head .contrib-icon-fb { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.contrib-name { font-weight: 700; color: var(--text); font-size: 14px; }
.contrib-tier { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 5px; letter-spacing: .3px; }
.contrib-tier.t1 { color: #1a1205; background: #f2c14e; }
.contrib-tier.t2 { color: #06241a; background: var(--good); }
.contrib-tier.t3 { color: var(--text); background: rgba(255,255,255,.10); }
.contrib-tier.t4 { color: var(--text); background: rgba(255,255,255,.06); }
.contrib-tier.t5 { color: #2a0d10; background: var(--bad); }
.contrib-trend { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px; }
.contrib-trend.up { color: var(--good); background: rgba(47,207,154,.13); }
.contrib-trend.down { color: var(--bad); background: rgba(242,109,125,.13); }
.contrib-head .contrib-spacer { flex: 1 1 auto; }
.contrib-head .contrib-wr { font-weight: 800; font-variant-numeric: tabular-nums; }
.contrib-head .contrib-wr.good { color: var(--good); }
.contrib-head .contrib-wr.bad { color: var(--bad); }
.contrib-head .contrib-sample { font-size: 11px; color: var(--muted); }

/* 누적 지분 막대 (파티션: 챔피언 구성이 100%로 합산) */
.contrib-bar { display: flex; width: 100%; height: 14px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.06); }
.contrib-bar i { display: block; height: 100%; min-width: 2px; border-right: 1px solid rgba(13,17,23,.55); }
.contrib-bar i:last-child { border-right: 0; }
.contrib-seg-rest { background: rgba(255,255,255,.12) !important; }
.contrib-legend { display: flex; flex-wrap: wrap; gap: 5px 9px; }
.contrib-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.contrib-chip img { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.contrib-chip b { color: var(--text); font-weight: 700; }
.contrib-chip .cw-good { color: var(--good); font-weight: 700; }
.contrib-chip .cw-bad { color: var(--bad); font-weight: 700; }

/* 랭크 막대 (챔피언 대상: 빌드요소가 게임을 분할하지 않아 등장 점유율 기반 좌채움) */
.contrib-rank { display: grid; gap: 4px; }
.contrib-rank-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px; }
.contrib-rank-row > img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.contrib-rank-track { position: relative; height: 13px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.contrib-rank-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; }
.contrib-rank-label { position: absolute; left: 6px; right: 6px; top: 0; height: 100%; display: flex; align-items: center; font-size: 11px; color: var(--text); white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.contrib-rank-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }   /* 긴 이름은 …로 자름 */
.contrib-rank-pct { flex: 0 0 auto; }   /* 지분%는 항상 표시 */
.contrib-rank-meta { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contrib-more { grid-column: 1 / -1; margin-top: 2px; }
.contrib-more > summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--muted); padding: 7px 10px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; }
.contrib-more > summary::-webkit-details-marker { display: none; }
.contrib-more[open] > summary { color: var(--text); border-style: solid; margin-bottom: 8px; }
.contrib-rank-meta .cw-good { color: var(--good); font-weight: 700; }
.contrib-rank-meta .cw-bad { color: var(--bad); font-weight: 700; }

/* 통합검색 상세: 좋은/주의 조합 우측에 "티어 분석" 칸(데스크톱 3열). 모바일은 기존 규칙대로 세로로 접힘. */
@media (max-width: 99999px) {
  body.public-viewer .public-entity-overview__combos.has-tier-analysis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* 2026-07-01(개정): 세로데이터는 티어분석을 combos에서 빼내 시간대와 함께 .daily-vertical-midrow(절반폭)로
   재배치(app_v2.js dailyVerticalSearchPanel + style_v2.css). 따라서 세로데이터 combos는 has-tier-analysis가
   제거돼 기본 2열(좋은/주의)이 되고, 위 전체폭 override는 폐지. 통합검색 단독뷰의 3열(1272)은 그대로 유지. */
/* 티어 분석 박스: "아이템" 라벨 오른쪽에 2행 막대그래프, "룬/증강" 라벨 오른쪽에 2행 막대그래프(영향 막대 그대로).
   자세히 보기는 하단 결과카드와 동일한 <a> 버튼, 우하단 끝(막대와 충돌 방지)으로. */
.am-contrib-box { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.am-contrib-box .contrib-loading { font-size: 11px; color: var(--muted); }
/* 자세히보기 버튼: 하단 결과카드 버튼과 "동일 렌더"로 맞춤(고스트). theme.css 상단
   .public-search-detail-button{background:var(--accent)!important}를 더 높은 특이도+!important로 이김.
   기준값(라이브 측정)=투명 배경·글자 #dfe9f7·radius7·pad4/10·fw600·height28·테두리 1px rgba(94,139,255,.66)(이미 동일). */
.am-contrib-box .public-search-detail-button {
  align-self: flex-end; margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important;
  color: #dfe9f7 !important;
  border-radius: 7px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  min-height: 28px !important;
  height: 28px !important;
}
.am-tier-grid2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 9px; align-items: center; }
.am-tier-grid2 .am-tier-rl { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.am-tier-grid2 .am-tier-bars .contrib-rank { gap: 3px; }
.am-tier-grid2 .am-tier-bars .contrib-bar-empty { font-size: 11px; }

/* 챔피언 대상: 룬·아이템 두 축을 좌우 2열로(각 막대 절반 폭). 닫혀도 펼쳐도 동일 골격.
   한 축만 비중이 높아 "그것만으로 티어"로 오해되지 않게, 항상 양쪽(아이템+룬/증강)을 함께 보여준다. */
.contrib-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.contrib-col { min-width: 0; }
.contrib-col-h { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 4px; letter-spacing: .2px; }

.contrib-detail { padding: 10px 12px 12px; display: grid; gap: 10px; }
.contrib-detail .contrib-detail-h { font-size: 12px; font-weight: 700; color: var(--muted); }
.contrib-bar-empty { font-size: 12px; color: var(--muted); padding: 2px 0; }
.contrib-loading { font-size: 12px; color: var(--muted); padding: 1px 0; }
.contrib-hint { font-size: 12px; color: var(--muted); line-height: 1.5; }