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

/* ============================================================
   KIRA-MAT 시안 ver_32 — "BLUEPRINT" 톤앤매너 레이어
   ------------------------------------------------------------
   제도(드래프팅) 콘셉트. 잉크 네이비 · 모눈 배경 · 직각 모서리 ·
   도면 코너 마크 · 수치 모노스페이스.

   구성 요소(마크업)는 ver_31과 동일하며 이 파일은 톤만 덮어쓴다.
   기존 스타일 뒤에 로드되므로 같은 특이도면 이 파일이 이긴다.
   .v32       = 대시보드/스펙북 공통
   .v32-dash  = 대시보드(index.html) 전용
   .v32-spec  = 스펙북(specbook.html) 전용
   ============================================================ */

/* ── 토큰 ───────────────────────────────────────────────── */
.v32 {
  --bg: #e9edf2;
  --surface: #ffffff;
  --fg: #14202e;
  --muted: #667a91;
  --border: #cfd9e4;
  --accent: #14507d;
  --accent-light: #e3edf6;
  --accent-muted: rgba(20, 80, 125, 0.08);
  --good: #0f766e;
  --good-light: #e2f1ef;
  --warn: #b45309;
  --warn-light: #fbf1e5;
  --bad: #b91c1c;
  --bad-light: #fcecec;
  --radius: 3px;

  /* 모눈 배경용 격자선 */
  --grid: rgba(20, 80, 125, 0.06);
  --grid-strong: rgba(20, 80, 125, 0.10);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="dark"] .v32 {
  --bg: #0a1522;
  --surface: #0f1e2e;
  --fg: #d7e3ef;
  --muted: #7d93aa;
  --border: #23384f;
  --accent: #5eb3e4;
  --accent-light: rgba(94, 179, 228, 0.14);
  --accent-muted: rgba(94, 179, 228, 0.10);
  --good: #34d399;
  --good-light: rgba(52, 211, 153, 0.15);
  --warn: #fbbf24;
  --warn-light: rgba(251, 191, 36, 0.15);
  --bad: #f87171;
  --bad-light: rgba(248, 113, 113, 0.15);
  --grid: rgba(94, 179, 228, 0.05);
  --grid-strong: rgba(94, 179, 228, 0.09);
}

/* ── 모눈종이 배경 ──────────────────────────────────────── */
/* 8px 잔격자 + 40px 굵은 격자. 패널은 불투명이라 여백에만 드러난다 */
.v32 {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  letter-spacing: -0.005em;
}

/* ── 각진 모서리 ───────────────────────────────────────── */
.v32 .panel,
.v32 .kpi,
.v32 .btn,
.v32 .btn-icon,
.v32 .menu-toggle,
.v32 .profile-btn,
.v32 .profile-chip,
.v32 .avatar,
.v32 .dropdown,
.v32 .dropdown .dd-profile .avatar-lg,
.v32 .kpi-icon,
.v32 .mat-icon,
.v32 .proj-thumb,
.v32 .row-more,
.v32 .u-icon,
.v32 .stat-card,
.v32 .mat-card,
.v32 .action-icons button,
.v32 .export-btn,
.v32 .attach-item,
.v32 .attach-icon,
.v32 .attach-dl,
.v32 .rows-select,
.v32 .site-footer .sitevalue,
.v32 .pagination button,
.v32 .task-ico,
.v32 .check-icon,
.v32 .memo-item,
.v32 .memo-menu,
.v32 .cal-nav button,
.v32 .icon-sidebar .profile-avatar,
.v32 .tab-actions .view-toggle,
.v32 #donutTip {
  border-radius: 3px;
}
.v32 .pill,
.v32 .mat-tag,
.v32 .part-chip,
.v32 .mc-part,
.v32 .tag-sm,
.v32 .filter-tab,
.v32 .version-badge,
.v32 .status-draft-badge,
.v32 .badge,
.v32 .u-badge,
.v32 .nav-badge,
.v32 .count-badge,
.v32 .example-badge {
  border-radius: 2px;
}
.v32 .search-wrap input,
.v32 .sb-search input {
  border-radius: 2px;
}

/* ── 타이포 ────────────────────────────────────────────── */
/* 한글은 단어 단위로 줄바꿈한다(칩·배지가 글자 사이에서 쪼개지는 것 방지) */
.v32 { word-break: keep-all; }

/* 수치는 도면 치수처럼 모노스페이스 + 탭 정렬.
   IBM Plex Mono에는 한글 글리프가 없어 폴백 시 자간이 흐트러진다.
   → 내용이 숫자/영문뿐인 요소에만 적용한다. */
.v32 .kpi-value,
.v32 .progress-pct,
.v32 .cert-pct,
.v32 .donut-center .total,
.v32 .leg-pct,
.v32 .stat-num,
.v32 .check-count,
.v32 .attach-size,
.v32 .cal-time,
.v32 .task-dday,
.v32 .badge,
.v32 .u-badge,
.v32 .nav-badge,
.v32 .count-badge {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* 단위(건/개)는 한글이라 본문 서체를 유지한다 */
.v32 .kpi-unit,
.v32 .donut-center .total span,
.v32 .stat-card .stat-num span {
  font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: -0.01em;
}
.v32 .kpi-value { font-weight: 600; }

/* 페이지 제목 아래 도면 표제란 느낌의 이중 괘선 */
.v32-dash .page-title {
  letter-spacing: -0.02em;
  padding-bottom: 10px;
  border-bottom: 3px double var(--accent);
  display: inline-block;
}
.v32-dash .page-sub { letter-spacing: 0.02em; }
.v32-spec .top-bar .title-section h1 { letter-spacing: -0.02em; }
.v32-spec .version-badge {
  border: 1px solid var(--accent);
  background: transparent;
  font-variant-numeric: tabular-nums;
}

/* 패널 제목 앞 잉크 마크 */
.v32 .panel-header h3::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 13px;
  background: var(--accent);
  margin-right: 9px;
  vertical-align: -1px;
}
.v32 .panel-header h3 { letter-spacing: 0.01em; }
.v32 .rp-title { letter-spacing: 0.09em; font-size: 13px; }
.v32 .rp-title::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}

/* ── 패널: 도면 시트 ───────────────────────────────────── */
.v32 .panel {
  position: relative;
  box-shadow: none;
}
.v32 .panel-header {
  background: linear-gradient(var(--accent-muted), var(--accent-muted));
  border-bottom: 1px solid var(--border);
}
.v32 .panel-link {
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* KPI 카드: 도면 등록 마크(코너 티크) */
.v32 .kpi {
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.v32 .kpi::before,
.v32 .kpi::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.v32 .kpi::before {
  top: 5px; left: 5px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
}
.v32 .kpi::after {
  bottom: 5px; right: 5px;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}
.v32 .kpi:hover {
  border-color: var(--accent);
  box-shadow: none;
}
.v32 .kpi:hover::before,
.v32 .kpi:hover::after { opacity: 1; }
.v32 .kpi .kpi-label {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* KPI 아이콘: 채운 파스텔 → 선(線) 박스 */
.v32 .kpi-icon {
  background: transparent;
  border: 1px solid currentColor;
}
.v32 .kpi-icon.blue { color: #14507d; background: transparent; }
.v32 .kpi-icon.teal { color: #0e7490; background: transparent; }
.v32 .kpi-icon.purple { color: #3f5a8a; background: transparent; }
.v32 .kpi-icon.green { color: #0f766e; background: transparent; }
[data-theme="dark"] .v32 .kpi-icon.blue { color: #5eb3e4; background: transparent; }
[data-theme="dark"] .v32 .kpi-icon.teal { color: #38bdf8; background: transparent; }
[data-theme="dark"] .v32 .kpi-icon.purple { color: #8aa9d6; background: transparent; }
[data-theme="dark"] .v32 .kpi-icon.green { color: #2dd4bf; background: transparent; }

/* ── 칩 · 필: 채움 → 선 ───────────────────────────────── */
.v32 .pill {
  background: transparent;
  border: 1px solid currentColor;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.v32 .pill.blue { color: var(--accent); }
.v32 .pill.green { color: var(--good); }
.v32 .pill.orange { color: var(--warn); }
.v32 .pill.gray { color: var(--muted); background: transparent; }
.v32 .mat-tag {
  background: transparent;
  border: 1px solid currentColor;
  font-weight: 600;
}
.v32 .mat-tag.std { background: transparent; color: #3f5a8a; }
[data-theme="dark"] .v32 .mat-tag.std { background: transparent; color: #8aa9d6; }
.v32 .tag-sm {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
/* 부위 칩/탭의 인라인 색을 블루프린트 색조로 수렴시킨다(마크업 유지) */
.v32 .part-chip,
.v32 .mc-part {
  filter: saturate(0.4) hue-rotate(-10deg);
}
.v32 .filter-tab.active { filter: saturate(0.45) hue-rotate(-10deg); }

/* ── 사이드바 ─────────────────────────────────────────── */
.v32-dash .sidebar nav a {
  border-radius: 0;
  border-left: 2px solid transparent;
  font-weight: 600;
}
.v32-dash .sidebar nav a.active {
  background: var(--accent-light);
  border-left-color: var(--accent);
  font-weight: 700;
}
.v32-spec .icon-sidebar .icon-btn {
  border-radius: 0;
  border-left: 2px solid transparent;
}
.v32-spec .icon-sidebar .icon-btn.active {
  background: var(--accent-light);
  border-left-color: var(--accent);
}

/* ── 상단바 · 검색 ────────────────────────────────────── */
.v32 .top-header,
.v32 .top-bar,
.v32 .top-utility { border-bottom: 1px solid var(--border); }
.v32 .search-wrap input,
.v32 .sb-search input {
  border: 1px solid var(--border);
  box-shadow: none;
  font-weight: 500;
}
.v32 .search-wrap input:focus,
.v32 .sb-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
[data-theme="dark"] .v32 .search-wrap input,
[data-theme="dark"] .v32 .sb-search input {
  background: #0a1522;
  border-color: var(--border);
}
.v32 .example-badge { background: var(--accent); }

/* ── 버튼 ─────────────────────────────────────────────── */
.v32 .btn { letter-spacing: 0.01em; }
.v32 .btn-primary:hover { background: #0e3d61; border-color: #0e3d61; }
.v32 .btn-preview { border-color: #0e7490; color: #0e7490; }
.v32 .btn-preview:hover { background: rgba(14, 116, 144, 0.08); }
.v32 .btn-add { background: #0e7490; border-color: #0e7490; }
.v32 .btn-add:hover { background: #0b5c73; border-color: #0b5c73; }
.v32 .tab-actions .view-toggle button[data-view="card"]:not(.active) {
  background: #14202e;
  color: #fff;
}
.v32 .tab-actions .view-toggle button[data-view="card"]:not(.active):hover { background: #0a1522; }

/* ── 표 ───────────────────────────────────────────────── */
.v32 th {
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--accent);
  padding-top: 12px;
  padding-bottom: 12px;
}
[data-theme="dark"] .v32 th { background: var(--accent-light); color: var(--accent); }
.v32 td { border-bottom: 1px solid var(--border); }
.v32 tr:hover td { background: var(--accent-muted); }
[data-theme="dark"] .v32 tr:hover td { background: var(--accent-muted); }
.v32 .mat-item:hover { background: var(--accent-muted); }
[data-theme="dark"] .v32 .mat-item:hover { background: var(--accent-muted); }

/* ── 게이지 · 진행바: 각진 치수선 ─────────────────────── */
.v32 .progress-bar,
.v32 .cert-bar,
.v32 .gauge-bar {
  border-radius: 0;
  height: 6px;
  background: var(--accent-muted);
}
.v32 .progress-bar .fill,
.v32 .cert-bar span,
.v32 .gauge-bar .fill { border-radius: 0; }
.v32 .progress-bar .fill.blue { background: #14507d; }
.v32 .progress-bar .fill.teal { background: #0e7490; }
.v32 .progress-bar .fill.orange { background: #4f92bd; }
.v32 .progress-bar .fill.slate { background: #7f97ad; }
.v32 .gauge-bar .fill { background: var(--accent); }

/* ── 도넛: 청색 단색조 ────────────────────────────────── */
.v32 .donut-seg:nth-of-type(1) { stroke: #0f3f65; }
.v32 .donut-seg:nth-of-type(2) { stroke: #1e6592; }
.v32 .donut-seg:nth-of-type(3) { stroke: #3d88b4; }
.v32 .donut-seg:nth-of-type(4) { stroke: #6aa9cd; }
.v32 .donut-seg:nth-of-type(5) { stroke: #9cc7de; }
.v32 .donut-legend .leg-item:nth-child(1) .leg-dot { background: #0f3f65 !important; }
.v32 .donut-legend .leg-item:nth-child(2) .leg-dot { background: #1e6592 !important; }
.v32 .donut-legend .leg-item:nth-child(3) .leg-dot { background: #3d88b4 !important; }
.v32 .donut-legend .leg-item:nth-child(4) .leg-dot { background: #6aa9cd !important; }
.v32 .donut-legend .leg-item:nth-child(5) .leg-dot { background: #9cc7de !important; }
.v32 .donut-legend .leg-dot { border-radius: 1px; }
.v32 .donut-center .total { font-weight: 600; }
.v32 #donutTip { background: var(--accent); }

/* 인증 보유 현황: 잉크 계열 4색 */
.v32 .cert-row:nth-child(2) .cert-bar span { background: #0f766e !important; }
.v32 .cert-row:nth-child(3) .cert-bar span { background: #1e6592 !important; }
.v32 .cert-row:nth-child(4) .cert-bar span { background: #14507d !important; }
.v32 .cert-row:nth-child(5) .cert-bar span { background: #6aa9cd !important; }
.v32 .cert-note,
.v32 .donut-note { font-size: 11.5px; }

/* ── 스펙북 우측 패널 ─────────────────────────────────── */
/* 아이콘과 라벨이 갈라지지 않도록 한 줄 유지 */
.v32 .status-badge { white-space: nowrap; }
.v32-spec .stat-card {
  background: transparent;
  border: 1px solid var(--border);
}
.v32-spec .stat-card .stat-num { font-weight: 600; }
.v32-spec .overview-item .ov-label {
  font-size: 12px;
  letter-spacing: 0.04em;
}
.v32-spec .status-draft-badge {
  background: transparent;
  border: 1px solid var(--warn);
}
.v32-spec .export-btn { letter-spacing: 0.01em; }