/* ==========================================================================
   BulkRadar — Compare 페이지
   bulkradar.css 다음에 실립니다. 토큰(--br-*)은 .br-root 에서 상속받습니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 빠져 있던 국가 색
   bulkradar.css 에는 s-cn / s-vn / s-au / s-de / s-jp / s-us / s-other 만
   정의돼 있습니다. GEO_CLASS 는 18개국을 내보내므로 러시아·인도네시아·
   캐나다·멕시코 같은 조각이 배경 없이 렌더됐습니다.
   Compare 화면은 이 나라들이 주인공이라 여기서 채웁니다.
   (Signals / Materials 화면에도 함께 적용됩니다)
   -------------------------------------------------------------------------- */
.br-seg.s-kr{background:#3A4E63;}
.br-seg.s-ca{background:#6B4A2F;}
.br-seg.s-mx{background:#2E6B4F;}
.br-seg.s-id{background:#7A4A63;}
.br-seg.s-in{background:#9A6A2C;}
.br-seg.s-br{background:#4A6B2F;}
.br-seg.s-cl{background:#8A5A3C;}
.br-seg.s-ru{background:#5A4A6B;}
.br-seg.s-sa{background:#2F6B63;}
.br-seg.s-nl{background:#7A5E2C;}
.br-seg.s-tw{background:#4F5E70;}
.br-seg.s-th{background:#6B3F4A;}

.br-legend i.s-kr{background:#3A4E63;}
.br-legend i.s-ca{background:#6B4A2F;}
.br-legend i.s-mx{background:#2E6B4F;}
.br-legend i.s-id{background:#7A4A63;}
.br-legend i.s-in{background:#9A6A2C;}
.br-legend i.s-br{background:#4A6B2F;}
.br-legend i.s-cl{background:#8A5A3C;}
.br-legend i.s-ru{background:#5A4A6B;}
.br-legend i.s-sa{background:#2F6B63;}
.br-legend i.s-nl{background:#7A5E2C;}
.br-legend i.s-tw{background:#4F5E70;}
.br-legend i.s-th{background:#6B3F4A;}


/* --------------------------------------------------------------------------
   1. 카드
   -------------------------------------------------------------------------- */
.br-cmp-head{margin-top:8px;}

.br-cmp{
  background:var(--br-panel);border:1px solid var(--br-rule);border-radius:3px;
  margin:20px 0 0;overflow:hidden;
  box-shadow:0 1px 0 rgba(17,22,28,.06), 0 12px 28px -20px rgba(17,22,28,.5);
}
.br-cmp *{box-sizing:border-box;}

.br-cmp-top{padding:24px 28px 18px;}
.br-root .br-cmp-name{
  font-family:var(--br-display);font-weight:700;font-size:var(--br-fs-h2);
  letter-spacing:-.02em;line-height:1.15;margin:0 0 8px;color:var(--br-ink);
}
.br-cmp-lede{
  font-family:var(--br-display);font-weight:600;font-size:var(--br-fs-find);
  line-height:1.28;letter-spacing:-.015em;margin:0;max-width:44ch;color:var(--br-ink);
}
.br-cmp-top .br-context{margin-top:8px;}


/* --------------------------------------------------------------------------
   2. 좌우 비교
   같은 국가가 양쪽에서 같은 색이어야 이동이 눈에 들어옵니다.
   -------------------------------------------------------------------------- */
.br-cmp-sides{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--br-rule);
}
.br-cmp-side{
  padding:20px 28px 22px;
  border-right:1px solid var(--br-rule);min-width:0;
}
.br-cmp-side:last-child{border-right:0;}

.br-cmp-who{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 10px;font-family:var(--br-data);font-size:var(--br-fs-micro);
  letter-spacing:.11em;text-transform:uppercase;
}
.br-cmp-who b{color:var(--br-ink);font-weight:600;}
.br-cmp-who em{font-style:normal;color:var(--br-ink3);letter-spacing:.06em;}

.br-cmp-lead{
  padding:0;margin:0 0 10px;
  display:flex;align-items:baseline;gap:9px;
  font-family:var(--br-display);font-weight:600;
  font-size:var(--br-fs-body);color:var(--br-ink);
}
.br-cmp-lead span{
  font-family:var(--br-data);font-size:var(--br-fs-fig);font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-left:auto;
}

.br-cmp-legend{margin-top:11px;}

.br-cmp-figs{
  display:flex;flex-wrap:wrap;gap:0;margin:16px 0 0;padding:14px 0 0;
  border-top:1px solid var(--br-rule);
}
.br-cmp-figs > div{flex:1 1 33%;min-width:0;padding-right:10px;}
.br-cmp-figs dt{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--br-ink3);margin:0 0 4px;
}
.br-cmp-figs dd{
  margin:0;font-family:var(--br-data);font-size:var(--br-fs-data);font-weight:600;
  color:var(--br-ink);font-variant-numeric:tabular-nums;
}


/* --------------------------------------------------------------------------
   3. 안 쓰는 경로 — 이 페이지에서 가장 실행 가능한 줄입니다
   -------------------------------------------------------------------------- */
.br-cmp-intro{
  margin:0 0 4px;font-size:var(--br-fs-small);color:var(--br-ink2);max-width:64ch;
}

.br-cmp-routes{
  padding:16px 28px 18px;margin:0;
  border-top:1px solid var(--br-rule);background:#FAF9F6;
}
.br-cmp-routelab{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--br-ink3);margin:0 0 11px;
}
.br-cmp-routerow{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 9px;
}
.br-cmp-routerow:last-of-type{margin-bottom:0;}

/* 양쪽 다 쓰는 경로 — 확인된 것 */
.br-geo-both{
  border-color:var(--br-good);color:var(--br-good);background:var(--br-good-bg);
}

/* 한쪽에서만 보인 경로 — 이 페이지의 핵심 */
.br-geo-route{
  border-color:var(--br-brass);color:#6E5411;background:#FBF4E2;
  display:inline-flex;align-items:baseline;gap:6px;
}
.br-geo-route em{
  font-style:normal;font-size:var(--br-fs-micro);opacity:.7;letter-spacing:.04em;
}

.br-cmp-nooverlap{
  margin:0;font-size:var(--br-fs-small);color:var(--br-ink2);
}
.br-cmp-routes .br-caution{margin-top:11px;}


/* --------------------------------------------------------------------------
   4. 판정
   -------------------------------------------------------------------------- */
.br-cmp-verdict{
  padding:16px 28px 20px;border-top:1px solid var(--br-rule);background:#FCFCFB;
}
.br-cmp-line{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  margin:0 0 7px;font-size:var(--br-fs-small);color:var(--br-ink2);
}
.br-cmp-line:last-child{margin-bottom:0;}
.br-cmp-num{
  font-family:var(--br-data);font-size:var(--br-fs-data);font-weight:600;
  color:var(--br-ink);font-variant-numeric:tabular-nums;
}
.br-cmp-verdict .br-caution{margin:9px 0 0;}
.br-caution{
  font-size:var(--br-fs-micro);color:var(--br-ink3);
  border-left:2px solid var(--br-rule);padding-left:10px;margin:0;
}

.br-cmp-gate{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 28px;border-top:1px solid var(--br-rule);
}
.br-cmp-gate span{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.06em;
  color:var(--br-ink3);
}


/* --------------------------------------------------------------------------
   5. 좁은 화면 — 좌우를 위아래로 접습니다
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .br-cmp-sides{grid-template-columns:1fr;}
  .br-cmp-side{border-right:0;border-bottom:1px solid var(--br-rule);padding:18px 20px 20px;}
  .br-cmp-side:last-child{border-bottom:0;}
  .br-cmp-top{padding:20px 20px 14px;}
  .br-cmp-routes,
  .br-cmp-verdict,
  .br-cmp-gate{padding-left:20px;padding-right:20px;}
}