/* 관측 자료 분석 칸의 스타일(templates/_stats_sections.html). AEO 관측소와 업종별 AEO 점수 화면이 함께 읽는다.
   2026-09-20 에 분석 칸을 업종별 화면으로 옮기면서 globe.css(지구본 무대 전용)에서 떼어 냈다.
   색·간격은 tokens.css 변수만 쓴다(16진수 색을 여기 적지 않는다). */

.ob-sec { min-width: 0; scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.ob-sec-head { margin-bottom: var(--sp-5); }
.ob-h2 {
  margin: 0;
  font-size: var(--h2-size);
  color: var(--surface-ink-strong);
  word-break: keep-all;
}
.ob-sub {
  margin: var(--sp-2) 0 0;
  color: var(--surface-ink-2);
  font-size: var(--fs-14);
  line-height: 1.7;
  word-break: keep-all;
}
.ob-grid { display: grid; gap: var(--sp-5); }
.ob-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-stat {
  margin: 0 0 var(--sp-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.ob-stat dt { color: var(--surface-muted); font-size: var(--fs-12); word-break: keep-all; }
.ob-stat dd {
  margin: 2px 0 0;
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--surface-ink-strong);
  line-height: 1.15;
}
.ob-stat small { margin-left: 2px; font-size: var(--fs-12); font-weight: 400; color: var(--surface-muted); }
.ob-bandlist {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-12);
  color: var(--surface-ink-2);
}
.ob-bandlist li { display: flex; align-items: center; gap: var(--sp-2); }
/* 분석 표의 나라 칸: 국기와 이름 사이를 띄운다(무대 안 목록은 flex gap 이 맡는다). */
.ob-sec .u-table .globe-flag { margin-right: var(--sp-2); vertical-align: -2px; }

.globe-swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--r-round);
  background: var(--globe-band-none);
  box-shadow: 0 0 8px currentColor;
}
.globe-swatch.is-src-hall { background: var(--globe-src-hall); color: var(--globe-src-hall); }
.globe-swatch.is-src-public { background: var(--globe-src-public); color: var(--globe-src-public); }
.globe-swatch.is-src-panel_kr { background: var(--globe-src-panel_kr); color: var(--globe-src-panel_kr); }
.globe-swatch.is-src-panel_global { background: var(--globe-src-panel_global); color: var(--globe-src-panel_global); }
.globe-swatch.is-src-internal { background: var(--globe-src-internal); color: var(--globe-src-internal); }
.globe-swatch[class*="is-band-"] { border-radius: var(--r-xs); box-shadow: none; }
.globe-swatch.is-band-poor { background: var(--globe-band-poor); }
.globe-swatch.is-band-fair { background: var(--globe-band-fair); }
.globe-swatch.is-band-good { background: var(--globe-band-good); }
.globe-swatch.is-band-excellent { background: var(--globe-band-excellent); }

/* 업종별 강약 표의 칸(_stats_sections.html #by-strength). 달성률 아래에 전체 평균과의 차이를 작게 적고,
   높은 곳은 초록, 낮은 곳은 빨강으로 물들인다. 색은 tokens.css 변수만 쓴다. */
/* 업종 x 영역 히트맵(#by-strength). 2026-09-20 사장님 지적으로 다시 짰다.
   - 머리글은 왼쪽, 값은 오른쪽이라 눈이 갈지자로 움직였다. 둘 다 가운데로 맞춘다.
   - 칸 색이 전체 평균과의 차이다(--bm-i 가 진하기). 숫자를 하나하나 읽지 않아도
     강한 곳·약한 곳이 덩어리로 보인다.
   - 차이 값은 칸에서 빼고 풍선(data-tip)으로 옮겼다. */
.bm-matrix .u-table th, .bm-matrix .u-table td { text-align: center; }
/* 첫 열(업종 이름)만 왼쪽이다 - 글이라 가운데로 두면 읽는 시작점이 줄마다 달라진다. */
.bm-matrix .u-table > * > tr > :first-child { text-align: left; }
.bm-matrix .u-table thead th { white-space: nowrap; }

.bm-cell { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.bm-cell small { font-size: var(--fs-11); font-weight: var(--fw-normal); color: inherit; opacity: .6; margin-left: 1px; }
/* 색 = 전체 평균과의 차이. --bm-i 가 진하기다.
   안쪽 1px 선을 바탕색으로 그어 칸을 가른다 - 그러지 않으면 같은 색 칸이 이어질 때 한 덩어리로 뭉쳐
   어느 영역이 어느 값인지 읽히지 않는다. 가상 요소(::before)는 풍선 꼬리가 이미 쓰고 있어 쓰지 않는다. */
.bm-cell.is-up, .bm-cell.is-down, .bm-cell.is-flat {
  background: color-mix(in srgb, var(--bm-c) calc(var(--bm-i, 0) * 100%), transparent);
  box-shadow: inset 0 0 0 1px var(--surface-bg);
}
.bm-cell.is-up { --bm-c: var(--success); }
.bm-cell.is-down { --bm-c: var(--danger); }
.bm-cell.is-flat { --bm-c: var(--surface-line-strong); }
.bm-cell.is-blank { color: var(--surface-muted); }

/* 맨 윗줄은 전체 평균이다 - 색의 기준이라 다른 줄과 눈에 띄게 갈라 놓는다. */
.bm-matrix tbody tr.is-overall { background: var(--surface-sunken); }
.bm-matrix tbody tr.is-overall th, .bm-matrix tbody tr.is-overall td { border-bottom: 2px solid var(--surface-line-strong); }
.bm-matrix tbody tr.is-overall th { font-weight: var(--fw-bold); }

/* 읽는 법 한 줄. 설명이 아니라 실제 값으로 만든 문장이라 눈이 표로 바로 옮겨 간다. */
.bm-howto {
  margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--surface-accent); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-sunken); color: var(--surface-ink);
  font-size: var(--fs-13); line-height: 1.6; word-break: keep-all;
}
.bm-howto b { font-weight: var(--fw-bold); }
/* 첫 줄 풍선을 아래로 펴는 규칙은 components.css 의 공용 규칙이 맡는다. */

/* 색 눈금. 색만으로는 무엇이 높고 낮은지 모른다(색각 이상도 있다) - 양끝에 글을 붙인다. */
.bm-legend { display: grid; gap: 4px; margin: var(--sp-3) 0 0; justify-items: center; }
.bm-legend-scale { display: flex; gap: 2px; }
.bm-legend-scale i { display: block; width: 34px; height: 12px; border-radius: 2px; }
.bm-legend-scale i.is-up { background: color-mix(in srgb, var(--success) calc(var(--bm-i) * 100%), transparent); }
.bm-legend-scale i.is-down { background: color-mix(in srgb, var(--danger) calc(var(--bm-i) * 100%), transparent); }
.bm-legend-scale i.is-flat { background: color-mix(in srgb, var(--surface-line-strong) calc(var(--bm-i) * 100%), transparent); }
.bm-legend-ends { display: flex; gap: var(--sp-3); font-size: var(--fs-11); color: var(--surface-muted); }

/* 카드 모양(좁은 화면)에서는 색칸이 한 줄씩 늘어서므로 가운데 정렬을 되돌린다. */
@media (max-width: 720px) {
  .bm-matrix .u-table.is-cards td { text-align: right; }
}

/* 전체 평균과의 차이 막대(#by-gap). 가운데 선이 전체 평균이고 좌우로 뻗는다. */
.bm-gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.bm-gaps li { display: grid; grid-template-columns: minmax(6em, 10em) minmax(0, 1fr) 4em; align-items: center; gap: var(--sp-3); }
.bm-gap-name { font-size: var(--fs-13); word-break: keep-all; }
.bm-gap-track { position: relative; height: 14px; border-radius: var(--r-pill); background: var(--surface-sunken); }
.bm-gap-track::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--surface-line-strong); }
.bm-gap-bar { position: absolute; top: 2px; bottom: 2px; width: var(--bm-pct); border-radius: var(--r-pill); }
.bm-gap-bar.is-up { left: 50%; background: var(--success); }
.bm-gap-bar.is-down { right: 50%; background: var(--danger); }
.bm-gap-num { text-align: right; font-size: var(--fs-12); font-variant-numeric: tabular-nums; color: var(--surface-muted); }
@media (max-width: 640px) {
  .bm-gaps li { grid-template-columns: minmax(5em, 8em) minmax(0, 1fr) 3.5em; }
}