/* ============================================================================
   ARAM Mayhem · "Frost Observatory" 컴포넌트 리스킨 레이어  v=20260702-fable1
   ----------------------------------------------------------------------------
   적용법(로드 순서, 맨 뒤):
     <link rel="stylesheet" href="style_v2.css?v=...">
     <link rel="stylesheet" href="style_v2.theme.css?v=...">
     <link rel="stylesheet" href="design-tokens.css?v=20260702-fable1">
     <link rel="stylesheet" href="style_v2.reskin.css?v=20260702-fable1">  ← 이 파일
   ----------------------------------------------------------------------------
   2026-07-02 Fable 리스킨. 6/28 "Frost Precision" 레이어를 전면 개정.
   목적: ①가독성·이독성 — 본문 13.5px, 소형 텍스트 대비 상향, tabular 숫자,
   표 행간 확대 ②무대화 — 히어로 그레이딩(원화 유지+모드색 오로라 워시),
   티어 밴드(티어색 레일+고스트 글리프+상시 승률), 유리 헤더(폴백 포함)
   ③절제 유지 — 카피/기능/마크업/모드분리 불변.
   유일한 JS 연동: app_v2.js dailyTierAsset()가 붙이는 data-wr 속성(+wr-* 클래스)
   → 본 레이어 [data-wr]::after 로 상시 승률 표기. 속성 없으면 아무 일 없음.
   ============================================================================ */


/* ============================================================================
   §0  폰트 — Pretendard Variable 셀프호스팅(외부 CDN 의존 없음)
   ============================================================================ */
@font-face {
  font-family: "Pretendard Variable";
  src: url("assets/fonts/PretendardVariable.woff2?v=20260702") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
body, button, input, select, textarea {
  font-family: var(--font-sans) !important;
}
body {
  font-size: var(--fs-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}


/* ============================================================================
   §A  바탕 — 차분한 심연 그라데이션 + 미세 그레인(값싼 플랫 제거)
   ============================================================================ */
/* (감사 수정: base .public-viewer{background:…!important} 특이도에 밀려 증바람 공개뷰에서
   그레인 미렌더 → body.public-viewer 셀렉터 추가로 양모드 공통 렌더) */
body, body.public-viewer, body.standard-aram-mode {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E") repeat,
    linear-gradient(180deg, #0d1220 0, var(--bg) 260px, var(--bg-deep) 100%) !important;
}

/* 다크 스크롤바 — 전 표면 통일 */
* { scrollbar-width: thin; scrollbar-color: #26314a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #202a3e; border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2c3852; background-clip: padding-box; }

::selection { background: var(--accent-soft); }


/* ============================================================================
   §B  버튼 — 절제된 모던 버튼 + 정밀 포커스
   ============================================================================ */
button, .button {
  border: 1px solid transparent;
  border-radius: var(--r-md) !important;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650 !important;
  letter-spacing: -0.01em;
  box-shadow: none !important;
  transition: background .14s ease, border-color .14s ease,
              color .14s ease, transform .05s ease !important;
}
button:hover, .button:hover { background: var(--accent-strong); filter: none !important; }
button:active, .button:active { transform: translateY(0.5px); }

.ghost {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
}
.ghost:hover {
  background: var(--surface-2) !important;
  border-color: var(--line-strong) !important;
  filter: none !important;
}

a:focus-visible, button:focus-visible, input:focus-visible,
.segmented button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}


/* ============================================================================
   §C  헤더 — 유리(단 한 곳만 blur) + 모드색 헤어라인. 미지원 브라우저 폴백.
   ============================================================================ */
.topbar, body.public-viewer .topbar {
  background: rgba(9, 12, 19, .97) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.4) !important;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .topbar, body.public-viewer .topbar {
    background: rgba(8, 11, 18, .72) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
  }
}
.topbar::after {
  height: 1px !important;
  opacity: .45 !important;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent-2) 65%, transparent) !important;
}
.topbar h1 { font-weight: 780; letter-spacing: -0.015em; }


/* ============================================================================
   §D  카드/패널 — 이중 스트로크(헤어라인 + 상단 1px 하이라이트) 면 위계
   ============================================================================ */
.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,
.public-quick-grid a, .public-quick-grid .public-report-card,
.public-search-result-card, .synergy-pair-grid > div {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  box-shadow: var(--shadow-soft) !important;
  border: 1px solid var(--line) !important;
}
.panel { border-radius: var(--r-xl) !important; }

.metric:first-child {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border-color: var(--line) !important;
}
.metric { position: relative; }
.metric::before { background: var(--accent) !important; opacity: .9; }

/* 4카드 퀵그리드 — 정밀 리프트 + 모드색 링 */
.public-quick-grid a, .public-quick-grid .public-report-card {
  border-radius: var(--r-lg) !important;
  transition: border-color .16s ease, background .16s ease,
              transform .16s cubic-bezier(.22,.8,.3,1), box-shadow .16s ease !important;
}
.public-quick-grid a:hover, .public-quick-grid .public-report-card:hover {
  /* 감사 수정: base transform:none !important가 이겨 리프트 미동작 → !important */
  transform: translateY(-4px) !important;
  border-color: var(--accent-line) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.7), 0 0 0 1px var(--accent-line) !important;
}
.public-quick-grid a::before, .public-quick-grid .public-report-card::before { height: 1px !important; }


/* ============================================================================
   §E  히어로 — 원화(포로) 유지 + 모드색 오로라 듀오톤 그레이딩 / 유리 검색
   ----------------------------------------------------------------------------
   ::after = 기존 wallpaper 레이어(채도·밝기 그레이딩)
   ::before = 기존 워터마크 글자 → 오로라 워시 + 비네트로 대체(z: 이미지 위,
              콘텐츠 아래). 텍스트 대비가 올라가 이독성이 좋아진다.
   ============================================================================ */
.public-viewer .public-entry {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-soft) !important;
}
.public-viewer .public-entry::after {
  opacity: .5 !important;
  filter: saturate(.82) brightness(.8) contrast(1.03);
}
.public-viewer .public-entry::before {
  content: "" !important;
  display: block !important; /* 감사 수정: base 구 워터마크 규칙 display:none이 이겨 오로라 미렌더 */
  position: absolute;
  inset: 0;
  top: 0; left: 0;
  transform: none !important;
  z-index: 1;
  width: auto; height: auto;
  font-size: 0 !important;
  background:
    radial-gradient(1200px 460px at 50% -10%, var(--fx-aurora-a), transparent 60%),
    radial-gradient(880px 400px at 84% 2%, var(--fx-aurora-b), transparent 55%),
    radial-gradient(740px 380px at 10% 8%, var(--fx-aurora-c), transparent 60%),
    linear-gradient(180deg, rgba(6,9,16,.42) 0%, rgba(6,9,16,.18) 45%, var(--bg-deep) 99%);
  pointer-events: none;
}
.public-viewer .public-entry__intro h2 {
  background: linear-gradient(180deg, #ffffff 30%, #c7d5ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  letter-spacing: -0.045em;
  text-shadow: none;
}
.public-viewer .public-entry__intro span {
  border-color: var(--accent-line) !important;
  background: rgba(10, 12, 20, .55) !important;
  color: var(--accent) !important;
  font-weight: 700;
}
.public-viewer .public-entry__intro p { color: #bac7da; }

/* 검색 카드 — 흰 슬래브 → 유리 다크(모드색 포커스·그라데이션 버튼) */
.public-viewer .public-search-card {
  background: rgba(9, 12, 19, .88) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -22px rgba(0,0,0,.8) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.public-viewer .public-search-card:focus-within {
  border-color: var(--accent-line) !important;
  box-shadow: 0 0 0 4px var(--accent-soft), 0 24px 60px -22px rgba(0,0,0,.8) !important;
}
.public-viewer .public-search-row input {
  background: transparent !important;
  color: var(--text) !important;
  font-weight: 650 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.public-viewer .public-search-row input::placeholder { color: var(--muted) !important; font-weight: 500; }
.public-viewer .public-search-row button {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: var(--accent-ink) !important;
  font-weight: 800 !important;
  border-radius: 0 15px 15px 0 !important;
}
.public-viewer .public-search-row button:hover { filter: brightness(1.08) !important; }

/* 일반 인풋(리포트 상세표 검색 등) — 인셋 필드 + 모드색 포커스 */
.public-search-row input,
input[type="text"], input[type="search"] {
  background: #0a0e15 !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-md) !important;
  color: var(--text) !important;
}
input[type="text"]::placeholder, input[type="search"]::placeholder { color: var(--faint) !important; }
.public-search-row input:focus,
input[type="text"]:focus, input[type="search"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}

/* 공개뷰 검색 인풋 — base의 "흰 슬래브"(body.public-viewer … !important, 고특이성)를
   같은 셀렉터 목록으로 다크 유리로 전환(이 파일이 마지막 로드라 우승). */
body.public-viewer input[type="search"],
body.public-viewer input.search-input,
body.public-viewer #tableSearchInput,
body.public-viewer #comboExplorerInput,
body.public-viewer .public-search-row input,
body.public-viewer .hero-search input {
  background: #0a0e15 !important;
  color: var(--text) !important;
  border: 1px solid var(--line-strong) !important;
  caret-color: var(--accent);
}
body.public-viewer input[type="search"]::placeholder,
body.public-viewer input.search-input::placeholder,
body.public-viewer #tableSearchInput::placeholder,
body.public-viewer #comboExplorerInput::placeholder,
body.public-viewer .public-search-row input::placeholder,
body.public-viewer .hero-search input::placeholder {
  color: var(--muted) !important;
}
body.public-viewer input[type="search"]:focus,
body.public-viewer input.search-input:focus,
body.public-viewer #tableSearchInput:focus,
body.public-viewer #comboExplorerInput:focus,
body.public-viewer .public-search-row input:focus,
body.public-viewer .hero-search input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}
/* 히어로 검색(카드 안)은 필드 테두리 없이 카드가 감싼다 */
body.public-viewer .public-search-row input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.public-viewer .public-search-row input:focus {
  border: 0 !important;
  box-shadow: none !important;
}


/* ============================================================================
   §F  방송(치지직) 배너 — 카드 프레이밍(그린 슬래브가 의도된 요소로 읽히게)
   ============================================================================ */
.streamer-banner {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  position: relative;
  overflow: hidden;
}
.streamer-banner::before { width: 2px !important; background: var(--accent) !important; opacity: 1 !important; }
.streamer-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 120px at 88% 50%, rgba(0,255,163,.06), transparent 70%);
  pointer-events: none;
}


/* ============================================================================
   §G  탭 — 3겹 위계(카테고리=밑줄 / 필터=세그먼트 / 칩=옅은 액센트)
   ============================================================================ */
.section-head .segmented {
  background: var(--bg-deep) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 3px;
}
.section-head .segmented button { border-radius: calc(var(--r-md) - 3px) !important; }
.section-head .segmented button.active {
  color: var(--accent) !important;
  background: linear-gradient(180deg, var(--accent-soft), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 0 0 1px var(--accent-line) !important;
  font-weight: 700 !important;
}

#seasonTabs button.active, #rangeTabs button.active, #snapshotTabs button.active {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--accent-line) !important;
}

/* 카테고리 1차 내비 — 그라데이션 밑줄 + 은은한 글로우 */
#tableCategoryTabs.category-tabs button.active::after {
  height: 2px !important;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
  box-shadow: 0 -1px 10px var(--fx-glow) !important;
}

#tableTabs.wide-tabs button {
  border-radius: var(--r-pill) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
}
#tableTabs.wide-tabs button.active {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
}
#tableTabs.wide-tabs button.rate-low.active {
  color: var(--bad) !important; background: var(--bad-soft) !important; border-color: transparent !important;
}
#tableTabs.wide-tabs button.rate-high.active {
  color: var(--good) !important; background: var(--good-soft) !important; border-color: transparent !important;
}


/* ============================================================================
   §H  데이터 표 — 이독성 우선(행간·대비·정렬 숫자)
   ============================================================================ */
.table-wrap {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  background: var(--surface) !important;
}

th, body.public-viewer table thead th,
#tableArea .table-wrap thead th, #tableArea thead th {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--line-strong) !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  letter-spacing: .04em !important;
}

td, th, .metric strong, .match-kpis b, .tier-asset b, .synergy-kpis b,
.daily-vertical-rate, .entity-time-cell strong {
  font-variant-numeric: tabular-nums !important;
}

td {
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  color: var(--text);
  line-height: 1.5;
}
tbody tr:nth-child(even) td { background: rgba(255,255,255,.015) !important; }
tbody tr:hover td, #tableArea tbody tr:hover td { background: var(--accent-soft) !important; }
td strong { color: #f3f7fd !important; }
body.public-viewer table tbody .asset-cell strong { font-weight: 650 !important; }

.asset-cell .mini-icon, td .mini-icon, img.mini-icon {
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
}


/* ============================================================================
   §I  티어 보드 — "무대": 티어색 레일 + 고스트 글리프 + 상시 승률 + 정돈 셀
   ----------------------------------------------------------------------------
   · 오프스크린 밴드 페인트 스킵(content-visibility) — 178 아이콘 성능 보호.
   · 승률 뱃지는 dailyTierAsset()의 data-wr 속성이 있을 때만 나타난다.
   ============================================================================ */
.tier-board {
  background: var(--bg-deep) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
}
.tier-row {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:
    inset 3px 0 0 var(--tier-accent, var(--line-strong)),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  /* 2026-07-04 사용자: content-visibility:auto의 paint containment가 hover 시 위로 튀어나온 ▲N위 배지 상단(▲)을
     잘라먹었음 → 제거. 티어리스트는 짧고 아이콘도 loading=lazy라 성능 영향 미미. */
  overflow: visible;
}

/* 티어 틴트 + 레일색(신 사다리 팔레트) */
.tier-row.tier-1 { --tier-accent: var(--tier-1); background: linear-gradient(90deg, rgba(245,202,95,.09),  var(--surface) 34%) !important; border-color: rgba(245,202,95,.26) !important; }
.tier-row.tier-2 { --tier-accent: var(--tier-2); background: linear-gradient(90deg, rgba(74,222,154,.07),  var(--surface) 34%) !important; border-color: rgba(74,222,154,.20) !important; }
.tier-row.tier-3 { --tier-accent: var(--tier-3); background: linear-gradient(90deg, rgba(88,170,234,.06),  var(--surface) 36%) !important; border-color: rgba(88,170,234,.17) !important; }
.tier-row.tier-4 { --tier-accent: var(--tier-4); background: linear-gradient(90deg, rgba(139,149,167,.05), var(--surface) 36%) !important; border-color: rgba(139,149,167,.15) !important; }
.tier-row.tier-5 { --tier-accent: var(--tier-5); background: linear-gradient(90deg, rgba(238,114,134,.07), var(--surface) 34%) !important; border-color: rgba(238,114,134,.18) !important; }

/* 고스트 티어 글리프 — 라벨 뒤 은은한 대문자(우측 페이드로 절단면 정리) */
.tier-row::after {
  position: absolute;
  left: -6px; top: 50%;
  transform: translateY(-52%);
  z-index: 0;
  font-size: 84px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--tier-accent, #fff);
  opacity: .07;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent 92%);
  mask-image: linear-gradient(90deg, #000 25%, transparent 92%);
}
.tier-row.tier-1::after { content: "S"; }
.tier-row.tier-2::after { content: "A"; }
.tier-row.tier-3::after { content: "B"; }
.tier-row.tier-4::after { content: "C"; }
.tier-row.tier-5::after { content: "D"; }
.tier-row.tier-sample::after { content: ""; }

/* 티어 라벨 — 신 팔레트 + 은은한 글로우, 위계 또렷 */
.tier-label { position: relative; z-index: 1; }
.tier-label strong { font-size: 27px; text-shadow: 0 0 22px rgba(0,0,0,.4); }
.tier-label span { font-size: 9.5px; font-weight: 800; letter-spacing: .28em; opacity: .7; }
.tier-1 .tier-label { color: var(--tier-1) !important; }
.tier-2 .tier-label { color: var(--tier-2) !important; }
.tier-3 .tier-label { color: var(--tier-3) !important; }
.tier-4 .tier-label { color: var(--tier-4) !important; }
.tier-5 .tier-label { color: var(--tier-5) !important; }
.tier-row.tier-sample .tier-label { color: var(--tier-sample) !important; }

/* 챔피언 셀 — 원형 → 정밀 라운드 사각(아이콘 원화가 더 크게 보임) */
.tier-asset {
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 13px !important;
  background: #101722 !important;
  box-shadow: 0 3px 10px -4px rgba(0,0,0,.5) !important;
  transition: transform .15s cubic-bezier(.22,.8,.3,1), box-shadow .15s ease, border-color .15s ease;
}
.tier-asset img { border-radius: 12px !important; }
/* hover 시 해당 칩을 최상위로 — 변동 배지(▲/▼ N위)가 인접 칩/행 뒤로 가려지던 문제 수정
   (2026-07-04 사용자: "레이아웃보다 위로 글자가 나오면 좋겠는데 뒤로 가려져서").
   hover의 transform이 stacking context를 만드는데 z-index가 없어 배지가 다른 칩의 z-index:2 배지 뒤로
   깔렸다 → wrap(정적)을 position:relative + 높은 z-index로 끌어올려 배지를 앞으로. */
.daily-report .tier-asset-wrap:hover { position: relative; z-index: 30; }
.daily-report .tier-asset-wrap:hover .tier-asset {
  filter: none;
  /* 목업 04 스프링 리프트(진폭·오버슈트 정합) */
  transform: translateY(-4px) scale(1.06);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .15s, box-shadow .15s;
  border-color: var(--tier-accent, var(--accent)) !important;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.7), 0 0 0 2px var(--tier-accent, var(--accent)) !important;
  z-index: 30;
}
.tier-row.tier-1 .tier-asset img { box-shadow: none !important; }
.tier-row.tier-1 .tier-asset { border-color: rgba(245,202,95,.4) !important; }

/* 이름 — 9px → 11px, 2줄 유지(이독성 핵심) */
.tier-asset-wrap { width: 56px; gap: 3px; }
.tier-row.tier-1 .tier-asset-wrap { width: 64px; }
.tier-asset-name {
  font-size: 11px !important;
  line-height: 1.22 !important;
  max-height: 28px !important;
  color: #c9d3e2 !important;
  font-weight: 650 !important;
}

/* 상시 승률 — data-wr 속성이 있을 때만. 48~52%는 중립(노이즈 억제). */
.tier-asset-wrap[data-wr]::after {
  content: attr(data-wr);
  display: block;
  font-size: 10.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
  line-height: 1.1;
  color: var(--muted);
}
.tier-asset-wrap.wr-up[data-wr]::after { color: var(--good); }
.tier-asset-wrap.wr-dn[data-wr]::after { color: var(--bad); }

/* 포로마크 링 — 금색 유지, 글로우 절제 */
.tier-asset-wrap.has-poro .tier-asset { box-shadow: 0 0 0 2px rgba(244,208,111,.85) !important; }

/* 순위 변동 밴드 — 포로 금색 링과 동일 문법. 상승=녹색(--good), 하락=붉은색(--bad).
   (2026-07-04 사용자: 떡상/떡락 섹션 제거 대신 티어칩에 상승/하락을 띠로 표기)
   포로(has-poro) 규칙 뒤에 둬 상승/하락 시 밴드색이 순위변동을 우선 표기. */
.tier-asset-wrap.up .tier-asset { box-shadow: 0 0 0 2px rgba(61,220,151,.92), 0 0 12px rgba(61,220,151,.24) !important; }
.tier-asset-wrap.down .tier-asset { box-shadow: 0 0 0 2px rgba(255,123,140,.92), 0 0 12px rgba(255,123,140,.24) !important; }

/* 순위변동 배지(▲/▼ N위) — 우상단 → 칩 상단 중앙 정렬. (2026-07-04 사용자: 배지가 옆 칩/행 경계에
   가려지는 현상 수정) 우측 -18px overhang이 이웃 칩을 덮던 것을 제거하고, 칩 폭(48px) 안에 들어와
   겹침이 사라진다. 포로+변동 동시(has-poro) 선택자도 함께 잡아 right 이동값을 덮어씀. */
body.public-viewer .tier-asset b,
body.public-viewer .tier-asset-wrap.has-poro .tier-asset b {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  top: -12px !important;
  min-width: 0 !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  line-height: 1.12 !important;
}

/* 표본부족(sample) 행 — 점선 유지, 새 라운드에 맞춤 */
.tier-row.tier-sample { --tier-accent: var(--tier-sample); }
.tier-row.tier-sample .tier-asset { border-style: dashed !important; }


/* ============================================================================
   §J  지표 칩 / 매치 카드 / 배지
   ============================================================================ */
.mini-stats span, .recommend-score-row span, .evidence-line, .synergy-kpis span,
.mini-stat-chip, .team-numbers span {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text);
}
.match-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
}
.match-stat-grid .match-metric {
  background: var(--bg-deep) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}
.match-card:has(.pill.win)  { box-shadow: inset 3px 0 0 var(--good) !important; }
.match-card:has(.pill.loss) { box-shadow: inset 3px 0 0 var(--bad) !important; }

.pill, .move-badge { border-radius: var(--r-pill) !important; }
.tier-badge { border-radius: var(--r-sm) !important; }


/* ============================================================================
   §K-1  티어 분석 랭크 바(contrib-rank) — "글자가 든 슬래브" → 이름 + 얇은 바
   ----------------------------------------------------------------------------
   구조 불변(JS rankBars). 트랙을 키우고 fill을 바닥 5px 스트립으로 내려
   라벨은 그 위에 얹는다 → 이독성(텍스트가 채움색 위에 안 눌림).
   ============================================================================ */
.contrib-rank { gap: 7px; }
.contrib-rank-track {
  height: 22px;
  background: transparent;
  overflow: visible;
}
.contrib-rank-track::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  border-radius: 3px;
  background: var(--wr-track);
}
.contrib-rank-fill {
  top: auto;
  bottom: 0;
  height: 5px;
  border-radius: 3px;
  z-index: 1;
  opacity: .95;
}
.contrib-rank-label {
  left: 1px; right: 1px;
  top: 0;
  height: 15px;
  font-size: 11.5px;
  color: #cdd6e4;
  text-shadow: none;
}
.contrib-rank-meta { font-size: 11.5px; }

/* 챔피언 요약 승률 추이 — 모드색 통일(고정 하늘색 → accent) */
body.public-viewer .public-entity-overview__timegraph .am-trend-line path[fill="none"] { stroke: var(--accent); }
body.public-viewer .public-entity-overview__timegraph .am-trend-line path:not([fill="none"]) { fill: var(--accent); }
body.public-viewer .public-entity-overview__timegraph .am-trend-line circle { fill: var(--accent); stroke: var(--bg-deep); }


/* ============================================================================
   §K  툴팁(#assetTooltip, JS 포지셔닝) — 유리 팝 + 또렷한 본문
   ============================================================================ */
.asset-tooltip, #assetTooltip {
  background: rgba(10, 14, 22, .97) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8) !important;
  color: var(--text) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}
.asset-tooltip strong, #assetTooltip strong { color: #fff !important; }


/* ============================================================================
   §L  감사 즉시수정(2026-07-02, CSS-only 5건) — 라이브 감사에서 적발된
       "팔레트 밖 유물·겹침·로딩 공동"을 레이어에서 교정. 마크업 불변.
   ============================================================================ */

/* L-1 포로점수란?/포로마크란? — 갈색 앰버 필 → 조용한 3차 도움말 톤 */
.poro-score-help-button {
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
}
.poro-score-help-button:hover {
  color: var(--text) !important;
  border-color: var(--faint) !important;
  background: var(--surface-2) !important;
}

/* L-2 히어로 4카드 — 프리뷰가 "읽히게"(새 스크린샷의 가독 확보) + 호버 모드색 링 */
body.public-viewer .public-quick-grid a::after {
  opacity: .52 !important;
  filter: saturate(1.02) contrast(1.04) !important;
}
body.public-viewer .public-quick-grid a:hover::after,
body.public-viewer .public-quick-grid a:focus-visible::after,
body.public-viewer .public-quick-grid a.is-active::after {
  opacity: .66 !important;
}
body.public-viewer .public-quick-grid a:hover,
body.public-viewer .public-quick-grid a:focus-visible {
  border-color: var(--accent-line) !important;
}

/* L-3 치지직 배너 — 카피와 상호 워터마크(심볼+로고 2종 유지) 겹침 해소:
   워터마크 창을 우측으로 밀고 카피에 숨쉴 폭을 준다. 배치 구성은 동일. */
.streamer-banner__copy { max-width: 520px; }
.streamer-banner__watermark {
  inset: 0 130px 0 auto !important;
  width: 400px;
  justify-content: flex-end !important;
}
.streamer-banner__symbol { width: 96px !important; height: 96px !important; }
.streamer-banner__logo { width: 216px !important; height: 72px !important; }

/* L-4 티어보드 로딩 공동 — 아이콘 자리 shimmer 플레이스홀더(이미지 로드 전 "검은 벽" 방지) */
@keyframes fableAssetShimmer { from { background-position: -80px 0 } to { background-position: 120px 0 } }
.tier-asset {
  background: linear-gradient(100deg, #101722 38%, #1a2433 50%, #101722 62%) !important;
  background-size: 200px 100% !important;
  animation: fableAssetShimmer 1.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .tier-asset { animation: none; } }

/* L-5 이름 라벨 리듬 통일 — 전 셀 2줄 고정 박스(1줄 말줄임/2줄 혼재 제거) + 긴 단일어 수용 폭 */
.tier-asset-wrap { width: 58px; }
.tier-row.tier-1 .tier-asset-wrap { width: 64px; }
.tier-asset-name { height: 27px !important; max-height: 27px !important; }

/* L-6 상단 카테고리탭 활성 언더라인 — 레거시 골드 방지 보험(모드색 고정) */
#tableCategoryTabs.category-tabs button.active { border-bottom-color: var(--accent) !important; }


/* ============================================================================
   §M  모션(2026-07-02 승인 라운드) — "살아있되 조용히"
   ----------------------------------------------------------------------------
   전부 transform/opacity(GPU 컴포지터 전용). 마크업/JS 불변.
   reduced-motion 사용자는 전부 정지. 재렌더 시 재생되는 항목은 0.3s 이하 절제.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 히어로 원화가 아주 느리게 유영(46s 왕복) — 정지화면 → 살아있는 배경 */
  @keyframes fableHeroDrift {
    from { transform: scale(1.04) translateY(0); }
    to   { transform: scale(1.09) translateY(-12px); }
  }
  .public-viewer .public-entry::after {
    animation: fableHeroDrift 46s ease-in-out infinite alternate;
  }

  /* 타이틀 — 로드 직후 1회 빛 스윕 + 이후 아주 드문 셴(26s 주기) */
  @keyframes fableSheen { from { background-position: 120% 0; } to { background-position: 0% 0; } }
  @keyframes fableSheenIdle { 0%, 86% { background-position: 0% 0; } 93% { background-position: 60% 0; } 100% { background-position: 0% 0; } }
  .public-viewer .public-entry__intro h2 {
    background: linear-gradient(100deg, #ffffff 20%, #c7d5ea 40%, #ffffff 50%, #c7d5ea 60%, #ffffff 80%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: fableSheen 6s ease-in-out .6s 1 both, fableSheenIdle 26s ease-in-out 8s infinite;
  }

  /* 히어로 입장 캐스케이드 — 위→아래 순차(로드 1회) */
  @keyframes fableCas { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .public-viewer .public-entry__intro span { animation: fableCas .5s cubic-bezier(.22,.8,.3,1) .05s both; }
  /* h2 — 캐스케이드+셴 콤마 병합(감사 04 entrance-cascade: 최대 요소만 즉시 등장하던 구멍) */
  .public-viewer .public-entry__intro h2 {
    animation: fableCas .5s cubic-bezier(.22,.8,.3,1) .1s both,
               fableSheen 6s ease-in-out .6s 1 both,
               fableSheenIdle 26s ease-in-out 8s infinite;
  }
  .public-viewer .public-entry__intro p    { animation: fableCas .5s cubic-bezier(.22,.8,.3,1) .16s both; }
  .public-viewer .public-search-card       { animation: fableCas .5s cubic-bezier(.22,.8,.3,1) .24s both; }
  .public-viewer .public-quick-grid        { animation: fableCas .55s cubic-bezier(.22,.8,.3,1) .32s both; }
  /* 퀵카드 개별 스태거(감사 01 hero-view-cards) */
  .public-viewer .public-quick-grid a:nth-child(1) { animation: fableCas .5s cubic-bezier(.22,.8,.3,1) .36s both; }
  .public-viewer .public-quick-grid a:nth-child(2) { animation: fableCas .5s cubic-bezier(.22,.8,.3,1) .43s both; }
  .public-viewer .public-quick-grid a:nth-child(3) { animation: fableCas .5s cubic-bezier(.22,.8,.3,1) .50s both; }
  .public-viewer .public-quick-grid a:nth-child(4) { animation: fableCas .5s cubic-bezier(.22,.8,.3,1) .57s both; }

  /* 히어로 칩 글로우 도트 + 3.2s 펄스(목업 04 hero-chip-pulse) */
  .public-viewer .public-entry__intro span::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 1px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: amChipPulse 3.2s ease-in-out infinite;
  }
  @keyframes amChipPulse { 50% { opacity: .35; } }

  /* 밴드 내 챔피언 팝 스태거(목업 04 band-champ-stagger — 상한 캡, 재렌더 재생) */
  @keyframes amPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
  .tier-row .tier-asset-wrap { animation: amPop .42s cubic-bezier(.34,1.56,.64,1) both; }
  .tier-row .tier-asset-wrap:nth-child(2) { animation-delay: .03s; }
  .tier-row .tier-asset-wrap:nth-child(3) { animation-delay: .06s; }
  .tier-row .tier-asset-wrap:nth-child(4) { animation-delay: .09s; }
  .tier-row .tier-asset-wrap:nth-child(5) { animation-delay: .12s; }
  .tier-row .tier-asset-wrap:nth-child(6) { animation-delay: .15s; }
  .tier-row .tier-asset-wrap:nth-child(n+7) { animation-delay: .18s; }

  /* 챔피언 상세 섹션 rise 스태거(목업 02 rise) */
  .public-search-results--fixed .public-entity-overview--fixed { animation: fableRise .5s cubic-bezier(.22,.8,.3,1) both; }
  .public-entity-overview__combos .public-entity-combo-box:nth-child(1) { animation: fableRise .5s cubic-bezier(.22,.8,.3,1) .12s both; }
  .public-entity-overview__combos .public-entity-combo-box:nth-child(2) { animation: fableRise .5s cubic-bezier(.22,.8,.3,1) .18s both; }
  .public-entity-overview__combos .public-entity-combo-box:nth-child(3) { animation: fableRise .5s cubic-bezier(.22,.8,.3,1) .24s both; }
  .public-search-results__head { animation: fableRise .5s cubic-bezier(.22,.8,.3,1) .28s both; }

  /* 검색 카드 포커스 — '열리는' 느낌(목업 04 searchbar, 폭 대신 스케일) */
  .public-viewer .public-search-card:focus-within {
    transform: scale(1.015);
    transition: transform .35s cubic-bezier(.22,.8,.3,1), border-color .15s ease, box-shadow .15s ease;
  }

  /* 티어 밴드 입장 — 짧은 스태거(재렌더 시에도 0.3s 절제 재생) */
  @keyframes fableRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .tier-row { animation: fableRise .3s cubic-bezier(.22,.8,.3,1) both; }
  .tier-row:nth-child(2) { animation-delay: .05s; }
  .tier-row:nth-child(3) { animation-delay: .09s; }
  .tier-row:nth-child(4) { animation-delay: .13s; }
  .tier-row:nth-child(5) { animation-delay: .17s; }
  .tier-row:nth-child(n+6) { animation-delay: .2s; }

  /* 표/카드 뷰 전환 — 은은한 페이드 슬라이드(0.26s) */
  #tableArea .table-wrap, .public-search-result-card { animation: fableRise .26s ease-out both; }

  /* 버튼 눌림 물리감 */
  button:active, .button:active { transform: translateY(1px) scale(.99); }

  /* 입장 모션 1회 게이트 — 같은 뷰의 재렌더(비동기 풀 로딩)에는 재생 금지.
     JS amEntranceAnimGate가 #tableArea.am-settled 를 관리. */
  #tableArea.am-settled .tier-row,
  #tableArea.am-settled .tier-asset-wrap,
  #tableArea.am-settled .table-wrap,
  #tableArea.am-settled .public-search-result-card,
  #tableArea.am-settled .public-entity-overview--fixed,
  #tableArea.am-settled .public-entity-combo-box,
  #tableArea.am-settled .public-search-results__head {
    animation: none !important;
  }
}


/* ============================================================================
   §O  목업 파리티 마감(2026-07-02 승인분) — 스플래시·스택·빈상태·눈·카운트
   ============================================================================ */

/* O-1 챔피언 상세 스플래시 배너 — JS가 --am-splash 변수로 주입(챔피언만).
   마스크 미지원 브라우저는 배너 자체를 끔(폴백=현행 무배너). */
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .public-entity-overview--fixed { position: relative; overflow: hidden; }
  .public-entity-overview--fixed::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--am-splash, none) right 24% / 64% auto no-repeat;
    filter: saturate(.92) brightness(.82);
    opacity: .46;
    -webkit-mask-image: linear-gradient(90deg, transparent 28%, rgba(0,0,0,.6) 55%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 28%, rgba(0,0,0,.6) 55%, #000 100%);
    pointer-events: none;
  }
  .public-entity-overview--fixed > * { position: relative; }
}

/* O-2 조합 아이콘 아바타 스택 — 나열 → 겹침(호버 시 개별 리프트) */
.public-entity-overview__combos .public-search-preview-chip {
  border-radius: 11px !important;
  border: 2px solid var(--surface) !important;
  margin-left: -8px;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.5) !important;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.public-entity-overview__combos .public-search-preview-chip:first-child { margin-left: 0; }
.public-entity-overview__combos .public-search-preview-chip:hover {
  transform: translateY(-3px) scale(1.07);
  z-index: 2;
}

/* O-3 떡상/떡락 빈 상태 — 두 슬랩 → 조용한 한 줄(문구 동일) */
.daily-trend-list--empty { grid-template-columns: 1fr !important; display: grid; }
.daily-trend-list--empty article {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 0 !important;
  padding: 8px 14px !important;
  background: var(--bg-deep) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
}
.daily-trend-list--empty strong { margin: 0 !important; font-size: 12.5px !important; color: var(--muted) !important; }
.daily-trend-list--empty em { font-style: normal; color: var(--faint); margin-right: 16px; }

/* O-4 눈 파티클 — 히어로 한정, 다중 box-shadow 점 3레이어(GPU transform만) */
.am-snowfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.am-snowfield i {
  position: absolute;
  top: -8px; left: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: transparent;
}
.am-snowfield i:nth-child(1) {
  box-shadow: 8vw 0 0 rgba(255,255,255,.30), 34vw 14px 0 rgba(255,255,255,.20), 61vw 5px 0 rgba(255,255,255,.28), 83vw 18px 0 rgba(255,255,255,.18);
}
.am-snowfield i:nth-child(2) {
  width: 2.2px; height: 2.2px;
  box-shadow: 18vw 8px 0 rgba(255,255,255,.22), 47vw 0 0 rgba(255,255,255,.16), 72vw 12px 0 rgba(255,255,255,.24), 93vw 3px 0 rgba(255,255,255,.15);
}
.am-snowfield i:nth-child(3) {
  width: 1.6px; height: 1.6px;
  box-shadow: 12vw 4px 0 rgba(255,255,255,.14), 41vw 16px 0 rgba(255,255,255,.12), 66vw 9px 0 rgba(255,255,255,.16), 88vw 0 0 rgba(255,255,255,.12);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes amSnowFall {
    from { transform: translate3d(0, -4vh, 0); }
    to   { transform: translate3d(18px, 105vh, 0); }
  }
  .am-snowfield i:nth-child(1) { animation: amSnowFall 15s linear infinite; }
  .am-snowfield i:nth-child(2) { animation: amSnowFall 21s linear -7s infinite; }
  .am-snowfield i:nth-child(3) { animation: amSnowFall 28s linear -13s infinite; }
}

/* O-5 표본수 카운트업 숫자 강조(JS am-count) */
.public-entry__intro p .am-count { color: #fff; font-weight: 750; font-variant-numeric: tabular-nums; }

/* O-6 하단 치지직 배너 강등 — 상단과 중복이므로 낮은 존재감(기능·링크 유지) */
.streamer-banner-bottom { padding: 8px 16px !important; }
.streamer-banner-bottom .streamer-banner__watermark { opacity: .35 !important; }
.streamer-banner-bottom .streamer-banner__eyebrow { display: none !important; }


/* ============================================================================
   §P  960 밀도 감수 마감(2026-07-02 전수 감수 반영) — 줄바꿈/말줄임/겹침 제거
   ----------------------------------------------------------------------------
   원칙: 정보 삭제 없음. 숫자는 nowrap+tabular, 이름은 어절 경계 2줄까지,
   말줄임(…) 규칙은 전체 표기(2줄 클램프)로 대체, 열폭은 JS 재배분과 한 쌍.
   ============================================================================ */

/* P-1 [전체] split 표 — 주 숫자(strong)는 안 꺾고, 서브텍스트는 그룹 스팬 사이에서만
   줄바꿈(2026-07-03: 통짜 nowrap이 q450 대자릿수에서 옆 열 침범 → 렌더러 스팬과 세트) */
body.public-viewer .public-all-section td strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.public-viewer .public-all-section td .subtext {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}
body.public-viewer .public-all-section th { white-space: nowrap; }
/* 2026-07-03 q450 자릿수: 분할(반폭) 표 셀 좌우 패딩 다이어트로 숫자 열 내용폭 +6px */
body.public-viewer .public-all-split td { padding-left: 7px !important; padding-right: 7px !important; }
/* 분할 표 서브텍스트 미세 축소 — "5,704판"급 스팬이 경계에서 수 px 잘리던 잔재 마감 */
body.public-viewer .public-all-split td .subtext { font-size: 10px; letter-spacing: -.2px; }

/* P-2 [전체] split 증강/아이템 칩 — 한 줄 …말줄임 → 어절 경계 2줄 전체 표기
   (조합 분할표는 .icon-row 래퍼 없이 td>.asset-chip>span 구조 — 전역 ellipsis
   규칙(.asset-chip span, style_v2.css)이 걸리므로 표 셀 전체를 함께 커버) */
body.public-viewer #tableArea td .asset-chip span,
body.public-viewer .public-all-section .icon-row .asset-chip span {
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: clip !important;
  word-break: keep-all;
  line-height: 1.22;
}
/* 챔피언 이름 셀 — 음절 중간 꺾임 금지(어절 경계만), 살짝 컴팩트.
   P-1 td strong nowrap이 이름까지 잡아 옆 열 침범(아우렐리온 솔 +17px) → 이름만 normal 복원.
   inline-flex 셀은 td 폭을 안 받아 수축 불가 → flex+max-width 100%+min-width 0으로
   폭 제약을 걸어야 어절 줄바꿈이 실제 발동(라이브 주입 실측: 넘침 218→0) */
body.public-viewer .public-all-section td .asset-cell {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
}
body.public-viewer .public-all-section td .asset-cell strong {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  font-size: 12.5px;
  letter-spacing: -.2px;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.22;
}

/* P-3 세로 데이터 상세 — 좌(190px 캡 스파크) 남고 우(티어분석) 꽉 끼던 50:50 재배분 */
body.public-viewer .daily-vertical-midrow {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
}
.contrib-rank-meta { font-size: 10.5px !important; }

/* P-4 분포 데이터 탭 — 8번째 탭 글자 중간 절단 방지(넘치면 온전한 줄바꿈) */
body.public-viewer .daily-distribution-tabs { flex-wrap: wrap !important; }

/* P-5 산점도 캡 상향 — 2026-07-03 단일규칙化: 시간뿐 아니라 표본/딜량/골드 등
   전 분포가 같은 렌더러(.time-scatter-card)인데 스코프가 시간 전용이라 크기가 제각각이었음 */
@media (min-width: 761px) {
  /* 2026-07-03 2차: 표본 분포 등 일부 컨텍스트가 더 높은 특이도 규칙에 남아 520px 잔존 → 광역 강화 */
  body.public-viewer .time-scatter-card,
  #tableArea .time-scatter-card,
  #tableArea .time-scatter-single .time-scatter-card { width: min(100%, 860px) !important; }
  body.public-viewer .time-scatter-plot,
  #tableArea .time-scatter-plot,
  #tableArea .time-scatter-single .time-scatter-plot { width: min(100%, 800px) !important; }
  /* 2026-07-03 3차(Opus): 표본/딜량/골드 등 2D 분포는 poro-distribution-card 별도 클래스 +
     base의 max-width:500/570 !important가 시간 분포(800)와 크기를 어긋나게 함(사용자 "제각각").
     poro 계열 card/plot의 width·max-width를 시간 분포와 동일 규격으로 통일. */
  body.public-viewer #tableArea .poro-distribution-single .poro-distribution-card,
  body.public-viewer #tableArea .poro-distribution-card {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
  }
  body.public-viewer #tableArea .poro-distribution-plot {
    width: min(100%, 800px) !important;
    max-width: 800px !important;
  }
}

/* P-5b 검은 박스 통일(2026-07-04): 산점도/2D분포 플롯 배경이 base의 #000!important(style_v2.css:7689)로 프로스트 카드 속에서
   홀로 순검정 박스로 튐 → 인접 프로스트 유리(스탯박스 rgba(8,11,18,.6), timegraph .55)와 동일 톤으로 통일. reskin 마지막로드+!important로 우승.
   dots는 밝은 색이라 이 톤에서도 대비 유지. poro-distribution-plot은 time-scatter-plot과 같은 요소라 함께 적용. */
body.public-viewer #tableArea .time-scatter-plot,
#tableArea .time-scatter-plot,
body.public-viewer #tableArea .poro-distribution-plot,
#tableArea .poro-distribution-plot {
  background: rgba(8, 11, 18, .6) !important;
}

/* P-5c q450 개인기록 하위탭 3행 정돈(2026-07-04 사용자 지시): 14개 탭이 nowrap 가로 스크롤로 줄줄이 늘어져 보기 어려움 →
   분류(내 기록/조합·기록/아군·상대)별 행으로. amGroupPersonalTabs()가 CSS order로 그룹 클러스터링 + 줄바꿈 스페이서(.am-tabgroup-break, flex-basis:100%)로 행 분리 + 인라인 라벨(.am-tabgroup-label). personal 카테고리일 때만 .am-tabs-grouped. */
#tableTabs.am-tabs-grouped {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  row-gap: 6px; column-gap: 6px;
  overflow: visible !important;
}
#tableTabs.am-tabs-grouped button[data-table] { flex: 0 0 auto !important; }
/* 버튼 order를 data-table별로 고정(!important). inline order는 triplet 레이아웃 리셋이 지워서 그룹이 풀리므로 CSS로 못박는다.
   값은 amGroupPersonalTabs의 스캐폴드 order(라벨 0/8/15, 브레이크 7/14)와 정확히 맞물린다. 내 기록=1~6 / 조합·기록=9~13 / 아군·상대=16~21. */
#tableTabs.am-tabs-grouped button[data-table="standardPersonalSummary"] { order: 1 !important; }
#tableTabs.am-tabs-grouped button[data-table="standardPersonalFortune"] { order: 2 !important; }
#tableTabs.am-tabs-grouped button[data-table="standardPersonalChampion"] { order: 3 !important; }
#tableTabs.am-tabs-grouped button[data-table="standardPersonalRune"] { order: 4 !important; }
#tableTabs.am-tabs-grouped button[data-table="standardPersonalItem"] { order: 5 !important; }
#tableTabs.am-tabs-grouped button[data-table="standardPersonalTime"] { order: 6 !important; }
#tableTabs.am-tabs-grouped button[data-table="standardPersonalChampionRune"] { order: 9 !important; }
#tableTabs.am-tabs-grouped button[data-table="standardPersonalChampionItem"] { order: 10 !important; }
#tableTabs.am-tabs-grouped button[data-table="standardPersonalRuneItem"] { order: 11 !important; }
#tableTabs.am-tabs-grouped button[data-table="standardPersonalNicknames"] { order: 12 !important; }
#tableTabs.am-tabs-grouped button[data-table="standardPersonalMatches"] { order: 13 !important; }
#tableTabs.am-tabs-grouped button[data-table="teamAllyChampion"] { order: 16 !important; }
#tableTabs.am-tabs-grouped button[data-table="teamEnemyChampion"] { order: 17 !important; }
#tableTabs.am-tabs-grouped button[data-table="teamAllyAugment"] { order: 18 !important; }
#tableTabs.am-tabs-grouped button[data-table="teamEnemyAugment"] { order: 19 !important; }
#tableTabs.am-tabs-grouped button[data-table="teamAllyItem"] { order: 20 !important; }
#tableTabs.am-tabs-grouped button[data-table="teamEnemyItem"] { order: 21 !important; }
#tableTabs.am-tabs-grouped .am-tabgroup-break { flex: 0 0 100%; width: 100%; height: 0; margin: 0; padding: 0; border: 0; }
/* 카테고리 = 전폭 헤더(하위 버튼 줄과 확실히 구별). 버튼과 달리 배경/보더 없고 강조색+밑줄. */
#tableTabs.am-tabs-grouped .am-tabgroup-label {
  flex: 0 0 100%; width: 100%; align-self: stretch;
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  color: var(--accent, #7cc3f0); opacity: .95; white-space: nowrap;
  padding: 8px 4px 4px; margin: 5px 0 1px;
  border-bottom: 1px solid rgba(120,150,190,.18);
}

/* P-6 세로 데이터 좌측 리스트 헤더 — 라벨이 한 열씩 밀려 '승률'이 티어 배지를 가리킴 */
body.public-viewer .daily-vertical-list-head strong:nth-child(2) { grid-column: 2 / 4; }

/* P-7 고/저승률 칩 — pill 라운드가 3px 색 보더를 '(' 초승달로 휘게 함 → 직선 스트라이프,
   활성 상태에서도 의미색 유지(무엇을 보는지 색으로 남게) */
#tableTabs.wide-tabs button.rate-high,
#tableTabs.wide-tabs button.rate-low {
  border-left: 0 !important;
  border-radius: 9px !important;
}
#tableTabs.wide-tabs button.rate-high { box-shadow: inset 3px 0 0 var(--good) !important; }
#tableTabs.wide-tabs button.rate-low  { box-shadow: inset 3px 0 0 var(--bad) !important; }
#tableTabs.wide-tabs button.rate-high.active { box-shadow: inset 3px 0 0 var(--good) !important; }
#tableTabs.wide-tabs button.rate-low.active  { box-shadow: inset 3px 0 0 var(--bad) !important; }

/* P-8 쌍(pair) 셀 — 두 엔티티 사이 간격이 엔티티 내부 간격보다 좁던 그룹핑 역전 + 꺾임 방지 */
#tableArea td .icon-row { gap: 12px; flex-wrap: nowrap; }


/* ============================================================================
   §Q  목업 02(챔피언 상세) 전면 파리티 — 2026-07-02 사용자 지적 반영
   ----------------------------------------------------------------------------
   계약: fable_design_mockups/02_site_champion.html + fable.css.
   기능·데이터·마크업 로직 불변, 순수 표현. 모드분리=기존 --accent 토큰(자수정/시안).
   ============================================================================ */

/* Q-1 히어로 카드 골격 — 이중 스트로크 + 오로라 워시(::after, 스플래시 ::before와 별개) */
body.public-viewer .public-entity-overview {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 14px 34px -18px rgba(0,0,0,.65) !important;
}
.public-entity-overview--fixed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, var(--fx-aurora-a) 100%);
  pointer-events: none;
}
/* 스플래시 강도 — 목업 수치로 정합(우측 앵커·마스크 페이드) */
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .public-entity-overview--fixed::before {
    background: var(--am-splash, none) right 18% / 58% auto no-repeat;
    filter: saturate(.9) brightness(.75);
    opacity: .5;
    -webkit-mask-image: linear-gradient(90deg, transparent 26%, rgba(0,0,0,.5) 55%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 26%, rgba(0,0,0,.5) 55%, #000 100%);
  }
}

/* Q-2 아이콘 — 76px 라운드 20px + 모드색 아웃라인·글로우(목업 ch-ic) */
body.public-viewer .public-entity-overview__icon .public-search-preview-chip {
  width: 76px !important;
  height: 76px !important;
  border-radius: 20px !important;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 26px var(--accent-soft) !important;
  border: 0 !important;
  overflow: hidden;
}
body.public-viewer .public-entity-overview__icon .public-search-preview-chip img {
  /* 2026-07-03(재수정): 고정 86px+margin -5px는 76px 칩 전용값이었음 → 세로 요약패널의 52px 칩에서는
     86px 이미지가 좌상단으로 밀려 "얼굴 좌상단만" 보였다(징크스/그라가스). 칩 크기(76px·52px) 불문
     100% 채우고 중앙 크롭으로 통일 — 정사각 소스라 크롭 없이 얼굴 전체가 정중앙에 온다. */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Q-3 타이틀 위계 — 눈썹(모드색 대문자 자간)·27px 이름·티어 칩·pill 배지 */
body.public-viewer .public-entity-overview__eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  color: var(--accent) !important;
  text-transform: uppercase;
}
body.public-viewer .public-entity-overview__title h3 {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 27px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: var(--text) !important;
}
.am-tier-chip {
  font-size: 13px; font-weight: 900; color: #1a1405;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: linear-gradient(135deg, #ffe9ad, #f5ca5f);
  border-radius: 8px;
  box-shadow: 0 4px 14px -4px rgba(245,202,95,.5);
  flex: 0 0 auto;
}
.am-tier-chip--a { background: linear-gradient(135deg, #b8f5d2, #4ade9a); box-shadow: 0 4px 14px -4px rgba(74,222,154,.5); color: #062516; }
.am-tier-chip--b { background: linear-gradient(135deg, #bfe0fb, #58aaea); box-shadow: 0 4px 14px -4px rgba(88,170,234,.5); color: #082032; }
.am-tier-chip--c { background: linear-gradient(135deg, #d4dae4, #8b95a7); box-shadow: 0 4px 14px -4px rgba(139,149,167,.5); color: #171c25; }
.am-tier-chip--d { background: linear-gradient(135deg, #ffc3cc, #ee7286); box-shadow: 0 4px 14px -4px rgba(238,114,134,.5); color: #33070f; }
body.public-viewer .public-entity-badges span {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.03);
}

/* Q-4 스파크 컨테이너 — 유리(글래스) 인셋.
   2026-07-03(S2): 히어로 스파크 높이 고정(~86px) — fill(preserveAspectRatio=none)로 넓고 납작하게
   채워 "세로로 잡아당긴" 형태 방지. svg는 컨테이너를 100% 채움. */
body.public-viewer .public-entity-overview__timegraph {
  background: rgba(8, 11, 18, .55) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  height: 92px !important;
  box-sizing: border-box;
}
body.public-viewer .public-entity-overview__timegraph .am-trend-line {
  height: 100% !important;
}
/* 세로 상세 재구성 — 2026-07-03 사용자 지시: 스파크를 __top의 스탯 왼쪽(통합검색 결과처럼),
   티어분석은 __combos 2열에서 좋은조합 아래(row2 col1 = 좋은조합과 같은 폭)로 자연 배치. (midrow 재배치 폐기.)
   좁은 세로 패널(≈560px)에 맞춰 스파크는 컴팩트(56px·svg 40px, 자연비율 근처로 납작 — 잡아당김 없음).
   베이스 §세로재배치 __top 2열 규칙(0,3,1)을 동일 특이도로 덮음. */
body.public-viewer .daily-vertical-summary-panel .public-entity-overview__top {
  grid-template-columns: minmax(0, 1fr) 160px max-content !important;
  align-items: center !important;
  gap: 10px !important;
}
body.public-viewer .daily-vertical-summary-panel .public-entity-overview__timegraph {
  height: 56px !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  display: flex !important;
  align-items: center !important;
}
body.public-viewer .daily-vertical-summary-panel .public-entity-overview__timegraph svg.am-trend-line {
  height: 40px !important;
  width: 100% !important;
}
body.public-viewer .daily-vertical-summary-panel .public-entity-overview__combos {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
}
@supports (backdrop-filter: blur(1px)) {
  body.public-viewer .public-entity-overview__timegraph { backdrop-filter: blur(8px); }
}
body.public-viewer .public-entity-overview__timegraph .am-trend-line path:not([fill="none"]) { opacity: .22; }

/* 2026-07-04 세로데이터 우측 빌드 패널(사용자 대규모 개편): op.gg식 룬·아이템(q450)/증강·아이템(q2400) 2필터.
   combos 2열 그리드 → 단일 컬럼(빌드 리스트 전체폭). 본문 행은 기존 .contrib-rank(발산막대) 재사용. */
body.public-viewer .daily-vertical-summary-panel .public-entity-overview__combos--build {
  display: block !important;
  grid-template-columns: none !important;
  padding: 0 !important;
}
.dv-build-panel { display: flex; flex-direction: column; gap: 9px; }
.dv-build-tabs { display: flex; gap: 7px; }
.dv-build-tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 9px;
  background: rgba(8, 11, 18, .45);
  color: var(--muted); font-weight: 800; font-size: 13.5px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.dv-build-tab:hover { color: #cbd5e1; border-color: var(--line-strong, var(--line)); }
.dv-build-tab.active {
  color: #fff; border-color: var(--accent);
  background: linear-gradient(180deg, rgba(17, 101, 127, .38), rgba(17, 101, 127, .18));
}
.dv-build-cnt { font-size: 11px; font-weight: 700; opacity: .66; }
.dv-build-tab.active .dv-build-cnt { opacity: .85; }
/* 검색 + 정렬 한 줄(좁으면 자연스레 줄바꿈). 검색은 늘어나고 정렬 버튼은 우측 고정. */
.dv-build-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 1px 0; }
.dv-build-search-wrap { flex: 1 1 150px; min-width: 0; }
.dv-build-search {
  width: 100%; box-sizing: border-box;
  padding: 8px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(8, 11, 18, .5);
  color: #e5eaf0; font-size: 13px;
}
.dv-build-search::placeholder { color: var(--muted); }
.dv-build-search:focus { outline: none; border-color: var(--accent); background: rgba(8, 11, 18, .7); }
/* 정렬 버튼(기여도/승률순/표본순) — 티어분석 막대는 유지, 순서만 재정렬. 선택된 버튼 강조. */
.dv-build-sort { display: inline-flex; gap: 4px; flex: 0 0 auto; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8, 11, 18, .4); }
.dv-build-sort-btn {
  padding: 6px 10px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); font-weight: 800; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  transition: color .12s, background .12s;
}
.dv-build-sort-btn:hover { color: #cbd5e1; }
.dv-build-sort-btn.active { color: #fff; background: linear-gradient(180deg, rgba(17, 101, 127, .42), rgba(17, 101, 127, .2)); }
/* 2026-07-04 사용자: 빌드패널 검색 버튼식(검색/지우기) + "티어 기여도"는 정렬옵션 아닌 막대 설명 라벨 */
.dv-build-search-wrap { flex: 1 1 240px; display: flex; gap: 5px; align-items: center; }
.dv-build-search-wrap .dv-build-search { width: auto; flex: 1 1 auto; min-width: 0; }
.dv-build-search-wrap .dv-build-search-go, .dv-build-search-wrap .dv-build-search-clear {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 8px; font-weight: 800; font-size: 12.5px; white-space: nowrap; cursor: pointer; line-height: 1;
}
.dv-build-search-wrap .dv-build-search-go { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.dv-build-search-wrap .dv-build-search-clear { background: rgba(8,11,18,.5); color: var(--muted); border: 1px solid var(--line); }
.dv-build-search-wrap .dv-build-search-clear:hover { color: #cbd5e1; }
.dv-build-legend { font-size: 11.5px; color: var(--muted); padding: 1px 2px 0; }
.dv-build-legend b { color: #cbd5e1; }
.dv-build-legend small { opacity: .78; }
/* 검색창 캐럿 흰색(깜빡이 막대) — 다크 입력에 어두운 캐럿(#081320)이 안 보였음 → 흰 막대 깜빡여 입력 대기 표시 */
body.public-viewer input[type="search"],
body.public-viewer input.search-input,
body.public-viewer #tableSearchInput,
body.public-viewer #comboExplorerInput,
body.public-viewer .public-search-row input,
body.public-viewer .hero-search input,
body.public-viewer .dv-build-search,
.dv-build-search, #tableSearchInput { caret-color: #ffffff !important; }
/* 전량(캡 없음) 표시 — 동적 높이(사용자 지시): 내부 스크롤 없이 데이터만큼 패널이 늘어나고 페이지가 스크롤. */
.dv-build-body {
  display: flex; flex-direction: column; min-height: 60px;
}
.dv-build-body .contrib-rank { gap: 5px; }
.dv-build-body .contrib-bar-empty,
.dv-build-body .contrib-loading { padding: 16px 4px; opacity: .7; font-size: 12.5px; text-align: center; }

/* 2026-07-04 티어리스트 선택 모달(세로 데이터 / 통합 검색). */
.dv-choice-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.dv-choice-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 7, 12, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.dv-choice-box {
  position: relative; width: min(440px, 92vw);
  background: linear-gradient(180deg, #202b3d, #141c29);
  border: 1px solid rgba(128, 158, 190, .30); border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: dvChoiceRise .18s ease both;
}
@keyframes dvChoiceRise { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.dv-choice-x {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.dv-choice-x:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.dv-choice-title { margin-bottom: 16px; padding-right: 28px; }
.dv-choice-title strong { display: block; font-size: 19px; color: #fff; }
.dv-choice-title span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.dv-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.dv-choice-opt {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  padding: 15px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid rgba(128, 158, 190, .24); background: rgba(255, 255, 255, .05);
  transition: border-color .12s, background .12s, transform .1s;
}
.dv-choice-opt:hover { border-color: var(--accent); background: rgba(17, 101, 127, .16); transform: translateY(-1px); }
.dv-choice-opt--vertical:hover { border-color: var(--good); background: rgba(15, 139, 97, .16); }
.dv-choice-opt b { font-size: 15px; color: #fff; font-weight: 800; }
.dv-choice-opt small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 460px) { .dv-choice-actions { grid-template-columns: 1fr; } }

/* Q-5 스탯 박스 — 유리 + 주인공 숫자 + 포로점수 그라데이션 텍스트.
   2026-07-03 수정(S4): 내 padding 13px가 base 62px 타일에서 24px 숫자를 6px 초과시킴
   → 타일 높이 자동(고정 62px 캡 해제)+세로 중앙정렬(align-content:center)로 걸침/초과 제거. */
body.public-viewer .public-entity-overview__stats span {
  min-width: 112px;
  height: auto !important;
  min-height: 64px !important;
  max-height: none !important;
  padding: 11px 16px !important;
  align-content: center !important;
  align-items: center !important;
  border-radius: 12px !important;
  text-align: center;
  background: rgba(8, 11, 18, .6) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset !important;
}
@supports (backdrop-filter: blur(1px)) {
  body.public-viewer .public-entity-overview__stats span { backdrop-filter: blur(8px); }
}
body.public-viewer .public-entity-overview__stats em {
  display: block;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: normal;
  color: var(--faint) !important;
  letter-spacing: .08em !important;
  margin-bottom: 5px;
}
body.public-viewer .public-entity-overview__stats b {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  font-variant-numeric: tabular-nums;
}
body.public-viewer .public-entity-overview__stats span:last-child b:not(.good-text):not(.bad-text) {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Q-6 조합 패널 — 헤더 컬러 바 + 행 구분선 + 라벨 위계(+설명 small) */
body.public-viewer .public-entity-combo-box > strong {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  margin-bottom: 10px;
}
body.public-viewer .public-entity-combo-box > strong::before {
  content: "";
  width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
body.public-viewer .public-entity-combo-box--good > strong::before { background: var(--good); }
body.public-viewer .public-entity-combo-box--caution > strong::before { background: var(--bad); }
body.public-viewer .public-entity-combo-row { padding: 8px 0 !important; }
body.public-viewer .public-entity-combo-row + .public-entity-combo-row { border-top: 1px solid var(--line); }
body.public-viewer .public-entity-combo-label { font-size: 12px !important; font-weight: 700 !important; }
body.public-viewer .public-entity-combo-box--good .public-entity-combo-label { color: var(--good) !important; }
body.public-viewer .public-entity-combo-box--caution .public-entity-combo-label { color: var(--bad) !important; }
body.public-viewer .public-entity-combo-label small {
  display: block;
  font-weight: 500;
  color: var(--faint);
  font-size: 10.5px;
  margin-top: 1px;
  white-space: normal;
  word-break: keep-all;
}
/* 라벨 열(123px)의 base nowrap+hidden이 설명을 "…봅니"로 잘라냄 → 어절 줄바꿈 전체 표기 */
body.public-viewer .public-entity-combo-label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all;
}

/* Q-7 아바타 스택 — 목업 수치(38px·라운드12·겹침 -9px) 정합 */
.public-entity-overview__combos .public-search-preview-chip {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  margin-left: -9px;
}

/* Q-8 티어 분석 — 그룹 헤더 상단 배치 + 50% 발산 바(틱 포함) */
body.public-viewer .am-contrib-box .am-tier-grid2 { display: block !important; }
body.public-viewer .am-contrib-box .am-tier-rl {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  color: var(--faint) !important;
  margin: 12px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
}
body.public-viewer .am-contrib-box .am-tier-rl:first-child { margin-top: 0 !important; }
.am-contrib-box .contrib-rank-track::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  height: 9px;
  width: 1px;
  background: rgba(255,255,255,.4);
  z-index: 2;
}
.am-contrib-box .contrib-rank-fill--good {
  left: 50% !important;
  right: auto !important;
  border-radius: 0 4px 4px 0 !important;
  background-image: linear-gradient(90deg, rgba(61,220,151,.55), var(--good)) !important;
  box-shadow: 0 0 10px rgba(61,220,151,.35);
}
.am-contrib-box .contrib-rank-fill--bad {
  left: auto !important;
  right: 50% !important;
  border-radius: 4px 0 0 4px !important;
  background-image: linear-gradient(270deg, rgba(255,123,140,.55), var(--bad)) !important;
  box-shadow: 0 0 10px rgba(255,123,140,.3);
}
.contrib-rank-meta small { font-size: 10.5px; color: var(--faint); font-weight: 500; }
/* 2026-07-03 색 토큰 정정: cw-good/bad가 일부 컨텍스트에서 회백색으로 눌리던 어긋남(라이브 실측 4/5곳) */
.contrib-rank-meta .cw-good, .am-contrib-box .cw-good { color: var(--good) !important; }
.contrib-rank-meta .cw-bad, .am-contrib-box .cw-bad { color: var(--bad) !important; }

/* Q-9 티어 분석 '자세히 보기' — 전폭 모드색 소프트 버튼(목업 .more) */
body.public-viewer .am-contrib-box .public-search-detail-button {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-line) !important;
  border-radius: 8px !important;
  padding: 9px 0 !important;
  transition: filter .15s;
}
body.public-viewer .am-contrib-box .public-search-detail-button:hover { filter: brightness(1.15); }

/* Q-10 결과 섹션 헤더 카드 */
body.public-viewer .public-search-results__head h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
body.public-viewer .public-search-results__head p { font-size: 13px !important; }

/* Q-11 고/저승률 열 제목 — 색 + 그라데이션 룰선(목업 res-col-t) */
body.public-viewer .public-search-result-section h4 {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}
body.public-viewer .public-search-result-section h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
body.public-viewer .public-search-result-section--high h4 { color: var(--good) !important; }
body.public-viewer .public-search-result-section--low h4 { color: var(--bad) !important; }

/* Q-12 결과 카드 — 인셋 배경 + 3px 컬러 레일(글로우) + 호버 리프트 + 인라인 설명 */
body.public-viewer .public-search-result-card {
  position: relative;
  background: var(--bg-deep) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  transition: transform .16s, border-color .16s !important;
}
body.public-viewer .public-search-result-card:hover { transform: translateY(-2px); }
body.public-viewer .public-search-result-card--high { border-color: rgba(61,220,151,.22) !important; }
body.public-viewer .public-search-result-card--high::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--good);
  box-shadow: 0 0 16px rgba(61,220,151,.35);
}
body.public-viewer .public-search-result-card--low { border-color: rgba(255,123,140,.22) !important; }
body.public-viewer .public-search-result-card--low::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--bad);
  box-shadow: 0 0 16px rgba(255,123,140,.3);
}
body.public-viewer .public-search-result-card > strong { font-size: 13px !important; font-weight: 800 !important; }
body.public-viewer .public-search-result-card--high > strong { color: var(--good) !important; }
body.public-viewer .public-search-result-card--low > strong { color: var(--bad) !important; }
body.public-viewer .public-search-result-card > em {
  font-size: 11.5px !important;
  font-style: normal;
  color: var(--muted) !important;
}
/* 결과 카드 '자세히 보기' — 조용한 고스트(목업 .see) */
body.public-viewer .public-search-result-card .public-search-detail-button {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
}
body.public-viewer .public-search-result-card .public-search-detail-button:hover {
  color: var(--text) !important;
  border-color: var(--faint) !important;
}
/* 결과 카드 아이콘도 스택(겹침) */
.public-search-card-icons .public-search-preview-chip {
  border-radius: 11px !important;
  border: 2px solid var(--surface) !important;
  margin-left: -9px;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.5) !important;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.public-search-card-icons .public-search-preview-chip:first-child { margin-left: 0; }
.public-search-card-icons .public-search-preview-chip:hover { transform: translateY(-3px) scale(1.07); z-index: 2; }

/* Q-13 상세표 검색 바 — 포커스 링 + 모드색 제출 버튼(목업 qbar) */
body.public-viewer #tableSearchInput {
  background: var(--bg-deep) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  transition: border-color .15s, box-shadow .15s;
}
body.public-viewer #tableSearchInput:focus {
  border-color: var(--accent-line) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none;
}
body.public-viewer #tableSearchSubmit {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-line) !important;
  border-radius: 8px !important;
}
body.public-viewer #tableSearchSubmit:hover { filter: brightness(1.15); }


/* ============================================================================
   §R  목업 01/04 잔여 파리티 — 2026-07-02 전면 감사 반영(§Q와 세트)
   ============================================================================ */

/* R-1 모드 필+젬(목업 hdr .mode-pill) — 주입 <style>이 후순위라 !important 필수 */
.am-mode-switcher__button {
  padding: 7px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.am-mode-switcher__button::before {
  content: "";
  width: 9px; height: 9px;
  flex: 0 0 auto;
  transform: rotate(45deg);
  border-radius: 2.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px var(--fx-glow);
}

/* R-2 헤더 상단 내비 — 레거시 블루 박스/골드 밑줄 → muted+모드색 언더라인 패턴 */
body.public-viewer .public-top-nav__button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}
body.public-viewer .public-top-nav__button:hover { color: var(--text) !important; }
body.public-viewer .public-top-nav__group.active .public-top-nav__button,
body.public-viewer .public-top-nav__group.is-open .public-top-nav__button {
  color: var(--text) !important;
  box-shadow: inset 0 -2px 0 var(--accent) !important;
}

/* R-3 치지직 CTA — 브랜드 그린 그라데이션(모드 무관 고정) */
.streamer-banner__link {
  background: linear-gradient(135deg, #00ffa3, #2ce8b0) !important;
  color: #03110a !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px -8px rgba(0,255,163,.4) !important;
  font-weight: 800 !important;
}

/* R-4 방송 상세 뷰 스위치 — 단일 세그 컨테이너(인셋 트랙+활성 글로우) */
body.public-viewer.public-broadcast-detail-active #tableTabs {
  display: inline-flex;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px;
  gap: 2px;
}
body.public-viewer.public-broadcast-detail-active #tableTabs button.active {
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 4px 14px -6px var(--fx-glow) !important;
}

/* R-5 필터 토글 — 솔리드 슬랩 → 조용한 필(목업 .patch 재사용 톤) */
body.public-viewer .filter-toggle {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
}
body.public-viewer .filter-toggle:hover { color: var(--text) !important; border-color: var(--line-strong) !important; }

/* R-6 도움 링크 — 보더 버튼 → 점선 밑줄 조용한 링크(목업 .quiet) */
body.public-viewer .poro-score-help-button {
  border: 0 !important;
  border-bottom: 1px dotted var(--faint) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--faint) !important;
  padding: 0 1px !important;
  font-size: 12px !important;
}
body.public-viewer .poro-score-help-button:hover { color: var(--muted) !important; }

/* R-7 기간·규칙 줄 — 보더 슬랩 → 조용한 인라인 메타 */
body.public-viewer .daily-period-line,
body.public-viewer .daily-rule-line {
  border: 0 !important;
  background: transparent !important;
  padding: 2px 0 !important;
  font-size: 12.5px;
  color: var(--muted);
}
body.public-viewer .daily-period-line strong { color: var(--text); }
body.public-viewer .daily-rule-line { color: var(--faint); }

/* R-8 티어 밴드 — 글로우 레일 ::before + 밴드 드롭섀도(목업 tier-band-stage) */
.tier-row { position: relative; }
.tier-row::before {
  content: "";
  position: absolute;
  /* 2026-07-07: top/bottom 0 → 14px 인셋. 레일(border-radius 3px)의 각진 끝이 행의 둥근 모서리
     (.tier-row border-radius:18px, overflow:visible) 밖으로 삐져나오던 삐침(좌상단·좌하단) 수정.
     overflow:hidden은 포로마크(left:-8px/top:-7px)·순위변동 배지(top:-12px)를 클리핑해 불가(R-9 철회 이력).
     레일은 행의 inset 3px box-shadow 금색 바와 겹쳐 세로 인셋해도 좌측 금색선은 유지되고,
     글로우(box-shadow 0 0 22px)는 blur 반경이 커서 인셋해도 코너까지 부드럽게 덮는다. */
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--tier-accent, var(--accent)), transparent);
  box-shadow: 0 0 22px 2px var(--tier-glow, transparent);
  pointer-events: none;
}
.tier-row.tier-1 { --tier-glow: rgba(245,202,95,.28); }
.tier-row.tier-2 { --tier-glow: rgba(74,222,154,.24); }
.tier-row.tier-3 { --tier-glow: rgba(88,170,234,.24); }
.tier-row.tier-4 { --tier-glow: rgba(139,149,167,.18); }
.tier-row.tier-5 { --tier-glow: rgba(238,114,134,.24); }

/* R-9 — 철회(2026-07-02): 블리드 크롭이 ①포로마크 확대 ②overflow:hidden으로
   변동/포로 배지 클리핑을 유발. 이득(테두리 1px 정리) 대비 위험이 커서 제거. */

/* R-10 변동 배지 — 철회(2026-07-02 사용자: "떡상떡락이 더 안 보인다").
   기존 우상단 다크 필 + 의미색 글자(베이스)로 복귀 — 규칙 없음. */

/* R-11 툴팁 유리 */
#assetTooltip, .asset-tooltip {
  background: rgba(10,14,22,.94) !important;
}
@supports (backdrop-filter: blur(1px)) {
  #assetTooltip, .asset-tooltip { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* R-12 검색 유리 카드 blur(목업 04 searchbar-glass) */
@supports (backdrop-filter: blur(1px)) {
  .public-viewer .public-search-card { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.public-viewer .public-search-card:focus-within {
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -22px rgba(0,0,0,.8), 0 0 34px -8px var(--fx-glow) !important;
}

/* R-13 카테고리 탭 잉크 슬라이드(JS amEnsureCategoryInk가 .am-ink 주입) */
#tableCategoryTabs { position: relative; }
#tableCategoryTabs .am-ink {
  position: absolute;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 -1px 10px var(--fx-glow);
  transition: left .32s cubic-bezier(.22,.8,.3,1), width .32s cubic-bezier(.22,.8,.3,1);
  pointer-events: none;
}
/* 잉크가 있으면 정적 밑줄은 숨김(이중 표시 방지) */
#tableCategoryTabs:has(.am-ink) button.active::after { opacity: 0 !important; box-shadow: none !important; }

/* R-14 로딩 스켈레톤(app_v2.js am-sk-board 문자열과 세트) */
.am-sk-board { display: flex; flex-direction: column; gap: 12px; padding: 6px 2px; }
.am-sk-row { display: flex; align-items: center; gap: 12px; }
.am-sk {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border-radius: 10px;
}
.am-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: amSkSweep 1.4s linear infinite;
}
@keyframes amSkSweep { to { transform: translateX(100%); } }
.am-sk--icon { width: 38px; height: 38px; flex: 0 0 auto; }
.am-sk--bar1 { height: 12px; width: 42%; }
.am-sk--bar2 { height: 12px; width: 26%; }
@media (prefers-reduced-motion: reduce) { .am-sk::after { animation: none; } }

/* R-15 오로라 블롭(index_v2.html .am-aur 정적 마크업과 세트, 히어로 한정) */
.am-aur {
  /* §E의 .public-entry>* relative 승격 규칙보다 우선해야 함(안 그러면 464px 블록으로 흘러 히어로 부풂) */
  position: absolute !important;
  width: 900px; height: 460px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
.am-aur--a { top: -180px; left: -120px; background: radial-gradient(closest-side, var(--fx-aurora-a), transparent 70%); }
.am-aur--b { top: -140px; right: -160px; width: 700px; height: 400px; background: radial-gradient(closest-side, var(--fx-aurora-b), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .am-aur--a { animation: amAurA 90s ease-in-out infinite alternate; }
  .am-aur--b { animation: amAurB 70s ease-in-out infinite alternate; }
  @keyframes amAurA { to { transform: translate3d(160px, 60px, 0) rotate(14deg); } }
  @keyframes amAurB { to { transform: translate3d(-190px, 40px, 0); } }
}

/* R-18 CLS 공간 예약(2026-07-03, RUM: 고지 0.268×34·하단배너 0.309×7) —
   고지 문구·노출 불변(법적 필수), 주입 전 자리만 미리 확보해 밀림 제거 */
.riot-compliance-notice { min-height: 96px; }
@media (max-width: 900px) { .riot-compliance-notice { min-height: 150px; } }
footer.streamer-banner-bottom { min-height: 56px; }
/* 표 영역 초기 예약 — 스켈레톤→본 데이터 성장으로 하단 요소가 밀리는 잔여 CLS 흡수 */
body.public-viewer #tableArea { min-height: 70vh; }

/* R-16 960 반쪽창 아래 900px — 퀵카드 2열(찌그러짐 방지) */
@media (max-width: 900px) {
  body.public-viewer .public-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* R-17 방송 리포트 검색 인라인(목업 01) — 뷰 스위치 행 우측으로 컴팩트 승격.
   통합검색 카테고리의 풀폭 qbar(목업 02)는 브로드캐스트 패널 밖이라 무영향. */
@media (min-width: 761px) {
  body.public-viewer .public-broadcast-detail-panel #tableSearchBar {
    margin: -50px 0 12px auto;
    max-width: 420px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
  }
}


/* ============================================================================
   §T  티어 보드 = 목업 01 전면 정합(2026-07-02 자정, 단일 규칙 재생성)
   ----------------------------------------------------------------------------
   계약(01_site_tierlist.html .band/.champ):
   라벨 108px(34px 글자+글로우) | 셀 그리드 minmax(70px,1fr) gap 12x4 |
   아이콘 균일 48px r13(티어별 크기 위계 해제) | 이름 10.5px 2줄 | 승률 10.5px |
   포로 = 우상단 19px 금테 원형 배지 | 행 r18 + 패딩 16.
   ============================================================================ */
body.public-viewer .tier-row {
  grid-template-columns: 84px minmax(0, 1fr) !important;
  border-radius: 18px !important;
  padding: 10px 12px 9px 0 !important; /* 2026-07-03 사용자: 배열은 빽빽하게(외관만 목업) */
}
body.public-viewer .tier-row + .tier-row { margin-top: 10px; }
body.public-viewer .tier-label strong {
  font-size: 30px !important;
  text-shadow: 0 0 24px var(--tier-glow, rgba(0,0,0,.4)) !important;
}
body.public-viewer .tier-label span {
  font-size: 9.5px !important;
  letter-spacing: .3em !important;
  opacity: .6;
}
body.public-viewer .tier-icons {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important; /* 빽빽 배치(외관 유지) */
  gap: 7px 2px !important;
  align-items: start;
}
/* 셀 균일화 — 티어별 아이콘 크기 위계 해제(목업=전 티어 48px 동일) */
body.public-viewer .tier-asset-wrap,
body.public-viewer .tier-row.tier-1 .tier-asset-wrap {
  width: auto !important;
  justify-items: center;
}
body.public-viewer .tier-asset,
body.public-viewer .tier-row.tier-1 .tier-asset,
body.public-viewer .tier-row.tier-2 .tier-asset,
body.public-viewer .tier-row.tier-3 .tier-asset,
body.public-viewer .tier-row.tier-4 .tier-asset,
body.public-viewer .tier-row.tier-5 .tier-asset,
body.public-viewer .tier-row.tier-sample .tier-asset {
  width: 48px !important;
  height: 48px !important;
  border-radius: 13px !important;
  margin: 0 auto;
}
body.public-viewer .tier-asset img { border-radius: 12px !important; }
/* 이름·승률 — 목업 타이포(중앙, 2줄 클램프, 승률은 기존 [data-wr] 규칙 소비) */
body.public-viewer .tier-asset-name {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  color: #c3cddc !important;
  text-align: center;
  margin-top: 6px;
}
/* 포로마크 — 2026-07-03 개정: ▲N위 배지(우상단)와 겹치지 않게 우하단으로,
   원형 틀 제거·22px 원본 노출(그림이 보이게). 그림자만으로 분리감. */
body.public-viewer .tier-asset .poro-mark,
body.public-viewer .tier-row.tier-1 .tier-asset .poro-mark {
  position: absolute !important;
  right: -8px !important;
  bottom: -5px !important;
  top: auto !important;
  left: auto !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.85));
  object-fit: contain;
  z-index: 2;
}


/* ============================================================================
   §S  목업 02 "구성" 정합(2026-07-02 밤) — 한 패널 통합 → 히어로 배너 + 3카드 분리
   ----------------------------------------------------------------------------
   통합검색 뷰(.public-search-results--fixed) 한정. 세로데이터 요약 패널은
   자체 재조립 레이아웃(A-2)이라 무접촉. DOM 불변, 표면 재배치만.
   ============================================================================ */
/* 섹션 = 투명 컨테이너(카드 껍데기 해제) */
body.public-viewer .public-search-results--fixed .public-entity-overview {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 섹션의 스플래시·오로라 의사요소는 끄고(히어로로 이관) */
body.public-viewer .public-search-results--fixed .public-entity-overview--fixed::before,
body.public-viewer .public-search-results--fixed .public-entity-overview--fixed::after {
  display: none !important;
}
/* 히어로 배너 = __top 이 카드 쉘+스플래시+오로라를 가져감(--am-splash 변수는 상속됨) */
body.public-viewer .public-search-results--fixed .public-entity-overview__top {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 14px 34px -18px rgba(0,0,0,.65);
  padding: 18px 20px;
}
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  body.public-viewer .public-search-results--fixed .public-entity-overview__top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--am-splash, none) right 18% / 58% auto no-repeat;
    filter: saturate(.9) brightness(.75);
    opacity: .5;
    -webkit-mask-image: linear-gradient(90deg, transparent 26%, rgba(0,0,0,.5) 55%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 26%, rgba(0,0,0,.5) 55%, #000 100%);
    pointer-events: none;
  }
}
body.public-viewer .public-search-results--fixed .public-entity-overview__top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, var(--fx-aurora-a) 100%);
  pointer-events: none;
}
body.public-viewer .public-search-results--fixed .public-entity-overview__top > * { position: relative; z-index: 1; }
/* 바깥 대형 패널 껍데기 해제 — 목업은 페이지 배경 위에 섹션 카드들이 직접 얹힘.
   내부 콘텐츠(히어로·조합 카드·표 wrap·결과 카드)는 각자 표면을 가짐. */
body.public-viewer .public-broadcast-detail-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* 상세표 검색 줄 — 컨테이너 무프레임(목업 qbar 구성), 입력·버튼은 Q-13 유지 */
body.public-viewer .table-search-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3카드 분리 — 각 조합/티어분석 박스가 독립 카드(목업 tri) */
body.public-viewer .public-search-results--fixed .public-entity-overview__combos { gap: 12px; }
body.public-viewer .public-search-results--fixed .public-entity-overview__combos .public-entity-combo-box {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 14px 34px -18px rgba(0,0,0,.65) !important;
  padding: 15px 17px !important;
}

/* §S-3 결과 카드 병합(목업 results-head가 res-cols를 품음) — 헤더와 2열을 한 카드로 접합 */
body.public-viewer .public-search-results--fixed .public-search-results__head {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset !important;
  padding: 16px 18px 6px !important;
  margin-bottom: 0 !important;
}
body.public-viewer .public-search-results--fixed .public-search-result-split {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.65) !important;
  padding: 4px 18px 18px !important;
  margin-top: 0 !important;
}


/* ============================================================================
   §U  목업 01/02 마감 정합 2차(2026-07-03) — 사용자 화면 대조 지적 반영
   ============================================================================ */

/* U-1 결과 카드 — 진한 초록/빨강 틴트 제거(목업=어두운 인셋+보더+레일만).
   베이스 4규칙(!important, #tableArea article 포함)을 전부 명시 제압.
   2026-07-03 수정(S3): bg-deep(#04060b)이 위쪽 조합카드(surface 그라데이션)보다 확연히 검어
   컬러 아이콘과 대비가 튐 → 조합카드와 동일 surface 그라데이션으로 톤 통일(레일·보더는 유지). */
body.public-viewer .public-search-result-card--high,
body.public-viewer #tableArea article.public-search-result-card--high {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border-color: rgba(61,220,151,.22) !important;
}
body.public-viewer .public-search-result-card--low,
body.public-viewer #tableArea article.public-search-result-card--low {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border-color: rgba(255,123,140,.22) !important;
}
body.public-viewer .public-search-result-card--high:hover { border-color: rgba(61,220,151,.45) !important; }
body.public-viewer .public-search-result-card--low:hover { border-color: rgba(255,123,140,.45) !important; }

/* U-2 결과 카드 컴팩트(목업 rcard) — 제목+설명 한 줄, 스택과 '자세히 보기' 한 행 */
body.public-viewer .public-search-result-card {
  padding: 11px 14px !important;
}
body.public-viewer .public-search-result-card > strong { display: inline !important; }
body.public-viewer .public-search-result-card > em {
  display: inline !important;
  margin-left: 8px !important;
  margin-top: 0 !important;
}
body.public-viewer .public-search-result-card .public-search-card-preview {
  margin: 8px 0 0 !important;
  padding-right: 104px;
}
body.public-viewer .public-search-result-card .public-search-detail-button {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  margin: 0 !important;
}

/* U-3 조합/티어분석 3카드 — 행 등분(목업 good-p/bad-p flex 배분, 하단 빈공간 제거) */
body.public-viewer .public-search-results--fixed .public-entity-combo-box--good,
body.public-viewer .public-search-results--fixed .public-entity-combo-box--caution {
  display: flex !important;
  flex-direction: column;
}
body.public-viewer .public-search-results--fixed .public-entity-combo-box--good .public-entity-combo-row,
body.public-viewer .public-search-results--fixed .public-entity-combo-box--caution .public-entity-combo-row {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 12px;
}

/* U-4 떡상/떡락 — 두 개의 슬림 카드(목업 .mv).
   2026-07-03(S5): 좌우(2열) vs 상하(2행)가 페이지·상태마다 혼용됐음(§U-4 2열이 base에 밀려
   빈 상태는 상하, 일부는 좌우) → 전 페이지·전 상태 **상하 1열로 강제 통일**(각 행 전폭·칩 가로나열). */
body.public-viewer .daily-trend-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
body.public-viewer .daily-trend-list article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
  flex: 1 1 auto;
}
body.public-viewer .daily-trend-list article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
}
body.public-viewer .daily-trend-list article > strong {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
body.public-viewer .daily-trend-list article:first-child > strong::before { content: "▲ "; color: var(--good); }
body.public-viewer .daily-trend-list article:last-child > strong::before { content: "▼ "; color: var(--bad); }
/* 2026-07-03: 칩 5개가 카드 오른쪽 칸을 넘침 → 칩 줄바꿈 허용 + 수축 허용(칸 준수).
   (2차 수정: overflow:hidden이 "N위" 배지 머리를 잘라먹음 → visible + 배지 머리 공간 예약) */
body.public-viewer .daily-trend-list article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 4px;
}
body.public-viewer .daily-trend-list article { align-items: flex-start; overflow: visible; }
body.public-viewer .daily-trend-entry {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: visible;
}
body.public-viewer .daily-trend-entry em { white-space: nowrap; }

/* U-5 방송 헤더 — 제목·시즌·기간·카테고리 한 줄 흐름(목업 rp-head), 세그 컨테이너 프레임 */
body.public-viewer .public-broadcast-detail-panel .section-head {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
body.public-viewer .public-broadcast-detail-panel .section-head h2 {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  margin: 0 !important;
}
/* 필터바 톤 통일(2026-07-04 사용자 지시): 필터 .segmented가 var(--bg-deep)(#04060b 거의 순검정)이라 프로스트 페이지에서
   '검은 배경으로 독단 분리된 바'로 떴다(덧댄 흔적). 모든 .segmented를 사이트 프로스트 틴트로 일괄 통일 → 페이지와 자연스럽게 어우러짐. */
body.public-viewer .segmented,
body.public-viewer .daily-toolbar .segmented {
  background: rgba(116, 151, 194, .10) !important;
  border: 1px solid rgba(116, 151, 194, .20) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  gap: 2px !important;
  box-shadow: none !important;
}
body.public-viewer .segmented button {
  background: transparent;
  border: 0 !important;
  color: var(--muted);
}
body.public-viewer .segmented button.active {
  background: linear-gradient(180deg, var(--accent-soft), rgba(255,255,255,.02)) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px var(--accent-line) !important;
}


/* ============================================================================
   §N  960×1080 밀도(사용자 기준 뷰포트) — 반쪽 창에서 한눈에, 스크롤 최소화
   ============================================================================ */
@media (max-width: 1100px) {
  /* 히어로 세로 압축 — 타이틀·간격을 반쪽 창 비례로 */
  .public-viewer .public-entry__intro h2 { font-size: 34px !important; }
  .public-viewer .public-entry__intro p { font-size: 13.5px; }
  .public-viewer .public-entry { row-gap: 14px; }
  .public-viewer .public-search-row input { height: 58px; font-size: 15px; }
  .public-viewer .public-search-row { height: 58px; }
  .public-viewer .public-search-row button { height: 58px; }
  .public-viewer .public-quick-grid a { min-height: 76px !important; padding: 12px 16px !important; }

  /* 섹션 간 여백 다이어트 */
  .streamer-banner { padding: 10px 16px; }
  .daily-report-toolbar { margin-bottom: 6px; }

  /* 티어 보드 — §T(목업 01 그리드) 값 그대로 유지(960에서도 압축하지 않음) */
  .tier-icons { gap: 12px 4px; }
}

/* ── 쌍/조합 셀 두 항목 좌우 배치(2026-07-03 사용자 지시) ──
   쌍(챔피언쌍·증강쌍·아이템쌍·팀쌍)·조합(증강+아이템 등)에서 두 항목이 좁은 칸에 위아래로 쌓이던 것(icon-row wrap)을
   [고승률]처럼 좌우로 나란히. 2열 그리드로 두 칩을 항상 좌우 유지하고, 긴 이름은 각 칩 안에서만 줄바꿈. */
body.public-viewer .icon-row--pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 8px !important;
  align-items: center !important;
  width: 100%;
}
body.public-viewer .icon-row--pair > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
/* [전체] 병합 섹션(.public-all-section)의 베이스 규칙(§8399: .public-all-section .icon-row = 단일컬럼 minmax(0,1fr),
   특이도 0,3,1)이 위 .icon-row--pair(0,2,1)를 이겨 [전체] 쌍이 위아래로 쌓였음(사용자 지적 2026-07-03).
   동일 특이도(0,3,1)로 [전체] 섹션의 쌍만 2열 복원. */
body.public-viewer .public-all-section .icon-row--pair {
  grid-template-columns: 1fr 1fr !important;
}

/* ── 티어 딱지 전수 통일(2026-07-04 사용자 지시): 사이트 S~D 딱지 식별난해 → 컴패니언(칼바람 분석기) 스타일로.
   컴패니언 정본(index.html:1112-1116): 밝은 틴트→티어색 '솔리드 그라데이션' + '잉크(근검정) 글자'. 식별성↑.
   grade 클래스(tier-s..d, tierBadge 출력)와 numeric 클래스(t1..t6) 두 계통 + #tableArea 스코프까지 한 규칙으로 못박음.
   reskin은 마지막 로드 → 동일특이도에서 승리(#tableArea 스코프는 동일 특이도로 매칭). 잉크색은 컴패니언과 동일. ── */
.tier-badge.tier-s, .tier-badge.t1, #tableArea .tier-badge.t1 { background: linear-gradient(135deg, #ffe9ad, var(--tier-1)) !important; color: #1a1405 !important; text-shadow: none !important; }
.tier-badge.tier-a, .tier-badge.t2, #tableArea .tier-badge.t2 { background: linear-gradient(135deg, #b8f5d6, var(--tier-2)) !important; color: #062916 !important; text-shadow: none !important; }
.tier-badge.tier-b, .tier-badge.t3, #tableArea .tier-badge.t3 { background: linear-gradient(135deg, #bfdffa, var(--tier-3)) !important; color: #08243a !important; text-shadow: none !important; }
.tier-badge.tier-c, .tier-badge.t4, #tableArea .tier-badge.t4 { background: linear-gradient(135deg, #d6dce6, var(--tier-4)) !important; color: #161a22 !important; text-shadow: none !important; }
.tier-badge.tier-d, .tier-badge.t5, #tableArea .tier-badge.t5 { background: linear-gradient(135deg, #ffc9d2, var(--tier-5)) !important; color: #33101a !important; text-shadow: none !important; }
.tier-badge.tier-watch, .tier-badge.tier-관찰, .tier-badge.t6, #tableArea .tier-badge.t6 { background: linear-gradient(135deg, #d6dce6, var(--tier-sample)) !important; color: #161a22 !important; text-shadow: none !important; }

/* 세로 데이터(랭킹표, 순위/챔피언/티어/승률)의 티어 딱지(.daily-vertical-tier)도 동일 컴패니언 잉크칩으로.
   ← 사용자가 명시한 진짜 대상(이미지1). 솔리드 색+어두운글자 → 밝은 그라데이션+잉크. 모양/크기 유지, 색만.
   tier-1=S … tier-5=D, tier-6/sample=저표본(현행대로 D 계열 유지). 동일 특이도(body.public-viewer …)로 후행 로드 승리. */
body.public-viewer .daily-vertical-tier.tier-1 { background: linear-gradient(135deg, #ffe9ad, var(--tier-1)) !important; color: #1a1405 !important; }
body.public-viewer .daily-vertical-tier.tier-2 { background: linear-gradient(135deg, #b8f5d6, var(--tier-2)) !important; color: #062916 !important; }
body.public-viewer .daily-vertical-tier.tier-3 { background: linear-gradient(135deg, #bfdffa, var(--tier-3)) !important; color: #08243a !important; }
body.public-viewer .daily-vertical-tier.tier-4 { background: linear-gradient(135deg, #d6dce6, var(--tier-4)) !important; color: #161a22 !important; }
body.public-viewer .daily-vertical-tier.tier-5,
body.public-viewer .daily-vertical-tier.tier-6,
body.public-viewer .daily-vertical-tier.tier-sample { background: linear-gradient(135deg, #ffc9d2, var(--tier-5)) !important; color: #33101a !important; }

/* 통합검색 '상세 요약' 헤더의 티어 표기 = 세로데이터 좌측 딱지(.daily-vertical-tier) 그대로 재사용(사용자 지시:
   라운드 골드칩 am-tier-chip 폐기). 색/사각형/잉크 정체성은 위 .tier-N 규칙을 상속하고, 딱지 base가 리스트 그리드
   셀 전제(justify-self/min-width 11px)라 27px 이름 옆에서 가독성만 확보하도록 크기·정렬만 헤더 스코프로 보정. */
body.public-viewer .public-entity-overview__title h3 .daily-vertical-tier {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 5px 8px; font-size: 15px; line-height: 1;
  flex: 0 0 auto; border-radius: 0;
}

/* (되돌림 2026-07-04) 프로스트 챔피언 티어리스트의 큰 S TIER/A TIER 라벨(.tier-row .tier-label)은 사용자가
   "건드리지 말라" 명시 → 원복. 티어 딱지 변경은 .tier-badge(등급칩)와 .daily-vertical-tier(세로데이터)에만 한정. */

/* 더보기 버튼 래퍼(2026-07-04 재설계): 표 아래 단일 버튼(기존 .lazy-more-controls와 동일 여백). */
.am-more-wrap { margin-top: 8px; }
/* 더보기 버튼 다크/프로스트 톤(2026-07-04 버그수정): .lazy-more-btn base가 background:#fff(흰바탕)인데 공개뷰어가 글자색을
   밝게 덮어 '흰바탕+흰글자=투명 버튼'이 됐다(사용자 지적). 프로스트 배경 + 또렷한 잉크 글자로 못박음(reskin 후행 로드+!important로 승리). */
.am-more-btn, #tableArea .am-more-btn, body.public-viewer .am-more-btn {
  background: rgba(116, 151, 194, .16) !important;
  color: #e6edf7 !important;
  border: 1px solid rgba(116, 151, 194, .34) !important;
  box-shadow: none !important;
}
.am-more-btn:hover, #tableArea .am-more-btn:hover, body.public-viewer .am-more-btn:hover {
  background: rgba(116, 151, 194, .27) !important;
  border-color: rgba(116, 151, 194, .55) !important;
}
.am-more-btn .lazy-more-count, #tableArea .am-more-btn .lazy-more-count { color: #a9b8cf !important; font-weight: 700; }