/* ============================================================================
   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)
   ============================================================================ */

/* --- 다크: 실사용(공개+방송) 기본 테마. 소스 순서상 마지막 :root 라 전역 우승 --- */
: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: 10.5px;
  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: 10px;
}
.table-wrap--compact .entity-time-cell i {
  height: 3px;
  margin-top: 3px;
}
.table-wrap--compact .entity-time-bars {
  gap: 4px;
}
.table-wrap--compact .entity-time-chip {
  padding: 4px 5px;
}

@media (max-width: 760px) {
  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 최대(베이스 53px) → A 한 단계 크게 → 이하 기본(44px) */
.tier-row.tier-2 .tier-asset { width: 48px; height: 48px; }
.tier-row.tier-2 .tier-asset-wrap { width: 54px; }
.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: 760px) {
  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}

/* 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: 760px) {
  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;
  }
}