/* ============================================================
   IR_Web · Renewal Stylesheet (drop-in replacement for site.css)
   Editorial / Academic-grade · 2026.05
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* ----- 1. Design Tokens ------------------------------------ */
:root {
  /* Brand */
  --knu:        #C8102E;
  --knu-deep:   #8E0B20;
  --knu-soft:   #FCEBEE;

  /* Ink scale (light surfaces) */
  --ink:        #0E1726;
  --ink-soft:   #2D3748;
  --ink-mute:   #6B7280;
  --ink-faint:  #9AA3B2;

  /* Surfaces */
  --bg:         #F6F4EF;
  --bg-warm:    #F1ECE2;
  --surface:    #FFFFFF;
  --hairline:   #E0DDD3;
  --hairline-2: #C9C5B8;

  /* Status */
  --pos:        #1F8A5B;
  --neg:        #C93A3A;
  --warn:       #C8902E;
  --ai:         #2F5DA8;
  --ai-soft:    #EAF0FA;

  /* Dark dashboard tier */
  --dark-bg:    #0A1226;
  --dark-card:  #111A30;
  --dark-line:  #1B2740;
  --dark-ink:   #E7ECF3;
  --dark-mute:  #8693A8;

  /* Type */
  --serif:      "Source Serif 4", "Noto Serif KR", Georgia, serif;
  --sans:       "Pretendard", -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif;
  --mono:       "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* Radii (used sparingly — editorial style favors sharp corners) */
  --r-1: 2px;  --r-2: 4px;  --r-3: 6px;  --r-pill: 999px;

  /* Shadow (very restrained) */
  --shadow-1: 0 1px 2px rgba(14,23,38,.04);
  --shadow-2: 0 4px 12px rgba(14,23,38,.08);
  --shadow-3: 0 12px 28px rgba(14,23,38,.18), 0 2px 6px rgba(14,23,38,.10);
}

/* ----- 2. Reset & Base ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--knu); text-underline-offset: 3px; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s-8) 0; }

/* ----- 3. Typography --------------------------------------- */
.t-display     { font-family: var(--serif); font-weight: 500; font-size: 56px; line-height: 1.05; letter-spacing: -1px; }
.t-h1          { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.1;  letter-spacing: -.6px; }
.t-h2          { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.2;  letter-spacing: -.4px; }
.t-h3          { font-family: var(--sans);  font-weight: 600; font-size: 18px; line-height: 1.35; }
.t-body        { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.t-small       { font-size: 13.5px; color: var(--ink-mute); }
.t-meta        { font-size: 12px; color: var(--ink-mute); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.t-mono        { font-family: var(--mono); font-feature-settings: "tnum"; }
.t-num         { font-family: var(--mono); font-weight: 500; letter-spacing: -.3px; }
.t-italic      { font-style: italic; }

/* ----- 4. Layout primitives -------------------------------- */
.container     { max-width: 1280px; margin: 0 auto; padding: 0 var(--s-8); }
.container--narrow { max-width: 960px; margin: 0 auto; padding: 0 var(--s-8); }

.row           { display: flex; gap: var(--s-4); }
.row--between  { justify-content: space-between; align-items: center; }
.row--end      { justify-content: flex-end; align-items: center; }

.grid          { display: grid; gap: var(--s-4); }
.grid-2        { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.grid-3        { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.grid-4        { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.grid-5        { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

.hairline      { border-top: 1px solid var(--hairline); }
.hairline-l    { border-left: 1px solid var(--hairline); }

/* ----- 5. Top bar (global header) -------------------------- */
.topbar {
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center;
  padding: 0 var(--s-8);
  position: sticky; top: 0; z-index: 40;
}
.topbar__brand { display: flex; align-items: center; gap: var(--s-3); }
.topbar__brand-mark {
  width: 32px; height: 32px;
  background: var(--knu); color: #fff;
  font-family: var(--serif); font-weight: 600; font-size: 16px;
  display: grid; place-items: center;
}
/* KNU-IR-logo.png 의 원본 비율 (802 x 178 ≈ 4.5:1) 그대로 유지 — 가로 폭 자동.
   우측 부서명(serif 16px)과 시각적 무게가 맞도록 약간 크게. */
.topbar__brand-logo {
  height: 44px;
  width: auto;
  aspect-ratio: 802 / 178;
  object-fit: contain;
  display: block;
}
.topbar__brand-name {
  font-family: var(--serif); font-size: 16px; font-weight: 500;
  letter-spacing: -.2px;
}
.topbar__brand-sub {
  font-size: 12px; color: var(--ink-mute);
  margin-top: -2px; letter-spacing: .3px;
}
.topbar__nav {
  display: flex; gap: var(--s-6);
  margin-left: var(--s-10);
  font-size: 13.5px;
}
.topbar__nav a {
  color: var(--ink-soft); padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.topbar__nav a.is-active {
  color: var(--ink); border-bottom-color: var(--knu);
}
.topbar__nav a.is-disabled {
  color: var(--ink-mute);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.55;
}
.topbar__actions {
  margin-left: auto; display: flex; align-items: center; gap: var(--s-3);
  font-size: 13.5px; color: var(--ink-mute);
}

/* Dark variant */
.topbar--dark {
  background: var(--dark-bg);
  border-bottom-color: var(--dark-line);
}
.topbar--dark .topbar__brand-name,
.topbar--dark .topbar__nav a.is-active { color: var(--dark-ink); }
.topbar--dark .topbar__nav a { color: var(--dark-mute); }

/* ----- 6. Buttons ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--ink); border-radius: var(--r-2); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--ink); }
.btn--primary { background: var(--knu, #c00); color: #fff; border-color: var(--knu, #c00); }
.btn--primary:hover { background: var(--knu-deep, #8b0000); border-color: var(--knu-deep, #8b0000); }
.btn--accent  { background: var(--knu); color: #fff; border-color: var(--knu); }
.btn--ghost   { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn--sm      { padding: 5px 10px; font-size: 13px; }
/* MS Excel 브랜드 그린 — Excel 다운로드 전용 */
.btn--excel       { background: #107C41; color: #fff; border-color: #107C41; }
.btn--excel:hover { background: #0E6E39; border-color: #0E6E39; color: #fff; }
.btn--excel:visited { color: #fff; }
.btn--icon    { width: 32px; height: 32px; padding: 0; justify-content: center; }

/* ----- 7. Card / Panel ------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: var(--s-5);
}
/* 비활성 카드 — 클릭 막고 시각적 흐리게 */
a.panel.is-disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.2);
}
.panel__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-4);
}
.panel__eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px;
  color: var(--ink-mute); text-transform: uppercase;
}
.panel__title {
  font-size: 15px; font-weight: 600; margin: 2px 0 0;
}
.panel__meta {
  font-size: 12.5px; color: var(--ink-mute); margin-top: var(--s-3);
  font-family: var(--mono); padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}

/* ----- 8. KPI strip ---------------------------------------- */
.kpi-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
/* Dashboard 의 4개 핵심 지표 — 한 행에 4컬럼 균등 분배 */
.kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  margin-top: var(--s-4);
}
.kpi {
  padding: var(--s-5) var(--s-6);
  border-right: 1px solid var(--hairline);
}
.kpi:last-child { border-right: 0; }
.kpi__label { font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px;
              color: var(--ink-mute); text-transform: uppercase; }
.kpi__value { font-family: var(--mono); font-size: 28px; font-weight: 500;
              margin-top: var(--s-1); letter-spacing: -.5px; color: var(--ink); }
.kpi__delta { font-size: 12.5px; margin-top: var(--s-1); font-family: var(--mono); }
.kpi__delta--up   { color: var(--pos); }
.kpi__delta--down { color: var(--neg); }

/* ----- 9. Table -------------------------------------------- */
.tbl {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px; background: var(--surface);
  border: 1px solid var(--hairline);
}
.tbl thead tr.tbl__head {
  background: #FAFBFC; border-bottom: 2px solid var(--ink);
}
.tbl th {
  padding: 10px 12px; text-align: left;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-soft);
}
.tbl th.is-num, .tbl td.is-num { text-align: right; font-family: var(--mono); }
.tbl th.is-center, .tbl td.is-center { text-align: center; }
.tbl tbody tr { border-bottom: 1px solid var(--hairline); }
.tbl tbody tr:nth-child(even) { background: #FAFBFC; }
.tbl td { padding: 10px 12px; vertical-align: middle; }
.tbl__filter-row { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.tbl__filter-row th { padding: 6px 10px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tbl__filter-input {
  width: 100%; padding: 4px 8px; font-size: 12.5px;
  border: 1px solid var(--hairline); background: #FAFBFC;
  border-radius: var(--r-1); font-family: inherit; color: var(--ink-soft);
}

/* Info-icon (used on table headers, filters, KPI labels) */
.info-icon {
  display: inline-flex; width: 13px; height: 13px;
  border-radius: 50%; border: 1px solid var(--knu); color: var(--knu);
  font-family: Georgia, serif; font-style: italic; font-size: 9px; font-weight: 700;
  align-items: center; justify-content: center; margin-left: 4px; cursor: help;
  vertical-align: middle;
}
.info-icon--lg { width: 14px; height: 14px; font-size: 9.5px; }

/* ----- 10. Filter bar -------------------------------------- */
.filterbar {
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: var(--s-4);
  display: grid; grid-template-columns: repeat(5, 1fr) auto;
  gap: var(--s-4); align-items: end;
}
.filterbar__field { display: flex; flex-direction: column; gap: 6px; }
.filterbar__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 1px;
  color: var(--ink-mute); text-transform: uppercase;
  display: flex; align-items: center;
}
.filterbar__input {
  padding: 6px 10px; border: 1px solid var(--hairline);
  border-radius: var(--r-2); font-size: 13px; background: var(--surface);
  font-family: inherit; color: var(--ink);
}
.chip-group { display: flex; gap: 4px; }
.chip {
  padding: 5px 10px; font-size: 13px; border-radius: var(--r-1);
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; font-weight: 500;
}
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip--filter {
  font-size: 12.5px; padding: 3px 8px 3px 10px; border-radius: var(--r-pill);
  background: var(--bg-warm); color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip--filter .x { color: var(--ink-mute); cursor: pointer; }

/* Toggle */
.toggle {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--hairline-2); position: relative; cursor: pointer;
  transition: background .15s;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: left .15s;
}
.toggle.is-on { background: var(--knu); }
.toggle.is-on::after { left: 18px; }

/* ----- 11. Badges ------------------------------------------ */
.badge {
  display: inline-block; font-family: var(--mono);
  font-size: 11.5px; font-weight: 700;
  padding: 2px 6px; border-radius: var(--r-1);
}
.badge--q1   { background: var(--pos); color: #fff; }
.badge--q2   { background: #5BA67E; color: #fff; }
.badge--q3, .badge--q4 { background: var(--hairline); color: var(--ink-soft); }
.badge--top1 { border: 1px solid var(--knu); color: var(--knu); }
.badge--top  { border: 1px solid var(--hairline-2); color: var(--ink-soft); }

/* ----- 12. Charts (Chart.js + SVG helpers) ----------------- */
.chart {
  background: var(--surface); border: 1px solid var(--hairline);
  padding: var(--s-5);
}
.chart__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-3);
}
.chart__title { font-size: 15px; font-weight: 600; }
.chart__sub   { font-size: 12px; color: var(--ink-mute); margin-top: 2px;
                font-family: var(--mono); letter-spacing: .4px; }
.chart canvas { max-width: 100%; }

/* Chart.js global font configuration is set in chart-defaults.js,
   but these CSS vars are exported so JS can read them. */

/* ----- 13. Chat Assistant FAB (every page) ----------------- */
.chat-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: flex; align-items: flex-end; gap: 10px;
}
/* 챗봇 툴팁 — 은은한 cream 배경 + 어두운 텍스트 + KNU 빨강 테두리 */
.chat-fab__tooltip {
  background: var(--bg-warm, #F7F2E6); color: var(--ink);
  padding: 8px 12px; border-radius: var(--r-3);
  font-size: 13px; line-height: 1.45; max-width: 240px;
  box-shadow: var(--shadow-2); position: relative;
  border: 1.5px solid var(--knu);
}
.chat-fab__tooltip::before,
.chat-fab__tooltip::after {
  content: ""; position: absolute; right: -8px; bottom: 14px;
  width: 0; height: 0;
}
.chat-fab__tooltip::before {
  /* 테두리(빨강) 삼각형 */
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent var(--knu);
}
.chat-fab__tooltip::after {
  /* 내부 cream 삼각형 — 1.5px 안쪽으로 살짝 들여서 테두리 두께 표현 */
  right: -6px;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--bg-warm, #F7F2E6);
}
.chat-fab__tooltip strong { font-weight: 700; color: var(--knu); }
.chat-fab__tooltip-sub { font-size: 11.5px; color: var(--ink-mute); margin-top: 1px;
                         font-family: var(--mono); }

/* 챗봇 버튼 — 기본: KNU 빨강 채움 + 흰색 아이콘 / hover: 흰 배경 + KNU 빨강 아이콘 (outline) */
.chat-fab__btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--knu); color: #fff; border: 2px solid var(--knu); cursor: pointer;
  box-shadow: var(--shadow-3);
  display: grid; place-items: center; position: relative;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.chat-fab__btn:hover { background: #fff; color: var(--knu); transform: scale(1.05); }
.chat-fab__btn::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--pos);
  border: 2px solid var(--knu);
}
.chat-fab__btn:hover::after { border-color: #fff; }
/* 비로그인(guest) 상태 — 잠긴 표시: 녹색 상태 dot 숨김. 회색 톤. */
.chat-fab--locked .chat-fab__btn::after { display: none; }
.chat-fab--locked .chat-fab__btn {
  background: var(--ink-mute, #6B7280);
  color: #fff;
  border-color: var(--ink-mute, #6B7280);
}
.chat-fab--locked .chat-fab__btn:hover {
  background: #fff; color: var(--knu); border-color: var(--knu);
}
.chat-fab__btn svg { width: 24px; height: 24px; }

/* Hide on pages that opt out — server adds .chat-fab--hidden */
.chat-fab--hidden { display: none !important; }

/* ----- 14. Utility ----------------------------------------- */
.muted    { color: var(--ink-mute); }
.faint    { color: var(--ink-faint); }
.accent   { color: var(--knu); }
.center   { text-align: center; }
.right    { text-align: right; }
.mt-2     { margin-top: var(--s-2); }
.mt-4     { margin-top: var(--s-4); }
.mt-6     { margin-top: var(--s-6); }
.mt-8     { margin-top: var(--s-8); }
.mb-4     { margin-bottom: var(--s-4); }
.pad-6    { padding: var(--s-6); }

/* ----- 15. Print-safe defaults ----------------------------- */
@media print {
  .topbar, .chat-fab, .filterbar { display: none !important; }
  body { background: #fff; }
  .panel, .chart, .tbl { box-shadow: none; }
}


/* ============================================================
   Page wrapper — left/right/bottom margins for all pages.
   Data-table pages were edge-to-edge before; this gives them a
   consistent, breathable frame.
   ============================================================ */
main { display: block; }
.page {
  padding: var(--s-5, 24px) var(--s-7, 40px) var(--s-8, 56px);
  max-width: 1640px;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .page { padding: var(--s-4, 20px) var(--s-5, 24px) var(--s-7, 40px); }
}
@media (max-width: 640px) {
  .page { padding: var(--s-3, 16px) var(--s-4, 20px) var(--s-6, 32px); }
}
.page__head { margin-top: var(--s-2, 12px); }