/* ===================================================================
   site.compat.css — legacy hooks bridge
   -------------------------------------------------------------------
   The original IR_Web pages use a number of legacy class names that
   still appear in DB content, JS, or other non-converted views.
   This file maps them onto the new design tokens so things continue
   to look correct during a gradual migration.

   Load AFTER site.new.css.
   =================================================================== */

/* ---- Legacy back-button → btn--ghost ---- */
.back-button,
.ir-data-back-button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px;
  color: var(--ink-soft); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-1);
  text-decoration: none;
}
.back-button:hover { background: var(--bg-warm); color: var(--ink); }

/* ---- Legacy page title ---- */
.ir-page-title {
  font-family: var(--serif); font-weight: 500;
  font-size: 28px; letter-spacing: -.4px;
  color: var(--ink); margin: var(--s-3) 0 var(--s-4);
}

/* ---- Legacy nav-tabs (year switcher) → chip ---- */
.nav-tabs {
  display: inline-flex; gap: 4px;
  border: none; padding: 0; margin: var(--s-3) 0 var(--s-4);
}
.nav-tabs .nav-link {
  padding: 5px 10px; font-size: 13px; border-radius: var(--r-1);
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--ink-soft); font-weight: 500; text-decoration: none;
}
.nav-tabs .nav-link.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Legacy bootstrap-ish buttons mapped to new btn ---- */
.btn-success         { background: var(--knu);  color: #fff; border: 1px solid var(--knu); }
.btn-outline-secondary {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--hairline);
}
.btn-sm              { padding: 5px 10px; font-size: 13px; }

/* ---- Legacy sort indicator + sortable header chrome ---- */
.sort-indicator {
  margin-left: 4px; font-family: var(--mono);
  font-size: 11px; color: var(--knu); font-weight: 700;
}
.sortable-header { cursor: pointer; user-select: none; }
.sortable-header:hover { background: var(--bg-warm); }

/* =====================================================================
   Data layout: sidebar + main (ir-data-body / ir-data-sidebar / ir-data-main)
   ===================================================================== */
.ir-data-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-5);
  align-items: start;
  transition: grid-template-columns .22s ease;
}
/* 데스크탑(>1024px): 필터가 접히면 사이드바가 가로로 좁아져서 표가 더 넓어짐.
   :has() + JS 클래스 둘 다 사용 (브라우저 호환성 안전망) */
.ir-data-body.has-collapsed-filter,
.ir-data-body:has(.ir-filter-panel.is-collapsed) {
  grid-template-columns: 44px 1fr;
}
@media (max-width: 1024px) {
  /* 태블릿/모바일은 stack — 접기는 위/아래 방향(콘텐츠 hide) */
  .ir-data-body,
  .ir-data-body.has-collapsed-filter,
  .ir-data-body:has(.ir-filter-panel.is-collapsed) {
    grid-template-columns: 1fr;
  }
}

.ir-data-sidebar {
  position: sticky;
  top: var(--s-4);
  align-self: start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.ir-data-sidebar::-webkit-scrollbar { width: 6px; }
.ir-data-sidebar::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }

.ir-data-main { min-width: 0; } /* prevent grid overflow blow-out */

/* ---- Filter panel ---- */
.ir-filter-panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: var(--s-4);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.ir-filter-panel:empty {
  min-height: 140px;
  position: relative;
  border-style: dashed;
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(14,23,38,.02) 8px 16px);
}
.ir-filter-panel:empty::before {
  content: "필터를 준비 중입니다…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-mute);
  font-family: var(--sans);
  letter-spacing: .02em;
}

/* Header row: title + reset */
.ir-filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
}
.ir-filter-panel__title {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ir-filter-panel__count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--knu);
  background: var(--knu-soft);
  padding: 1px 6px;
  border-radius: var(--r-pill);
}
.ir-filter-panel__actions {
  display: inline-flex; align-items: center; gap: 8px;
}
/* 패널 접기 토글 — 헤더 왼쪽 ▾/▸ 아이콘 */
.ir-filter-panel__collapse {
  background: none; border: 0; padding: 0 4px 0 0;
  font-size: 14px; line-height: 1; cursor: pointer;
  color: var(--ink-mute);
  transition: color .15s ease;
}
.ir-filter-panel__collapse:hover { color: var(--knu); }

/* 접힘 공통: 콘텐츠 영역(chips + section + 그룹) 숨김. 헤더 버튼은 노출 유지. */
.ir-filter-panel.is-collapsed .ir-filter-panel__content { display: none; }
.ir-filter-panel.is-collapsed .ir-filter-panel__head {
  margin-bottom: 0; padding-bottom: 0; border-bottom: 0;
}

/* ── 모바일/태블릿(≤1024px) 한정: 접히면 한 줄짜리 슬림 바로 변신.
   목적: 필터가 접혀 있을 때 세로 공간 거의 0 으로 만들어서 표가 즉시 보이도록. ── */
@media (max-width: 1024px) {
  .ir-filter-panel.is-collapsed {
    padding: 4px 10px !important;
    min-height: 0 !important;
    max-height: none !important;
    cursor: pointer;
    background: var(--surface);
    border: 1px solid var(--hairline);
  }
  .ir-filter-panel.is-collapsed .ir-filter-panel__head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px;
    margin: 0; padding: 0; border: 0;
    min-height: 30px;
  }
  .ir-filter-panel.is-collapsed .ir-filter-panel__title {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0; padding: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    color: var(--ink);
  }
  .ir-filter-panel.is-collapsed .ir-filter-panel__title-text { display: inline !important; }
  .ir-filter-panel.is-collapsed .ir-filter-panel__count { display: inline-flex !important; }
  .ir-filter-panel.is-collapsed .ir-filter-panel__collapse {
    font-size: 14px; color: var(--ink-mute); padding: 0;
  }
  /* 접힌 상태에선 적용/초기화 버튼 숨김 — 펼쳐야 의미 있음 */
  .ir-filter-panel.is-collapsed .ir-filter-panel__actions { display: none !important; }
  /* 접힘 상태에서 ::after vertical 라벨은 모바일에선 표시하지 않음 */
  .ir-filter-panel.is-collapsed::after { display: none !important; }
}

/* ── 데스크탑(>1024px) 한정: 가로로 접혀 사이드바가 좁은 strip 이 됨 ── */
@media (min-width: 1025px) {
  .ir-filter-panel.is-collapsed {
    padding: 12px 0;
    cursor: pointer;
    min-height: 200px;
    /* 내부 요소들을 세로로 가운데 정렬 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* 헤더는 토글 버튼만 보이도록 단순화 */
  .ir-filter-panel.is-collapsed .ir-filter-panel__head {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    text-align: center;
  }
  .ir-filter-panel.is-collapsed .ir-filter-panel__title {
    display: block;
    margin: 0;
    padding: 0;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
  }
  /* "필터" 라벨 / 카운트 배지 / 적용·초기화 — 접힘 시 숨김 */
  .ir-filter-panel.is-collapsed .ir-filter-panel__title-text,
  .ir-filter-panel.is-collapsed .ir-filter-panel__count,
  .ir-filter-panel.is-collapsed .ir-filter-panel__actions { display: none; }
  /* 토글 버튼만 보이도록 — 세로 가운데, 큼직하게 */
  .ir-filter-panel.is-collapsed .ir-filter-panel__collapse {
    display: inline-block;
    font-size: 16px;
    padding: 4px 6px;
    margin: 0;
    color: var(--ink-mute);
  }
  .ir-filter-panel.is-collapsed .ir-filter-panel__collapse:hover { color: var(--knu); }
  /* 세로 "필터" 라벨 — strip 가운데 아래쪽에 데코레이션처럼 */
  .ir-filter-panel.is-collapsed::after {
    content: "필 터";
    display: block;
    writing-mode: vertical-rl;
    color: var(--ink-mute);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-top: 14px;
    text-align: center;
  }
  .ir-filter-panel.is-collapsed:hover::after { color: var(--knu); }
}
.ir-filter-panel__reset {
  background: none; border: 0; padding: 0;
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-mute); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.ir-filter-panel__reset:hover { color: var(--ink); }
.ir-filter-panel__apply {
  background: var(--knu, #c00);
  color: #fff;
  border: 0;
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--r-1);
}
.ir-filter-panel__apply:hover { background: var(--knu-deep, #8b0000); }
/* 변경된 필터가 있을 때 — 더 밝은 KNU 빨강 + 펄스 */
.ir-filter-panel__apply.is-pending {
  background: #d92020;
  animation: irApplyPulse 1.4s ease-in-out infinite;
}
@keyframes irApplyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 0, 0, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(192, 0, 0, 0); }
}

/* Active chips area */
.ir-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 var(--s-3);
  min-height: 0;
}
.ir-filter-chips:empty { display: none; }

/* 자주 사용하는 필터 / 전체 필터 섹션 헤더 */
.ir-filter-section-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--knu);
  padding: 6px 0 4px;
  margin: var(--s-3) 0 var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.ir-filter-section-head:first-of-type { margin-top: 0; }
/* "전체 필터" 섹션 헤더는 톤 다운 */
.ir-filter-section-head + * { margin-top: var(--s-2); }
.ir-filter-section-head ~ .ir-filter-section-head { color: var(--ink-mute); }
/* 주요 필터 그룹의 레전드에 작은 별 표식 */
.ir-filter-group--favorite > .ir-filter-group__legend > span:first-child::before {
  content: "★ ";
  color: var(--knu);
  font-size: 10px;
}

/* 클릭 안내 힌트 — Paper 페이지 외에 JCR 등에서도 같은 스타일로 재사용 */
.paper-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-warm, #FFF7E6);
  border-left: 3px solid var(--knu, #c00);
  color: var(--knu, #c00);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .2px;
}
.paper-hint::before { content: "👆"; font-size: 14px; }
.paper-hint.paper-hint--guest::before { content: "🔒"; }
.paper-hint.paper-hint--guest {
  background: #FFF7E6;
  border-left-color: var(--knu);
  color: var(--knu);
}

/* 필터 → URL 새로고침 사이 시각적 깜빡임 완화.
   1) View Transitions API (Chrome 126+) — 페이지 전환 시 자동 크로스페이드. */
@view-transition { navigation: auto; }

/* 2) Fallback — 새로고침 직전 .is-syncing 클래스가 부여되면 메인 영역을
      살짝 흐리게 + 마우스 클릭 차단. 새 페이지가 로드되면 자연스럽게 사라짐. */
.ir-data-main.is-syncing, main.page.is-syncing {
  opacity: .55;
  filter: blur(0.5px);
  pointer-events: none;
  transition: opacity .18s ease, filter .18s ease;
}
body.ir-syncing { cursor: progress; }
.ir-filter-chips .chip-clear {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  background: var(--bg-warm); color: var(--ink-soft);
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
}
.ir-filter-chips .chip-clear .x {
  cursor: pointer; color: var(--ink-mute); font-size: 13px; line-height: 1;
}
.ir-filter-chips .chip-clear .x:hover { color: var(--knu); }

/* Filter group (one per column) */
.ir-filter-group {
  border: none;
  padding: 0;
  margin: 0 0 var(--s-4);
}
.ir-filter-group:last-child { margin-bottom: 0; }
.ir-filter-group__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  width: 100%;
}
.ir-filter-group__chev {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  transition: transform .15s;
}
.ir-filter-group.is-collapsed .ir-filter-group__chev { transform: rotate(-90deg); }
.ir-filter-group.is-collapsed .ir-filter-group__body { display: none; }
.ir-filter-group__body { padding-top: var(--s-2); }

/* Inputs inside filter groups */
.ir-filter-group input[type="text"],
.ir-filter-group input[type="number"],
.ir-filter-group input[type="search"],
.ir-filter-group select {
  width: 100%;
  padding: 6px 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  transition: border-color .12s, box-shadow .12s;
}
.ir-filter-group input:focus,
.ir-filter-group select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(14,23,38,.06);
}

/* Range row */
.ir-filter-range {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ir-filter-range input { flex: 1 1 60px; min-width: 0; }
.ir-filter-range .sep {
  color: var(--ink-mute);
  font-size: 12px;
  flex-shrink: 0;
  font-family: var(--mono);
}
/* 연산자 선택 (≥ / = / ≤ / 범위) */
.ir-filter-range__op {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-1);
  font-family: var(--sans);
}
.ir-filter-range__op:focus { outline: none; border-color: var(--knu); }

/* Operator pill row (e.g. > / ≥ / = ) */
.ir-filter-ops {
  display: inline-flex;
  margin-bottom: 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  overflow: hidden;
}
.ir-filter-ops button {
  background: var(--surface); border: 0;
  padding: 4px 8px; font-size: 11px; font-family: var(--mono);
  color: var(--ink-soft); cursor: pointer;
  border-right: 1px solid var(--hairline);
}
.ir-filter-ops button:last-child { border-right: 0; }
.ir-filter-ops button.is-active {
  background: var(--ink); color: #fff;
}

/* Footer (clear/apply if needed) */
.ir-filter-panel__footer {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.ir-filter-panel__footer button {
  flex: 1;
  padding: 7px 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: all .12s;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-soft);
}
.ir-filter-panel__footer button:hover { background: var(--bg-warm); color: var(--ink); }
.ir-filter-panel__footer button.primary {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.ir-filter-panel__footer button.primary:hover { background: #1d2a44; }

/* ---- Legacy class shim ---- */
.ir-filter-panel .filter-group     { margin: 0 0 var(--s-4); }
.ir-filter-panel .filter-group-title { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: var(--s-2); }
.ir-filter-panel .filter-options   { max-height: 220px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.ir-filter-panel .filter-options::-webkit-scrollbar { width: 6px; }
.ir-filter-panel .filter-options::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }

/* ---- Cell text + overflow icon ---- */
.cell-text {
  display: inline-block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
td.has-overflow .info-icon { display: inline-flex; }
/* 공통 info-icon — JCR 표 안 톤에 맞춰: cream 배경 + 회색 텍스트 + hairline 테두리.
   마우스오버 시 KNU 빨강 텍스트/테두리. 부모의 text-transform/font-style 영향 차단. */
.info-icon {
  display: none;
  align-items: center; justify-content: center;
  width: 14px; height: 14px;
  margin-left: 4px;
  background: var(--bg-warm, #F1ECE2);
  color: var(--ink-mute, #6B7280);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-style: normal !important;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none !important;
  border-radius: 50%;
  border: 1px solid var(--hairline, #E0DDD3);
  vertical-align: middle;
  cursor: help;
  user-select: none;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.info-icon:hover {
  color: var(--knu, #c00);
  border-color: var(--knu, #c00);
  background: #fff;
}
th .info-icon { display: inline-flex; }

/* info-icon 클릭 시 표시되는 팝오버 — JS 가 document.body 에 append 하고 position:fixed 로 배치.
   표/모달의 overflow/stacking 영향을 받지 않음. 색상은 은은한 cream + KNU 테두리. */
.info-popover {
  position: fixed;
  transform: translateX(-50%);
  background: var(--bg-warm, #F7F2E6);
  color: var(--ink, #1A1A1A);
  padding: 8px 12px;
  border: 1.5px solid var(--knu, #C8102E);
  border-radius: 4px;
  font-family: var(--sans, sans-serif);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
  min-width: 200px;
  max-width: 320px;
  z-index: 2000;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  pointer-events: none;
}
/* 작은 삼각형 화살표 — 기본은 위쪽(팝오버 위), .placement=above 면 아래쪽으로 뒤집기 */
.info-popover::before,
.info-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0; height: 0;
  border-style: solid;
}
.info-popover::before {
  /* 외곽선 (KNU 빨강) */
  top: -8px;
  border-width: 0 7px 8px 7px;
  border-color: transparent transparent var(--knu, #C8102E) transparent;
  transform: translateX(-50%);
}
.info-popover::after {
  /* 내부 채움 (cream) — 한 픽셀 작게 겹쳐 두께 표현 */
  top: -6px;
  border-width: 0 6px 7px 6px;
  border-color: transparent transparent var(--bg-warm, #F7F2E6) transparent;
  transform: translateX(-50%);
}
/* 팝오버가 아이콘 위쪽에 배치되면 화살표를 아래로 뒤집기 */
.info-popover[data-placement="above"]::before {
  top: auto; bottom: -8px;
  border-width: 8px 7px 0 7px;
  border-color: var(--knu, #C8102E) transparent transparent transparent;
}
.info-popover[data-placement="above"]::after {
  top: auto; bottom: -6px;
  border-width: 7px 6px 0 6px;
  border-color: var(--bg-warm, #F7F2E6) transparent transparent transparent;
}
.multi-line-cell .cell-text { white-space: normal; }

/* ---- Hover tooltip (created via JS) ---- */
.hover-tooltip {
  position: absolute; z-index: 9999;
  background: var(--ink); color: #fff;
  padding: 8px 12px; border-radius: var(--r-3);
  font-size: 13px; line-height: 1.4; max-width: 320px;
  box-shadow: var(--shadow-2);
  pointer-events: none;
}

/* ---- ir-table-link → minimal link ---- */
.ir-table-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--r-1);
  color: var(--knu); text-decoration: none;
  font-family: var(--mono); font-size: 14px;
}
.ir-table-link:hover { background: var(--bg-warm); }

/* ---- Pagination legacy prev / next arrows ---- */
.pagination .prev::before { content: '‹  '; }
.pagination .next::after  { content: '  ›'; }

/* ---- Glossary modal ---- */
.glossary-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(20, 20, 22, .55);
  z-index: 1000; align-items: center; justify-content: center;
  padding: var(--s-4);
}
.glossary-modal.is-open,
.glossary-modal.active { display: flex; }
.glossary-modal-content {
  background: var(--surface); width: min(820px, 100%); max-height: 86vh;
  border-radius: var(--r-3); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; overflow: hidden;
}
.glossary-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hairline);
}
.glossary-modal-title {
  margin: 0; font-family: var(--serif); font-weight: 500; font-size: 20px;
}
.glossary-modal-close {
  background: transparent; border: 0; font-size: 24px; line-height: 1;
  color: var(--ink-mute); cursor: pointer; padding: 4px 8px;
}
.glossary-modal-close:hover { color: var(--ink); }
.glossary-search-box { padding: var(--s-3) var(--s-4) 0; }
.glossary-search-input {
  width: 100%; padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--hairline); border-radius: var(--r-1);
  background: var(--bg);
}
.glossary-search-input:focus { outline: none; border-color: var(--knu); }
.glossary-modal-body { padding: var(--s-3) var(--s-4) var(--s-4); overflow: auto; }
.glossary-table .term-name { white-space: nowrap; }

/* ---- Old dashboard `chart-card` / `custom-btn` aliases ---- */
.chart-card { /* alias of .chart */ }
.custom-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; font-size: 13px;
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--ink-soft); border-radius: var(--r-1);
  cursor: pointer; font-weight: 500;
}
.custom-btn:hover { background: var(--bg-warm); color: var(--ink); }

/* ---- Stat cards (legacy dashboard) ---- */
.stat-card {
  background: var(--surface); padding: var(--s-4);
  border: 1px solid var(--hairline);
}
.stat-icon { display: none; } /* the new system favors numbers, not gradient icons */
.stat-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px;
  color: var(--ink-mute); text-transform: uppercase;
}
.stat-value {
  font-family: var(--mono); font-size: 28px; font-weight: 500;
  letter-spacing: -.5px; color: var(--ink); margin-top: var(--s-1);
}

/* ---- Update badge ---- */
.update-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-mute); margin-top: var(--s-2);
}

/* =====================================================================
   Filter option list (checkbox / radio rows inside .ir-filter-group)
   ===================================================================== */
.ir-filter-options {
  max-height: 220px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
}
.ir-filter-options::-webkit-scrollbar { width: 6px; }
.ir-filter-options::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }
.ir-filter-options::-webkit-scrollbar-thumb:hover { background: var(--hairline-2); }

.ir-filter-options label,
.ir-filter-group__body label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: var(--r-1);
  transition: background .12s;
  line-height: 1.3;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.ir-filter-options label:hover,
.ir-filter-group__body label:hover { background: var(--bg-warm); color: var(--ink); }
.ir-filter-options label input[type="checkbox"],
.ir-filter-options label input[type="radio"],
.ir-filter-group__body label input[type="checkbox"],
.ir-filter-group__body label input[type="radio"] {
  width: 14px; height: 14px;
  accent-color: var(--knu);
  margin: 0; flex-shrink: 0;
}
.ir-filter-options label .lab,
.ir-filter-group__body label .lab {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ir-filter-options label .cnt,
.ir-filter-group__body label .cnt {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 4px;
}
.ir-filter-options label.is-checked { color: var(--ink); font-weight: 500; }

/* Search-within-group input (for long option lists) */
.ir-filter-group__search {
  position: relative;
  margin-bottom: 6px;
}
.ir-filter-group__search input {
  padding-left: 24px !important;
  font-size: 12px !important;
}
.ir-filter-group__search::before {
  content: "⌕";
  position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--ink-mute);
  pointer-events: none;
}

/* =====================================================================
   Table cell ellipsis + info-icon (per-column max-widths via data attrs)
   ===================================================================== */
.tbl { table-layout: auto; }
.tbl th, .tbl td { vertical-align: middle; }
.tbl td .cell-text {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  line-height: 1.3;
}
/* has-overflow 셀: 텍스트와 info-icon 이 같은 줄에 머물도록 셀 자체를 nowrap 하고,
   cell-text 는 info-icon 폭(아이콘 14px + margin 6~8px = ~22px) 만큼을 미리 양보. */
.tbl td.has-overflow {
  white-space: nowrap;
}
.tbl td.has-overflow .cell-text {
  max-width: calc(100% - 22px);
}
.tbl td.has-overflow .info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 4px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--ink-mute); background: var(--bg-warm);
  border-radius: 50%; cursor: help; flex-shrink: 0;
  vertical-align: middle;
  border: 1px solid var(--hairline);
}
.tbl td.has-overflow .info-icon:hover { color: var(--knu); border-color: var(--knu); }
.tbl td .cell-wrap {
  display: inline-flex; align-items: center;
  max-width: 100%;
  width: 100%;
}

/* Width hints — tables can declare via class on th/td */
.col-narrow   { max-width: 80px;  width: 80px;  }
.col-rank     { max-width: 60px;  width: 60px;  }
.col-year     { max-width: 80px;  width: 80px;  }
.col-num      { max-width: 100px; width: 100px; }
.col-id       { max-width: 110px; width: 110px; }
.col-short    { max-width: 140px; }
.col-medium   { max-width: 220px; }
.col-long     { max-width: 320px; }
.col-xlong    { max-width: 420px; }
.col-flex     { max-width: 100%; }

.col-narrow .cell-text,
.col-rank .cell-text,
.col-year .cell-text,
.col-num .cell-text,
.col-id .cell-text,
.col-short .cell-text,
.col-medium .cell-text,
.col-long .cell-text,
.col-xlong .cell-text { display: block; }

/* Sortable header: arrow only, no text input */
.tbl th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  white-space: nowrap;
}
.tbl th.sortable:hover { background: var(--bg-warm); }
.tbl th.sortable .sort-ind {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  width: 10px;
  text-align: center;
}
.tbl th.sortable[data-sort="asc"]  .sort-ind::before { content: "▲"; color: var(--knu); }
.tbl th.sortable[data-sort="desc"] .sort-ind::before { content: "▼"; color: var(--knu); }
.tbl th.sortable:not([data-sort])  .sort-ind::before { content: "⇵"; }
.tbl th .info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 4px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--ink-mute); background: transparent;
  border-radius: 50%; cursor: help;
  border: 1px solid var(--hairline);
  vertical-align: middle;
}

/* =====================================================================
   Chat dock (popup window opened by .chat-fab__btn)
   ===================================================================== */
.chat-dock {
  position: fixed;
  right: 96px;
  bottom: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 80px);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  display: none;
  flex-direction: column;
  z-index: 999;
  overflow: hidden;
  font-family: var(--sans);
}
.chat-dock.is-open { display: flex; }

.chat-dock__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--ink); color: #fff;
  border-bottom: 1px solid var(--ink);
}
.chat-dock__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--knu) 0%, var(--knu-deep) 100%);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px; font-weight: 600;
  flex-shrink: 0;
}
.chat-dock__title { flex: 1; min-width: 0; }
.chat-dock__name {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.1px;
  display: flex; align-items: center; gap: 6px;
}
.chat-dock__name::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pos); box-shadow: 0 0 0 2px var(--ink);
}
.chat-dock__sub {
  font-size: 11px; color: var(--dark-mute);
  font-family: var(--mono); margin-top: 1px;
  letter-spacing: .3px;
}
.chat-dock__close {
  background: transparent; border: 0; color: rgba(255,255,255,.7);
  font-size: 22px; line-height: 1; padding: 0 4px;
  cursor: pointer;
}
.chat-dock__close:hover { color: #fff; }

.chat-dock__body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: var(--s-4);
  background: var(--bg);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.chat-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--r-3);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg--bot {
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: var(--r-1);
}
.chat-msg--user {
  background: var(--ink);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: var(--r-1);
}
.chat-msg--meta {
  align-self: center;
  font-size: 11px; color: var(--ink-mute);
  font-family: var(--mono); letter-spacing: .3px;
  background: transparent; padding: 0;
}
.chat-typing {
  align-self: flex-start;
  display: inline-flex; gap: 3px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
}
.chat-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-faint);
  animation: chat-bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce {
  0%,80%,100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-3px); opacity: 1; }
}

.chat-dock__suggest {
  padding: 8px var(--s-4);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.chat-dock__suggest button {
  background: var(--bg-warm);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--sans);
}
.chat-dock__suggest button:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }

.chat-dock__input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}
.chat-dock__input {
  flex: 1;
  resize: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: 8px 10px;
  font-family: var(--sans); font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
  min-height: 36px; max-height: 120px;
  outline: none;
}
.chat-dock__input:focus { border-color: var(--ink); background: var(--surface); }
.chat-dock__send {
  background: var(--ink); color: #fff; border: 0;
  width: 36px; height: 36px;
  border-radius: var(--r-2);
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.chat-dock__send:hover { background: var(--knu); }
.chat-dock__send svg { width: 16px; height: 16px; }

/* JCR-specific tweaks */
.jcr-quartile-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  border-radius: var(--r-pill);
  letter-spacing: .3px;
}
.jcr-quartile-pill.q1 { background: var(--pos); color: #fff; }
.jcr-quartile-pill.q2 { background: #5BA67E; color: #fff; }
.jcr-quartile-pill.q3 { background: var(--warn); color: #fff; }
.jcr-quartile-pill.q4 { background: var(--hairline); color: var(--ink-soft); }

/* ============================================================
   Author popup table — Paper / JCR detail 두 페이지 공통
   ============================================================ */
.author-table {
    border-collapse: collapse;
    font-size: 12.5px;
    table-layout: fixed;
    min-width: 100%;
    width: max-content;
}
.author-table th, .author-table td {
    border-bottom: 1px solid var(--hairline, #eee);
    padding: 6px 6px; text-align: left; vertical-align: middle;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.author-table th {
    background: var(--surface-soft, #fafafa);
    font-weight: 600; position: sticky; top: 0; text-align: center;
}
.author-table col.at-num     { width: 40px; }
.author-table col.at-name    { width: 130px; }
.author-table col.at-role    { width: 70px; }
.author-table col.at-person  { width: 80px; }
.author-table col.at-unit1   { width: 110px; }
.author-table col.at-unit2   { width: 110px; }
.author-table col.at-rid     { width: 110px; }
.author-table col.at-aid     { width: 100px; }
.author-table col.at-orcid   { width: 145px; }
.author-table col.at-email   { width: 160px; }
.author-table col.at-paddr   { width: 64px; }
.author-table col.at-address { width: 420px; }
.author-table td.at-address,
.author-table th.at-address {
    vertical-align: middle !important;
    white-space: normal; line-height: 1.5;
    min-width: 360px;
}
.author-table.is-compact col.at-address { width: 780px; }
.author-table.is-compact td.at-address  { min-width: 780px; }
.author-table.is-compact th.at-address  { min-width: 780px; }
.author-table.is-compact col.at-rid,
.author-table.is-compact col.at-aid,
.author-table.is-compact col.at-orcid,
.author-table.is-compact col.at-paddr { width: 0; }
.author-table.is-compact th.at-rid,
.author-table.is-compact th.at-aid,
.author-table.is-compact th.at-orcid,
.author-table.is-compact th.at-paddr,
.author-table.is-compact td.at-rid,
.author-table.is-compact td.at-aid,
.author-table.is-compact td.at-orcid,
.author-table.is-compact td.at-paddr { display: none; }
.author-table td.at-num     { text-align: center; font-variant-numeric: tabular-nums; }
.author-table td.at-role,
.author-table td.at-person,
.author-table td.at-unit1,
.author-table td.at-unit2,
.author-table td.at-rid,
.author-table td.at-aid,
.author-table td.at-orcid,
.author-table td.at-email,
.author-table td.at-paddr   { text-align: center; }
.author-table td.at-rid,
.author-table td.at-aid,
.author-table td.at-orcid   { font-family: var(--mono); }
.author-table td.at-paddr,
.author-table td.at-address {
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.4;
}
.author-table td.at-paddr { vertical-align: top; font-variant-numeric: tabular-nums; }
.author-table td.at-paddr .addr-line,
.author-table td.at-address .addr-line {
    padding: 4px 0; box-sizing: border-box;
}
.author-table td.at-paddr .addr-line {
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.author-table td.at-paddr .addr-line + .addr-line,
.author-table td.at-address .addr-line + .addr-line {
    border-top: 1px dashed var(--hairline-2, #eee); margin-top: 2px;
}
.author-role--primary { color: var(--knu, #c00); font-weight: 600; }

/* 상단 메뉴 — guest 가 staff 전용 메뉴에 호버하면 잠금 힌트 */
.topbar__nav a.is-locked { color: var(--ink-mute); }
.topbar__nav a.is-locked:hover { color: var(--knu); }

/* ============================================================
   Global profile-modal — 로그인 / 내 정보 수정 / 제보 등에서 공통 사용
   ============================================================ */
.profile-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
}
.profile-modal[hidden] { display: none; }
.profile-modal__panel {
  width: min(420px, 92vw);
  background: var(--surface, #fff);
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 36px rgba(0,0,0,.12);
}
.profile-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.profile-modal__close {
  background: transparent; border: 0; font-size: 20px; cursor: pointer; line-height: 1;
  color: var(--ink-mute);
}
.profile-modal__close:hover { color: var(--knu); }
.profile-modal__form {
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.profile-modal__form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--ink-soft);
}
.profile-modal__form label > span:first-child { font-weight: 600; color: var(--ink); }
.profile-modal__form input,
.profile-modal__form select,
.profile-modal__form textarea {
  padding: 8px 10px; border: 1px solid var(--hairline); font-size: 13.5px;
  background: var(--surface); color: var(--ink); outline: none;
  font-family: var(--sans);
}
.profile-modal__form input:focus,
.profile-modal__form select:focus,
.profile-modal__form textarea:focus { border-color: var(--knu); }
.profile-modal__form textarea { resize: vertical; min-height: 80px; }
.profile-modal__form input[type="file"] {
  padding: 6px 8px; background: var(--surface);
}
.profile-modal__hr { height: 1px; background: var(--hairline); margin: 2px 0; }
.profile-modal__actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px;
}
.profile-modal__error  {
  margin: 0 18px; padding: 8px 12px;
  background: #FFF4F4; border: 1px solid #E0626E; color: #B02020;
  font-size: 12.5px;
}
.profile-modal__notice {
  margin: 0 18px; padding: 8px 12px;
  background: #F0FFF4; border: 1px solid #6BC890; color: #1F7A3E;
  font-size: 12.5px;
}
.profile-modal__flash { transition: opacity .25s ease; }
.profile-modal__flash.is-fading { opacity: 0; }

/* ============================================================
   Responsive layer · 2026.05
   ----------------------------------------------------------------
   Breakpoints (mobile-first overrides):
     1024px  : 태블릿 가로 — 필터 사이드바 스택, KPI 5→3열
     768px   : 태블릿 세로 / 큰 폰 가로 — 상단 메뉴 햄버거, KPI 3→2열
     480px   : 스마트폰 세로 — 모달 풀스크린, KPI 2→1열, 표 폰트 압축
   ============================================================ */

/* ---- 1024px : 태블릿 가로 ---- */
@media (max-width: 1024px) {
  /* KPI 5열 → 3열 */
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  /* 푸터 메타 3열 → 2열 */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  /* 상단 네비 폰트 살짝 압축 */
  .topbar__nav { gap: 14px; }
  .topbar__nav a { font-size: 13.5px; }
  /* 표 wrapper 가로 스크롤 보조 — 잘림 방지 + 손가락 끌기 */
  .table-wrapper { -webkit-overflow-scrolling: touch; }
}

/* ---- 768px : 폰 가로 / 좁은 태블릿 ---- */
@media (max-width: 768px) {
  /* 상단 네비는 항상 노출 — 줄바꿈으로 받음. 햄버거 토글은 사용 안 함.
     데스크탑의 height:64px 고정을 풀어 메뉴가 늘면 헤더도 함께 커지도록. */
  .topbar {
    height: auto;
    min-height: 56px;
    padding: 10px 14px 12px;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
  }
  .topbar__brand-name { font-size: 14.5px; }
  .topbar__brand-sub  { display: none; }   /* "Institutional Research" 보조 줄 숨김 */
  .topbar__brand-logo { height: 36px; }

  /* 모바일 시각 순서: brand(0) · actions(1) · nav(2, 둘째 줄에 풀폭 wrap) */
  .topbar__brand    { order: 0; }
  .topbar__actions  { order: 1; margin-left: auto; }
  .topbar__nav-toggle { display: none !important; }   /* 햄버거는 모든 폭에서 숨김 */
  .topbar__nav      {
    order: 2;
    flex-basis: 100%;
    flex-wrap: wrap;       /* 항목이 줄을 넘으면 다음 줄로 */
    gap: 4px 6px;
    border-top: 1px solid var(--hairline);
    margin-top: 6px;
    padding-top: 6px;
  }
  .topbar__nav a {
    padding: 5px 9px;
    font-size: 13px;
    border-radius: var(--r-1, 4px);
  }
  .topbar__nav a.is-active {
    background: var(--knu-soft, #FCEBEE);
    color: var(--knu);
    border-bottom-color: transparent;
  }

  /* 우측 사용자/로그인 버튼 — 작게 */
  .account-trigger { font-size: 12.5px; padding: 4px 8px; }
  .account-trigger__chev { display: none; }

  /* KPI 3 → 2 */
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  /* 데이터 페이지: 필터 사이드바를 가로폭 전부, 접이식 패널화 */
  .ir-data-body { grid-template-columns: 1fr; gap: var(--s-3); }
  .ir-data-sidebar {
    position: static;
    background: var(--surface);
    border: 1px solid var(--hairline);
  }
  /* 페이지에 .filter-toggle 버튼이 있으면 활성 — 없으면 그냥 표시 */
  .ir-filter-panel { max-height: 60vh; overflow: auto; }

  /* 표 행 클릭 안내(.paper-hint) 등 inline 칩들이 줄바꿈되도록 */
  .sort-controls { gap: 6px !important; padding: 10px !important; }
  .paper-hint { font-size: 11.5px; padding: 3px 8px; }

  /* 헤더 우상단 인디케이터 — 길면 줄바꿈 */
  .page__head { gap: var(--s-2) !important; }

  /* 모달 — 90vw 까지 펼침. 안의 표는 가로 스크롤 유지 */
  .author-modal__panel, .jcr-papers-modal__panel,
  .profile-modal__panel { width: min(720px, 94vw) !important; }

  /* 홈 hero 텍스트 톤 다운 */
  .t-display { font-size: clamp(32px, 7vw, 48px) !important; line-height: 1.15; }
  .t-h1      { font-size: clamp(22px, 5vw, 30px) !important; }
}

/* ---- 480px : 스마트폰 세로 ---- */
@media (max-width: 480px) {
  .topbar__brand-name { font-size: 13.5px; }
  .topbar__brand-logo { height: 30px; }

  /* KPI 2 → 1 */
  .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr !important; }

  /* 데이터 표 폰트 압축 (가로 스크롤은 유지) */
  .tbl, .author-table, .jcr-papers-table { font-size: 11.5px; }
  .tbl thead th, .tbl tbody td { padding: 4px 6px; }

  /* 모달 풀스크린에 가까운 폭 */
  .author-modal__panel, .jcr-papers-modal__panel,
  .profile-modal__panel { width: 96vw !important; max-height: 92vh !important; }

  /* 페이지 헤더 데이터 인디케이터 — 좌측 정렬로 전환 (긴 텍스트 보호) */
  .page__head > p[aria-live="polite"] {
    text-align: left !important;
    width: 100%;
  }

  /* 챗봇 FAB — 너무 크지 않게 */
  .chat-fab { bottom: 12px; right: 12px; }
  .chat-fab__btn { width: 48px; height: 48px; }
  .chat-fab__tooltip { display: none; }   /* 모바일에선 호버 툴팁 제거 */

  /* 페이지네이션 칩 — 한 줄 가득 */
  .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .pagination .chip { padding: 4px 8px; font-size: 12px; }
}

/* ---- 햄버거 버튼 (모바일 전용 위젯; 데스크탑에선 숨김) ---- */
.topbar__nav-toggle {
  display: none;
  background: none; border: 1px solid var(--hairline);
  width: 36px; height: 36px;
  border-radius: var(--r-1);
  cursor: pointer;
  align-items: center; justify-content: center;
  margin-left: auto;
  padding: 0;
}
.topbar__nav-toggle:hover { background: var(--bg-warm); }
.topbar__nav-toggle__bars {
  display: inline-block; position: relative;
  width: 18px; height: 2px;
  background: var(--ink);
}
.topbar__nav-toggle__bars::before,
.topbar__nav-toggle__bars::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px;
  background: var(--ink);
}
.topbar__nav-toggle__bars::before { top: -6px; }
.topbar__nav-toggle__bars::after  { top:  6px; }