:root {
  --bg: #0D0D12;
  --bg-card: #18181F;
  --bg-hover: #1F1F28;
  --bg-input: #141419;
  --border: #2A2A35;
  --border-2: #363644;
  --text: #F0F0F5;
  --text-2: #E2E2F0;
  --text-3: #B5B5D2;
  --text-4: #8A8AB3;
  --accent: #7C5CFF;
  --accent-fg: #7C5CFF; /* text/icon fg; dark = brand (no visual change) */
  --accent-purple: #7C5CFF;
  --accent-blue: #5BA4F5;
  --accent-green: #3DD68C;
  --accent-orange: #FFB800;
  --accent-soft: rgba(124, 92, 255, 0.15);
  --danger: #FF5E5E;
  --danger-soft: rgba(255, 94, 94, 0.14);
  --warning: #FFB800;
  --warning-soft: rgba(255, 184, 0, 0.13);
  --success: #3DD68C;
  --success-soft: rgba(61, 214, 140, 0.13);
  --info: #5BA4F5;
  --info-soft: rgba(91, 164, 245, 0.13);
  --bg-topbar: rgba(13, 13, 18, 0.92);
  color-scheme: dark;
  /* Step 55 mockup CSS variables */
  --panel: #0a1222;
  --panel2: #0e1830;
  --line: var(--surface-8);
  --line2: var(--surface-6);
  --line-2: var(--surface-7);
  --sub: #dbe5f5;
  --muted: #93a4c2;
  --muted2: #70809d;
  --violet: #8d63ff;
  --violet2: #6f46ff;
  --blue: #4db8ff;
  --sky: #52b8ff;
  --green: #23d18b;
  --amber: #ffbf47;
  --rose: #ff6f8b;
  --cyan: #32d1ff;
  --orange: #ff9452;
  --shadow: 0 20px 50px rgba(0, 0, 0, .28);
  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 14px;
  --bg2: #0d1728;
  --bg3: #101a2e;
  --surface-1: rgba(255, 255, 255, 0.02);
  --surface-2: rgba(255, 255, 255, 0.03);
  --surface-3: rgba(255, 255, 255, 0.04);
  --surface-4: rgba(255, 255, 255, 0.05);
  --surface-5: rgba(255, 255, 255, 0.06);
  --surface-6: rgba(255, 255, 255, 0.07);
  --surface-7: rgba(255, 255, 255, 0.08);
  --surface-8: rgba(255, 255, 255, 0.10);
  --success-fg: #9df0c8;
  --warning-fg: #ffd89a;
  --danger-fg: #ffb4c3;
  --info-fg: #a9ddff;
  --panel-elevated: #0f1a2e;
  --text-bright: #e7eef9;
  /* alias used by mobile/detail modules (was undefined; fell back inconsistently) */
  --text-1: var(--text);
  --topbar-grad-1: rgba(5, 10, 20, 0.92);
  --topbar-grad-2: rgba(8, 17, 31, 0.88);
  /* home (db5) panel bases — dark values match prior hardcoding */
  --db5-chip-base: rgba(13, 22, 37, 0.92);
  --db5-card-base: rgba(10, 18, 32, 0.94);
  --db5-chip-border: rgba(255, 255, 255, 0.09);
  --db5-value-fg: #f4f8ff;
  --donut-hole: #0b1325;
  --donut-total-fg: #ffffff;
  /* glass panels — dark values match prior hardcoding (rgba .84~.86 unified to .86) */
  --panel-glass: rgba(8, 17, 31, 0.86);
  --panel-glass-deep: rgba(5, 10, 20, 0.84);
  /* upcoming filter card gradient (was hardcoded navy) */
  --filter-card-grad-1: rgba(22, 32, 54, 0.96);
  --filter-card-grad-2: rgba(15, 22, 40, 0.98);
  /* 조건저장 모달 — prior hardcoding */
  --modal-panel: #0F1525;
  --modal-input: #0a0f1a;

}

[data-theme="light"] {
  --bg: #F8F9FC;
  --bg-card: #FFFFFF;
  --bg-hover: #F1F3F5;
  --bg-input: #FFFFFF;
  /* Step 344-H: one more step for visible light borders (dark untouched) */
  --border: #94A3B8;
  --border-2: #64748B;
  --text: #0F172A;
  --text-2: #1E293B;
  /* WCAG AA on #F8F9FC: darken muted ladder; keep text > text-2 > text-3 > text-4 */
  --text-3: #334155;
  --text-4: #475569;
  /* brand --accent stays #7C5CFF for solid backgrounds (buttons, active chips) */
  /* Step 347: minimal darken so white-on-accent ≥4.5 (brand purple impression kept) */
  --accent: #7856FA;
  --accent-fg: #5B3FD9; /* text/icons on light surfaces (AA 4.5+) */
  --accent-purple: #7856FA;
  --accent-blue: #2563EB;
  --accent-green: #059669;
  --accent-orange: #D97706;
  --accent-soft: rgba(124, 92, 255, 0.12);
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.1);
  --warning: #D97706;
  --warning-soft: rgba(217, 119, 6, 0.1);
  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.1);
  --info: #2563EB;
  --info-soft: rgba(37, 99, 235, 0.1);
  --bg-topbar: rgba(248, 249, 252, 0.92);
  --muted: #475569;
  --sub: #334155;
  --line: rgba(15, 23, 42, 0.22);
  --line-2: rgba(15, 23, 42, 0.18);
  --line2: rgba(15, 23, 42, 0.16);
  --shadow: 0 20px 50px rgba(15, 23, 42, 0.10);
  --surface-1: rgba(15, 23, 42, 0.02);
  --surface-2: rgba(15, 23, 42, 0.03);
  --surface-3: rgba(15, 23, 42, 0.04);
  --surface-4: rgba(15, 23, 42, 0.10);
  --surface-5: rgba(15, 23, 42, 0.16);
  --surface-6: rgba(15, 23, 42, 0.18);
  --surface-7: rgba(15, 23, 42, 0.20);
  --surface-8: rgba(15, 23, 42, 0.24);
  /* Step 344-I: ink accents for light (were dark emissive pastels) */
  --green: #059669;
  --amber: #B45309;
  --violet: #6D28D9;
  --blue: #0369A1;
  --rose: #BE123C;
  --orange: #C2410C;
  --sky: #0284C7;
  --success-fg: #065F46;
  --warning-fg: #92400E;
  --danger-fg: #9F1239;
  --info-fg: #075985;
  --panel-elevated: #EEF2F8;
  --text-bright: #1E293B;
  --text-1: var(--text);
  --topbar-grad-1: rgba(255, 255, 255, 0.95);
  --topbar-grad-2: rgba(248, 250, 252, 0.92);
  --db5-chip-base: #FFFFFF;
  --db5-card-base: #FFFFFF;
  --db5-chip-border: rgba(15, 23, 42, 0.12);
  --db5-value-fg: #0F172A;
  --donut-hole: #FFFFFF;
  --donut-total-fg: #0F172A;
  --panel-glass: rgba(255, 255, 255, 0.86);
  --panel-glass-deep: rgba(248, 250, 252, 0.90);
  --filter-card-grad-1: #FFFFFF;
  --filter-card-grad-2: #F8FAFC;
  --modal-panel: #FFFFFF;
  --modal-input: #FFFFFF;
  color-scheme: light;
}

/* Global Dark Theme Settings Based on Dev Standards */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}

/* TOPBAR CUSTOM FOR LAYOUT */
.topbar {
  height: 54px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-topbar);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-right: 32px;
}

.logo::before {
  content: "◉";
  color: var(--accent-fg);
  margin-right: 6px;
}

.nav {
  display: flex;
  gap: 2px;
  flex: 1;
}

.nav a {
  padding: 7px 13px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-3);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.nav a:hover {
  background: var(--bg-card);
  color: var(--text-2);
}

.nav a.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.topbar-r {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  width: 220px;
}

.search-box input {
  background: transparent !important;
  border: none !important;
  outline: none;
  color: var(--text);
  flex: 1;
  font-size: 13px;
  font-family: inherit;
}

.search-box input::placeholder {
  color: var(--text-4);
}

.kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  /* surface-5: elevates above page/search bg in both themes (not --bg page fill) */
  color: var(--text-3);
  background: var(--surface-5);
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

.icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--text-3);
  cursor: pointer;
  position: relative;
}

.icon-btn:hover {
  background: var(--bg-card);
  color: var(--text-2);
}

.icon-btn .dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 50%;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
}

.user-chip .avatar {
  width: 24px;
  height: 24px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.user-chip span {
  font-size: 13px;
  color: var(--text-2);
}

/* LAYOUT */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  color: var(--text);
}

.page-header .sub {
  font-size: 14px;
  color: var(--text-3);
}

.page-header .sub b {
  color: var(--accent-fg);
}

.page-header .sub .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--danger-soft);
  color: var(--danger);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.15);
}

/* KPI */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.15s;
}

.kpi:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.kpi .kl {
  font-size: 11px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.kpi .ki {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
}

.kpi .ki.a {
  background: var(--accent-soft);
}

.kpi .ki.d {
  background: var(--danger-soft);
}

.kpi .ki.s {
  background: var(--success-soft);
}

.kpi .ki.w {
  background: var(--warning-soft);
}

.kpi .kv {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
}

.kpi .kd {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  gap: 6px;
  align-items: center;
}

.kpi .kd .up {
  color: var(--success);
  font-weight: 700;
}

.kpi .kd .dn {
  color: var(--danger);
  font-weight: 700;
}

/* 메인 그리드 */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
}

.left-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.right-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* CARD */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 18px 20px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.card-head h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 7px;
}

.card-head .cnt {
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
}

.card-head .cnt.d {
  background: var(--danger-soft);
  color: var(--danger);
}

.card-head .tabs {
  display: flex;
  gap: 4px;
}

.card-head .tab {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid transparent;
  transition: all 0.15s;
}

.card-head .tab:hover {
  color: var(--text-2);
}

.card-head .tab.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border-color: rgba(124, 92, 255, 0.2);
}

.card-head .clink {
  font-size: 12px;
  color: var(--accent-fg);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}

/* 차트 영역 */
.chart-area {
  position: relative;
  margin-bottom: 6px;
}

.chart-svg {
  width: 100%;
  display: block;
}

/* 툴팁 */
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  display: none;
  z-index: 10;
  min-width: 120px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.chart-tooltip.show {
  display: block;
}

.chart-tooltip .tt-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-4);
  margin-bottom: 5px;
}

.chart-tooltip .tt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 3px;
}

.chart-tooltip .tt-row:last-child {
  margin-bottom: 0;
}

.chart-tooltip .tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-tooltip .tt-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  margin-left: auto;
}

.chart-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.chart-legend .li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
}

.chart-legend .li.inactive {
  opacity: 0.4;
}

.chart-legend .sw {
  width: 20px;
  height: 3px;
  border-radius: 2px;
}

/* 차트 그룹 탭 */
.chart-group-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.cgtab {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border);
  background: var(--bg-input);
  transition: all 0.15s;
}

.cgtab.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border-color: rgba(124, 92, 255, 0.3);
}

/* 관심공고 변동 */
.change-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px 14px;
  cursor: pointer;
  transition: all 0.15s;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.cc:hover {
  background: var(--bg-hover);
}

.cc.accent-c {
  border-color: rgba(124, 92, 255, 0.35);
  background: rgba(124, 92, 255, 0.06);
}

.cc.success-c {
  border-color: rgba(61, 214, 140, 0.3);
  background: rgba(61, 214, 140, 0.04);
}

.cc.danger-c {
  border-color: rgba(255, 94, 94, 0.35);
  background: rgba(255, 94, 94, 0.06);
}

.cc-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.cc-icon.a {
  background: var(--accent-soft);
}

.cc-icon.s {
  background: var(--success-soft);
}

.cc-icon.d {
  background: var(--danger-soft);
}

.cc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}

.cc-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

.cc-badge {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}

.cc-badge.a {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.cc-badge.s {
  background: var(--success-soft);
  color: var(--success);
}

.cc-badge.d {
  background: var(--danger-soft);
  color: var(--danger);
}

/* 새 시그널 */
.signal-list {
  display: flex;
  flex-direction: column;
}

.sig {
  display: grid;
  grid-template-columns: 46px 1fr auto auto;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  align-items: center;
}

.sig:last-child {
  border-bottom: none;
}

.sig:hover .sig-name {
  color: var(--accent-fg);
}

.sig-dday {
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
}

.sig-dday.u {
  background: var(--danger-soft);
  color: var(--danger);
}

.sig-dday.w {
  background: var(--warning-soft);
  color: var(--warning);
}

.sig-dday.n {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.sig-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.sig-sub {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

.sig-budget {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--warning);
}

.sig-star {
  font-size: 17px;
  color: var(--text-4);
  cursor: pointer;
  width: 28px;
  text-align: center;
}

.sig-star:hover {
  color: var(--warning);
}

/* 진입 분석 — 사업 중심 */
.entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ec {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.ec:hover {
  background: var(--bg-hover);
}

.ec.wc {
  border-color: rgba(255, 184, 0, 0.4);
  background: rgba(255, 184, 0, 0.05);
}

.ec.dc {
  border-color: rgba(255, 94, 94, 0.3);
  background: rgba(255, 94, 94, 0.04);
}

.ec.sc {
  border-color: rgba(61, 214, 140, 0.25);
}

.ec-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ec-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.ec-agency {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

.ec-badge {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}

.ec-badge.w {
  background: var(--warning-soft);
  color: var(--warning);
}

.ec-badge.d {
  background: var(--danger-soft);
  color: var(--danger);
}

.ec-badge.s {
  background: var(--success-soft);
  color: var(--success);
}

.ec-performer {
  font-size: 12px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 6px;
}

.ec-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

/* 우측: 관심공고 */
.fav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fav-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.fav-card:hover {
  background: var(--bg-hover);
}

.fav-card.changed {
  border-color: rgba(124, 92, 255, 0.4);
  background: rgba(124, 92, 255, 0.06);
}

.fav-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fav-badge {
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 6px;
  border-radius: 4px;
}

.fav-badge.new {
  background: var(--accent);
  color: #fff;
}

.fav-badge.d1 {
  background: var(--danger);
  color: #fff;
}

.fav-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 10px;
}

/* 3단계 진행바 */
.lc {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.lc-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  z-index: 2;
}

.lc-dot.done {
  background: var(--accent);
  border-color: var(--accent);
}

.lc-dot.cur {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.lc-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 -1px;
}

.lc-line.done {
  background: var(--accent);
}

.lc-labels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 10px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 3px;
}

.lc-labels span:nth-child(2) {
  text-align: center;
}

.lc-labels span:nth-child(3) {
  text-align: right;
}

.lc-labels span.cur {
  color: var(--accent-fg);
  font-weight: 700;
}

/* 발주처 TOP */
.agency-rows {
  display: flex;
  flex-direction: column;
}

.ar {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  cursor: pointer;
}

.ar:last-child {
  border-bottom: none;
}

.ar:hover .ar-name {
  color: var(--accent-fg);
}

.ar-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-4);
  font-weight: 700;
}

.ar-rank.top {
  color: var(--accent-fg);
}

.ar-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: color 0.15s;
  margin-bottom: 1px;
}

.ar-sub {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

.ar-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

/* 주목 사업자 */
.vendor-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vendor-row-item {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.vendor-row-item:hover {
  background: var(--bg-hover);
}

.vr-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.vr-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 6px;
}

.vr-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.vchip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-3);
  border: 1px solid var(--border);
}

.vchip.w {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: rgba(255, 184, 0, 0.3);
}

.vchip.d {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(255, 94, 94, 0.3);
}

.vchip.s {
  background: var(--success-soft);
  color: var(--success);
  border-color: rgba(61, 214, 140, 0.3);
}

/* 도메인 통계 */
.domain-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dom-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.dom-label {
  width: 80px;
  color: var(--text-2);
  font-weight: 500;
  flex-shrink: 0;
}

.dom-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.dom-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.dom-cnt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-3);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}

/* 사전규격 리스트 */
.notice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.notice-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
}

.notice-card:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.nc-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.nc-domain-tag {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  background: var(--accent-soft);
  color: var(--accent-fg);
  padding: 2px 8px;
  border-radius: 4px;
}

.nc-domain-ai {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.nc-domain-cloud {
  background: var(--info-soft);
  color: var(--info);
}

.nc-domain-sec {
  background: var(--danger-soft);
  color: var(--danger);
}

.nc-domain-erp {
  background: var(--warning-soft);
  color: var(--warning);
}

.nc-domain-web {
  background: rgba(61, 214, 140, 0.13);
  color: var(--success);
}

.nc-dday {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 8px;
  border-radius: 4px;
}

.nc-dday.d {
  background: var(--danger-soft);
  color: var(--danger);
}

.nc-dday.w {
  background: var(--warning-soft);
  color: var(--warning);
}

.nc-dday.n {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.nc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nc-agency {
  font-size: 12px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 12px;
}

.nc-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nc-budget {
  font-size: 13px;
  font-weight: 700;
  color: var(--warning);
  font-family: 'JetBrains Mono', monospace;
  flex: 1;
}

.nc-status {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

.nc-star {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-4);
  padding: 0;
}

.nc-star:hover {
  color: var(--warning);
}

/* 필터 패널 */
.filter-panel {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 16px;
}

.filter-panel h3 {
  font-size: 13px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.filter-section {
  margin-bottom: 16px;
}

.filter-section label {
  font-size: 12px;
  color: var(--text-3);
  display: block;
  margin-bottom: 6px;
}

.filter-section input[type=text] {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-section input[type=text]:focus {
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

.form-select {
  background-color: var(--bg-input) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-size: 13px;
}

.form-select:focus {
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

.form-select option {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
}

.form-control {
  background-color: var(--bg-input) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-size: 13px;
}

.form-control::placeholder {
  color: var(--text-4) !important;
  opacity: 1;
}

.form-control:focus {
  background-color: var(--bg-input) !important;
  color: var(--text) !important;
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

.form-label,
.form-text.text-muted,
label.text-muted {
  color: var(--text-3) !important;
}

h5.fw-bold {
  color: var(--text) !important;
}

.wrap h1,
.wrap h2,
.wrap h3,
.wrap h4 {
  color: var(--text);
}

.wrap .card-head h3 {
  color: var(--text) !important;
}

.wrap .hero h1 {
  color: var(--text);
}

/* Dashboard: Bootstrap .card 색상 오버라이드 수정 */
.wrap .card {
  color: var(--text);
}

.wrap .signal-title {
  color: var(--text);
}

.wrap .signal-title a {
  color: var(--text);
}

.wrap .signal-budget {
  color: var(--text-bright);
}

.wrap .side-item {
  color: var(--text);
}

.wrap .side-item strong {
  color: var(--text);
}

.wrap .side-item strong a {
  color: var(--text);
}

.wrap .t-row {
  color: var(--text);
}

.wrap .rank {
  color: var(--text-bright);
}

.wrap .hello h2 {
  color: var(--text);
}

.wrap .hello p {
  color: var(--sub);
}

/* Light mode: 메트릭 라벨/힌트 색상 보완 */
[data-theme="light"] .wrap .metric .label {
  color: var(--text-2);
}

[data-theme="light"] .wrap .metric .hint {
  color: var(--text-3);
}

[data-theme="light"] .wrap .signal-sub {
  color: var(--text-3);
}

[data-theme="light"] .wrap .signal-budget {
  color: var(--text-2);
}

[data-theme="light"] .wrap .rank {
  color: var(--text-2);
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  margin: 2px;
}

.filter-tag.active {
  background: var(--accent-soft);
  border-color: rgba(124, 92, 255, 0.3);
  color: var(--accent-fg);
}

.list-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.list-layout .flex-grow-1 {
  min-width: 0;
}

/* 사업 상세 레이아웃 */
.pg-grid {
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  gap: 12px;
  align-items: start;
}

.col-left,
.col-mid,
.col-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pg-header {
  margin-bottom: 14px;
}

.breadcrumb-bar {
  padding: 10px 0 14px;
  font-size: 12px;
  color: var(--text-4);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
}

.breadcrumb-bar a {
  color: var(--text-3);
  text-decoration: none;
}

.breadcrumb-bar a:hover {
  color: var(--accent-fg);
}

/* Block 1: 사업 헤더 */
.proj-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 20px 24px;
}

.ph-row1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ph-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.3;
  flex: 1;
  margin-right: 20px;
}

.ph-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

.btn-pri {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn-ic-wrap {
  position: relative;
}

.btn-ic {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-3);
  font-size: 15px;
}

.btn-ic:hover {
  background: var(--bg-hover);
  color: var(--text-2);
}

.btn-tooltip {
  position: absolute;
  top: 42px;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  display: none;
  font-family: 'JetBrains Mono', monospace;
  z-index: 10;
}

.btn-ic-wrap:hover .btn-tooltip {
  display: block;
}

.ph-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tag {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.tag.stage {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border: 1px solid rgba(124, 92, 255, 0.3);
}

.tag.domain {
  background: var(--bg-input);
  color: var(--text-2);
  border: 1px solid var(--border-2);
}

.tag.region {
  background: var(--info-soft);
  color: var(--info);
  border: 1px solid rgba(91, 164, 245, 0.3);
}

.tag.budget {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid rgba(255, 184, 0, 0.3);
}

.tag.dday-tag {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(255, 94, 94, 0.3);
}

.ph-meta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--border);
}

.ph-meta-item {
  background: var(--bg-input);
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ph-meta-item .ml {
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.ph-meta-item .mv {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.ph-meta-item .mv.ac {
  color: var(--accent-fg);
  font-size: 14px;
}

.ph-meta-item .mv.budget {
  color: var(--warning);
  font-family: 'JetBrains Mono', monospace;
}

.ph-meta-item .mv.dday-val {
  color: var(--danger);
  font-family: 'JetBrains Mono', monospace;
}

/* Block 2: 타임라인 */
.tl {
  display: flex;
  flex-direction: column;
}

.tl-stage {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0 14px;
}

.tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tl-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  z-index: 2;
  border: 2px solid var(--border-2);
  background: var(--bg-input);
  color: var(--text-4);
}

.tl-dot.done {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.tl-dot.pend {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text-4);
}

.tl-vline {
  width: 2px;
  flex: 1;
  min-height: 18px;
  background: var(--border);
  margin: 0 auto;
}

.tl-vline.done {
  background: var(--accent);
}

.tl-body {
  padding: 0 0 16px 0;
}

.tl-sname {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
  margin-bottom: 5px;
  color: var(--text);
}

.tl-badge {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.tl-badge.cur {
  background: var(--accent);
  color: #fff;
}

.tl-badge.pnd {
  background: var(--bg-input);
  color: var(--text-4);
  border: 1px solid var(--border);
}

.tl-detail {
  font-size: 12px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.7;
  margin-bottom: 8px;
}

.tl-gap {
  font-size: 11px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace;
  padding: 5px 0 5px 38px;
}

/* Block 3: RFP */
.rfp-summary-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
  white-space: pre-wrap;
}

.rfp-points {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.rfp-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6
}

.rp-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 1px
}

.rp-icon.core {
  background: var(--accent-soft)
}

.rp-icon.warn {
  background: var(--danger-soft)
}

.rp-icon.cert {
  background: var(--warning-soft)
}

.rp-icon.info {
  background: var(--info-soft)
}

.rp-text {
  color: var(--text-2)
}

.rp-text b {
  color: var(--text);
  font-weight: 600
}

.rp-text .em {
  color: var(--accent-fg);
  font-weight: 600
}

.rp-text .em-w {
  color: var(--warning);
  font-weight: 600
}

.rp-text .em-d {
  color: var(--danger);
  font-weight: 600
}

.attach {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px
}

.atch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 6px;
}

.atch-ico {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.atch-ico.pdf {
  background: var(--danger-soft);
}

.atch-ico.hwp {
  background: var(--info-soft);
}

.atch-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.atch-sz {
  font-size: 11px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace
}

.atch-dl {
  font-size: 11px;
  color: var(--text-3);
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
}

/* Block 4: 기술스택 */
.tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tech-tag {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}

.tech-tag:hover {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.tech-tag.major {
  color: var(--text);
  font-weight: 600
}

.tech-tag .cat {
  font-size: 10px;
  color: var(--text-4);
  margin-right: 3px
}

/* Block 5: 발주처 KPI */
.agency-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

.akpi {
  background: var(--bg-input);
  padding: 12px 14px;
}

.akpi .al {
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 5px;
  font-family: 'JetBrains Mono', monospace;
}

.akpi .av {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 2px;
  color: var(--text);
}

.akpi .as {
  font-size: 11px;
  color: var(--text-3);
}

/* 수주업체 현황 */
.vendor-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 8px
}

.vendor-current-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 15px
}

.vc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px
}

.vc-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.vc-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text)
}

.vc-warn-badge {
  font-size: 11px;
  color: var(--warning);
  font-family: 'JetBrains Mono', monospace;
  background: var(--warning-soft);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 184, 0, 0.3)
}

.vc-biz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s
}

.vc-biz-row:hover {
  border-color: var(--accent);
  background: var(--accent-soft)
}

.vc-biz-row.active-row {
  border-color: rgba(61, 214, 140, 0.3);
  background: rgba(61, 214, 140, 0.04)
}

.vc-biz-row.selected {
  border-color: var(--accent) !important;
  background: rgba(124, 92, 255, 0.08) !important
}

.vc-biz-type {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 7px;
  border-radius: 4px
}

.vc-biz-type.si {
  background: var(--accent-soft);
  color: var(--accent-fg)
}

.vc-biz-type.sm {
  background: var(--success-soft);
  color: var(--success)
}

.vc-biz-info {
  flex: 1;
  min-width: 0
}

.vc-biz-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 2px
}

.vc-biz-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace
}

.vc-biz-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 8px;
  border-radius: 4px
}

.vc-biz-status.done {
  background: var(--bg-input);
  color: var(--text-4);
  border: 1px solid var(--border)
}

.vc-biz-status.ongoing {
  background: var(--success-soft);
  color: var(--success)
}

.vc-insight {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border)
}

.competitor-list {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.comp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s
}

.comp-row:hover {
  background: var(--bg-hover);
  border-color: var(--border-2)
}

.comp-left {
  flex: 1;
  min-width: 0
}

.comp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 2px
}

.comp-biz {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.comp-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0
}

.comp-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px
}

.comp-rank.rank-2 {
  background: var(--info-soft);
  color: var(--info)
}

.comp-rank.rank-3 {
  background: var(--bg-card);
  color: var(--text-3);
  border: 1px solid var(--border)
}

.comp-amt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-3)
}

.comp-biz-label {
  color: var(--accent-fg);
  font-weight: 600;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  margin-left: 4px
}

.comp-empty {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace
}

.competitor-list {
  transition: opacity 0.15s
}

.competitor-list.fading {
  opacity: 0
}

/* Block 6: 지배력 */
.domin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.domin-row {
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.domin-row.warn-r {
  border-color: rgba(255, 184, 0, 0.4);
  background: rgba(255, 184, 0, 0.05);
}

.domin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.domin-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dom-score-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
}

.dom-score-badge.d {
  background: var(--danger-soft);
  color: var(--danger);
}

.dom-score-badge.w {
  background: var(--warning-soft);
  color: var(--warning);
}

.dom-score-badge.s {
  background: var(--success-soft);
  color: var(--success);
}

.domin-bar-bg {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 5px;
}

.dom-bar {
  height: 100%;
  border-radius: 2px;
}

.dom-bar.d {
  background: var(--danger);
}

.dom-bar.w {
  background: var(--warning);
}

.dom-bar.s {
  background: var(--success);
}

.domin-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

/* Block 7/8: 유사 사업 */
.sim-list {
  display: flex;
  flex-direction: column;
}

.sim-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.sim-row:last-child {
  border-bottom: none;
}

.sim-row:hover .sn {
  color: var(--accent-fg);
}

.sn {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}

.sm-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

.sr {
  text-align: right;
  flex-shrink: 0;
}

.sr .swin {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
}

.sr .srate {
  font-size: 11px;
  color: var(--success);
  font-family: 'JetBrains Mono', monospace;
}

.est-box {
  margin-top: 10px;
  padding: 10px 13px;
  background: rgba(124, 92, 255, 0.08);
  border: 1px solid rgba(124, 92, 255, 0.2);
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-2)
}

.est-box .ev {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-fg);
  font-weight: 700;
  font-size: 14px
}

/* Block 9: 영업 인사이트 */
.insight-wrap {
  background: rgba(124, 92, 255, 0.07);
  border: 1px solid rgba(124, 92, 255, 0.2);
  border-radius: 9px;
  padding: 15px 17px;
}

.insight-hd {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-fg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
}

.iitem {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 9px;
}

.iico {
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 1px;
}

.iitem b {
  color: var(--text);
  font-weight: 600
}

.iitem .ew {
  color: var(--warning);
  font-weight: 700
}

.iitem .es {
  color: var(--success);
  font-weight: 700
}

.iitem .ei {
  color: var(--info);
  font-weight: 700
}

.idiv {
  height: 1px;
  background: rgba(124, 92, 255, 0.1);
  margin: 3px 0
}

/* Block 10: 메모 카드 */
.memo-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px 15px;
}

.memo-preview {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 10px;
  line-height: 1.6;
  min-height: 32px;
}

.priority-chip {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: var(--danger-soft);
  color: var(--danger)
}

.memo-open-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
}

.memo-open-btn:hover {
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* 모달 — 평가상세 + 메모 공통 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px)
}

.modal-overlay.open {
  display: flex
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 24px 26px;
  width: 700px;
  max-width: 95vw;
  position: relative;
  max-height: 88vh;
  overflow-y: auto
}

.modal-box.narrow {
  width: 540px
}

.modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px
}

.modal-hd h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em
}

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-3);
  font-size: 16px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  flex-shrink: 0
}

.modal-close:hover {
  color: var(--text)
}

.modal-sub {
  font-size: 12px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 18px;
  padding: 8px 12px;
  background: var(--bg-input);
  border-radius: 7px;
  border: 1px solid var(--border)
}

/* 평가 상세 모달 내부 */
.eval-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px
}

.eval-section-label {
  font-size: 11px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  margin-bottom: 10px
}

.eval-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 6px
}

.eval-row .el {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2)
}

.eval-row .ev {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700
}

.official-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.oc-row {
  display: flex;
  gap: 10px;
  align-items: center
}

.oc-label {
  font-size: 11px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace;
  width: 52px;
  flex-shrink: 0
}

.oc-val {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500
}

.oc-val.phone {
  color: var(--info);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600
}

.oc-val.bold {
  color: var(--text);
  font-size: 15px;
  font-weight: 700
}

.oc-divider {
  height: 1px;
  background: var(--border)
}

/* 점수 테이블 */
.score-table {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden
}

.score-table-head {
  display: grid;
  grid-template-columns: 1fr 80px 80px 80px 90px 80px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2)
}

.score-table-head span {
  font-size: 11px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  text-align: center
}

.score-table-head span:first-child {
  text-align: left
}

.score-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px 80px 90px 80px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  align-items: center
}

.score-row:last-child {
  border-bottom: none
}

.score-row.winner {
  background: rgba(61, 214, 140, 0.04);
  border-left: 3px solid var(--success)
}

.score-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-2);
  text-align: center
}

.score-val.win {
  font-size: 14px;
  font-weight: 800;
  color: var(--success)
}

.score-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 8px;
  border-radius: 4px
}

/* 메모 모달 내부 */
.memo-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px
}

.mtab {
  flex: 1;
  padding: 7px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-3);
  border: 1px solid transparent;
  transition: all 0.15s;
  text-align: center
}

.mtab.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border-color: rgba(124, 92, 255, 0.3)
}

.memo-area {
  width: 100%;
  min-height: 120px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.7
}

.memo-area:focus {
  border-color: var(--accent)
}

.memo-area::placeholder {
  color: var(--text-4)
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px
}

.pchips {
  display: flex;
  gap: 6px
}

.pchip {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace
}

.pchip.sel-imp {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(255, 94, 94, 0.4)
}

.pchip.sel-rev {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: rgba(255, 184, 0, 0.4)
}

.btn-save {
  padding: 8px 20px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit
}

.btn-save:hover {
  opacity: 0.85
}

/* 토스트 */
.page-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 500;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  pointer-events: none
}

.page-toast.show {
  opacity: 1
}

.toast-type {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700
}

.toast-type.info-t {
  background: var(--info-soft);
  color: var(--info)
}

.toast-type.sales-t {
  background: var(--accent-soft);
  color: var(--accent-fg)
}

/* 발주처 목록 */
.agency-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.agency-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.15s;
}

.agency-card:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.ac-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.ac-count {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.ac-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-fg);
  font-family: 'JetBrains Mono', monospace;
}

.ac-link {
  font-size: 12px;
  color: var(--accent-fg);
  font-family: 'JetBrains Mono', monospace;
}

.search-bar {
  display: flex;
  gap: 8px;
}

.search-input {
  flex: 1;
  max-width: 360px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.search-input:focus {
  border-color: var(--accent);
}

/* 발주처 상세 헤더 */
.agency-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 22px 26px;
  margin-bottom: 16px;
}

.ah-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ah-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.ah-sub {
  font-size: 13px;
  color: var(--text-3);
}

.ah-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-alarm {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.ah-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.ah-kpi {
  background: var(--bg-input);
  padding: 14px 18px;
}

.ah-kpi .al {
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.ah-kpi .av {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 3px;
}

.ah-kpi .as {
  font-size: 11px;
  color: var(--text-3);
}

.ah-kpi .as.ok {
  color: var(--success);
  font-weight: 700;
}

/* 발주처 상세 본문 */
.agency-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: start;
}

.chart-wrap {
  height: 140px;
  margin-bottom: 12px;
}

.biz-list {
  display: flex;
  flex-direction: column;
}

.biz-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  align-items: center;
}

.biz-row:last-child {
  border-bottom: none;
}

.biz-row:hover .biz-name {
  color: var(--accent-fg);
}

.biz-type {
  font-size: 10px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}

.biz-type.si {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.biz-type.sm {
  background: var(--success-soft);
  color: var(--success);
}

.biz-type.bid {
  background: var(--info-soft);
  color: var(--info);
}

.biz-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.15s;
}

.biz-date {
  font-size: 11px;
  color: var(--text-4);
}

.biz-budget {
  font-size: 13px;
  font-weight: 700;
  color: var(--warning);
}

/* 단골업체 */
.contractor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
}

.ct-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-fg);
  width: 16px;
}

.ct-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.ct-count {
  font-size: 12px;
  color: var(--text-3);
}

/* 키워드 태그 */
.keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kw-tag {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
}

/* 사업자 헤더 */
.vendor-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 22px 26px;
  margin-bottom: 16px;
}

.vh-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.vh-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.vh-sub {
  font-size: 13px;
  color: var(--text-3);
  display: flex;
  gap: 12px;
  align-items: center;
}

.vh-sub .chip {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.vh-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.vh-kpi {
  background: var(--bg-input);
  padding: 14px 18px;
}

.vh-kpi .al {
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.vh-kpi .av {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 3px;
}

.vh-kpi .as {
  font-size: 11px;
  color: var(--text-3);
}

/* 지배력 테이블 */
.dominance-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dt-row {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
}

.dt-row.wc {
  border-color: rgba(255, 184, 0, 0.4);
  background: rgba(255, 184, 0, 0.05);
}

.dt-row.dc {
  border-color: rgba(255, 94, 94, 0.3);
  background: rgba(255, 94, 94, 0.04);
}

.dt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.dt-agency {
  font-size: 13px;
  font-weight: 600;
}

.dt-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
}

.dt-score.w {
  background: var(--warning-soft);
  color: var(--warning);
}

.dt-score.d {
  background: var(--danger-soft);
  color: var(--danger);
}

.dt-score.n {
  background: var(--bg-card);
  color: var(--text-3);
  border: 1px solid var(--border);
}

.dt-detail {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 7px;
}

.dt-bar-bg {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.dt-bar {
  height: 100%;
  border-radius: 2px;
}

.dt-bar.w {
  background: var(--warning);
}

.dt-bar.d {
  background: var(--danger);
}

.dt-bar.n {
  background: var(--text-4);
}

/* 도메인 분포 */
.domain-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.dl-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dl-label {
  width: 90px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
  flex-shrink: 0;
}

.dl-bar-wrap {
  flex: 1;
  height: 7px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.dl-bar-fill {
  height: 100%;
  border-radius: 4px;
}

.dl-cnt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-3);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* 알림설정·마이페이지·관심공고·지배력검색 공통 */
.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  margin-bottom: 14px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-info .pn {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.profile-info .pe {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 4px;
}

.profile-info .pm {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace;
}

.profile-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.btn-danger {
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--danger-soft);
  border: 1px solid rgba(255, 94, 94, 0.3);
  color: var(--danger);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.check-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.check-chip.on {
  background: var(--accent-soft);
  border-color: rgba(124, 92, 255, 0.4);
  color: var(--accent-fg);
  font-weight: 600;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.toggle-row:last-child {
  border-bottom: none;
}

.toggle-info .tl {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 3px;
}

.toggle-info .ts {
  font-size: 12px;
  color: var(--text-3);
}

.theme-btns {
  display: flex;
  gap: 8px;
}

.theme-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: var(--bg-input);
  font-family: inherit;
  line-height: 1.2;
  min-width: 5.5em;
  text-align: center;
}

/* Step 353: 테마 토글 이모지 폭 고정 — 해/달 전환 시 레이아웃 흔들림 방지 */
.ps-theme-toggle,
.mh-theme-toggle {
  min-width: 40px;
  min-height: 40px;
  box-sizing: border-box;
}
.ps-theme-toggle [data-theme-icon],
.mh-theme-toggle [data-theme-icon] {
  display: inline-flex;
  width: 1.25em;
  justify-content: center;
  line-height: 1;
}

.theme-btn.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border-color: rgba(124, 92, 255, 0.4);
}

.interest-agency-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ia-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ia-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 2px;
}

.ia-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

.ia-alarm {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

.btn-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.btn-add:hover {
  border-color: var(--accent);
  color: var(--accent-fg);
}

.fav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fav-filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.fft {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: var(--bg-input);
  font-family: 'JetBrains Mono', monospace;
}

.fft.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border-color: rgba(124, 92, 255, 0.3);
}

.result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.result-cnt {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}

.section-label {
  font-size: 11px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  margin-bottom: 10px;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

/* topbar user-chip 마이페이지 활성 상태 */
.user-chip.active {
  background: var(--accent-soft);
  border-color: rgba(124, 92, 255, 0.4);
}

/* ===== [뷰포트 표준화] PC Desktop-First 안전망 ===== */
/* 정책: PC 화면 최소 지원 폭 = 1270px (와이드 모니터 2560px의 절반 - 10px 기준).
   1270px 이상에서는 모든 PC 화면이 다단 레이아웃을 유지해야 하며,
   그 미만에서는 레이아웃을 찌그러뜨리는 대신 body min-width로 가로 스크롤이 생기게 한다.
   1270px보다 작은 폭에서 다단이 1열로 무너지는 개별 화면별 미디어쿼리(@media max-width:1450px 등)는
   전부 1269px 이하로 낮춰서 이 정책과 일치시킬 것 — 신규 화면 작업 시에도 이 기준을 따른다. */
@media (min-width: 1270px) {
  .container {
    max-width: 1440px !important;
  }
}

/* PC 템플릿 전용 안전망 — 모바일은 별도 템플릿이라 body.ps-pc가 없음 */
body.ps-pc {
  min-width: 1270px;
}

/* 모바일 레이아웃이 데스크탑에서 의도치 않게 렌더링되는 경우 topbar 보정 */
@media (min-width: 1270px) {
  .topbar {
    flex-wrap: nowrap !important;
  }

  .nav {
    display: flex !important;
    gap: 4px;
  }
}

/* ===== 사업 상세 — 글씨 가시성 강제 패치 ===== */
.card-head h3 {
  color: var(--text) !important;
}

.tl-sname {
  color: var(--text) !important;
}

.tl-detail {
  color: var(--text-3) !important;
}

.tl-gap {
  color: var(--text-4) !important;
}

.akpi .al {
  color: var(--text-4) !important;
}

.akpi .av {
  color: var(--text) !important;
}

.akpi .as {
  color: var(--text-3) !important;
}

.akpi .av.ci {
  color: var(--info) !important;
}

.akpi .av.cw {
  color: var(--warning) !important;
}

.akpi .av.cs {
  color: var(--success) !important;
}

.akpi .av.ca {
  color: var(--accent-fg) !important;
}

/* ===== V2 ===== */
.ps-shell-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(180deg, var(--topbar-grad-1), var(--topbar-grad-2));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--surface-7);
}

.ps-shell-topbar__inner {
  max-width: 1640px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  /* Step 348: brand | nav | actions (search column removed) */
  grid-template-columns: 220px 1fr minmax(200px, auto);
  gap: 16px;
  align-items: center;
}

.ps-shell-brand,
.ps-shell-user {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.ps-shell-brand__logo {
  width: 42px;
  height: 42px;
  display: block;
}

.ps-shell-user__avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #835dff, #42b6ff);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(130, 93, 255, 0.26);
}

.ps-shell-brand strong,
.ps-shell-user strong {
  display: block;
  font-size: 15px;
}

.ps-shell-brand small,
.ps-shell-user small {
  display: block;
  color: var(--text-4);
  font-size: 11px;
}

/* Step 116: 사용자 영역도 줄바꿈 금지(좁은 폭에서 글자단위 깨짐 방지) */
.ps-shell-user {
  min-width: 0;
  white-space: nowrap;
}

.ps-shell-user__meta {
  min-width: 0;
  overflow: hidden;
}

.ps-shell-user__meta strong,
.ps-shell-user__meta small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ps-shell-nav {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
}

.ps-shell-nav a {
  color: var(--text-bright);
  text-decoration: none;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ps-shell-nav a.active {
  background: rgba(141, 99, 255, 0.18);
  color: #fff;
}
[data-theme="light"] .ps-shell-nav a.active {
  color: var(--accent-fg);
  background: rgba(124, 92, 255, 0.14);
}

.ps-shell-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--surface-7);
  background: var(--surface-3);
  color: var(--text-4);
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
}

.ps-shell-search input {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
}

.ps-shell-search input::placeholder {
  color: var(--text-4);
  opacity: 1;
}

.ps-shell-search kbd {
  margin-left: auto;
  border-radius: 10px;
  border: 1px solid var(--surface-7);
  padding: 4px 8px;
  color: var(--text-3);
  background: var(--surface-5);
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

/* Step 112: 좁은 폭(1279px↓)에서 메뉴 패딩 축소로 추가 여유 확보 */
@media (max-width: 1269px) {
  .ps-shell-topbar__inner {
    grid-template-columns: 180px 1fr minmax(180px, auto);
    gap: 12px;
    padding: 14px 20px;
  }

  .ps-shell-nav a {
    padding: 8px 10px;
    font-size: 13px;
  }
}

.ps-shell-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ps-shell-icon {
  border: 1px solid var(--surface-7);
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  /* Step 350: 🌙/🔔과 동일 박스 — 관심 별도 정렬·크기 맞춤 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  line-height: 1;
  box-sizing: border-box;
}

.ps-shell-icon__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  /* 목록 행 ★보다 상단바 톤에 맞게 윤곽 별(☆) — 박스·색은 .ps-shell-icon 공유 */
  color: inherit;
}

.ps-fav-star {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.ps-shell-icon--locked .ps-fav-star {
  filter: grayscale(0.7);
  opacity: 0.55;
}
/* Step 243: 비로그인 topbar — 잠금 힌트 + 로그인 CTA */
.ps-shell-lock {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.75;
  vertical-align: middle;
  line-height: 1;
}

.ps-shell-icon--locked {
  position: relative;
  opacity: 0.88;
}

.ps-shell-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, 0.45);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.28), rgba(66, 182, 255, 0.18));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.18);
}

.ps-shell-login-btn:hover {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.4), rgba(66, 182, 255, 0.26));
  color: #fff;
}

/* light: solid accent so white label stays readable on light topbar */
[data-theme="light"] .ps-shell-login-btn {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-purple), var(--info));
  color: #fff;
}

[data-theme="light"] .ps-shell-login-btn:hover {
  filter: brightness(1.06);
  color: #fff;
}

.ps-v2-page {
  max-width: 1640px;
  margin: 0 auto;
  padding: 24px;
}

.ps-v2-hero,
.ps-v2-card,
.ps-v2-panel {
  border: 1px solid var(--surface-7);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
}

.ps-v2-hero {
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(141, 99, 255, 0.18), transparent 22%),
    radial-gradient(circle at top right, rgba(82, 184, 255, 0.14), transparent 22%),
    var(--surface-3);
}

.ps-v2-kicker,
.ps-v2-chip,
.ps-v2-pill,
.ps-v2-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
}

.ps-v2-kicker,
.ps-v2-chip.is-primary {
  background: rgba(141, 99, 255, 0.16);
  color: #d3c3ff;
}

.ps-v2-chip.is-info {
  background: rgba(82, 184, 255, 0.14);
  color: #b6e2ff;
}

.ps-v2-chip.is-success {
  background: rgba(35, 209, 139, 0.14);
  color: #b4f5d6;
}

.ps-v2-chip.is-warning {
  background: rgba(255, 191, 71, 0.14);
  color: #ffe0a8;
}

.ps-v2-chip.is-danger {
  background: rgba(255, 111, 139, 0.14);
  color: #ffc0ce;
}

.ps-v2-chip.is-muted,
.ps-v2-pill,
.ps-v2-tag {
  background: var(--surface-4);
  color: var(--text-3);
  border: 1px solid var(--surface-5);
}

.ps-v2-hero h1,
.ps-v2-hero h2 {
  margin: 14px 0 0;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.ps-v2-hero p {
  margin: 12px 0 0;
  color: var(--text-3);
  line-height: 1.72;
}

.ps-v2-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.ps-v2-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ps-v2-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ps-v2-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ps-v2-card,
.ps-v2-panel {
  border-radius: 26px;
  overflow: hidden;
}

.ps-v2-card__head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--surface-5);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.ps-v2-card__head h3 {
  margin: 0;
  font-size: 17px;
}

.ps-v2-card__head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-4);
}

.ps-v2-card__body {
  padding: 20px;
}

.ps-v2-stat {
  border-radius: 20px;
  padding: 16px;
  background: var(--surface-3);
  border: 1px solid var(--surface-5);
}

.ps-v2-stat__label {
  font-size: 12px;
  color: var(--text-4);
}

.ps-v2-stat__value {
  margin-top: 8px;
  font-size: clamp(24px, 2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ps-v2-stat__hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-4);
}

.ps-v2-list,
.ps-v2-stack {
  display: grid;
  gap: 12px;
}

.ps-v2-row {
  border: 1px solid var(--surface-5);
  border-radius: 20px;
  background: var(--surface-2);
  padding: 16px;
}

.ps-v2-row__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.ps-v2-row__sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-4);
  line-height: 1.6;
}

.ps-v2-row__meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ps-v2-table {
  display: grid;
  gap: 10px;
}

.ps-v2-table__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(4, minmax(90px, 1fr));
  gap: 12px;
  align-items: start;
  border: 1px solid var(--surface-5);
  border-radius: 20px;
  padding: 16px;
  background: var(--surface-2);
}

.ps-v2-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ps-v2-panel {
  padding: 16px;
}

.ps-v2-panel strong {
  display: block;
  font-size: 14px;
}

.ps-v2-panel p,
.ps-v2-panel li,
.ps-v2-panel dd {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.65;
}

.ps-v2-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-4);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 20px;
}

@media (max-width: 1200px) {
  .ps-shell-topbar__inner {
    grid-template-columns: 1fr;
  }

  .ps-shell-actions {
    justify-content: flex-start;
  }

  .ps-v2-grid.cols-4,
  .ps-v2-grid.cols-3,
  .ps-v2-grid.cols-2,
  .ps-v2-form-grid,
  .ps-v2-table__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ps-v2-page {
    padding: 16px;
  }

  .ps-shell-nav,
  .ps-shell-search {
    display: none;
  }
}


/* ==========================================================
   v2 Mockup CSS — merged from specs/mockups/v2/ (Step 55)
   ========================================================== */

/* --- dashboard --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel-glass-deep);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: 1660px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 220px 1fr 480px 160px;
  gap: 16px;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(141, 99, 255, .28);
}

.brand h1 {
  margin: 0;
  font-size: 18px
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.nav a {
  color: var(--text-bright);
  text-decoration: none;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 14px;
}

.nav a.active {
  background: rgba(141, 99, 255, .18);
  color: #fff
}

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px 14px;
  color: var(--muted);
}

.search .kbd {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
}

.profile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px
}

.bell {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface-2)
}

.bell::after {
  content: "12";
  position: absolute;
  right: -5px;
  top: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-size: 11px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: linear-gradient(135deg, var(--violet), var(--blue));
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px
}

.hello {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
}

.hello h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -.03em
}

.hello p {
  margin: 6px 0 0;
  color: var(--sub);
  font-size: 15px
}

.date-badge {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--text-bright);
  font-size: 14px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.metric {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), var(--surface-1));
  box-shadow: var(--shadow);
}

.metric:before {
  content: "";
  position: absolute;
  inset: auto -10% -30% auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--surface-7), transparent 70%);
}

.metric .icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
}

.metric.violet .icon {
  background: rgba(141, 99, 255, .14);
  color: var(--accent-fg)
}

.metric.amber .icon {
  background: rgba(255, 182, 72, .14);
  color: var(--warning-fg)
}

.metric.blue .icon {
  background: rgba(77, 184, 255, .14);
  color: var(--info-fg)
}

.metric.green .icon {
  background: rgba(41, 217, 143, .14);
  color: var(--success-fg)
}

.metric .label {
  font-size: 15px;
  color: var(--text-bright)
}

.metric .value {
  margin-top: 8px;
  font-size: 54px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em
}

.metric .hint {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted)
}

.metric .delta {
  margin-left: 8px;
  color: var(--violet);
  font-weight: 700
}

.grid {
  display: grid;
  grid-template-columns: 1.2fr 1.05fr .72fr;
  gap: 16px;
}

.stack {
  display: grid;
  gap: 16px
}

.card {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-head {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.card-head h3 {
  margin: 0;
  font-size: 15px
}

.card-head p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.card-head .more {
  color: #bba8ff;
  font-size: 13px;
  text-decoration: none
}

.card-body {
  padding: 16px 18px 18px
}

.chiprow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}

.chip.active {
  background: rgba(141, 99, 255, .18);
  color: #fff;
  border-color: rgba(141, 99, 255, .20)
}

.chip.sub {
  background: var(--surface-3);
  color: var(--text-bright);
  border-color: var(--surface-5)
}

.chip.green {
  background: rgba(41, 217, 143, .14);
  color: var(--success-fg);
  border-color: rgba(41, 217, 143, .18)
}

.chip.amber {
  background: rgba(255, 182, 72, .14);
  color: var(--warning-fg);
  border-color: rgba(255, 182, 72, .18)
}

.chip.rose {
  background: rgba(255, 110, 140, .14);
  color: #ffc7d3;
  border-color: rgba(255, 110, 140, .18)
}

.chip.blue {
  background: rgba(77, 184, 255, .14);
  color: var(--info-fg);
  border-color: rgba(77, 184, 255, .18)
}

.chart-toolbar {
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.chart-box {
  border: 1px solid var(--line2);
  border-radius: 22px;
  background: linear-gradient(180deg, #0c1427, var(--panel));
  padding: 16px;
  position: relative;
  min-height: 320px;
}

.legend {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: #cfdaf0;
  margin-top: 10px
}

.legend span {
  display: flex;
  align-items: center;
  gap: 6px
}

.line {
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--violet)
}

.line.dashed {
  background: transparent;
  border-top: 2px dashed var(--blue)
}

.chart-svg {
  width: 100%;
  height: 250px;
  display: block
}

.axes {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px
}

.signal-list {
  display: grid;
  gap: 10px
}

.signal-row {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.signal-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px
}

.signal-icon.green {
  background: rgba(41, 217, 143, .14);
  color: var(--success-fg)
}

.signal-icon.amber {
  background: rgba(255, 182, 72, .14);
  color: var(--warning-fg)
}

.signal-icon.rose {
  background: rgba(255, 110, 140, .14);
  color: #ffc7d3
}

.signal-icon.blue {
  background: rgba(77, 184, 255, .14);
  color: var(--info-fg)
}

.signal-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45
}

.signal-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted)
}

.signal-budget {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright)
}

.bookmark {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: #cfdaf0
}

.side-list {
  display: grid;
  gap: 10px
}

.side-item {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px;
}

.side-item.compact {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
}

.rank {
  width: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-bright);
}

.side-item strong {
  display: block;
  font-size: 14px
}

.side-item p {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55
}

.mini-tag {
  font-size: 12px;
  font-weight: 700
}

.mini-tag.green {
  color: #7df1ba
}

.mini-tag.amber {
  color: #ffd089
}

.mini-tag.rose {
  color: #ffb0c2
}

.mini-tag.blue {
  color: #9edcff
}

.table {
  border: 1px solid var(--line2);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface-1)
}

.t-head,
.t-row {
  display: grid;
  grid-template-columns: 1.85fr .58fr .52fr .42fr .52fr;
  gap: 12px;
  align-items: center;
}

.t-head {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--line2);
  background: var(--surface-1)
}

.t-row {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line2);
  font-size: 13px;
}

.t-row:last-child {
  border-bottom: none
}

.t-row .name {
  color: #fff;
  line-height: 1.5
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800
}

.badge.green {
  background: rgba(41, 217, 143, .14);
  color: var(--success-fg)
}

.badge.amber {
  background: rgba(255, 182, 72, .14);
  color: var(--warning-fg)
}

.badge.blue {
  background: rgba(77, 184, 255, .14);
  color: var(--info-fg)
}

.foot-legend {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legend-pill {
  border: 1px solid var(--line2);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%
}

.dot.green {
  background: var(--green)
}

.dot.rose {
  background: var(--rose)
}

.dot.amber {
  background: var(--amber)
}

.dot.blue {
  background: var(--blue)
}

.dot.violet {
  background: var(--violet)
}

.donut-wrap {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
}

.donut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--violet) 0 42%, var(--blue) 42% 65%, var(--amber) 65% 85%, var(--green) 85% 100%);
  position: relative;
  margin: auto;
}

.donut::after {
  content: "";
  position: absolute;
  inset: 20px;
  background: var(--donut-hole);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--surface-5);
}

.donut-total {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 2;
  font-size: 12px;
  color: var(--muted);
}

.donut-total strong {
  display: block;
  font-size: 18px;
  color: var(--donut-total-fg);
}

@media (max-width:1500px) {
  .topbar-inner {
    grid-template-columns: 220px 1fr
  }

  .search,
  .profile {
    display: none
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid {
    grid-template-columns: 1fr
  }

  .hero-top {
    flex-direction: column;
    align-items: flex-start
  }

  .hero-side {
    min-width: 0;
    width: 100%
  }
}

@media (max-width:1100px) {
  .nav {
    display: none
  }
}

@media (max-width:760px) {
  .wrap {
    padding: 16px
  }

  .topbar-inner {
    padding: 14px 16px
  }

  .hello {
    grid-template-columns: 1fr
  }

  .hero h2 {
    font-size: 28px
  }

  .metrics {
    grid-template-columns: 1fr
  }

  .hero-side {
    grid-template-columns: 1fr
  }

  .signal-row {
    grid-template-columns: 40px 1fr;
  }

  .signal-budget,
  .bookmark {
    justify-self: start
  }

  .t-head {
    display: none
  }

  .t-row {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .donut-wrap {
    grid-template-columns: 1fr
  }
}

/* --- notice list --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: var(--panel-glass);
  border-bottom: 1px solid var(--line)
}

.topbar-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 220px 1fr 340px 170px;
  gap: 16px;
  align-items: center
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: linear-gradient(135deg, #835dff, #42b6ff);
  box-shadow: 0 12px 28px rgba(130, 93, 255, .28)
}

.brand h1 {
  margin: 0;
  font-size: 18px
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.nav a {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--text-bright);
  text-decoration: none
}

.nav a.active {
  background: rgba(141, 99, 255, .18);
  color: #fff
}

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted)
}

.search kbd {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px
}

.profile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(135deg, #835dff, #42b6ff)
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 40px
}

.hero {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(141, 99, 255, .20), rgba(82, 184, 255, .08) 40%, var(--surface-2) 100%), var(--surface-2);
  box-shadow: var(--shadow)
}

.hero h1 {
  margin: 10px 0 0;
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: -.03em
}

.hero p {
  margin: 12px 0 0;
  max-width: 980px;
  color: var(--sub);
  line-height: 1.7
}

.chips,
.legend,
.preset-row,
.tools-right,
.head-right,
.row-signals,
.row-tags,
.saved-inline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent
}

.violet {
  background: rgba(141, 99, 255, .14);
  color: var(--accent-fg);
  border-color: rgba(141, 99, 255, .22)
}

.blue {
  background: rgba(82, 184, 255, .12);
  color: var(--info-fg);
  border-color: rgba(82, 184, 255, .20)
}

.green {
  background: rgba(35, 209, 139, .12);
  color: var(--success-fg);
  border-color: rgba(35, 209, 139, .18)
}

.amber {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
  border-color: rgba(255, 191, 71, .18)
}

.rose {
  background: rgba(255, 111, 139, .12);
  color: var(--danger-fg);
  border-color: rgba(255, 111, 139, .18)
}

.slate {
  background: var(--surface-4);
  color: var(--text-bright);
  border-color: var(--surface-7)
}

.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end
}

.hero-side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 460px
}

.kpi {
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 14px;
  background: var(--surface-3)
}

.kpi .k {
  font-size: 12px;
  color: var(--muted)
}

.kpi .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800
}

.layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  margin-top: 20px
}

.card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  overflow: hidden
}

.card-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px
}

.card-head h3 {
  margin: 0;
  font-size: 17px
}

.card-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px
}

.card-body {
  padding: 20px
}

.filter-wrap {
  position: sticky;
  top: 92px
}

.collapse-toggle {
  border: 1px solid var(--line2);
  background: var(--surface-3);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  white-space: nowrap
}

.preset-row {
  margin-top: 14px
}

.preset {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--line2);
  background: var(--panel-elevated);
  border-radius: 16px;
  padding: 12px
}

.preset .name {
  font-size: 13px;
  font-weight: 800;
  color: #f2f7ff
}

.preset .meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5
}

.preset.active {
  background: linear-gradient(135deg, rgba(141, 99, 255, .18), rgba(82, 184, 255, .08));
  border-color: rgba(141, 99, 255, .22)
}

.preset.ghost {
  display: grid;
  place-items: center;
  color: #cdbaff;
  font-weight: 800
}

.filter-group {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--surface-5)
}

.filter-group:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none
}

.filter-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-2);
  margin-bottom: 12px
}

/* disabled / unavailable control affordance (shared) */
.ps-disabled-stub,
button:disabled,
select:disabled,
input:disabled,
.ps-page-link.disabled {
  cursor: not-allowed !important;
}

button:disabled,
select:disabled,
input:disabled {
  opacity: 0.72;
}

.input,
.range,
.select {
  border: 1px solid var(--line2);
  background: var(--bg-input);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 13px
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px
}

.choice,
.tagbtn,
.sort-btn,
.view-btn {
  border: 1px solid var(--line2);
  background: var(--surface-2);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  text-align: left
}

.choice.active,
.sort-btn.active,
.view-btn.active {
  background: rgba(141, 99, 255, .16);
  border-color: rgba(141, 99, 255, .22);
  color: #fff
}
/* light: solid accent so selected chips read clearly (soft purple + white failed AA) */
[data-theme="light"] .choice.active,
[data-theme="light"] .sort-btn.active,
[data-theme="light"] .view-btn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.tagbtn.active-green {
  background: rgba(35, 209, 139, .12);
  border-color: rgba(35, 209, 139, .18);
  color: var(--success-fg)
}

.tagbtn.active-amber {
  background: rgba(255, 191, 71, .12);
  border-color: rgba(255, 191, 71, .18);
  color: var(--warning-fg)
}

.tagbtn.active-blue {
  background: rgba(82, 184, 255, .12);
  border-color: rgba(82, 184, 255, .18);
  color: var(--info-fg)
}

.tagbtn.active-rose {
  background: rgba(255, 111, 139, .12);
  border-color: rgba(255, 111, 139, .18);
  color: var(--danger-fg)
}

.apply {
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--violet), #50b7ff);
  color: #fff;
  font-size: 14px;
  font-weight: 800
}

.tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 14px 18px;
  background: var(--surface-2)
}

.tools-left {
  display: grid;
  gap: 10px
}

.count {
  font-size: 14px;
  color: var(--text-bright)
}

.saved-label {
  font-size: 12px;
  color: var(--muted)
}

.saved-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--panel-elevated);
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 700
}

.saved-chip.active {
  background: rgba(141, 99, 255, .16);
  border-color: rgba(141, 99, 255, .22);
  color: #fff
}

.results-card {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface-2)
}

.results-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--surface-5);
  display: grid;
  grid-template-columns: 1.8fr .58fr .62fr .8fr .95fr 1.1fr .58fr;
  gap: 10px;
  font-size: 12px;
  color: var(--muted)
}

.result-row {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1.8fr .58fr .62fr .8fr .95fr 1.1fr .58fr;
  gap: 10px;
  border-top: 1px solid var(--surface-5);
  align-items: start
}

.title-wrap {
  display: grid;
  gap: 8px
}

.title-wrap h4 {
  margin: 0;
  font-size: 16px;
  line-height: 1.45
}

.sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55
}

.row-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.tiny {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--surface-3);
  font-size: 11px;
  color: var(--sub)
}

.cell {
  font-size: 13px;
  color: var(--text-bright);
  line-height: 1.55
}

.score-cell {
  border: 1px solid rgba(35, 209, 139, .18);
  background: linear-gradient(135deg, rgba(35, 209, 139, .12), rgba(35, 209, 139, .04));
  border-radius: 16px;
  padding: 10px 12px
}

.score-cell .k {
  font-size: 11px;
  color: #c1f3de
}

.score-cell .v {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #fff
}

.score-cell .s {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: #daf9ea
}

.row-signals {
  gap: 6px
}

.sig {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid transparent
}

.sig.g {
  background: rgba(35, 209, 139, .12);
  color: var(--success-fg);
  border-color: rgba(35, 209, 139, .18)
}

.sig.b {
  background: rgba(82, 184, 255, .12);
  color: var(--info-fg);
  border-color: rgba(82, 184, 255, .18)
}

.sig.a {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
  border-color: rgba(255, 191, 71, .18)
}

.sig.r {
  background: rgba(255, 111, 139, .12);
  color: var(--danger-fg);
  border-color: rgba(255, 111, 139, .18)
}

.row-tags {
  gap: 6px
}

.tag {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line2);
  font-size: 11px;
  color: #dfe8fa
}

.actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center
}

.icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--surface-3);
  color: var(--text-bright);
  display: grid;
  place-items: center;
  font-size: 14px
}

.mobile-list {
  display: none;
  gap: 12px;
  margin-top: 14px
}

.mobile-card {
  border: 1px solid var(--line2);
  border-radius: 22px;
  background: var(--surface-2);
  padding: 16px
}

.mobile-card h4 {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.45
}

.mobile-card .mgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px
}

.mobile-card .mini {
  border: 1px solid var(--line2);
  background: var(--panel-elevated);
  border-radius: 14px;
  padding: 10px 12px
}

.mobile-card .mini .k {
  font-size: 11px;
  color: var(--muted)
}

.mobile-card .mini .v {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700
}

@media (max-width:1450px) {
  .topbar-inner {
    grid-template-columns: 220px 1fr
  }

  .search,
  .profile {
    display: none
  }

  .layout {
    grid-template-columns: 1fr
  }

  .filter-wrap {
    position: static
  }

  .hero-top {
    flex-direction: column
  }

  .hero-side {
    min-width: 0;
    width: 100%
  }
}

@media (max-width:1120px) {
  .nav {
    display: none
  }

  .hero h1 {
    font-size: 30px
  }

  .hero-side {
    grid-template-columns: 1fr
  }

  .results-head,
  .result-row {
    display: none
  }

  .mobile-list {
    display: grid
  }
}

@media (max-width:760px) {
  .wrap {
    padding: 16px
  }

  .topbar-inner {
    padding: 14px 16px
  }

  .input-row,
  .choice-grid,
  .mobile-card .mgrid {
    grid-template-columns: 1fr
  }

  .tools {
    align-items: flex-start;
    flex-direction: column
  }
}

/* --- notice detail --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: var(--panel-glass);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: 1640px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 220px 1fr 320px 170px;
  gap: 16px;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: linear-gradient(135deg, #835dff, #42b6ff);
  box-shadow: 0 12px 28px rgba(130, 93, 255, .28)
}

.brand h1 {
  margin: 0;
  font-size: 18px
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.nav a {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  color: #d9e2f2;
  text-decoration: none
}

.nav a.active {
  background: rgba(141, 99, 255, .18);
  color: #fff
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted)
}

.search kbd {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--muted)
}

.profile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(135deg, #835dff, #42b6ff)
}

.profile .plan {
  font-size: 12px;
  color: #cdbbff
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 24px 40px
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px
}

.crumb {
  font-size: 13px;
  color: var(--muted)
}

.btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.btn {
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--text-bright);
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px
}

.btn.primary {
  border: none;
  background: linear-gradient(135deg, var(--violet), #50b7ff);
  font-weight: 700;
  color: #fff
}

.hero {
  border: 1px solid var(--line);
  border-radius: 32px;
  box-shadow: var(--shadow);
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(141, 99, 255, .22), rgba(82, 184, 255, .08) 40%, var(--surface-2) 100%),
    var(--surface-2);
}

.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start
}

.hero-kickers,
.badges,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent
}

.c-violet {
  background: rgba(141, 99, 255, .14);
  color: var(--accent-fg);
  border-color: rgba(141, 99, 255, .22)
}

.c-blue {
  background: rgba(82, 184, 255, .12);
  color: var(--info-fg);
  border-color: rgba(82, 184, 255, .20)
}

.c-green {
  background: rgba(35, 209, 139, .12);
  color: var(--success-fg);
  border-color: rgba(35, 209, 139, .18)
}

.c-amber {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
  border-color: rgba(255, 191, 71, .18)
}

.c-rose {
  background: rgba(255, 111, 139, .12);
  color: var(--danger-fg);
  border-color: rgba(255, 111, 139, .18)
}

.c-slate {
  background: var(--surface-4);
  color: #d7e0ef;
  border-color: var(--surface-7)
}

.hero h2 {
  margin: 14px 0 0;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: -.03em;
  max-width: 980px
}

.hero-sub {
  margin-top: 12px;
  max-width: 960px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--sub)
}

.hero-right {
  width: 320px;
  display: grid;
  gap: 12px
}

.score {
  border-radius: 24px;
  padding: 18px;
  border: 1px solid rgba(35, 209, 139, .20);
  background: linear-gradient(135deg, rgba(35, 209, 139, .18), rgba(35, 209, 139, .05));
}

.score .k {
  font-size: 12px;
  color: #b9f2d9
}

.score .v {
  font-size: 36px;
  font-weight: 800;
  margin-top: 6px
}

.score .s {
  margin-top: 8px;
  font-size: 13px;
  color: #daf9ea;
  line-height: 1.6
}

.hero-note {
  border: 1px solid rgba(255, 191, 71, .18);
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 191, 71, .13), rgba(255, 111, 139, .08));
}

.hero-note strong {
  display: block;
  color: #ffe5b1;
  font-size: 14px
}

.hero-note p {
  margin: 8px 0 0;
  color: #ffeed2;
  font-size: 13px;
  line-height: 1.7
}

.facts {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px
}

.fact {
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: var(--surface-3)
}

.fact .k {
  font-size: 12px;
  color: var(--muted)
}

.fact .v {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45
}

.fact .s {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted)
}

.layout {
  display: grid;
  grid-template-columns: 1.06fr 1.34fr .94fr;
  gap: 18px;
  margin-top: 20px
}

.stack {
  display: grid;
  gap: 18px
}

.card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  overflow: hidden
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-2)
}

.card-head h3 {
  margin: 0;
  font-size: 17px
}

.card-head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted)
}

.card-body {
  padding: 20px
}

.head-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.inline-pill {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-4)
}

.pill-live {
  background: rgba(141, 99, 255, .15);
  color: var(--accent-fg)
}

.pill-ok {
  background: rgba(35, 209, 139, .14);
  color: var(--success-fg)
}

.pill-warn {
  background: rgba(255, 191, 71, .14);
  color: var(--warning-fg)
}

.pill-stop {
  background: rgba(255, 111, 139, .14);
  color: var(--danger-fg)
}

.timeline {
  display: grid;
  gap: 12px
}

.timeline-item {
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px
}

.step {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(141, 99, 255, .14);
  color: var(--accent-fg)
}

.step.warn {
  background: rgba(255, 191, 71, .14);
  color: var(--warning-fg)
}

.step.stop {
  background: rgba(255, 111, 139, .14);
  color: var(--danger-fg)
}

.timeline-title {
  font-size: 14px;
  font-weight: 700
}

.timeline-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 4px
}

.links {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.tiny-link {
  text-decoration: none;
  color: #dde7f8;
  font-size: 11px;
  padding: 6px 9px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface-2)
}

.tiny-note {
  margin-top: 6px;
  font-size: 11px;
  color: #7fd8ff
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.info-box,
.stat,
.notice,
.attach,
.issue,
.mobile-history {
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 18px
}

.info-box,
.stat,
.issue {
  padding: 14px
}

.info-box .k,
.stat .k {
  font-size: 12px;
  color: var(--muted)
}

.info-box .v {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55
}

.stat {
  background: var(--panel-elevated)
}

.stat .k {
  color: #ced7e6;
  font-weight: 700;
  font-size: 13px
}

.stat .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800
}

.stat .s {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px
}

.stat.warn .v {
  color: var(--warning-fg)
}

.stat.green .v {
  color: var(--success-fg)
}

.issue-grid {
  margin-top: 14px;
  display: grid;
  gap: 10px
}

.issue strong {
  display: block;
  font-size: 14px
}

.issue p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--sub)
}

.issue.delay {
  background: linear-gradient(135deg, rgba(255, 111, 139, .12), rgba(255, 111, 139, .04));
  border-color: rgba(255, 111, 139, .16)
}

.issue.scope {
  background: linear-gradient(135deg, rgba(255, 191, 71, .12), rgba(255, 191, 71, .04));
  border-color: rgba(255, 191, 71, .16)
}

.issue.pipeline {
  background: linear-gradient(135deg, rgba(82, 184, 255, .12), rgba(82, 184, 255, .04));
  border-color: rgba(82, 184, 255, .16)
}

.score-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px
}

.band {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: var(--panel-elevated)
}

.band .k {
  font-size: 12px;
  color: var(--muted)
}

.band .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800
}

.band.green .v {
  color: var(--success-fg)
}

.band.blue .v {
  color: var(--info-fg)
}

.band.amber .v {
  color: var(--warning-fg)
}

.band.rose .v {
  color: var(--danger-fg)
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-7);
  overflow: hidden;
  margin-top: 10px
}

.bar i {
  display: block;
  height: 100%;
  border-radius: 999px
}

.green i {
  background: linear-gradient(90deg, var(--green), #6eeeb9)
}

.blue i {
  background: linear-gradient(90deg, var(--sky), #8fdcff)
}

.amber i {
  background: linear-gradient(90deg, var(--amber), #ffd88a)
}

.rose i {
  background: linear-gradient(90deg, var(--rose), #ffb9c8)
}

.insight {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 18px
}

.icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(141, 99, 255, .16);
  color: var(--accent-fg)
}

.insight p {
  margin: 0;
  color: var(--sub);
  font-size: 14px;
  line-height: 1.72
}

.insight .e {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted)
}

.table-head {
  display: grid;
  grid-template-columns: 1.7fr .6fr 1fr .55fr .55fr;
  gap: 12px;
  padding: 0 8px 10px;
  color: var(--muted);
  font-size: 12px
}

.history {
  display: grid;
  gap: 10px
}

.hist {
  display: grid;
  grid-template-columns: 1.7fr .6fr 1fr .55fr .55fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 18px
}

.hist .title {
  font-size: 13px;
  line-height: 1.55
}

.hist .cell {
  font-size: 13px;
  color: #dfe8fb
}

.ok {
  color: var(--success-fg);
  font-weight: 700
}

.watch {
  color: var(--warning-fg);
  font-weight: 700
}

.mobile-history {
  display: none;
  padding: 14px;
  margin-bottom: 10px
}

.mobile-history .line {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px
}

.mobile-history .label {
  min-width: 72px;
  color: var(--muted)
}

.mini-list {
  display: grid;
  gap: 10px
}

.notice strong {
  display: block;
  font-size: 14px
}

.notice p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sub);
  line-height: 1.65
}

.notice .sub-tag {
  margin-top: 8px;
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-4);
  color: #cfd7e7
}

.notice .sub-tag.example {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg)
}

.attach {
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px
}

.attach .name {
  font-size: 13px;
  font-weight: 700
}

.attach .meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted)
}

.file-tag {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(82, 184, 255, .14);
  color: var(--info-fg)
}

.tags {
  gap: 9px
}

.tag {
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  font-size: 13px;
  color: var(--text-bright)
}

.note-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 191, 71, .18);
  background: linear-gradient(135deg, rgba(255, 191, 71, .10), var(--surface-2))
}

.note-panel strong {
  font-size: 13px;
  color: #ffe1a2
}

.note-panel p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: #f7ebd0
}

@media (max-width:1400px) {
  .topbar-inner {
    grid-template-columns: 220px 1fr
  }

  .search,
  .profile {
    display: none
  }

  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .layout {
    grid-template-columns: 1fr
  }
}

@media (max-width:900px) {
  .wrap {
    padding: 16px
  }

  .topbar-inner {
    padding: 14px 16px
  }

  .nav {
    display: none
  }

  .page-head {
    flex-direction: column;
    align-items: flex-start
  }

  .hero-top {
    flex-direction: column
  }

  .hero-right {
    width: 100%
  }

  .hero h2 {
    font-size: 30px
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .score-band {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid2 {
    grid-template-columns: 1fr
  }

  .table-head,
  .hist {
    display: none
  }

  .mobile-history {
    display: block
  }

  .head-side {
    justify-content: flex-start
  }
}

/* --- agency detail --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: var(--panel-glass);
  border-bottom: 1px solid var(--line)
}

.topbar-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 220px 1fr 340px 170px;
  gap: 16px;
  align-items: center
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: linear-gradient(135deg, #835dff, #42b6ff);
  box-shadow: 0 12px 28px rgba(130, 93, 255, .28)
}

.brand h1 {
  margin: 0;
  font-size: 18px
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.nav a {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--text-bright);
  text-decoration: none
}

.nav a.active {
  background: rgba(141, 99, 255, .18);
  color: #fff
}

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted)
}

.search kbd {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px
}

.profile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(135deg, #835dff, #42b6ff)
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 44px
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px
}

.crumb {
  font-size: 13px;
  color: var(--muted)
}

.btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.btn {
  border: 1px solid var(--line2);
  background: var(--surface-3);
  color: var(--text-bright);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 14px
}

.btn.primary {
  border: none;
  background: linear-gradient(135deg, var(--violet), #50b7ff);
  font-weight: 800;
  color: #fff
}

.hero {
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(82, 184, 255, .18), rgba(141, 99, 255, .08) 40%, var(--surface-2) 100%),
    var(--surface-2);
  box-shadow: var(--shadow)
}

.chips,
.badges,
.tags,
.legend,
.toggles,
.toggle-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.chip,
.seg {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent
}

.seg {
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: var(--surface-2);
  color: var(--text-bright);
  cursor: pointer
}

.seg.active {
  background: rgba(141, 99, 255, .16);
  border-color: rgba(141, 99, 255, .22);
  color: #fff
}

.violet {
  background: rgba(141, 99, 255, .14);
  color: var(--accent-fg);
  border-color: rgba(141, 99, 255, .22)
}

.blue {
  background: rgba(82, 184, 255, .12);
  color: var(--info-fg);
  border-color: rgba(82, 184, 255, .20)
}

.green {
  background: rgba(35, 209, 139, .12);
  color: var(--success-fg);
  border-color: rgba(35, 209, 139, .18)
}

.amber {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
  border-color: rgba(255, 191, 71, .18)
}

.rose {
  background: rgba(255, 111, 139, .12);
  color: var(--danger-fg);
  border-color: rgba(255, 111, 139, .18)
}

.slate {
  background: var(--surface-4);
  color: var(--text-bright);
  border-color: var(--surface-7)
}

.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start
}

.hero h1 {
  margin: 14px 0 0;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: -.03em
}

.hero-sub {
  margin-top: 12px;
  max-width: 980px;
  color: var(--sub);
  line-height: 1.75;
  font-size: 15px
}

.hero-right {
  width: 360px;
  display: grid;
  gap: 12px
}

.hero-note {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(82, 184, 255, .18);
  background: linear-gradient(135deg, rgba(82, 184, 255, .12), rgba(141, 99, 255, .08))
}

.hero-note strong {
  display: block;
  font-size: 14px;
  color: #c6eaff
}

.hero-note p {
  margin: 8px 0 0;
  font-size: 13px;
  color: #ebf8ff;
  line-height: 1.7
}

.hero-score {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(35, 209, 139, .22);
  background: linear-gradient(135deg, rgba(35, 209, 139, .18), rgba(35, 209, 139, .05))
}

.hero-score .k {
  font-size: 12px;
  color: #c6f4df
}

.hero-score .v {
  margin-top: 8px;
  font-size: 36px;
  font-weight: 800
}

.hero-score .s {
  margin-top: 8px;
  font-size: 13px;
  color: #dcfaeb;
  line-height: 1.65
}

.facts {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px
}

.fact {
  min-height: 88px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 14px;
  background: var(--surface-3)
}

.fact .k {
  font-size: 12px;
  color: var(--muted)
}

.fact .v {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45
}

.fact .s {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted)
}

.kpi-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px
}

.kpi {
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 14px;
  background: var(--panel-elevated)
}

.kpi .k {
  font-size: 12px;
  color: var(--muted)
}

.kpi .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800
}

.kpi .s {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted)
}

.kpi.green .v {
  color: var(--success-fg)
}

.kpi.amber .v {
  color: var(--warning-fg)
}

.kpi.blue .v {
  color: var(--info-fg)
}

.kpi.rose .v {
  color: var(--danger-fg)
}

.layout {
  display: grid;
  grid-template-columns: 1.14fr .96fr .9fr;
  gap: 18px;
  margin-top: 20px
}

.stack {
  display: grid;
  gap: 18px
}

.card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  overflow: hidden
}

.card-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px
}

.card-head h3 {
  margin: 0;
  font-size: 17px
}

.card-head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted)
}

.card-body {
  padding: 20px
}

.head-side {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.pill {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: var(--surface-4)
}

.pill.live {
  background: rgba(141, 99, 255, .16);
  color: var(--accent-fg)
}

.pill.ok {
  background: rgba(35, 209, 139, .14);
  color: var(--success-fg)
}

.pill.warn {
  background: rgba(255, 191, 71, .14);
  color: var(--warning-fg)
}

.chart-wrap {
  border: 1px solid var(--line2);
  border-radius: 22px;
  background: var(--panel-elevated);
  padding: 16px;
  position: relative
}

.axis-note {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted)
}

.bar-chart {
  position: relative;
  height: 320px;
  padding: 10px 10px 36px 48px
}

.grid-lines {
  position: absolute;
  left: 48px;
  right: 10px;
  top: 10px;
  bottom: 36px;
  display: grid;
  grid-template-rows: repeat(5, 1fr)
}

.grid-lines div {
  border-top: 1px dashed var(--surface-7)
}

.y-labels {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 36px;
  width: 44px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  text-align: right;
  font-size: 11px;
  color: var(--muted)
}

.y-labels span {
  transform: translateY(-8px);
  padding-right: 8px
}

.bars {
  position: absolute;
  left: 48px;
  right: 10px;
  top: 10px;
  bottom: 36px;
  display: flex;
  align-items: flex-end;
  gap: 18px
}

.bar-item {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.bar {
  width: 72%;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(82, 184, 255, .92), rgba(82, 184, 255, .22));
  position: relative;
  cursor: pointer;
  transition: transform .15s ease
}

.bar.budget {
  background: linear-gradient(180deg, rgba(141, 99, 255, .92), rgba(141, 99, 255, .22))
}

.bar:hover {
  transform: translateY(-2px)
}

.x-label {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap
}

.tooltip {
  position: absolute;
  pointer-events: none;
  min-width: 160px;
  max-width: 220px;
  z-index: 5;
  background: #111d33;
  border: 1px solid var(--surface-8);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  font-size: 12px;
  color: var(--text-bright);
  display: none
}

.tooltip .t-title {
  font-weight: 800;
  color: #fff
}

.tooltip .t-body {
  margin-top: 6px;
  color: #cdd8ea;
  line-height: 1.5
}

.line-chart {
  border: 1px solid var(--line2);
  border-radius: 22px;
  background: var(--panel-elevated);
  padding: 16px;
  position: relative
}

.line-inner {
  position: relative;
  height: 280px;
  padding: 10px 10px 36px 54px
}

.line-grid {
  position: absolute;
  left: 54px;
  right: 10px;
  top: 10px;
  bottom: 36px;
  display: grid;
  grid-template-rows: repeat(5, 1fr)
}

.line-grid div {
  border-top: 1px dashed var(--surface-7)
}

.line-ylabels {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 36px;
  width: 50px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  text-align: right;
  font-size: 11px;
  color: var(--muted)
}

.line-ylabels span {
  transform: translateY(-8px);
  padding-right: 8px
}

.line-xlabels {
  position: absolute;
  left: 54px;
  right: 10px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted)
}

.line-svg {
  position: absolute;
  left: 54px;
  right: 10px;
  top: 10px;
  bottom: 36px;
  width: calc(100% - 64px);
  height: calc(100% - 46px)
}

.line-point {
  cursor: pointer
}

.issue-grid {
  display: grid;
  gap: 10px
}

.issue {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px
}

.issue strong {
  display: block;
  font-size: 14px
}

.issue p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sub);
  line-height: 1.65
}

.issue.delay {
  background: linear-gradient(135deg, rgba(255, 111, 139, .12), rgba(255, 111, 139, .04));
  border-color: rgba(255, 111, 139, .16)
}

.issue.scope {
  background: linear-gradient(135deg, rgba(255, 191, 71, .12), rgba(255, 191, 71, .04));
  border-color: rgba(255, 191, 71, .16)
}

.issue.pipeline {
  background: linear-gradient(135deg, rgba(82, 184, 255, .12), rgba(82, 184, 255, .04));
  border-color: rgba(82, 184, 255, .16)
}

.issue.green {
  background: linear-gradient(135deg, rgba(35, 209, 139, .12), rgba(35, 209, 139, .04));
  border-color: rgba(35, 209, 139, .16)
}

.proj-list,
.rank-list,
.mini-list {
  display: grid;
  gap: 10px
}

.proj,
.mini {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px
}

.proj .title,
.mini strong {
  font-size: 14px;
  font-weight: 800
}

.proj .meta,
.mini p {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55
}

.proj .status {
  margin-top: 8px;
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800
}

.status.live {
  background: rgba(141, 99, 255, .16);
  color: var(--accent-fg)
}

.status.plan {
  background: rgba(82, 184, 255, .14);
  color: var(--info-fg)
}

.status.fixed {
  background: rgba(35, 209, 139, .14);
  color: var(--success-fg)
}

.status.watch {
  background: rgba(255, 191, 71, .14);
  color: var(--warning-fg)
}

.rank {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.rank .left {
  display: flex;
  align-items: center;
  gap: 10px
}

.rank .num {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface-4);
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 800
}

.rank .name {
  font-size: 14px;
  font-weight: 800
}

.rank .meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px
}

.rank .score {
  font-size: 14px;
  font-weight: 800;
  color: var(--info-fg)
}

.tag {
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--surface-3);
  font-size: 13px;
  color: var(--text-bright)
}

.memo {
  border: 1px solid rgba(255, 191, 71, .18);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 191, 71, .10), var(--surface-2))
}

.memo strong {
  font-size: 13px;
  color: #ffe2a2
}

.memo p {
  margin: 8px 0 0;
  font-size: 12px;
  color: #fff0cf;
  line-height: 1.65
}

@media (max-width:1450px) {
  .topbar-inner {
    grid-template-columns: 220px 1fr
  }

  .search,
  .profile {
    display: none
  }

  .hero-top {
    flex-direction: column
  }

  .hero-right {
    width: 100%
  }

  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .layout {
    grid-template-columns: 1fr
  }
}

@media (max-width:900px) {
  .nav {
    display: none
  }

  .wrap {
    padding: 16px
  }

  .topbar-inner {
    padding: 14px 16px
  }

  .page-head {
    flex-direction: column;
    align-items: flex-start
  }

  .hero h1 {
    font-size: 30px
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .toggles {
    flex-direction: column;
    align-items: flex-start
  }
}

/* --- vendor detail --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: var(--panel-glass);
  border-bottom: 1px solid var(--line)
}

.topbar-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 220px 1fr 340px 170px;
  gap: 16px;
  align-items: center
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: linear-gradient(135deg, #835dff, #42b6ff);
  box-shadow: 0 12px 28px rgba(130, 93, 255, .28)
}

.brand h1 {
  margin: 0;
  font-size: 18px
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.nav a {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--text-bright);
  text-decoration: none
}

.nav a.active {
  background: rgba(141, 99, 255, .18);
  color: #fff
}

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted)
}

.search kbd {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px
}

.profile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(135deg, #835dff, #42b6ff)
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 44px
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px
}

.crumb {
  font-size: 13px;
  color: var(--muted)
}

.btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.btn {
  border: 1px solid var(--line2);
  background: var(--surface-3);
  color: var(--text-bright);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer
}

.btn.primary {
  border: none;
  background: linear-gradient(135deg, var(--violet), #50b7ff);
  font-weight: 800;
  color: #fff
}

.btn.green {
  border: none;
  background: linear-gradient(135deg, #1dbb78, #2ad18f);
  font-weight: 800;
  color: #fff
}

.hero {
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(35, 209, 139, .18), rgba(82, 184, 255, .10) 36%, var(--surface-2) 100%),
    var(--surface-2);
  box-shadow: var(--shadow)
}

.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start
}

.chips,
.badges,
.tags,
.legend,
.toggle-group,
.history-filter,
.row-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.chip,
.seg {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent
}

.seg {
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: var(--surface-2);
  color: var(--text-bright);
  cursor: pointer
}

.seg.active {
  background: rgba(141, 99, 255, .16);
  border-color: rgba(141, 99, 255, .22);
  color: #fff
}

.violet {
  background: rgba(141, 99, 255, .14);
  color: var(--accent-fg);
  border-color: rgba(141, 99, 255, .22)
}

.blue {
  background: rgba(82, 184, 255, .12);
  color: var(--info-fg);
  border-color: rgba(82, 184, 255, .20)
}

.green {
  background: rgba(35, 209, 139, .12);
  color: var(--success-fg);
  border-color: rgba(35, 209, 139, .18)
}

.amber {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
  border-color: rgba(255, 191, 71, .18)
}

.rose {
  background: rgba(255, 111, 139, .12);
  color: var(--danger-fg);
  border-color: rgba(255, 111, 139, .18)
}

.slate {
  background: var(--surface-4);
  color: var(--text-bright);
  border-color: var(--surface-7)
}

.hero h1 {
  margin: 14px 0 0;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: -.03em
}

.hero-sub {
  margin-top: 12px;
  max-width: 980px;
  color: var(--sub);
  line-height: 1.75;
  font-size: 15px
}

.hero-right {
  width: 370px;
  display: grid;
  gap: 12px
}

.hero-score {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(35, 209, 139, .22);
  background: linear-gradient(135deg, rgba(35, 209, 139, .18), rgba(35, 209, 139, .05))
}

.hero-score .k {
  font-size: 12px;
  color: #c6f4df
}

.hero-score .v {
  margin-top: 8px;
  font-size: 36px;
  font-weight: 800
}

.hero-score .s {
  margin-top: 8px;
  font-size: 13px;
  color: #dcfaeb;
  line-height: 1.65
}

.hero-note {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(82, 184, 255, .18);
  background: linear-gradient(135deg, rgba(82, 184, 255, .12), rgba(141, 99, 255, .08))
}

.hero-note strong {
  display: block;
  font-size: 14px;
  color: #c6eaff
}

.hero-note p {
  margin: 8px 0 0;
  font-size: 13px;
  color: #ebf8ff;
  line-height: 1.7
}

.hero-memo {
  margin-top: 16px;
  border: 1px solid rgba(255, 191, 71, .18);
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 191, 71, .10), var(--surface-2))
}

.hero-memo strong {
  display: block;
  font-size: 14px;
  color: #ffe0a0
}

.hero-memo p {
  margin: 8px 0 0;
  font-size: 14px;
  color: #fff0cf;
  line-height: 1.7
}

.facts {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px
}

.fact {
  min-height: 88px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 14px;
  background: var(--surface-3)
}

.fact .k {
  font-size: 12px;
  color: var(--muted)
}

.fact .v {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45
}

.fact .s {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted)
}

.kpi-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px
}

.kpi {
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 14px;
  background: var(--panel-elevated)
}

.kpi .k {
  font-size: 12px;
  color: var(--muted)
}

.kpi .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800
}

.kpi .s {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted)
}

.kpi.green .v {
  color: var(--success-fg)
}

.kpi.amber .v {
  color: var(--warning-fg)
}

.kpi.blue .v {
  color: var(--info-fg)
}

.kpi.rose .v {
  color: var(--danger-fg)
}

.layout {
  display: grid;
  grid-template-columns: 1.12fr 1fr .9fr;
  gap: 18px;
  margin-top: 20px
}

.stack {
  display: grid;
  gap: 18px
}

.card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  overflow: hidden
}

.card-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px
}

.card-head h3 {
  margin: 0;
  font-size: 17px
}

.card-head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted)
}

.card-body {
  padding: 20px
}

.head-side {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.pill {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: var(--surface-4)
}

.pill.live {
  background: rgba(141, 99, 255, .16);
  color: var(--accent-fg)
}

.pill.ok {
  background: rgba(35, 209, 139, .14);
  color: var(--success-fg)
}

.pill.warn {
  background: rgba(255, 191, 71, .14);
  color: var(--warning-fg)
}

.pill.stop {
  background: rgba(255, 111, 139, .14);
  color: var(--danger-fg)
}

.chart-wrap {
  border: 1px solid var(--line2);
  border-radius: 22px;
  background: var(--panel-elevated);
  padding: 16px;
  position: relative
}

.axis-note {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted)
}

.bar-chart {
  position: relative;
  height: 320px;
  padding: 10px 10px 36px 48px
}

.grid-lines {
  position: absolute;
  left: 48px;
  right: 10px;
  top: 10px;
  bottom: 36px;
  display: grid;
  grid-template-rows: repeat(5, 1fr)
}

.grid-lines div {
  border-top: 1px dashed var(--surface-7)
}

.y-labels {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 36px;
  width: 44px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  text-align: right;
  font-size: 11px;
  color: var(--muted)
}

.y-labels span {
  transform: translateY(-8px);
  padding-right: 8px
}

.bars {
  position: absolute;
  left: 48px;
  right: 10px;
  top: 10px;
  bottom: 36px;
  display: flex;
  align-items: flex-end;
  gap: 18px
}

.bar-item {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.bar-group {
  width: 80%;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: center;
  height: 100%
}

.bar {
  width: 50%;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(35, 209, 139, .92), rgba(35, 209, 139, .22));
  position: relative;
  cursor: pointer;
  transition: transform .15s ease
}

.bar.amount {
  width: 76%;
  background: linear-gradient(180deg, rgba(141, 99, 255, .92), rgba(141, 99, 255, .22))
}

.bar.attempt {
  background: linear-gradient(180deg, rgba(82, 184, 255, .92), rgba(82, 184, 255, .22))
}

.bar.win {
  background: linear-gradient(180deg, rgba(35, 209, 139, .92), rgba(35, 209, 139, .22))
}

.bar.loss {
  background: linear-gradient(180deg, rgba(255, 111, 139, .92), rgba(255, 111, 139, .22))
}

.bar:hover {
  transform: translateY(-2px)
}

.x-label {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap
}

.tooltip {
  position: absolute;
  pointer-events: none;
  min-width: 160px;
  max-width: 260px;
  z-index: 5;
  background: #111d33;
  border: 1px solid var(--surface-8);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  font-size: 12px;
  color: var(--text-bright);
  display: none
}

.tooltip .t-title {
  font-weight: 800;
  color: #fff
}

.tooltip .t-body {
  margin-top: 6px;
  color: #cdd8ea;
  line-height: 1.5
}

.dom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.dom {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--panel-elevated);
  padding: 14px
}

.dom .k {
  font-size: 12px;
  color: var(--muted)
}

.dom .v {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 800
}

.dom .s {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted)
}

.dom.green .v {
  color: var(--success-fg)
}

.dom.blue .v {
  color: var(--info-fg)
}

.dom.amber .v {
  color: var(--warning-fg)
}

.dom.rose .v {
  color: var(--danger-fg)
}

.agency-list,
.project-list,
.mini-list,
.strength-list,
.history-list {
  display: grid;
  gap: 10px
}

.agency,
.project,
.mini,
.strength,
.history-item {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px
}

.agency .name,
.project .title,
.mini strong,
.strength strong,
.history-item .title {
  font-size: 14px;
  font-weight: 800
}

.agency .meta,
.project .meta,
.mini p,
.strength p,
.history-item .meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6
}

.agency .score {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--info-fg)
}

.strength.good {
  background: linear-gradient(135deg, rgba(35, 209, 139, .12), rgba(35, 209, 139, .04));
  border-color: rgba(35, 209, 139, .16)
}

.strength.good strong {
  color: #b5f5d6
}

.strength.weak {
  background: linear-gradient(135deg, rgba(255, 111, 139, .12), rgba(255, 111, 139, .04));
  border-color: rgba(255, 111, 139, .16)
}

.strength.weak strong {
  color: #ffccd7
}

.strength.watch {
  background: linear-gradient(135deg, rgba(255, 191, 71, .12), rgba(255, 191, 71, .04));
  border-color: rgba(255, 191, 71, .16)
}

.strength.watch strong {
  color: #ffe1a6
}

.status {
  margin-top: 8px;
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800
}

.status.win {
  background: rgba(35, 209, 139, .14);
  color: var(--success-fg)
}

.status.loss {
  background: rgba(255, 111, 139, .14);
  color: var(--danger-fg)
}

.status.inflight {
  background: rgba(141, 99, 255, .16);
  color: var(--accent-fg)
}

.status.watch {
  background: rgba(255, 191, 71, .14);
  color: var(--warning-fg)
}

.rank-list {
  display: grid;
  gap: 10px
}

.rank {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.rank .left {
  display: flex;
  align-items: center;
  gap: 10px
}

.rank .num {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface-4);
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 800
}

.rank .name {
  font-size: 14px;
  font-weight: 800
}

.rank .meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px
}

.rank .score {
  font-size: 14px;
  font-weight: 800;
  color: var(--success-fg)
}

.tag {
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--surface-3);
  font-size: 13px;
  color: var(--text-bright)
}

.memo {
  border: 1px solid rgba(255, 191, 71, .18);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 191, 71, .10), var(--surface-2))
}

.memo strong {
  font-size: 13px;
  color: #ffe2a2
}

.memo p {
  margin: 8px 0 0;
  font-size: 12px;
  color: #fff0cf;
  line-height: 1.65
}

.history-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap
}

.history-period {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.history-table {
  display: grid;
  gap: 8px
}

.history-head,
.history-row {
  display: grid;
  grid-template-columns: 120px 1.6fr 1fr .6fr .8fr .9fr;
  gap: 12px;
  align-items: center
}

.history-head {
  padding: 0 8px 8px;
  color: var(--muted);
  font-size: 12px
}

.history-row {
  padding: 14px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2)
}

.history-row .cell {
  font-size: 13px;
  color: #dfe7f8;
  line-height: 1.55
}

.history-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap
}

.history-mobile {
  display: none;
  gap: 10px
}

.mobile-history-card {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px
}

.mobile-history-card .row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px
}

.mobile-history-card .label {
  min-width: 62px;
  color: var(--muted)
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 18, .62);
  backdrop-filter: blur(8px);
  display: none;
  z-index: 9999
}

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 32px));
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel-elevated);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  overflow: hidden
}

.modal-backdrop > .modal {
  display: block
}

.modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center
}

.modal-body {
  padding: 20px
}

.modal-textarea {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: #0b1424;
  color: var(--text-bright);
  padding: 16px;
  font-size: 14px;
  line-height: 1.7;
  resize: vertical
}

@media (max-width:1450px) {
  .topbar-inner {
    grid-template-columns: 220px 1fr
  }

  .search,
  .profile {
    display: none
  }

  .hero-top {
    flex-direction: column
  }

  .hero-right {
    width: 100%
  }

  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .layout {
    grid-template-columns: 1fr
  }
}

@media (max-width:1000px) {

  .history-head,
  .history-row {
    display: none
  }

  .history-mobile {
    display: grid
  }
}

@media (max-width:900px) {
  .nav {
    display: none
  }

  .wrap {
    padding: 16px
  }

  .topbar-inner {
    padding: 14px 16px
  }

  .page-head {
    flex-direction: column;
    align-items: flex-start
  }

  .hero h1 {
    font-size: 30px
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .kpi-row,
  .dom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .toggle-group {
    flex-direction: column;
    align-items: flex-start
  }

  .history-filter {
    flex-wrap: nowrap;
    overflow: auto;
    width: 100%
  }

  .history-filter .seg {
    flex: 1;
    justify-content: center;
    min-width: 0;
    padding: 10px 12px
  }
}

/* --- project detail --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: var(--panel-glass);
  border-bottom: 1px solid var(--line)
}

.topbar-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 220px 1fr 340px 170px;
  gap: 16px;
  align-items: center
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: linear-gradient(135deg, #835dff, #42b6ff);
  box-shadow: 0 12px 28px rgba(130, 93, 255, .28)
}

.brand h1 {
  margin: 0;
  font-size: 18px
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.nav a {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--text-bright);
  text-decoration: none
}

.nav a.active {
  background: rgba(141, 99, 255, .18);
  color: #fff
}

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted)
}

.search kbd {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px
}

.profile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(135deg, #835dff, #42b6ff)
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 44px
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px
}

.crumb {
  font-size: 13px;
  color: var(--muted)
}

.btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.btn {
  border: 1px solid var(--line2);
  background: var(--surface-3);
  color: var(--text-bright);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer
}

.btn.primary {
  border: none;
  background: linear-gradient(135deg, var(--violet), #50b7ff);
  font-weight: 800;
  color: #fff
}

.btn.green {
  border: none;
  background: linear-gradient(135deg, #1dbb78, #2ad18f);
  font-weight: 800;
  color: #fff
}

.hero {
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(141, 99, 255, .22), rgba(82, 184, 255, .08) 40%, var(--surface-2) 100%),
    var(--surface-2);
  box-shadow: var(--shadow)
}

.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start
}

.chips,
.badges,
.legend,
.score-tags,
.row-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent
}

.violet {
  background: rgba(141, 99, 255, .14);
  color: var(--accent-fg);
  border-color: rgba(141, 99, 255, .22)
}

.blue {
  background: rgba(82, 184, 255, .12);
  color: var(--info-fg);
  border-color: rgba(82, 184, 255, .20)
}

.green {
  background: rgba(35, 209, 139, .12);
  color: var(--success-fg);
  border-color: rgba(35, 209, 139, .18)
}

.amber {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
  border-color: rgba(255, 191, 71, .18)
}

.rose {
  background: rgba(255, 111, 139, .12);
  color: var(--danger-fg);
  border-color: rgba(255, 111, 139, .18)
}

.hero h1 {
  margin: 14px 0 0;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: -.03em;
  max-width: 980px
}

.hero-sub {
  margin-top: 12px;
  max-width: 980px;
  color: var(--sub);
  line-height: 1.75;
  font-size: 15px
}

.hero-right {
  width: 360px;
  display: grid;
  gap: 12px
}

.hero-score {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(35, 209, 139, .22);
  background: linear-gradient(135deg, rgba(35, 209, 139, .18), rgba(35, 209, 139, .05))
}

.hero-score .k {
  font-size: 12px;
  color: #c6f4df
}

.hero-score .v {
  margin-top: 8px;
  font-size: 38px;
  font-weight: 800
}

.hero-score .s {
  margin-top: 8px;
  font-size: 13px;
  color: #dcfaeb;
  line-height: 1.65
}

.hero-note {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 191, 71, .18);
  background: linear-gradient(135deg, rgba(255, 191, 71, .12), rgba(255, 111, 139, .08))
}

.hero-note strong {
  display: block;
  font-size: 14px;
  color: #ffe3ab
}

.hero-note p {
  margin: 8px 0 0;
  font-size: 13px;
  color: #fff1d7;
  line-height: 1.7
}

.hero-memo {
  margin-top: 16px;
  border: 1px solid rgba(82, 184, 255, .18);
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(82, 184, 255, .10), var(--surface-2))
}

.hero-memo strong {
  display: block;
  font-size: 14px;
  color: #cfeeff
}

.hero-memo p {
  margin: 8px 0 0;
  font-size: 14px;
  color: #e7f7ff;
  line-height: 1.7
}

.facts {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px
}

.fact {
  min-height: 92px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 14px;
  background: var(--surface-3)
}

.fact .k {
  font-size: 12px;
  color: var(--muted)
}

.fact .v {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45
}

.fact .s {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted)
}

.score-band {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px
}

.band {
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 14px;
  background: var(--panel-elevated)
}

.band .k {
  font-size: 12px;
  color: var(--muted)
}

.band .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800
}

.band .s {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted)
}

.band.green .v {
  color: var(--success-fg)
}

.band.blue .v {
  color: var(--info-fg)
}

.band.amber .v {
  color: var(--warning-fg)
}

.band.rose .v {
  color: var(--danger-fg)
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-7);
  overflow: hidden;
  margin-top: 10px
}

.bar i {
  display: block;
  height: 100%;
  border-radius: 999px
}

.green i {
  background: linear-gradient(90deg, var(--green), #6feeb9)
}

.blue i {
  background: linear-gradient(90deg, var(--sky), #8fddff)
}

.amber i {
  background: linear-gradient(90deg, var(--amber), #ffd98c)
}

.rose i {
  background: linear-gradient(90deg, var(--rose), #ffbcc9)
}

.layout {
  display: grid;
  grid-template-columns: 1.02fr 1.36fr .92fr;
  gap: 18px;
  margin-top: 20px
}

.stack {
  display: grid;
  gap: 18px
}

.card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  overflow: hidden
}

.card-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px
}

.card-head h3 {
  margin: 0;
  font-size: 17px
}

.card-head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted)
}

.card-body {
  padding: 20px
}

.head-side {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.pill {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: var(--surface-4)
}

.pill.live {
  background: rgba(141, 99, 255, .16);
  color: var(--accent-fg)
}

.pill.ok {
  background: rgba(35, 209, 139, .14);
  color: var(--success-fg)
}

.pill.warn {
  background: rgba(255, 191, 71, .14);
  color: var(--warning-fg)
}

.pill.stop {
  background: rgba(255, 111, 139, .14);
  color: var(--danger-fg)
}

.timeline {
  display: grid;
  gap: 12px
}

.timeline-item {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px
}

.step {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(141, 99, 255, .14);
  color: var(--accent-fg)
}

.step.warn {
  background: rgba(255, 191, 71, .14);
  color: var(--warning-fg)
}

.step.stop {
  background: rgba(255, 111, 139, .14);
  color: var(--danger-fg)
}

.timeline-title {
  font-size: 14px;
  font-weight: 700
}

.timeline-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55
}

.links {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.tiny-link {
  text-decoration: none;
  color: #dde7f8;
  font-size: 11px;
  padding: 6px 9px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--surface-2)
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.stat,
.issue,
.info,
.attach,
.note,
.vendor-row,
.mobile-vendor-card {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2)
}

.stat,
.issue,
.info,
.note {
  padding: 14px
}

.stat {
  background: var(--panel-elevated)
}

.stat .k,
.info .k {
  font-size: 12px;
  color: var(--muted)
}

.stat .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800
}

.stat .s {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted)
}

.stat.green .v {
  color: var(--success-fg)
}

.stat.amber .v {
  color: var(--warning-fg)
}

.stat.blue .v {
  color: var(--info-fg)
}

.stat.rose .v {
  color: var(--danger-fg)
}

.issue strong {
  display: block;
  font-size: 14px
}

.issue p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sub);
  line-height: 1.65
}

.issue.delay {
  background: linear-gradient(135deg, rgba(255, 111, 139, .12), rgba(255, 111, 139, .04));
  border-color: rgba(255, 111, 139, .16)
}

.issue.scope {
  background: linear-gradient(135deg, rgba(255, 191, 71, .12), rgba(255, 191, 71, .04));
  border-color: rgba(255, 191, 71, .16)
}

.issue.win {
  background: linear-gradient(135deg, rgba(35, 209, 139, .12), rgba(35, 209, 139, .04));
  border-color: rgba(35, 209, 139, .16)
}

.insight {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px
}

.icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(141, 99, 255, .16);
  color: var(--accent-fg);
  font-weight: 900
}

.insight p {
  margin: 0;
  font-size: 14px;
  color: var(--sub);
  line-height: 1.72
}

.insight .e {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted)
}

.comp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px
}

.comp-card {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--panel-elevated);
  padding: 14px
}

.comp-card .k {
  font-size: 12px;
  color: var(--muted)
}

.comp-card .v {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 800
}

.comp-card .s {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted)
}

.vendor-table-head {
  display: grid;
  grid-template-columns: 1.5fr .6fr .9fr .55fr .65fr;
  gap: 10px;
  padding: 0 8px 10px;
  color: var(--muted);
  font-size: 12px
}

.vendor-row {
  padding: 14px;
  display: grid;
  grid-template-columns: 1.5fr .6fr .9fr .55fr .65fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px
}

.vendor-row .title {
  font-size: 13px;
  line-height: 1.55;
  color: #fff
}

.vendor-row .cell {
  font-size: 13px;
  color: #dce6f7
}

.fit {
  color: var(--success-fg);
  font-weight: 800
}

.watch {
  color: var(--warning-fg);
  font-weight: 800
}

.mobile-vendors {
  display: none;
  gap: 10px
}

.mobile-vendor-card {
  padding: 14px
}

.mobile-vendor-card .row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 6px
}

.mobile-vendor-card .label {
  min-width: 64px;
  color: var(--muted)
}

.action-list,
.mini-list {
  display: grid;
  gap: 10px
}

.todo {
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: var(--surface-2);
  padding: 14px;
  display: flex;
  gap: 12px
}

.todo .bullet {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  background: rgba(82, 184, 255, .16);
  color: var(--info-fg);
  flex: 0 0 auto
}

.todo strong,
.info strong,
.note strong {
  display: block;
  font-size: 14px
}

.todo p,
.info p,
.note p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--sub);
  line-height: 1.6
}

.info .hint {
  margin-top: 8px;
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--surface-4);
  color: var(--text-bright)
}

.hint.example {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg)
}

.attach {
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px
}

.attach .name {
  font-size: 13px;
  font-weight: 800
}

.attach .meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted)
}

.file-tag {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(82, 184, 255, .14);
  color: var(--info-fg)
}

.tags {
  display: flex;
  gap: 9px;
  flex-wrap: wrap
}

.tag {
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--surface-3);
  font-size: 13px;
  color: var(--text-bright)
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 18, .62);
  backdrop-filter: blur(8px);
  display: none;
  z-index: 9999
}

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 32px));
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel-elevated);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  overflow: hidden
}

.modal-backdrop > .modal {
  display: block
}

.modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: center
}

.modal-body {
  padding: 20px
}

.modal-textarea {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: #0b1424;
  color: var(--text-bright);
  padding: 16px;
  font-size: 14px;
  line-height: 1.7;
  resize: vertical
}

@media (max-width:1450px) {
  .topbar-inner {
    grid-template-columns: 220px 1fr
  }

  .search,
  .profile {
    display: none
  }

  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .score-band {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .layout {
    grid-template-columns: 1fr
  }

  .hero-top {
    flex-direction: column
  }

  .hero-right {
    width: 100%
  }
}

@media (max-width:1050px) {

  .vendor-table-head,
  .vendor-row {
    display: none
  }

  .mobile-vendors {
    display: grid
  }
}

@media (max-width:900px) {
  .nav {
    display: none
  }

  .wrap {
    padding: 16px
  }

  .topbar-inner {
    padding: 14px 16px
  }

  .page-head {
    flex-direction: column;
    align-items: flex-start
  }

  .hero h1 {
    font-size: 30px
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .score-band,
  .grid2,
  .comp-grid {
    grid-template-columns: 1fr
  }

  .timeline-item {
    grid-template-columns: 48px 1fr
  }

  .timeline-item>div:last-child {
    justify-self: start
  }
}

/* --- favorites --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: var(--panel-glass);
  border-bottom: 1px solid var(--line)
}

.topbar-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 220px 1fr 340px 170px;
  gap: 16px;
  align-items: center
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: linear-gradient(135deg, #835dff, #42b6ff);
  box-shadow: 0 12px 28px rgba(130, 93, 255, .28)
}

.brand h1 {
  margin: 0;
  font-size: 18px
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.nav a {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--text-bright);
  text-decoration: none
}

.nav a.active {
  background: rgba(141, 99, 255, .18);
  color: #fff
}

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted)
}

.search kbd {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px
}

.profile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(135deg, #835dff, #42b6ff)
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 44px
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px
}

.crumb {
  font-size: 13px;
  color: var(--muted)
}

.hero {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(255, 191, 71, .14), rgba(141, 99, 255, .08) 36%, var(--surface-2) 100%),
    var(--surface-2);
  box-shadow: var(--shadow)
}

.chips,
.signals,
.mini-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent
}

.violet {
  background: rgba(141, 99, 255, .14);
  color: var(--accent-fg);
  border-color: rgba(141, 99, 255, .22)
}

.blue {
  background: rgba(82, 184, 255, .12);
  color: var(--info-fg);
  border-color: rgba(82, 184, 255, .20)
}

.green {
  background: rgba(35, 209, 139, .12);
  color: var(--success-fg);
  border-color: rgba(35, 209, 139, .18)
}

.amber {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
  border-color: rgba(255, 191, 71, .18)
}

.rose {
  background: rgba(255, 111, 139, .12);
  color: var(--danger-fg);
  border-color: rgba(255, 111, 139, .18)
}

.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end
}

.hero h1 {
  margin: 12px 0 0;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -.03em
}

.hero-sub {
  margin-top: 10px;
  max-width: 920px;
  color: var(--sub);
  line-height: 1.72;
  font-size: 15px
}

.hero-side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 460px
}

.kpi {
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 14px;
  background: var(--surface-3)
}

.kpi .k {
  font-size: 12px;
  color: var(--muted)
}

.kpi .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800
}

.kpi .s {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted)
}

.toolbar {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px 18px;
  background: var(--surface-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end
}

.toolbar-left {
  display: grid;
  gap: 10px
}

.toolbar-left .count {
  font-size: 14px;
  color: var(--text-bright)
}

.toolbar-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.field {
  display: grid;
  gap: 6px
}

.field label {
  font-size: 12px;
  color: var(--muted)
}

select {
  min-width: 160px;
  border: 1px solid var(--line2);
  background: var(--panel-elevated);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  outline: none
}

.cards {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.fav-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  padding: 18px
}

.fav-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start
}

.star {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 191, 71, .18);
  background: rgba(255, 191, 71, .10);
  color: var(--warning-fg);
  font-size: 17px
}

.title {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.02em
}

.subtitle {
  margin-top: 8px;
  font-size: 14px;
  color: var(--sub);
  line-height: 1.65
}

.meta {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px
}

.meta-box {
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: var(--panel-elevated);
  padding: 12px
}

.meta-box .k {
  font-size: 11px;
  color: var(--muted)
}

.meta-box .v {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45
}

.meta-box .s {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted)
}

.meta-box.deadline .v {
  color: var(--danger-fg)
}

.meta-box.score .v {
  color: var(--success-fg)
}

.signals {
  margin-top: 14px
}

.memo {
  margin-top: 14px;
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: var(--surface-2);
  padding: 12px
}

.memo .k {
  font-size: 11px;
  color: var(--muted)
}

.memo .v {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-bright)
}

.bottom {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center
}

.saved-time {
  font-size: 12px;
  color: var(--muted)
}

.btn-mini {
  border: 1px solid var(--line2);
  background: var(--surface-3);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px
}

@media (max-width:1450px) {
  .topbar-inner {
    grid-template-columns: 220px 1fr
  }

  .search,
  .profile {
    display: none
  }

  .hero-top {
    flex-direction: column
  }

  .hero-side {
    min-width: 0;
    width: 100%
  }

  .toolbar {
    grid-template-columns: 1fr
  }
}

@media (max-width:1100px) {
  .nav {
    display: none
  }

  .cards {
    grid-template-columns: 1fr
  }
}

@media (max-width:760px) {
  .wrap {
    padding: 16px
  }

  .topbar-inner {
    padding: 14px 16px
  }

  .page-head {
    flex-direction: column;
    align-items: flex-start
  }

  .hero h1 {
    font-size: 28px
  }

  .hero-side {
    grid-template-columns: 1fr
  }

  .toolbar-controls {
    grid-template-columns: 1fr;
    display: grid
  }

  select {
    width: 100%;
    min-width: 0
  }

  .meta {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .bottom {
    flex-direction: column;
    align-items: flex-start
  }
}

/* --- notifications --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: var(--panel-glass);
  border-bottom: 1px solid var(--line)
}

.topbar-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 220px 1fr 340px 170px;
  gap: 16px;
  align-items: center
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: linear-gradient(135deg, #835dff, #42b6ff);
  box-shadow: 0 12px 28px rgba(130, 93, 255, .28)
}

.brand h1 {
  margin: 0;
  font-size: 18px
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.nav a {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--text-bright);
  text-decoration: none
}

.nav a.active {
  background: rgba(141, 99, 255, .18);
  color: #fff
}

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted)
}

.search kbd {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px
}

.profile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(135deg, #835dff, #42b6ff)
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 44px
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px
}

.crumb {
  font-size: 13px;
  color: var(--muted)
}

.hero {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(141, 99, 255, .16), rgba(82, 184, 255, .10) 38%, var(--surface-2) 100%),
    var(--surface-2);
  box-shadow: var(--shadow)
}

.chips,
.tags,
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent
}

.violet {
  background: rgba(141, 99, 255, .14);
  color: var(--accent-fg);
  border-color: rgba(141, 99, 255, .22)
}

.blue {
  background: rgba(82, 184, 255, .12);
  color: var(--info-fg);
  border-color: rgba(82, 184, 255, .20)
}

.green {
  background: rgba(35, 209, 139, .12);
  color: var(--success-fg);
  border-color: rgba(35, 209, 139, .18)
}

.amber {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
  border-color: rgba(255, 191, 71, .18)
}

.rose {
  background: rgba(255, 111, 139, .12);
  color: var(--danger-fg);
  border-color: rgba(255, 111, 139, .18)
}

.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end
}

.hero h1 {
  margin: 12px 0 0;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -.03em
}

.hero-sub {
  margin-top: 10px;
  max-width: 920px;
  color: var(--sub);
  line-height: 1.72;
  font-size: 15px
}

.hero-side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 520px
}

.kpi {
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 14px;
  background: var(--surface-3)
}

.kpi .k {
  font-size: 12px;
  color: var(--muted)
}

.kpi .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800
}

.kpi .s {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted)
}

.toolbar {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px 18px;
  background: var(--surface-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end
}

.toolbar-left {
  display: grid;
  gap: 10px
}

.toolbar-left .count {
  font-size: 14px;
  color: var(--text-bright)
}

.toolbar-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.field {
  display: grid;
  gap: 6px
}

.field label {
  font-size: 12px;
  color: var(--muted)
}

select {
  min-width: 160px;
  border: 1px solid var(--line2);
  background: var(--panel-elevated);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  outline: none
}

.layout {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px
}

.stack {
  display: grid;
  gap: 14px
}

.side-stack {
  display: grid;
  gap: 18px
}

.card,
.side-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  overflow: hidden
}

.card-head,
.side-head {
  padding: 18px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px
}

.card-head h3,
.side-head h3 {
  margin: 0;
  font-size: 16px
}

.card-head p,
.side-head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted)
}

.card-body,
.side-body {
  padding: 18px
}

.notify {
  border: 1px solid var(--line2);
  border-radius: 22px;
  background: var(--surface-2);
  padding: 16px
}

.notify-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px
}

.notify-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45
}

.notify-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--sub);
  line-height: 1.65
}

.notify-meta {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px
}

.meta-box {
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: var(--panel-elevated);
  padding: 12px
}

.meta-box .k {
  font-size: 11px;
  color: var(--muted)
}

.meta-box .v {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45
}

.meta-box .s {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted)
}

.change {
  margin-top: 14px;
  border: 1px solid rgba(82, 184, 255, .16);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(82, 184, 255, .10), var(--surface-2))
}

.change .k {
  font-size: 11px;
  color: #c8ecff
}

.change .v {
  margin-top: 6px;
  font-size: 13px;
  color: #eef9ff;
  line-height: 1.65
}

.change .t {
  margin-top: 8px;
  font-size: 11px;
  color: #9fdfff
}

.bottom {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap
}

.bottom .time {
  font-size: 12px;
  color: var(--muted)
}

.btn-mini {
  border: 1px solid var(--line2);
  background: var(--surface-3);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px
}

.small {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px;
  margin-bottom: 10px
}

.small:last-child {
  margin-bottom: 0
}

.small strong {
  display: block;
  font-size: 14px
}

.small p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sub);
  line-height: 1.65
}

.toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px
}

.switch {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(35, 209, 139, .22);
  position: relative;
  border: 1px solid rgba(35, 209, 139, .20)
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 22px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green)
}

.legend {
  margin-top: 10px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65
}

@media (max-width:1450px) {
  .topbar-inner {
    grid-template-columns: 220px 1fr
  }

  .search,
  .profile {
    display: none
  }

  .hero-top {
    flex-direction: column
  }

  .hero-side {
    min-width: 0;
    width: 100%
  }

  .toolbar {
    grid-template-columns: 1fr
  }

  .layout {
    grid-template-columns: 1fr
  }
}

@media (max-width:1100px) {
  .nav {
    display: none
  }
}

@media (max-width:760px) {
  .wrap {
    padding: 16px
  }

  .topbar-inner {
    padding: 14px 16px
  }

  .page-head {
    flex-direction: column;
    align-items: flex-start
  }

  .hero h1 {
    font-size: 28px
  }

  .hero-side {
    grid-template-columns: 1fr
  }

  .toolbar-controls {
    grid-template-columns: 1fr;
    display: grid
  }

  select {
    width: 100%;
    min-width: 0
  }

  .notify-meta {
    grid-template-columns: 1fr
  }
}

/* Notice list page overrides to isolate it from later screen-level generic class collisions. */
.notice-list-page .hero {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(141, 99, 255, .20), rgba(82, 184, 255, .08) 40%, var(--surface-2) 100%), var(--surface-2);
  box-shadow: var(--shadow);
}

.notice-list-page .hero-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
}

.notice-list-page .hero h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.18;
  letter-spacing: -.03em;
}

.notice-list-page .hero p {
  margin: 12px 0 0;
  max-width: 980px;
  color: var(--sub);
  line-height: 1.7;
  font-size: 14px;
}

.notice-list-page .hero-side {
  min-width: 460px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.notice-list-page .layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.notice-list-page .filter-wrap {
  position: static;
  align-self: start;
}

.notice-list-page .card {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), var(--surface-1));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.notice-list-page .card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-6);
}

.notice-list-page .card-body {
  padding: 0
}

.notice-list-page .filter-group {
  padding: 12px 16px;
  border-top: 1px solid var(--surface-4);
}

.notice-list-page .preset-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.notice-list-page .preset {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line2);
  background: var(--panel-elevated);
  color: #f2f7ff;
  border-radius: 10px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.notice-list-page .preset.active {
  background: linear-gradient(135deg, rgba(141, 99, 255, .18), rgba(82, 184, 255, .08));
  border-color: rgba(141, 99, 255, .22);
}

.notice-list-page .preset.ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cdbaff;
}

.notice-list-page .preset[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: 160px;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(7, 14, 26, .96);
  border: 1px solid rgba(141, 99, 255, .24);
  color: #e8efff;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  white-space: normal;
  z-index: 10;
}

.notice-list-page .preset[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(7, 14, 26, .96);
  opacity: 0;
  transition: opacity .16s ease;
  z-index: 10;
}

.notice-list-page .preset[data-tooltip]:hover::after,
.notice-list-page .preset[data-tooltip]:hover::before {
  opacity: 1;
}

.notice-list-page .preset[data-tooltip]:hover::after {
  transform: translateX(-50%) translateY(-2px);
}

.notice-list-page .choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.notice-list-page .tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 14px 18px;
  background: var(--surface-2);
}

.notice-list-page .tools-left {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.notice-list-page .count {
  font-size: 14px;
  color: var(--text-bright);
}

.notice-list-page .saved-inline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.notice-list-page .saved-label {
  font-size: 12px;
  color: var(--muted);
}

.notice-list-page .saved-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--panel-elevated);
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.notice-list-page .saved-chip.active {
  background: rgba(141, 99, 255, .16);
  border-color: rgba(141, 99, 255, .22);
  color: #fff;
}

.notice-list-page .tools-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.notice-list-page .results-head,
.notice-list-page .result-row {
  display: grid;
  grid-template-columns: 1.9fr .85fr .95fr 1.15fr .42fr;
  gap: 10px;
}

.notice-list-page .results-head {
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-5);
  font-size: 11px;
  color: var(--muted);
}

.notice-list-page .result-row {
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--surface-5);
}

.notice-list-page .title-wrap {
  display: grid;
  gap: 4px;
}

.notice-list-page .title-wrap h4 {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  word-break: keep-all;
}

.notice-list-page .row-meta {
  display: none;
}

.notice-list-page .label {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 3px;
}

.notice-list-page .mini-v {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text-bright);
}

.notice-list-page .sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  word-break: keep-all;
}

.notice-list-page .agency-cell,
.notice-list-page .base-cell {
  min-width: 0;
}

.notice-list-page .signals {
  display: block;
  margin-top: 0;
}

.notice-list-page .signals .main {
  font-size: 12px;
  font-weight: 800;
}

.notice-list-page .signals .main.green {
  color: var(--success-fg)
}

.notice-list-page .signals .main.amber {
  color: var(--warning-fg)
}

.notice-list-page .signals .main.rose {
  color: var(--danger-fg)
}

.notice-list-page .signals .subline {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  word-break: keep-all;
}

.notice-list-page .actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

.favorite-toggle {
  cursor: pointer
}

.favorite-toggle.active {
  color: var(--warning-fg);
  border-color: rgba(255, 191, 71, .22);
  background: rgba(255, 191, 71, .12);
}

/* PC 화면 최소 지원 폭 정책(1270px) — 1270px 이상에서는 2단 레이아웃 유지.
       스크롤바 등으로 실뷰포트가 외곽 창 너비보다 15~20px 작아지는 점을 감안해 1199px로 여유를 둠 */
@media (max-width:1199px) {
  .notice-list-page .hero-top {
    flex-direction: column;
    align-items: stretch
  }

  .notice-list-page .hero-side {
    min-width: 0;
    width: 100%
  }

  .notice-list-page .layout {
    grid-template-columns: 1fr
  }

  .notice-list-page .filter-wrap {
    position: static
  }

  .notice-list-page .preset-row {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .notice-list-page .results-head,
  .notice-list-page .result-row {
    grid-template-columns: 1.9fr .85fr .95fr 1.15fr .42fr
  }
}

@media (max-width:1120px) {
  .notice-list-page .hero h1 {
    font-size: 30px
  }

  .notice-list-page .results-head,
  .notice-list-page .result-row {
    display: none
  }

  .notice-list-page .mobile-list {
    display: grid
  }
}

@media (max-width:760px) {
  .notice-list-page .hero {
    padding: 20px
  }

  .notice-list-page .preset-row,
  .notice-list-page .choice-grid,
  .notice-list-page .input-grid {
    grid-template-columns: 1fr
  }

  .notice-list-page .tools,
  .notice-list-page .results-head {
    flex-direction: column;
    align-items: flex-start
  }

  .notice-list-page .hero-side {
    grid-template-columns: 1fr
  }
}

.project-detail-page .hero-right,
.project-detail-page .stack,
.project-detail-page .card,
.project-detail-page .card-body,
.project-detail-page .fact,
.project-detail-page .attach,
.project-detail-page .info,
.project-detail-page .issue,
.project-detail-page .stat,
.project-detail-page .insight,
.project-detail-page .comp-card {
  min-width: 0;
}

.project-detail-page .attach .name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.project-detail-page .file-tag {
  flex-shrink: 0;
}

.project-detail-page .hero-memo {
  margin-top: 16px;
}

.project-detail-page .hero-memo p {
  word-break: keep-all;
}

.project-detail-page .card-head {
  padding: 18px 20px;
}

.project-detail-page .card-body {
  padding: 20px;
}

.project-detail-page .card-head h3 {
  font-size: 17px;
}

.project-detail-page .card-head p {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.project-detail-page .info,
.project-detail-page .issue,
.project-detail-page .stat,
.project-detail-page .comp-card,
.project-detail-page .todo {
  padding: 14px;
}

.project-detail-page .insight {
  padding: 14px;
  margin-bottom: 10px;
}

.project-detail-page .attach {
  padding: 14px;
  align-items: center;
}

.project-detail-page .vendor-row .title {
  word-break: keep-all;
}

.project-detail-page .todo p,
.project-detail-page .info p,
.project-detail-page .issue p,
.project-detail-page .insight p {
  word-break: keep-all;
}

.project-detail-page .comp-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-detail-page .vendor-row {
  grid-template-columns: 1.5fr .6fr .9fr .55fr .65fr;
}

@media (max-width:1680px) {
  .project-detail-page .layout {
    grid-template-columns: 1fr;
  }

  .project-detail-page .hero-top {
    flex-direction: column;
  }

  .project-detail-page .hero-right {
    width: 100%;
  }
}

@media (max-width:1200px) {
  .project-detail-page .score-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-detail-page .comp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:900px) {

  .project-detail-page .facts,
  .project-detail-page .score-band,
  .project-detail-page .grid2,
  .project-detail-page .comp-grid {
    grid-template-columns: 1fr;
  }

  .project-detail-page .timeline-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .project-detail-page .timeline-item>div:last-child {
    justify-self: start;
  }
}

.notice-detail-page .layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.12fr) minmax(300px, .9fr);
  gap: 18px;
  margin-top: 20px;
  align-items: start;
}

.notice-detail-page .stack,
.notice-detail-page .card,
.notice-detail-page .card-body,
.notice-detail-page .hero-right,
.notice-detail-page .notice,
.notice-detail-page .attach,
.notice-detail-page .info-box,
.notice-detail-page .stat,
.notice-detail-page .issue,
.notice-detail-page .insight {
  min-width: 0;
}

.notice-detail-page .facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.notice-detail-page .score-band {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notice-detail-page .card-head {
  padding: 16px 18px;
}

.notice-detail-page .card-body {
  padding: 18px;
}

.notice-detail-page .card-head h3 {
  font-size: 16px;
}

.notice-detail-page .card-head p {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.notice-detail-page .info-box,
.notice-detail-page .stat,
.notice-detail-page .issue,
.notice-detail-page .notice {
  padding: 12px 14px;
}

.notice-detail-page .info-box .v {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
}

.notice-detail-page .stat .v {
  font-size: 22px;
}

.notice-detail-page .stat .s,
.notice-detail-page .issue p,
.notice-detail-page .notice p,
.notice-detail-page .attach .meta,
.notice-detail-page .insight .e {
  font-size: 12px;
  line-height: 1.6;
}

.notice-detail-page .insight {
  padding: 12px 14px;
  margin-bottom: 8px;
}

.notice-detail-page .insight p {
  font-size: 13px;
  line-height: 1.65;
}

.notice-detail-page .timeline-item {
  padding: 12px;
}

.notice-detail-page .timeline-meta {
  font-size: 11px;
}

.notice-detail-page .notice .sub-tag,
.notice-detail-page .note-panel strong {
  font-size: 11px;
}

.notice-detail-page .note-panel {
  margin-top: 12px;
  padding: 12px 14px;
}

.notice-detail-page .tag {
  padding: 8px 11px;
  font-size: 12px;
}

.notice-detail-page .band .v {
  font-size: 18px;
  line-height: 1.2;
  word-break: keep-all;
}

.notice-detail-page .insight {
  grid-template-columns: 32px 1fr;
}

.notice-detail-page .attach {
  justify-content: space-between;
  align-items: center;
}

.notice-detail-page .attach .name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.notice-detail-page .file-tag {
  flex-shrink: 0;
}

.notice-detail-page .timeline-item {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.notice-detail-page .grid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width:1680px) {
  .notice-detail-page .layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .notice-detail-page .stack:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width:1320px) {
  .notice-detail-page .layout {
    grid-template-columns: 1fr;
  }

  .notice-detail-page .stack:last-child {
    grid-template-columns: 1fr;
  }

  .notice-detail-page .hero-top {
    flex-direction: column;
  }

  .notice-detail-page .hero-right {
    width: 100%;
  }

  .notice-detail-page .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:920px) {

  .notice-detail-page .score-band,
  .notice-detail-page .grid2 {
    grid-template-columns: 1fr;
  }

  .notice-detail-page .timeline-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .notice-detail-page .timeline-item>div:last-child {
    justify-self: start;
  }
}

.favorites-page .hero-side {
  min-width: 560px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.favorites-page .cards {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.favorites-page .fav-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-1));
  box-shadow: var(--shadow);
  padding: 18px;
}

.favorites-page .fav-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.favorites-page .fav-top .title {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.02em;
}

.favorites-page .fav-top .subtitle {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.favorites-page .star {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 191, 71, .24);
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
  font-size: 18px;
  flex-shrink: 0;
}

.favorites-page .meta {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.favorites-page .meta-box {
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--panel-elevated);
  padding: 14px;
}

.favorites-page .meta-box .k {
  font-size: 11px;
  color: var(--muted);
}

.favorites-page .meta-box .v {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  word-break: break-word;
}

.favorites-page .meta-box .s {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

.favorites-page .bottom {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.favorites-page .saved-time {
  font-size: 12px;
  color: var(--muted);
}

.favorites-page .mini-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.favorites-page .btn-mini {
  border: 1px solid var(--line2);
  background: var(--surface-3);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width:1460px) {
  .favorites-page .hero-side {
    min-width: 0;
    width: 100%;
  }

  .favorites-page .cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width:980px) {

  .favorites-page .hero-side,
  .favorites-page .meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px) {

  .favorites-page .hero-side,
  .favorites-page .meta {
    grid-template-columns: 1fr;
  }

  .favorites-page .fav-top .title {
    font-size: 17px;
  }
}

/* ════════════════════════════════════════
   SIDEBAR LAYOUT (layout-sidebar-pc.html)
   ════════════════════════════════════════ */
body.ps-layout-sidebar {
  display: flex;
  min-height: 100vh;
  background: var(--bg-page, #0a0f1e);
}

.ps-sidebar {
  width: 220px;
  min-height: 100vh;
  background: var(--panel, #0d1625);
  border-right: 1px solid var(--line2, var(--surface-7));
  display: flex;
  flex-direction: column;
  padding: 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.ps-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 20px;
  border-bottom: 1px solid var(--line2, var(--surface-7));
  color: var(--text-bright);
}

.ps-sidebar__logo {
  width: 32px;
  height: 32px;
  background: var(--violet, #8d63ff);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

.ps-sidebar__brand-text strong {
  display: block;
  font-size: 14px;
  color: var(--text-bright);
}

.ps-sidebar__brand-text small {
  font-size: 11px;
  color: var(--text-4, #5e6e8a);
}

.ps-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  flex: 1;
}

.ps-sidebar__nav a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-3, #8ea0c3);
  font-size: 14px;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.ps-sidebar__nav a:hover {
  background: var(--surface-4);
  color: var(--text-bright);
}

.ps-sidebar__nav a.active {
  background: rgba(141, 99, 255, .18);
  color: var(--accent-fg);
  font-weight: 600;
}

.ps-sidebar__bottom {
  padding: 16px 20px;
  border-top: 1px solid var(--line2, var(--surface-7));
  font-size: 12px;
}

.ps-sidebar__pro-label {
  color: var(--text-4, #5e6e8a);
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ps-sidebar__pro-link {
  color: #b8a0ff;
  font-size: 12px;
  display: block;
  margin-bottom: 14px;
}

.ps-sidebar__user {
  margin-top: 4px;
}

.ps-sidebar__user a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2, #b0c4d8);
  font-size: 13px;
}

.ps-sidebar__avatar {
  width: 28px;
  height: 28px;
  background: var(--violet, #8d63ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
}

.ps-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ps-main-topbar {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line2, var(--surface-7));
  background: var(--panel, #0d1625);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.ps-main-topbar__search {
  font-size: 13px;
  color: var(--text-4, #5e6e8a);
  background: var(--surface-3);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--line2, var(--surface-7));
  cursor: pointer;
}

.ps-main-topbar__search kbd {
  font-size: 10px;
  background: var(--surface-7);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  color: var(--text-3, #8ea0c3);
}

.ps-main-topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-3, #8ea0c3);
  font-size: 14px;
}

.ps-main-topbar__date {
  font-size: 12px;
  color: var(--text-4, #5e6e8a);
}

.ps-main-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* ════════════════════════════════════════
   DASHBOARD v3 PC (db3-*)
   ════════════════════════════════════════ */
.db3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.db3-kpi-section {}

.db3-kpi-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.db3-kpi-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0;
}

.db3-badge-primary {
  background: rgba(141, 99, 255, .22);
  color: var(--accent-fg);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(141, 99, 255, .3);
}

.db3-kpi-date {
  font-size: 12px;
  color: var(--text-4, #5e6e8a);
  margin-left: auto;
}

.db3-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.db3-kpi {
  background: var(--panel, #0d1625);
  border: 1px solid var(--line2, var(--surface-7));
  border-radius: 12px;
  padding: 16px 20px;
}

.db3-kpi--urgent .db3-kpi-value {
  color: var(--danger-fg);
}

.db3-kpi-label {
  font-size: 12px;
  color: var(--text-4, #5e6e8a);
  margin-bottom: 6px;
}

.db3-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1;
  margin-bottom: 4px;
}

.db3-kpi-hint {
  font-size: 11px;
  color: var(--text-4, #5e6e8a);
}

.db3-grid-top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.db3-grid-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.db3-card {
  background: var(--panel, #0d1625);
  border: 1px solid var(--line2, var(--surface-7));
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.db3-card--span2 {
  grid-column: span 1;
}

.db3-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 0;
}

.db3-card-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0;
}

.db3-card-hint {
  font-size: 11px;
  color: var(--text-4, #5e6e8a);
}

.db3-more {
  margin-left: auto;
  font-size: 12px;
  color: var(--violet, #8d63ff);
  text-decoration: none;
}

.db3-more:hover {
  text-decoration: underline;
}

.db3-card-body {
  padding: 14px 18px 18px;
  flex: 1;
}

.db3-chart-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-4, #5e6e8a);
}

.db3-chart-legend .line {
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--violet);
  vertical-align: middle;
  margin-right: 4px;
}

.db3-chart-legend .dashed {
  background: var(--blue);
}

.db3-empty {
  color: var(--text-4, #5e6e8a);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

.db3-opp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line2, var(--surface-5));
}

.db3-opp-item:last-child {
  border-bottom: none;
}

.db3-score {
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: rgba(141, 99, 255, .15);
  color: var(--accent-fg);
  flex-shrink: 0;
}

.db3-score.green {
  background: rgba(0, 220, 130, .15);
  color: var(--success-fg);
}

.db3-score.amber {
  background: rgba(255, 184, 0, .15);
  color: #ffd980;
}

.db3-score.blue {
  background: rgba(77, 184, 255, .15);
  color: #9fdcff;
}

.db3-opp-info {
  flex: 1;
  min-width: 0;
}

.db3-opp-title {
  display: block;
  font-size: 13px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db3-opp-agency {
  font-size: 11px;
  color: var(--text-4, #5e6e8a);
}

.db3-dday {
  font-size: 12px;
  color: var(--accent-fg);
  white-space: nowrap;
}

.db3-fav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line2, var(--surface-5));
}

.db3-fav-item:last-child {
  border-bottom: none;
}

.db3-fav-title {
  flex: 1;
  font-size: 13px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db3-agency-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line2, var(--surface-5));
}

.db3-agency-item:last-child {
  border-bottom: none;
}

.db3-rank {
  font-size: 12px;
  font-weight: 700;
  color: var(--violet, #8d63ff);
  min-width: 16px;
  text-align: center;
}

.db3-agency-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-bright);
}

.db3-agency-count {
  font-size: 12px;
  color: var(--text-3, #8ea0c3);
}

/* ════════════════════════════════════════
   DASHBOARD v3 MOBILE (dm3-*)
   ════════════════════════════════════════ */
.dm3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dm3-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}

.dm3-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
}

.dm3-badge {
  background: rgba(141, 99, 255, .22);
  color: var(--accent-fg);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid rgba(141, 99, 255, .3);
}

.dm3-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dm3-kpi {
  background: var(--panel, #0d1625);
  border: 1px solid var(--line2, var(--surface-7));
  border-radius: 12px;
  padding: 14px;
}

.dm3-kpi--urgent .dm3-kpi-value {
  color: var(--danger-fg);
}

.dm3-kpi-label {
  font-size: 11px;
  color: var(--text-4, #5e6e8a);
  margin-bottom: 4px;
}

.dm3-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1;
  margin-bottom: 2px;
}

.dm3-kpi-hint {
  font-size: 10px;
  color: var(--text-4, #5e6e8a);
}

.dm3-section {
  background: var(--panel, #0d1625);
  border: 1px solid var(--line2, var(--surface-7));
  border-radius: 12px;
  padding: 14px;
}

.dm3-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.dm3-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
}

.dm3-badge-sm {
  background: rgba(141, 99, 255, .15);
  color: var(--accent-fg);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
}

.dm3-more {
  margin-left: auto;
  font-size: 12px;
  color: var(--violet, #8d63ff);
  text-decoration: none;
}

.dm3-notice-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line2, var(--surface-5));
}

.dm3-notice-card:last-child {
  border-bottom: none;
}

.dm3-dday {
  font-size: 12px;
  font-weight: 700;
  color: var(--danger-fg);
}

.dm3-score {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-fg);
}

.dm3-score.green {
  color: var(--success-fg);
}

.dm3-score.blue {
  color: #9fdcff;
}

.dm3-notice-title {
  font-size: 13px;
  color: var(--text-bright);
  line-height: 1.4;
}

.dm3-notice-sub {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-4, #5e6e8a);
}

.dm3-notice-link {
  font-size: 12px;
  color: var(--violet, #8d63ff);
  text-decoration: none;
}

.dm3-empty {
  color: var(--text-4, #5e6e8a);
  font-size: 13px;
  text-align: center;
  padding: 16px 0;
}

/* ════════════════════════════════════════
   NOTICE DETAIL v3 — 공고 유형 배지 색상
   ════════════════════════════════════════ */
.chip.c-green {
  background: rgba(0, 220, 130, .15);
  color: var(--success-fg);
  border: 1px solid rgba(0, 220, 130, .3);
}

.chip.c-amber {
  background: rgba(255, 184, 0, .15);
  color: #ffd980;
  border: 1px solid rgba(255, 184, 0, .3);
}

/* ════════════════════════════════════════
   PROJECT DETAIL v3 — 사업 흐름 타임라인
   ════════════════════════════════════════ */
.timeline .links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ════════════════════════════════════════
   FAVORITES PC v3 — fv3-*
   ════════════════════════════════════════ */
.fv3-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0 20px;
  flex-wrap: wrap;
}

.fv3-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 6px;
}

.fv3-sub {
  font-size: 13px;
  color: var(--text-4, #8ea0c3);
  margin: 0;
}

.fv3-kpi-row {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.fv3-kpi {
  background: var(--panel, #0d1625);
  border: 1px solid var(--border, var(--surface-7));
  border-radius: 10px;
  padding: 12px 18px;
  min-width: 110px;
}

.fv3-kpi--urgent .fv3-kpi-v {
  color: var(--danger-fg);
}

.fv3-kpi-k {
  font-size: 11px;
  color: var(--text-4, #8ea0c3);
  margin-bottom: 4px;
}

.fv3-kpi-v {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
}

.fv3-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.fv3-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.fv3-tab {
  background: none;
  border: 1px solid var(--border, var(--surface-7));
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  color: var(--text-4, #8ea0c3);
  cursor: pointer;
  transition: all .15s;
}

.fv3-tab.active {
  background: var(--violet, #8d63ff);
  border-color: var(--violet, #8d63ff);
  color: #fff;
}

.fv3-tab span {
  font-weight: 700;
  margin-left: 2px;
}

.fv3-sort {
  display: flex;
  gap: 4px;
}

.fv3-sort-btn {
  background: none;
  border: 1px solid var(--border, var(--surface-7));
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-4, #8ea0c3);
  cursor: pointer;
}

.fv3-sort-btn.active {
  color: var(--text-bright);
  border-color: var(--text-3, #b5b5d2);
}

.fv3-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fv3-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel, #0d1625);
  border: 1px solid var(--border, var(--surface-7));
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color .15s;
}

.fv3-card:hover {
  border-color: var(--violet, #8d63ff);
}

.fv3-star {
  background: none;
  border: none;
  font-size: 18px;
  color: #ffd700;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}

.fv3-star:hover {
  opacity: .7;
}

.fv3-main {
  flex: 1;
  min-width: 0;
}

.fv3-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.fv3-notice-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv3-agency {
  font-size: 12px;
  color: var(--text-4, #8ea0c3);
  margin-top: 2px;
}

.fv3-budget {
  min-width: 100px;
  text-align: right;
}

.fv3-deadline {
  min-width: 80px;
  text-align: center;
}

.fv3-deadline.urgent .fv3-dday {
  color: var(--danger-fg);
}

.fv3-dday {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
}

.fv3-meta-k {
  font-size: 10px;
  color: var(--text-4, #8ea0c3);
  margin-bottom: 2px;
}

.fv3-meta-v {
  font-size: 13px;
  color: var(--text-2, #e2e2f0);
}

.fv3-meta-small {
  font-size: 11px;
  color: var(--text-4, #8ea0c3);
  margin-top: 2px;
}

.fv3-stage {
  min-width: 90px;
  text-align: center;
}

.fv3-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.fv3-empty {
  text-align: center;
  padding: 60px 20px;
  font-size: 14px;
  color: var(--text-4, #8ea0c3);
}

/* ════════════════════════════════════════
   FAVORITES MOBILE v3 — fm3-*
   ════════════════════════════════════════ */
.fm3 {
  padding-bottom: 80px;
}

.fm3-kpi-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 16px 10px;
  scrollbar-width: none;
}

.fm3-kpi-scroll::-webkit-scrollbar {
  display: none;
}

.fm3-kpi {
  background: var(--panel, #0d1625);
  border: 1px solid var(--border, var(--surface-7));
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 100px;
  flex-shrink: 0;
}

.fm3-kpi--urgent .fm3-kpi-v {
  color: var(--danger-fg);
}

.fm3-kpi-k {
  font-size: 10px;
  color: var(--text-4, #8ea0c3);
  margin-bottom: 4px;
}

.fm3-kpi-v {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-bright);
}

.fm3-tabs-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 16px 12px;
  scrollbar-width: none;
}

.fm3-tabs-scroll::-webkit-scrollbar {
  display: none;
}

.fm3-tab {
  background: none;
  border: 1px solid var(--border, var(--surface-7));
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  color: var(--text-4, #8ea0c3);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.fm3-tab.active {
  background: var(--violet, #8d63ff);
  border-color: var(--violet, #8d63ff);
  color: #fff;
}

.fm3-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}

.fm3-card {
  background: var(--panel, #0d1625);
  border: 1px solid var(--border, var(--surface-7));
  border-radius: 10px;
  padding: 14px;
}

.fm3-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.fm3-card-date {
  font-size: 11px;
  color: var(--text-4, #8ea0c3);
}

.fm3-dday {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(141, 99, 255, .15);
  color: #c4b0ff;
}

.fm3-dday--red {
  background: rgba(255, 80, 100, .15);
  color: var(--danger-fg);
}

.fm3-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.4;
  margin-bottom: 6px;
}

.fm3-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-4, #8ea0c3);
  margin-bottom: 8px;
  gap: 8px;
}

.fm3-budget {
  font-size: 12px;
  color: var(--text-3, #b5b5d2);
}

.fm3-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.fm3-card-bottom {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  border-top: 1px solid var(--border, var(--surface-7));
  padding-top: 8px;
}

.fm3-link {
  font-size: 12px;
  color: var(--violet, #8d63ff);
}

.fm3-link:hover {
  text-decoration: underline !important;
}

.fm3-empty {
  text-align: center;
  padding: 60px 20px;
  font-size: 14px;
  color: var(--text-4, #8ea0c3);
  line-height: 1.8;
}

/* ════════════════════════════════════════
   FAVORITES PC v3 — 아이콘 액션 버튼
   ════════════════════════════════════════ */
.fv3-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border, var(--surface-7));
  background: none;
  color: var(--text-4, #8ea0c3);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
  text-decoration: none;
}

.fv3-icon-btn:hover {
  border-color: var(--text-3, #b5b5d2);
  color: var(--text-2, #e2e2f0);
  background: var(--surface-4);
}

.fv3-icon-remove:hover {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* FAVORITES MOBILE v3 — 카드 상단 레이아웃 */
.fm3-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.fm3-card-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.fm3-star {
  background: none;
  border: none;
  font-size: 18px;
  color: #ffd700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.fm3-dday--orange {
  background: rgba(255, 140, 0, .18);
  color: #ffb347;
}

.fm3-dday--green {
  background: rgba(0, 200, 100, .15);
  color: #5fffaa;
}

/* ── Step 70: 발주처 상세 3열 레이아웃 ── */
.aw3-layout {
  grid-template-columns: 1.14fr .96fr .9fr;
}

/* 기관 태그 */
.tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag {
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color, var(--surface-8));
  background: var(--surface-3);
  font-size: 13px;
  color: var(--text-bright);
}

/* 기관 메모 패널 */
.memo {
  border: 1px solid rgba(255, 191, 71, .18);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 191, 71, .10), var(--surface-2));
}

.memo strong {
  font-size: 13px;
  color: #ffe2a2;
}

.memo p {
  margin: 8px 0 0;
  font-size: 12px;
  color: #fff0cf;
  line-height: 1.65;
}

/* 이슈 패널 색상 */
.issue.delay {
  background: linear-gradient(135deg, rgba(255, 111, 139, .12), rgba(255, 111, 139, .04));
  border-color: rgba(255, 111, 139, .16);
}

.issue.scope {
  background: linear-gradient(135deg, rgba(255, 191, 71, .12), rgba(255, 191, 71, .04));
  border-color: rgba(255, 191, 71, .16);
}

.issue.pipeline {
  background: linear-gradient(135deg, rgba(82, 184, 255, .12), rgba(82, 184, 255, .04));
  border-color: rgba(82, 184, 255, .16);
}

.issue.green {
  background: linear-gradient(135deg, rgba(35, 209, 139, .12), rgba(35, 209, 139, .04));
  border-color: rgba(35, 209, 139, .16);
}

/* 기관 성향 라인 차트 (활성화 대기) */
.line-chart {
  border: 1px solid var(--bs-border-color, var(--surface-7));
  border-radius: 22px;
  background: var(--panel-elevated);
  padding: 16px;
  position: relative;
}

.line-inner {
  position: relative;
  height: 280px;
  padding: 10px 10px 36px 54px;
}

.line-grid {
  position: absolute;
  left: 54px;
  right: 10px;
  top: 10px;
  bottom: 36px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

.line-grid div {
  border-top: 1px dashed var(--surface-7);
}

.line-ylabels {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 36px;
  width: 50px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  text-align: right;
  font-size: 11px;
  color: var(--muted, #93a4c2);
}

.line-ylabels span {
  transform: translateY(-8px);
  padding-right: 8px;
}

.line-xlabels {
  position: absolute;
  left: 54px;
  right: 10px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted, #93a4c2);
}

.line-svg {
  position: absolute;
  left: 54px;
  right: 10px;
  top: 10px;
  bottom: 36px;
  width: calc(100% - 64px);
  height: calc(100% - 46px);
}

/* ── Step 71: 사업자 상세 3열 레이아웃 ── */
.vd3-layout {
  grid-template-columns: 1.12fr 1fr .9fr;
}

/* 강점/취약점 watch 패널 */
.strength.watch {
  background: linear-gradient(135deg, rgba(255, 191, 71, .12), rgba(255, 191, 71, .04));
  border-color: rgba(255, 191, 71, .16);
}

.strength.watch strong {
  color: #ffe1a6;
}

/* ── Step 72: 대시보드 모바일 KPI 컬러 변형 ── */
.dm3-kpi--violet .dm3-kpi-value {
  color: var(--accent-fg);
}

.dm3-kpi--blue .dm3-kpi-value {
  color: #9fdcff;
}

.dm3-kpi--green .dm3-kpi-value {
  color: var(--success-fg);
}

/* 영업 시그널 카드 */
.dm3-signal-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--surface-7);
  border-radius: 16px;
  background: var(--surface-2);
  margin-bottom: 10px;
}

.dm3-signal-card:last-child {
  margin-bottom: 0;
}

.dm3-signal-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.dm3-signal-icon.green {
  background: rgba(41, 217, 143, .14);
  color: var(--success-fg);
}

.dm3-signal-icon.blue {
  background: rgba(77, 184, 255, .14);
  color: #9fdcff;
}

.dm3-signal-icon.amber {
  background: rgba(255, 182, 72, .14);
  color: var(--warning-fg);
}

.dm3-signal-body {
  overflow: hidden;
  min-width: 0;
}

.dm3-signal-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-4, #5e6e8a);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.dm3-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.dm3-chip.green {
  background: rgba(41, 217, 143, .14);
  color: var(--success-fg);
  border-color: rgba(41, 217, 143, .18);
}

.dm3-chip.blue {
  background: rgba(77, 184, 255, .14);
  color: #9fdcff;
  border-color: rgba(77, 184, 255, .18);
}

.dm3-chip.amber {
  background: rgba(255, 182, 72, .14);
  color: var(--warning-fg);
  border-color: rgba(255, 182, 72, .18);
}

/* ── Step 73: 관심공고 모바일 개선 ── */
.fm3-kpi--green .fm3-kpi-v {
  color: var(--success-fg);
}

/* meta 2x2 그리드 */
.fm3-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.fm3-meta-box {
  border: 1px solid var(--surface-6);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 10px 12px;
}

.fm3-meta-k {
  font-size: 11px;
  color: var(--text-4, #5e6e8a);
}

.fm3-meta-v {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-bright);
  word-break: break-all;
}

.fm3-meta-box--deadline .fm3-meta-v {
  color: var(--danger-fg);
}

.fm3-meta-box--score .fm3-meta-v {
  color: var(--success-fg);
}

/* ── Step 74: 공고목록 모바일 ── */
.nm3 {
  padding: 16px;
}

.nm3-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.nm3-count {
  font-size: 14px;
  color: var(--text-2, #9aacc8);
}

.nm3-count strong {
  color: var(--text-bright);
  font-weight: 700;
}

.nm3-sort {
  font-size: 12px;
  background: var(--surface-4);
  border: 1px solid var(--surface-8);
  color: var(--text-2, #9aacc8);
  border-radius: 10px;
  padding: 6px 10px;
}

.nm3-search {
  margin-bottom: 12px;
}

.nm3-input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--surface-8);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 13px;
  box-sizing: border-box;
}

.nm3-chips-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 10px;
  scrollbar-width: none;
}

.nm3-chips-scroll::-webkit-scrollbar {
  display: none;
}

.nm3-chip-label {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--text-3, #6b7fa3);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}

.nm3-chip-label.active {
  background: rgba(77, 184, 255, .18);
  border-color: rgba(77, 184, 255, .35);
  color: #9fdcff;
}

.nm3-chip-label--intel {
  border-color: rgba(157, 240, 200, .12);
}

.nm3-chip-label--intel.active {
  background: rgba(41, 217, 143, .14);
  border-color: rgba(41, 217, 143, .3);
  color: var(--success-fg);
}

.nm3-apply {
  width: 100%;
  margin: 4px 0 18px;
  padding: 13px;
  background: rgba(77, 184, 255, .18);
  border: 1px solid rgba(77, 184, 255, .3);
  color: #9fdcff;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.nm3-card {
  border: 1px solid var(--surface-7);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 16px;
  margin-bottom: 12px;
}

.nm3-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 6px;
  line-height: 1.5;
}

.nm3-sub {
  font-size: 11px;
  color: var(--text-4, #5e6e8a);
  margin-bottom: 12px;
}

.nm3-mgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.nm3-mini {
  border: 1px solid var(--surface-6);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 9px 11px;
}

.nm3-k {
  font-size: 10px;
  color: var(--text-4, #5e6e8a);
  margin-bottom: 4px;
}

.nm3-v {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-bright);
  word-break: break-all;
  line-height: 1.4;
}

.nm3-v--green {
  color: var(--success-fg);
}

.nm3-v--amber {
  color: var(--warning-fg);
}

.nm3-v--rose {
  color: var(--danger-fg);
}

.nm3-v--muted {
  color: var(--text-3, #6b7fa3);
  font-weight: 400;
}

.nm3-actions {
  display: flex;
  gap: 10px;
}

.nm3-icon {
  font-size: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: .6;
  transition: opacity .15s;
}

.nm3-icon:hover,
.nm3-icon.active {
  opacity: 1;
}

.nm3-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-4, #5e6e8a);
  font-size: 14px;
  line-height: 1.8;
}

.nm3-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.nm3-page-btn {
  padding: 7px 13px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid var(--surface-8);
  background: var(--surface-3);
  color: var(--text-2, #9aacc8);
  cursor: pointer;
}

.nm3-page-btn.active {
  background: rgba(77, 184, 255, .2);
  border-color: rgba(77, 184, 255, .35);
  color: #9fdcff;
  font-weight: 700;
}

.nm3-page-btn:disabled {
  opacity: .3;
  cursor: default;
}

/* ── Step 77: 알림 PC ── */
.notif-hero {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(141, 99, 255, .16), rgba(82, 184, 255, .10) 38%, var(--surface-2) 100%), var(--surface-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
  margin-bottom: 18px;
}

.notif-hero-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-top: 12px;
}

.notif-h1 {
  margin: 12px 0 0;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -.03em;
}

.notif-sub {
  margin-top: 10px;
  max-width: 920px;
  color: var(--sub);
  line-height: 1.72;
  font-size: 15px;
}

.notif-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 520px;
}

.notif-kpi {
  border: 1px solid var(--line2, var(--surface-6));
  border-radius: 18px;
  padding: 14px;
  background: var(--surface-3);
}

.notif-kpi .k {
  font-size: 12px;
  color: var(--muted);
}

.notif-kpi .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800;
}

.notif-kpi .s {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
}

.notif-toolbar {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px 18px;
  background: var(--surface-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}

.notif-toolbar-left {
  display: grid;
  gap: 10px;
}

.notif-count {
  font-size: 14px;
  color: var(--text-bright);
}

.notif-toolbar-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.notif-field {
  display: grid;
  gap: 6px;
}

.notif-field label {
  font-size: 12px;
  color: var(--muted);
}

.notif-field select {
  min-width: 160px;
  border: 1px solid var(--line2, var(--surface-6));
  background: var(--panel-elevated);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  outline: none;
}

.notif-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
}

.notif-stack {
  display: grid;
  gap: 14px;
}

.notif-side-stack {
  display: grid;
  gap: 18px;
  align-content: start;
}

.notif-card {
  border: 1px solid var(--line2, var(--surface-6));
  border-radius: 22px;
  background: var(--surface-2);
  padding: 16px;
}

.notif-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.notif-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.notif-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}

.notif-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--sub);
  line-height: 1.65;
}

.notif-meta {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.notif-meta-box {
  border: 1px solid var(--line2, var(--surface-6));
  border-radius: 16px;
  background: var(--panel-elevated);
  padding: 12px;
}

.notif-meta-box .k {
  font-size: 11px;
  color: var(--muted);
}

.notif-meta-box .v {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.notif-meta-box .s {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.notif-change {
  margin-top: 14px;
  border: 1px solid rgba(82, 184, 255, .16);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(82, 184, 255, .10), var(--surface-2));
}

.notif-change .k {
  font-size: 11px;
  color: #c8ecff;
}

.notif-change .v {
  margin-top: 6px;
  font-size: 13px;
  color: #eef9ff;
  line-height: 1.65;
}

.notif-change .t {
  margin-top: 8px;
  font-size: 11px;
  color: #9fdfff;
}

.notif-bottom {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.notif-time {
  font-size: 12px;
  color: var(--muted);
}

.notif-actions {
  display: flex;
  gap: 8px;
}

.btn-mini {
  border: 1px solid var(--line2, var(--surface-6));
  background: var(--surface-3);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
}

.btn-mini:hover {
  background: var(--surface-7);
}

.notif-small {
  border: 1px solid var(--line2, var(--surface-6));
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px;
  margin-bottom: 10px;
}

.notif-small:last-child {
  margin-bottom: 0;
}

.notif-small strong {
  display: block;
  font-size: 14px;
}

.notif-small p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sub);
  line-height: 1.65;
}

.notif-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.notif-switch {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(35, 209, 139, .22);
  position: relative;
  border: 1px solid rgba(35, 209, 139, .20);
  flex-shrink: 0;
}

.notif-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 22px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
}

.notif-legend {
  margin-top: 10px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 1450px) {
  .notif-hero-top {
    flex-direction: column;
  }

  .notif-kpi-row {
    min-width: 0;
    width: 100%;
  }

  .notif-toolbar {
    grid-template-columns: 1fr;
  }

  .notif-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .notif-meta {
    grid-template-columns: 1fr;
  }

  .notif-toolbar-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .notif-field select {
    width: 100%;
    min-width: 0;
  }
}

/* ── Step 78: 관심공고 PC ── */
.fv4-hero {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 191, 71, .14), rgba(141, 99, 255, .08) 36%, var(--surface-2) 100%), var(--surface-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
  margin-bottom: 18px;
}

.fv4-hero-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-top: 12px;
}

.fv4-h1 {
  margin: 12px 0 0;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -.03em;
}

.fv4-sub {
  margin-top: 10px;
  max-width: 920px;
  color: var(--sub);
  line-height: 1.72;
  font-size: 15px;
}

.fv4-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 460px;
}

.fv4-kpi {
  border: 1px solid var(--line2, var(--surface-6));
  border-radius: 18px;
  padding: 14px;
  background: var(--surface-3);
}

.fv4-kpi .k {
  font-size: 12px;
  color: var(--muted);
}

.fv4-kpi .v {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800;
}

.fv4-kpi .s {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
}

.fv4-toolbar {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px 18px;
  background: var(--surface-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}

.fv4-count {
  font-size: 14px;
  color: var(--text-bright);
}

.fv4-toolbar-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.fv4-field {
  display: grid;
  gap: 6px;
}

.fv4-field label {
  font-size: 12px;
  color: var(--muted);
}

.fv4-field select {
  min-width: 160px;
  border: 1px solid var(--line2, var(--surface-6));
  background: var(--panel-elevated);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  outline: none;
}

.fv4-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.fv4-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
  padding: 18px;
}

.fv4-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.fv4-signals {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fv4-title {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.fv4-subtitle {
  margin-top: 8px;
  font-size: 14px;
  color: var(--sub);
  line-height: 1.65;
}

.fv4-star {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 191, 71, .18);
  background: rgba(255, 191, 71, .10);
  color: var(--warning-fg);
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
}

.fv4-star:hover {
  background: rgba(255, 191, 71, .20);
}

.fv4-meta {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.fv4-meta-box {
  border: 1px solid var(--line2, var(--surface-6));
  border-radius: 16px;
  background: var(--panel-elevated);
  padding: 12px;
}

.fv4-meta-box .k {
  font-size: 11px;
  color: var(--muted);
}

.fv4-meta-box .v {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.fv4-meta-box .s {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.fv4-deadline .v {
  color: var(--danger-fg);
}

.fv4-score .v {
  color: var(--success-fg);
}

.fv4-signals-bottom {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.fv4-bottom {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.fv4-saved-time {
  font-size: 12px;
  color: var(--muted);
}

.fv4-mini-actions {
  display: flex;
  gap: 8px;
}

.fv4-btn-mini {
  border: 1px solid var(--line2, var(--surface-6));
  background: var(--surface-3);
  color: var(--text-bright);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
}

.fv4-btn-mini:hover {
  background: var(--surface-7);
  color: #fff;
}

.fv4-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 1450px) {
  .fv4-hero-top {
    flex-direction: column;
  }

  .fv4-kpi-row {
    min-width: 0;
    width: 100%;
  }

  .fv4-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .fv4-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .fv4-h1 {
    font-size: 28px;
  }

  .fv4-kpi-row {
    grid-template-columns: 1fr;
  }

  .fv4-toolbar-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .fv4-field select {
    width: 100%;
    min-width: 0;
  }

  .fv4-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fv4-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Step 80: 대시보드 PC v4 ── */
.db4 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 1520px;
}

.db4-stat-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
}

.db4-stat-chip {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 112px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    linear-gradient(180deg, var(--surface-3), var(--surface-1)),
    rgba(13, 22, 37, .92);
  box-shadow: inset 0 1px 0 var(--surface-3), 0 14px 34px rgba(0, 0, 0, .18);
}

.db4-stat-chip--teal {
  border-color: rgba(33, 210, 199, .28);
  background: linear-gradient(180deg, rgba(22, 152, 152, .14), var(--surface-1)), rgba(13, 22, 37, .92);
}

.db4-stat-chip--blue {
  border-color: rgba(77, 184, 255, .26);
  background: linear-gradient(180deg, rgba(53, 104, 212, .14), var(--surface-1)), rgba(13, 22, 37, .92);
}

.db4-stat-chip--violet {
  border-color: rgba(141, 99, 255, .28);
  background: linear-gradient(180deg, rgba(96, 72, 192, .16), var(--surface-1)), rgba(13, 22, 37, .92);
}

.db4-stat-chip--amber {
  border-color: rgba(255, 191, 71, .26);
  background: linear-gradient(180deg, rgba(145, 95, 12, .16), var(--surface-1)), rgba(13, 22, 37, .92);
}

.db4-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 23px;
  color: #eef5ff;
  background: var(--surface-7);
  border: 1px solid var(--surface-6);
}

.db4-stat-copy {
  min-width: 0;
}

.db4-stat-label {
  display: block;
  font-size: 13px;
  color: var(--text-2, #b8c6dd);
  margin-bottom: 4px;
}

.db4-stat-value {
  display: block;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.05;
  color: #f4f8ff;
}

.db4-stat-unit {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-4, #5e6e8a);
}

.db4-grid {
  display: grid;
  grid-template-columns: minmax(460px, 1.34fr) minmax(460px, 1.18fr) minmax(400px, 1fr);
  gap: 12px;
  align-items: start;
}

.db4-panel {
  border-radius: 16px;
  border: 1px solid var(--surface-7);
  background:
    linear-gradient(180deg, var(--surface-2), rgba(255, 255, 255, .015)),
    rgba(10, 18, 32, .94);
  box-shadow: inset 0 1px 0 var(--surface-3), 0 18px 34px rgba(0, 0, 0, .18);
  overflow: hidden;
}

.db4-panel--pipeline {
  min-height: 246px;
}

.db4-panel--wide {
  grid-column: span 2;
}

.db4-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--surface-5);
}

.db4-panel-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.db4-panel-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: #f2f6fd;
  letter-spacing: -.02em;
}

.db4-title-danger {
  color: #ff766e !important;
}

.db4-panel-meta {
  font-size: 12px;
  color: var(--text-4, #5e6e8a);
}

.db4-action-link {
  color: #d8e5fb;
  text-decoration: none;
  font-size: 13px;
}

.db4-panel-body {
  padding: 12px 14px 14px;
}

.db4-pipeline-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.db4-pipeline-box {
  height: 204px;
  min-height: 204px;
  padding: 16px 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.db4-pipeline-box--pre_spec {
  background: linear-gradient(180deg, rgba(26, 157, 151, .20), rgba(17, 64, 80, .18));
  border-color: rgba(33, 210, 199, .24);
}

.db4-pipeline-box--bid {
  background: linear-gradient(180deg, rgba(39, 104, 194, .22), rgba(24, 52, 102, .20));
  border-color: rgba(77, 184, 255, .22);
}

.db4-pipeline-box--award {
  background: linear-gradient(180deg, rgba(105, 70, 184, .24), rgba(50, 38, 96, .20));
  border-color: rgba(141, 99, 255, .26);
}

.db4-pipeline-label {
  font-size: 14px;
  font-weight: 700;
  color: #e6f0ff;
}

.db4-pipeline-type {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(235, 243, 255, .82);
  letter-spacing: .04em;
}

.db4-pipeline-count {
  display: block;
  margin-top: 14px;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 800;
  color: #ffffff;
}

.db4-pipeline-budget {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  color: rgba(233, 241, 255, .86);
  word-break: keep-all;
}

.db4-pipeline-arrow {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: rgba(232, 238, 252, .72);
}

.db4-pipeline-ratio {
  display: flex;
  overflow: hidden;
  margin-top: 14px;
  border-radius: 9px;
  background: var(--surface-4);
  border: 1px solid var(--surface-5);
}

.db4-pipeline-ratio-fill {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(248, 251, 255, .92);
}

.db4-pipeline-ratio-fill--teal {
  background: linear-gradient(90deg, rgba(33, 210, 199, .52), rgba(33, 210, 199, .35));
}

.db4-pipeline-ratio-fill--blue {
  background: linear-gradient(90deg, rgba(77, 184, 255, .54), rgba(77, 184, 255, .35));
}

.db4-pipeline-ratio-fill--violet {
  background: linear-gradient(90deg, rgba(141, 99, 255, .54), rgba(141, 99, 255, .35));
}

.db4-donut-shell .donut-wrap {
  grid-template-columns: 176px minmax(210px, 1fr);
  gap: 18px;
}

.db4-side-list .side-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-4);
}

.db4-side-list .side-item:last-child {
  border-bottom: 0;
}

.db4-side-list .side-item.compact {
  grid-template-columns: 12px minmax(96px, 1fr) auto;
  gap: 10px;
}

.db4-side-copy {
  min-width: 0;
}

.db4-side-copy strong {
  display: block;
  word-break: keep-all;
  white-space: normal;
  line-height: 1.35;
}

.db4-side-count,
.db4-side-percent {
  white-space: nowrap;
}

.db4-side-count {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-4, #6f839f);
}

.db4-side-percent {
  font-size: 13px;
  font-weight: 700;
  color: #f0f5ff;
}

.db4-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.db4-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.db4-table th,
.db4-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--surface-5);
  font-size: 13px;
  color: #dce6f4;
  text-align: left;
  vertical-align: middle;
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
}

.db4-table th {
  padding-top: 0;
  color: var(--text-4, #6f839f);
  font-size: 12px;
  font-weight: 600;
}

.db4-table tbody tr:last-child td {
  border-bottom: 0;
}

.db4-table td:first-child,
.db4-table th:first-child {
  width: 44px;
  color: #f3f7ff;
}

.db4-link {
  color: var(--text-bright);
  text-decoration: none;
}

.db4-link:hover {
  color: #ffffff;
}

.db4-link--ellipsis {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.db4-cell-ellipsis {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.db4-pill,
.db4-badge-flow,
.db4-alert-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid transparent;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.db4-pill.red {
  color: #ffd4cd;
  background: rgba(255, 80, 80, .16);
  border-color: rgba(255, 80, 80, .22);
}

.db4-pill.amber {
  color: var(--warning-fg);
  background: rgba(255, 191, 71, .14);
  border-color: rgba(255, 191, 71, .18);
}

.db4-pill.blue {
  color: #a9d8ff;
  background: rgba(77, 184, 255, .14);
  border-color: rgba(77, 184, 255, .18);
}

.db4-badge-flow {
  color: #86deff;
  background: rgba(0, 177, 216, .14);
  border-color: rgba(0, 177, 216, .16);
}

.db4-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.db4-score.green {
  background: rgba(41, 217, 143, .18);
  color: #a1f1cd;
}

.db4-score.amber {
  background: rgba(255, 191, 71, .18);
  color: #ffdea9;
}

.db4-score.blue {
  background: rgba(77, 184, 255, .16);
  color: #b0e1ff;
}

.db4-alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.db4-alert-item {
  display: grid;
  grid-template-columns: 42px 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--surface-5);
  background: var(--surface-1);
}

.db4-alert-time {
  font-size: 13px;
  color: var(--text-3, #8ea0c3);
  font-variant-numeric: tabular-nums;
}

.db4-alert-tag.blue {
  color: #a9d8ff;
  background: rgba(77, 184, 255, .14);
  border-color: rgba(77, 184, 255, .16);
}

.db4-alert-tag.red {
  color: #ffc1ba;
  background: rgba(255, 100, 80, .14);
  border-color: rgba(255, 100, 80, .16);
}

.db4-table--opps {
  min-width: 620px;
}

.db4-table--signals {
  min-width: 660px;
}

.db4-table--urgent {
  min-width: 760px;
}

.db4-table--agency {
  min-width: 580px;
}

.db4-table--today {
  min-width: 980px;
}

.db4-table--opps th:nth-child(1),
.db4-table--signals th:nth-child(1),
.db4-table--urgent th:nth-child(1),
.db4-table--agency th:nth-child(1),
.db4-table--today th:nth-child(1) {
  width: 42px;
}

.db4-table--opps th:nth-child(2) {
  width: 44%;
}

.db4-table--opps th:nth-child(3) {
  width: 22%;
}

.db4-table--opps th:nth-child(4) {
  width: 17%;
}

.db4-table--opps th:nth-child(5) {
  width: 17%;
}

.db4-table--signals th:nth-child(2) {
  width: 48%;
}

.db4-table--signals th:nth-child(3) {
  width: 24%;
}

.db4-table--signals th:nth-child(4) {
  width: 16%;
}

.db4-table--signals th:nth-child(5) {
  width: 12%;
}

.db4-table--urgent th:nth-child(2) {
  width: 40%;
}

.db4-table--urgent th:nth-child(3) {
  width: 20%;
}

.db4-table--urgent th:nth-child(4) {
  width: 14%;
}

.db4-table--urgent th:nth-child(5) {
  width: 14%;
}

.db4-table--urgent th:nth-child(6) {
  width: 12%;
}

.db4-table--agency th:nth-child(2) {
  width: 36%;
}

.db4-table--agency th:nth-child(3) {
  width: 18%;
}

.db4-table--agency th:nth-child(4) {
  width: 24%;
}

.db4-table--agency th:nth-child(5) {
  width: 14%;
}

.db4-table--today th:nth-child(2) {
  width: 30%;
}

.db4-table--today th:nth-child(3) {
  width: 16%;
}

.db4-table--today th:nth-child(4) {
  width: 10%;
}

.db4-table--today th:nth-child(5) {
  width: 12%;
}

.db4-table--today th:nth-child(6) {
  width: 8%;
}

.db4-table--today th:nth-child(7) {
  width: 8%;
}

.db4-table--today th:nth-child(8) {
  width: 8%;
}

.db4-table--today th:nth-child(9) {
  width: 8%;
}

.db4-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--text-4, #5e6e8a);
  font-size: 13px;
}

@media (max-width: 1600px) {
  .db4-grid {
    grid-template-columns: 1.2fr 1.2fr 1fr;
  }
}

@media (max-width: 1269px) {
  .db4-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Step 83: 대시보드 PC v5 (신규 시안) ── */
.db5 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 24px;
}

/* Step 243: 비로그인 대시보드 CTA */
.db5-guest-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-radius: 18px;
  border: 1px solid rgba(124, 92, 255, 0.32);
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.18), transparent 42%),
    linear-gradient(180deg, var(--surface-3), rgba(255, 255, 255, 0.015)),
    var(--bg-card);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.db5-guest-cta__copy {
  min-width: 0;
}

.db5-guest-cta__copy strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 6px;
}

.db5-guest-cta__copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
}

.db5-guest-cta__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.db5-guest-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-purple), var(--info));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(124, 92, 255, 0.28);
  white-space: nowrap;
}

.db5-guest-cta__btn:hover {
  color: #fff;
  filter: brightness(1.06);
}

.dm4-guest-cta {
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, 0.3);
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.16), transparent 50%),
    var(--bg-card);
}

.dm4-guest-cta strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.dm4-guest-cta p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

.dm4-guest-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-purple), var(--info));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.dm4-guest-cta__btn:hover {
  color: #fff;
}

@media (max-width: 900px) {
  .db5-guest-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .db5-guest-cta__actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* stat 칩 5개 */
.db5-stat-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 12px;
}

.db5-stat-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 100px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--db5-chip-border);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-1)), var(--db5-chip-base);
  box-shadow: inset 0 1px 0 var(--surface-3), 0 12px 28px rgba(0, 0, 0, .16);
}

.db5-stat-chip--teal {
  border-color: rgba(33, 210, 199, .28);
  background: linear-gradient(180deg, rgba(22, 152, 152, .14), var(--surface-1)), var(--db5-chip-base);
}

.db5-stat-chip--blue {
  border-color: rgba(77, 184, 255, .26);
  background: linear-gradient(180deg, rgba(53, 104, 212, .14), var(--surface-1)), var(--db5-chip-base);
}

.db5-stat-chip--violet {
  border-color: rgba(141, 99, 255, .28);
  background: linear-gradient(180deg, rgba(96, 72, 192, .16), var(--surface-1)), var(--db5-chip-base);
}

.db5-stat-chip--amber {
  border-color: rgba(255, 191, 71, .26);
  background: linear-gradient(180deg, rgba(145, 95, 12, .16), var(--surface-1)), var(--db5-chip-base);
}

.db5-stat-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--surface-7);
  border: 1px solid var(--surface-6);
}

.db5-stat-copy {
  min-width: 0;
}

.db5-stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-2, #b8c6dd);
  margin-bottom: 4px;
}

.db5-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--db5-value-fg);
}

.db5-stat-hint {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-4, #5e6e8a);
}

/* 카드 공통 */
.db5-card {
  border-radius: 16px;
  border: 1px solid var(--surface-7);
  background: linear-gradient(180deg, var(--surface-2), rgba(255, 255, 255, .015)), var(--db5-card-base);
  box-shadow: inset 0 1px 0 var(--surface-3), 0 16px 30px rgba(0, 0, 0, .18);
  overflow: hidden;
}

.db5-card--full {
  grid-column: 1 / -1;
}

.db5-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--surface-5);
}

.db5-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text, #f2f6fd);
  letter-spacing: -.02em;
}

.db5-card-hint {
  font-size: 12px;
  color: var(--text-4, #5e6e8a);
}

.db5-action-link {
  margin-left: auto;
  color: var(--text-3, #8ea0c3);
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
}

.db5-action-link:hover {
  color: var(--text, #f2f6fd);
}

.db5-card-body {
  padding: 12px 14px 14px;
  color: var(--text, #dce6f4);
}

.db5-card-body--table {
  padding: 0;
  overflow-x: auto;
}

/* 프리미엄 배지 */
.db5-pill-premium {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--warning-fg);
  background: rgba(255, 191, 71, .15);
  border: 1px solid rgba(255, 191, 71, .22);
}

/* empty placeholder */
.db5-empty {
  padding: 28px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-4, #5e6e8a);
  line-height: 1.7;
}

/* stat-line (과거 발주 이력 etc.) */
.db5-stat-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--surface-4);
  font-size: 13px;
  color: var(--text-2, #b8c6dd);
}

.db5-stat-line:last-child {
  border-bottom: 0;
}

.db5-stat-line strong {
  font-weight: 700;
  color: var(--text, #f0f5ff);
  white-space: nowrap;
}

/* 도넛 사이드 리스트 */
.db5-side-list .side-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-4);
}

.db5-side-list .side-item:last-child {
  border-bottom: 0;
}

.db5-side-list .side-item.compact {
  grid-template-columns: 12px minmax(80px, 1fr) auto;
  gap: 10px;
}

.db5-side-copy {
  min-width: 0;
}

.db5-side-copy strong {
  display: block;
  font-size: 13px;
  color: var(--text, #dce6f4);
  word-break: keep-all;
}

.db5-side-count {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-4, #6f839f);
}

.db5-side-percent {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #f0f5ff);
  white-space: nowrap;
}

/* 그리드 레이아웃 */
.db5-grid {
  display: grid;
  gap: 12px;
  align-items: start;
}

.db5-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.db5-grid--gh {
  grid-template-columns: 1.6fr 1fr;
}

/* 테이블 공통 */
.db5-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.db5-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.db5-table th,
.db5-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--surface-4);
  font-size: 13px;
  color: var(--text, #dce6f4);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db5-table th {
  padding-top: 10px;
  color: var(--text-4, #6f839f);
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, .025);
}

.db5-table tbody tr:last-child td {
  border-bottom: 0;
}

.db5-table tbody tr:hover td {
  background: rgba(255, 255, 255, .025);
}

/* 테이블별 컬럼 너비 */
.db5-table--recent {
  min-width: 540px;
}

.db5-table--recent th:nth-child(1) {
  width: 40%;
}

.db5-table--recent th:nth-child(2) {
  width: 14%;
}

.db5-table--recent th:nth-child(3) {
  width: 14%;
}

.db5-table--recent th:nth-child(4) {
  width: 12%;
}

.db5-table--recent th:nth-child(5) {
  width: 12%;
}

.db5-table--recent th:nth-child(6) {
  width: 10%;
}

.db5-table--projects {
  min-width: 440px;
}

.db5-table--projects th:nth-child(1) {
  width: 44%;
}

.db5-table--projects th:nth-child(2) {
  width: 20%;
}

.db5-table--projects th:nth-child(3) {
  width: 18%;
}

.db5-table--projects th:nth-child(4) {
  width: 18%;
}

.db5-table--vendors {
  min-width: 420px;
}

.db5-table--vendors th:nth-child(1) {
  width: 10%;
}

.db5-table--vendors th:nth-child(2) {
  width: 36%;
}

.db5-table--vendors th:nth-child(3) {
  width: 18%;
}

.db5-table--vendors th:nth-child(4) {
  width: 18%;
}

.db5-table--vendors th:nth-child(5) {
  width: 18%;
}

.db5-table--today {
  min-width: 640px;
}

.db5-table--today th:nth-child(1) {
  width: 34%;
}

.db5-table--today th:nth-child(2) {
  width: 18%;
}

.db5-table--today th:nth-child(3) {
  width: 12%;
}

.db5-table--today th:nth-child(4) {
  width: 12%;
}

.db5-table--today th:nth-child(5) {
  width: 9%;
}

.db5-table--today th:nth-child(6) {
  width: 9%;
}

.db5-table--today th:nth-child(7) {
  width: 9%;
}

/* 링크 */
.db5-link {
  color: var(--text, #e7eef9);
  text-decoration: none;
}

.db5-link:hover {
  color: var(--accent-fg);
}

.db5-link--ellipsis {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db5-cell-ellipsis {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 배지 — 유형 */
.db5-badge-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--info-fg);
  background: var(--info-soft);
  border: 1px solid rgba(0, 177, 216, .18);
}

/* 배지 — 진행 단계 */
.db5-badge-phase {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--info-fg);
  background: var(--info-soft);
  border: 1px solid rgba(77, 184, 255, .18);
}

/* 배지 — 상태 */
.db5-badge-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.db5-badge-status.ongoing {
  color: var(--success-fg);
  background: var(--success-soft);
  border: 1px solid rgba(41, 217, 143, .18);
}

.db5-badge-status.closed {
  color: var(--text-3);
  background: var(--surface-6);
  border: 1px solid var(--surface-8);
}

/* 알림 */
.db5-alert-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db5-alert-item {
  display: grid;
  grid-template-columns: 40px 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid var(--surface-5);
  background: var(--surface-1);
}

.db5-alert-time {
  font-size: 12px;
  color: var(--text-3, #8ea0c3);
  font-variant-numeric: tabular-nums;
}

.db5-alert-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.db5-alert-tag.new {
  color: #a9d8ff;
  background: rgba(77, 184, 255, .14);
  border-color: rgba(77, 184, 255, .18);
}

.db5-alert-tag.urgent {
  color: #ffc1ba;
  background: rgba(255, 100, 80, .14);
  border-color: rgba(255, 100, 80, .18);
}

.db5-alert-tag.transfer {
  color: #9ef0e4;
  background: rgba(0, 200, 180, .14);
  border-color: rgba(0, 200, 180, .18);
}

/* 반응형 */
@media (max-width: 1439px) {
  .db5-grid--3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* =====================================================
   vd5-* — 사업자 목록 PC 테이블 리스트 (Step 85)
   ===================================================== */

/* KPI 행 */
.vd5-kpi-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.vd5-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-6);
  border-radius: 10px;
  min-width: 140px;
}

.vd5-kpi--blue {
  border-color: rgba(74, 144, 226, .22);
}

.vd5-kpi--green {
  border-color: rgba(0, 200, 120, .22);
}

.vd5-kpi-label {
  font-size: 12px;
  color: var(--text-4, #6f839f);
}

.vd5-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
}

.vd5-kpi--blue .vd5-kpi-value {
  color: var(--blue, #4a90e2);
}

.vd5-kpi--green .vd5-kpi-value {
  color: var(--green, #00c878);
}

/* 검색바 */
.vd5-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.vd5-search-input {
  flex: 1;
  max-width: 320px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-8);
  border-radius: 7px;
  color: var(--text, #e2eaf6);
}

.vd5-search-input::placeholder {
  color: var(--text-4, #6f839f);
}

.vd5-search-btn {
  padding: 8px 16px;
  font-size: 13px;
  background: var(--violet, #9d7dff);
  border: none;
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
}

.vd5-search-btn:hover {
  opacity: .88;
}

/* 테이블 래퍼 */
.vd5-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.vd5-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: fixed;
}

.vd5-table th,
.vd5-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-4);
  font-size: 13px;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  vertical-align: middle;
}

.vd5-table th {
  color: var(--text-4, #6f839f);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.vd5-table tbody tr:last-child td {
  border-bottom: 0;
}

.vd5-table tbody tr:hover td {
  background: rgba(255, 255, 255, .025);
}

/* 컬럼 너비 */
.vd5-table th:nth-child(1) {
  width: 32%;
}

.vd5-table th:nth-child(2) {
  width: 14%;
}

.vd5-table th:nth-child(3) {
  width: 12%;
}

.vd5-table th:nth-child(4) {
  width: 14%;
}

.vd5-table th:nth-child(5) {
  width: 14%;
}

.vd5-table th:nth-child(6) {
  width: 14%;
}

/* 업체명 링크 */
.vd5-link {
  color: var(--text, #e2eaf6);
  text-decoration: none;
}

.vd5-link:hover {
  color: var(--violet, #9d7dff);
  text-decoration: underline;
}

.vd5-link--ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 업종 배지 */
.vd5-badge-type {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  background: rgba(141, 99, 255, .15);
  color: var(--violet, #9d7dff);
  white-space: nowrap;
}

/* 상세 버튼 */
.vd5-btn-mini {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 5px;
  color: var(--text-3, #8fa3be);
  background: transparent;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.vd5-btn-mini:hover {
  background: var(--surface-6);
  color: var(--text, #e2eaf6);
}

/* 빈 상태 */
.vd5-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-4, #6f839f);
  font-size: 14px;
}

/* 페이징 */
.vd5-paging {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.vd5-page-btn {
  display: inline-block;
  padding: 5px 11px;
  font-size: 13px;
  border: 1px solid var(--surface-8);
  border-radius: 6px;
  color: var(--text-3, #8fa3be);
  background: transparent;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.vd5-page-btn:hover {
  background: var(--surface-5);
  color: var(--text, #e2eaf6);
}

.vd5-page-btn--active {
  background: var(--violet, #9d7dff);
  border-color: var(--violet, #9d7dff);
  color: #fff;
}

.vd5-page-ellipsis {
  display: inline-block;
  padding: 5px 6px;
  font-size: 13px;
  color: var(--text-4, #6f839f);
  user-select: none;
}

/* =====================================================
   ag5-* — 발주처 목록 PC 테이블 리스트 (Step 84)
   ===================================================== */

/* KPI 행 */
.ag5-kpi-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ag5-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-6);
  border-radius: 10px;
  min-width: 140px;
}

.ag5-kpi--blue {
  border-color: rgba(74, 144, 226, .22);
}

.ag5-kpi--green {
  border-color: rgba(0, 200, 120, .22);
}

.ag5-kpi-label {
  font-size: 12px;
  color: var(--text-4, #6f839f);
}

.ag5-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
}

.ag5-kpi--blue .ag5-kpi-value {
  color: var(--blue, #4a90e2);
}

.ag5-kpi--green .ag5-kpi-value {
  color: var(--green, #00c878);
}

/* 검색바 */
.ag5-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.ag5-search-input {
  flex: 1;
  max-width: 320px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-8);
  border-radius: 7px;
  color: var(--text, #e2eaf6);
}

.ag5-search-input::placeholder {
  color: var(--text-4, #6f839f);
}

.ag5-search-btn {
  padding: 8px 16px;
  font-size: 13px;
  background: var(--violet, #9d7dff);
  border: none;
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
}

.ag5-search-btn:hover {
  opacity: .88;
}

/* 테이블 래퍼 */
.ag5-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.ag5-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

.ag5-table th,
.ag5-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-4);
  font-size: 13px;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  vertical-align: middle;
}

.ag5-table th {
  color: var(--text-4, #6f839f);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ag5-table tbody tr:last-child td {
  border-bottom: 0;
}

.ag5-table tbody tr:hover td {
  background: rgba(255, 255, 255, .025);
}

/* 컬럼 너비 */
.ag5-table th:nth-child(1) {
  width: 30%;
}

.ag5-table th:nth-child(2) {
  width: 12%;
}

.ag5-table th:nth-child(3) {
  width: 10%;
}

.ag5-table th:nth-child(4) {
  width: 12%;
}

.ag5-table th:nth-child(5) {
  width: 12%;
}

.ag5-table th:nth-child(6) {
  width: 12%;
}

.ag5-table th:nth-child(7) {
  width: 12%;
}

/* 발주처명 링크 */
.ag5-link {
  color: var(--text, #e2eaf6);
  text-decoration: none;
}

.ag5-link:hover {
  color: var(--violet, #9d7dff);
  text-decoration: underline;
}

.ag5-link--ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 유형 배지 */
.ag5-badge-type {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  background: rgba(74, 144, 226, .15);
  color: var(--blue, #4a90e2);
  white-space: nowrap;
}

/* 상세 버튼 */
.ag5-btn-mini {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 5px;
  color: var(--text-3, #8fa3be);
  background: transparent;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.ag5-btn-mini:hover {
  background: var(--surface-6);
  color: var(--text, #e2eaf6);
}

/* 빈 상태 */
.ag5-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-4, #6f839f);
  font-size: 14px;
}

/* 페이징 */
.ag5-paging {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.ag5-page-btn {
  display: inline-block;
  padding: 5px 11px;
  font-size: 13px;
  border: 1px solid var(--surface-8);
  border-radius: 6px;
  color: var(--text-3, #8fa3be);
  background: transparent;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.ag5-page-btn:hover {
  background: var(--surface-5);
  color: var(--text, #e2eaf6);
}

.ag5-page-btn--active {
  background: var(--violet, #9d7dff);
  border-color: var(--violet, #9d7dff);
  color: #fff;
}

.ag5-page-ellipsis {
  display: inline-block;
  padding: 5px 6px;
  font-size: 13px;
  color: var(--text-4, #6f839f);
  user-select: none;
}

/* =====================================================
   fv5-* — 관심공고 PC 테이블 리스트 (Step 78)
   ===================================================== */

/* KPI 칩 행 */
.fv5-kpi-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.fv5-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-6);
  border-radius: 10px;
  min-width: 140px;
}

.fv5-kpi--urgent {
  border-color: rgba(255, 100, 100, .22);
}

.fv5-kpi--priority {
  border-color: rgba(141, 99, 255, .25);
}

.fv5-kpi-label {
  font-size: 12px;
  color: var(--text-4, #6f839f);
}

.fv5-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
}

.fv5-kpi--urgent .fv5-kpi-value {
  color: #ff8fa3;
}

.fv5-kpi--priority .fv5-kpi-value {
  color: var(--violet, #9d7dff);
}

/* 툴바 (필터 탭 + 정렬) */
.fv5-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.fv5-filter-tabs {
  display: flex;
  gap: 6px;
}

.fv5-tab {
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid var(--surface-8);
  border-radius: 20px;
  background: transparent;
  color: var(--text-3, #8fa3be);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.fv5-tab:hover {
  background: var(--surface-5);
  color: var(--text, #e2eaf6);
}

.fv5-tab--active {
  background: var(--violet, #9d7dff);
  border-color: var(--violet, #9d7dff);
  color: #fff;
}

.fv5-sort-wrap select {
  font-size: 13px;
  padding: 6px 10px;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-8);
  border-radius: 7px;
  color: var(--text, #e2eaf6);
  cursor: pointer;
}

/* 테이블 래퍼 */
.fv5-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.fv5-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.fv5-table th,
.fv5-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-4);
  font-size: 13px;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  vertical-align: middle;
}

.fv5-table th {
  padding-top: 10px;
  color: var(--text-4, #6f839f);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.fv5-table tbody tr:last-child td {
  border-bottom: 0;
}

.fv5-table tbody tr:hover td {
  background: rgba(255, 255, 255, .025);
}

/* 컬럼 너비 */
.fv5-table th:nth-child(1) {
  width: 32%;
}

.fv5-table th:nth-child(2) {
  width: 16%;
}

.fv5-table th:nth-child(3) {
  width: 12%;
}

.fv5-table th:nth-child(4) {
  width: 9%;
}

.fv5-table th:nth-child(5) {
  width: 10%;
}

.fv5-table th:nth-child(6) {
  width: 7%;
}

.fv5-table th:nth-child(7) {
  width: 14%;
}

/* 공고명 링크 */
.fv5-link {
  color: var(--text, #e2eaf6);
  text-decoration: none;
}

.fv5-link:hover {
  color: var(--violet, #9d7dff);
  text-decoration: underline;
}

.fv5-link--ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 발주처 ellipsis */
.fv5-cell-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* D-day 배지 */
.fv5-dday {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-6);
  color: var(--text, #e2eaf6);
  white-space: nowrap;
}

.fv5-dday--red {
  background: rgba(255, 80, 80, .15);
  color: #ff8fa3;
}

.fv5-dday--amber {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
}

.fv5-dday--green {
  background: rgba(0, 200, 120, .12);
  color: #6fedb8;
}

.fv5-dday--muted {
  background: var(--surface-4);
  color: var(--text-4, #6f839f);
}

/* 유형 배지 */
.fv5-badge-type {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  background: rgba(141, 99, 255, .15);
  color: var(--violet, #9d7dff);
  white-space: nowrap;
}

/* 액션 셀 */
.fv5-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

.fv5-btn-mini {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 5px;
  color: var(--text-3, #8fa3be);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.fv5-btn-mini:hover {
  background: var(--surface-6);
  color: var(--text, #e2eaf6);
}

.fv5-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--amber, #ffb74d);
  padding: 0 2px;
  line-height: 1;
}

.fv5-star:hover {
  color: #ff8fa3;
}

/* 빈 상태 */
.fv5-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-4, #6f839f);
  font-size: 14px;
}

/* =====================================================
   nf5-* — 공고목록 PC 필터 아코디언 + 빠른선택 (Step 86/88)
   ===================================================== */

.nf5-acc-group {
  margin-bottom: 4px;
}

.nf5-acc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--surface-5);
  color: var(--text, #e2eaf6);
  cursor: pointer;
  text-align: left;
}

.nf5-acc-header:hover {
  color: var(--violet, #9d7dff);
}

.nf5-acc-title {
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.nf5-acc-summary {
  flex: 1;
  font-size: 12px;
  color: var(--text-4, #6f839f);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.nf5-acc-chevron {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-4, #6f839f);
  transition: transform .15s;
}

.nf5-acc-header.open .nf5-acc-chevron {
  transform: rotate(180deg);
}

.nf5-acc-body {
  display: none;
  padding: 10px 0 6px;
}

.nf5-save-btn {
  float: right;
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid rgba(141, 99, 255, .3);
  border-radius: 6px;
  background: rgba(141, 99, 255, .1);
  color: var(--violet, #9d7dff);
  cursor: pointer;
}

.nf5-save-btn:hover {
  background: rgba(141, 99, 255, .18);
}

.nf5-slot-filled {
  border-color: rgba(141, 99, 255, .4) !important;
  background: rgba(141, 99, 255, .12) !important;
  color: var(--violet, #9d7dff) !important;
}

.nf5-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.nf5-quick-btn {
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--surface-8);
  border-radius: 16px;
  background: var(--surface-3);
  color: var(--text-3, #8fa3be);
  cursor: pointer;
  white-space: nowrap;
  word-break: keep-all;
  transition: background .15s, color .15s, border-color .15s;
}

.nf5-quick-btn:hover {
  background: var(--surface-7);
  color: var(--text, #e2eaf6);
}

.nf5-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nf5-range-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface-1, #0f1a2e);
  color: var(--text-bright);
  font-size: 13px;
}

.nf5-range-sep {
  color: var(--text-3);
  font-size: 12px;
}

.nf5-pill-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0 2px;
}

.nf5-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-3, #8fa3be);
  background: var(--surface-4);
  border: 1px solid var(--surface-7);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.nf5-pill-reset {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-4, #6f839f);
  text-decoration: none;
  white-space: nowrap;
}

.nf5-pill-reset:hover {
  color: var(--violet, #9d7dff);
  text-decoration: underline;
}

/* =====================================================
   nd5-* — 공고상세 PC 3차 시안 (Step 90)
   ===================================================== */

.nd5-hero {
  margin-bottom: 20px;
}

.nd5-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.nd5-hero-title h2 {
  margin: 8px 0 6px;
  font-size: 22px;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.nd5-badge-type {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(141, 99, 255, .15);
  color: var(--violet, #9d7dff);
}

.nd5-crumb {
  font-size: 13px;
  color: var(--text-4, #6f839f);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.nd5-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.nd5-facts-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 12px 0;
  border-top: 1px solid var(--surface-5);
  border-bottom: 1px solid var(--surface-5);
  margin-bottom: 14px;
}

.nd5-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 16px;
  border-right: 1px solid var(--surface-5);
  min-width: 100px;
}

.nd5-fact:last-child {
  border-right: 0;
}

.nd5-fact .k {
  font-size: 11px;
  color: var(--text-4, #6f839f);
}

.nd5-fact .v {
  font-size: 13px;
  color: var(--text, #e2eaf6);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.nd5-stepper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nd5-step {
  flex: 1;
  min-width: 80px;
  padding: 8px 12px;
  text-align: center;
  font-size: 12px;
  border-radius: 8px;
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  color: var(--text-4, #6f839f);
  word-break: keep-all;
}

.nd5-step.done {
  background: rgba(0, 200, 120, .12);
  border-color: rgba(0, 200, 120, .25);
  color: var(--green, #00c878);
  font-weight: 600;
}

.nd5-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.12fr) minmax(300px, .9fr);
  gap: 18px;
  margin-top: 20px;
  align-items: start;
}

.nd5-stack {
  display: grid;
  gap: 18px;
}

.nd5-card {
  background: var(--bg-card, var(--surface-2));
  border: 1px solid var(--surface-6);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}

.nd5-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--surface-4);
}

.nd5-card-head h3 {
  font-size: 16px;
  margin: 0;
}

.nd5-card-head p {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, #8fa3be);
}

.nd5-card-body {
  padding: 18px;
  min-width: 0;
}

.notice-detail-page .nd5-grid-3,
.notice-detail-page .nd5-stack,
.notice-detail-page .nd5-card,
.notice-detail-page .nd5-card-body,
.notice-detail-page .notice,
.notice-detail-page .attach,
.notice-detail-page .info-box,
.notice-detail-page .stat,
.notice-detail-page .issue,
.notice-detail-page .insight {
  min-width: 0;
}

.notice-detail-page .nd5-card-head h3 {
  font-size: 16px;
}

.notice-detail-page .nd5-card-head p {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.nd5-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
  align-items: start;
}

.notice-detail-page .nd5-grid-2,
.notice-detail-page .nd5-grid-2 .nd5-stack,
.notice-detail-page .nd5-grid-2 .nd5-card,
.notice-detail-page .nd5-grid-2 .nd5-card-body {
  min-width: 0;
}

@media (max-width: 1200px) {
  .nd5-grid-3 {
    grid-template-columns: 1fr;
  }

  .nd5-grid-2 {
    grid-template-columns: 1fr;
  }

  .nd5-fact {
    border-right: 0;
    border-bottom: 1px solid var(--surface-3);
  }
}

/* =====================================================
   pd5-* — 사업분석 PC 3차 시안 (Step 91)
   ===================================================== */

.pd5-hero {
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(141, 99, 255, .14), rgba(82, 184, 255, .06) 50%, var(--surface-2));
  margin-bottom: 20px;
}

.pd5-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pd5-hero-top h1 {
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--text, #e2eaf6);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.pd5-crumb {
  font-size: 13px;
  color: var(--text-4, #6f839f);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.pd5-score-badge {
  flex-shrink: 0;
  min-width: 120px;
  padding: 12px 18px;
  border-radius: 12px;
  text-align: center;
  background: rgba(35, 209, 139, .12);
  border: 1px solid rgba(35, 209, 139, .28);
}

.pd5-score-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--green, #23d18b);
  line-height: 1.2;
}

.pd5-score-label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green, #23d18b);
  word-break: keep-all;
}

.pd5-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.pd5-kpi {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
}

.pd5-kpi .k {
  display: block;
  font-size: 11px;
  color: var(--text-4, #6f839f);
  word-break: keep-all;
}

.pd5-kpi .v {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
  word-break: keep-all;
}

.pd5-bar {
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--surface-7);
  overflow: hidden;
}

.pd5-bar>i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green, #23d18b);
}

.pd5-facts-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 12px 0;
  border-top: 1px solid var(--surface-5);
  border-bottom: 1px solid var(--surface-5);
  margin-bottom: 14px;
}

.pd5-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 16px;
  border-right: 1px solid var(--surface-5);
  min-width: 100px;
}

.pd5-fact:last-child {
  border-right: 0;
}

.pd5-fact .k {
  font-size: 11px;
  color: var(--text-4, #6f839f);
}

.pd5-fact .v {
  font-size: 13px;
  color: var(--text, #e2eaf6);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.pd5-memo {
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
}

.pd5-memo strong {
  font-size: 13px;
  color: var(--text, #e2eaf6);
}

.pd5-memo p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.pd5-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.12fr) minmax(300px, .9fr);
  gap: 18px;
  margin-top: 20px;
  align-items: start;
}

.pd5-stack {
  display: grid;
  gap: 18px;
}

.pd5-card {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}

.pd5-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--surface-5);
}

.pd5-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
  word-break: keep-all;
}

.pd5-card-head p {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-4, #6f839f);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.pd5-card-body {
  padding: 18px;
  min-width: 0;
}

/* 카드 내부 — pd5 토큰으로 v2 톤 덮어쓰기 */
.project-detail-page .pd5-grid-3,
.project-detail-page .pd5-stack,
.project-detail-page .pd5-card,
.project-detail-page .pd5-card-body,
.project-detail-page .pd5-card .info,
.project-detail-page .pd5-card .issue,
.project-detail-page .pd5-card .stat,
.project-detail-page .pd5-card .insight,
.project-detail-page .pd5-card .comp-card,
.project-detail-page .pd5-card .todo,
.project-detail-page .pd5-card .attach {
  min-width: 0;
}

.project-detail-page .pd5-card .stat,
.project-detail-page .pd5-card .info,
.project-detail-page .pd5-card .issue,
.project-detail-page .pd5-card .comp-card,
.project-detail-page .pd5-card .todo {
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  border-radius: 10px;
}

.project-detail-page .pd5-card .stat .k,
.project-detail-page .pd5-card .comp-card .k {
  font-size: 11px;
  color: var(--text-4, #6f839f);
}

.project-detail-page .pd5-card .stat .v,
.project-detail-page .pd5-card .comp-card .v {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
}

.project-detail-page .pd5-card .stat.green .v {
  color: var(--green, #23d18b);
}

.project-detail-page .pd5-card .stat.blue .v {
  color: var(--blue, #4db8ff);
}

.project-detail-page .pd5-card .stat.amber .v {
  color: var(--amber, #ffbf47);
}

.project-detail-page .pd5-card .stat.rose .v {
  color: var(--rose, #ff6f8b);
}

.project-detail-page .pd5-card .stat .s,
.project-detail-page .pd5-card .comp-card .s {
  font-size: 11px;
  color: var(--text-4, #6f839f);
}

.project-detail-page .pd5-card .insight {
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}

.project-detail-page .pd5-card .insight .icon {
  background: rgba(141, 99, 255, .15);
  color: var(--violet, #9d7dff);
  border: 1px solid rgba(141, 99, 255, .25);
}

.project-detail-page .pd5-card .insight p,
.project-detail-page .pd5-card .info p,
.project-detail-page .pd5-card .issue p,
.project-detail-page .pd5-card .todo p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.project-detail-page .pd5-card .issue.delay {
  border-color: rgba(255, 191, 71, .22);
}

.project-detail-page .pd5-card .issue.scope {
  border-color: rgba(77, 184, 255, .22);
}

.project-detail-page .pd5-card .issue.win {
  border-color: rgba(35, 209, 139, .22);
}

.project-detail-page .pd5-card .attach {
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  border-radius: 10px;
  padding: 14px;
  align-items: center;
}

.project-detail-page .pd5-card .attach .name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.project-detail-page .pd5-card .file-tag {
  flex-shrink: 0;
}

.project-detail-page .pd5-card .todo .bullet {
  background: rgba(141, 99, 255, .15);
  border: 1px solid rgba(141, 99, 255, .25);
  color: var(--violet, #9d7dff);
}

.project-detail-page .pd5-card .vendor-row .title {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.project-detail-page .pd5-card .vendor-row .cell.fit {
  color: var(--green, #23d18b);
}

.project-detail-page .pd5-card .vendor-row .cell.watch {
  color: var(--amber, #ffbf47);
}

.project-detail-page .pd5-card .tag {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 8px;
  color: var(--text, #e2eaf6);
}

@media (max-width: 1200px) {
  .pd5-grid-3 {
    grid-template-columns: 1fr;
  }

  .pd5-hero-top h1 {
    font-size: 24px;
  }

  .pd5-fact {
    border-right: 0;
    border-bottom: 1px solid var(--surface-3);
  }

  .project-detail-page .pd5-card .comp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {

  .project-detail-page .pd5-card .grid2,
  .project-detail-page .pd5-card .comp-grid {
    grid-template-columns: 1fr;
  }
}

/* Step 95 — 공고목록 PC 화면 시안 1:1 정밀 보정 스타일 */
.notice-list-page .nf5-hero {
  border: 1px solid var(--line, var(--surface-8));
  border-radius: 26px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(141, 99, 255, .12), rgba(82, 184, 255, .05) 40%, var(--surface-1) 100%), var(--surface-1);
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.notice-list-page .nf5-hero-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #f0f0f5);
  word-break: keep-all;
}

.notice-list-page .nf5-hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

/* Step 283: 공고번호 검색 폴백 안내 */
.notice-list-page .nf5-notice-number-notice {
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(255, 190, 92, 0.42);
  border-radius: 12px;
  background: rgba(255, 190, 92, 0.09);
  color: var(--text-bright);
  font-size: 13px;
}

/* Step 284: PC 공고목록 배지 */
.notice-list-page .nf5-badge-row { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 7px; }
.notice-list-page .nf5-badge-type, .notice-list-page .nf5-badge-progress, .notice-list-page .nf5-badge-attribute,
.nlm-badge-type, .nlm-badge-progress, .nlm-badge-attribute { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:700; line-height:1; white-space:nowrap; }
.notice-list-page .nf5-badge-type.is-prespec, .nlm-badge-type.is-prespec { background:rgba(124,92,255,.2); color:var(--accent-fg); }
.notice-list-page .nf5-badge-type.is-bid, .nlm-badge-type.is-bid { background:rgba(70,145,255,.18); color:var(--info-fg); }
.notice-list-page .nf5-badge-type.is-rebid, .nlm-badge-type.is-rebid { background:rgba(255,165,70,.18); color:var(--warning-fg); }
.notice-list-page .nf5-badge-progress, .nlm-badge-progress { background:rgba(60,200,130,.16); color:var(--success-fg); }
.notice-list-page .nf5-badge-progress.is-urgent, .nlm-badge-progress.is-urgent { background:rgba(255,104,130,.18); color:var(--danger-fg); }
.notice-list-page .nf5-badge-attribute, .nlm-badge-attribute { background:var(--surface-2,#1a2540); color:var(--text-3,#7a89aa); }
.nlm-badge-row { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 8px; padding-right:40px; }
@media (max-width: 420px) { .nlm-badge-attribute { display:none; } }

.notice-list-page .nf5-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notice-list-page .nf5-hero-stat .k {
  font-size: 11px;
  color: var(--muted, #93a4c2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  word-break: keep-all;
}

.notice-list-page .nf5-hero-stat .v {
  font-size: 18px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text, #f0f0f5);
  word-break: keep-all;
}

.notice-list-page .nf5-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
}

.notice-list-page .nf5-form-actions .nf5-reset-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border: 1px solid var(--line2, var(--surface-6));
  background: var(--panel-elevated);
  color: var(--muted, #93a4c2);
  font-size: 13px;
  font-weight: 600;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  text-align: center;
  word-break: keep-all;
}

.notice-list-page .nf5-form-actions .nf5-reset-btn:hover {
  background: var(--bg-hover, #1f1f28);
  color: var(--text, #f0f0f5);
}

.notice-list-page .nf5-form-actions .apply {
  flex: 1.2;
  margin-top: 0 !important;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  word-break: keep-all;
}

@media (max-width: 1199px) {
  .notice-list-page .nf5-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .notice-list-page .nf5-hero-stats {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
}

@media (max-width: 760px) {
  .notice-list-page .nf5-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
  }
}

/* 와이드 100% 레이아웃 대응 및 오밀조밀한 요소 보강 */
.container:has(.notice-list-page) {
  max-width: none !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.notice-list-page .choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.notice-list-page .choice,
.notice-list-page .tagbtn,
.notice-list-page .sort-btn,
.notice-list-page .view-btn {
  padding: 8px 10px;
  font-size: 11px;
  border-radius: 10px;
}

.notice-list-page .icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
}

/* pd6 prefix — 사업분석 PC 3차 시안 1:1 재배치 (Step 96)
===================================================== */
.pd6-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pd6-tabs {
  display: flex;
  gap: 8px;
}

.pd6-tab-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-4);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.pd6-tab-btn.active {
  color: var(--text-2);
  background: var(--surface-7);
}

.pd6-header-actions {
  display: flex;
  gap: 8px;
}

.pd6-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  background: var(--surface-3);
  border: 1px solid var(--surface-8);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}

.pd6-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-2);
}

.pd6-action-btn.primary {
  background: var(--success-soft);
  border-color: var(--green);
  color: var(--green);
}

.pd6-action-btn.primary:hover {
  background: rgba(61, 214, 140, 0.25);
  color: var(--green);
}

/* Hero Grid Layout */
.pd6-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 16px;
  margin-bottom: 16px;
}

.pd6-hero-card {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pd6-hero-info {
  justify-content: flex-start;
  gap: 12px;
}

.pd6-hero-info h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-2);
  word-break: keep-all;
}

.pd6-hero-meta {
  font-size: 13px;
  color: var(--text-4);
  margin-top: 4px;
}

.pd6-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.pd6-hero-chip {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
}

.pd6-hero-chip--violet {
  background: var(--accent-soft);
  color: var(--violet);
  border-color: rgba(141, 99, 255, 0.2);
}

.pd6-hero-chip--green {
  background: var(--success-soft);
  color: var(--green);
  border-color: rgba(61, 214, 140, 0.2);
}

.pd6-hero-chip--orange {
  background: rgba(255, 148, 82, 0.15);
  color: var(--orange);
  border-color: rgba(255, 148, 82, 0.2);
}

.pd6-hero-chip--btn {
  background: var(--surface-3);
  color: var(--text-3);
  border-color: var(--surface-8);
  cursor: pointer;
}

/* Hero Deadlines / Score Card */
.pd6-hero-deadline {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pd6-deadline-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-4);
}

.pd6-deadline-status {
  font-size: 28px;
  font-weight: 800;
  color: var(--green);
  margin: 8px 0;
}

.pd6-deadline-status.warn {
  color: var(--amber);
}

.pd6-deadline-status.danger {
  color: var(--rose);
}

.pd6-priority-score {
  font-size: 13px;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--surface-7);
  padding-top: 10px;
}

.pd6-priority-score .val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.pd6-priority-score .val span {
  font-size: 13px;
  color: var(--text-4);
  font-weight: normal;
}

/* Hero Reasons Card */
.pd6-hero-reasons {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 20px;
}

.pd6-reasons-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 12px;
}

.pd6-reasons-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pd6-reason-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

.pd6-reason-item i {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-4);
  font-size: 10px;
  font-style: normal;
}

.pd6-reason-item i.violet {
  background: var(--accent-soft);
  color: var(--violet);
}

.pd6-reason-item i.blue {
  background: rgba(77, 184, 255, 0.15);
  color: var(--blue);
}

.pd6-reason-item i.green {
  background: var(--success-soft);
  color: var(--green);
}

/* Hero Badge Strip */
.pd6-badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.pd6-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  font-size: 12px;
  color: var(--text-3);
}

.pd6-badge-item i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-4);
}

.pd6-badge-item.green i {
  background: var(--green);
}

.pd6-badge-item.blue i {
  background: var(--blue);
}

.pd6-badge-item.violet i {
  background: var(--violet);
}

.pd6-badge-item.orange i {
  background: var(--orange);
}

.pd6-badge-item.amber i {
  background: var(--amber);
}

/* 3x3 Grid Layout */
.pd6-grid-3x3 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, 0.9fr);
  gap: 18px;
  align-items: start;
}

.pd6-card {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 20px;
  min-width: 0;
  margin-bottom: 18px;
}

.pd6-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.pd6-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-2);
}

.pd6-card-head h3 i {
  font-style: normal;
  font-weight: normal;
  color: var(--text-4);
  font-size: 12px;
  margin-left: 4px;
  cursor: pointer;
}

.pd6-card-body {
  min-width: 0;
}

/* G1 Stepper */
.pd6-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 20px 0 10px;
}

.pd6-stepper::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 11px;
  height: 2px;
  background: var(--surface-7);
  z-index: 1;
}

.pd6-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: center;
}

.pd6-step-node {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-card, #18181f);
  border: 2px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-4);
  margin-bottom: 8px;
}

.pd6-step.done .pd6-step-node {
  background: var(--green);
  border-color: var(--green);
  color: var(--bg);
}

.pd6-step.active .pd6-step-node {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}

.pd6-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}

.pd6-step-status {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 2px;
}

.pd6-step.done .pd6-step-status {
  color: var(--green);
}

.pd6-step.active .pd6-step-status {
  color: var(--accent-fg);
}

.pd6-step-links {
  margin-top: 6px;
}

.pd6-step-link {
  display: inline-block;
  font-size: 10px;
  color: var(--info);
  text-decoration: none;
  padding: 2px 6px;
  border: 1px solid rgba(77, 184, 255, 0.2);
  border-radius: 4px;
  background: rgba(77, 184, 255, 0.05);
}

.pd6-step-link:hover {
  background: rgba(77, 184, 255, 0.15);
}

/* G2 Stepper-like grid for agency metrics */
.pd6-agency-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  text-align: center;
}

.pd6-agency-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pd6-agency-label {
  font-size: 11px;
  color: var(--text-4);
  margin-bottom: 6px;
  white-space: nowrap;
}

.pd6-agency-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-3);
}

.pd6-agency-sub {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 2px;
}

.pd6-agency-bar {
  width: 100%;
  height: 4px;
  background: var(--surface-7);
  border-radius: 99px;
  margin-top: 8px;
  overflow: hidden;
}

.pd6-agency-bar i {
  display: block;
  height: 100%;
  background: var(--text-4);
}

/* Locked Card styles */
.pd6-card--locked {
  background: var(--surface-1);
  border-style: dashed;
  position: relative;
}

/* Data is not available yet; this is not an access restriction. */
.pd6-card--empty {
  background: var(--surface-1);
  border-style: dashed;
}

.badge-neutral {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background: var(--surface-4);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.pd6-locked-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  text-align: center;
}

.pd6-locked-body p {
  font-size: 12px;
  color: var(--text-4);
  margin: 0;
}

/* G3 Competition */
.pd6-comp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.pd6-comp-tag {
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-3);
  text-decoration: none;
}

.pd6-comp-tag:hover {
  background: var(--surface-7);
  color: var(--text-2);
}

.pd6-comp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.pd6-comp-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-5);
  border-radius: 8px;
  padding: 10px;
}

.pd6-comp-card .k {
  font-size: 11px;
  color: var(--text-4);
}

.pd6-comp-card .v {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  margin-top: 4px;
}

.pd6-comp-card .s {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 2px;
}

.pd6-comp-card.green .v {
  color: var(--green);
}

.pd6-comp-card.amber .v {
  color: var(--amber);
}

.pd6-comp-card.rose .v {
  color: var(--rose);
}

/* G4 Similar Projects Table */
.pd6-table-wrap {
  overflow-x: auto;
}

.pd6-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
}

.pd6-table th,
.pd6-table td {
  word-break: keep-all;
  overflow-wrap: break-word;
  padding: 8px 10px;
  border-bottom: 1px solid var(--surface-5);
  font-size: 12px;
  text-align: left;
}

.pd6-table th {
  color: var(--text-4);
  font-weight: 500;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.01);
}

.pd6-table td {
  color: var(--text-3);
}

.pd6-table td.title {
  font-weight: 500;
  color: var(--text-2);
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.45;
}

.pd6-table td.fit {
  color: var(--green);
}

.pd6-table td.watch {
  color: var(--amber);
}

/* G9 Keywords & Memos */
.pd6-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.pd6-tag {
  padding: 4px 8px;
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-3);
}

.pd6-memo-box {
  background: var(--surface-1);
  border: 1px solid var(--surface-5);
  border-radius: 10px;
  padding: 14px;
  margin-top: 14px;
}

.pd6-memo-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 8px;
}

.pd6-memo-empty {
  font-size: 12px;
  color: var(--text-4);
}

.pd6-changelog-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.pd6-changelog-list li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-5);
}

.pd6-changelog-list li:last-child {
  border-bottom: 0;
}

.pd6-changelog-date {
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.5;
}

.pd6-changelog-summary {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
}

.pdm-changelog-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.pdm-changelog-list li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-5);
}

.pdm-changelog-list li:last-child {
  border-bottom: 0;
}

.pdm-changelog-date {
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.5;
}

.pdm-changelog-summary {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
}

.pd6-memo-content {
  font-size: 13px;
  color: #e7f7ff;
  line-height: 1.6;
  margin-bottom: 8px;
}

.pd6-memo-meta {
  font-size: 11px;
  color: var(--text-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Small subcards like attachments / contacts */
.pd6-subcard {
  background: var(--surface-1);
  border: 1px solid var(--surface-5);
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
}

.pd6-subcard-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
}

.pd6-subcard-body {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

.pd6-attach-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--surface-3);
}

.pd6-attach-item:last-child {
  border-bottom: 0;
}

.pd6-attach-name {
  font-size: 12px;
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.pd6-attach-name:hover {
  text-decoration: underline;
  color: var(--info);
}

.pd6-attach-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--surface-5);
  color: var(--text-4);
}

/* G6 Sim Bar Chart */
.pd6-simbar-track {
  position: relative;
  height: 8px;
  background: var(--surface-7);
  border-radius: 99px;
  margin: 30px 10px 40px 10px;
}

.pd6-simbar-range {
  position: absolute;
  height: 100%;
  background: var(--success);
  opacity: 0.8;
  border-radius: 99px;
}

.pd6-simbar-marker {
  position: absolute;
  top: -6px;
  width: 2px;
  height: 20px;
  background: var(--text-4);
}

.pd6-simbar-label {
  position: absolute;
  top: 22px;
  font-size: 11px;
  color: var(--text-3);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* G7 Insights 2-Col Grid */
.pd6-g7-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pd6-g7-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-5);
  border-radius: 10px;
  padding: 14px;
}

.pd6-g7-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-2);
  margin-top: 4px;
}

.pd6-g7-label {
  font-size: 11px;
  color: var(--text-4);
}

.pd6-g7-sub {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 2px;
}

/* G8 Trend Chart CSS-based Bar Chart */
.pd6-chart-container {
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px 10px 10px 10px;
  position: relative;
  border-bottom: 1px solid var(--surface-7);
}

.pd6-chart-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}

.pd6-chart-bar {
  width: 24px;
  background: linear-gradient(180deg, var(--green) 0%, rgba(35, 209, 139, 0.2) 100%);
  border-radius: 4px 4px 0 0;
  transition: height 0.3s;
  position: relative;
}

.pd6-chart-bar:hover {
  background: linear-gradient(180deg, var(--success) 0%, rgba(61, 214, 140, 0.4) 100%);
}

.pd6-chart-val {
  font-size: 10px;
  color: var(--text-2);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pd6-chart-label {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 8px;
}

@media (max-width: 1269px) {
  .pd6-hero-grid {
    grid-template-columns: 1fr;
  }

  .pd6-grid-3x3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   vs5 - 사업자상세 PC 개편 (3차 시안 표준)
   ========================================== */
.vs5-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.vs5-page-head .crumb {
  font-size: 13px;
  color: var(--text-4);
}

.vs5-btns {
  display: flex;
  gap: 8px;
}

.vs5-btn {
  background: var(--surface-4);
  border: 1px solid var(--surface-7);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
}

.vs5-btn:hover {
  background: var(--surface-8);
  border-color: rgba(255, 255, 255, 0.15);
}

.vs5-btn.green {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}

.vs5-btn.green:hover {
  background: rgba(61, 214, 140, 0.25);
}

.vs5-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.vs5-btn.primary:hover {
  background: #6b46ff;
}

/* Hero Section */
.vs5-hero {
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
}

.vs5-hero-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.vs5-hero-chips .chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

.vs5-hero-chips .chip.green {
  background: var(--success-soft);
  color: var(--success);
}

.vs5-hero-chips .chip.blue {
  background: rgba(77, 184, 255, 0.15);
  color: var(--blue);
}

.vs5-hero-chips .chip.amber {
  background: rgba(255, 191, 71, 0.15);
  color: var(--amber);
}

.vs5-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.vs5-hero-left {
  flex: 1;
}

.vs5-hero-left h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-2);
  margin: 0 0 6px 0;
}

.vs5-hero-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 4px;
}

.vs5-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.vs5-hero-badges .chip {
  background: var(--surface-4);
  border: 1px solid var(--surface-7);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-3);
}

.vs5-hero-badges .chip.company-type {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.vs5-hero-memo {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: 10px;
}

.vs5-hero-memo strong {
  display: block;
  font-size: 12px;
  color: var(--text-4);
  margin-bottom: 4px;
}

.vs5-hero-memo p {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  white-space: pre-wrap;
}

.vs5-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: 240px;
}

.vs5-hero-score {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.vs5-score-label {
  font-size: 11px;
  color: var(--text-4);
}

.vs5-score-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--success);
  margin: 4px 0;
}

.vs5-score-sub {
  font-size: 11px;
  color: var(--text-4);
}

/* Facts Row (KPI 5) */
.vs5-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.vs5-fact {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 14px 18px;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vs5-fact-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.vs5-fact-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-2);
  line-height: 1.2;
}

.vs5-fact-sub {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 4px;
}

/* 3-Col Layout */
.vs5-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.vs5-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card Standard */
.vs5-card {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 20px;
}

.vs5-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.vs5-card-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-2);
  margin: 0;
}

.vs5-card-head p {
  font-size: 12px;
  color: var(--text-4);
  margin: 4px 0 0 0;
}

.badge-premium {
  font-size: 9px;
  font-weight: 700;
  background: var(--warning-soft);
  color: var(--amber);
  border: 1px solid var(--warning);
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Segmented Control */
.vs5-head-side {
  display: flex;
  background: var(--surface-4);
  border-radius: 6px;
  padding: 2px;
}

.vs5-seg {
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-3);
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.vs5-seg.active {
  background: var(--accent);
  color: #fff;
}

/* Chart Styles */
.vs5-chart-wrap {
  position: relative;
  margin-top: 10px;
}

.vs5-bar-chart {
  position: relative;
  height: 160px;
  border-left: 1px solid var(--surface-7);
  border-bottom: 1px solid var(--surface-7);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 20px 10px 0 35px;
}

.vs5-y-labels {
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 0;
  width: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-4);
  text-align: right;
  padding-right: 6px;
}

.vs5-grid-lines {
  position: absolute;
  left: 35px;
  right: 0;
  top: 20px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.vs5-grid-lines div {
  width: 100%;
  border-top: 1px dashed var(--surface-3);
}

.vs5-bars {
  position: absolute;
  left: 35px;
  right: 0;
  top: 20px;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.vs5-bars .bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}

.vs5-bars .bar-group {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 100%;
  width: 100%;
  justify-content: center;
}

.vs5-bars .bar {
  width: 20px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all 0.2s;
}

.vs5-bars .bar.amount {
  background: linear-gradient(180deg, var(--green) 0%, rgba(35, 209, 139, 0.2) 100%);
}

.vs5-bars .bar.amount:hover {
  background: var(--success);
}

.vs5-bars .bar.win {
  background: linear-gradient(180deg, var(--accent) 0%, rgba(124, 92, 255, 0.2) 100%);
}

.vs5-bars .bar.win:hover {
  background: #6b46ff;
}

.vs5-bars .x-label {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 6px;
  text-align: center;
}

.vs5-axis-note {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-4);
  margin-top: 6px;
  padding-left: 35px;
}

.vs5-tooltip {
  position: absolute;
  background: rgba(13, 13, 18, 0.95);
  border: 1px solid var(--surface-8);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-2);
  pointer-events: none;
  display: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.vs5-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-3);
  justify-content: center;
}

.vs5-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.vs5-legend-dot.green {
  background: var(--green);
}

.vs5-legend-dot.accent {
  background: var(--accent);
}

/* Agency Dominance Card */
.vs5-dom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vs5-dom {
  background: var(--surface-1);
  border: 1px solid var(--surface-5);
  border-radius: 10px;
  padding: 10px;
}

.vs5-dom .k {
  font-size: 10px;
  color: var(--text-4);
}

.vs5-dom .v {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  margin-top: 4px;
}

.vs5-dom .s {
  font-size: 9px;
  color: var(--text-4);
  margin-top: 2px;
}

.vs5-agency-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vs5-agency {
  background: var(--surface-1);
  border: 1px solid var(--surface-4);
  border-radius: 8px;
  padding: 10px 12px;
}

.vs5-agency .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.vs5-agency .meta {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 2px;
}

.vs5-agency .score {
  font-size: 11px;
  color: var(--success);
  margin-top: 4px;
}

/* Points Card */
.vs5-points-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vs5-point {
  background: var(--surface-1);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
}

.vs5-point strong {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 2px;
}

.vs5-point p {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
}

/* TOP 5 Rank List / Domains List */
.vs5-rank-list,
.vs5-distribution-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vs5-rank-item,
.vs5-dist-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vs5-rank-info,
.vs5-dist-info {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.vs5-rank-num {
  font-weight: 700;
  color: var(--accent-fg);
  margin-right: 6px;
}

.vs5-rank-name,
.vs5-dist-name {
  color: var(--text-2);
  flex: 1;
}

.vs5-rank-val,
.vs5-dist-val {
  color: var(--text-4);
  font-size: 11px;
}

.vs5-rank-bar-bg,
.vs5-dist-bar-bg {
  height: 6px;
  background: var(--surface-4);
  border-radius: 99px;
  overflow: hidden;
}

.vs5-rank-bar,
.vs5-dist-bar {
  height: 100%;
  border-radius: 99px;
}

.vs5-rank-bar {
  background: var(--accent);
}

.vs5-dist-bar {
  background: var(--green);
}

/* Tags Card */
.vs5-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vs5-tag {
  background: var(--surface-4);
  border: 1px solid var(--surface-7);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-3);
}

/* Table styles */
.vs5-table-wrap {
  overflow-x: auto;
}

.vs5-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.vs5-table th,
.vs5-table td {
  word-break: keep-all;
  overflow-wrap: break-word;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  text-align: left;
}

.vs5-table th {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  background: var(--surface-1);
}

.vs5-table td {
  color: var(--text-3);
}

/* Toolbar & Period */
.vs5-history-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.vs5-history-period {
  display: flex;
  background: var(--surface-4);
  border-radius: 6px;
  padding: 2px;
}

.vs5-row-actions {
  display: flex;
  gap: 8px;
}

.vs5-history-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.vs5-history-mobile {
  display: none;
}

@media (max-width: 1269px) {
  .vs5-layout {
    grid-template-columns: 1fr;
  }

  .vs5-facts {
    grid-template-columns: 1fr;
  }

  .vs5-hero-top {
    flex-direction: column;
  }

  .vs5-hero-right {
    width: 100%;
    align-items: flex-start;
  }

  .vs5-table-wrap {
    display: none;
  }

  .vs5-history-mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .vs5-history-mobile-card {
    background: var(--surface-1);
    border: 1px solid var(--surface-5);
    border-radius: 10px;
    padding: 12px;
  }

  .vs5-history-mobile-card .title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 8px;
  }

  .vs5-history-mobile-card .row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 4px;
  }
}
}

/* ==========================================================================
   Step 105: [발주처상세] ad5- 스타일 정의
   ========================================================================== */
.ad5-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ad5-page-head .crumb {
  font-size: 13px;
  color: var(--text-4);
}

.ad5-btns {
  display: flex;
  gap: 8px;
}

.ad5-btn {
  background: var(--surface-4);
  border: 1px solid var(--surface-7);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
}

.ad5-btn:hover {
  background: var(--surface-8);
  border-color: rgba(255, 255, 255, 0.15);
}

.ad5-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ad5-btn.primary:hover {
  background: #6b46ff;
}

/* Hero Section */
.ad5-hero {
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
}

.ad5-hero-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.ad5-hero-chips .chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

.ad5-hero-chips .chip.blue {
  background: rgba(77, 184, 255, 0.15);
  color: var(--blue);
}

.ad5-hero-chips .chip.violet {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
}

.ad5-hero-chips .chip.amber {
  background: rgba(255, 191, 71, 0.15);
  color: var(--amber);
}

.ad5-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.ad5-hero-left {
  flex: 1;
}

.ad5-hero-left h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-2);
  margin: 0 0 12px 0;
}

.ad5-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.ad5-hero-badges .chip {
  background: var(--surface-4);
  border: 1px solid var(--surface-7);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-3);
}

/* KPI Grid (6 Columns) */
.ad5-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.ad5-kpi {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ad5-kpi-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.ad5-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-2);
  line-height: 1.2;
}

.ad5-kpi-sub {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 4px;
}

/* 3-Col Layout */
.ad5-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.ad5-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card Standard */
.ad5-card {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 20px;
}

.ad5-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.ad5-card-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-2);
  margin: 0;
}

.ad5-card-head p {
  font-size: 12px;
  color: var(--text-4);
  margin: 4px 0 0 0;
}

.ad5-card-head .head-side {
  display: flex;
  gap: 6px;
}

/* Premium Badge */
.ad5-badge-premium {
  font-size: 9px;
  font-weight: 700;
  background: var(--warning-soft);
  color: var(--amber);
  border: 1px solid rgba(255, 191, 71, 0.2);
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
}

/* Chart Styles (Bar Chart) */
.ad5-chart-wrap {
  position: relative;
  margin-top: 14px;
}

.ad5-bar-chart {
  position: relative;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding: 0 10px 30px 40px;
}

.ad5-grid-lines {
  position: absolute;
  top: 0;
  left: 40px;
  right: 10px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.ad5-grid-lines div {
  width: 100%;
  border-top: 1px dashed var(--surface-4);
}

.ad5-y-labels {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 30px;
  width: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 11px;
  color: var(--text-4);
}

.ad5-bars {
  position: absolute;
  top: 0;
  left: 40px;
  right: 10px;
  bottom: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}

.ad5-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.ad5-bar {
  width: 60%;
  max-width: 40px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(99, 102, 241, 0.4) 100%);
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 2px;
}

.ad5-bar:hover {
  background: var(--accent);
  filter: brightness(1.2);
}

.ad5-x-label {
  position: absolute;
  bottom: -22px;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  width: 100%;
}

.ad5-axis-note {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-4);
  margin-top: 8px;
  padding: 0 10px 0 40px;
}

.ad5-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-2);
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: none;
}

.ad5-tooltip .t-title {
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 2px;
}

.ad5-tooltip .t-body {
  color: var(--accent-light);
}

/* Rank List (Top Contractors) */
.ad5-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ad5-rank {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: 10px;
  transition: all 0.2s;
}

.ad5-rank:hover {
  background: var(--surface-3);
  border-color: var(--surface-7);
}

.ad5-rank .left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ad5-rank .num {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-fg);
  width: 20px;
  text-align: center;
}

.ad5-rank .name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 2px;
}

.ad5-rank .meta {
  font-size: 11px;
  color: var(--text-4);
}

.ad5-rank .value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  text-align: right;
}

/* Issue Grid */
.ad5-issue-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ad5-issue {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.ad5-issue.pipeline {
  background: rgba(77, 184, 255, 0.04);
  border-color: rgba(77, 184, 255, 0.1);
}

.ad5-issue.green {
  background: rgba(61, 214, 140, 0.04);
  border-color: rgba(61, 214, 140, 0.1);
}

.ad5-issue.budget {
  background: rgba(255, 191, 71, 0.04);
  border-color: rgba(255, 191, 71, 0.1);
}

.ad5-issue strong {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 6px;
}

.ad5-issue p {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.5;
}

/* Project List */
.ad5-proj-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ad5-proj {
  padding: 14px;
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: 10px;
  position: relative;
  transition: all 0.2s;
}

.ad5-proj:hover {
  background: var(--surface-3);
  border-color: var(--surface-7);
}

.ad5-proj .title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
  padding-right: 90px;
}

.ad5-proj .meta {
  font-size: 11px;
  color: var(--text-4);
}

.ad5-proj .status {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.ad5-proj .status.fixed {
  background: var(--success-soft);
  color: var(--success);
}

.ad5-proj .status.live {
  background: rgba(77, 184, 255, 0.15);
  color: var(--blue);
}

.ad5-proj .status.plan {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
}

.ad5-proj .status.watch {
  background: var(--surface-5);
  color: var(--text-4);
}

/* Summary List */
.ad5-summary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ad5-summary-item {
  padding: 10px 12px;
  background: var(--surface-1);
  border-left: 3px solid var(--accent);
  font-size: 12px;
  color: var(--text-3);
  border-radius: 0 6px 6px 0;
}

.ad5-summary-item strong {
  display: block;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 2px;
}

/* Tag List */
.ad5-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ad5-tag {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-3);
}

/* Table Style for ad5-table-wrap */
.ad5-table-wrap {
  overflow-x: auto;
}

.ad5-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.ad5-table th,
.ad5-table td {
  word-break: keep-all;
  overflow-wrap: break-word;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.ad5-table th {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

/* Media Query (max-width: 1279px) */
@media (max-width: 1269px) {
  .ad5-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Step 107: [공고상세] nd6- 스타일 정의
   ========================================================================== */
.nd6-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.nd6-crumb {
  font-size: 13px;
  color: var(--text-4);
}

.nd6-btns {
  display: flex;
  gap: 8px;
}

.nd6-btn {
  background: var(--surface-4);
  border: 1px solid var(--surface-7);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nd6-btn:hover {
  background: var(--surface-8);
  border-color: rgba(255, 255, 255, 0.15);
}

.nd6-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.nd6-btn.primary:hover {
  background: #6b46ff;
}

.nd6-favorite-btn {
  gap: 6px;
}

.nd6-favorite-btn.active {
  color: var(--amber);
  border-color: var(--warning);
  background: var(--warning-soft);
}

/* Modal */
.nd6-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: var(--bg-topbar);
}

.nd6-modal__backdrop {
  position: absolute;
  inset: 0;
}

.nd6-modal__dialog {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 900px;
  width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.nd6-modal__header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nd6-modal__title {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

.nd6-modal__close {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.nd6-modal__body {
  padding: 24px;
  overflow-y: auto;
}

.nd6-modal__pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}

/* Hero */
.nd6-hero {
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
}

.nd6-hero-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.nd6-hero-chips .chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

.nd6-hero-chips .chip.blue {
  background: var(--info-soft);
  color: var(--info-fg);
}

.nd6-hero-chips .chip.violet {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.nd6-hero-chips .chip.amber {
  background: var(--warning-soft);
  color: var(--warning-fg);
}

.nd6-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.nd6-hero-left {
  flex: 1;
}

.nd6-hero-left h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-2);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.nd6-hero-sub {
  font-size: 13px;
  color: var(--text-4);
  margin: 0;
}

/* 사업평가 박스 */
.nd6-eval-box {
  display: flex;
  gap: 10px;
  background: var(--surface-1);
  border: 1px solid var(--surface-4);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 480px;
}

.nd6-eval-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: 8px;
  min-height: 64px;
}

.nd6-eval-label {
  font-size: 11px;
  color: var(--text-4);
  margin-bottom: 6px;
  white-space: nowrap;
}

.nd6-eval-value {
  font-size: 12px;
  font-weight: 700;
}

.nd6-eval-fallback {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-3);
  padding: 16px;
}

/* 배지 색상 표준 레시피 — light/dark 모두 -fg 토큰 우선 (AA) */
.badge-green {
  color: var(--success-fg);
  background: var(--success-soft);
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-amber {
  color: var(--warning-fg);
  background: var(--warning-soft);
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-rose {
  color: var(--danger-fg);
  background: var(--danger-soft);
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-blue {
  color: var(--info-fg);
  background: var(--info-soft);
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-gray {
  color: var(--text-4);
  background: var(--surface-5);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Facts Strip */
.nd6-facts-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
  background: var(--surface-1);
  border-radius: 12px;
  padding: 12px;
}

.nd6-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
}

.nd6-fact .k {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.nd6-fact .v {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  word-break: keep-all;
}

/* Layout */
.nd6-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.nd6-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card */
.nd6-card {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 20px;
}

.nd6-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.nd6-card-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-2);
  margin: 0;
}

.nd6-card-head p {
  font-size: 12px;
  color: var(--text-4);
  margin: 4px 0 0 0;
}

/* 정렬 테이블 (기본정보) */
.nd6-info-table {
  width: 100%;
  border-collapse: collapse;
}

.nd6-info-table tr {
  border-bottom: 1px solid var(--surface-3);
}

.nd6-info-table tr:last-child {
  border-bottom: none;
}

.nd6-info-table th,
.nd6-info-table td {
  padding: 12px 10px;
  font-size: 13px;
  vertical-align: middle;
  word-break: keep-all;
}

.nd6-info-table th {
  color: var(--text-4);
  font-weight: 500;
  width: 130px;
  text-align: left;
}

.nd6-info-table td {
  color: var(--text-2);
  font-weight: 600;
}

/* split card (참가자격/제한사항) */
.nd6-split-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.nd6-split-block {
  display: flex;
  flex-direction: column;
}

.nd6-split-block h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  margin: 0 0 10px 0;
}

.nd6-split-content {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: 8px;
  padding: 14px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
  min-height: 80px;
}

/* 일정 및 담당자 */
.nd6-schedule-officer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.nd6-table-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 8px;
}

.nd6-table-mini {
  width: 100%;
  border-collapse: collapse;
}

.nd6-table-mini tr {
  border-bottom: 1px solid var(--surface-2);
}

.nd6-table-mini tr:last-child {
  border-bottom: none;
}

.nd6-table-mini th,
.nd6-table-mini td {
  padding: 10px 6px;
  font-size: 12px;
  vertical-align: middle;
  word-break: keep-all;
}

.nd6-table-mini th {
  color: var(--text-4);
  width: 90px;
  font-weight: 500;
  text-align: left;
}

.nd6-table-mini td {
  color: var(--text-2);
  font-weight: 600;
}

.nd6-table-mini td.highlight-rose {
  color: var(--danger);
  font-weight: 700;
}

.nd6-schedule-note {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 10px;
}

/* 공통 특성 정보 8칩 */
.nd6-common-properties-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nd6-prop-chip {
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-3);
}

/* 5단계 가로 스테퍼 */
.nd6-stepper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
}

.nd6-step {
  flex: 1;
  background: var(--surface-1);
  border: 1px solid var(--surface-5);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100px;
  position: relative;
  transition: all 0.2s;
}

.nd6-step.done {
  border-color: rgba(61, 214, 140, 0.3);
  background: rgba(61, 214, 140, 0.03);
}

.nd6-step.active {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.04);
}

.nd6-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.nd6-step-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-4);
}

.nd6-step.done .nd6-step-num {
  color: var(--success);
}

.nd6-step.active .nd6-step-num {
  color: #a78bfa;
}

.nd6-step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}

.nd6-step-meta {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 4px;
}

.nd6-step-link {
  font-size: 10px;
  color: var(--accent-light);
  text-decoration: none;
  margin-top: 8px;
  align-self: flex-start;
}

.nd6-step-link:hover {
  text-decoration: underline;
}

.nd6-step-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
  border-radius: 4px;
  padding: 1px 4px;
}

/* 첨부파일 목록 표 */
.nd6-attach-table-wrap {
  overflow-x: auto;
}

.nd6-attach-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.nd6-attach-table th,
.nd6-attach-table td {
  padding: 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--surface-5);
  word-break: keep-all;
}

.nd6-attach-table th {
  color: var(--text-4);
  font-weight: 500;
  text-align: left;
}

.nd6-attach-table td {
  color: var(--text-2);
}

/* 참가업체 목록 표 (Step 206) */
.nd6-participant-wrap {
  margin-top: 16px;
}

.nd6-participant-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.nd6-participant-table th,
.nd6-participant-table td {
  padding: 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--line-2);
  word-break: keep-all;
}

.nd6-participant-table th {
  color: var(--text-4);
  font-weight: 500;
  text-align: left;
}

.nd6-participant-table td {
  color: var(--text-2);
}

.nd6-participant-row--winner td {
  color: var(--sub);
  font-weight: 700;
}

.nd6-attach-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.nd6-attach-link:hover {
  text-decoration: underline;
}

.nd6-attach-btn {
  font-size: 12px;
  color: var(--accent-light);
  text-decoration: none;
}

.nd6-attach-btn:hover {
  text-decoration: underline;
}


/* ==========================================================================
   Step 108: [관심공고] fv6- 스타일 정의
   ========================================================================== */

/* 헤더 영역 */
.fv6-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.fv6-page-head-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fv6-crumb {
  font-size: 13px;
  color: var(--text-4, #6f839f);
}

.fv6-page-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text, #e2eaf6);
  margin: 0;
}

.fv6-page-subtitle {
  font-size: 13px;
  color: var(--text-3, #8fa3be);
  margin: 0;
}

/* KPI 칩 행 */
.fv6-kpi-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.fv6-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-6);
  border-radius: 10px;
  min-width: 140px;
}

.fv6-kpi--urgent {
  border-color: rgba(255, 100, 100, .22);
}

.fv6-kpi--priority {
  border-color: rgba(141, 99, 255, .25);
}

.fv6-kpi-label {
  font-size: 12px;
  color: var(--text-4, #6f839f);
}

.fv6-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
}

.fv6-kpi--urgent .fv6-kpi-value {
  color: #ff8fa3;
}

.fv6-kpi--priority .fv6-kpi-value {
  color: var(--violet, #9d7dff);
}

/* 툴바 (필터 탭 + 정렬) */
.fv6-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.fv6-filter-tabs {
  display: flex;
  gap: 6px;
}

.fv6-tab {
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid var(--surface-8);
  border-radius: 20px;
  background: transparent;
  color: var(--text-3, #8fa3be);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.fv6-tab:hover {
  background: var(--surface-5);
  color: var(--text, #e2eaf6);
}

.fv6-tab--active {
  background: var(--violet, #9d7dff);
  border-color: var(--violet, #9d7dff);
  color: #fff;
}

.fv6-sort-wrap select {
  font-size: 13px;
  padding: 6px 10px;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-8);
  border-radius: 7px;
  color: var(--text, #e2eaf6);
  cursor: pointer;
}

/* 테이블 래퍼 및 줄바꿈 방지 */
.fv6-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.fv6-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.fv6-table th,
.fv6-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-4);
  font-size: 13px;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  vertical-align: middle;
}

.fv6-table th {
  padding-top: 10px;
  color: var(--text-4, #6f839f);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.fv6-table tbody tr:last-child td {
  border-bottom: 0;
}

.fv6-table tbody tr:hover td {
  background: rgba(255, 255, 255, .025);
}

/* 컬럼 너비 비율 */
.fv6-table th:nth-child(1) {
  width: 30%;
}

/* 공고명 */
.fv6-table th:nth-child(2) {
  width: 16%;
}

/* 발주처 */
.fv6-table th:nth-child(3) {
  width: 12%;
}

/* 예산 */
.fv6-table th:nth-child(4) {
  width: 10%;
}

/* D-day */
.fv6-table th:nth-child(5) {
  width: 10%;
}

/* 단계 */
.fv6-table th:nth-child(6) {
  width: 10%;
}

/* 핵심신호 */
.fv6-table th:nth-child(7) {
  width: 12%;
}

/* 액션 */

/* 공고명 링크 */
.fv6-link {
  color: var(--text, #e2eaf6);
  text-decoration: none;
}

.fv6-link:hover {
  color: var(--violet, #9d7dff);
  text-decoration: underline;
}

.fv6-link--ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 발주처 ellipsis */
.fv6-cell-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* D-day 배지 */
.fv6-dday {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-6);
  color: var(--text, #e2eaf6);
  white-space: nowrap;
}

.fv6-dday--red,
.fv6-dday--rose {
  background: rgba(255, 80, 80, .15);
  color: #ff8fa3;
}

.fv6-dday--amber {
  background: rgba(255, 191, 71, .12);
  color: var(--warning-fg);
}

.fv6-dday--green {
  background: rgba(0, 200, 120, .12);
  color: #6fedb8;
}

.fv6-dday--muted {
  background: var(--surface-4);
  color: var(--text-4, #6f839f);
}

/* 단계 칩 */
.fv6-phase-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  background: rgba(141, 99, 255, .15);
  color: var(--violet, #9d7dff);
  white-space: nowrap;
}

/* 핵심 신호 */
.fv6-signal {
  font-size: 13px;
  color: var(--text-3, #8fa3be);
  word-break: keep-all;
}

/* 액션 셀 */
.fv6-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

.fv6-btn-mini {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 5px;
  color: var(--text-3, #8fa3be);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  text-decoration: none;
}

.fv6-btn-mini:hover {
  background: var(--surface-6);
  color: var(--text, #e2eaf6);
}

.fv6-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--amber, #ffb74d);
  padding: 0 2px;
  line-height: 1;
}

.fv6-star:hover {
  color: #ff8fa3;
}

/* 빈 화면 */
.fv6-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-4);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  margin-top: 20px;
  font-size: 14px;
}

@media (max-width: 1269px) {
  .fv6-table-wrap {
    overflow-x: auto;
  }
}


/* Step 117: 핵심지표 6칸 — 화면 사이즈 정책(CLAUDE.md §5) 준수 */
.db5-key-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 18px;
}

.db5-key-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--surface-4);
  border-radius: 10px;
  min-width: 0;
}

.db5-key-metric-label {
  font-size: 11px;
  color: var(--text-4, #6f839f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db5-key-metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
  line-height: 1.2;
  white-space: nowrap;
}

.db5-key-metric-value.badge-green {
  color: var(--green, #23d18b);
}

.db5-key-metric-value.badge-amber {
  color: var(--amber, #ffbf47);
}

.db5-key-metric-value.badge-rose {
  color: var(--rose, #ff6f8b);
}

/* 1279px 이하 — 3칸 2줄 (3+3) */
@media (max-width: 1269px) {
  .db5-key-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .db5-key-metric-value {
    font-size: 18px;
  }
}

/* Step 117: A. 발주처 성향 분석 progress bar */
.db5-agency-trend {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
}

.db5-trend-row {
  display: grid;
  grid-template-columns: 160px 1fr 80px;
  gap: 14px;
  align-items: center;
}

.db5-trend-label {
  font-size: 13px;
  color: var(--text-3, #b5b5d2);
  white-space: nowrap;
}

.db5-trend-bar {
  height: 8px;
  background: var(--surface-4);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.db5-trend-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #7C5CFF), var(--blue, #4db8ff));
  border-radius: 999px;
  transition: width .3s ease;
}

.db5-trend-bar-fill.db5-trend-fill--high {
  background: linear-gradient(90deg, var(--green, #23d18b), #3DE2A0);
}

.db5-trend-bar-fill.db5-trend-fill--med {
  background: linear-gradient(90deg, var(--amber, #ffbf47), #FFD78A);
}

.db5-trend-bar-fill.db5-trend-fill--low {
  background: linear-gradient(90deg, var(--rose, #ff6f8b), #FFA3B5);
}

.db5-trend-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
  text-align: right;
  white-space: nowrap;
}

/* 1279px 이하 — 라벨 폭 축소 */
@media (max-width: 1269px) {
  .db5-trend-row {
    grid-template-columns: 130px 1fr 70px;
    gap: 10px;
  }

  .db5-trend-label {
    font-size: 12px;
  }

  .db5-trend-value {
    font-size: 13px;
  }
}

/* ==========================================================================
   Step 111: [알림] nt5- (PC) 및 nm3- (모바일) 스타일 정의
   ========================================================================== */

/* ── PC 알림 화면 (nt5-) ── */
.nt5-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  gap: 24px;
}

.nt5-header-left {
  flex: 1;
}

.nt5-crumbs {
  font-size: 13px;
  color: var(--text-4, #6f839f);
  margin-bottom: 12px;
}

.nt5-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.nt5-chip {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  background: rgba(124, 92, 255, 0.15);
  color: #a78bfa;
}

.nt5-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text, #e2eaf6);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.nt5-subtitle {
  font-size: 14px;
  color: var(--text-3, #8fa3be);
  margin: 0;
  line-height: 1.5;
}

/* KPI 영역 */
.nt5-kpi-row {
  display: flex;
  gap: 12px;
}

.nt5-kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 20px;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-6);
  border-radius: 10px;
  min-width: 160px;
}

.nt5-kpi-label {
  font-size: 12px;
  color: var(--text-4, #6f839f);
  margin-bottom: 6px;
}

.nt5-kpi-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.nt5-kpi-value--unread {
  color: var(--accent-purple);
}

.nt5-kpi-value--new {
  color: var(--blue);
}

.nt5-kpi-value--deadline {
  color: var(--rose);
}

.nt5-kpi-sub {
  font-size: 11px;
  color: var(--text-4, #6f839f);
}

/* 필터 툴바 */
.nt5-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface, var(--surface-1));
  border: 1px solid var(--surface-4);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.nt5-toolbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nt5-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nt5-filter-label {
  font-size: 13px;
  color: var(--text-4, #6f839f);
}

.nt5-btn-group {
  display: flex;
  background: var(--surface-3);
  border-radius: 6px;
  padding: 2px;
  border: 1px solid var(--surface-5);
}

.nt5-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-3, #8fa3be);
  padding: 4px 12px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.nt5-filter-btn:hover {
  color: var(--text, #e2eaf6);
}

.nt5-filter-btn--active {
  background: var(--violet, #7C5CFF);
  color: #fff !important;
}

.nt5-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-purple);
  margin-right: 4px;
  vertical-align: middle;
}

.nt5-sort-select {
  background: var(--surface, var(--surface-4));
  border: 1px solid var(--surface-8);
  color: var(--text, #e2eaf6);
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}

.nt5-readall-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .15);
  color: var(--text-2, #ccd6e6);
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.nt5-readall-btn:hover {
  background: var(--surface-5);
}

/* 리스트 */
.nt5-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.nt5-item-row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  background: var(--surface, var(--surface-2));
  border: 1px solid var(--surface-5);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.nt5-item-row:hover {
  background: var(--surface-4);
  border-color: var(--surface-8);
}

.nt5-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 16px;
}

.nt5-status-dot--unread {
  background: var(--accent-purple);
  box-shadow: 0 0 6px var(--accent-purple);
}

.nt5-status-dot--read {
  border: 1px solid var(--text-4, #6f839f);
}

.nt5-badge {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  margin-right: 12px;
  white-space: nowrap;
}

.nt5-badge--new {
  background: rgba(124, 92, 255, 0.15);
  color: #a78bfa;
}

.nt5-badge--deadline {
  background: rgba(255, 111, 139, 0.15);
  color: #ff8fa3;
}

.nt5-msg {
  flex: 1;
  font-size: 14px;
  color: var(--text, #e2eaf6);
  margin-right: 20px;
  word-break: keep-all;
}

.nt5-time {
  font-size: 12px;
  color: var(--text-4, #6f839f);
  margin-right: 16px;
  white-space: nowrap;
}

.nt5-arrow {
  color: var(--text-4, #6f839f);
  font-size: 14px;
  transition: color 0.15s;
}

.nt5-item-row:hover .nt5-arrow {
  color: var(--text, #e2eaf6);
}

.nt5-empty-card {
  padding: 36px;
  text-align: center;
  color: var(--text-4, #6f839f);
  border: 1px dashed var(--surface-8);
  border-radius: 8px;
  font-size: 14px;
}

/* 환경설정 카드 */
.nt5-config-card {
  background: var(--surface, var(--surface-2));
  border: 1px solid var(--surface-5);
  border-radius: 10px;
  padding: 20px;
}

.nt5-config-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
  margin: 0 0 16px 0;
}

.nt5-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface-4);
}

.nt5-config-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.nt5-config-row:first-of-type {
  padding-top: 0;
}

.nt5-config-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nt5-config-icon {
  font-size: 20px;
}

.nt5-config-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nt5-config-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #e2eaf6);
}

.nt5-config-desc {
  font-size: 12px;
  color: var(--text-4, #6f839f);
}

.nt5-config-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nt5-config-badge {
  font-size: 11px;
  color: var(--text-4, #6f839f);
  background: var(--surface-4);
  padding: 2px 6px;
  border-radius: 4px;
}

.nt5-config-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--surface-8);
  border-radius: 12px;
  cursor: not-allowed;
}

.nt5-config-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, .4);
  border-radius: 50%;
}

.nt5-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.nt5-toggle-switch input { opacity: 0; width: 0; height: 0; }
.nt5-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-2, #363644); border-radius: 24px; transition: 0.2s; }
.nt5-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.2s; }
.nt5-toggle-switch input:checked + .nt5-toggle-slider { background-color: var(--success, #3DD68C); }
.nt5-toggle-switch input:checked + .nt5-toggle-slider::before { transform: translateX(20px); }
.nt5-email-form-body { padding: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
.nt5-email-field { display: flex; flex-direction: column; gap: 4px; }
.nt5-email-field label { font-size: 12px; color: var(--text-3, #B5B5D2); }
.nt5-email-field input { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border-2, #363644); background: var(--bg-input, #141419); color: var(--text-2, #E2E2F0); }
.nt5-email-field-row { display: flex; gap: 12px; }
.nt5-email-field-row .nt5-email-field { flex: 1; }
.nt5-email-preview { font-size: 12px; color: var(--text-3, #B5B5D2); }
.nt5-email-saved-msg { font-size: 12px; color: var(--success, #3DD68C); }
.nt5-email-save-btn { align-self: flex-start; padding: 8px 20px; border-radius: 6px; background: var(--accent, #7C5CFF); color: #fff; border: none; cursor: pointer; }


/* ── 모바일 알림 화면 (nm3-) ── */
.nm3-shell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-5);
  background: var(--bg-topbar, #0f1624);
}

.nm3-logo {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}

.nm3-header-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nm3-header-icon {
  font-size: 18px;
  color: var(--text-3, #8fa3be);
  text-decoration: none;
  position: relative;
}

.nm3-header-icon--active::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  background: var(--accent-purple);
  border-radius: 50%;
}

.nm3-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nm3-container {
  padding: 16px;
}

.nm3-crumbs {
  font-size: 12px;
  color: var(--text-4, #6f839f);
  margin-bottom: 8px;
}

.nm3-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.nm3-chip {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  background: rgba(124, 92, 255, 0.15);
  color: #a78bfa;
}

.nm3-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text, #e2eaf6);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.nm3-subtitle {
  font-size: 13px;
  color: var(--text-3, #8fa3be);
  margin: 0 0 16px 0;
  line-height: 1.4;
}

/* 모바일 KPI (가로 1줄 유지) */
.nm3-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.nm3-kpi-card {
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-6);
  border-radius: 8px;
  text-align: center;
}

.nm3-kpi-label {
  font-size: 10px;
  color: var(--text-4, #6f839f);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nm3-kpi-value {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

.nm3-kpi-value--unread {
  color: var(--accent-purple);
}

.nm3-kpi-value--new {
  color: var(--blue);
}

.nm3-kpi-value--deadline {
  color: var(--rose);
}

.nm3-kpi-sub {
  font-size: 9px;
  color: var(--text-4, #6f839f);
  white-space: nowrap;
}

/* 모바일 필터 툴바 */
.nm3-toolbar {
  background: var(--surface, var(--surface-1));
  border: 1px solid var(--surface-4);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nm3-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nm3-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.nm3-filter-label {
  font-size: 11px;
  color: var(--text-4, #6f839f);
  flex-shrink: 0;
  width: 50px;
}

.nm3-btn-group {
  display: flex;
  background: var(--surface-3);
  border-radius: 6px;
  padding: 2px;
  border: 1px solid var(--surface-5);
  flex: 1;
}

.nm3-filter-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-3, #8fa3be);
  padding: 3px 6px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.nm3-filter-btn--active {
  background: var(--violet, #7C5CFF);
  color: #fff !important;
}

.nm3-sort-select {
  background: var(--surface, var(--surface-4));
  border: 1px solid var(--surface-8);
  color: var(--text, #e2eaf6);
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 6px;
}

.nm3-readall-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .15);
  color: var(--text-2, #ccd6e6);
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
}

/* 모바일 리스트 */
.nm3-list-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.nm3-item-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface, var(--surface-2));
  border: 1px solid var(--surface-5);
  border-radius: 8px;
  cursor: pointer;
}

.nm3-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 10px;
}

.nm3-status-dot--unread {
  background: var(--accent-purple);
  box-shadow: 0 0 4px var(--accent-purple);
}

.nm3-status-dot--read {
  border: 1px solid var(--text-4, #6f839f);
}

.nm3-content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin-right: 8px;
}

.nm3-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nm3-badge {
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
}

.nm3-badge--new {
  background: rgba(124, 92, 255, 0.15);
  color: #a78bfa;
}

.nm3-badge--deadline {
  background: rgba(255, 111, 139, 0.15);
  color: #ff8fa3;
}

.nm3-msg {
  font-size: 13px;
  color: var(--text, #e2eaf6);
  word-break: break-all;
  line-height: 1.3;
}

.nm3-time {
  font-size: 10px;
  color: var(--text-4, #6f839f);
  white-space: nowrap;
}

.nm3-arrow {
  color: var(--text-4, #6f839f);
  font-size: 12px;
}

.nm3-empty-card {
  padding: 24px;
  text-align: center;
  color: var(--text-4, #6f839f);
  border: 1px dashed var(--surface-8);
  border-radius: 8px;
  font-size: 13px;
}

/* 환경설정 모바일 */
.nm3-config-card {
  background: var(--surface, var(--surface-2));
  border: 1px solid var(--surface-5);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.nm3-config-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #e2eaf6);
  margin: 0 0 12px 0;
}

.nm3-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-4);
}

.nm3-config-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.nm3-config-row:first-of-type {
  padding-top: 0;
}

.nm3-config-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nm3-config-icon {
  font-size: 18px;
}

.nm3-config-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nm3-config-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e2eaf6);
}

.nm3-config-desc {
  font-size: 11px;
  color: var(--text-4, #6f839f);
}

.nm3-config-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nm3-config-badge {
  font-size: 10px;
  color: var(--text-4, #6f839f);
  background: var(--surface-4);
  padding: 1px 4px;
  border-radius: 4px;
}

.nm3-config-toggle {
  position: relative;
  width: 38px;
  height: 20px;
  background: var(--surface-8);
  border-radius: 10px;
  cursor: not-allowed;
}

.nm3-config-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, .4);
  border-radius: 50%;
}

.nm3-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.nm3-toggle-switch input { opacity: 0; width: 0; height: 0; }
.nm3-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-2, #363644); border-radius: 24px; transition: 0.2s; }
.nm3-toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.2s; }
.nm3-toggle-switch input:checked + .nm3-toggle-slider { background-color: var(--success, #3DD68C); }
.nm3-toggle-switch input:checked + .nm3-toggle-slider::before { transform: translateX(20px); }
.nm3-email-form-body { padding: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
.nm3-email-field { display: flex; flex-direction: column; gap: 4px; }
.nm3-email-field label { font-size: 12px; color: var(--text-3, #B5B5D2); }
.nm3-email-field input { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border-2, #363644); background: var(--bg-input, #141419); color: var(--text-2, #E2E2F0); }
.nm3-email-field-row { display: flex; gap: 12px; }
.nm3-email-field-row .nm3-email-field { flex: 1; }
.nm3-email-preview { font-size: 12px; color: var(--text-3, #B5B5D2); }
.nm3-email-saved-msg { font-size: 12px; color: var(--success, #3DD68C); }
.nm3-email-save-btn { align-self: flex-start; padding: 8px 20px; border-radius: 6px; background: var(--accent, #7C5CFF); color: #fff; border: none; cursor: pointer; }

/* 알림 모바일 전용: layout-mobile.html의 기본 바텀 네비 숨김 */
body:has(.nm3-container) .mobile-footer-nav {
  display: none !important;
}

/* 모바일 전용 bottom nav */
.nm3-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  border-top: 1px solid var(--surface-5);
  background-color: var(--bg-card, #161f30);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 999;
}

.nm3-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 11px;
  color: var(--text-3, #8fa3be);
  gap: 3px;
  flex: 1;
  text-align: center;
}

.nm3-nav-item--active {
  color: var(--primary, #7C5CFF) !important;
  font-weight: 700;
}

.nm3-nav-icon {
  font-size: 16px;
}

/* 알림 모바일 전용: layout-mobile.html의 기본 헤더 숨김 */
body:has(.nm3-container) .mobile-header {
  display: none !important;
}

/* 모바일 전용 content main 영역 상단 패딩 리셋 */
body:has(.nm3-container) .mobile-main {
  height: calc(100vh - 60px);
  padding: 0;
}

.nf5-date-range {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nf5-date-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel-elevated);
  border: 1px solid var(--line2);
  color: var(--text-bright);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}

.nf5-date-sep {
  display: none;
}

.nf5-filter-hint {
  font-size: 11px;
  color: var(--text-4);
  margin-left: 4px;
  font-weight: 400;
}

/* ── Step 115: 저장조건 모달 + 단일 버튼 ── */

/* 사이드 패널 단일 버튼 */
.nf5-save-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--accent-soft, rgba(141, 99, 255, .12));
  border: 1px solid var(--accent, #7C5CFF);
  border-radius: 12px;
  color: var(--text, #e2eaf6);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.nf5-save-trigger:hover {
  background: rgba(141, 99, 255, .20);
}

.nf5-save-trigger-icon {
  font-size: 14px;
}

.nf5-save-trigger-label {
  flex: 1;
  text-align: left;
}

.nf5-save-trigger-count {
  background: var(--accent, #7C5CFF);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

/* 모달 backdrop */
.nf5-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.nf5-modal {
  width: min(900px, 92vw);
  max-height: 86vh;
  overflow: auto;
  background: var(--modal-panel);
  border: 1px solid var(--surface-7);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  color: var(--text);
}

.nf5-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  border-bottom: 1px solid var(--surface-5);
}

.nf5-modal-title {
  margin: 0;
  font-size: 18px;
  color: var(--text, #e2eaf6);
}

.nf5-modal-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-3, #b5b5d2);
}

.nf5-modal-sub strong {
  color: var(--rose, #ff6f8b);
}

.nf5-modal-close {
  background: transparent;
  border: 0;
  color: var(--text-4);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

.nf5-modal-body {
  padding: 20px 24px;
}

.nf5-modal-divider {
  border: 0;
  border-top: 1px solid var(--surface-5);
  margin: 20px 0;
}

/* 저장 폼 */
.nf5-save-form-label {
  display: block;
  font-size: 12px;
  color: var(--text-4);
  margin-bottom: 6px;
}

.nf5-save-form-row {
  display: flex;
  gap: 10px;
}

.nf5-save-form-input {
  flex: 1;
  background: var(--modal-input);
  border: 1px solid var(--surface-7);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--text, #e2eaf6);
  font-size: 14px;
}

.nf5-save-form-btn {
  background: var(--accent, #7C5CFF);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.nf5-save-form-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.nf5-current-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.nf5-current-chip {
  background: var(--surface-3);
  border: 1px solid var(--surface-5);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-3);
}

.nf5-current-chip-empty {
  font-size: 12px;
  color: var(--text-4);
}

/* 저장 리스트 */
.nf5-saved-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.nf5-saved-head h4 {
  margin: 0;
  font-size: 15px;
  color: var(--text);
}

.nf5-saved-status {
  font-size: 12px;
  color: var(--text-4);
}

.nf5-saved-status strong {
  color: var(--accent-fg);
}

.nf5-saved-hint {
  font-size: 12px;
  color: var(--amber);
  margin: 8px 0 12px;
}

.nf5-saved-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.nf5-saved-table th,
.nf5-saved-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-3);
  font-size: 13px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.nf5-saved-table th {
  color: var(--text-4);
  font-weight: 500;
  text-align: left;
}

.nf5-saved-table td {
  color: var(--text-2);
}

.nf5-saved-summary {
  color: var(--text-3);
  font-size: 12px;
}

.nf5-saved-empty {
  text-align: center;
  color: var(--text-4);
  padding: 24px 0;
}

.nf5-saved-apply,
.nf5-saved-overwrite,
.nf5-saved-delete {
  border: 1px solid var(--surface-8);
  background: transparent;
  color: var(--text-2);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  margin-right: 4px;
  cursor: pointer;
}

.nf5-saved-apply {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-fg);
}

[data-theme="light"] .nf5-modal {
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .nf5-save-form-input {
  border-color: var(--border);
}

.nf5-saved-delete:hover {
  background: rgba(255, 94, 94, .10);
  border-color: var(--rose);
  color: var(--rose);
}

.nf5-modal-footer-hint {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-4);
}

/* Step 121 Stage Badge & Disabled Filter styles */
.nf5-acc-group.nf5-disabled .nf5-acc-body {
  opacity: 0.4;
  pointer-events: none;
}

.nf5-acc-group.nf5-disabled .nf5-acc-header {
  color: var(--text-4, #6f839f);
}

.nf5-disabled-hint {
  font-size: 11px;
  color: var(--text-4, #6f839f);
  padding: 4px 8px;
}

.nf5-stage-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

.nf5-stage-prespec {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border: 1px solid rgba(124, 92, 255, 0.35);
}

.nf5-stage-bid {
  background: var(--success-soft);
  color: var(--success-fg);
  border: 1px solid rgba(35, 209, 139, 0.4);
}

.nf5-stage-award {
  background: var(--warning-soft);
  color: var(--warning-fg);
  border: 1px solid rgba(255, 191, 71, 0.4);
}

.nf5-stage-contract {
  background: rgba(111, 131, 159, 0.18);
  color: var(--text-3);
  border: 1px solid rgba(111, 131, 159, 0.4);
}

/* === dm4 (대시보드 모바일 v1.3) === */

.dm4-shell {
  max-width: 430px;
  min-width: 350px;
  margin: 0 auto;
  padding: 16px 16px 60px;
  background-color: var(--bg, #0D0D12);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ========================================
   §13.7 공통 헤더 (mobile-header)
   Step 139 (2026-06-21) - layout-mobile fragment 전용
   ======================================== */
.mh-left {
  display: flex;
  flex-direction: column;
}

.mh-logo-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.mh-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-fg, #7C5CFF);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.mh-logo-sub {
  font-size: 9px;
  color: var(--text-4, #8A8AB3);
  font-weight: 500;
  margin-top: -2px;
}

.mh-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mh-action-btn {
  background: none;
  border: none;
  padding: 6px;
  color: var(--text-3, #B5B5D2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.mh-action-btn:hover {
  color: var(--text-bright);
  background: var(--surface-3);
}

.mh-alert-dot {
  background: var(--danger, #FF5E5E);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 5px;
  right: 5px;
}

/* ======================================== */

.dm4-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border, #2A2A35);
  padding-bottom: 12px;
}

.dm4-header-left {
  display: flex;
  flex-direction: column;
}

.dm4-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-fg, #7C5CFF);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.dm4-logo-sub {
  font-size: 9px;
  color: var(--text-4, #8A8AB3);
  font-weight: 500;
  margin-top: -2px;
}

.dm4-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.dm4-action-btn {
  background: none;
  border: none;
  padding: 6px;
  color: var(--text-3, #B5B5D2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.dm4-action-btn:hover {
  color: var(--text-bright);
  background: var(--surface-3);
}

.dm4-alert-dot {
  background: var(--danger, #FF5E5E);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 5px;
  right: 5px;
}

.dm4-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dm4-kpi {
  background: var(--surface-3);
  border: 1px solid var(--line-2, var(--surface-7));
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dm4-kpi-label {
  font-size: 11px;
  color: var(--text-4, #8A8AB3);
  font-weight: 500;
}

.dm4-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-2, #E2E2F0);
  line-height: 1.2;
  margin-top: 4px;
}

.dm4-kpi-sub {
  font-size: 9px;
  color: var(--text-4, #8A8AB3);
  margin-top: 4px;
}

.dm4-kpi--violet .dm4-kpi-value {
  color: var(--violet, #8d63ff);
}

.dm4-kpi--blue .dm4-kpi-value {
  color: var(--blue, #4db8ff);
}

.dm4-kpi--green .dm4-kpi-value {
  color: var(--green, #23d18b);
}

.dm4-kpi--amber .dm4-kpi-value {
  color: var(--amber, #ffbf47);
}

.dm4-section {
  background: var(--surface-3);
  border: 1px solid var(--line-2, var(--surface-7));
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.dm4-section-head {
  display: flex;
  align-items: baseline;
  margin-bottom: 14px;
}

.dm4-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2, #E2E2F0);
}

.dm4-section-sub {
  font-size: 10px;
  color: var(--text-4, #8A8AB3);
  margin-left: 6px;
}

.dm4-pill-premium {
  background: var(--accent-soft, rgba(124, 92, 255, 0.15));
  color: var(--accent-fg, #7C5CFF);
  border: 1px solid var(--accent, #7C5CFF);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  margin-left: auto;
  line-height: 1;
}

.dm4-fallback-card {
  text-align: center;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 10px;
  border: 1px dashed var(--border, #2A2A35);
}

.dm4-fallback-text {
  font-size: 12px;
  color: var(--text-3, #B5B5D2);
  margin-bottom: 4px;
  font-weight: 500;
}

.dm4-fallback-sub {
  font-size: 10px;
  color: var(--text-4, #8A8AB3);
}

.dm4-key-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.dm4-key-metric {
  background: var(--surface-1);
  border: 1px solid var(--line-2, var(--surface-7));
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 68px;
}

.dm4-key-metric-label {
  font-size: 10px;
  color: var(--text-4, #8A8AB3);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}

.dm4-info-icon {
  font-size: 9px;
  color: var(--text-4, #8A8AB3);
  cursor: help;
}

.dm4-key-metric-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-2, #E2E2F0);
  margin-top: 2px;
}

.dm4-key-metric-value.badge-green {
  color: var(--green, #23d18b);
}

.dm4-key-metric-value.badge-amber {
  color: var(--amber, #ffbf47);
}

.dm4-key-metric-value.badge-rose {
  color: var(--rose, #ff6f8b);
}

.dm4-prog-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dm4-prog-row {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  align-items: center;
  gap: 8px;
}

.dm4-prog-label {
  font-size: 11px;
  color: var(--text-3, #B5B5D2);
  font-weight: 500;
  white-space: nowrap;
}

.dm4-prog-bar-container {
  width: 100%;
}

.dm4-prog-bar-track {
  height: 6px;
  background: var(--surface-4);
  border-radius: 3px;
  overflow: hidden;
}

.dm4-prog-bar-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width 0.4s ease;
}

.dm4-fill--green {
  background-color: var(--green, #23d18b);
  box-shadow: 0 0 6px rgba(35, 209, 139, 0.2);
}

.dm4-fill--amber {
  background-color: var(--amber, #ffbf47);
  box-shadow: 0 0 6px rgba(255, 191, 71, 0.2);
}

.dm4-fill--rose {
  background-color: var(--rose, #ff6f8b);
  box-shadow: 0 0 6px rgba(255, 111, 139, 0.2);
}

.dm4-prog-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2, #E2E2F0);
  text-align: right;
}

.dm4-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.dm4-donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.dm4-donut::after {
  content: "";
  position: absolute;
  inset: 24px;
  background: var(--bg, #0D0D12);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--surface-5);
}

.dm4-donut-total {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.dm4-donut-total-lbl {
  font-size: 10px;
  color: var(--text-4, #8A8AB3);
}

.dm4-donut-total strong {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
}

.dm4-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #2A2A35);
}

.dm4-legend-item {
  display: grid;
  grid-template-columns: 8px 80px 1fr 50px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.dm4-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dm4-legend-label {
  color: var(--text-3, #B5B5D2);
  font-weight: 500;
}

.dm4-legend-val {
  color: var(--text-4, #8A8AB3);
  text-align: right;
}

.dm4-legend-pct {
  color: var(--text-2, #E2E2F0);
  font-weight: 600;
  text-align: right;
}

.dm4-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border, #2A2A35);
}

.dm4-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: left;
}

.dm4-table th,
.dm4-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #2A2A35);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.dm4-table th {
  color: var(--muted, #93a4c2);
  font-weight: 600;
  background: var(--surface-1);
  white-space: nowrap;
}

.dm4-table td {
  color: var(--text-2, #E2E2F0);
}

.dm4-link {
  color: var(--accent-fg, #7C5CFF);
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.dm4-link:hover {
  text-decoration: underline;
}

.dm4-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm4-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .01);
  border: 1px solid var(--border, #2A2A35);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dm4-list-row:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: var(--surface-2);
}

.dm4-badge-type {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dm4-badge--purple {
  background: var(--accent-soft, rgba(124, 92, 255, 0.15));
  color: var(--violet, #8d63ff);
  border: 1px solid rgba(124, 92, 255, 0.3);
}

.dm4-badge--violet {
  background: var(--accent-soft, rgba(124, 92, 255, 0.15));
  color: var(--violet, #8d63ff);
  border: 1px solid rgba(124, 92, 255, 0.3);
}

.dm4-badge--blue {
  background: rgba(77, 184, 255, 0.15);
  color: var(--blue, #4db8ff);
  border: 1px solid rgba(77, 184, 255, 0.3);
}

.dm4-badge--green {
  background: var(--success-soft, rgba(61, 214, 140, 0.13));
  color: var(--green, #23d18b);
  border: 1px solid rgba(61, 214, 140, 0.3);
}

.dm4-badge--orange {
  background: rgba(255, 148, 82, 0.15);
  color: var(--orange, #ff9452);
  border: 1px solid rgba(255, 148, 82, 0.3);
}

.dm4-badge--gray {
  background: rgba(143, 163, 190, 0.14);
  color: var(--muted, #93a4c2);
  border: 1px solid rgba(143, 163, 190, 0.28);
}

.dm4-notice-title {
  font-size: 12px;
  color: var(--text-2, #E2E2F0);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.dm4-notice-title--full {
  flex: 1;
}

.dm4-dday-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dm4-dday-badge.badge-rose {
  background: var(--danger-soft, rgba(255, 94, 94, 0.14));
  color: var(--rose, #ff6f8b);
  border: 1px solid rgba(255, 111, 139, 0.3);
}

.dm4-dday-badge.badge-amber {
  background: var(--warning-soft, rgba(255, 184, 0, 0.13));
  color: var(--amber, #ffbf47);
  border: 1px solid rgba(255, 191, 71, 0.3);
}

.dm4-arrow {
  color: var(--text-4, #8A8AB3);
  font-size: 14px;
  margin-left: auto;
  line-height: 1;
}

.dm4-bell-icon {
  color: var(--amber, #ffbf47);
  font-size: 13px;
  margin-left: auto;
}

.dm4-alert-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dm4-alert-badge.badge-violet {
  background: var(--accent-soft, rgba(124, 92, 255, 0.15));
  color: var(--violet, #8d63ff);
  border: 1px solid rgba(124, 92, 255, 0.3);
}

.dm4-alert-badge.badge-rose {
  background: var(--danger-soft, rgba(255, 94, 94, 0.14));
  color: var(--rose, #ff6f8b);
  border: 1px solid rgba(255, 111, 139, 0.3);
}

.dm4-alert-badge.badge-blue {
  background: rgba(77, 184, 255, 0.15);
  color: var(--blue, #4db8ff);
  border: 1px solid rgba(77, 184, 255, 0.3);
}

.dm4-alert-msg {
  font-size: 11px;
  color: var(--text-2, #E2E2F0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.dm4-alert-time {
  font-size: 9px;
  color: var(--text-4, #8A8AB3);
  white-space: nowrap;
  flex-shrink: 0;
}

.dm4-empty {
  font-size: 12px;
  color: var(--text-4, #8A8AB3);
  text-align: center;
  padding: 20px 0;
  background: rgba(255, 255, 255, .01);
  border-radius: 10px;
  border: 1px dashed var(--border, #2A2A35);
}

.dm4-more {
  font-size: 11px;
  color: var(--accent-fg, #7C5CFF);
  text-decoration: none;
  margin-left: auto;
  font-weight: 600;
}

.dm4-more:hover {
  text-decoration: underline;
}


.signals .sub {
  font-size: 11px;
  color: var(--text-4, #6f839f);
  margin-top: 4px;
}

/* === mobile footer nav (Step 129, §13.6) === */
.mobile-footer-nav .mfn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  text-decoration: none;
  color: var(--text-3);
  transition: color .15s ease;
}

.mobile-footer-nav .mfn-item small {
  font-size: 11px;
  line-height: 1;
}

.mobile-footer-nav .mfn-item--active {
  color: var(--accent-purple, var(--accent, #7C5CFF));
}

/* === nd6 disabled stepper links (Step 133) === */
.nd6-step-link[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* === ndm: 공고상세 모바일 (Step 133) === */
.ndm {
  max-width: 430px;
  min-width: 350px;
  margin: 0 auto;
  padding: 0 0 80px; /* FAB/footer nav 여유 공간 */
  color: var(--text);
  font-family: 'Pretendard', sans-serif;
}

/* 모바일 헤더 */
.ndm-header {
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background-color: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.ndm-header__back {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
}
.ndm-header__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.ndm-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ndm-header__btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text);
  position: relative;
}

/* 드롭다운 메뉴 */
.ndm-dropdown {
  position: relative;
}
.ndm-dropdown__menu {
  position: absolute;
  top: 42px;
  right: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: 40;
  min-width: 100px;
  overflow: hidden;
}
.ndm-dropdown__item {
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.ndm-dropdown__item:hover {
  background: var(--surface-4);
}

/* 본문 정렬 */
.ndm-content {
  padding: 16px 0;
}

/* 단계 배지 */
.ndm-badges-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.ndm-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}
.ndm-badge--solid {
  color: #fff;
}
.ndm-badge--PRE_SPEC { background-color: var(--accent-purple); }
.ndm-badge--BID { background-color: var(--accent-blue); }
.ndm-badge--AWARD { background-color: var(--accent-green); }
.ndm-badge--CONTRACT { background-color: var(--accent-orange); }

.ndm-badge--outline {
  background: transparent;
}
.ndm-badge--si { border: 1px solid var(--accent-blue); color: var(--accent-blue); }
.ndm-badge--sm { border: 1px solid var(--accent-purple); color: var(--accent-purple); }
.ndm-badge--etc { border: 1px solid var(--text-3); color: var(--text-3); }
.ndm-badge--audit { border: 1px solid var(--accent-green); color: var(--accent-green); }
.ndm-badge--consulting { border: 1px solid var(--accent-orange); color: var(--accent-orange); }

/* 타이틀 */
.ndm-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px 0;
}
.ndm-subtitle {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 20px;
}

/* Facts 6칸 그리드 */
.ndm-facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.ndm-fact-card {
  background: var(--surface-3);
  border: 1px solid var(--line-2, var(--border));
  border-radius: var(--r-sm, 8px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ndm-fact-label {
  font-size: 11px;
  color: var(--text-3);
}
.ndm-fact-value {
  font-size: 14px;
  font-weight: 700;
  word-break: keep-all;
}

/* 색상 유틸 */
.ndm-color--rose { color: var(--rose); }
.ndm-color--green { color: var(--green); }

/* 평가 5박스 */
.ndm-eval-section {
  margin-bottom: 16px;
}
.ndm-section-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.ndm-eval-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ndm-eval-card {
  flex: 1 1 calc(20% - 6px);
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--line-2, var(--border));
  border-radius: var(--r-sm, 6px);
  padding: 8px 4px;
  text-align: center;
  gap: 6px;
}
.ndm-eval-label {
  font-size: 9px;
  color: var(--text-3);
  line-height: 1.2;
}
.ndm-eval-value {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 4px;
  width: 100%;
}
.ndm-bg--gray { background-color: var(--line-2); color: var(--text-3); }
.ndm-bg--green { background-color: var(--success-soft); color: var(--green); }
.ndm-bg--amber { background-color: var(--warning-soft); color: var(--amber); }
.ndm-bg--rose { background-color: var(--danger-soft); color: var(--rose); }

/* 펼침 토글 카드 */
.ndm-card-collapse {
  background: var(--surface-3);
  border: 1px solid var(--line-2, var(--border));
  border-radius: var(--r-sm, 8px);
  margin-bottom: 12px;
  overflow: hidden;
}
.ndm-card-collapse__header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.ndm-card-collapse__title {
  font-size: 14px;
  font-weight: 600;
}
.ndm-card-collapse__icon {
  font-size: 10px;
  transition: transform 0.2s ease;
}
.ndm-card-collapse__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
  padding: 0 16px;
}
.ndm-card-collapse.open .ndm-card-collapse__body {
  max-height: 1000px;
  padding-bottom: 16px;
}
.ndm-card-collapse.open .ndm-card-collapse__icon {
  transform: rotate(180deg);
}

/* 상세 표 */
.ndm-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ndm-info-table tr {
  border-bottom: 1px solid var(--surface-4);
}
.ndm-info-table tr:last-child {
  border-bottom: none;
}
.ndm-info-table th {
  padding: 8px 0;
  color: var(--text-3);
  font-weight: 500;
  width: 110px;
  text-align: left;
}
.ndm-info-table td {
  padding: 8px 0;
  color: var(--text);
  text-align: right;
  word-break: keep-all;
}

/* 기본 카드 */
.ndm-card {
  background: var(--surface-3);
  border: 1px solid var(--line-2, var(--border));
  border-radius: var(--r-sm, 8px);
  padding: 16px;
  margin-bottom: 12px;
}
.ndm-card__title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}

/* 일정 박스 */
.ndm-schedule-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ndm-schedule-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.ndm-schedule-label {
  color: var(--text-3);
}
.ndm-schedule-value {
  font-weight: 600;
}

/* 담당자 그리드 */
.ndm-officer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ndm-officer-cell {
  display: flex;
  flex-direction: column;
}
.ndm-officer-cell--wide {
  grid-column: 1 / -1;
}
.ndm-officer-label {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 2px;
}
.ndm-officer-value {
  font-size: 13px;
  font-weight: 600;
}

/* 칩 그룹 */
.ndm-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ndm-chip {
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--line-2, var(--border));
  border-radius: 12px;
  padding: 4px 8px;
  color: var(--text-2);
}

/* 첨부파일 스크롤 표 */
.ndm-attach-scroll {
  width: 100%;
  overflow-x: auto;
}
.ndm-attach-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 13px;
}
.ndm-attach-table tr {
  border-bottom: 1px solid var(--surface-4);
  cursor: pointer;
}
.ndm-attach-table tr:last-child {
  border-bottom: none;
}
.ndm-attach-table td {
  padding: 10px 4px;
}

/* 참가업체 목록 표 — 모바일 (Step 206) */
.ndm-participant-title {
  margin-top: 12px;
}

.ndm-participant-scroll {
  overflow-x: auto;
  margin-top: 12px;
}

.ndm-participant-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.ndm-participant-table td {
  padding: 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--line-2);
  color: var(--text-2);
  word-break: keep-all;
}

.ndm-participant-row--winner td {
  color: var(--sub);
  font-weight: 700;
}

.ndm-attach-name {
  color: var(--text);
  font-weight: 500;
  word-break: break-all;
}
.ndm-attach-size {
  color: var(--text-3);
  width: 60px;
  text-align: right;
}
.ndm-attach-down {
  width: 24px;
  text-align: right;
  color: var(--accent-fg);
}

/* 미리보기 */
.ndm-preview-body {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  white-space: pre-wrap;
}
.ndm-btn {
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-sm, 6px);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ndm-btn--outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-fg);
}

/* Step 153: 라이프사이클 가로 컴팩트 stepper */
.ndm-lifecycle-card {
  /* 카드 자체는 기존 .ndm-card 스타일 그대로 사용 */
}
.ndm-stepper-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 12px 4px 8px;
}
.ndm-step-h {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
}
.ndm-step-h__dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-3, var(--surface-7));
  transition: all 0.15s ease;
}
.ndm-step-h.is-active {
  background: var(--surface-3);
}
.ndm-step-h.is-active[data-color="purple"] .ndm-step-h__dot { background: var(--accent-purple, #7c5cff); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.25); }
.ndm-step-h.is-active[data-color="blue"]   .ndm-step-h__dot { background: var(--accent-blue, #4691ff);   box-shadow: 0 0 0 3px rgba(70, 145, 255, 0.25); }
.ndm-step-h.is-active[data-color="orange"] .ndm-step-h__dot { background: var(--accent-orange, #ffa546); box-shadow: 0 0 0 3px rgba(255, 165, 70, 0.25); }
.ndm-step-h.is-active[data-color="green"]  .ndm-step-h__dot { background: var(--accent-green, #3cc882);  box-shadow: 0 0 0 3px rgba(60, 200, 130, 0.25); }
.ndm-step-h.is-muted .ndm-step-h__dot { background: var(--surface-3, var(--surface-7)); opacity: 0.55; }
.ndm-step-h__line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--surface-3, var(--surface-7));
  opacity: 0.55;
  border-radius: 2px;
}
.ndm-step-h__line.is-active {
  background: linear-gradient(90deg, var(--accent-purple, #7c5cff), var(--accent-blue, #4691ff));
  opacity: 1;
}
.ndm-lifecycle-active-label {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  padding: 4px 0 8px;
}

/* sticky FAB */
.ndm-fab-container {
  position: fixed;
  right: 16px;
  bottom: calc(80px + 16px);
  z-index: 30;
}
.ndm-fab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  border-radius: 24px;
  padding: 0 16px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(124,92,255,0.45);
  cursor: pointer;
  transition: all 0.2s ease;
}
.ndm-fab--active {
  background: var(--bg-card);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  box-shadow: 0 4px 12px rgba(124,92,255,0.2);
}
.ndm-fab-icon {
  font-size: 14px;
}
.ndm-fab-label {
  white-space: nowrap;
}

/* 풀스크린/모달 전문 보기 */
.ndm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}
.ndm-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}
.ndm-modal__dialog {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: var(--bg-card);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ndm-modal__header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.ndm-modal__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.ndm-modal__close {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}
.ndm-modal__body {
  flex-grow: 1;
  padding: 16px;
  overflow-y: auto;
}
.ndm-modal__pre {
  font-family: inherit;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0;
}

/* === nlm: 공고목록 모바일 (Step 132) === */

/* nlm 컨테이너 및 폭 설정 */
.nlm {
  max-width: 430px;
  min-width: 350px;
  margin: 0 auto;
  padding: 0 16px 80px 16px;
  background-color: var(--bg);
  color: var(--text);
  box-sizing: border-box;
}

/* 제목 */
.nlm-title {
  font-size: 20px;
  font-weight: 700;
  margin: 20px 0 12px 0;
  color: var(--text);
}

/* 공고 서브탭 칩 (Step 304 Mob-A) — 기존 인라인 style 이관, th:style 덮어쓰기 버그 제거 */
.nd-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.nd-subtab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  background: var(--bg-card);
  color: var(--text-3);
}
.nd-subtab--active {
  background: var(--accent-purple, #7c5cff);
  color: #fff;
}

.nlm-notice-number-notice {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 190, 92, 0.42);
  border-radius: 10px;
  background: rgba(255, 190, 92, 0.09);
  color: var(--text-bright);
  font-size: 12px;
  line-height: 1.45;
}

/* KPI 4칸 grid (2x2) */
.nlm-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.nlm-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nlm-kpi-label {
  font-size: 12px;
  color: var(--text-3);
}

.nlm-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

/* KPI 개별 강조 색상 */
.nlm-kpi-card--green .nlm-kpi-value {
  color: var(--green);
}
.nlm-kpi-card--blue .nlm-kpi-value {
  color: var(--blue);
}
.nlm-kpi-card--violet .nlm-kpi-value {
  color: var(--violet);
}

/* 컨트롤 바 (3개 버튼/셀렉트) */
.nlm-control-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}

.nlm-ctrl-btn {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 20px; /* 칩 20px 고정 규칙 */
  color: var(--text-2);
  font-size: 13px;
  padding: 8px 12px;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nlm-sort-wrapper {
  flex: 1;
  position: relative;
}

.nlm-sort-select {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  color: var(--text-2);
  font-size: 13px;
  padding: 8px 12px;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

/* 활성 필터 칩 영역 */
.nlm-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.nlm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

.nlm-chip-remove {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 14px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  margin-left: 2px;
}

/* 칩 색상 바리에이션 */
.nlm-chip--gray {
  background: var(--bg-card);
  border-color: var(--line-2);
  color: var(--text-3);
}

.nlm-chip--green {
  background: var(--success-soft);
  border-color: var(--green);
  color: var(--green);
}

.nlm-chip--amber {
  background: var(--warning-soft);
  border-color: var(--amber);
  color: var(--amber);
}

.nlm-chip--rose {
  background: var(--danger-soft);
  border-color: var(--rose);
  color: var(--rose);
}

.nlm-chip--violet {
  background: var(--accent-soft);
  border-color: var(--violet);
  color: var(--violet);
}

.nlm-chip--blue {
  background: var(--info-soft);
  border-color: var(--blue);
  color: var(--blue);
}

.nlm-chip--orange {
  background: var(--warning-soft);
  border-color: var(--orange);
  color: var(--orange);
}

/* 결과 건수 */
.nlm-count-bar {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.nlm-count-bar strong {
  color: var(--text);
  font-weight: 600;
}

/* 리스트 목록 */
.nlm-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 카드 */
.nlm-card {
  display: flex;
  /* Step 349: 기본 row면 badge-row·body가 가로 배치되어 뱃지가 세로 알약이 됨 */
  flex-direction: column;
  gap: 10px;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 0.2s;
  box-sizing: border-box;
}

.nlm-card:hover {
  background: var(--surface-7);
}

/* 카드 단계 배지 */
.nlm-card__stage {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--bg); /* solid 글씨색은 어두운 배경색으로 대비 확보 */
  line-height: 1.2;
}

/* 단계 배지 색상 */
.nlm-card__stage.badge-violet {
  background-color: var(--violet);
  color: var(--text);
}
.nlm-card__stage.badge-blue {
  background-color: var(--blue);
  color: var(--bg);
}
.nlm-card__stage.badge-green {
  background-color: var(--green);
  color: var(--bg);
}
.nlm-card__stage.badge-orange {
  background-color: var(--orange);
  color: var(--bg);
}

.nlm-card__body {
  flex: 1;
  padding-left: 0;
  /* Step 349: badge-row가 문서 흐름에 있으므로 absolute stage용 margin-top 불필요 */
  margin-top: 0;
  min-width: 0; /* text-overflow 방지용 */
}

.nlm-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nlm-card__agency {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 4px;
}

.nlm-card__sub {
  font-size: 12px;
  color: var(--text-4);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.nlm-card__sub .dot {
  color: var(--text-4);
}

.nlm-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 8px;
}

.nlm-card__meta .dot {
  color: var(--text-4);
}

/* 도메인 태그 */
.domain-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
}

.domain-tag--purple {
  color: var(--violet);
  border-color: var(--accent-soft);
}
.domain-tag--green {
  color: var(--green);
  border-color: var(--success-soft);
}
.domain-tag--blue {
  color: var(--blue);
  border-color: var(--info-soft);
}
.domain-tag--orange {
  color: var(--orange);
  border-color: var(--warning-soft);
}
.domain-tag--gray {
  color: var(--text-4);
}

/* Dday 색상 */
.nlm-color--rose {
  color: var(--rose);
  font-weight: 600;
}
.nlm-color--amber {
  color: var(--amber);
  font-weight: 600;
}

/* 카드 하단 칩 3종 */
.nlm-card__chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.nlm-card__chips span {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  color: var(--text-3);
}

/* 카드 우측 영역 */
.nlm-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 75px;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Step 349: column 카드에서 우측(끝) 정렬 유지 — ★·판단라벨 */
  align-self: flex-end;
}

/* 액션 3종 */
.nlm-card__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nlm-card__actions .action {
  font-size: 14px;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nlm-card__actions .action.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.nlm-card__actions .favorite-toggle {
  color: var(--text-4);
}
.nlm-card__actions .favorite-toggle.active {
  color: var(--amber);
}

/* 판단요소 라벨 */
.nlm-card__label {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
}

/* 판단요소 라벨 색상 */
.nlm-card__label.badge-gray {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  color: var(--text-4);
}
.nlm-card__label.badge-green-outline {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
}
.nlm-card__label.badge-amber-outline {
  background: transparent;
  border: 1px solid var(--amber);
  color: var(--amber);
}
.nlm-card__label.badge-rose-outline {
  background: transparent;
  border: 1px solid var(--rose);
  color: var(--rose);
}

/* 빈 결과 폴백 */
.nlm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: var(--bg-card);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  margin-top: 16px;
}

.nlm-empty__art {
  margin-bottom: 16px;
  color: var(--text-4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.nlm-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.nlm-empty__desc {
  font-size: 12px;
  color: var(--text-4);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.nlm-empty__cta {
  display: inline-block;
  background: var(--accent);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 20px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.nlm-empty__cta:hover {
  opacity: 0.9;
}

/* 페이지네이션 */
.nlm-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
}

.nlm-page-btn {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  color: var(--text-3);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.nlm-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nlm-page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}

/* 풀스크린 필터 시트 */
.nlm-filter-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.nlm-filter-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.nlm-filter-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 430px; /* nlm width 매칭 */
  height: 100dvh;
  background: var(--bg-card);
  z-index: 51;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease-out;
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
  overflow: hidden;
  box-sizing: border-box;
}

.nlm-filter-sheet.open {
  transform: translate(-50%, 0);
}

/* 시트 헤더 */
.nlm-filter-header {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-2);
}

.nlm-filter-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.nlm-filter-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nlm-filter-reset-text {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}

.nlm-filter-close {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
}

/* 시트 내 활성 칩 영역 */
.nlm-filter-sticky-chips {
  background: var(--bg-card);
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--line-2);
}

/* 필터 시트 본문 */
.nlm-filter-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nlm-filter-sect {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nlm-sect-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.nlm-tooltip-trigger {
  color: var(--text-4);
  font-size: 12px;
  cursor: pointer;
}

/* 검색 인풋 */
.nlm-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.nlm-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px 10px 36px;
  font-size: 13px;
  outline: none;
}

.nlm-input::placeholder {
  color: var(--text-4);
}

.nlm-search-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  color: var(--text-4);
  pointer-events: none;
}

/* 필터 칩 선택형 그리드 */
.nlm-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.nlm-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--text-3);
  padding: 10px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  gap: 6px;
}

.nlm-choice.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
[data-theme="light"] .nlm-choice.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 선택 항목 내부의 작은 도트 */
.nlm-choice .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.nlm-choice .dot.green {
  background-color: var(--green);
}
.nlm-choice .dot.green-outline {
  border: 1px solid var(--green);
}
.nlm-choice .dot.amber {
  background-color: var(--amber);
}
.nlm-choice .dot.rose {
  background-color: var(--rose);
}

/* 기간 범위 */
.nlm-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nlm-date-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--text);
  padding: 10px;
  font-size: 12px;
  outline: none;
}

.nlm-date-sep {
  color: var(--text-4);
  font-size: 12px;
}

/* 예산 */
.nlm-budget-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nlm-select {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--text);
  padding: 10px;
  font-size: 12px;
  outline: none;
}

.nlm-budget-sep {
  color: var(--text-4);
  font-size: 12px;
}

/* 필터 푸터 */
.nlm-filter-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--line-2);
  padding: 16px 20px;
  display: flex;
  gap: 8px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.nlm-btn {
  flex: 1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  border: none;
}

.nlm-btn--outline {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-2);
}

.nlm-btn--primary {
  background: var(--accent);
  color: var(--text);
}

/* 조건저장 미니 모달 */
.nlm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.nlm-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.nlm-saved-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 90%;
  max-width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  z-index: 61;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.nlm-saved-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.nlm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line-2);
}

.nlm-modal-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.nlm-modal-close {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}

.nlm-modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nlm-saved-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nlm-slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-input);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 8px 12px;
}

.nlm-slot-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.nlm-slot-num {
  font-size: 11px;
  color: var(--text-4);
}

.nlm-slot-name {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}

.nlm-slot-row.has-data .nlm-slot-name {
  color: var(--accent-blue);
}

.nlm-slot-del {
  background: transparent;
  border: none;
  color: var(--rose);
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
}

.nlm-save-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line-2);
  padding-top: 12px;
}

.nlm-input-label {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
}

.nlm-save-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.nlm-save-actions .nlm-btn {
  font-size: 11px;
  padding: 8px;
}

/* ========================================
   §8.20 알림 모바일 (nm4)
   Step 140 (2026-06-21)
   ======================================== */
.nm4-shell { display: flex; flex-direction: column; gap: 16px; }

.nm4-title { font-size: 22px; font-weight: 800; color: var(--text-bright); margin: 4px 0 8px; }

/* KPI 3칸 */
.nm4-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nm4-kpi-card {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
}
.nm4-kpi-label { font-size: 11px; color: var(--text-4, #8A8AB3); }
.nm4-kpi-value { font-size: 20px; font-weight: 800; color: var(--text-bright); }
.nm4-kpi-value--unread { color: var(--accent-fg, #7C5CFF); }
.nm4-kpi-value--new { color: var(--accent-purple, #7C5CFF); }
.nm4-kpi-value--deadline { color: var(--danger, #FF5E5E); }
.nm4-kpi-sub { font-size: 10px; color: var(--text-4, #8A8AB3); }

/* 필터 툴바 */
.nm4-toolbar {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  border-radius: 12px;
  padding: 12px;
}
.nm4-toolbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nm4-filter-label { font-size: 12px; color: var(--text-3, #B5B5D2); min-width: 64px; }
.nm4-btn-group { display: flex; gap: 6px; flex-wrap: wrap; }
.nm4-filter-btn {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  color: var(--text-3, #B5B5D2);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.nm4-filter-btn--active {
  background: var(--accent, #7C5CFF);
  color: #fff;
  border-color: var(--accent, #7C5CFF);
}
.nm4-sort-select {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  color: var(--text-bright);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  flex: 1;
}
.nm4-sort-select option {
  background-color: var(--bg-card, #18181F);
  color: var(--text-bright);
}
.nm4-readall-btn {
  background: rgba(124,92,255,.12);
  border: 1px solid var(--accent, #7C5CFF);
  color: var(--accent-fg, #7C5CFF);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  margin-left: auto;
}

/* 리스트 */
.nm4-list { display: flex; flex-direction: column; gap: 8px; }
.nm4-empty {
  text-align: center;
  color: var(--text-4, #8A8AB3);
  padding: 32px 16px;
  font-size: 13px;
  background: var(--surface-1);
  border-radius: 12px;
}
.nm4-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-3);
  border: 1px solid var(--surface-5);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
}
.nm4-row:hover { background: var(--surface-5); }
.nm4-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.nm4-dot--unread { background: var(--accent, #7C5CFF); }
.nm4-dot--read { background: rgba(255,255,255,.18); }
.nm4-row-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nm4-row-top { display: flex; align-items: center; gap: 8px; }
.nm4-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.nm4-badge--new { background: rgba(124,92,255,.18); color: var(--accent-fg, #7C5CFF); }
.nm4-badge--deadline { background: rgba(255,94,94,.18); color: var(--danger, #FF5E5E); }
.nm4-time { font-size: 11px; color: var(--text-4, #8A8AB3); margin-left: auto; }
.nm4-msg { font-size: 13px; color: var(--text-bright); word-break: keep-all; overflow-wrap: break-word; }
.nm4-arrow { color: var(--text-4, #8A8AB3); font-size: 16px; align-self: center; }

/* 환경설정 카드 */
.nm4-config-card {
  background: var(--surface-2);
  border: 1px solid var(--surface-5);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.nm4-config-title { font-size: 13px; font-weight: 700; color: var(--text-bright); margin: 0; }
.nm4-config-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nm4-config-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.nm4-config-icon { font-size: 18px; }
.nm4-config-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nm4-config-name { font-size: 13px; color: var(--text-bright); font-weight: 600; }
.nm4-config-desc { font-size: 11px; color: var(--text-4, #8A8AB3); word-break: keep-all; }
.nm4-config-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--surface-5);
  color: var(--text-4, #8A8AB3);
  white-space: nowrap;
}

/* ========================================
   §8.7 관심공고 모바일 (fm4)
   Step 142 (2026-06-21)
   ======================================== */
.fm4-shell { display: flex; flex-direction: column; gap: 16px; }

.fm4-title-row { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; }
.fm4-title { font-size: 22px; font-weight: 800; color: var(--text-bright); margin: 0; }
.fm4-info-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface-7);
  color: var(--text-3, #B5B5D2);
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fm4-crumbs { font-size: 12px; color: var(--text-4, #8A8AB3); margin-bottom: 4px; }

/* KPI 4칸 2x2 */
.fm4-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fm4-kpi-card {
  position: relative;
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 14px 14px 14px 48px;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 92px;
}
.fm4-kpi-icon {
  position: absolute;
  top: 14px; left: 14px;
  width: 24px; height: 24px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.fm4-kpi-card--violet .fm4-kpi-icon { background: rgba(124,92,255,.18); color: var(--accent-fg, #7C5CFF); }
.fm4-kpi-card--rose   .fm4-kpi-icon { background: rgba(255,94,94,.18);  color: var(--danger, #FF5E5E); }
.fm4-kpi-card--teal   .fm4-kpi-icon { background: rgba(20,184,166,.18); color: #2DD4BF; }
.fm4-kpi-label { font-size: 11px; color: var(--text-4, #8A8AB3); }
.fm4-kpi-value { font-size: 22px; font-weight: 800; color: var(--text-bright); margin: 2px 0; }
.fm4-kpi-sub { font-size: 10px; color: var(--text-4, #8A8AB3); }

/* 필터 칩 */
.fm4-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fm4-chip {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 18px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-3, #B5B5D2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.fm4-chip--active {
  background: var(--accent, #7C5CFF);
  color: #fff;
  border-color: var(--accent, #7C5CFF);
}
.fm4-chip-count { font-weight: 700; opacity: .9; }

/* 정렬 행 */
.fm4-sort-row { display: flex; gap: 8px; }
.fm4-sort-btn {
  background: rgba(124,92,255,.10);
  border: 1px solid rgba(124,92,255,.32);
  color: var(--accent-fg, #7C5CFF);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
}
.fm4-sort-btn--active { background: var(--accent, #7C5CFF); color: #fff; }

/* 카드 */
.fm4-list { display: flex; flex-direction: column; gap: 12px; }
.fm4-card {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.fm4-card-top { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.fm4-star { color: #FACC15; font-size: 18px; line-height: 1; margin-top: 2px; }
.fm4-type-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; }
.fm4-type-badge--prespec  { background: rgba(124,92,255,.20); color: var(--accent-fg, #7C5CFF); }
.fm4-type-badge--bid      { background: rgba(56,189,248,.20); color: #38BDF8; }
.fm4-type-badge--award    { background: rgba(34,197,94,.20);  color: #22C55E; }
.fm4-type-badge--contract { background: rgba(250,204,21,.20); color: #FACC15; }
.fm4-card-title { font-size: 15px; font-weight: 700; color: var(--text-bright); margin: 0; line-height: 1.4; flex: 1 1 100%; word-break: keep-all; }
.fm4-card-agency { font-size: 12px; color: var(--text-4, #8A8AB3); margin-top: -4px; }

/* 카드 본문 */
.fm4-card-body { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: start; }
.fm4-card-col { display: flex; flex-direction: column; gap: 2px; }
.fm4-card-col-value { font-size: 14px; font-weight: 800; color: var(--text-bright); word-break: keep-all; }
.fm4-card-col-label { font-size: 10px; color: var(--text-4, #8A8AB3); }
.fm4-dday--red, .fm4-dday--rose { color: var(--danger, #FF5E5E); }
.fm4-dday--orange, .fm4-dday--amber { color: #FACC15; }
.fm4-dday--green { color: #22C55E; }
.fm4-priority--green { color: #22C55E; }
.fm4-priority--amber { color: #FACC15; }
.fm4-priority--rose  { color: var(--danger, #FF5E5E); }

/* 시그널 배지 스택 */
.fm4-card-signals { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.fm4-signal-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.fm4-signal-badge--violet { background: rgba(124,92,255,.18); color: var(--accent-fg, #7C5CFF); }
.fm4-signal-badge--rose   { background: rgba(255,94,94,.18);  color: var(--danger, #FF5E5E); }
.fm4-signal-badge--amber  { background: rgba(250,204,21,.18); color: #FACC15; }
.fm4-signal-badge--blue   { background: rgba(56,189,248,.18); color: #38BDF8; }
.fm4-signal-badge--green  { background: rgba(34,197,94,.18);  color: #22C55E; }
.fm4-signal-badge--slate  { background: var(--surface-7); color: var(--text-3, #B5B5D2); }

/* 라이프사이클 5단계 §13.2 */
.fm4-lifecycle {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 0;
  margin-top: 4px;
}
.fm4-lc-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fm4-lc-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-7);
  color: var(--text-4, #8A8AB3);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.fm4-lc-label { font-size: 10px; color: var(--text-4, #8A8AB3); white-space: nowrap; }
.fm4-lc-step--done .fm4-lc-num { background: rgba(124,92,255,.32); color: var(--accent-fg, #7C5CFF); }
.fm4-lc-step--cur  .fm4-lc-num { background: var(--accent, #7C5CFF); color: #fff; }
.fm4-lc-step--cur  .fm4-lc-label { color: var(--accent-fg, #7C5CFF); font-weight: 700; }
.fm4-lc-line { height: 2px; background: var(--surface-7); margin-top: -14px; }
.fm4-lc-line--done { background: var(--accent, #7C5CFF); }

/* 카드 액션 4개 */
.fm4-card-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--surface-5);
  padding-top: 8px;
  margin-top: 4px;
}
.fm4-action {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none;
  color: var(--text-3, #B5B5D2);
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  padding: 4px 0;
}
.fm4-action:hover { color: var(--text-bright); }
.fm4-action-icon { font-size: 14px; }
.fm4-action-label { font-size: 11px; }
.fm4-action--danger:hover { color: var(--danger, #FF5E5E); }

/* 빈 상태 + 카운트 푸터 */
.fm4-empty {
  text-align: center;
  color: var(--text-4, #8A8AB3);
  padding: 48px 16px;
  font-size: 13px;
  background: var(--surface-1);
  border-radius: 12px;
  line-height: 1.6;
}
.fm4-footer-count {
  text-align: center;
  font-size: 12px;
  color: var(--text-4, #8A8AB3);
  padding: 8px 0 4px;
}

/* ========================================
   Step 143: agency list mobile (alm)
   ======================================== */
.alm-shell { display: flex; flex-direction: column; gap: 14px; }
.alm-title { font-size: 22px; font-weight: 800; color: var(--text-1); margin: 4px 0 0; letter-spacing: 0; }
.alm-crumbs { font-size: 12px; color: var(--text-4); }
.alm-subtitle { font-size: 12px; color: var(--text-3); margin: 0 0 4px; line-height: 1.5; }
.alm-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.alm-kpi-card {
  position: relative;
  min-height: 112px;
  padding: 38px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.alm-kpi-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}
.alm-kpi-icon--violet { background: var(--accent-soft); color: var(--accent-fg); }
.alm-kpi-icon--blue { background: var(--info-soft); color: var(--info); }
.alm-kpi-label { font-size: 10px; color: var(--text-4); line-height: 1.35; }
.alm-kpi-value { font-size: 18px; font-weight: 800; color: var(--accent-fg); line-height: 1.15; }
.alm-kpi-sub { font-size: 10px; color: var(--text-4); line-height: 1.35; }
.alm-search {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  padding: 10px 14px 10px 48px;
}
.alm-search-icon { position: absolute; left: 14px; top: 10px; font-size: 12px; color: var(--text-4); }
.alm-search-input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text-1); font-size: 13px; }
.alm-search-input::placeholder { color: var(--text-4); }
.alm-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.alm-chips::-webkit-scrollbar { display: none; }
.alm-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
}
.alm-chip--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.alm-chip-count { font-size: 11px; font-weight: 800; opacity: .9; }
.alm-sort-row { display: flex; flex-direction: column; gap: 7px; }
.alm-sort-active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 9px 12px;
  color: var(--text-1);
  font-size: 12px;
}
.alm-sort-others { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.alm-sort-other-label { font-size: 11px; color: var(--text-4); }
.alm-sort-other {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-3);
  padding: 6px 10px;
  font-size: 11px;
}
.alm-list { display: flex; flex-direction: column; gap: 9px; }
.alm-card {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-card);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  cursor: pointer;
}
.alm-card-top { display: flex; align-items: center; gap: 8px; }
.alm-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}
.alm-card-headline { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.alm-card-name { color: var(--text-1); font-size: 14px; font-weight: 800; line-height: 1.35; word-break: keep-all; }
.alm-card-detail-link { color: var(--text-4); font-size: 11px; text-decoration: none; flex: 0 0 auto; }
.alm-type-badge { border-radius: 5px; padding: 3px 6px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.alm-type-badge--public { background: var(--info-soft); color: var(--info); }
.alm-type-badge--edu { background: var(--success-soft); color: var(--success); }
.alm-type-badge--research { background: var(--accent-soft); color: var(--accent-fg); }
.alm-type-badge--other { background: var(--bg-input); color: var(--text-3); }
.alm-domain-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.alm-domain-chip {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 7px;
  color: var(--text-3);
  background: var(--bg-input);
  font-size: 10px;
  line-height: 1.2;
}
.alm-card-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-top: 1px solid var(--border); padding-top: 9px; }
.alm-card-col { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alm-card-col-label { color: var(--text-4); font-size: 10px; line-height: 1.3; }
.alm-card-col-value { color: var(--text-1); font-size: 13px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.alm-card-col-value--accent { color: var(--accent-fg); }
.alm-empty {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 46px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.alm-empty-icon { color: var(--text-4); font-size: 13px; }
.alm-empty-title { margin: 0; color: var(--text-1); font-size: 15px; font-weight: 800; }
.alm-empty-sub { margin: 0; color: var(--text-4); font-size: 12px; }
.alm-empty-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 22px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }

/* ========================================
   Step 143: agency detail mobile (adm)
   ======================================== */
.adm-shell { display: flex; flex-direction: column; gap: 14px; }
.adm-header {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.adm-header-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-crumbs { color: var(--text-4); font-size: 12px; }
.adm-title { margin: 0; color: var(--text-1); font-size: 18px; font-weight: 800; line-height: 1.35; word-break: keep-all; }
.adm-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--text-4); font-size: 11px; }
.adm-header-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.adm-icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-input);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-decoration: none;
}
.adm-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.adm-kpi-card {
  position: relative;
  min-height: 82px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-card);
  padding: 12px 10px 12px 44px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.adm-kpi-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.adm-kpi-icon--violet { background: var(--accent-soft); color: var(--accent-fg); }
.adm-kpi-icon--blue { background: var(--info-soft); color: var(--info); }
.adm-kpi-icon--green { background: var(--success-soft); color: var(--success); }
.adm-kpi-icon--amber { background: var(--warning-soft); color: var(--warning); }
.adm-kpi-label { color: var(--text-4); font-size: 11px; line-height: 1.35; }
.adm-kpi-value { color: var(--text-1); font-size: 18px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.adm-kpi-sub { color: var(--text-4); font-size: 10px; line-height: 1.35; }
.adm-kpi-sub--up { color: var(--success); }
.adm-kpi-sub--down { color: var(--danger); }
.adm-kpi-card.adm-kpi-card--pending,
.ad5-kpi.ad5-kpi--pending {
  opacity: .7;
}
.adm-kpi-value.adm-kpi-value--pending,
.ad5-kpi-value.ad5-kpi-value--pending {
  color: var(--text-3);
  font-weight: 600;
}
.adm-kpi-sub.adm-kpi-sub--pending,
.ad5-kpi-sub.ad5-kpi-sub--pending {
  color: var(--text-3);
  font-size: 11px;
  font-style: italic;
}
.adm-section {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.adm-section-head { display: flex; align-items: center; gap: 8px; }
.adm-section-title { flex: 1; color: var(--text-1); font-size: 14px; font-weight: 800; }
.adm-section-meta { color: var(--text-4); font-size: 11px; font-weight: 500; }
.adm-more-link { color: var(--text-4); font-size: 12px; text-decoration: none; }
.adm-premium-badge { border-radius: 5px; padding: 3px 8px; background: var(--warning-soft); color: var(--warning); font-size: 10px; font-weight: 800; }
.adm-progress-list { display: flex; flex-direction: column; gap: 10px; }
.adm-progress-row { display: grid; grid-template-columns: 92px 1fr 50px; gap: 8px; align-items: center; }
.adm-progress-label { color: var(--text-3); font-size: 12px; }
.adm-progress-bar { height: 7px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.adm-progress-fill { display: block; height: 100%; border-radius: 999px; }
.adm-progress-fill--green { background: var(--success); }
.adm-progress-fill--blue { background: var(--info); }
.adm-progress-fill--amber { background: var(--warning); }
.adm-progress-fill--red { background: var(--danger); }
.adm-progress-value { color: var(--text-1); font-size: 12px; text-align: right; }
.adm-premium-stub {
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-input);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.adm-premium-stub-icon { color: var(--text-4); font-size: 12px; }
.adm-premium-stub-text { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.65; }
.adm-yearly-empty,
.adm-recent-empty { color: var(--text-4); font-size: 12px; text-align: center; padding: 18px 0; }
.adm-yearly-chart { padding: 6px 0 0; }
.adm-bars { height: 132px; display: flex; align-items: flex-end; gap: 12px; }
.adm-bar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.adm-bar-value { color: var(--text-3); font-size: 10px; }
.adm-bar { width: 100%; max-width: 48px; min-height: 8px; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.adm-bar-label { color: var(--text-4); font-size: 10px; }
.adm-recent-list { display: flex; flex-direction: column; gap: 7px; }
.adm-recent-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 52px 58px;
  gap: 6px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
.adm-recent-row:last-child { border-bottom: 0; }
.adm-recent-badge { border-radius: 5px; padding: 3px 5px; font-size: 10px; font-weight: 800; text-align: center; white-space: nowrap; }
.adm-recent-badge--prespec { background: var(--accent-soft); color: var(--accent-fg); }
.adm-recent-badge--bid { background: var(--info-soft); color: var(--info); }
.adm-recent-badge--award { background: var(--success-soft); color: var(--success); }
.adm-recent-badge--contract { background: var(--warning-soft); color: var(--warning); }
.adm-recent-title { min-width: 0; color: var(--text-1); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-recent-budget,
.adm-recent-date { color: var(--text-4); font-size: 11px; text-align: right; white-space: nowrap; }

/* ========================================
   §8.17 사업자 목록 모바일 (vlm)
   Step 144 (2026-06-21)
   ======================================== */
.vlm-shell { display: flex; flex-direction: column; gap: 14px; }
.vlm-crumbs { color: var(--text-4); font-size: 12px; }
.vlm-title { margin: 4px 0 0; color: var(--text-1); font-size: 22px; font-weight: 800; letter-spacing: 0; }
.vlm-subtitle { margin: 0 0 4px; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.vlm-kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vlm-kpi-card {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 38px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vlm-kpi-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}
.vlm-kpi-icon--violet { background: var(--accent-soft); color: var(--accent-fg); }
.vlm-kpi-icon--blue { background: var(--info-soft); color: var(--info); }
.vlm-kpi-label { color: var(--text-4); font-size: 10px; line-height: 1.35; }
.vlm-kpi-value { color: var(--accent-fg); font-size: 18px; font-weight: 800; line-height: 1.15; }
.vlm-kpi-sub { color: var(--text-4); font-size: 10px; line-height: 1.35; }
.vlm-search {
  position: relative;
  padding: 10px 14px 10px 46px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}
.vlm-search-icon { position: absolute; left: 14px; top: 10px; color: var(--text-4); font-size: 12px; }
.vlm-search-input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text-1); font-size: 13px; }
.vlm-search-input::placeholder { color: var(--text-4); }
.vlm-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.vlm-chips::-webkit-scrollbar { display: none; }
.vlm-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
}
.vlm-chip--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.vlm-chip-count { font-size: 11px; font-weight: 800; opacity: .9; }
.vlm-sort-row {
  position: relative;
}
.vlm-sort-trigger {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.vlm-sort-trigger #vlmSortLabel {
  flex: 1;
  text-align: left;
  color: var(--accent-fg);
}
.vlm-sort-caret {
  color: var(--text-3);
  font-size: 12px;
  transition: transform .15s ease;
}
.vlm-sort-trigger[aria-expanded="true"] .vlm-sort-caret {
  transform: rotate(180deg);
}
.vlm-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .32);
  list-style: none;
}
.vlm-sort-option {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
}
.vlm-sort-option:hover {
  background: var(--surface-3);
}
.vlm-sort-option--active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-weight: 700;
}
.vlm-list { display: flex; flex-direction: column; gap: 9px; }
.vlm-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.vlm-card-top { display: flex; align-items: center; gap: 8px; }
.vlm-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}
.vlm-card-name { flex: 1; min-width: 0; color: var(--text-1); font-size: 14px; font-weight: 800; line-height: 1.35; word-break: keep-all; }
.vlm-card-last { color: var(--text-4); font-size: 11px; white-space: nowrap; }
.vlm-card-detail { align-self: flex-end; color: var(--text-4); font-size: 11px; text-decoration: none; }
.vlm-domain-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.vlm-domain-chip { border-radius: 5px; padding: 3px 7px; font-size: 10px; font-weight: 800; }
.vlm-domain-chip--violet { background: var(--accent-soft); color: var(--accent-fg); }
.vlm-domain-chip--green { background: var(--success-soft); color: var(--success); }
.vlm-domain-chip--blue { background: var(--info-soft); color: var(--info); }
.vlm-domain-chip--amber { background: var(--warning-soft); color: var(--warning); }
.vlm-domain-chip--slate { background: var(--bg-input); color: var(--text-3); }
.vlm-card-body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; border-top: 1px solid var(--border); padding-top: 9px; }
.vlm-card-col { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vlm-card-col-label { color: var(--text-4); font-size: 10px; line-height: 1.3; }
.vlm-card-col-value { color: var(--text-1); font-size: 13px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.vlm-card-col-value--accent { color: var(--accent-fg); }
.vlm-empty {
  min-height: 220px;
  padding: 46px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.vlm-empty-icon { color: var(--text-4); font-size: 13px; }
.vlm-empty-title { margin: 0; color: var(--text-1); font-size: 15px; font-weight: 800; }
.vlm-empty-sub { margin: 0; color: var(--text-4); font-size: 12px; }
.vlm-empty-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 22px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }

/* ========================================
   §8.18 사업자 상세 모바일 (vdm)
   Step 144 (2026-06-21)
   ======================================== */
.vdm-shell { display: flex; flex-direction: column; gap: 14px; }
.vdm-header { display: flex; gap: 12px; align-items: flex-start; }
.vdm-header-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vdm-crumbs { color: var(--text-4); font-size: 12px; }
.vdm-title { margin: 0; color: var(--text-1); font-size: 20px; font-weight: 800; line-height: 1.35; word-break: keep-all; }
.vdm-bizno { color: var(--text-4); font-size: 11px; }
.vdm-subtitle { margin: 2px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.55; word-break: keep-all; }
.vdm-header-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.vdm-icon-btn {
  min-width: 44px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}
.vdm-trait-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vdm-trait-chip { border-radius: 6px; padding: 4px 9px; font-size: 11px; font-weight: 800; }
.vdm-trait-chip--violet { background: var(--accent-soft); color: var(--accent-fg); }
.vdm-trait-chip--green { background: var(--success-soft); color: var(--success); }
.vdm-trait-chip--blue { background: var(--info-soft); color: var(--info); }
.vdm-trait-chip--amber { background: var(--warning-soft); color: var(--warning); }
.vdm-trait-chip--teal { background: rgba(20,184,166,.18); color: #2DD4BF; }
.vdm-trait-chip--rose { background: var(--danger-soft); color: var(--danger); }
.vdm-trait-chip--slate,
.vdm-trait-chip--date { background: var(--bg-input); color: var(--text-3); }
.vdm-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vdm-kpi-card {
  position: relative;
  min-width: 0;
  min-height: 84px;
  padding: 12px 10px 12px 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vdm-kpi-icon {
  position: absolute;
  top: 12px;
  left: 10px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.vdm-kpi-icon--violet { background: var(--accent-soft); color: var(--accent-fg); }
.vdm-kpi-icon--blue { background: var(--info-soft); color: var(--info); }
.vdm-kpi-icon--green { background: var(--success-soft); color: var(--success); }
.vdm-kpi-icon--amber { background: var(--warning-soft); color: var(--warning); }
.vdm-kpi-label { color: var(--text-4); font-size: 10px; line-height: 1.35; }
.vdm-kpi-value { color: var(--text-1); font-size: 16px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.vdm-section {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vdm-section-head { display: flex; align-items: center; gap: 8px; }
.vdm-section-title { flex: 1; color: var(--text-1); font-size: 14px; font-weight: 800; }
.vdm-section-meta { color: var(--text-4); font-size: 11px; font-weight: 500; }
.vdm-more-link { color: var(--text-4); font-size: 12px; text-decoration: none; }
.vdm-premium-badge { border-radius: 5px; padding: 3px 8px; background: var(--warning-soft); color: var(--warning); font-size: 10px; font-weight: 800; }
.vdm-premium-stub,
.vdm-sales-stub {
  padding: 24px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.vdm-stub-icon { color: var(--text-4); font-size: 12px; }
.vdm-stub-text { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.65; text-align: center; }
.vdm-yearly-empty,
.vdm-recent-empty { color: var(--text-4); font-size: 12px; text-align: center; padding: 18px 0; }
.vdm-yearly-chart { padding: 6px 0 0; }
.vdm-bars { min-height: 142px; display: flex; align-items: flex-end; gap: 12px; }
.vdm-bar-col { flex: 1; min-width: 0; min-height: 142px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.vdm-bar-amount { color: var(--accent-fg); font-size: 10px; font-weight: 800; white-space: nowrap; }
.vdm-bar { width: 100%; max-width: 46px; min-height: 8px; border-radius: 6px 6px 2px 2px; background: var(--info); }
.vdm-bar-count { color: var(--text-1); font-size: 10px; font-weight: 700; }
.vdm-bar-label { color: var(--text-4); font-size: 10px; }
.vdm-dom-kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vdm-dom-kpi {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  background: var(--accent-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vdm-dom-kpi--green { border-color: rgba(34,197,94,.24); background: var(--success-soft); }
.vdm-dom-kpi-label { color: var(--text-3); font-size: 10px; line-height: 1.35; }
.vdm-dom-kpi-value { color: var(--text-1); font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.vdm-table-wrap { overflow-x: auto; }
.vdm-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.vdm-table th,
.vdm-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 11px; word-break: keep-all; }
.vdm-table th { color: var(--text-4); font-weight: 600; text-align: left; white-space: nowrap; }
.vdm-table td { color: var(--text-1); }
.vdm-recent-tabs { display: flex; gap: 6px; }
.vdm-recent-tab {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
}
.vdm-recent-tab--active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-fg); font-weight: 800; }
.vdm-recent-title-cell { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdm-recent-type { color: var(--accent-fg); font-size: 10px; font-weight: 800; }
.vdm-donut-wrap { display: flex; gap: 16px; align-items: center; }
.vdm-donut { flex: 0 0 auto; width: 120px; height: 120px; }
.vdm-donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.vdm-donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.vdm-donut-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.vdm-donut-dot--violet { background: var(--accent); }
.vdm-donut-dot--green { background: var(--success); }
.vdm-donut-dot--blue { background: var(--info); }
.vdm-donut-dot--amber { background: var(--warning); }
.vdm-donut-dot--slate { background: var(--text-4); }
.vdm-donut-name { flex: 1; min-width: 0; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdm-donut-pct { color: var(--text-3); font-weight: 800; }

/* ========================================
   §8.19 사업분석 모바일 (pdm)
   Step 145 (2026-06-21)
   ======================================== */
.pdm-shell { display: flex; flex-direction: column; gap: 14px; }
.pdm-page-title-row { display: flex; align-items: center; gap: 8px; }
.pdm-back-btn { width: 32px; min-height: 34px; border: 0; background: transparent; color: var(--text-1); font-size: 24px; line-height: 1; cursor: pointer; }
.pdm-page-title { flex: 1; margin: 0; padding-right: 32px; color: var(--text-1); font-size: 15px; font-weight: 800; text-align: center; }
.pdm-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.pdm-tab { min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font-size: 12px; cursor: pointer; }
.pdm-tab--active { background: var(--accent); color: #fff; font-weight: 800; }
.pdm-tab--disabled { opacity: .58; cursor: not-allowed; }
.pdm-section { padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); display: flex; flex-direction: column; gap: 10px; }
.pdm-section-head { display: flex; align-items: center; gap: 8px; }
.pdm-section-title { flex: 1; color: var(--text-1); font-size: 14px; font-weight: 800; }
.pdm-section-meta { color: var(--text-4); font-size: 11px; }
.pdm-section-cta,
.pdm-more-link { color: var(--accent-fg); font-size: 12px; text-decoration: none; }
.pdm-project-head { display: flex; flex-direction: column; gap: 10px; }
.pdm-project-title { margin: 0; color: var(--text-1); font-size: 18px; font-weight: 800; line-height: 1.4; word-break: keep-all; }
.pdm-project-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pdm-action-btn { min-height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); color: var(--text-3); font-size: 11px; cursor: pointer; }
.pdm-action-btn--accent { border-color: rgba(34,197,94,.3); background: var(--success-soft); color: var(--success); font-weight: 800; }
.pdm-project-meta { color: var(--text-4); font-size: 12px; line-height: 1.5; word-break: keep-all; }
.pdm-score-card { padding: 16px; border: 1px solid var(--accent-border); border-radius: 14px; background: var(--accent-soft); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pdm-score-left { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pdm-score-icon { padding: 4px 8px; border-radius: 999px; background: var(--bg-card); color: var(--accent-fg); font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.pdm-score-deadline { color: var(--text-4); font-size: 11px; line-height: 1.4; }
.pdm-score-label { font-size: 22px; font-weight: 900; line-height: 1.2; }
.pdm-score-label--green,
.pdm-score-value--green { color: var(--success); }
.pdm-score-label--amber,
.pdm-score-value--amber { color: var(--warning); }
.pdm-score-label--rose,
.pdm-score-value--rose { color: var(--danger); }
.pdm-score-right { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; }
.pdm-score-name { color: var(--text-4); font-size: 11px; }
.pdm-score-value { font-size: 32px; font-weight: 900; line-height: 1.1; }
.pdm-score-suffix { color: var(--text-4); font-size: 14px; font-weight: 600; }
.pdm-mini-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pdm-mini-kpi { min-width: 0; padding: 8px 5px; border-radius: 10px; background: var(--bg-card); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.pdm-mini-icon { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.pdm-mini-icon--violet { background: var(--accent-soft); color: var(--accent-fg); }
.pdm-mini-icon--blue { background: var(--info-soft); color: var(--info); }
.pdm-mini-icon--green { background: var(--success-soft); color: var(--success); }
.pdm-mini-label { color: var(--text-4); font-size: 9px; line-height: 1.25; }
.pdm-mini-value { color: var(--text-1); font-size: 13px; font-weight: 800; }
.pdm-lifecycle { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items: center; }
.pdm-lc-step { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pdm-lc-num { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-input); color: var(--text-4); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.pdm-lc-label { color: var(--text-4); font-size: 10px; white-space: nowrap; }
.pdm-lc-sub { color: var(--text-4); font-size: 9px; white-space: nowrap; }
.pdm-lc-step--done .pdm-lc-num { background: rgba(124,92,255,.32); color: var(--accent-fg); }
.pdm-lc-step--cur .pdm-lc-num { background: var(--accent); color: #fff; }
.pdm-lc-step--cur .pdm-lc-label,
.pdm-lc-step--cur .pdm-lc-sub { color: var(--accent-fg); font-weight: 800; }
.pdm-lc-line { height: 2px; margin-top: -17px; background: var(--border); }
.pdm-lc-line--done { background: var(--accent); }
.pdm-evidence-list { display: flex; flex-direction: column; gap: 8px; }
.pdm-evidence-row { display: flex; align-items: flex-start; gap: 10px; }
.pdm-evidence-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 12px; font-weight: 800; }
.pdm-evidence-icon--violet { background: var(--accent-soft); color: var(--accent-fg); }
.pdm-evidence-icon--blue { background: var(--info-soft); color: var(--info); }
.pdm-evidence-icon--green { background: var(--success-soft); color: var(--success); }
.pdm-evidence-text { color: var(--text-1); font-size: 13px; line-height: 1.55; word-break: keep-all; }
.pdm-agency-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pdm-agency-kpi { min-width: 0; padding: 10px 7px; border-radius: 10px; background: var(--bg-input); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.pdm-agency-label { color: var(--text-4); font-size: 10px; line-height: 1.3; }
.pdm-agency-value { color: var(--text-1); font-size: 16px; font-weight: 900; overflow-wrap: anywhere; }
.pdm-agency-tag { color: var(--text-3); font-size: 10px; }
.pdm-agency-kpi--rose .pdm-agency-value { color: var(--danger); }
.pdm-compete-rows { display: flex; flex-direction: column; gap: 7px; }
.pdm-compete-row { padding: 7px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.pdm-compete-row:last-child { border-bottom: 0; }
.pdm-compete-label { color: var(--text-3); font-size: 12px; }
.pdm-compete-value { color: var(--text-1); font-size: 12px; text-align: right; }
.pdm-sim-base,
.pdm-sim-meta { margin: 0; color: var(--text-4); font-size: 11px; }
.pdm-sim-label { color: var(--text-3); font-size: 12px; }
.pdm-sim-range { color: var(--success); font-size: 22px; font-weight: 900; }
.pdm-sim-bar { position: relative; height: 10px; margin: 6px 0; }
.pdm-sim-bar-track { position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 999px; background: var(--border); }
.pdm-sim-bar-fill { position: absolute; left: 18%; right: 18%; top: 1px; height: 8px; border: 1px solid var(--success); border-radius: 999px; background: rgba(34,197,94,.28); }
.pdm-sim-empty { color: var(--text-4); font-size: 12px; text-align: center; padding: 14px 0; }
.pdm-table-wrap { overflow-x: auto; }
.pdm-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.pdm-table th,
.pdm-table td { padding: 7px 6px; border-bottom: 1px solid var(--border); color: var(--text-1); font-size: 11px; text-align: left; word-break: keep-all; }
.pdm-table th { color: var(--text-4); font-weight: 600; white-space: nowrap; }
.pdm-table-title-cell { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdm-premium-badge { border-radius: 5px; padding: 3px 8px; background: var(--warning-soft); color: var(--warning); font-size: 10px; font-weight: 800; }
.pdm-premium-stub { padding: 24px 16px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg-input); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pdm-stub-icon { color: var(--text-4); font-size: 12px; }
.pdm-stub-text { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.65; text-align: center; }
.pdm-keyword-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pdm-keyword-chip { padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-3); font-size: 11px; }
.pdm-memo-textarea { width: 100%; min-height: 88px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); color: var(--text-1); font-size: 13px; resize: vertical; box-sizing: border-box; }
.pdm-memo-textarea:focus { outline: 0; border-color: var(--accent); }
.pdm-memo-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pdm-memo-count { color: var(--text-4); font-size: 11px; }
.pdm-memo-save-btn { min-height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.pdm-modal { display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: 16px; }
.pdm-modal--open { display: flex; }
.pdm-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.pdm-modal-content { position: relative; width: 100%; max-width: 360px; max-height: 80vh; overflow-y: auto; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
.pdm-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.pdm-modal-title { margin: 0; color: var(--text-1); font-size: 14px; font-weight: 800; }
.pdm-modal-close { border: 0; background: transparent; color: var(--text-4); font-size: 22px; cursor: pointer; }
.pdm-modal-body { display: flex; flex-direction: column; gap: 8px; }
.pdm-modal-empty { padding: 24px 0; color: var(--text-4); font-size: 12px; text-align: center; }
.pdm-attach-link { display: block; margin-bottom: 6px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-1); font-size: 12px; text-decoration: none; word-break: break-all; }

/* ========================================
   Step 146 — 사업분석 CTA (ndm 모바일 + ndp PC disabled 보강)
   ======================================== */

/* ndm 모바일 CTA */
.ndm-analysis-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--accent, #7C5CFF);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease;
  margin: 12px 0;
}
.ndm-analysis-cta:hover {
  background: #6B47FF;
  color: #fff;
}
.ndm-analysis-cta-icon { font-size: 16px; }
.ndm-analysis-cta-arrow { font-size: 14px; margin-left: 4px; }
.ndm-analysis-cta--disabled {
  background: var(--surface-5);
  color: var(--text-4, #8A8AB3);
  cursor: not-allowed;
}
.ndm-analysis-cta--disabled:hover {
  background: var(--surface-5);
  color: var(--text-4, #8A8AB3);
}

/* ndp PC disabled 보강 (.nd6-btn.disabled 또는 .nd6-btn[disabled]) */
.nd6-btn.disabled,
.nd6-btn[disabled] {
  background: var(--surface-5) !important;
  color: var(--text-4, #8A8AB3) !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Step 147F — alm 정렬 vlm 패턴 통일 */
.alm-sort-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row !important;
}
.alm-sort-btn {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-3, #B5B5D2);
  cursor: pointer;
}
.alm-sort-btn--active {
  background: rgba(124,92,255,.12);
  border-color: rgba(124,92,255,.32);
  color: var(--accent-fg, #7C5CFF);
  font-weight: 700;
}

/* Step 147F — alm "더 보기" 버튼 */
.alm-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.alm-load-more-btn {
  background: rgba(124,92,255,.10);
  border: 1px solid rgba(124,92,255,.32);
  color: var(--accent-fg, #7C5CFF);
  border-radius: 12px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.alm-load-more-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Step 147F — adm 자체 헤더 제거 후 본문 정보 카드 */
.adm-info-section {
  background: var(--surface-3);
  border: 1px solid var(--surface-7);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adm-crumbs { font-size: 12px; color: var(--text-4, #8A8AB3); }

/* Step 148F — pdm PC 라이프사이클 단계별 원문 링크 */
.pd6-step-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--accent-fg, #7C5CFF);
  text-decoration: none;
}
.pd6-step-link:hover { text-decoration: underline; }
.pd6-step-link--disabled {
  color: var(--text-4, #8A8AB3);
  cursor: not-allowed;
  text-decoration: none;
}

/* Step 148F — pdm 모바일 라이프사이클 단계별 원문 링크 */
.pdm-lc-link {
  display: inline-block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--accent-fg, #7C5CFF);
  text-decoration: none;
  white-space: nowrap;
}
.pdm-lc-link:hover { text-decoration: underline; }

/* Step 156: 전역 화면이동 프로그레스 바 */
.ps-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 99999;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ps-progress.is-loading {
  opacity: 1;
}
.ps-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-purple, #7c5cff), var(--accent-blue, #4691ff), var(--accent-purple, #7c5cff));
  background-size: 200% 100%;
  transition: width 0.25s ease;
  box-shadow: 0 0 8px rgba(124, 92, 255, 0.5);
}
.ps-progress.is-loading .ps-progress__fill {
  animation: psProgressShimmer 1.2s linear infinite;
}
@keyframes psProgressShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 전역 차단형 로딩 오버레이 — 클릭 통과 금지(pointer-events:none 쓰지 말 것) */
.ps-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000; /* .ps-progress(99999)보다 위 */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 26, 0.42);
  cursor: wait;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ps-loading-overlay.is-visible {
  display: flex;
}
[data-theme="dark"] .ps-loading-overlay {
  background: rgba(0, 0, 0, 0.55);
}
.ps-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 28px 18px;
  border-radius: 16px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, rgba(124, 92, 255, 0.18));
  box-shadow: 0 12px 40px rgba(15, 17, 26, 0.18), 0 0 0 1px rgba(124, 92, 255, 0.06);
  min-width: 132px;
}
[data-theme="dark"] .ps-loading-card {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 24px rgba(124, 92, 255, 0.12);
}
.ps-loading-spinner {
  position: relative;
  width: 48px;
  height: 48px;
}
.ps-loading-svg {
  display: block;
  width: 48px;
  height: 48px;
  animation: psLoadingSpin 0.9s linear infinite;
}
.ps-loading-ring {
  stroke-linecap: round;
  transform-origin: 24px 24px;
}
.ps-loading-ring--track {
  stroke: var(--accent-soft, rgba(124, 92, 255, 0.18));
}
.ps-loading-ring--arc {
  stroke: var(--accent-fg, #7C5CFF);
  stroke-dasharray: 40 80;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px rgba(124, 92, 255, 0.45));
}
.ps-loading-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent, #7C5CFF);
  box-shadow: 0 0 10px rgba(124, 92, 255, 0.55);
  animation: psLoadingPulse 1.1s ease-in-out infinite;
}
.ps-loading-label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-3, #6b7280);
  white-space: nowrap;
}
@keyframes psLoadingSpin {
  to { transform: rotate(360deg); }
}
@keyframes psLoadingPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* Step 163: 영업가치 인사이트 카드 */
.nd6-sales-insight__title { display: flex; align-items: center; gap: 8px; }
.nd6-sales-insight__body p { margin: 0; line-height: 1.6; }

.nd6-sales-insight--warning { border-left: 4px solid var(--rose, #ef4f6b); }
.nd6-sales-insight--warning .nd6-sales-insight__title { color: var(--rose, #ef4f6b); }

.nd6-sales-insight--positive { border-left: 4px solid var(--green, #3cc882); }
.nd6-sales-insight--positive .nd6-sales-insight__title { color: var(--green, #3cc882); }

.nd6-sales-insight--neutral { border-left: 4px solid var(--amber, #ffa546); }
.nd6-sales-insight--neutral .nd6-sales-insight__title { color: var(--amber, #ffa546); }

.nd6-sales-insight--unknown { border-left: 4px solid var(--line-2, #2a3a5c); }

/* Step 163: 기본정보 표 인라인 배지 */
.nd6-method-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.nd6-method-badge--warning  { background: rgba(239, 79, 107, 0.15); color: var(--rose, #ef4f6b); }
.nd6-method-badge--positive { background: rgba(60, 200, 130, 0.15); color: var(--green, #3cc882); }
.nd6-method-badge--neutral  { background: rgba(255, 165, 70, 0.15); color: var(--amber, #ffa546); }

/* Step 164: 영업가치 인사이트 카드 (모바일) */
.ndm-sales-insight { padding: 14px 16px; }
.ndm-sales-insight__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.ndm-sales-insight__body p {
  margin: 0;
  line-height: 1.55;
  font-size: 13px;
  color: var(--text-2, #b9c5dc);
}

.ndm-sales-insight--warning  { border-left: 4px solid var(--rose, #ef4f6b); }
.ndm-sales-insight--warning  .ndm-sales-insight__title { color: var(--rose, #ef4f6b); }

.ndm-sales-insight--positive { border-left: 4px solid var(--green, #3cc882); }
.ndm-sales-insight--positive .ndm-sales-insight__title { color: var(--green, #3cc882); }

.ndm-sales-insight--neutral  { border-left: 4px solid var(--amber, #ffa546); }
.ndm-sales-insight--neutral  .ndm-sales-insight__title { color: var(--amber, #ffa546); }

.ndm-sales-insight--unknown  { border-left: 4px solid var(--line-2, #2a3a5c); }

/* Step 168: PC 발주 이력 카드 */
.nd6-recurring__signal {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.nd6-recurring__signal--warning  { background: rgba(239, 79, 107, 0.12); color: var(--rose, #ef4f6b); border-left: 3px solid var(--rose, #ef4f6b); }
.nd6-recurring__signal--neutral  { background: rgba(255, 165, 70, 0.12); color: var(--amber, #ffa546); border-left: 3px solid var(--amber, #ffa546); }
.nd6-recurring__signal--positive { background: rgba(60, 200, 130, 0.12); color: var(--green, #3cc882); border-left: 3px solid var(--green, #3cc882); }

.nd6-recurring__table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.nd6-recurring__table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-3, #7a89aa);
  font-weight: 600;
  border-bottom: 1px solid var(--line-2, #2a3a5c);
}
.nd6-recurring__table td {
  padding: 10px;
  border-bottom: 1px solid var(--line-2, #2a3a5c);
  color: var(--text-bright);
  word-break: keep-all;
}
.nd6-recurring__table th:nth-child(1), .nd6-recurring__table td:nth-child(1) { width: 56px; }
.nd6-recurring__table th:nth-child(2), .nd6-recurring__table td:nth-child(2) { width: 86px; }
.nd6-recurring__table th:nth-child(3), .nd6-recurring__table td:nth-child(3) { width: 116px; overflow-wrap: anywhere; }
.nd6-recurring__table th:nth-child(4), .nd6-recurring__table td:nth-child(4) { overflow-wrap: anywhere; }
.nd6-recurring__table th:nth-child(5), .nd6-recurring__table td:nth-child(5) { width: 120px; }
.nd6-recurring__table th:nth-child(6), .nd6-recurring__table td:nth-child(6) { width: 96px; }
.nd6-recurring__row { cursor: pointer; transition: background 0.15s ease; }
.nd6-recurring__row:hover { background: var(--surface-2, #1a2540); }

/* Step 200: PC 연관 공고(차수) 카드 */
.nd6-related-ord__table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.nd6-related-ord__table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-3, #7a89aa);
  font-weight: 600;
  border-bottom: 1px solid var(--line-2, #2a3a5c);
}
.nd6-related-ord__table td {
  padding: 10px;
  border-bottom: 1px solid var(--line-2, #2a3a5c);
  color: var(--text-bright);
  word-break: keep-all;
}
.nd6-related-ord__row { cursor: pointer; transition: background 0.15s ease; }
.nd6-related-ord__row:hover { background: var(--surface-2, #1a2540); }

.nd6-recurring__phase {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.nd6-recurring__phase--pre_spec { background: rgba(124, 92, 255, 0.15); color: var(--purple, #7c5cff); }
.nd6-recurring__phase--bid      { background: rgba(70, 145, 255, 0.15); color: var(--blue, #4691ff); }
.nd6-recurring__phase--award    { background: rgba(255, 165, 70, 0.15); color: var(--amber, #ffa546); }
.nd6-recurring__phase--contract { background: rgba(60, 200, 130, 0.15); color: var(--green, #3cc882); }
.nd6-recurring__phase--unknown  { background: var(--surface-2, #1a2540); color: var(--text-3, #7a89aa); }

/* Step 168: 모바일 발주 이력 카드 */
.ndm-recurring__count {
  float: right;
  color: var(--text-3, #7a89aa);
  font-size: 12px;
  font-weight: 500;
}
.ndm-recurring__signal {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}
.ndm-recurring__signal--warning  { background: rgba(239, 79, 107, 0.12); color: var(--rose, #ef4f6b); }
.ndm-recurring__signal--neutral  { background: rgba(255, 165, 70, 0.12); color: var(--amber, #ffa546); }
.ndm-recurring__signal--positive { background: rgba(60, 200, 130, 0.12); color: var(--green, #3cc882); }

.ndm-recurring__list { display: flex; flex-direction: column; gap: 8px; }
.ndm-recurring__item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2, #1a2540);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line-2, #2a3a5c);
}
.ndm-recurring__item-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  min-width: 0;
}
.ndm-recurring__year { flex: 0 0 auto; font-weight: 700; font-size: 14px; color: var(--text-bright); }
.ndm-recurring__phase {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-1, #0f1a2e);
  color: var(--text-2, #b9c5dc);
}
.ndm-recurring__amount {
  margin-left: auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-2, #b9c5dc);
  overflow-wrap: anywhere;
  text-align: right;
}
.ndm-recurring__item-body {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3, #7a89aa);
}
.ndm-recurring__winner {
  min-width: 0;
  font-weight: 600;
  color: var(--text-2, #b9c5dc);
  overflow-wrap: anywhere;
}
.ndm-recurring__date { flex: 0 0 auto; }

/* Step 200: 모바일 연관 공고(차수) 카드 */
.ndm-related-ord__count {
  float: right;
  color: var(--text-3, #7a89aa);
  font-size: 12px;
  font-weight: 500;
}
.ndm-related-ord__list { display: flex; flex-direction: column; gap: 8px; }
.ndm-related-ord__item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2, #1a2540);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line-2, #2a3a5c);
}
.ndm-related-ord__label {
  min-width: 0;
  font-weight: 600;
  color: var(--text-2, #b9c5dc);
  overflow-wrap: anywhere;
}
.ndm-related-ord__date { float: right; color: var(--text-3, #7a89aa); }

/* Step 202/361: 공고상세 단계 필드 + BID 차수 탭 (단계는 라이프사이클 노드 안) */
.nd6-stage-card {
  margin-bottom: 16px;
  scroll-margin-top: 70px;
}
/* Step 361: 라이프사이클에 접힌 단계 노드 */
.nd6-lc-nodes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-7);
}
.nd6-lc-node {
  padding: 14px 16px;
  border: 1px solid var(--surface-7);
  border-radius: 12px;
  background: var(--surface-2, var(--surface-3));
  scroll-margin-top: 70px;
}
.nd6-lc-node__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.nd6-lc-node__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.nd6-lc-node__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
}
.nd6-lc-node__date {
  font-size: 12px;
  color: var(--text-3);
}
.nd6-lc-node__source {
  flex: 0 0 auto;
  text-decoration: none;
}
.nd6-lc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}
.nd6-lc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--surface-7);
  background: var(--surface-3);
  color: var(--text-2);
}
.nd6-lc-badge--down {
  color: var(--danger);
  border-color: var(--surface-7);
  background: var(--surface-3);
}
.nd6-lc-badge--up {
  color: var(--success, var(--accent-fg));
  border-color: var(--surface-7);
  background: var(--surface-3);
}
.nd6-lc-badge--neutral {
  color: var(--accent-fg, var(--accent));
  border-color: var(--surface-7);
  background: var(--accent-soft, var(--surface-3));
}
.nd6-lc-node__gap {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--surface-7);
}
.nd6-lc-days {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
}
.nd6-body-empty {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.65;
}
.nd6-body-empty p { margin: 0; }
.nd6-body-empty strong { color: var(--text-2); font-weight: 700; }
.nd6-attach-card { scroll-margin-top: 70px; }
.nd6-stage-body { display: flex; flex-direction: column; gap: 10px; }
.nd6-stage-field { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.nd6-stage-field__label { color: var(--text-3); }
.nd6-stage-field__value {
  min-width: 0;
  color: var(--text-1, var(--text));
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.nd6-stage-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.nd6-stage-tab {
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.nd6-stage-tab--active { background: var(--accent); color: var(--sub); border-color: var(--accent); }
.nd6-stage-panel--hidden { display: none; }
.nd6-stage-action { align-self: flex-end; margin-top: 4px; }

.ndm-stage-card { scroll-margin-top: 64px; }
.ndm-stage-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.ndm-stage-head .ndm-card__title { margin-bottom: 2px; }
.ndm-stage-date { color: var(--text-3); font-size: 12px; }
.ndm-stage-body { display: flex; flex-direction: column; gap: 10px; }
.ndm-stage-field { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ndm-stage-field__label { flex: 0 0 auto; color: var(--text-3); }
.ndm-stage-field__value {
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.ndm-stage-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.ndm-stage-tab {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ndm-stage-tab--active { background: var(--accent); color: var(--sub); border-color: var(--accent); }
.ndm-stage-panel--hidden { display: none; }
.ndm-stage-action { width: fit-content; text-decoration: none; }
.ndm-stage-body > .ndm-stage-action { align-self: flex-end; margin-top: 4px; }

/* Step 166: PC stepper navigation */
.nd6-step-link { display: block; text-decoration: none; color: inherit; }
.nd6-step-link--clickable { cursor: pointer; }
.nd6-step-link--clickable:hover .nd6-step { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 92, 255, 0.15); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.nd6-step-link--current { cursor: default; pointer-events: none; }
.nd6-step-link--current .nd6-step { outline: 2px solid var(--accent, #7c5cff); outline-offset: -2px; }
.nd6-step-link--disabled { cursor: not-allowed; pointer-events: none; }
.nd6-step-link--disabled .nd6-step { opacity: 0.55; }

/* Step 166: 모바일 stepper navigation */
.ndm-step-h-link { display: inline-flex; text-decoration: none; }
.ndm-step-h-link--clickable { cursor: pointer; }
.ndm-step-h-link--clickable:active .ndm-step-h__dot { transform: scale(1.15); }
.ndm-step-h-link--current { cursor: default; pointer-events: none; }
.ndm-step-h-link--current .ndm-step-h__dot { box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.3); }
.ndm-step-h-link--disabled { cursor: not-allowed; pointer-events: none; }
.ndm-step-h-link--disabled .ndm-step-h__dot { opacity: 0.45; }

/* Step 167: PC 라이프사이클 가로 컴팩트 stepper */
.nd6-lifecycle-h { margin-bottom: 16px; }

/* Step 282-1: BID 공고 상세 연속 트랙 진행 상태바 */
.nd6-bidprog-card { margin-bottom: 16px; }
.nd6-bidprog-head { padding-bottom: 0; }
.nd6-bidprog-stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; width: 100%; padding: 7px 14px 2px; }
.nd6-bidprog-stepper::before { position: absolute; z-index: 0; top: 15px; right: calc(8.333% + 14px); left: calc(8.333% + 14px); height: 2px; border-radius: 2px; background: var(--line-2, #2a3a5c); content: ''; }
.nd6-bidprog-step { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: center; text-align: center; }
.nd6-bidprog-step:not(:last-child)::after { position: absolute; z-index: -1; top: 8px; left: 50%; width: 100%; height: 2px; background: var(--accent, #7c5cff); content: ''; }
.nd6-bidprog-step:not(.is-done)::after { display: none; }
.nd6-bidprog-step__dot { width: 16px; height: 16px; box-sizing: border-box; border: 3px solid var(--line-2, #2a3a5c); border-radius: 50%; background: var(--surface-2, #1a2540); }
.nd6-bidprog-step__text { display: flex; min-width: 0; flex-direction: column; gap: 2px; margin-top: 9px; }
.nd6-bidprog-step__label { color: var(--text-3, #7a89aa); font-size: 12px; font-weight: 600; white-space: nowrap; }
.nd6-bidprog-step__date { color: var(--text-3, #7a89aa); font-size: 10px; white-space: nowrap; }
.nd6-bidprog-step.is-done .nd6-bidprog-step__dot { border-color: var(--accent, #7c5cff); background: var(--accent, #7c5cff); }
.nd6-bidprog-step.is-done .nd6-bidprog-step__label { color: var(--text-2, #aab6cf); }
.nd6-bidprog-step.is-current .nd6-bidprog-step__dot { width: 30px; height: 30px; margin: -7px; border: 7px solid var(--accent-blue, #4691ff); background: var(--accent-blue, #4691ff); box-shadow: 0 0 0 5px rgba(70, 145, 255, 0.22); }
.nd6-bidprog-step.is-current .nd6-bidprog-step__text { margin-top: 16px; }
.nd6-bidprog-step.is-current .nd6-bidprog-step__label { color: var(--accent-blue, #4691ff); font-weight: 800; }
.nd6-bidprog-step.is-current .nd6-bidprog-step__date { color: var(--text-2, #aab6cf); }

/* Step 282-1: 모바일 BID 공고 상세 연속 트랙 진행 상태바 */
.ndm-bidprog-card { margin-top: 12px; }
.ndm-bidprog-subtitle { margin: 5px 0 12px; color: var(--text-3, #7a89aa); font-size: 11px; }
.ndm-bidprog-stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; width: 100%; padding: 7px 7px 8px; }
.ndm-bidprog-stepper::before { position: absolute; z-index: 0; top: 13px; right: calc(8.333% + 7px); left: calc(8.333% + 7px); height: 2px; border-radius: 2px; background: var(--line-2, #2a3a5c); content: ''; }
.ndm-bidprog-step { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: center; text-align: center; }
.ndm-bidprog-step:not(:last-child)::after { position: absolute; z-index: -1; top: 6px; left: 50%; width: 100%; height: 2px; background: var(--accent, #7c5cff); content: ''; }
.ndm-bidprog-step:not(.is-done)::after { display: none; }
.ndm-bidprog-step__dot { width: 14px; height: 14px; box-sizing: border-box; border: 3px solid var(--line-2, #2a3a5c); border-radius: 50%; background: var(--surface-2, #1a2540); }
.ndm-bidprog-step__label { margin-top: 8px; color: var(--text-3, #7a89aa); font-size: 9px; font-weight: 600; white-space: nowrap; }
.ndm-bidprog-step__date { display: none; margin-top: 2px; color: var(--text-3, #7a89aa); font-size: 9px; white-space: nowrap; }
.ndm-bidprog-step.is-done .ndm-bidprog-step__dot { border-color: var(--accent, #7c5cff); background: var(--accent, #7c5cff); }
.ndm-bidprog-step.is-done .ndm-bidprog-step__label { color: var(--text-2, #aab6cf); }
.ndm-bidprog-step.is-current .ndm-bidprog-step__dot { width: 26px; height: 26px; margin: -6px; border: 6px solid var(--accent-blue, #4691ff); background: var(--accent-blue, #4691ff); box-shadow: 0 0 0 4px rgba(70, 145, 255, 0.22); }
.ndm-bidprog-step.is-current .ndm-bidprog-step__label { margin-top: 14px; color: var(--accent-blue, #4691ff); font-weight: 800; }
.ndm-bidprog-step.is-current .ndm-bidprog-step__date { display: block; color: var(--text-2, #aab6cf); }

.nd6-stepper-h {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

.nd6-step-h-link {
  display: flex;
  text-decoration: none;
  color: inherit;
  flex: 1;
}

.nd6-step-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  width: 100%;
  transition: background 0.15s ease, transform 0.15s ease;
}

.nd6-step-h__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2, #1a2540);
  color: var(--text-3, #7a89aa);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--line-2, #2a3a5c);
}

.nd6-step-h__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nd6-step-h__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-bright);
  white-space: nowrap;
}
.nd6-step-h__meta {
  font-size: 11px;
  color: var(--text-3, #7a89aa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nd6-step-h__line {
  flex: 0 0 32px;
  height: 2px;
  background: var(--line-2, #2a3a5c);
  align-self: center;
}
.nd6-step-h__line.is-active { background: var(--accent, #7c5cff); }

/* 단계별 색 (data-color attribute) */
.nd6-step-h.is-active[data-color="purple"] .nd6-step-h__dot { background: var(--purple, #7c5cff); color: #fff; border-color: var(--purple, #7c5cff); }
.nd6-step-h.is-active[data-color="blue"]   .nd6-step-h__dot { background: var(--blue,   #4691ff); color: #fff; border-color: var(--blue,   #4691ff); }
.nd6-step-h.is-active[data-color="orange"] .nd6-step-h__dot { background: var(--orange, #ffa546); color: #fff; border-color: var(--orange, #ffa546); }
.nd6-step-h.is-active[data-color="green"]  .nd6-step-h__dot { background: var(--green,  #3cc882); color: #fff; border-color: var(--green,  #3cc882); }

.nd6-step-h.is-muted { opacity: 0.55; }

/* navigation 상태 (Step 166 패턴 가로형) */
.nd6-step-h-link--clickable { cursor: pointer; }
.nd6-step-h-link--clickable:hover .nd6-step-h { background: var(--surface-2, #1a2540); transform: translateY(-1px); }

.nd6-step-h-link--current { cursor: default; pointer-events: none; }
.nd6-step-h-link--current .nd6-step-h__dot {
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.25);
}
.nd6-step-h-link--current .nd6-step-h__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nd6-step-h-link--disabled { cursor: not-allowed; pointer-events: none; }
.nd6-step-h-link--disabled .nd6-step-h { opacity: 0.4; }
/* Step 285: 로그인 오픈 전 안내 */
.lg5 .lg5-notice { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--accent-soft); color: var(--text-2); }
.lg5 .lg5-notice strong { display: block; color: var(--text); font-size: 13px; font-weight: 800; }
.lg5 .lg5-notice p { margin: 6px 0 0; font-size: 12px; line-height: 1.55; }

/* Step313: lifecycle hub UI - current sibling highlight */
.nd6-related-ord__row--current {
  background: rgba(48, 144, 255, 0.08);
}
.nd6-related-ord__row--current td {
  font-weight: 650;
}
.ndm-related-ord__item--current {
  background: rgba(48, 144, 255, 0.08);
  border-radius: 8px;
  padding: 8px;
  margin: 0 -4px;
}
.nd6-step-h__meta.is-na,
.nd6-step-h__meta.is-unknown {
  color: var(--text-4);
  font-size: 11px;
}
/* === Step 344-H: light KPI / status pastels → AA fg tokens (dark :root hues untouched) === */
[data-theme="light"] .ag5-kpi--blue .ag5-kpi-value,
[data-theme="light"] .vd5-kpi--blue .vd5-kpi-value,
[data-theme="light"] .nlm-kpi-card--blue .nlm-kpi-value,
[data-theme="light"] .dm4-kpi--blue .dm4-kpi-value {
  color: var(--info-fg);
}
[data-theme="light"] .ag5-kpi--green .ag5-kpi-value,
[data-theme="light"] .vd5-kpi--green .vd5-kpi-value,
[data-theme="light"] .nlm-kpi-card--green .nlm-kpi-value,
[data-theme="light"] .dm4-kpi--green .dm4-kpi-value {
  color: var(--success-fg);
}
[data-theme="light"] .nlm-kpi-card--violet .nlm-kpi-value,
[data-theme="light"] .dm4-kpi--violet .dm4-kpi-value,
[data-theme="light"] .fv6-kpi--priority .fv6-kpi-value {
  color: var(--accent-fg);
}
[data-theme="light"] .dm4-kpi--amber .dm4-kpi-value {
  color: var(--warning-fg);
}
[data-theme="light"] .fv6-kpi--urgent .fv6-kpi-value {
  color: var(--danger-fg);
}
[data-theme="light"] .nt5-chip,
[data-theme="light"] .nm3-chip {
  color: var(--text-2);
  border-color: var(--border);
}
/* === Step 364: 목록 화면 공통 헤더 (ps-page-head) ===
   nf5-hero 시각 규격을 따르되 높이 상한 96px. 메타는 가로 한 줄 + overflow-x 스크롤. */
.ps-page-head {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  max-height: 96px;
  margin: 0 0 14px;
  padding: 12px 18px;
  border: 1px solid var(--line, var(--border));
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(141, 99, 255, .12), rgba(82, 184, 255, .05) 40%, var(--surface-1, var(--bg-card)) 100%),
    var(--surface-1, var(--bg-card));
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .12));
  min-width: 0;
}
.ps-page-head__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ps-page-head__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.25;
  word-break: keep-all;
  min-width: 0;
}
.ps-page-head__aside {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ps-page-head__count {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--bg-card);
}
.ps-page-head__action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ps-page-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  color: var(--text-4);
  font-size: 12px;
  line-height: 1.4;
  scrollbar-width: thin;
}
.ps-page-head__meta > span,
.ps-page-head__meta > a {
  flex-shrink: 0;
}
.ps-page-head__sep {
  display: inline-block;
  margin: 0 8px;
  color: var(--text-4);
  opacity: 0.65;
  flex-shrink: 0;
}
.ps-page-head__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.ps-page-head__action-btn:hover {
  filter: brightness(1.06);
}
.ps-list-count {
  font-size: 14px;
  color: var(--text-3);
  margin-bottom: 14px;
}
.ps-list-count strong {
  color: var(--text-bright, #fff);
  font-weight: 700;
}
/* Step 367-1: 건수+검색 한 줄 배치용 인라인 건수 */
.ps-list-count--inline {
  margin-bottom: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 36px;
}

/* Step 367-1/369: 건수|검색 툴바 (1270px 1행 유지) */
.ag5-list-toolbar,
.vd5-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: nowrap;
  min-width: 0;
}
.ag5-search-bar--toolbar,
.vd5-search-bar--toolbar {
  margin-bottom: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.ag5-search-bar--toolbar .ag5-search-input,
.vd5-search-bar--toolbar .vd5-search-input {
  max-width: 320px;
  width: 100%;
  min-width: 160px;
  height: 36px;
  box-sizing: border-box;
}
.ag5-search-bar--toolbar .ag5-search-btn,
.vd5-search-bar--toolbar .vd5-search-btn {
  height: 36px;
  flex: 0 0 auto;
}

/* Step 369: KPI 3개를 page-head action(우측)에 배치 — 별도 행 제거
   :has()로 해당 2화면만 max-height 완화 (공통 page-head 무수정) */
.ps-page-head:has(.ag5-head-kpi),
.ps-page-head:has(.vd5-head-kpi) {
  max-height: none;
  padding: 10px 16px;
}
.ps-page-head:has(.ag5-head-kpi) .ps-page-head__top,
.ps-page-head:has(.vd5-head-kpi) .ps-page-head__top {
  align-items: center;
  gap: 16px;
}
.ps-page-head:has(.ag5-head-kpi) .ps-page-head__title,
.ps-page-head:has(.vd5-head-kpi) .ps-page-head__title {
  flex: 0 1 auto;
  max-width: 42%;
}
.ps-page-head:has(.ag5-head-kpi) .ps-page-head__aside,
.ps-page-head:has(.vd5-head-kpi) .ps-page-head__aside {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.ps-page-head:has(.ag5-head-kpi) .ps-page-head__action,
.ps-page-head:has(.vd5-head-kpi) .ps-page-head__action {
  min-width: 0;
  max-width: 100%;
}
.ag5-head-kpi,
.vd5-head-kpi {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
.ag5-kpi--head,
.vd5-kpi--head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  min-height: 36px;
  min-width: 0;
  flex: 0 1 auto;
  background: var(--surface, var(--surface-3));
  border: 1px solid var(--surface-6);
  border-radius: 10px;
}
.ag5-kpi--head.ag5-kpi--blue,
.vd5-kpi--head.vd5-kpi--blue {
  border-color: rgba(74, 144, 226, .22);
}
.ag5-kpi--head.ag5-kpi--green,
.vd5-kpi--head.vd5-kpi--green {
  border-color: rgba(0, 200, 120, .22);
}
.ag5-kpi--head .ag5-kpi-label,
.vd5-kpi--head .vd5-kpi-label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-4, #6f839f);
  white-space: nowrap;
}
.ag5-kpi--head .ag5-kpi-value,
.vd5-kpi--head .vd5-kpi-value {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}
.ag5-kpi--head.ag5-kpi--blue .ag5-kpi-value,
.vd5-kpi--head.vd5-kpi--blue .vd5-kpi-value {
  color: var(--blue, #4a90e2);
}
.ag5-kpi--head.ag5-kpi--green .ag5-kpi-value,
.vd5-kpi--head.vd5-kpi--green .vd5-kpi-value {
  color: var(--green, #00c878);
}
/* 1270px: 카드 내부 압축 (개수·순서 유지) */
@media (max-width: 1320px) {
  .ag5-kpi--head,
  .vd5-kpi--head {
    padding: 5px 8px;
    gap: 6px;
  }
  .ag5-kpi--head .ag5-kpi-label,
  .vd5-kpi--head .vd5-kpi-label {
    font-size: 10px;
  }
  .ag5-kpi--head .ag5-kpi-value,
  .vd5-kpi--head .vd5-kpi-value {
    font-size: 13px;
  }
  .ps-page-head:has(.ag5-head-kpi) .ps-page-head__title,
  .ps-page-head:has(.vd5-head-kpi) .ps-page-head__title {
    font-size: 18px;
    max-width: 36%;
  }
}

/* === Step 372: Footer Styles === */
.ps-footer {
  margin-top: 40px;
  padding: 40px 0 24px;
  border-top: 1px solid var(--border);
  background-color: var(--bg-card, #0f0f15);
  color: var(--text-4, #888ea8);
  font-size: 13px;
  line-height: 1.6;
}
.ps-footer-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 16px;
}
.ps-footer-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.ps-footer-info span {
  display: inline-flex;
  align-items: center;
}
.ps-footer-info span::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: var(--border);
  margin-left: 16px;
  opacity: 0.5;
}
.ps-footer-info span:last-child::after {
  display: none;
}
.ps-footer-contact a {
  color: var(--text-2, #d1d5db);
  text-decoration: none;
  font-weight: 600;
}
.ps-footer-contact a:hover {
  color: var(--accent, #3b82f6);
  text-decoration: underline;
}
.ps-footer-links {
  display: flex;
  gap: 20px;
}
.ps-footer-links a {
  color: var(--text-3, #9ca3af);
  text-decoration: none;
  font-weight: 500;
}
.ps-footer-links a:hover {
  color: var(--text-1, #f3f4f6);
}
.ps-footer-links .ps-footer-link--bold {
  font-weight: 700;
  color: var(--text-2, #e5e7eb);
}
.ps-footer-links .ps-footer-link--bold:hover {
  color: var(--text-bright, #fff);
}
.ps-footer-copyright {
  font-size: 12px;
  color: var(--text-4, #6b7280);
}

@media (max-width: 768px) {
  .ps-footer-info {
    flex-direction: column;
    gap: 4px;
  }
  .ps-footer-info span::after {
    display: none;
  }
}

/* === Step 372: Legal Terms and Privacy Document CSS === */
.ps-legal-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 40px 30px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-2);
}
.ps-legal-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-bright, #fff);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.ps-legal-date {
  font-size: 14px;
  color: var(--text-4);
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}
.ps-legal-section {
  margin-bottom: 32px;
}
.ps-legal-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 28px;
  margin-bottom: 14px;
  border-left: 4px solid var(--accent);
  padding-left: 10px;
}
.ps-legal-section h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-2);
  margin-top: 18px;
  margin-bottom: 8px;
}
.ps-legal-section p, .ps-legal-section li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-3);
  margin-bottom: 10px;
}
.ps-legal-section ul, .ps-legal-section ol {
  margin-bottom: 16px;
  padding-left: 20px;
}
.ps-legal-section strong {
  color: var(--text);
}
.ps-legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 13px;
}
.ps-legal-table th, .ps-legal-table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
}
.ps-legal-table th {
  background-color: var(--bg-input);
  color: var(--text);
  font-weight: 700;
}
.ps-legal-table td {
  color: var(--text-3);
}
/* Step 373: console user management */
.cu373-layout { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:16px; align-items:start; }
.cu373-filters { display:flex; gap:8px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--border); }
.cu373-search { max-width:220px; }
.cu373-filter { max-width:140px; }
.cu373-toast--error { border-color:var(--danger); color:var(--danger); }
.cu373-status--blocked { color:var(--danger); font-weight:700; }
.cu373-reason-summary { display:block; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-4); font-size:12px; }
.cu373-online { color:var(--success); }
.cu373-offline { color:var(--text-4); }
.cu373-pagination { display:flex; justify-content:center; gap:14px; padding:14px; color:var(--text-3); }
.cu373-pagination a { color:var(--accent); }
.cu373-fields { display:grid; grid-template-columns:104px minmax(0, 1fr); gap:10px 12px; margin:0; font-size:13px; }
.cu373-fields dt { color:var(--text-4); }
.cu373-fields dd { margin:0; min-width:0; overflow-wrap:anywhere; color:var(--text-2); }
.cu373-reason-full { white-space:pre-wrap; }
.cu373-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.cu373-actions form { display:inline-flex; gap:6px; }
.cu373-role-form { width:100%; }
.cu373-role-form select { flex:1; min-width:0; }
.cu373-detail--empty { color:var(--text-4); }

/* Step 374: console page usage timeline CSS bar graph and screen-name view styles */
.cn-timeline-container {
  margin-bottom: 24px;
}

.cn-usage-timeline {
  display: flex;
  height: 200px;
  position: relative;
  padding: 10px 0 10px 48px;
  background: var(--bg-card);
}

.cntl-y-axis {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 30px;
  width: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-4);
  pointer-events: none;
}

.cntl-columns {
  display: flex;
  flex: 1;
  height: 100%;
  align-items: flex-end;
  gap: 6px;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  padding-left: 8px;
}

.cntl-col-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  cursor: pointer;
}

.cntl-bar-container {
  width: 100%;
  height: calc(100% - 24px);
  display: flex;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.015);
  border-radius: 4px;
  position: relative;
}

.cntl-bar-container:hover {
  background: var(--bg-hover);
}

.cntl-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-soft));
  border-radius: 4px 4px 0 0;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(124, 92, 255, 0.15);
}

.cntl-col-wrapper:hover .cntl-bar {
  filter: brightness(1.15);
  box-shadow: 0 4px 14px rgba(124, 92, 255, 0.35);
}

.cntl-label {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-4);
  margin-top: 8px;
  text-align: center;
  white-space: nowrap;
}

.cntl-tooltip {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  display: none;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  line-height: 1.4;
  color: var(--text);
}

.cntl-tooltip strong {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-2);
}

.cntl-tooltip span {
  font-weight: 700;
  color: var(--warning);
}

/* Screen views table additional styling inside usage grid */
.cu374-unclassified-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  margin: 16px 0 8px;
}

.cu374-unclassified-path {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px !important;
  color: var(--text-4) !important;
  word-break: break-all;
}
/* ========== Step 380: 발주예정 계약방법 배지 ========== */
.uo-cntrct {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-3, #9fb0c8);
  white-space: nowrap;
}
.uo-cntrct--private {
  background: rgba(255, 104, 130, 0.16);
  color: var(--danger-fg, #ff8aa0);
  font-weight: 700;
}
.uo-private-filter .choice {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: var(--surface-3, rgba(255, 255, 255, 0.04));
  color: var(--text-2, #c5d0e0);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.uo-private-filter .choice.active {
  border-color: rgba(124, 92, 255, 0.55);
  background: rgba(124, 92, 255, 0.16);
  color: var(--accent-fg, #c4b5fd);
}

/* ========== Step 377: 관심 산업분류 안내·설정 ========== */
.nf5-industry-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 92, 255, 0.28);
  border-radius: 12px;
  background: rgba(124, 92, 255, 0.08);
  color: var(--text-bright, var(--text));
  font-size: 13px;
  line-height: 1.45;
}
.nf5-industry-hint__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.nf5-industry-hint__text a {
  color: var(--accent-fg, #a78bfa);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nf5-industry-hint__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3, #9fb0c8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.nf5-industry-hint__close:hover {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-bright, var(--text));
}
.nf5-industry-hint.is-hidden {
  display: none;
}

.nt5-industry-section,
.nm3-industry-section {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: var(--surface-2, rgba(255, 255, 255, 0.03));
}
.nt5-industry-title,
.nm3-industry-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright, var(--text));
}
.nt5-industry-desc,
.nm3-industry-desc {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-3, #9fb0c8);
  line-height: 1.45;
}
.nt5-industry-error,
.nm3-industry-error {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 104, 130, 0.12);
  color: var(--danger-fg, #ff8aa0);
  font-size: 12.5px;
  font-weight: 600;
}
.nt5-industry-choices,
.nm3-industry-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nt5-industry-choice,
.nm3-industry-choice {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: var(--surface-3, rgba(255, 255, 255, 0.04));
  color: var(--text-2, #c5d0e0);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.nt5-industry-choice.active,
.nm3-industry-choice.active {
  border-color: rgba(124, 92, 255, 0.55);
  background: rgba(124, 92, 255, 0.16);
  color: var(--accent-fg, #c4b5fd);
}

/* ── Step 383: 발주예정 관심 등록 ── */
.uo-fav-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 44px;
}
.uo-fav-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-3, #9fb0c8);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.uo-fav-btn:hover {
  background: rgba(124, 92, 255, 0.12);
  color: var(--accent-fg, #c4b5fd);
}
.uo-fav-btn.active {
  border-color: rgba(124, 92, 255, 0.45);
  background: rgba(124, 92, 255, 0.16);
  color: #f5c542;
}
.uo-fav-hint {
  display: inline-flex;
  align-items: center;
  max-width: 88px;
  color: var(--text-4, #6f829c);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  cursor: help;
}
.uom-fav-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.uod-fav-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.uod-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.uod-fav-btn.active {
  border-color: rgba(124, 92, 255, 0.45);
  background: rgba(124, 92, 255, 0.16);
  color: var(--accent-fg, #c4b5fd);
}
.uod-fav-hint {
  color: var(--text-4);
  font-size: 12px;
  line-height: 1.4;
}
.fv6-type-chip {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.fv6-type-chip--notice {
  color: var(--info-fg, #6cb6ff);
  background: rgba(48, 144, 255, 0.14);
}
.fv6-type-chip--plan {
  color: #c6adff;
  background: rgba(124, 92, 255, 0.16);
}
.fv6-stage-chip--pre {
  color: var(--text-3);
  background: rgba(148, 163, 184, 0.14);
}
.fv6-plan-meta {
  margin-top: 4px;
  color: var(--text-4);
  font-size: 11px;
}
.fv6-expired-note {
  margin: 4px 0 12px;
  font-size: 13px;
  color: var(--text-3);
}
.fv6-expired-link {
  color: var(--accent-fg);
  margin-left: 6px;
}
.fm4-type-badge--plan {
  color: #c6adff;
  background: rgba(124, 92, 255, 0.16);
}
.upcoming-page .uo-row {
  grid-template-columns: minmax(320px, 1.55fr) minmax(150px, .75fr) 120px 120px 100px 120px 52px;
}
@media (max-width: 1269px) {
  .upcoming-page .uo-row {
    grid-template-columns: minmax(280px, 1.4fr) minmax(130px, .7fr) 110px 110px 90px 110px 48px;
  }
}

/* ── Step 387: 사업분석 게이트 + 스테퍼 원문 링크 ── */
.ps-feature-gate {
  display: flex;
  justify-content: center;
  padding: 48px 16px 72px;
}
.ps-feature-gate-card {
  max-width: 480px;
  width: 100%;
  padding: 28px 24px;
  border-radius: 16px;
  border: 1px solid var(--border, #2A2A35);
  background: var(--bg-card, #18181F);
  text-align: center;
}
.ps-feature-gate-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-4, #A0A0BC);
}
.ps-feature-gate-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-1, #F0F0F5);
}
.ps-feature-gate-msg {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2, #C8C8D8);
}
.ps-feature-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.ps-feature-gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--accent, #7C5CFF);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.ps-feature-gate-btn--ghost {
  background: transparent;
  border: 1px solid var(--border, #2A2A35);
  color: var(--text-1, #F0F0F5);
}
.nd6-step-h-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
.nd6-step-h-col .nd6-step-h-link {
  flex: 0 0 auto;
  width: 100%;
}
.nd6-step-h__source {
  display: inline-flex;
  align-self: center;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, #2A2A35);
  color: var(--text-3, #7a89aa);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nd6-step-h__source:hover {
  color: var(--accent-fg, #c4b5fd);
  border-color: rgba(124, 92, 255, 0.45);
}
.ndm-step-h-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.ndm-step-h__source {
  display: inline-flex;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border, #2A2A35);
  color: var(--text-3, #7a89aa);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Step 389: notice detail mobile share row */
.ndm-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.ndm-share-row .ndm-btn {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  padding: 10px 12px;
}
.nd6-kakao-share-btn,
.ndm-kakao-share-btn {
  font-weight: 600;
}