/* ==========================================================================
   BulkRadar Signals
   모든 클래스에 br- 접두사를 붙여 테마 CSS 와 충돌하지 않게 했습니다.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

.br-prov,
.br-signal,
.br-empty {
  --br-panel:#FFFFFF;
  --br-ink:#11161C;
  --br-ink2:#404C58;
  --br-ink3:#79858F;
  --br-rule:#C9D1D6;
  --br-alert:#8E2C26;
  --br-alert-bg:#F5E7E5;
  --br-good:#125A52;
  --br-good-bg:#E2EDEA;
  --br-brass:#A8811B;
  --br-display:'Archivo',system-ui,sans-serif;
  --br-body:'IBM Plex Sans',system-ui,sans-serif;
  --br-data:'IBM Plex Mono',ui-monospace,monospace;
}

.br-signal *,
.br-prov * { box-sizing:border-box; }

/* --- provenance --- */
.br-prov{
  display:flex;flex-wrap:wrap;margin:0 0 4px;padding:0;
  border-top:1px solid var(--br-rule);border-bottom:1px solid var(--br-rule);
}
.br-prov div{
  flex:1 1 210px;padding:14px 18px 14px 0;
  border-right:1px solid var(--br-rule);
}
.br-prov div:last-child{border-right:0;}
.br-prov dt{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--br-ink3);margin:0 0 5px;font-weight:400;
}
.br-prov dd{margin:0;font-size:var(--br-fs-small);font-weight:500;color:var(--br-ink);}
.br-prov dd em{font-style:normal;color:var(--br-ink3);font-weight:400;}

/* --- card --- */
.br-signal{
  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);
  font-family:var(--br-body);color:var(--br-ink);line-height:1.55;
  font-size:var(--br-fs-body);
}
.br-top{padding:26px 28px 22px;display:grid;grid-template-columns:88px 1fr;gap:20px;}
.br-rank{
  font-family:var(--br-data);font-size:var(--br-fs-micro);color:var(--br-ink3);
  letter-spacing:.06em;padding-top:4px;line-height:1.35;
  overflow-wrap:break-word;hyphens:none;
}
.br-rank b{
  display:block;font-family:var(--br-display);font-weight:700;font-size:var(--br-fs-rank);
  color:var(--br-ink);letter-spacing:-.02em;line-height:1;margin-bottom:5px;
}
.br-tagline{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--br-ink3);margin:0 0 9px;
}
.br-tagline b{color:var(--br-ink2);font-weight:500;}
.br-finding{
  font-family:var(--br-display);font-weight:600;font-size:var(--br-fs-find);
  line-height:1.25;letter-spacing:-.018em;margin:0 0 8px;max-width:36ch;color:var(--br-ink);
}
.br-context{font-size:var(--br-fs-small);color:var(--br-ink2);margin:0;max-width:52ch;}

/* --- shift bar --- */
.br-shift{padding:8px 28px 24px 28px;}
.br-barlab{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--br-ink3);margin:0 0 7px;
}
.br-barlab + .br-bar{margin-bottom:14px;}
.br-bar{
  display:flex;height:clamp(34px,2.6vw,44px);width:100%;background:#F4F6F7;
  border-radius:2px;overflow:hidden;
}
/* 좁은 조각은 글자 없이 색만 둡니다 (제목에 마우스를 올리면 값이 보입니다) */
.br-seg.br-tiny{padding-left:0;}
/* 마지막 조각은 남은 자리를 모두 차지해 반올림 빈틈을 없앱니다 */
.br-seg.br-flex{flex:1 1 auto;}
/* 폭은 PHP 가 인라인으로 넣습니다. JS 가 없어도 막대가 보입니다. */
.br-seg{
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 8px;overflow:hidden;
  font-family:var(--br-data);font-size:11px;font-weight:500;color:#fff;
  white-space:nowrap;min-width:0;
}
.br-seg small{opacity:.94;font-size:var(--br-fs-micro);font-variant-numeric:tabular-nums;}
.br-segname{overflow:hidden;text-overflow:ellipsis;}

/* JS 가 살아 있을 때만 0 에서 채우는 연출을 붙입니다 */
.br-anim .br-seg{width:0 !important;transition:width .9s cubic-bezier(.22,.68,.3,1);}
.br-anim .br-bar.br-on .br-seg{width:var(--br-w) !important;}

/* 좁은 조각은 글자를 숨겨 뭉개짐을 막습니다 */
.br-seg[data-w]{--br-w:0%;}
.br-seg.s-cn{background:#3F4A56;}
.br-seg.s-vn{background:#125A52;}
.br-seg.s-au{background:#8E2C26;}
.br-seg.s-de{background:#A8811B;}
.br-seg.s-jp{background:#5E6B78;}
.br-seg.s-us{background:#2F5C7A;}
.br-seg.s-other{background:#8F9AA3;color:#fff;}
.br-cap{
  font-family:var(--br-data);font-size:var(--br-fs-micro);color:var(--br-ink3);
  margin:9px 0 0;letter-spacing:.02em;
}

/* --- legend --- */
.br-legend{
  display:flex;flex-wrap:wrap;gap:7px 20px;
  list-style:none;margin:0 0 12px;padding:0;
}
.br-legend li{
  display:flex;align-items:baseline;gap:7px;margin:0;padding:0;
  font-family:var(--br-data);font-size:var(--br-fs-data);color:var(--br-ink2);
  letter-spacing:.02em;
}
.br-lg-name{font-weight:500;color:var(--br-ink);}
.br-lg-val{color:var(--br-ink3);font-variant-numeric:tabular-nums;}
.br-legend i{
  width:11px;height:11px;align-self:center;border-radius:2px;flex:none;display:block;
}
.br-legend i.s-cn{background:#3F4A56;}
.br-legend i.s-vn{background:#125A52;}
.br-legend i.s-au{background:#8E2C26;}
.br-legend i.s-de{background:#A8811B;}
.br-legend i.s-jp{background:#5E6B78;}
.br-legend i.s-us{background:#2F5C7A;}
.br-legend i.s-other{background:#8F9AA3;}
.br-legend b{font-weight:600;font-size:var(--br-fs-micro);white-space:nowrap;}
.br-lg-up{color:var(--br-alert);}
.br-lg-down{color:var(--br-ink3);}

/* --- news geo --- */
.br-world{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 28px;border-top:1px solid var(--br-rule);background:#FAFBFB;
}
.br-worldlab{white-space:nowrap;
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--br-ink3);
}
.br-geo{
  font-family:var(--br-data);font-size:var(--br-fs-micro);font-weight:500;letter-spacing:.04em;
  padding:4px 9px;border:1px solid var(--br-rule);border-radius:2px;
  color:var(--br-ink2);background:#fff;
}
.br-world p{margin:0;font-size:var(--br-fs-micro);color:var(--br-ink3);}

/* --- figures --- */
.br-figs{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--br-rule);margin:0;
}
.br-fig{padding:17px 28px 19px;border-right:1px solid var(--br-rule);}
.br-fig:last-child{border-right:0;}
.br-fig dt{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--br-ink3);margin:0 0 6px;font-weight:400;
}
.br-fig dd{
  margin:0;font-family:var(--br-data);font-size:var(--br-fs-fig);font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--br-ink);
}
.br-fig dd.up{color:var(--br-alert);}
.br-fig dd.down{color:var(--br-good);}
.br-hidden{color:#C2CACF;letter-spacing:.22em;font-size:var(--br-fs-body);}

/* --- tooltip --- */
.br-term{
  border-bottom:1.5px dotted var(--br-ink3);cursor:help;position:relative;
}
.br-term::after{
  content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 9px);
  width:270px;padding:11px 13px;background:var(--br-ink);color:#E7EBED;
  font-family:var(--br-body);font-size:var(--br-fs-small);font-weight:400;line-height:1.5;
  letter-spacing:0;text-transform:none;border-radius:3px;
  opacity:0;visibility:hidden;transition:opacity .16s;pointer-events:none;z-index:30;
}
.br-term:hover::after,
.br-term:focus::after{opacity:1;visibility:visible;}

/* --- locked --- */
.br-locked{position:relative;}
.br-locked .br-figs{filter:blur(3px);opacity:.42;user-select:none;pointer-events:none;}
.br-veil{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;padding:0 20px;text-align:center;
  background:linear-gradient(180deg,rgba(251,252,252,.55),rgba(241,244,245,.75));
}
.br-veil span{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--br-ink2);
}

/* --- verdict --- */
.br-verdict{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:15px 28px;border-top:1px solid var(--br-rule);
}
.br-chip{
  font-family:var(--br-data);font-size:var(--br-fs-micro);font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;padding:5px 11px;border-radius:2px;
}
.br-chip-alert{background:var(--br-alert-bg);color:var(--br-alert);}
.br-chip-good{background:var(--br-good-bg);color:var(--br-good);}
.br-chip-neutral{background:#EDF0F2;color:var(--br-ink2);}
.br-verdict p{margin:0;font-size:var(--br-fs-small);color:var(--br-ink2);}

/* --- buttons --- */
.br-btn{
  font-family:var(--br-body);font-size:var(--br-fs-small);font-weight:500;padding:8px 15px;
  border:1px solid var(--br-ink);border-radius:2px;background:transparent;
  color:var(--br-ink);cursor:pointer;text-decoration:none;
  transition:background .16s,color .16s;display:inline-block;
}
.br-btn:hover{background:var(--br-ink);color:#fff;}
.br-btn-solid{background:var(--br-ink);color:#fff;}
.br-btn-solid:hover{background:var(--br-ink2);border-color:var(--br-ink2);}

/* --- empty / error --- */
.br-empty{
  border:1px solid var(--br-rule);border-radius:3px;background:#FAFBFB;
  padding:28px;font-family:var(--br-body);color:var(--br-ink2);
}
.br-empty p{margin:0 0 8px;}
.br-empty p:last-child{margin:0;}

/* --- focus --- */
.br-signal a:focus-visible,
.br-term:focus-visible{outline:2px solid var(--br-brass);outline-offset:3px;}

/* --- responsive --- */
@media (max-width:760px){
  .br-top{grid-template-columns:1fr;gap:10px;padding:22px 20px 18px;}
  .br-rank{display:flex;align-items:baseline;gap:9px;padding-top:0;}
  .br-rank b{font-size:20px;margin:0;}
  .br-shift,.br-world{padding-left:20px;padding-right:20px;}
  .br-top{grid-template-columns:1fr;}
  .br-figs{grid-template-columns:1fr;}
  .br-fig{border-right:0;border-bottom:1px solid var(--br-rule);}
  .br-fig:last-child{border-bottom:0;}
  .br-verdict{padding:14px 20px;}
  .br-prov div{border-right:0;border-bottom:1px solid var(--br-rule);}
  .br-prov div:last-child{border-bottom:0;}
  .br-term::after{width:220px;left:auto;right:0;}
}

@media (prefers-reduced-motion:reduce){
  .br-seg{transition:none;}
}

/* ==========================================================================
   v1.1 — 페이지 레이아웃 (hero / method / pricing)
   .br-root 의 max-width 는 설정에서 인라인으로 주입됩니다.
   ========================================================================== */

:root{
  /* 반응형 글자 크기 — 화면 폭에 따라 자동으로 커지고 작아집니다 */
  --br-fs-body:  clamp(15px, 0.55vw + 13.2px, 17px);
  --br-fs-small: clamp(13px, 0.4vw + 11.7px, 14.5px);
  --br-fs-micro: clamp(11px, 0.28vw + 10px, 12.5px);
  --br-fs-data:  clamp(12px, 0.35vw + 10.8px, 13.5px);
  --br-fs-fig:   clamp(20px, 1.1vw + 16.5px, 27px);
  --br-fs-find:  clamp(20px, 1.4vw + 15.5px, 28px);
  --br-fs-rank:  clamp(22px, 0.9vw + 18.5px, 29px);
  --br-fs-h2:    clamp(20px, 0.8vw + 17px, 26px);
}

.br-root{
  --br-panel:#FFFFFF;
  --br-ink:#11161C;
  --br-ink2:#404C58;
  --br-ink3:#79858F;
  --br-rule:#C9D1D6;
  --br-alert:#8E2C26;
  --br-alert-bg:#F5E7E5;
  --br-good:#125A52;
  --br-good-bg:#E2EDEA;
  --br-brass:#A8811B;
  --br-display:'Archivo',system-ui,sans-serif;
  --br-body:'IBM Plex Sans',system-ui,sans-serif;
  --br-data:'IBM Plex Mono',ui-monospace,monospace;
  margin:0 auto;padding:0 24px;
  font-family:var(--br-body);color:var(--br-ink);line-height:1.55;
  font-size:var(--br-fs-body);
}
.br-root *{box-sizing:border-box;}

/* --- hero --- */
.br-hero{padding:56px 24px 34px;}
.br-eyebrow{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.15em;
  text-transform:uppercase;color:var(--br-brass);margin:0 0 18px;
}
.br-root h1.br-h1{
  font-family:var(--br-display);font-weight:800;
  font-size:clamp(34px,5.4vw,60px);line-height:1.03;letter-spacing:-.035em;
  margin:0 0 20px;max-width:17ch;color:var(--br-ink);
}
.br-lede{font-size:clamp(16px,0.7vw+14px,19px);color:var(--br-ink2);max-width:60ch;margin:0 0 26px;}
.br-coverage{
  display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;
  border:1px solid var(--br-rule);background:var(--br-panel);
  border-radius:2px;padding:9px 14px;
}
.br-coverage b{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--br-brass);font-weight:500;
}
.br-coverage span{font-size:var(--br-fs-small);color:var(--br-ink2);}
.br-coverage em{font-style:normal;color:var(--br-ink3);}

/* --- section head --- */
.br-sechead{
  display:flex;align-items:baseline;gap:14px;
  padding:46px 0 18px;border-bottom:1px solid var(--br-rule);
}
.br-root .br-sechead h2{
  font-family:var(--br-display);font-weight:700;font-size:var(--br-fs-h2);
  letter-spacing:-.02em;margin:0;color:var(--br-ink);
}
.br-note{
  font-family:var(--br-data);font-size:var(--br-fs-micro);color:var(--br-ink3);
  letter-spacing:.06em;margin-left:auto;
}

/* --- method --- */
.br-method{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;}
.br-method > div{padding:20px 22px 20px 0;border-right:1px solid var(--br-rule);}
.br-method > div:last-child{border-right:0;padding-right:0;}
.br-root .br-method h3{
  font-family:var(--br-data);font-size:var(--br-fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--br-brass);margin:0 0 9px;font-weight:500;
}
.br-method p{margin:0;font-size:var(--br-fs-small);color:var(--br-ink2);}

/* --- pricing --- */
.br-tiers{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;}
.br-tier{
  background:var(--br-panel);border:1px solid var(--br-rule);border-radius:3px;
  padding:26px;box-shadow:0 1px 0 rgba(17,22,28,.06), 0 12px 28px -20px rgba(17,22,28,.5);
}
.br-tier.br-pro{border-color:var(--br-ink);border-width:1.5px;}
.br-root .br-tier h3{
  font-family:var(--br-display);font-weight:700;font-size:clamp(17px,0.5vw+15.4px,20px);
  letter-spacing:-.02em;margin:0 0 3px;color:var(--br-ink);
}
.br-price{
  font-family:var(--br-data);font-size:var(--br-fs-micro);color:var(--br-ink3);
  letter-spacing:.06em;margin:0 0 18px;
}
.br-tier ul{list-style:none;margin:0 0 22px;padding:0;}
.br-tier li{
  font-size:var(--br-fs-small);color:var(--br-ink2);padding:7px 0 7px 22px;
  position:relative;border-bottom:1px solid #EDF0F2;margin:0;
}
.br-tier li:last-child{border-bottom:0;}
.br-tier li::before{
  content:'';position:absolute;left:2px;top:15px;
  width:8px;height:1.5px;background:var(--br-brass);
}
.br-tier .br-btn{display:block;width:100%;text-align:center;}

@media (max-width:760px){
  .br-hero{padding:40px 20px 26px;}
  .br-root{padding:0 20px;}
  .br-method,.br-tiers{grid-template-columns:1fr;}
  .br-method > div{border-right:0;border-bottom:1px solid var(--br-rule);padding-right:0;}
  .br-method > div:last-child{border-bottom:0;}
}