/* web/assets/css/styles.css — 디자인 시스템(SP-DS). "jobcho.wiki(잡초) 위키" 방향
   (나무위키 대문 참조: 그린 상단 바 + 라이트 그레이 캔버스 + 흰 라운드 카드). 무빌드,
   :root 토큰 + 컴포넌트. 색 토큰은 :root에만, 컴포넌트는 var(--*)만(UT-NO-LITERAL).
   사용자 결정(2026-07-16): jobcho.wiki 리브랜딩 — 풀잎 연두(#8bc34a)·진초록 브랜드(--brand)·
   그레이 캔버스. 폰트: 세리프 디스플레이 + 자체호스팅 Pretendard 유지(FOIT 방지 NFR5). */

@font-face {
  font-family: 'Pretendard';
  src: url('/assets/fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-display: swap;
  font-style: normal;
}

:root {
  /* ── 1) 원시 배경/텍스트 — 라이트 그레이 캔버스(나무위키 대문) ──
     bg-0 캔버스 · bg-1 카드(화이트) · bg-2 소프트 그레이 · bg-3 헤어라인 · bg-4 강한 경계 */
  --bg-0:#f6f7f8; --bg-1:#ffffff; --bg-2:#eef0f2; --bg-3:#e1e4e8; --bg-4:#cfd4d9;
  --t1:#1f2328; --t2:#3b3f45; --t3:#5f646b; --t4:#878c93;

  /* ── 1b) 기능 액센트(배지·상태용) + dim — 그레이 캔버스 위 대비 AA 유지 ── */
  --blue:#2563eb;  --amber:#b45309; --green:#047857;
  --red:#c02626;   --purple:#6d28d9; --gold:#7a5a06;
  --blue-dim:rgb(37 99 235 / .10);   --amber-dim:rgb(180 83 9 / .12);
  --green-dim:rgb(4 120 87 / .12);   --red-dim:rgb(192 38 38 / .10);
  --purple-dim:rgb(109 40 217 / .10); --gold-dim:rgb(122 90 6 / .12);

  /* ── 1c) jobcho.wiki 브랜드색(풀잎 연두 + 진초록) + 서피스 ── */
  --grass:#8bc34a; --brand:#2f7d43; --brand-active:#266336; --brand-tint:#e9f4ec;
  --brand-bar:var(--brand); --on-brand:#ffffff; --on-brand-soft:rgb(255 255 255 / .85);
  --surface-card:#eef0f2; --surface-soft:#f3f5f6;
  --surface-dark:#1d2620; --surface-dark-elevated:#2a352d;
  --on-dark:#f4f6f4; --on-dark-soft:#9aa39c;

  /* ── 2) 시맨틱 색 별칭 ── */
  --accent:var(--brand); --accent-hover:var(--brand-active); --accent-ink:#ffffff; --link:var(--brand);
  --accent-tint:var(--brand-tint);
  --positive:var(--green); --negative:var(--red); --warning:var(--amber);
  --brand-axis:var(--purple);
  --text:var(--t1); --text-muted:var(--t3);
  --surface:var(--bg-1); --surface-raised:var(--bg-2);
  --border:var(--bg-3); --border-strong:var(--bg-4);
  --focus:var(--brand); --focus-width:2px; --focus-offset:2px;

  /* ── 2b) 다크 테마 확장 훅(후속) — 현재 기본=라이트/크림(UT-LIGHT-DEFAULT) ── */

  /* ── 3) 배지·밴드·광고 라벨 색(--bg-1 위 대비 AA) ── */
  --badge-official-fg:#046a4e; --badge-official-bg:#e6f6ee;
  --badge-est-fg:#9a5108;      --badge-est-bg:#fbefdb;
  --badge-expired-fg:#b23a0b;  --badge-expired-bg:#fceadd;
  --badge-qual-fg:var(--t2);   --badge-qual-bg:#eef0f2;
  --band-label-fg:var(--t3);   --band-expired-fg:var(--amber);
  --ad-label-fg:#5f646b; --ad-label-fs:12px;
  --ad-slot-bg:#f0f2f4; --ad-slot-border:var(--bg-3);

  /* ── 4) 타이포 — 세리프 디스플레이 + 휴머니스트 sans 본문 ── */
  --font-sans:'Pretendard',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --font-serif:Georgia,'Times New Roman','Nanum Myeongjo','Apple SD Gothic Neo',serif;
  --fs-ad:12px; --fs-xs:13px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px;
  --fs-h3:22px; --fs-h2:28px; --fs-h1:38px; --fs-display:48px;
  --lh-tight:1.1; --lh-base:1.6; --lh-snug:1.4; --ls-tight:-0.02em;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ── 5) 간격·컨테이너 ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --container-max:1400px; --gutter-mobile:16px; --gutter-desktop:24px; --tap-min:44px; /* 1400px: 나무위키 대문급(본문+사이드바) — 2026-07-16 개정 */

  /* ── 6) 반경·테두리·엘리베이션(color-block first, shadow rare) ── */
  --r-xs:4px; --r-sm:8px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --bw:1px; --border-color:var(--bg-3);
  --shadow-1:0 1px 3px rgb(20 20 19 / .06);
  --shadow-2:0 2px 8px rgb(20 20 19 / .08);

  /* ── 7) 모션 ── */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.2,0,0,1); --ease-inout:cubic-bezier(.4,0,.2,1); --ease-standard:ease;

  /* ── 8) 브레이크포인트(참고 토큰; 미디어쿼리엔 리터럴 768px) ── */
  --bp-desktop:768px;
}

*, *::before, *::after { box-sizing:border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════ BASE ══ */
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font-sans); font-size:var(--fs-base); line-height:var(--lh-base);
  color:var(--text); background:var(--bg-0);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3 { font-family:var(--font-serif); font-weight:var(--fw-regular); letter-spacing:var(--ls-tight); line-height:var(--lh-tight); }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
ul { margin:0; padding:0; list-style:none; }
img { max-width:100%; }
button { font:inherit; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:var(--focus-width) solid var(--focus); outline-offset:var(--focus-offset); border-radius:var(--r-xs);
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link {
  position:absolute; left:var(--sp-4); top:-60px; z-index:100;
  background:var(--accent); color:var(--accent-ink); padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:var(--fw-medium);
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top:var(--sp-3); }

main, .company-page, .policy-page, body > main {
  display:block; width:100%; max-width:var(--container-max);
  margin-inline:auto; padding-inline:var(--gutter-mobile); padding-bottom:var(--sp-8);
}

/* ═══════════════════════════════════════════════════ HEADER / FOOTER ══ */
/* GNB — 나무위키식 그린 상단 바(로고 + 메뉴 + 우측 검색; 최근토론·특수기능·로그인 없음) */
header, header[data-global] {
  position:sticky; top:0; z-index:40;
  background:var(--brand-bar); border-bottom:var(--bw) solid var(--brand-active);
}
header:not([data-global]), header[data-global] nav {
  display:flex; align-items:center; gap:var(--sp-4); min-height:56px;
  padding-block:var(--sp-2);
  padding-inline:max(var(--gutter-mobile), calc((100% - var(--container-max)) / 2));
}
header:not([data-global]) .site-logo, header[data-global] .brand { margin-right:var(--sp-2); }
header:not([data-global]) nav { display:flex; align-items:center; gap:var(--sp-4); }
.brand, .site-logo {
  display:inline-flex; align-items:center; /* gap 제거: 텍스트 조각(jobcho/./wiki)이 flex 아이템이라 gap이 자간처럼 벌어짐 — 간격은 로고 img margin으로만 */
  font-family:var(--font-sans); font-size:var(--fs-lg); font-weight:var(--fw-bold);
  color:var(--on-brand); letter-spacing:-0.01em;
}
.brand:hover, .site-logo:hover { text-decoration:none; }
.brand-logo { display:block; width:34px; height:22px; margin-right:var(--sp-2); }
.brand-dot { color:var(--grass); }
header nav a:not(.brand):not(.site-logo) { color:var(--on-brand-soft); font-size:var(--fs-sm); font-weight:var(--fw-medium); }
header nav a:not(.brand):hover { color:var(--on-brand); text-decoration:none; }
/* GNB 검색(우측) — 제출 시 A 슬롯 주입(ui.js bindHeaderSearch) */
.gnb-search { display:flex; align-items:center; margin-left:auto; background:var(--bg-1); border-radius:var(--r-sm); overflow:hidden; }
.gnb-search input[type="search"] {
  width:150px; max-width:38vw; border:0; background:none; color:var(--t1);
  padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); font-family:var(--font-sans);
}
.gnb-search input[type="search"]::placeholder { color:var(--t4); }
.gnb-search button {
  border:0; background:none; color:var(--brand); cursor:pointer;
  padding:var(--sp-2) var(--sp-3); font-size:var(--fs-base); font-weight:var(--fw-bold);
}
.gnb-search button:hover { color:var(--brand-active); }

/* 다크 그린 푸터(절대 반전 안 함) */
footer, footer[data-global] {
  margin-top:var(--sp-8); background:var(--surface-dark); color:var(--on-dark-soft);
}
footer > *, footer[data-global] > * { max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter-mobile); }
footer nav, footer[data-global] nav, .policy-links { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); padding-top:var(--sp-7); }
footer a, footer[data-global] a, .policy-links a { color:var(--on-dark); font-size:var(--fs-sm); }
footer .disclaimer, footer .copyright { color:var(--on-dark-soft); }
.disclaimer { color:var(--on-dark-soft); font-size:var(--fs-xs); line-height:var(--lh-base); padding-block:var(--sp-4); max-width:74ch; }
.copyright { color:var(--on-dark-soft); font-size:var(--fs-xs); padding-bottom:var(--sp-7); }

/* ══════════════════════════════════════════════════════ TYPOGRAPHY ══ */
main h1, .company-page h1, .policy-page h1 { font-size:var(--fs-h1); margin-top:var(--sp-6); }
main h2 { font-size:var(--fs-h2); margin-top:var(--sp-6); }
main h3 { font-size:var(--fs-h3); margin-top:var(--sp-5); }
main p { margin-top:var(--sp-3); }

/* ═══════════════════════════════════════════════════ BUTTONS / CTA ══ */
.btn, #btn-compare, a.cta {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--tap-min); padding:var(--sp-3) var(--sp-5);
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-medium);
  border:0; border-radius:var(--r-md); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out);
}
.btn:hover, #btn-compare:hover, a.cta:hover { background:var(--accent-hover); text-decoration:none; }
#btn-edit-input, #btn-new-search, [data-retry], #btn-boot-retry {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap-min); padding:var(--sp-2) var(--sp-4);
  background:var(--bg-0); color:var(--t1);
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
  border:var(--bw) solid var(--border-strong); border-radius:var(--r-md); cursor:pointer;
}
#btn-edit-input:hover, #btn-new-search:hover { background:var(--surface-soft); }
#view-report button { margin-top:var(--sp-4); margin-right:var(--sp-2); }

/* ══════════════════════════════════════════════════════ BADGES / CHIPS ══ */
.badge, .benefit-badge {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:var(--fw-medium); white-space:nowrap;
  background:var(--badge-qual-bg); color:var(--badge-qual-fg);
}
.badge-official { background:var(--badge-official-bg); color:var(--badge-official-fg); }
.badge-est { background:var(--badge-est-bg); color:var(--badge-est-fg); }
.badge-expired, .benefit-expires { color:var(--badge-expired-fg); font-weight:var(--fw-medium); }
.chip {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill);
  background:var(--bg-1); border:var(--bw) solid var(--border);
  font-size:var(--fs-sm); color:var(--t2);
}

/* ══════════════════════════════════════════════════════ LANDING ══ */
.lede { font-size:var(--fs-lg); color:var(--t2); max-width:60ch; margin-top:var(--sp-4); }

/* ══════════════════════════════════════════════════════ COMPANY PAGE ══ */
.company-info { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin-top:var(--sp-4); color:var(--t3); font-size:var(--fs-sm); }
.company-info .industry, .company-info .company-type, .company-info .stability, .company-info .growth {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:var(--bg-1); border:var(--bw) solid var(--border); border-radius:var(--r-pill);
  padding:var(--sp-1) var(--sp-3);
}
.stability { color:var(--brand); font-weight:var(--fw-medium); }
.work-style { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }
.work-style li { background:var(--surface-card); color:var(--t1); border-radius:var(--r-pill); padding:var(--sp-1) var(--sp-3); font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.benefits, .benefit-group { margin-top:var(--sp-5); }
.benefit-group > h3, .benefits h3 { padding-bottom:var(--sp-2); border-bottom:var(--bw) solid var(--border); }
.benefit-table { width:100%; border-collapse:collapse; margin-top:var(--sp-3); }
.benefit-table tr { border-bottom:var(--bw) solid var(--border); }
.benefit-table td, .benefit-table th { padding:var(--sp-3) var(--sp-2); text-align:left; vertical-align:top; font-size:var(--fs-sm); }
.benefit-name { font-weight:var(--fw-semibold); color:var(--t1); }
.benefit-amount { color:var(--brand); font-weight:var(--fw-semibold); white-space:nowrap; }
.benefit-note { color:var(--t3); }
.benefit-src, .benefit-verified { color:var(--t4); font-size:var(--fs-xs); }

/* 코랄 콜아웃 CTA(풀블리드) */
.cta {
  margin-top:var(--sp-7); padding:var(--sp-7) var(--sp-6);
  background:var(--accent); border-radius:var(--r-lg); text-align:center;
}
.cta h2 { margin-top:0; color:var(--accent-ink); }
.cta p { color:var(--accent-ink); }
.cta a { display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap-min); margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-5); background:var(--bg-0); color:var(--t1); font-weight:var(--fw-medium); border-radius:var(--r-md); }
.cta a:hover { text-decoration:none; background:var(--bg-1); }

/* ═══════════════════════════════════════ COMPARE TOOL(셸 3뷰 + ui.js) ══ */
/* hidden 은 항상 display 규칙을 이겨야 한다(뷰 전환 정확성). */
[hidden] { display:none !important; }
/* 검색 뷰: 랜딩 히어로 아래 강조 카드(두 직장 선택 박스). 입력/리포트 뷰는 자체 카드 스타일 보유. */
#view-search { margin-top:var(--sp-5); padding:var(--sp-5); background:var(--bg-1); border:var(--bw) solid var(--accent); border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
#view-search > h2 { margin-top:0; font-size:var(--fs-h3); }
.search-slot { margin-top:var(--sp-4); }
.search-slot label { display:block; font-weight:var(--fw-medium); margin-bottom:var(--sp-2); }
.search-slot input[type="text"], #view-input input[type="number"], #view-input select {
  width:100%; max-width:420px; min-height:var(--tap-min);
  padding:var(--sp-3); font-size:var(--fs-base);
  background:var(--bg-1); color:var(--t1);
  border:var(--bw) solid var(--border-strong); border-radius:var(--r-md);
}
#view-input input[type="checkbox"], #view-input input[type="radio"] { width:auto; min-height:0; accent-color:var(--accent); }
.cand-list { max-width:420px; margin-top:var(--sp-1); border:var(--bw) solid var(--border); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-1); background:var(--bg-1); }
.cand-list:empty { display:none; }
.cand-list .cand { display:flex; flex-direction:column; gap:2px; padding:var(--sp-3); cursor:pointer; border-bottom:var(--bw) solid var(--border); }
.cand-list .cand:last-child { border-bottom:0; }
.cand-list .cand:hover, .cand-list .cand:focus { background:var(--brand-tint); }
.cand-nm { font-weight:var(--fw-semibold); }
.cand-meta { font-size:var(--fs-xs); color:var(--t3); }
.search-empty, .search-error { margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--t3); }
.search-error { color:var(--negative); }
.ui-notify { margin:var(--sp-3) 0; padding:var(--sp-3) var(--sp-4); background:var(--badge-expired-bg); color:var(--badge-expired-fg); border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.ui-notify:empty { display:none; }

#view-input { display:grid; gap:var(--sp-5); }
.input-slot { background:var(--bg-1); border:var(--bw) solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); }
.in-slot-title { font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:var(--fw-regular); letter-spacing:var(--ls-tight); margin-bottom:var(--sp-3); }
.in-salary, .in-benefits, .in-ws, #priority-picker fieldset { border:0; padding:0; margin:var(--sp-4) 0 0; }
.in-salary legend, .in-benefits legend, .in-ws legend, #priority-picker legend { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--t3); padding:0; margin-bottom:var(--sp-2); }
#view-input .in-salary input, #view-input .in-rate input, #view-input .in-commute input { width:130px; }
.in-rate, .in-commute { margin-top:var(--sp-4); }
.in-rate label, .in-commute label { display:block; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--t3); margin-bottom:var(--sp-2); }
.in-ben-row, .in-ws-row, .pri-row { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 0; }
.in-ben-row input, .in-ws-row input, .pri-row input { width:auto; min-height:auto; }
.in-ben-empty { color:var(--t3); font-size:var(--fs-sm); }
.in-ws select { width:auto; max-width:none; display:inline-block; margin-right:var(--sp-2); }
#priority-picker { background:var(--surface-card); border:var(--bw) solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); }

#boot-error { margin-top:var(--sp-6); padding:var(--sp-5); background:var(--badge-expired-bg); border-radius:var(--r-lg); }
#consent-banner { position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--surface-dark); color:var(--on-dark); border-top:var(--bw) solid var(--surface-dark-elevated); padding:var(--sp-4); display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
#consent-banner a { color:var(--on-dark); }

/* ══════════════════════════════════════════════════════ REPORT ══ */
#report-body { display:grid; gap:var(--sp-5); margin-top:var(--sp-4); }
.rp-block { background:var(--bg-1); border:var(--bw) solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); }
.rp-block h3 { margin-top:0; margin-bottom:var(--sp-3); }
.rp-vdcard { background:var(--brand-tint); border-color:var(--border); }
.vd-persp { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:baseline; margin-bottom:var(--sp-2); }
.vd-axis-label, .vd-persp-label { font-weight:var(--fw-semibold); color:var(--t3); font-size:var(--fs-sm); }
.vd-persp-text { font-weight:var(--fw-semibold); }
.vd-tie-note, .vd-limited-note, .vd-sacrifice-note { color:var(--t3); font-size:var(--fs-sm); }
.rp-total-slot, .rp-wlb-slot, .rp-hourly-slot { display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:var(--bw) solid var(--border); }
.rp-slot-label { color:var(--t3); }
.rp-slot-total { font-family:var(--font-serif); font-weight:var(--fw-regular); font-size:var(--fs-h3); }
.rp-total-delta { margin-top:var(--sp-2); font-weight:var(--fw-semibold); color:var(--brand); }
.rp-band-body { color:var(--band-label-fg); font-size:var(--fs-xs); padding:var(--sp-1) 0 var(--sp-2); }
.band-list { margin-top:var(--sp-2); }
.band-item { display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-1) 0; font-size:var(--fs-sm); }
.band-src { color:var(--t4); font-size:var(--fs-xs); }
.cat-delta-table { width:100%; border-collapse:collapse; margin-top:var(--sp-2); }
.cat-delta-table th, .cat-delta-table td { padding:var(--sp-2); text-align:right; font-size:var(--fs-sm); border-bottom:var(--bw) solid var(--border); }
.cat-delta-table th:first-child, .cat-delta-table td:first-child, .cat-delta-nm { text-align:left; color:var(--t3); }
.cat-delta-diff { font-weight:var(--fw-semibold); }
/* 복지 비교 v2("한눈에") — 총액 헤드라인(결론 먼저) + 항목 매트릭스(차이 열·행내 미니바) */
.ben-headline { margin-top:var(--sp-3); padding-bottom:var(--sp-4); border-bottom:var(--bw) solid var(--border); }
.ben-headline-vals { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.ben-headline-side { display:inline-flex; align-items:baseline; gap:var(--sp-2); }
.ben-headline-nm { font-size:var(--fs-sm); color:var(--t3); font-weight:var(--fw-medium); }
.ben-headline-amt { font-family:var(--font-serif); font-weight:var(--fw-regular); font-size:var(--fs-h3); letter-spacing:var(--ls-tight); }
.ben-headline-side--a .ben-headline-amt { color:var(--blue); }
.ben-headline-side--b .ben-headline-amt { color:var(--brand); }
.ben-headline-vs { color:var(--t4); font-size:var(--fs-xs); }
.ben-split { display:flex; height:10px; margin-top:var(--sp-2); border-radius:var(--r-pill); overflow:hidden; background:var(--bg-2); }
.ben-split-a { background:var(--blue); }
.ben-split-b { background:var(--brand); }
.ben-headline-verdict { margin-top:var(--sp-2); font-weight:var(--fw-semibold); }
.ben-diff-summary { display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-5); margin-top:var(--sp-1); font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.ben-diff--gained { color:var(--positive); }
.ben-diff--lost { color:var(--negative); }
.ben-matrix { width:100%; border-collapse:collapse; margin-top:var(--sp-3); }
.ben-matrix th, .ben-matrix td { padding:var(--sp-1) var(--sp-2); font-size:var(--fs-sm); text-align:left; vertical-align:middle; border-bottom:var(--bw) solid var(--border); }
.ben-matrix thead th { color:var(--t3); font-weight:var(--fw-semibold); font-size:var(--fs-xs); }
.ben-matrix .ben-col { width:28%; }
.ben-matrix .ben-col-delta { width:14%; text-align:right; }
.ben-cat-row th, .ben-cat-row td { background:var(--surface-soft); font-size:var(--fs-xs); }
.ben-cat-nm { font-weight:var(--fw-semibold); color:var(--t2); }
.ben-cat-sum { color:var(--t4); white-space:nowrap; }
.ben-nm { font-weight:var(--fw-regular); color:var(--t2); }
.ben-cell-top { display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap; }
.ben-cell .ben-amt { font-weight:var(--fw-medium); white-space:nowrap; }
/* 행내 미니바 — 표 최대 금액 대비 폭%(구 버터플라이 대체, 세로 추가 0에 가까움) */
.ben-bar { display:block; height:4px; margin-top:2px; border-radius:var(--r-xs); }
.ben-bar--a { background:var(--blue); }
.ben-bar--b { background:var(--brand); }
.ben-none { color:var(--t4); white-space:nowrap; }
.ben-mark { display:inline-block; margin-left:var(--sp-1); font-size:var(--fs-ad); font-weight:var(--fw-medium); white-space:nowrap; }
.ben-mark--lost { color:var(--negative); }
.ben-mark--gained { color:var(--positive); }
.ben-qual { color:var(--t2); white-space:nowrap; }
/* 차이 열 — 세로로 훑으면 전 항목 승부가 보이는 축 */
.ben-row-delta, .ben-cat-delta { text-align:right; }
.ben-delta { display:inline-block; white-space:nowrap; font-size:var(--fs-xs); font-weight:var(--fw-semibold); }
.ben-delta--a { color:var(--blue); }
.ben-delta--b { color:var(--brand); }
.ben-delta--eq { color:var(--t4); }
/* report.js badgeClass의 이중대시 변형(badge--official 등) 정합 — 단일대시와 동일 팔레트 */
.badge--official { background:var(--badge-official-bg); color:var(--badge-official-fg); }
.badge--est { background:var(--badge-est-bg); color:var(--badge-est-fg); }
.badge--expired { background:var(--badge-expired-bg); color:var(--badge-expired-fg); }
/* 버터플라이(back-to-back) 카테고리 차트 — 예전 loupit 디자인 이식. A는 중앙축서 왼쪽, B는 오른쪽. */
.rp-catbfly { margin:var(--sp-3) 0 var(--sp-5); }
.bfly-legend { display:flex; gap:var(--sp-4); justify-content:center; margin-bottom:var(--sp-3); font-size:var(--fs-xs); color:var(--t3); }
.bfly-key { display:inline-flex; align-items:center; gap:var(--sp-1); }
.bfly-key::before { content:""; width:10px; height:10px; border-radius:var(--r-xs); }
.bfly-key.a::before { background:var(--blue); }
.bfly-key.b::before { background:var(--brand); }
.bfly { display:flex; flex-direction:column; gap:var(--sp-2); }
.bfly-row { display:grid; grid-template-columns:52px 1fr 104px 1fr 52px; align-items:center; gap:var(--sp-2); }
.bfly-val { font-size:var(--fs-xs); color:var(--t3); }
.bfly-val.a { text-align:right; }
.bfly-val.b { text-align:left; }
.bfly-wing { height:14px; display:flex; align-items:center; }
.bfly-wing.a { justify-content:flex-end; }
.bfly-wing.b { justify-content:flex-start; }
.bfly-bar { height:100%; border-radius:var(--r-xs); }
.bfly-bar.a { background:var(--blue); }
.bfly-bar.b { background:var(--brand); }
.bfly-center { text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; }
.bfly-label { font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--t2); }
.bfly-diff { font-size:var(--fs-xs); font-weight:var(--fw-semibold); }
.bfly-diff.a { color:var(--blue); }
.bfly-diff.b { color:var(--brand); }
.bfly-diff.eq { color:var(--t4); }
.rp-qual-list { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.rp-qual-item { background:var(--surface-card); border:var(--bw) solid var(--border); border-radius:var(--r-pill); padding:var(--sp-1) var(--sp-3); font-size:var(--fs-sm); }
.rp-recent { margin-top:var(--sp-2); }
.rp-recent-item { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:var(--bw) solid var(--border); }
.rp-recent-empty { color:var(--t3); font-size:var(--fs-sm); }
.rp-recent-restore { color:var(--brand); font-weight:var(--fw-medium); }
.rp-recent-remove { color:var(--negative); }
.rp-warnings { display:flex; flex-direction:column; gap:var(--sp-2); }
.rp-warning-item { background:var(--badge-expired-bg); color:var(--badge-expired-fg); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); }

/* ══════════════════════ COMPANY DIRECTORY(등록 회사 수 → 전체 목록) ══ */
/* 카운트 버튼: 모바일은 h2 아래 우측 정렬, 데스크톱(768+)은 카드 우측 상단 absolute. */
#view-search { position:relative; }
#company-directory { text-align:right; }
.dir-count {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  min-height:var(--tap-min); padding:var(--sp-1) var(--sp-2);
  background:none; border:0; cursor:pointer;
  font-size:var(--fs-sm); color:var(--t3); border-radius:var(--r-sm);
}
.dir-count:hover { color:var(--t1); background:var(--brand-tint); }
.dir-count .dir-count-n { color:var(--brand); font-weight:var(--fw-bold); }
.dir-panel {
  margin-top:var(--sp-2); text-align:left;
  background:var(--surface-soft); border:var(--bw) solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
  max-height:420px; overflow-y:auto; /* 회사 ~96개 — 카드 안에서 스크롤 */
}
.dir-hint { margin-top:0; font-size:var(--fs-xs); color:var(--t4); }
.dir-list { list-style:none; margin:var(--sp-2) 0 0; padding:0; }
.dir-row { border-bottom:var(--bw) solid var(--border); }
.dir-row:last-child { border-bottom:0; }
.dir-comp {
  display:flex; align-items:baseline; gap:var(--sp-2); width:100%; min-height:var(--tap-min);
  padding:var(--sp-2) var(--sp-1); background:none; border:0; cursor:pointer; text-align:left;
  font-size:var(--fs-sm); color:var(--t1); border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--ease-out);
}
.dir-comp:hover { background:var(--brand-tint); }
.dir-comp-nm { font-weight:var(--fw-medium); }
.dir-comp-meta { font-size:var(--fs-xs); color:var(--t4); }
.dir-benefits { padding:0 var(--sp-2) var(--sp-3); }
.dir-ben-list { list-style:none; margin:0; padding:0; }
.dir-ben-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-1) 0; font-size:var(--fs-sm); }
.dir-ben-nm { color:var(--t2); }
.dir-ben-empty { margin-top:0; font-size:var(--fs-sm); color:var(--t4); }

/* ══════════════════════════════ TRENDING(실시간 비교 TOP 10 우측 레일) ══ */
/* 모바일(<768px): .main-cols 블록 흐름 — 레일이 본문 아래 스택. 데스크톱은 하단 @media. */
#trending {
  margin-top:var(--sp-5); padding:var(--sp-4);
  background:var(--bg-1); border:var(--bw) solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
#trending .trend-title {
  margin-top:0; font-family:var(--font-sans); font-size:var(--fs-sm);
  font-weight:var(--fw-semibold); color:var(--t2); letter-spacing:0; line-height:var(--lh-snug);
}
#trending .trend-caption { margin-top:var(--sp-1); font-size:var(--fs-ad); color:var(--t4); }
.trend-current, .trend-list { margin-top:var(--sp-2); border-top:var(--bw) solid var(--border); padding-top:var(--sp-1); }
.trend-list { list-style:none; margin-bottom:0; padding-left:0; display:none; }
.trend-item {
  display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:var(--tap-min);
  padding:var(--sp-1) var(--sp-1); background:none; border:0; cursor:pointer; text-align:left;
  font-size:var(--fs-sm); color:var(--t1); border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--ease-out);
}
.trend-item:hover { background:var(--brand-tint); }
.trend-rank { flex:none; width:20px; text-align:center; font-weight:var(--fw-semibold); color:var(--brand); font-size:var(--fs-xs); }
.trend-pair { display:inline-flex; flex-wrap:wrap; column-gap:var(--sp-1); align-items:baseline; }
.trend-a, .trend-b { font-weight:var(--fw-medium); }
.trend-vs { color:var(--t4); font-size:var(--fs-ad); }
/* 호버·포커스 펼침: 접힘 행(롤링 1건) ↔ 전체 목록(1~10) 전환 */
#trending.trend-expanded .trend-current { display:none; }
#trending.trend-expanded .trend-list { display:block; }

/* ══════════════════ COMPANY PAGE(#company 뷰 — GNB 검색 직행) ══ */
.cp-page { background:var(--bg-1); border:var(--bw) solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); }
.cp-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-3); }
.cp-nm { margin-top:0; font-size:var(--fs-h2); }
.cp-meta { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.cp-cat { margin-top:var(--sp-5); }
.cp-cat-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); padding-bottom:var(--sp-2); border-bottom:var(--bw) solid var(--border); }
.cp-cat-nm { margin-top:0; font-size:var(--fs-h3); }
.cp-cat-sum { color:var(--brand); font-weight:var(--fw-semibold); font-size:var(--fs-sm); white-space:nowrap; }
.cp-ben-list { list-style:none; margin:0; padding:0; }
.cp-ben-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:var(--bw) solid var(--bg-2); font-size:var(--fs-sm); }
.cp-ben-row:last-child { border-bottom:0; }
.cp-ben-nm { color:var(--t2); }
.cp-total { margin-top:var(--sp-5); padding:var(--sp-3) var(--sp-4); background:var(--brand-tint); border-radius:var(--r-md); font-weight:var(--fw-medium); }
.cp-total-amt { color:var(--brand); font-family:var(--font-serif); font-size:var(--fs-h3); font-weight:var(--fw-regular); margin-left:var(--sp-2); }
.cp-note { margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--t4); }
.cp-empty { margin-top:var(--sp-4); color:var(--t3); }
.cp-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); margin-top:var(--sp-5); }
.cp-home { font-size:var(--fs-sm); }
.cp-cand-list { list-style:none; margin:var(--sp-4) 0 0; padding:0; }
.cp-cand {
  display:flex; align-items:baseline; gap:var(--sp-3); width:100%; min-height:var(--tap-min);
  padding:var(--sp-2) var(--sp-2); background:none; border:0; border-bottom:var(--bw) solid var(--border);
  cursor:pointer; text-align:left; font-size:var(--fs-base); color:var(--t1); transition:background var(--dur-fast) var(--ease-out);
}
.cp-cand:hover { background:var(--brand-tint); }
.cp-cand-nm { font-weight:var(--fw-medium); }
.cp-cand-meta { font-size:var(--fs-xs); color:var(--t4); }

/* ══════════════════════════════════════════════════════ ADS ══ */
.ad-slot, [data-ad-position] {
  margin-top:var(--sp-6); padding:var(--sp-5);
  background:var(--ad-slot-bg); border:var(--bw) dashed var(--ad-slot-border); border-radius:var(--r-md);
  min-height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2);
  position:relative;
}
.ad-slot::before, [data-ad-position]::before {
  content:"광고"; position:absolute; top:var(--sp-2); left:var(--sp-3);
  font-size:var(--ad-label-fs); font-weight:var(--fw-medium); color:var(--ad-label-fg);
}
.ad-label { font-size:var(--ad-label-fs); font-weight:var(--fw-medium); color:var(--ad-label-fg); }

/* ══════════════════════════════════════════════════════ POLICY ══ */
.policy-page { max-width:760px; }
.policy-toc { background:var(--surface-soft); border:var(--bw) solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); margin-top:var(--sp-4); }
.policy-toc a { display:block; padding:var(--sp-1) 0; }
.last-modified, .correction, .sla { color:var(--t3); font-size:var(--fs-sm); }
.ads-none-notice { color:var(--t3); font-size:var(--fs-sm); font-style:italic; }
.policy-draft { border-left:3px solid var(--warning); padding:var(--sp-3) var(--sp-4); background:var(--badge-est-bg); border-radius:var(--r-sm); }

/* ══════════════════════════════════════════════════ RESPONSIVE(768) ══ */
@media (min-width: 768px) {
  main, .company-page, .policy-page, body > main { padding-inline:var(--gutter-desktop); }
  footer > *, footer[data-global] > * { padding-inline:var(--gutter-desktop); }
  main h1, .company-page h1, .policy-page h1 { font-size:var(--fs-display); }
  #view-input { grid-template-columns:1fr 1fr; align-items:start; }
  #view-input > h2, #view-input #priority-picker, #view-input #btn-compare { grid-column:1 / -1; }
  .cat-delta-table th, .cat-delta-table td { padding:var(--sp-3); }
  /* 우측 레일(실시간 비교 TOP 10): 본문 + 240px 2칼럼, 스크롤 시 sticky(헤더 56px 아래) */
  .main-cols { display:grid; grid-template-columns:minmax(0,1fr) 300px; column-gap:var(--sp-6); align-items:start; }
  .main-cols > .rail { position:sticky; top:72px; }
  /* 등록 회사 수: 카드 우측 상단(h2와 같은 줄) */
  #company-directory { position:static; }
  .dir-count { position:absolute; top:var(--sp-3); right:var(--sp-4); }
  .dir-panel { margin-top:var(--sp-3); }
  /* GNB 검색: 데스크톱에서 여유 폭 */
  .gnb-search input[type="search"] { width:240px; }
}