:root {
  /* ── 색상 ───────────────────────── */
  --bg: #f0f4f9;
  --bg-subtle: #e6ecf4;
  --panel: #ffffff;
  --surface: var(--panel);
  --ink: #0f172a;
  --ink-secondary: #334155;
  --muted: #64748b;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #dbeafe;
  --data-blue: #2563eb;
  --data-indigo: #4f46e5;
  --data-cyan: #0284c7;
  --data-emerald: #059669;
  --data-amber: #d97706;
  --data-red: #dc2626;
  --danger: #dc2626;
  --warn: #d97706;
  --ok: #059669;
  --ok-soft: #dcfce7;
  --warn-soft: #fef3c7;
  --danger-soft: #fee2e2;
  --muted-bg: #f1f5f9;
  --border: #cbd5e1;
  --border-light: #e2e8f0;

  /* ── 그림자 ─────────────────────── */
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(15, 23, 42, 0.08);

  /* ── 모서리 ─────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── 간격 (4px 그리드) ──────────── */
  --space-xs: 0.25rem;   /* 4px  */
  --space-sm: 0.5rem;    /* 8px  */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 2.5rem;   /* 40px */

  /* ── 타이포그래피 (Pretendard 기준, font-scale 제거) ── */
  --font-scale: 1;  /* 레거시 호환용 — 더 이상 배율 적용 안 함 */
  --font-xs:      0.6875rem;   /* 11px */
  --font-sm:      0.75rem;     /* 12px */
  --font-md:      0.8125rem;   /* 13px */
  --font-md-plus: 0.875rem;    /* 14px */
  --font-lg:      0.9375rem;   /* 15px */
  --font-xl:      1rem;        /* 16px */
  --text-caption: 0.75rem;     /* 12px */
  --text-body:    0.9375rem;   /* 15px */
  --text-body-lg: 1.0625rem;   /* 17px */
  --text-subtitle:1.125rem;    /* 18px */
  --text-title:   1.375rem;    /* 22px */
  --text-display: 1.75rem;     /* 28px */
  --leading-tight: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  /* ── 레거시 호환 변수 ──────────────── */
  --font-body: 0.9375rem;         /* --text-body 별칭 */
  --panel-soft: rgba(255,255,255,0.82);
  --brand-strong: #1d4ed8;       /* 진한 브랜드 파란색 */
  --brand-soft: #dbeafe;         /* 연한 브랜드 파란색 */
  --radius: 10px;                /* --radius-md 별칭 */
  --web-ui-scale: 1;
}

* {
  box-sizing: border-box;
}

/* 접근성: 키보드 포커스 (Part D.2) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* 웹(데스크톱) 기준 가독성 확대 */
@media (min-width: 1024px) {
  :root {
    --web-ui-scale: 1.5;
  }
}

body {
  margin: 0;
  font-family: "Pretendard Variable", "Pretendard", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: calc(14px * var(--web-ui-scale));
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  padding: calc(0.5rem * var(--web-ui-scale)) calc(0.75rem * var(--web-ui-scale));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

main {
  max-width: min(98vw, 160rem);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(0.5rem * var(--web-ui-scale));
  align-items: start;
}

body.view-result main {
  max-width: min(98vw, 180rem);
}

/* 상단 헤더 가로폭·정렬을 main(하단 콘텐츠 그리드)과 동일하게 맞춤. z-index는 지도/드롭다운보다 위 */
body > header.hero {
  position: relative;
  z-index: 1200;
  max-width: min(98vw, 160rem);
  margin-left: auto;
  margin-right: auto;
}

body.view-result > header.hero {
  max-width: min(98vw, 180rem);
}

main > .app-view {
  min-width: 0;
}

h1, h2, h3, p {
  margin: 0;
}

.hero {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.hero-topbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-width: 0;
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 0 1 auto;
}

.hero-brand-logo {
  display: block;
  height: 2.55rem;
  width: auto;
  max-width: min(13.75rem, 46vw);
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}

.hero-brand-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.hero-brand-tagline {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.hero-company-name {
  color: var(--ink-secondary);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-block;
  color: var(--data-blue);
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.hero h1 {
  font-size: clamp(1.35rem, 0.9vw + 1rem, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  color: var(--ink);
}

.desc {
  max-width: 50rem;
  font-size: 0.875rem;
  color: var(--ink-secondary);
  line-height: 1.55;
}

.hero-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0;
}

.hero-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(37, 99, 235, 0.12);
  color: var(--ink-secondary);
  font-size: 0.72rem;
  font-weight: 700;
}

.hero-meta-chip--brand {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(15, 23, 42, 0.9);
  color: #fff;
}

.hero-controls {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.hero-workspace {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.hero-workspace-summary {
  list-style: none;
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
}

.hero-workspace-summary::-webkit-details-marker {
  display: none;
}

.hero-workspace-summary-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-status-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
}

.hero-workspace-summary-hint {
  color: var(--data-blue);
  font-size: 0.76rem;
  font-weight: 700;
}

.hero-workspace[open] .hero-workspace-summary-hint {
  color: var(--accent);
}

.hero-workspace-body {
  display: grid;
  gap: 0.45rem;
  padding: 0 0.75rem 0.65rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.hero-status-desc {
  color: var(--ink-secondary);
  font-size: 0.8rem;
  line-height: 1.45;
}

.hero-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.hero-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0 0.68rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink);
  font-size: 0.77rem;
  font-weight: 800;
}

.page-switch,
.role-switch {
  display: grid;
  gap: 8px;
}

.page-switch {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 20rem;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  align-self: center;
}

.role-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(22rem, 52vw);
  min-width: 11.5rem;
  flex-shrink: 0;
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

.page-btn,
.role-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 0.45rem 0.65rem;
  min-height: 38px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  width: 100%;
  margin-top: 0;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.page-btn {
  min-height: 28px;
  font-size: 0.78rem;
  padding: 0.28rem 0.5rem;
  font-weight: 700;
}

.role-btn {
  min-height: 26px;
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
}

.page-switch .page-btn:hover,
.role-switch .role-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-secondary);
}

.page-btn.active,
.role-btn.active {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--border-light);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06);
  font-weight: 700;
}

.page-btn.active:hover,
.role-btn.active:hover {
  background: var(--panel);
}

.role-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
}

.app-view {
  animation: fade-in 0.2s ease;
}

.active-view {
  display: block;
}

.hidden-view {
  display: none;
}

.support-panel {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: var(--space-xl);
}

.support-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr);
  gap: var(--space-lg);
  padding: clamp(1.3rem, 2vw, 2rem);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(2, 132, 199, 0.12), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(5, 150, 105, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 242, 248, 0.92));
  box-shadow: var(--shadow-sm);
}

.support-kicker,
.support-section-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--data-cyan);
}

.support-hero h2 {
  font-size: clamp(1.7rem, 2.2vw, 2.3rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.support-hero-summary {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-secondary);
  max-width: 44rem;
}

.support-hero-meta {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  padding: var(--space-lg);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
}

.support-region-summary {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 700;
}

.support-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.support-chip,
.support-badge,
.support-card-format {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.support-chip {
  border: 1px solid rgba(37, 99, 235, 0.15);
  color: var(--data-blue);
  background: rgba(37, 99, 235, 0.08);
}

.support-section {
  display: grid;
  gap: var(--space-md);
}

.support-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-md);
}

.support-section-head h3 {
  font-size: 1.35rem;
  line-height: 1.2;
}

.support-section-summary {
  max-width: 40rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: right;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: var(--space-md);
}

.support-card {
  display: grid;
  gap: 0.9rem;
  padding: 1.15rem 1.15rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: var(--shadow-sm);
}

.support-card--grant {
  border-color: rgba(37, 99, 235, 0.18);
}

.support-card--bundle {
  border-color: rgba(217, 119, 6, 0.22);
}

.support-card--finance {
  border-color: rgba(79, 70, 229, 0.22);
}

.support-card--city,
.support-card--district,
.support-card--notice {
  border-color: rgba(5, 150, 105, 0.18);
}

.support-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.support-badge {
  color: var(--panel);
  background: var(--data-blue);
}

.support-card--bundle .support-badge {
  background: var(--data-amber);
}

.support-card--finance .support-badge {
  background: var(--data-indigo);
}

.support-card--city .support-badge,
.support-card--district .support-badge,
.support-card--notice .support-badge {
  background: var(--data-emerald);
}

.support-card-format {
  color: var(--ink-secondary);
  border: 1px solid var(--border);
  background: var(--muted-bg);
}

.support-card h4 {
  font-size: 1.15rem;
  line-height: 1.35;
}

.support-card-summary {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-secondary);
}

.support-card-meta {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.support-card-meta div {
  display: grid;
  gap: 0.18rem;
}

.support-card-meta dt {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--muted);
}

.support-card-meta dd {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink);
  font-weight: 700;
}

.support-card-notes {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1rem;
  color: var(--ink-secondary);
}

.support-card-notes li {
  line-height: 1.55;
}

.support-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.support-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(37, 99, 235, 0.15);
  background: rgba(37, 99, 235, 0.08);
  color: var(--data-blue);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}

.support-link:hover {
  background: rgba(37, 99, 235, 0.13);
  border-color: rgba(37, 99, 235, 0.3);
}

.support-card-empty {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}

.support-checklist {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.65rem;
}

.support-checklist li {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--ink-secondary);
}

.input-panel {
  width: 100%;
  margin: 0 auto;
}

/* ── 입력 그룹: 섹션 카드 ─────────────────────── */
.input-group {
  margin-bottom: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 0.6rem 0.75rem;
  box-shadow: var(--shadow-sm);
}

.input-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-light);
}

/* 타이틀 앞 컬러 바 */
.input-group-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.input-group .input-group-title + label {
  margin-top: 0;
}

/* ── 고급 설정 아코디언 ────────────────────────── */
.input-advanced {
  margin-top: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  overflow: hidden;
}

.input-advanced > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0.65rem 0.9rem;
  list-style: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.input-advanced > summary:hover {
  color: var(--ink-secondary);
  background: var(--border-light);
}

.input-advanced > summary::-webkit-details-marker {
  display: none;
}

/* 토글 화살표 */
.input-advanced > summary::after {
  content: '';
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.2s ease;
}

.input-advanced[open] > summary::after {
  transform: rotate(180deg);
}

.input-advanced[open] > summary {
  border-bottom: 1px solid var(--border-light);
}

.input-advanced > :not(summary) {
  padding: var(--space-md) 0.9rem;
}

.input-advanced-panel {
  margin-top: var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--panel);
  overflow: hidden;
}

.input-advanced-panel > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0.75rem 1rem;
  list-style: none;
  border-bottom: 1px solid var(--border-light);
}

.input-advanced-panel > summary::-webkit-details-marker {
  display: none;
}

.input-advanced-panel > :not(summary) {
  padding: var(--space-md) 1rem;
}

.input-advanced-panel__summary {
  margin: 0 0 0.9rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

.input-group--advanced {
  margin-bottom: 0;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.input-group--advanced .input-group-title {
  font-size: 0.75rem;
}

/* 직원 입력: 설치 유형 + 모듈·인버터 (좁은 화면: 세로, 넓은 화면: 가로) */
.input-staff-setup-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body[data-role="staff"] .input-staff-setup-row {
  margin-bottom: 1.25rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--border-light);
}

.input-install-type-top {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.input-step-merged-area {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border-light);
}

body[data-role="staff"] .input-staff-setup-row .input-staff-equipment {
  margin: 1rem 0 0;
}

.input-install-type-top .install-type-group {
  margin-bottom: 0;
  width: 100%;
}

@media (min-width: 1024px) {
  body[data-role="staff"] .input-staff-setup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
  }

  body[data-role="staff"] .input-staff-setup-row .input-staff-equipment {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  body[data-role="staff"] .input-staff-setup-row .input-staff-equipment__cards {
    flex: 1 1 auto;
  }

  body[data-role="staff"] .input-staff-setup-row .input-install-type-top {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  body[data-role="staff"] .input-staff-setup-row .install-type-group {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }

  body[data-role="staff"] .input-staff-setup-row .install-type-cards {
    flex: 1 1 auto;
    min-height: 0;
    align-content: stretch;
    align-items: stretch;
  }

  body[data-role="staff"] .input-staff-setup-row .install-type-card {
    height: 100%;
  }
}

/* ── 입력 단계 스테퍼 ─────────────────────────── */
.input-stepper {
  margin: 0 0 var(--space-lg);
  width: 100%;
  padding: 0.85rem 1rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.input-stepper-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 0.45rem;
  width: 100%;
}

/* 단계 버튼 (pill 스타일) */
.input-step-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1.5px solid var(--border);
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  padding: 0.55rem 1rem;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  width: 100%;
  margin: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  text-align: center;
  white-space: nowrap;
}

.input-step-dot:hover:not([disabled]) {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--ink-secondary);
}

.input-step-dot[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
}

/* 활성 단계: 파란 강조 */
.input-step-dot.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
  font-weight: 700;
}

/* 완료 단계: 초록 */
.input-step-dot.done {
  border-color: color-mix(in srgb, var(--ok) 50%, var(--border));
  background: var(--ok-soft);
  color: #065f46;
}

/* 단계 번호 뱃지 */
.input-step-dot::before {
  content: attr(data-step-num);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: currentColor;
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
  opacity: 0.18;
}

.input-step-dot.active::before {
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
  color: #fff;
}

/* → 구분자 */
.input-step-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--border);
  font-size: 1.1rem;
  font-weight: 400;
  min-width: 16px;
  flex-shrink: 0;
}

/* 진행률 텍스트 */
.input-step-progress {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
  font-weight: 500;
}

.input-step {
  margin-bottom: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

/* 직원: 1단계 ↔ 2단계 — 같은 자리에서 한 패널만 표시(비활성은 hidden으로 레이아웃 제외) */
body[data-role="staff"] .input-steps-pager-viewport {
  width: 100%;
  scroll-margin-top: min(5.5rem, 18vh);
}
body[data-role="staff"] .input-steps-pager-track {
  display: contents;
}
body[data-role="customer"] .input-steps-pager-viewport {
  overflow: visible;
}
body[data-role="customer"] .input-steps-pager-track {
  display: contents;
}

.input-step-controls-buttons-customer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}
.input-step-controls-buttons-customer .secondary {
  flex: 1 1 140px;
}

/* 직원 2단계: 면적·장비 ↔ 주소 연계 가로 슬라이드 */
.input-step2-carousel-shell {
  display: grid;
  gap: 0.35rem;
  scroll-margin-top: min(5.5rem, 18vh);
}
.input-step2-carousel-viewport {
  overflow: hidden;
  width: 100%;
}
.input-step2-carousel-track {
  display: flex;
  width: 200%;
  transform: translateX(0);
  transition: transform 0.36s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}
.input-step2-carousel-track[data-slide="1"] {
  transform: translateX(-50%);
}
.input-step2-pane {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  box-sizing: border-box;
  padding-right: 10px;
}
.input-step2-pane + .input-step2-pane {
  padding-right: 0;
  padding-left: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .input-step2-carousel-track {
    transition: none;
  }
}

/* ── 단계 하단 컨트롤 영역 ─────────────────────── */
.input-step-controls {
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-lg);
  margin-top: var(--space-sm);
}

.input-step-controls-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--space-md);
}

.input-step-controls-buttons .secondary {
  width: 100%;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* 이전 버튼이 숨겨진 단계(1단계)에서는 다음 버튼을 가로 전체로 확장 */
.input-step-controls-buttons .secondary.hidden + .secondary {
  grid-column: 1 / -1;
}

#runBtn {
  display: block;
  width: 100%;
  margin-inline: auto;
}

/* 직원·고객 최종 단계: 이전(1) + 분석 실행(3) 한 줄 */
.input-step-controls--run-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 10px;
  align-items: stretch;
}

.input-step-controls--run-row .customer-run-cta,
.input-step-controls--run-row .input-hint,
.input-step-controls--run-row #inputFlowGuide,
.input-step-controls--run-row #inputFlowGuideCustomer {
  grid-column: 1 / -1;
}

.input-step-controls--run-row .input-step-controls-buttons,
.input-step-controls--run-row .input-step-controls-buttons-customer {
  display: contents;
  margin-bottom: 0;
}

.input-step-controls--run-row #inputStepPrevBtn,
.input-step-controls--run-row #customerInputStepPrevBtn {
  grid-column: 1;
  width: 100%;
  min-height: 48px;
  margin: 0;
}

.input-step-controls--run-row #runBtn {
  grid-column: 2;
  width: 100%;
  min-height: 48px;
  margin: 0;
}

.input-step-controls--run-row #inputStepNextBtn,
.input-step-controls--run-row #customerInputStepNextBtn {
  display: none !important;
}

body[data-role="customer"] .input-step-controls--run-row #runBtn:not(.customer-run-btn--hidden) {
  margin-top: 0;
}

.address-search-shell {
  position: relative;
  padding: 0.65rem 0.85rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 24%, var(--panel)) 0%, var(--panel) 100%);
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  overflow: visible;
  width: min(100%, 100%);
}

.address-search-shell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  padding-bottom: 0.28rem;
}

.address-search-shell__head .input-group-title {
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.address-search-shell--panel-collapsed .address-search-shell__head {
  margin-bottom: 0;
  padding-bottom: 0;
}

.address-search-panel-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.address-search-shell:focus-within {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.14);
}

.address-search-shell.is-focused {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18);
}

.address-search-shell.is-busy {
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.16);
}

.address-search-shell.is-busy::before {
  content: "";
  position: absolute;
  left: -48%;
  top: 0;
  width: 48%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: address-search-strip 1s linear infinite;
}

.address-search-shell.has-results .address-search-results {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.14);
}

.address-search-shell.is-typing {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* ── 주소 입력창 (히어로 인풋) ──────────────────── */
#addressInput {
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  border-width: 1.5px;
  letter-spacing: 0.005em;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.address-input-main {
  width: 100%;
  background: var(--panel);
}

#addressInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent),
              var(--shadow-sm);
}

#addressInput:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow);
}

#addressInput::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.address-search-shell.is-typing #addressInput {
  border-color: var(--accent);
}

.address-search-hint {
  margin: 0.28rem 0 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.38;
}

.address-search-hint.address-search-hint--select {
  color: var(--ink-secondary);
  font-weight: 600;
}

.address-search-shell.needs-address-choice .address-search-results {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 42%, transparent);
  border-radius: var(--radius-md);
}

#legalLunCandidates {
  width: 100%;
  margin-top: var(--space-sm);
  min-height: 7.5rem;
}

.address-api-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.address-search-shell .address-api-actions {
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.address-api-actions--collapsed,
#addressApiActionsPanel[hidden],
#addressApiActionsPanel.address-api-actions--collapsed {
  display: none !important;
}

body[data-role="staff"] .address-search-shell .address-api-actions--collapsed {
  display: none !important;
}

body[data-role="staff"] .address-search-shell .address-api-actions:not(.address-api-actions--collapsed):not([hidden]) {
  display: flex;
}

/* 주소 검색 + 좌표 조회: 항상 한 줄에 나란히 (직원 2버튼 / 고객은 숨겨진 검색 제외) */
.address-search-shell .address-primary-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.35rem;
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
}

.address-search-shell .address-primary-btns > .secondary {
  flex: 1 1 0;
  min-width: 0;
}

.address-search-shell .address-api-actions button {
  min-height: 2.35rem;
  padding-inline: 0.75rem;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: var(--radius-full);
}

.viewer-action-btn {
  border-width: 2px;
}

.viewer-action-btn {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.viewer-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
  border-color: var(--accent);
}

.viewer-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: var(--radius-full);
  padding: 0.45rem 0.9rem;
  font-size: 0.93rem;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--ink);
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease, color 0.14s ease;
}

.viewer-action-link:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
}

.viewer-action-link:active {
  transform: translateY(0);
}

.address-api-actions .secondary.is-action-ok,
.address-api-actions .viewer-action-btn.is-action-ok,
.address-api-actions .viewer-action-link.is-action-ok {
  border-color: color-mix(in srgb, var(--ok) 52%, var(--border));
  background: color-mix(in srgb, var(--ok-soft) 72%, var(--panel));
  color: color-mix(in srgb, var(--ok) 82%, var(--ink));
}

.address-api-actions .secondary.is-action-warn,
.address-api-actions .viewer-action-btn.is-action-warn,
.address-api-actions .viewer-action-link.is-action-warn {
  border-color: color-mix(in srgb, var(--warn) 52%, var(--border));
  background: color-mix(in srgb, var(--warn-soft) 68%, var(--panel));
  color: color-mix(in srgb, var(--warn) 82%, var(--ink));
}

.address-api-actions .secondary.is-action-error,
.address-api-actions .viewer-action-btn.is-action-error,
.address-api-actions .viewer-action-link.is-action-error {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--border));
  background: color-mix(in srgb, var(--danger-soft) 68%, var(--panel));
  color: color-mix(in srgb, var(--danger) 82%, var(--ink));
}

.address-api-actions button:not(:disabled) {
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.address-api-actions button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
}

.address-api-actions button:not(:disabled):active {
  transform: translateY(0);
}

.integration-action-row {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.integration-action-card {
  display: grid;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.integration-action-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
}

.integration-action-card.is-active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translateY(-1px);
}

.integration-action-card__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.integration-action-card__badge {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ink);
}

.integration-action-card__meta {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-secondary);
}

.integration-action-card--ok {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--border));
  background: color-mix(in srgb, var(--ok-soft) 60%, var(--panel));
}

.integration-action-card--ok .integration-action-card__badge {
  color: var(--ok);
}

.integration-action-card--warn,
.integration-action-card--loading {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
  background: color-mix(in srgb, var(--warn-soft) 56%, var(--panel));
}

.integration-action-card--warn .integration-action-card__badge,
.integration-action-card--loading .integration-action-card__badge {
  color: var(--warn);
}

.integration-action-card--fail {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger-soft) 58%, var(--panel));
}

.integration-action-card--fail .integration-action-card__badge {
  color: var(--danger);
}

.integration-detail-panels {
  margin-top: 14px;
}

.integration-detail-panel {
  animation: fade-in 0.18s ease;
}

@media (max-width: 900px) {
  .integration-action-row {
    grid-template-columns: 1fr;
  }
}

.address-api-status {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.eum-act-meta {
  margin: 0.4rem 0 0;
  font-size: 0.86rem;
}

.address-api-status.ok {
  color: var(--ok);
}

.address-api-status.warn {
  color: var(--warn);
}

.address-api-status.error {
  color: var(--danger);
}

.address-region-status {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.region-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.kepco-viewer-fallback {
  margin: 0.5rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border-subtle, #d8dee4);
  background: var(--surface-muted, #f6f8fa);
  font-size: 0.88rem;
}

.kepco-viewer-fallback__hint {
  margin: 0 0 0.45rem;
  line-height: 1.45;
}

.kepco-viewer-fallback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: center;
  margin: 0 0 0.4rem;
}

.kepco-viewer-fallback__url {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  word-break: break-all;
  color: var(--text-muted, #555);
}

.eum-view-status {
  font-weight: 600;
}

.eum-view-status.ok {
  color: var(--ok);
}

.eum-view-status.warn {
  color: var(--warn);
}

.eum-view-status.error {
  color: var(--danger);
}

.input-eum-act-preview {
  margin-top: var(--space-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--panel));
  padding: 0.68rem 0.75rem 0.78rem;
}

.input-eum-act-preview h4 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--ink-secondary);
}

.input-eum-act-preview .address-api-status {
  margin-top: 0.25rem;
}

.input-eum-act-preview .eum-act-content {
  margin-top: 0.48rem;
  max-height: 14rem;
}

.input-kepco-step-panel {
  margin-top: var(--space-sm);
  border: 1px solid color-mix(in srgb, #0b71c2 24%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #0b71c2 8%, var(--panel));
  padding: 0.72rem 0.78rem 0.8rem;
  display: grid;
  gap: 0.45rem;
}

.input-kepco-step-panel h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-secondary);
}

/* 계통조회 후 선택 행 기준 여유용량 없음·부족 */
.input-kepco-step-panel.input-kepco-step-panel--no-spare {
  border-color: color-mix(in srgb, #dc2626 48%, var(--border));
  background: color-mix(in srgb, #dc2626 12%, var(--panel));
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2);
}

.input-kepco-step-panel.input-kepco-step-panel--no-spare h4,
.input-kepco-step-panel.input-kepco-step-panel--no-spare h6 {
  color: #991b1b;
}

.input-kepco-step-panel.input-kepco-step-panel--no-spare .kepco-step-grid label {
  color: #b91c1c;
}

.input-kepco-step-panel.input-kepco-step-panel--no-spare .address-api-status {
  color: #991b1b;
}

.kepco-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.48rem 0.6rem;
}

.kepco-step-grid label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  display: grid;
  gap: 0.22rem;
}

.kepco-step-grid select {
  min-height: 2.45rem;
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
}

.kepco-capacity-list {
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
  max-height: 14rem;
  overflow: auto;
}

.kepco-capacity-item {
  border: 1px solid color-mix(in srgb, #0b71c2 24%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 0.58rem 0.68rem;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  animation: address-search-item-enter 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--kepco-result-index, 0) * 55ms);
}

.kepco-capacity-item:hover {
  border-color: color-mix(in srgb, #0b71c2 48%, var(--border));
  box-shadow: 0 2px 10px rgba(11, 113, 194, 0.09);
}

.kepco-capacity-item:active {
  transform: translateY(1px);
}

.kepco-capacity-item:focus-visible {
  outline: 2px solid color-mix(in srgb, #0b71c2 68%, transparent);
  outline-offset: 2px;
}

.kepco-capacity-item.active {
  border-color: color-mix(in srgb, #0b71c2 62%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, #0b71c2 24%, transparent);
  background: color-mix(in srgb, #0b71c2 8%, var(--panel));
}

.kepco-capacity-item-head {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  line-height: 1.35;
}

.kepco-capacity-item-head strong {
  color: #0b71c2;
  font-size: 0.82rem;
}

.kepco-capacity-item-head span {
  color: var(--ink-secondary);
  font-size: 0.78rem;
}

.kepco-capacity-item-meta {
  margin: 0.34rem 0 0;
  color: var(--ink);
  font-size: 0.79rem;
  line-height: 1.45;
}

.kepco-capacity-item-select {
  margin: 0.3rem 0 0;
  font-size: 0.73rem;
  color: color-mix(in srgb, #0b71c2 72%, var(--muted));
}

.kepco-capacity-empty {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, white);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.kepco-capacity-detail {
  margin-top: 0.45rem;
  border: 1px solid color-mix(in srgb, #0b71c2 22%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #0b71c2 6%, var(--panel));
  padding: 0.58rem 0.64rem;
  display: grid;
  gap: 0.52rem;
}

.kepco-capacity-detail-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.kepco-capacity-detail-head h5 {
  margin: 0;
  font-size: 0.9rem;
  color: #0b71c2;
}

.kepco-capacity-detail-head p {
  margin: 0.22rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-secondary);
}

.kepco-capacity-detail-source {
  margin: 0.32rem 0 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.45;
  color: var(--muted) !important;
}

.kepco-capacity-detail-source code {
  font-size: 0.68rem;
  padding: 0.06rem 0.2rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}

.kepco-capacity-detail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: center;
  padding: 0.35rem 0.42rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, #0b71c2 18%, var(--border));
  background: color-mix(in srgb, #fff 88%, var(--panel));
  font-size: 0.68rem;
  color: var(--ink-secondary);
}

.kepco-capacity-detail-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}

.kepco-capacity-detail-legend__item i {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.kepco-capacity-detail-legend__item .lg-base {
  background: linear-gradient(90deg, #334155, #64748b);
}

.kepco-capacity-detail-legend__item .lg-cond {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.kepco-capacity-detail-legend__item .lg-rcpt {
  background: linear-gradient(90deg, #2e7dd1, #71b3f0);
}

.kepco-capacity-detail-legend__item .lg-plan {
  background: linear-gradient(90deg, #1e9c65, #59cb8f);
}

.kepco-capacity-detail-haesol-title {
  margin: 0.55rem 0 0.28rem;
  font-size: 0.82rem;
  color: var(--ink);
}

.kepco-capacity-detail-steps {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px dashed color-mix(in srgb, #0b71c2 22%, var(--border));
}

.kepco-capacity-detail-steps__title {
  margin: 0 0 0.38rem;
  font-size: 0.8rem;
  color: var(--ink);
}

.kepco-capacity-detail-steps__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.kepco-capacity-step-card {
  border: 1px solid color-mix(in srgb, #0b71c2 18%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 0.42rem 0.48rem;
  text-align: center;
}

.kepco-capacity-step-card__tit {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.kepco-capacity-step-card__sub {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0b71c2;
}

.kepco-capacity-step-card__line {
  margin: 0.28rem 0 0;
  font-size: 0.74rem;
  color: var(--ink);
  line-height: 1.3;
}

@media (max-width: 720px) {
  .kepco-capacity-detail-steps__grid {
    grid-template-columns: 1fr;
  }
}

.kepco-capacity-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.kepco-capacity-detail-card {
  border: 1px solid color-mix(in srgb, #0b71c2 20%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 0.48rem 0.52rem;
}

.kepco-capacity-detail-card h6 {
  margin: 0;
  font-size: 0.79rem;
  color: var(--ink);
}

.kepco-capacity-chart {
  margin-top: 0.38rem;
  border: 1px solid color-mix(in srgb, #0b71c2 16%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, #0b71c2 4%, var(--panel));
  padding: 0.42rem 0.48rem;
}

.kepco-capacity-chart-capacity {
  margin: 0;
  font-size: 0.7rem;
  color: var(--ink-secondary);
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.kepco-capacity-chart-capacity strong {
  color: var(--ink);
  font-size: 0.74rem;
}

.kepco-capacity-chart-row {
  margin-top: 0.3rem;
  display: grid;
  gap: 0.18rem;
}

.kepco-capacity-chart-label {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  align-items: baseline;
  line-height: 1.3;
}

.kepco-capacity-chart-label span {
  font-size: 0.68rem;
  color: var(--ink-secondary);
}

.kepco-capacity-chart-label strong {
  font-size: 0.7rem;
  color: var(--ink);
}

.kepco-capacity-chart-label em {
  font-size: 0.66rem;
  color: var(--muted);
  font-style: normal;
}

.kepco-capacity-chart-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #94a3b8 30%, #fff);
  overflow: hidden;
}

.kepco-capacity-chart-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.kepco-capacity-chart-fill.is-receipt {
  background: linear-gradient(90deg, #2e7dd1, #71b3f0);
}

.kepco-capacity-chart-fill.is-plan {
  background: linear-gradient(90deg, #1e9c65, #59cb8f);
}

.kepco-capacity-chart-fill.is-remain {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.kepco-capacity-chart-fill.is-deficit {
  background: linear-gradient(90deg, #dc2626, #f87171);
}

.kepco-capacity-chart-note {
  margin: 0.34rem 0 0;
  font-size: 0.67rem;
  line-height: 1.35;
  color: var(--muted);
}

.kepco-capacity-detail-status {
  margin: 0.22rem 0 0;
  font-size: 0.75rem;
  color: #0b71c2;
  font-weight: 600;
}

.kepco-capacity-detail-line {
  margin: 0.24rem 0 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--ink-secondary);
}

.kepco-capacity-detail-guide {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.26rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink);
}

.address-search-results {
  margin: var(--space-sm) 0 var(--space-md);
  padding: var(--space-sm);
  list-style: none;
  display: grid;
  gap: var(--space-xs);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel));
  min-height: 6rem;
  max-height: 26rem;
  overflow: auto;
  scrollbar-gutter: stable;
  transform: translateY(0);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.address-search-results[data-loading="true"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.address-search-results:empty {
  border: 0;
  background: transparent;
  padding: 0;
  display: none;
}

.address-search-item.address-search-empty {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.address-search-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: 0.82rem 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
  animation: address-search-item-enter 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--address-result-index, 0) * 55ms);
  cursor: pointer;
}

.address-search-item.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.address-search-item:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.address-search-item:active {
  transform: translateY(1px);
}

.address-search-item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.address-search-main {
  min-width: 0;
}

.address-search-road {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
}

.address-search-parcel {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.89rem;
}

.address-search-meta {
  margin: 4px 0 0;
  color: var(--ink-secondary);
  font-size: 0.77rem;
}

.address-search-apply {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
}

.address-search-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: var(--font-md);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.address-search-loading::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: address-search-spinner 0.75s linear infinite;
}

.address-api-actions button.is-loading {
  pointer-events: none;
  color: transparent;
  position: relative;
}

.address-api-actions button.is-loading::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: address-search-spinner 0.8s linear infinite;
  position: absolute;
  left: calc(50% - 0.5rem);
  top: calc(50% - 0.5rem);
}

.integration-action-card--loading .integration-action-card__badge::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.4rem;
  border: 2px solid color-mix(in srgb, var(--warn) 40%, var(--border));
  border-top-color: var(--warn);
  border-radius: 50%;
  animation: address-search-spinner 0.8s linear infinite;
  vertical-align: -0.1rem;
}

.eum-viewer-panel-head button.is-loading {
  pointer-events: none;
  color: transparent;
  position: relative;
}

.eum-viewer-panel-head button.is-loading::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: address-search-spinner 0.8s linear infinite;
  position: absolute;
  left: calc(50% - 0.5rem);
  top: calc(50% - 0.5rem);
}

button[aria-busy="true"] {
  cursor: progress;
}

@keyframes address-search-item-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes address-search-strip {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(300%);
  }
}

@keyframes address-search-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ── 입력 힌트 (인풋 아래 도움말) ──────────────── */
.input-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.3rem 0 var(--space-sm);
  line-height: 1.45;
}

.input-hint::before {
  content: 'ℹ';
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  opacity: 0.6;
}

.input-hint strong {
  color: var(--ink-secondary);
  font-weight: 700;
}

/* ── 입력 흐름 가이드 배너 ──────────────────────── */
.input-flow-guide {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: 0.7rem 0.9rem;
  margin-bottom: var(--space-sm);
}

/* 상태별 왼쪽 컬러 바 */
.input-flow-guide::before {
  content: '';
  width: 3px;
  min-height: 1.2em;
  border-radius: 2px;
  background: var(--muted);
  flex-shrink: 0;
  align-self: stretch;
}

.input-flow-guide.ok {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--border));
  background: var(--ok-soft);
}

.input-flow-guide.ok::before {
  background: var(--ok);
}

.input-flow-guide.warn {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
  background: var(--warn-soft);
}

.input-flow-guide.warn::before {
  background: var(--warn);
}

.input-flow-guide.error {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  background: var(--danger-soft);
}

.input-flow-guide.error::before {
  background: var(--danger);
}

.input-flow-guide-body {
  min-width: 0;
}

.input-flow-status {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}

.input-flow-issues {
  margin: 5px 0 0;
  padding-left: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.panel {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

.panel h2 {
  font-size: var(--text-subtitle);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

.customer-guide,
.customer-brief,
.decision-journey-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  background: var(--bg-subtle);
  margin-bottom: 0.5rem;
  border-left: 4px solid var(--accent);
  font-size: 0.78rem;
}

.journey-hero {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted-bg);
  padding: 0.75rem 1rem;
  min-height: 5rem;
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow-sm);
}

.journey-hero-title {
  display: block;
  font-size: calc(1rem * var(--font-scale));
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.journey-hero-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.journey-hero-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-caption);
  font-weight: 800;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--panel);
}

.journey-hero-summary {
  display: block;
  margin-top: var(--space-xs);
  font-size: clamp(1.2rem, 0.8vw + 0.9rem, 1.55rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
}

.journey-hero-hint {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: calc(1rem * var(--font-scale));
  color: var(--muted);
  font-weight: 600;
}

.journey-hero.approved {
  background: var(--ok-soft);
  border-color: var(--ok);
}

.journey-hero.approved .journey-hero-title,
.journey-hero.approved .journey-hero-summary {
  color: var(--ok);
}

.journey-hero-icon.icon-approved {
  border-color: var(--ok);
  color: var(--ok);
  background: var(--ok-soft);
}

.journey-hero.conditional {
  background: var(--warn-soft);
  border-color: var(--warn);
}

.journey-hero.conditional .journey-hero-title,
.journey-hero.conditional .journey-hero-summary {
  color: var(--warn);
}

.journey-hero-icon.icon-conditional {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--warn-soft);
}

.journey-hero.rejected {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.journey-hero.rejected .journey-hero-title,
.journey-hero.rejected .journey-hero-summary {
  color: var(--danger);
}

.journey-hero-icon.icon-rejected {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}

.journey-hero.review {
  background: var(--muted-bg);
  border-color: var(--border);
}

.journey-hero.review .journey-hero-title,
.journey-hero.review .journey-hero-summary {
  color: var(--muted);
}

.journey-hero-icon.icon-review {
  border-color: var(--muted);
  color: var(--muted);
  background: var(--muted-bg);
}

/* 상세 산출: 설치 희망자에게는 보조 정보로 표시 */
.result-detail-section {
  margin-top: 8px;
}

.result-detail-title {
  font-size: var(--text-body);
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.result--customer .result-detail-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.result--customer .result-detail-title {
  font-size: var(--font-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.result--customer .cards .card {
  padding: 8px 10px;
}

.result--customer .cards .card .v {
  font-size: var(--font-xl);
}

.customer-guide h3,
.customer-brief h3,
.decision-journey-wrap h3 {
  margin-bottom: 8px;
  font-size: var(--text-subtitle);
}

.customer-guide ul,
.customer-brief ul {
  margin: 0;
  padding-left: 1.125rem;
  color: var(--ink);
  line-height: 1.62;
  font-size: var(--text-body);
}

.customer-brief p {
  margin-bottom: var(--space-sm);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-body-lg);
  line-height: 1.55;
}

/* 인허가·연계 검토 참고 (직원 플로우 내) */
.staff-flow-body .permit-guide {
  margin-top: var(--space-lg);
}

.permit-guide {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--bg-subtle);
  margin-bottom: var(--space-xl);
  border-left: 4px solid var(--accent);
}

.permit-guide h3 {
  margin: 0 0 var(--space-md);
  font-size: var(--text-title);
  font-weight: 700;
  color: var(--ink);
}

.permit-guide-text {
  margin: 0;
  font-size: calc(1rem * var(--font-scale));
  color: var(--ink-secondary);
  line-height: var(--leading-relaxed);
}

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

.result-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.result-head-actions .primary,
.result-head-actions .secondary {
  margin-top: 0;
  min-height: 42px;
}

.report-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.report-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.report-btn-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.result-head-hint {
  font-size: 0.76rem;
  color: var(--muted);
  margin: 3px 0 0;
  max-width: 620px;
  line-height: 1.45;
}

.result-head-hint strong {
  color: var(--ink);
}

/* 결과 페이지: 상단 빠른 수정 바 */
.result-quick-edit {
  position: static;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fbfffe 0%, var(--panel) 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.result-quick-edit--staff {
  border-color: #9fd0f5;
  box-shadow: 0 14px 30px rgba(30, 58, 95, 0.12);
}

.result-quick-edit-toggle {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: var(--space-lg);
}

.result-quick-edit-toggle::-webkit-details-marker {
  display: none;
}

.result-quick-edit-toggle:hover {
  background: rgba(15, 23, 42, 0.02);
}

.result-quick-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.result-quick-edit-title {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--ink);
}

.result-quick-edit-hint {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-secondary);
}

.result-quick-edit-toggle-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: min(100%, 22rem);
}

.result-quick-edit-summary {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink);
  text-align: right;
}

.result-quick-edit-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.1);
  color: #0f4c81;
  font-size: 0.84rem;
  font-weight: 800;
}

.result-quick-edit-toggle-label::before {
  content: "열기";
}

.result-quick-edit-toggle-label::after {
  content: "▼";
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}

.result-quick-edit[open] .result-quick-edit-toggle-label::before {
  content: "접기";
}

.result-quick-edit[open] .result-quick-edit-toggle-label::after {
  transform: rotate(180deg);
}

.result-quick-edit-body {
  display: grid;
  gap: var(--space-lg);
  padding: 0 var(--space-lg) var(--space-lg);
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.result-quick-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.result-quick-edit-grid label {
  margin-bottom: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.result-quick-edit-grid input {
  margin-top: 6px;
  min-height: 46px;
  font-size: 1rem;
  font-weight: 600;
}

.result-quick-edit-actions {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 100%;
}

.result-quick-edit-actions button {
  width: auto;
  min-height: 46px;
  margin-top: 0;
  padding-inline: 1rem;
  font-weight: 700;
}

.quick-edit-staff.hidden {
  display: none !important;
}

/* 결과 페이지: 입력값 수정 접이식 */
.result-edit-block {
  margin-bottom: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-subtle);
  box-shadow: var(--shadow-sm);
}

.result-edit-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  border: none;
  background: transparent;
  font-size: var(--text-subtitle);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}

.result-edit-toggle:hover {
  background: var(--border-light);
}

.result-edit-toggle-icon {
  font-size: var(--font-md);
  color: var(--muted);
  transition: transform 0.2s ease;
}

.result-edit-panel {
  padding: var(--space-lg);
  border-top: 1px solid var(--border);
}

.result-edit-panel.hidden {
  display: none !important;
}

.result-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}

.result-edit-grid label,
.result-edit-staff label {
  display: block;
  font-size: var(--font-md-plus);
  font-weight: 600;
}

.result-edit-grid input,
.result-edit-grid select,
.result-edit-staff input,
.result-edit-staff select {
  margin-top: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: var(--text-body);
}

.result-edit-staff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 14px;
}

.result-edit-staff.hidden {
  display: none !important;
}

.result-edit-panel .primary {
  width: auto;
  min-width: 140px;
}

.result-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.result-tab-btn {
  width: auto;
  margin-top: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius-full);
  padding: 0.28rem 0.65rem;
  min-height: 28px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-secondary);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.result-tab-btn:hover {
  background: var(--bg-subtle);
}

.result-tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--panel);
}

.result-tab-pane.active-pane {
  display: block;
}

.result-tab-pane.hidden-pane {
  display: none;
}

/* ── 폼 label ─────────────────────────────────── */
label {
  display: block;
  margin-bottom: var(--space-md);
}

/* label 안의 텍스트 노드(첫 번째 텍스트 라인) 공통 시각 */
label > span.label-text,
label > .label-text {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;       /* 13px */
  font-weight: 700;
  color: var(--ink-secondary);
  letter-spacing: 0.01em;
}

/* label이 직접 텍스트 + 인풋 감쌀 때의 공통 텍스트 처리:
   label 내부 첫 번째 텍스트는 JS 없이 ::before로 처리 불가,
   대신 label 자체에 flex/grid 레이아웃 적용 */
label:not([class]) {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

label:not([class]) > input,
label:not([class]) > select,
label:not([class]) > textarea {
  margin-top: 0.35rem;
  display: block;
}

/* ── 기본 폼 컨트롤 (WCAG 44px 최소 터치 타겟) ── */
input,
select,
textarea {
  width: 100%;
  margin-top: 0.35rem;
  min-height: 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;       /* 15px */
  font-weight: 400;
  color: var(--ink);
  background: var(--panel);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  line-height: 1.4;
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  font-weight: 400;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
  background: var(--panel);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--bg-subtle);
  color: var(--muted);
  border-color: var(--border-light);
  cursor: not-allowed;
  opacity: 0.7;
}

/* select: 커스텀 드롭다운 화살표 */
select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* textarea */
textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.6;
}

/* input[type=number] 스피너 정리 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0.5;
  height: 2rem;
}

input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 체크박스·라디오: 커스텀 스타일 */
input[type="checkbox"],
input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  min-height: unset;
  margin-top: 0;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  appearance: auto;
  -webkit-appearance: auto;
}

input[type="radio"] {
  border-radius: var(--radius-full);
}

button {
  cursor: pointer;
  min-height: 40px;
  font: inherit;
  letter-spacing: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.625rem 1.375rem;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}

.primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.primary.attention {
  background: #ea580c;
  border-color: #ea580c;
}

.primary.attention:hover {
  background: #c2410c;
  border-color: #c2410c;
}

.secondary {
  width: auto;
  margin-top: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--muted);
  color: var(--ink);
}

.secondary:active {
  transform: translateY(0);
}

.secondary.small {
  padding: 0.35rem 0.75rem;
  font-size: var(--font-md-plus);
  min-height: 32px;
}

/* 설치 업체 직원 전용: 탭 숨기고 단계별 플로우 표시 */
.result--staff .result-switch,
.result--staff .result-tab-pane {
  display: none !important;
}

.staff-flow.hidden {
  display: none !important;
}

.result--staff .staff-flow {
  display: block;
}

.staff-flow {
  padding: 8px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.staff-flow-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.staff-flow-layout {
  display: grid;
  grid-template-columns: minmax(3.35rem, auto) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-width: 0;
}

body[data-role="staff"] .staff-flow-layout {
  grid-template-columns: minmax(min(15.75rem, 36vw), auto) minmax(0, 1fr);
}

.staff-flow-sidebar {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 10px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 3.35rem;
  min-width: 0;
  align-self: start;
}

body[data-role="staff"] .staff-flow-sidebar {
  width: min(15.75rem, 36vw);
}

.staff-flow.staff-overview-drawer-open .staff-flow-sidebar {
  width: 22rem;
}

.staff-flow-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.result--staff .staff-flow {
  padding: 8px 0 8.5rem;
}

.staff-flow-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
  padding: 0.4rem 0 0.4rem;
  border-bottom: 1px solid var(--border-light);
}

.staff-flow-page-indicator {
  width: 100%;
  text-align: left;
  margin: 0 0 0.3rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-secondary);
  letter-spacing: -0.01em;
}

.staff-flow-pagination--bottom {
  margin-top: var(--space-lg);
  margin-bottom: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  border-bottom: 0;
}

.staff-sticky-actions {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  width: min(70rem, calc(100vw - 22px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(8px);
  z-index: 95;
}

.staff-sticky-btn {
  width: 100%;
  margin: 0;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink-secondary);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.staff-sticky-btn.report-toggle-btn {
  font-size: 0.78rem;
  line-height: 1.15;
  padding: 0.3rem 0.4rem;
}

.staff-sticky-btn .report-btn-icon {
  width: 0.94rem;
  height: 0.94rem;
}

.staff-sticky-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: #f0fdfa;
}

.staff-sticky-btn--save {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}

.staff-sticky-btn--save:hover:not(:disabled) {
  background: #d1fae5;
  border-color: #34d399;
  color: #065f46;
}

.staff-sticky-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--panel);
}

.staff-sticky-btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.staff-flow-page-indicator--bottom {
  width: auto;
  margin: 0;
}

.staff-bottom-jump {
  width: auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(0.96rem * var(--font-scale));
  color: var(--muted);
  font-weight: 700;
}

.staff-bottom-jump select {
  width: auto;
  min-width: 98px;
  margin: 0;
  padding: 0.35rem 0.45rem;
  font-size: calc(0.96rem * var(--font-scale));
}

.staff-flow-context {
  display: none;
}

.staff-current-step-title {
  margin: 0;
  font-size: clamp(1.12rem, 0.6vw + 0.96rem, 1.38rem);
  font-weight: 800;
  color: var(--ink);
}

.staff-flow-unified-parcel-bar {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.45), rgba(248, 250, 252, 0.96));
  position: sticky;
  top: 4px;
  z-index: 25;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.staff-flow-unified-parcel-bar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 10px;
}

.staff-flow-unified-parcel-bar__title {
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--muted, #64748b);
  text-transform: uppercase;
}

.staff-flow-unified-parcel-bar__meta {
  font-size: 0.81rem;
  font-weight: 600;
  color: #1e3a5f;
  line-height: 1.35;
}

.staff-flow-unified-parcel-bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.staff-flow-unified-parcel-bar__item {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  font-size: 0.78rem;
  line-height: 1.35;
}

.staff-flow-unified-parcel-bar__item--primary {
  border-color: rgba(37, 99, 235, 0.38);
  background: rgba(239, 246, 255, 0.75);
}

.staff-flow-unified-parcel-bar__pnu {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}

.staff-flow-unified-parcel-bar__snippet {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(420px, 100%);
}

.staff-flow-unified-parcel-bar__badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
}

.staff-flow-unified-parcel-bar__foot {
  margin: 10px 0 0;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.45;
}

/* 2~5단계 본문 상단 미러: 플로우 헤더 밖으로 스크롤된 뒤에도 같은 통합 필지 정보 유지 */
.staff-flow-unified-parcel-bar--in-step {
  position: static;
  top: auto;
  z-index: auto;
  margin-top: 0;
  margin-bottom: 12px;
}

.staff-global-overview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  width: 100%;
}

/* 작업 계정 + STEP 레일 — 하단 패널과 동일한 카드 셸 */
.staff-global-overview:has(#staffRdashSavedBar) {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── 직원 작업 계정 (STEP 레일 상단, 사이드바 패널 통일) ── */
.staff-works-rail-card {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.staff-works-rail-card__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0.45rem 0.55rem 0.4rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.staff-works-rail-card__brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.staff-works-rail-card__kicker {
  flex-shrink: 0;
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.staff-works-rail-card__brand-label {
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.staff-works-rail-card__body {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.55rem 0.55rem;
}

.staff-works-rail-card__login {
  display: block;
  width: 100%;
}

.staff-works-rail-card__profile {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.staff-works-rail-card__profile--in {
  flex-direction: column;
  align-items: stretch;
  gap: 0.38rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.staff-works-rail-card__profile-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.staff-works-rail-card__avatar {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}

.staff-works-rail-card__avatar--in {
  width: 2.1rem;
  height: 2.1rem;
  font-size: 0.84rem;
  color: var(--accent);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  box-shadow: none;
}

.staff-works-rail-card__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.staff-works-rail-card__name {
  font-size: var(--font-md-plus, 0.92rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-works-rail-card__role {
  font-size: var(--font-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-works-rail-card__role--default {
  color: var(--muted);
  font-weight: 600;
}

.staff-works-rail-card__profile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.staff-works-rail-card__status {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid #9ae6b4;
  border-radius: var(--radius-full);
  padding: 0.15rem 0.5rem;
  line-height: 1.2;
}

.staff-works-rail-card__iconbtns {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}

.staff-works-rail-card__iconbtn {
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--panel);
  color: var(--ink-secondary);
  font-size: 0.72rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.staff-works-rail-card__iconbtn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-subtle);
}

.staff-works-rail-card__iconbtn--danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}

.staff-works-rail-card__login-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem;
  gap: 6px;
  align-items: stretch;
  width: 100%;
}

.staff-works-rail-card__login-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--panel);
}

.staff-works-rail-card .staff-rdash-saved__auth-input,
.staff-works-rail-card .staff-rdash-saved__auth-input--pin {
  width: 100%;
  max-width: none;
}

.staff-works-rail-card__login-fields .staff-works-rail-card__input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.staff-works-rail-card__login-fields .staff-works-rail-card__input:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.staff-works-rail-card__login-fields .staff-works-rail-card__input:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.16);
  z-index: 1;
  position: relative;
}

.staff-works-rail-card__login-submit.staff-works-rail-card__btn--primary {
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  align-self: stretch;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
}

.staff-works-rail-card__input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 7px;
  font-size: var(--font-sm);
  background: var(--panel);
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.staff-works-rail-card__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}

.staff-works-rail-card__btn {
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.staff-works-rail-card__btn--primary {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: var(--shadow-sm);
}

.staff-works-rail-card__btn--primary:hover {
  filter: brightness(1.05);
}

.staff-works-rail-card__filter {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 58%;
}

.staff-works-rail-card__filter-icon {
  flex-shrink: 0;
  font-size: var(--font-xs);
  color: var(--muted);
  line-height: 1;
}

.staff-works-rail-card__select-wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.staff-works-rail-card__select-wrap::after {
  content: "▾";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.55rem;
  color: var(--muted);
  pointer-events: none;
}

.staff-works-rail-card__select {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.18rem 1.1rem 0.18rem 0.45rem;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--ink-secondary);
  background: var(--bg-subtle);
  cursor: pointer;
}

.staff-works-rail-card__select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}

.staff-global-overview:has(#staffRdashSavedBar) .staff-overview-rail-btn {
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
  background: transparent;
}

.staff-global-overview:has(#staffRdashSavedBar) .staff-overview-rail-btn:hover {
  background: rgba(15, 23, 42, 0.02);
}

.staff-overview-rail-btn {
  width: 100%;
  min-height: 9.75rem;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: var(--shadow-sm);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 10px 6px;
  text-align: center;
  transition: background 0.12s ease;
}

.staff-overview-rail-label {
  font-size: var(--font-xs);
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.staff-overview-rail-step {
  font-size: 1.22rem;
  line-height: 1;
  color: var(--ink);
  font-weight: 900;
}

.staff-overview-rail-meta {
  font-size: var(--font-xs);
  color: var(--ink-secondary);
  font-weight: 700;
}

.staff-overview-rail-caret {
  font-size: var(--font-md);
  color: var(--accent);
  font-weight: 800;
}

.staff-overview-drawer {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: var(--shadow-sm);
  padding: 0.65rem 0.7rem;
  max-height: min(48vh, 24rem);
  overflow: hidden;
}

.staff-overview-drawer__main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 0.2rem;
}

.staff-overview-drawer__pinned {
  flex: 0 0 auto;
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(37, 99, 235, 0.14);
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.92) 0%, #ffffff 100%);
}

.staff-overview-rdash-cta {
  margin: 0 0 0.4rem;
}

.staff-overview-open-rdash {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: var(--radius-lg, 10px);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.staff-overview-open-rdash:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.34);
  transform: translateY(-1px);
}

.staff-overview-open-rdash:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.staff-overview-open-rdash__icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.staff-overview-open-rdash__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.staff-overview-open-rdash__title {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.staff-overview-open-rdash__sub {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.88;
  line-height: 1.2;
}

.staff-overview-open-rdash__arrow {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 800;
  opacity: 0.9;
}

.staff-overview-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}

.staff-overview-drawer__pinned .staff-overview-body {
  margin: 0;
}

.staff-overview-progress__track {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: var(--bg-subtle);
  overflow: hidden;
}

.staff-overview-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #059669, #10b981);
  transition: width 0.2s ease;
}

.staff-overview-progress__label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

.staff-overview-body {
  display: block;
}

.staff-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 4px;
}

.staff-overview-job-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
  padding: 0.72rem 0.75rem;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.staff-overview-job-title {
  margin: 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(37, 99, 235, 0.12);
  font-size: 0.78rem;
  font-weight: 800;
  color: #2563eb;
  line-height: 1.35;
  word-break: break-word;
}

.staff-overview-job-field {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
}

.staff-overview-job-field--client {
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(37, 99, 235, 0.16);
}

.staff-overview-job-field__label {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.2;
}

.staff-overview-job-field--address .staff-overview-job-field__label::before {
  content: "📍";
  font-size: 0.78rem;
}

.staff-overview-job-field--client .staff-overview-job-field__label::before {
  content: "👤";
  font-size: 0.78rem;
}

.staff-overview-job-field--phone .staff-overview-job-field__label::before {
  content: "📞";
  font-size: 0.78rem;
}

.staff-overview-job-address,
.staff-overview-job-client,
.staff-overview-job-phone {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.staff-overview-job-field--empty .staff-overview-job-client,
.staff-overview-job-field--empty .staff-overview-job-phone {
  color: var(--muted);
  font-weight: 700;
}

.staff-overview-title {
  margin: 0;
  font-size: var(--font-md-plus);
  font-weight: 800;
  color: var(--ink);
}

.staff-overview-current {
  margin: 4px 0 0;
  font-size: var(--font-sm);
  color: var(--ink-secondary);
  font-weight: 700;
  line-height: 1.4;
}

.staff-overview-close {
  width: auto;
  margin: 0;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--panel);
  color: var(--ink-secondary);
  font-size: var(--font-sm);
  font-weight: 700;
  padding: 0.22rem 0.58rem;
}

.staff-overview-close:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-subtle);
}

.staff-overview-rate {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-md);
  color: var(--muted);
  font-weight: 700;
}

.staff-admin-placeholder-note {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--ink-secondary);
  line-height: 1.5;
}

.staff-overview-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.staff-overview-metric {
  border-radius: var(--radius-full);
  padding: 0.2rem 0.5rem;
  font-size: var(--font-sm);
  font-weight: 800;
}

.staff-overview-metric.done {
  background: var(--ok-soft);
  color: var(--ok);
}

.staff-overview-metric.progress {
  background: var(--warn-soft);
  color: var(--warn);
}

.staff-overview-metric.hold {
  background: var(--danger-soft);
  color: var(--danger);
}

.staff-overview-metric.todo {
  background: var(--bg-subtle);
  color: var(--muted);
}

.staff-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.staff-overview-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.staff-overview-step {
  position: relative;
  width: 100%;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius-md);
  min-height: 86px;
  padding: 12px 14px 12px 58px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title badge";
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.staff-overview-step--compact {
  min-height: 0;
  padding: 0.45rem 0.35rem 0.5rem;
  border-radius: var(--radius-sm, 6px);
  grid-template-columns: 1fr;
  grid-template-areas:
    "no"
    "title"
    "badge";
  justify-items: center;
  row-gap: 0.2rem;
  column-gap: 0;
  text-align: center;
}

.staff-overview-step--compact .staff-overview-step-no {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  grid-area: no;
  width: 1.45rem;
  height: 1.45rem;
  font-size: 0.75rem;
}

.staff-overview-step--compact .staff-overview-step-title {
  grid-area: title;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-align: center;
  word-break: keep-all;
}

.staff-overview-step--compact .staff-overview-step-badge {
  grid-area: badge;
  justify-self: center;
  min-width: 1.2rem;
  padding: 0.08rem 0.28rem;
  font-size: 0.62rem;
  line-height: 1.2;
}

.staff-overview-grid--compact .staff-overview-step::after {
  display: none;
}

.staff-overview-step-no {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--ink-secondary);
}

.staff-overview-step-title {
  grid-area: title;
  font-size: calc(0.98rem * var(--font-scale));
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
}

.staff-overview-step-badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 800;
  padding: 0.16rem 0.45rem;
}

.staff-overview-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 36px;
  bottom: -12px;
  width: 2px;
  background: var(--border);
}

.staff-overview-step--ok .staff-overview-step-badge {
  background: var(--ok-soft);
  color: var(--ok);
}

.staff-overview-step--ok .staff-overview-step-no {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: #9ae6b4;
}

.staff-overview-step--warn .staff-overview-step-badge {
  background: var(--warn-soft);
  color: var(--warn);
}

.staff-overview-step--warn .staff-overview-step-no {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: #fdba74;
}

.staff-overview-step--fail .staff-overview-step-badge {
  background: var(--danger-soft);
  color: var(--danger);
}

.staff-overview-step--fail .staff-overview-step-no {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: #fca5a5;
}

.staff-overview-step--neutral .staff-overview-step-badge {
  background: var(--bg-subtle);
  color: var(--muted);
}

.staff-overview-step.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}

.staff-overview-step--compact.active {
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
  background: rgba(239, 246, 255, 0.65);
}

.staff-overview-step.active .staff-overview-step-no {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.staff-overview-step.active::after {
  background: rgba(13, 148, 136, 0.42);
}

.staff-flow-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.b2b-toggle-btn {
  width: auto;
  margin-top: 0;
  min-height: 38px;
  padding: 0.45rem 0.8rem;
  white-space: nowrap;
}

.b2b-report-hub {
  margin: 0 0 var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.b2b-report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.b2b-kicker {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.b2b-report-head h3 {
  margin: 4px 0 0;
  font-size: 1.22rem;
  color: var(--ink);
}

.b2b-print-meta {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.b2b-print-meta p {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.b2b-print-meta span {
  font-size: 0.73rem;
  color: var(--muted);
  font-weight: 700;
}

.b2b-print-meta strong {
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 700;
}

.b2b-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.b2b-executive-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.b2b-exec-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-md) var(--space-lg);
  min-height: 8.4rem;
}

.b2b-exec-card--ok {
  border-color: rgba(5, 150, 105, 0.35);
}

.b2b-exec-card--warn {
  border-color: rgba(217, 119, 6, 0.35);
}

.b2b-exec-card--fail {
  border-color: rgba(220, 38, 38, 0.35);
}

.b2b-exec-card .k {
  margin: 0;
  font-size: 0.83rem;
  color: var(--muted);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.b2b-k-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--accent);
  border: 1px solid var(--border);
}

.b2b-icon-svg {
  width: 0.82rem;
  height: 0.82rem;
  display: block;
}

.b2b-exec-card .v {
  margin: 6px 0 0;
  font-size: clamp(1.35rem, 0.7vw + 1rem, 1.9rem);
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.b2b-exec-card .d {
  margin: 6px 0 0;
  font-size: 0.84rem;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.b2b-analytics-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.b2b-analytic-card {
  grid-column: span 6;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-lg);
  min-height: 19rem;
}

.b2b-analytic-card--wide {
  grid-column: 1 / -1;
}

.b2b-analytic-title {
  margin: 0 0 14px;
  font-size: 1rem;
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.b2b-analytic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: 0.86rem;
}

.b2b-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.b2b-table th,
.b2b-table td {
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 10px 12px;
  font-size: 0.84rem;
  text-align: left;
  vertical-align: top;
}

.b2b-table th:last-child,
.b2b-table td:last-child {
  border-right: 0;
}

.b2b-table tbody tr:last-child td {
  border-bottom: 0;
}

.b2b-table th {
  background: #f5f8fc;
  color: var(--ink-secondary);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.b2b-table tbody tr:nth-child(even) td {
  background: #fafcff;
}

.b2b-table tbody tr:hover td {
  background: #f2f6ff;
}

.b2b-table-row--ok td:first-child {
  border-left: 3px solid var(--ok);
}

.b2b-table-row--warn td:first-child {
  border-left: 3px solid var(--warn);
}

.b2b-table-row--fail td:first-child {
  border-left: 3px solid var(--danger);
}

.b2b-table-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.b2b-table--compact th,
.b2b-table--compact td {
  font-size: 0.8rem;
  padding: 8px 10px;
}

.b2b-inline-bar {
  width: 100%;
  height: 0.56rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow: hidden;
}

.b2b-inline-bar-fill {
  display: block;
  height: 100%;
}

.b2b-inline-bar-fill--ok {
  background: linear-gradient(90deg, #6ee7b7 0%, var(--data-emerald) 100%);
}

.b2b-inline-bar-fill--warn {
  background: linear-gradient(90deg, #fdba74 0%, var(--data-amber) 100%);
}

.b2b-inline-bar-fill--fail {
  background: linear-gradient(90deg, #fda4af 0%, var(--data-red) 100%);
}

.table-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0 0.55rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}

.table-status-badge--ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: rgba(5, 150, 105, 0.25);
}

.table-status-badge--warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: rgba(217, 119, 6, 0.25);
}

.table-status-badge--fail {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(220, 38, 38, 0.25);
}

.b2b-risk-matrix {
  position: relative;
}

.b2b-risk-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.73rem;
  color: var(--muted);
  font-weight: 700;
}

.b2b-risk-axis--top {
  margin-bottom: 6px;
}

.b2b-risk-axis--left {
  margin-top: 6px;
}

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

.b2b-risk-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 100px;
  padding: 6px;
  background: var(--bg-subtle);
}

.b2b-risk-cell--ok {
  background: #ecfdf5;
}

.b2b-risk-cell--warn {
  background: #fff7ed;
}

.b2b-risk-cell--fail {
  background: #fef2f2;
}

.b2b-risk-score {
  margin: 0;
  font-size: 0.74rem;
  color: var(--ink-secondary);
  font-weight: 800;
}

.b2b-risk-tags {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.b2b-risk-tag {
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  padding: 0.15rem 0.42rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.b2b-risk-tag--ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: #9ae6b4;
}

.b2b-risk-tag--warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: #fdba74;
}

.b2b-risk-tag--fail {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: #fca5a5;
}

.b2b-risk-empty {
  font-size: 0.72rem;
  color: var(--muted);
}

.b2b-sensitivity-svg {
  width: 100%;
  height: auto;
  min-height: 18.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.b2b-sensi-grid {
  stroke: #dde5f2;
  stroke-width: 1;
}

.b2b-sensi-zero {
  stroke: #5b6f8f;
  stroke-width: 1.5;
}

.b2b-sensi-bar--neg {
  fill: rgba(220, 38, 38, 0.65);
}

.b2b-sensi-bar--pos {
  fill: rgba(37, 99, 235, 0.66);
}

.b2b-sensi-label {
  fill: var(--ink-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

.b2b-sensi-value {
  fill: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.b2b-sensi-axis {
  fill: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.b2b-sensitivity-note {
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: var(--ink-secondary);
}

.b2b-quality-bars {
  display: grid;
  gap: 8px;
}

.b2b-quality-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 8px;
}

.b2b-quality-key {
  font-size: 0.74rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.b2b-quality-track {
  height: 0.68rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow: hidden;
}

.b2b-quality-fill {
  display: block;
  height: 100%;
}

.b2b-quality-fill--ok {
  background: linear-gradient(90deg, #34d399 0%, #059669 100%);
}

.b2b-quality-fill--warn {
  background: linear-gradient(90deg, #fdba74 0%, #ea580c 100%);
}

.b2b-quality-fill--fail {
  background: linear-gradient(90deg, #f87171 0%, #dc2626 100%);
}

.b2b-quality-val {
  font-size: 0.74rem;
  color: var(--ink);
  font-weight: 800;
}

.b2b-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.b2b-section-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-md) var(--space-lg);
  min-height: 17rem;
}

.b2b-section-card--ok {
  border-color: #86efac;
}

.b2b-section-card--warn {
  border-color: #fdba74;
}

.b2b-section-card--fail {
  border-color: #fca5a5;
}

.b2b-section-no {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.b2b-section-card h5 {
  margin: 0;
  font-size: 0.97rem;
  color: var(--ink);
}

.b2b-section-head {
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 8px;
  align-items: start;
  margin-top: 4px;
}

.b2b-section-icon {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--accent-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.b2b-section-headline {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.b2b-section-kv {
  margin-top: 8px;
  display: grid;
  gap: 5px;
}

.b2b-section-kv p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.b2b-section-kv span {
  font-size: 0.78rem;
  color: var(--muted);
}

.b2b-section-kv strong {
  font-size: 0.79rem;
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}

.b2b-section-bar {
  margin-top: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow: hidden;
}

.b2b-section-bar-fill {
  display: block;
  height: 100%;
}

.b2b-section-bar-fill--ok {
  background: linear-gradient(90deg, #34d399 0%, #059669 100%);
}

.b2b-section-bar-fill--warn {
  background: linear-gradient(90deg, #fdba74 0%, #ea580c 100%);
}

.b2b-section-bar-fill--fail {
  background: linear-gradient(90deg, #f87171 0%, #dc2626 100%);
}

.b2b-section-bullets {
  margin: 10px 0 0;
  padding-left: 1rem;
  color: var(--ink-secondary);
  font-size: 0.8rem;
  line-height: 1.5;
}

.b2b-package-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--panel);
}

.b2b-package-panel h4 {
  margin: 0 0 var(--space-sm);
  font-size: 0.96rem;
  color: var(--ink);
}

.b2b-package-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.b2b-pack-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.b2b-pack-card--low {
  border-color: #bae6fd;
  background: #f0f9ff;
}

.b2b-pack-card--base {
  border-color: #86efac;
  background: #f0fdf4;
}

.b2b-pack-card--high {
  border-color: #fed7aa;
  background: #fff7ed;
}

.b2b-pack-name {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 800;
}

.b2b-pack-rec {
  margin-left: 4px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 0.72rem;
  padding: 0.12rem 0.45rem;
}

.b2b-pack-fee {
  margin: 6px 0 0;
  font-size: 1.2rem;
  color: var(--ink);
  font-weight: 800;
}

.b2b-pack-desc {
  margin: 6px 0 0;
  font-size: 0.81rem;
  color: var(--ink-secondary);
}

.b2b-pack-card ul {
  margin: 8px 0 0;
  padding-left: 1rem;
  font-size: 0.8rem;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.b2b-cta-bar {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.b2b-print-break {
  display: none;
}

.staff-page-btn {
  padding: 0.2rem 0.7rem;
  min-height: unset;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-weight: 600;
  font-size: calc(0.78rem * var(--font-scale));
  cursor: pointer;
}

.staff-page-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

.staff-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.staff-page-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  flex: 1;
}

.staff-page-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 5.4rem;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  font-weight: 700;
  cursor: pointer;
  padding: 0.35rem 0.7rem;
  gap: 0.1rem;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.staff-step-num {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  color: inherit;
}

.staff-step-label {
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--muted);
  max-width: 6.4rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-page-dot:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.staff-page-dot:hover .staff-step-num,
.staff-page-dot:hover .staff-step-label { color: var(--accent); }

.staff-page-dot.active {
  background: var(--accent);
  border-color: var(--accent);
}
.staff-page-dot.active .staff-step-num,
.staff-page-dot.active .staff-step-label { color: var(--panel); }

.staff-flow-page {
  display: none;
  min-height: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.98));
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

.staff-flow-page.active {
  display: block;
  animation: staff-flow-page-enter 0.22s ease-out;
}

.staff-flow-page[hidden] {
  display: none !important;
}

.staff-flow-page > :last-child {
  margin-bottom: 0;
}

@keyframes staff-flow-page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.staff-ux-board {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.staff-ux-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.staff-ux-kicker {
  font-size: var(--text-body);
  color: var(--accent);
  font-weight: 700;
}

.staff-ux-title {
  margin: 0;
  font-size: var(--text-title);
  color: var(--ink);
}

.staff-ux-progress {
  height: 0.75rem;
  width: 100%;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.staff-ux-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #0ea5a3 100%);
}

.staff-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 640px) {
  .staff-widget-grid {
    grid-template-columns: 1fr;
  }
}

.staff-admin-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.staff-admin-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--ink-secondary);
  padding: 0.28rem 0.68rem;
  font-size: 0.86rem;
  font-weight: 700;
}

.staff-admin-chip--ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: #9ae6b4;
}

.staff-admin-chip--warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: #fdba74;
}

.staff-admin-chip--fail {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: #fca5a5;
}

.staff-admin-chip--neutral {
  color: var(--muted);
}

.staff-admin-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.staff-admin-control-hub {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0;
  padding: 0;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
}

.staff-sidebar-report-cta {
  width: 100%;
  margin: 0;
}

.staff-sidebar-report-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(15, 118, 110, 0.35);
  border-radius: var(--radius-lg, 10px);
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.staff-sidebar-report-btn:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.34);
  transform: translateY(-1px);
}

.staff-sidebar-report-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.staff-sidebar-report-btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.staff-sidebar-report-btn__icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.staff-sidebar-report-btn__text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
  flex: 1 1 auto;
}

.staff-sidebar-report-btn__title {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
}

.staff-sidebar-report-btn__sub {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.88;
  line-height: 1.2;
}

.staff-sidebar-report-btn__arrow {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 800;
  opacity: 0.9;
}

.staff-flow.staff-overview-drawer-open .staff-admin-control-hub {
  display: block;
}

.staff-flow:not(.staff-overview-drawer-open) .staff-admin-control-hub {
  display: none;
}

.staff-admin-control-hub .staff-admin-panel {
  margin-bottom: 0;
}

.staff-admin-panel--ok {
  border-color: #86efac;
}

.staff-admin-panel--warn {
  border-color: #fdba74;
}

.staff-admin-panel--fail {
  border-color: #fca5a5;
}

.staff-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.staff-admin-toggle {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: var(--space-lg);
}

.staff-admin-toggle::-webkit-details-marker {
  display: none;
}

.staff-admin-toggle:hover {
  background: rgba(15, 23, 42, 0.02);
}

.staff-admin-toggle-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: min(100%, 14rem);
}

.staff-admin-progress {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.staff-admin-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.1);
  color: #0f4c81;
  font-size: 0.8rem;
  font-weight: 800;
}

.staff-admin-toggle-label::before {
  content: "열기";
}

.staff-admin-toggle-label::after {
  content: "▼";
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}

.staff-admin-panel[open] .staff-admin-toggle-label::before {
  content: "접기";
}

.staff-admin-panel[open] .staff-admin-toggle-label::after {
  transform: rotate(180deg);
}

.staff-admin-body {
  padding: 0 var(--space-lg) var(--space-lg);
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.staff-admin-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--ink);
}

.staff-admin-summary {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.staff-admin-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.staff-admin-quick-btn {
  width: auto;
  margin: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius-full);
  padding: 0.38rem 0.84rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink-secondary);
}

.staff-admin-quick-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.staff-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: var(--space-md);
}

.staff-admin-field {
  display: grid;
  gap: 4px;
  margin: 0;
}

.staff-admin-field span {
  font-size: 0.9rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.staff-admin-field select,
.staff-admin-field input {
  margin: 0;
  padding: 0.56rem 0.72rem;
  font-size: 1rem;
  min-height: 42px;
}

.staff-admin-scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: var(--space-md);
}

.staff-admin-scenario-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.78rem 0.82rem;
  background: #fff;
  min-height: 9.4rem;
}

.staff-admin-scenario-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.staff-admin-scenario-title {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 800;
  color: var(--ink);
}

.staff-admin-scenario-badge {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.16rem 0.46rem;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ink-secondary);
  background: var(--panel);
  white-space: nowrap;
}

.staff-admin-scenario-list {
  margin: 8px 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 4px;
}

.staff-admin-scenario-list li {
  font-size: 0.86rem;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.staff-admin-scenario-card--info {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}

.staff-admin-scenario-card--ok {
  border-color: #86efac;
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
}

.staff-admin-scenario-card--warn {
  border-color: #fdba74;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.staff-admin-scenario-card--fail {
  border-color: #fca5a5;
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%);
}

.staff-admin-scenario-card--neutral {
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.staff-admin-body--checklist-only {
  padding-top: 0;
}

.staff-admin-checklist-hint {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-xs);
  color: var(--ink-secondary);
  line-height: 1.45;
}

.staff-admin-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-admin-checklist-item {
  margin: 0;
}

.staff-admin-checklist-btn {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px 10px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
}

.staff-admin-checklist-btn:hover {
  border-color: var(--accent);
  background: var(--bg-subtle);
}

.staff-admin-checklist-btn.is-done {
  border-color: #86efac;
  background: var(--ok-soft);
}

.staff-admin-checklist-btn.is-todo .staff-admin-checklist-state {
  background: var(--bg-subtle);
  color: var(--ink-secondary);
}

.staff-admin-checklist-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.1rem;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 800;
  padding: 0.18rem 0.45rem;
  line-height: 1.2;
}

.staff-admin-checklist-btn.is-done .staff-admin-checklist-state {
  background: var(--ok);
  color: #fff;
}

.staff-admin-checklist-label {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}

.staff-admin-tasks {
  border-top: 1px dashed var(--border);
  padding-top: var(--space-md);
}

.staff-admin-task-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 6px;
}

.staff-admin-task-head p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.staff-admin-task-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staff-admin-task-btn {
  width: auto;
  margin: 0;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-secondary);
  padding: 0.3rem 0.72rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.staff-admin-task-btn.done {
  background: var(--ok-soft);
  border-color: #9ae6b4;
  color: var(--ok);
}

.staff-widget {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-md) var(--space-lg);
  min-height: 13.5rem;
  box-shadow: var(--shadow-sm);
}

.staff-widget--ok {
  border-color: #86efac;
}

.staff-widget--warn {
  border-color: #fdba74;
}

.staff-widget--fail {
  border-color: #fca5a5;
}

/* 실데이터/추정/미반영 구분 */
.staff-widget--data-estimate {
  border-color: #eab308;
  background: linear-gradient(to bottom, #fefce8 0%, var(--panel) 24px);
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.25);
}

.staff-widget--data-not-reflected {
  border-color: #dc2626;
  background: linear-gradient(to bottom, #fef2f2 0%, var(--panel) 24px);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2);
}

.staff-widget--data-live {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15);
}

.staff-widget-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.staff-widget-head-row + .staff-widget-gauge-wrap,
.staff-widget-head-row + .staff-widget-pill-grid,
.staff-widget-head-row + .staff-widget-vbars,
.staff-widget-head-row + .staff-widget-stack,
.staff-widget-head-row + .staff-widget-hbars,
.staff-widget-head-row + .staff-widget-donut-wrap,
.staff-widget-head-row + .staff-widget-contact,
.staff-widget-head-row + .staff-widget-payback-track,
.staff-widget-head-row + svg.staff-widget-line {
  margin-top: 0;
}

.staff-widget-datasource-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.staff-widget-datasource-badge--live {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.staff-widget-datasource-badge--estimate {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #eab308;
}

.staff-widget-datasource-badge--not_reflected {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.staff-widget-replace-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.staff-widget-replace-btn:hover {
  background: #bbf7d0;
  color: #14532d;
}

.staff-widget-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink-secondary);
  letter-spacing: 0.01em;
}

.staff-widget-caption {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
}

.staff-widget-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.staff-widget-gauge-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.staff-widget-gauge {
  --pct: 0;
  --gauge-color: var(--accent);
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: conic-gradient(var(--gauge-color) calc(var(--pct) * 1%), var(--border) 0);
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.staff-widget-gauge::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--panel);
}

.staff-widget-gauge span {
  position: relative;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
}

.staff-widget-gauge--ok {
  --gauge-color: var(--ok);
}

.staff-widget-gauge--warn {
  --gauge-color: var(--warn);
}

.staff-widget-gauge--fail {
  --gauge-color: var(--danger);
}

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

.staff-widget-pill {
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  padding: 0.33rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.staff-widget-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.staff-widget-pill--ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: #9ae6b4;
}

.staff-widget-pill--warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: #fdba74;
}

.staff-widget-pill--fail {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: #fca5a5;
}

.staff-widget-vbars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  height: 118px;
}

.staff-widget-vbar-item {
  flex: 1;
  min-width: 0;
}

.staff-widget-vbar-track {
  height: 92px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.staff-widget-vbar-fill {
  display: block;
  width: 100%;
  min-height: 4px;
}

.staff-widget-vbar-fill--ok {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
}

.staff-widget-vbar-fill--warn {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
}

.staff-widget-vbar-fill--fail {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
}

.staff-widget-vbar-label {
  display: block;
  margin-top: 6px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 700;
}

.staff-widget-stack {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--border);
}

.staff-widget-stack-seg {
  display: block;
  height: 100%;
}

.staff-widget-stack-seg--ok {
  background: linear-gradient(90deg, #34d399 0%, #059669 100%);
}

.staff-widget-stack-seg--fail {
  background: #e2e8f0;
}

.staff-widget-hbars {
  display: grid;
  gap: 10px;
}

.staff-widget-hbar-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 8px;
}

.staff-widget-hbar-key {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.staff-widget-hbar-track {
  height: 13px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow: hidden;
}

.staff-widget-hbar-fill {
  display: block;
  height: 100%;
}

.staff-widget-hbar-fill--low {
  background: linear-gradient(90deg, #7dd3fc 0%, var(--data-cyan) 100%);
}

.staff-widget-hbar-fill--base {
  background: linear-gradient(90deg, #93c5fd 0%, var(--data-blue) 100%);
}

.staff-widget-hbar-fill--high {
  background: linear-gradient(90deg, #a5b4fc 0%, var(--data-indigo) 100%);
}

.staff-widget-hbar-val {
  font-size: 0.76rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.staff-widget-donut-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.staff-widget-donut {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.staff-widget-donut::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--panel);
}

.staff-widget-donut span {
  position: relative;
  z-index: 1;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--ink);
}

.staff-widget-donut-legend {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.staff-widget-donut-legend p {
  margin: 0;
  font-size: 0.74rem;
  color: var(--ink-secondary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.staff-widget-donut-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.staff-widget-line {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-subtle);
}

.staff-widget-line-zero {
  stroke: #94a3b8;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.staff-widget-line-low,
.staff-widget-line-base,
.staff-widget-line-high {
  fill: none;
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.staff-widget-line-low {
  stroke: var(--data-cyan);
}

.staff-widget-line-base {
  stroke: var(--data-blue);
}

.staff-widget-line-high {
  stroke: var(--data-indigo);
}

.staff-widget-mini-legend {
  margin-top: 8px;
  display: grid;
  gap: 4px;
}

.staff-widget-mini-legend span {
  font-size: 0.78rem;
  font-weight: 700;
}

.staff-widget-mini-legend .low {
  color: var(--data-cyan);
}

.staff-widget-mini-legend .base {
  color: var(--data-blue);
}

.staff-widget-mini-legend .high {
  color: var(--data-indigo);
}

.staff-widget-payback-track {
  position: relative;
  height: 13px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: linear-gradient(90deg, #d1fae5 0%, #fef3c7 60%, #fee2e2 100%);
}

.staff-widget-payback-marker {
  position: absolute;
  top: -6px;
  width: 14px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.15);
  transform: translateX(-50%);
}

.staff-widget-payback-marker--ok {
  background: var(--ok);
}

.staff-widget-payback-marker--warn {
  background: var(--warn);
}

.staff-widget-payback-marker--fail {
  background: var(--danger);
}

.staff-widget-payback-scale {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 700;
}

.staff-widget-contact {
  display: grid;
  gap: 6px;
}

.staff-widget-contact p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.staff-widget-contact span {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 700;
}

.staff-widget-contact strong {
  font-size: 0.86rem;
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}

.staff-ux-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.staff-ux-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: var(--space-md);
}

.staff-ux-card-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-caption);
  color: var(--ink-secondary);
  font-weight: 700;
}

.staff-ux-checklist {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-secondary);
  line-height: var(--leading-relaxed);
  font-size: var(--text-body);
}

.ux-metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.ux-metric-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: var(--space-sm) var(--space-md);
}

.ux-metric-label {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.ux-metric-value {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-body);
  color: var(--ink);
  font-weight: 700;
}

.ux-metric-value.ok {
  color: var(--ok);
}

.ux-metric-value.warn {
  color: var(--warn);
}

.ux-metric-value.fail {
  color: var(--danger);
}

.staff-flow-divider {
  border: none;
  border-top: 2px solid var(--border);
  margin: 20px 0;
}

.staff-flow-section {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.staff-flow-section--merged-step2 {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.staff-flow-num--sub {
  background: var(--ink-muted, #5c6470);
  font-size: 0.82rem;
}

.staff-flow-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--panel);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0;
}

.staff-flow-body {
  flex: 1;
  min-width: 0;
}

.staff-flow-body h4 {
  margin: 0 0 6px;
  font-size: clamp(0.95rem, 0.5vw + 0.8rem, 1.15rem);
  color: var(--ink);
  font-weight: 700;
}

.staff-address-display,
.staff-value {
  margin: 4px 0 0;
  font-size: var(--font-lg);
  color: var(--ink);
}

.staff-flow-parcel-pick-wrap {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: rgba(248, 250, 252, 0.95);
}

.staff-flow-parcel-pick-wrap__title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted, #64748b);
  letter-spacing: 0.02em;
}

.staff-flow-parcel-pick-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-flow-parcel-pick-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  font-size: 0.88rem;
}

.staff-flow-parcel-pick-item--primary {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(239, 246, 255, 0.65);
}

.staff-flow-parcel-pick-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
}

.staff-flow-parcel-pick-pnu {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}

.staff-flow-parcel-pick-snippet {
  flex: 1 1 160px;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--ink);
  min-width: 0;
}

.staff-flow-parcel-pick-footnote {
  margin: 10px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.45;
}

.staff-step3-parcel-pick-notice {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: rgba(239, 246, 255, 0.55);
  font-size: 0.82rem;
  line-height: 1.5;
  color: #1e3a5f;
}

.staff-status {
  margin: 4px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: var(--font-lg);
  display: inline-block;
}

.staff-status--ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.staff-status--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.staff-status--fail {
  background: var(--danger-soft);
  color: var(--danger);
}

.staff-reason {
  margin: 4px 0 0;
  font-size: var(--font-md-plus);
  color: var(--muted);
}

/* 토지이용계획 확인: 클릭 시 가능한 이유 표시 */
.staff-details {
  margin: 0;
}

.staff-details-summary {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--ink);
  font-size: var(--font-xl);
  padding: 2px 0;
  user-select: none;
}

.staff-details-summary::-webkit-details-marker {
  display: none;
}

.staff-details-summary::before {
  content: "▶";
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.2s ease;
  color: var(--muted);
}

.staff-details[open] .staff-details-summary::before {
  transform: rotate(90deg);
}

.staff-details-title {
  flex: 1;
}

.staff-reason-block {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent);
}

.staff-reason-label {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ink-secondary);
}

.staff-reason-detail {
  margin: 0;
  font-size: var(--text-body);
  color: var(--ink);
  line-height: var(--leading-relaxed);
}

.staff-flow-hint {
  margin: 6px 0 0;
  font-size: var(--font-md);
  color: var(--muted);
}

/* ── 고객 상담 신청 → 직원 1단계 배너 ── */
.staff-customer-lead-banner {
  margin: 0 0 var(--space-md);
  padding: 10px 14px;
  border: 1.5px solid #2e75b6;
  border-left: 4px solid #2e75b6;
  border-radius: 6px;
  background: #eaf3fc;
  font-size: var(--font-md);
  line-height: 1.55;
}
.staff-lead-banner-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.staff-lead-badge {
  font-weight: 700;
  font-size: .8rem;
  color: #1f4e79;
  background: #cde4f5;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.staff-lead-time {
  font-size: .75rem;
  color: var(--muted);
}
.staff-lead-contact { margin: 0; font-size: .88rem; color: #1f4e79; }
.staff-lead-address  { margin: 2px 0 0; font-size: .84rem; color: var(--ink); }
.staff-lead-status   { margin: 2px 0 0; font-size: .84rem; color: var(--ink); }
.staff-lead-marketing{ margin: 2px 0 0; font-size: .78rem; color: #1e7145; }

.staff-step3-landuse-stack {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.staff-step3-landuse-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.staff-step3-zone-names {
  margin: 0.15rem 0 0;
  padding: 0.45rem 0.55rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
  background: rgba(37, 99, 235, 0.06);
  border-radius: 6px;
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.staff-step3-zone-names__empty {
  color: var(--ink-secondary);
  font-weight: 500;
}

.staff-step3-zone-names__src {
  font-size: 0.82rem;
  color: var(--ink-secondary);
  font-weight: 500;
}

.staff-step3-landuse-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.staff-step3-landuse-hint {
  margin: 0;
}

.staff-step3-landuse-panel {
  margin: 0;
}

.staff-step3-landuse-panel h5 {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
}

.staff-step3-landuse-panel h6 {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

/* ── Staff Flow Map ── */
.staff-flow-map-wrap {
  margin-top: 0.75rem;
  border-radius: var(--radius-md, 10px);
  /* hidden이면 하단 <select> 네이티브 목록이 잘려 선택 불가(크롬·사파리 등) */
  overflow: visible;
  border: 1px solid var(--border, #e2e8f0);
  position: relative;
  z-index: 0;
}
.staff-flow-map-frame {
  position: relative;
  width: 100%;
  height: 360px;
  background: #f1f5f9;
  overflow: hidden;
  border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
}

/** 직원 결과 플로우 1단계 — 주소 지도 | 용도지역 요약 */
.staff-flow-page1-map-landuse-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 0.75rem;
}
.staff-flow-page1-map-landuse-row .staff-flow-map-wrap {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
.staff-flow-page1-landuse-aside {
  flex: 0 0 300px;
  width: 300px;
  min-width: 240px;
  max-width: 360px;
  align-self: stretch;
  padding: 12px 14px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border, #e2e8f0);
  border-left: 4px solid #0b71c2;
  background: var(--surface, #f8fafc);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.staff-flow-page1-landuse-aside__title {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
}

/* 직원 1단계 용도지역 우측 패널 — Data API 클릭 결과 카드 */
.staff-flow-p1-landuse-datapick-hint {
  margin-top: 0.65rem;
}
.staff-flow-page1-landuse-aside__summary {
  margin: 0 0 10px;
  font-size: 0.83rem;
  line-height: 1.45;
}
.staff-flow-page1-landuse-aside__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  max-height: min(280px, 48vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.staff-flow-page1-landuse-aside__list li + li {
  margin-top: 4px;
}
.staff-flow-page1-landuse-aside__note {
  margin: 10px 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted, #64748b);
}
@media (max-width: 960px) {
  .staff-flow-page1-map-landuse-row {
    flex-direction: column;
  }
  .staff-flow-page1-landuse-aside {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/** 한전ON 팝업 — 조회 주소 / 한전 선택 주소 각각 미니 지도 */
.staff-kepco-dual-maps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.65rem;
  padding: 0.55rem 0.55rem 0.35rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: linear-gradient(180deg, #f8fafc 0%, #fff 70%);
}
.staff-kepco-dual-maps__card {
  min-width: 0;
}
.staff-kepco-dual-maps__title {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.staff-kepco-dual-maps__addr {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted, #64748b);
  min-height: 2.1em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.staff-kepco-dual-maps__addr--empty {
  color: #94a3b8;
  font-style: italic;
}
.staff-kepco-dual-maps__frame {
  height: 148px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, #e2e8f0);
  background: #e8edf2;
}
.staff-kepco-dual-maps__frame .leaflet-container {
  width: 100%;
  height: 100%;
  background: #e8edf2;
}
.staff-kepco-dual-maps__meta {
  grid-column: 1 / -1;
  margin: 0.1rem 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted, #64748b);
}
.staff-kepco-dual-maps__meta--offset {
  color: #b45309;
  font-weight: 600;
}
.staff-kepco-dual-maps--unavailable {
  opacity: 0.7;
}
@media (max-width: 720px) {
  .staff-kepco-dual-maps {
    grid-template-columns: 1fr;
  }
}

/** 직원 2단계 — 필지·배전 지도 | 한전 계통 여유용량 한 줄 */
.staff-step2-map-kepco-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 0.75rem;
}
.staff-step2-map-kepco-row .staff-step2-map-wrap {
  flex: 1 1 44%;
  min-width: 0;
  margin-top: 0;
}
.staff-step2-map-kepco-row .staff-step2-kepco-panel {
  flex: 1 1 52%;
  min-width: 0;
  margin-top: 0;
  max-height: min(72vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.staff-step2-map-wrap {
  margin-top: 0;
}
.staff-step2-map-frame {
  height: 300px;
  border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
}
.staff-step2-map-controls .staff-flow-map-controls__head {
  flex-wrap: wrap;
}
.staff-step2-map-hint {
  margin: 0.35rem 0 0;
  padding: 0 0.6rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted, #64748b);
}
.leaflet-popup-content .staff-p2-kepco-popup p {
  margin: 0.15rem 0;
}
.staff-flow-map-frame .leaflet-container {
  width: 100%;
  height: 100%;
  background: #e8edf2;
}
.staff-flow-map-frame .staff-wms-viewport-overlay {
  pointer-events: none;
}
.staff-flow-map-api-status {
  margin: 0;
  padding: 0.38rem 0.65rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted, #64748b);
  background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 40%, #f8fafc 100%);
}
.staff-flow-map-controls .staff-flow-map-api-status {
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--border, #e2e8f0);
}
.staff-flow-map-api-status--busy {
  color: var(--accent, #2563eb);
  font-weight: 600;
}
.staff-flow-map-api-status[aria-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.4rem;
  border: 2px solid var(--accent, #2563eb);
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.08em;
  animation: staff-map-api-spin 0.65s linear infinite;
}
@keyframes staff-map-api-spin {
  to {
    transform: rotate(360deg);
  }
}
.staff-flow-map-controls {
  display: flex;
  align-items: center;
  align-content: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface, #f8fafc);
  border-top: 1px solid var(--border, #e2e8f0);
  flex-wrap: wrap;
}
.staff-flow-map-controls__head.address-map-title-row {
  flex: 1 1 100%;
  width: 100%;
  margin-bottom: 0;
}
.staff-flow-map-controls-secondary {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.staff-flow-map-controls-secondary .staff-flow-map-overlay-group {
  margin-left: auto;
}
.staff-flow-map-wrap .address-map-draw-controls {
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--border, #e2e8f0);
  border-radius: 0;
  margin: 0;
}
.staff-map-measure-active .leaflet-container {
  cursor: crosshair !important;
}
.staff-flow-map-layer-group,
.staff-flow-map-overlay-group {
  display: flex;
  gap: 4px;
}
.staff-flow-map-overlay-group {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.staff-flow-map-road-type-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}
.staff-flow-map-road-type-label {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--ink, #334155);
  white-space: nowrap;
}
.staff-flow-map-road-type-select {
  font-size: 0.73rem;
  padding: 2px 6px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 4px;
  background: #fff;
  color: var(--ink, #334155);
  cursor: pointer;
  height: 28px;
}

.staff-map-measure-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}
.staff-map-measure-toggle.active {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 55%, var(--border, #cbd5e1));
  background: color-mix(in srgb, var(--accent-soft, #dbeafe) 90%, #fff);
  color: var(--accent, #2563eb);
}
.staff-map-measure-bar {
  border-top: 1px solid var(--border, #e2e8f0);
  background: color-mix(in srgb, var(--accent-soft, #eff6ff) 65%, var(--surface, #f8fafc));
  padding: 0.45rem 0.6rem;
}
.staff-map-measure-bar.hidden {
  display: none;
}
.staff-map-measure-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}
.staff-map-measure-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent, #2563eb);
  white-space: nowrap;
}
.staff-map-measure-status {
  margin: 0;
  flex: 1 1 200px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink, #334155);
}
.staff-map-measure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.staff-measured-area-hint {
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink, #334155);
  background: color-mix(in srgb, var(--accent-soft, #dbeafe) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 22%, var(--border, #e2e8f0));
  border-radius: 6px;
}
.staff-measured-area-hint.hidden {
  display: none;
}

.staff-page5-map-panel {
  margin: 0.75rem 0 1rem;
  padding: 0.65rem 0.7rem 0.75rem;
  background: var(--surface, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
}
.staff-page5-map-hint {
  margin: 0 0 0.55rem;
}
.staff-page5-map-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border, #cbd5e1);
  background: #e2e8f0;
}
.staff-page5-map-frame {
  width: 100%;
  height: min(42vh, 360px);
  min-height: 240px;
  z-index: 0;
}
.staff-page5-map-title-row.address-map-title-row {
  margin-top: 0.45rem;
  margin-bottom: 0.35rem;
}
.staff-page5-map-draw-controls.address-map-draw-controls {
  margin-top: 0;
  border-radius: 6px;
}

/* NLIS 도로 세그먼트 필터 (직원 1단계 지도) */
.staff-nlis-road-filter {
  position: relative;
  z-index: 2;
  padding: 0.45rem 0.55rem 0.5rem;
  background: var(--panel, #fff);
  border-top: 1px solid var(--border, #e2e8f0);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0.6rem;
}
.staff-nlis-filter-section-title {
  flex: 1 0 100%;
  width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink, #334155);
  line-height: 1.3;
}
.staff-upis-road-filter {
  background: var(--surface, #f8fafc);
}
.staff-nlis-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.35rem 0.5rem;
  flex: 1;
  min-width: 0;
}
.staff-nlis-filter-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.68rem;
  color: var(--muted, #64748b);
}
.staff-nlis-filter-k {
  font-weight: 600;
  color: var(--ink, #334155);
}
.staff-nlis-filter-select {
  font-size: 0.7rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  background: var(--panel, #fff);
  max-width: 100%;
}
.staff-nlis-filter-clear {
  flex-shrink: 0;
  font-size: 0.68rem;
  padding: 0.2rem 0.45rem;
}
.staff-nlis-filter-hint {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0.35rem 0.6rem 0.5rem;
  font-size: 0.72rem;
  color: var(--muted, #64748b);
  line-height: 1.35;
  background: var(--surface, #f8fafc);
  border-top: 1px solid var(--border, #e2e8f0);
}
.staff-nlis-filter-hint--loading {
  color: var(--accent, #2563eb);
  font-weight: 600;
}

.staff-flow-map-btn {
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 5px;
  background: var(--panel, #fff);
  color: var(--ink, #1e293b);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1.5;
}
.staff-flow-map-btn:hover {
  background: var(--surface, #f8fafc);
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}
.staff-flow-map-btn--active {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}
.staff-flow-map-btn--active:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
/** 「📍 주소 위치 보기」 버튼 — 패닝/줌 후 한 번에 주소로 복귀 */
.staff-flow-map-focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.staff-flow-map-hint {
  padding: 0.75rem;
  font-size: 0.8rem;
  color: var(--muted, #64748b);
  text-align: center;
}
.staff-map-dist-tip {
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.staff-map-dist-tip::before { display: none; }

/* 도로중심선 세그먼트 호버 (WFS 벡터, NLIS 속성 다줄) */
.staff-road-segment-tip {
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
  border: none;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: pre-line;
  max-width: min(280px, 90vw);
  padding: 6px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.staff-road-segment-tip::before { display: none; }

/* ── NLIS/UPIS 속성 클릭 팝업 ── */
.nlis-leaflet-popup .leaflet-popup-content-wrapper {
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 0;
  overflow: hidden;
}
.nlis-leaflet-popup .leaflet-popup-content {
  margin: 0;
  min-width: 180px;
}
.nlis-leaflet-popup .leaflet-popup-tip-container {
  margin-top: -1px;
}
.nlis-popup {
  font-size: 0.78rem;
  font-family: inherit;
}
.nlis-popup-title {
  background: #1e293b;
  color: #f1f5f9;
  font-weight: 600;
  font-size: 0.73rem;
  padding: 6px 12px;
  letter-spacing: 0.02em;
}
.nlis-popup-single {
  padding: 10px 14px;
  font-size: 0.8rem;
  color: #1e293b;
}
.nlis-popup-table {
  border-collapse: collapse;
  width: 100%;
}
.nlis-popup-table th,
.nlis-popup-table td {
  padding: 4px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.75rem;
  line-height: 1.4;
}
.nlis-popup-table tr:last-child th,
.nlis-popup-table tr:last-child td {
  border-bottom: none;
}
.nlis-popup-table th {
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  width: 5.5em;
}
.nlis-popup-table td {
  color: #1e293b;
  font-weight: 400;
  word-break: keep-all;
}
.nlis-popup-table tr:hover td,
.nlis-popup-table tr:hover th {
  background: #f8fafc;
}

.staff-landuse-id-popup-wrap .leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  padding: 0;
  overflow: hidden;
}
.staff-landuse-id-popup-wrap .leaflet-popup-content {
  margin: 0;
  min-width: 168px;
}
.staff-landuse-id-popup {
  padding: 10px 12px 12px;
}
.staff-landuse-id-popup__kicker {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
}
.staff-landuse-id-popup__status {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #334155;
}
.staff-landuse-id-popup__name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 7px 8px 7px 10px;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
  word-break: keep-all;
  border-radius: 8px;
  border-left: 4px solid #64748b;
  background: #f8fafc;
  color: #0f172a;
}
.staff-landuse-id-popup__name + .staff-landuse-id-popup__name {
  margin-top: 6px;
}
.staff-landuse-id-popup__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  background: #64748b;
}

/* ── 지도 범례 패널 ── */
.staff-map-legend-panel {
  padding: 0.5rem 0.75rem;
  background: var(--panel, #fff);
  border-top: 1px solid var(--border, #e2e8f0);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: flex-start;
}
.staff-map-legend-panel[hidden] { display: none; }
.sml-hdr {
  width: 100%;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted, #64748b);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.sml-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: default;
}
.sml-swatch {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.sml-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink, #1e293b);
  white-space: nowrap;
}
.sml-desc {
  font-size: 0.68rem;
  color: var(--muted, #64748b);
  white-space: nowrap;
}

/* ── 1단계 도로 용도 블록 ── */
.staff-p1-road-use-block {
  margin-top: 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: var(--panel, #fff);
  overflow: hidden;
}
.staff-p1-road-use-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.staff-p1-road-use-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink, #1e293b);
  white-space: nowrap;
}
.staff-p1-road-use-select {
  flex: 1 1 auto;
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 5px;
  background: var(--panel, #fff);
  color: var(--ink, #1e293b);
  cursor: pointer;
}
.staff-p1-road-use-block .road-use-viz-panel {
  padding: 0.75rem;
}

/* ── 토양경사도 패널 ── */
.soil-slope-panel {
  margin-top: 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: var(--panel, #fff);
  padding: 0.6rem 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}
.soil-slope-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.soil-slope-label {
  font-size: 0.75rem;
  color: var(--muted, #64748b);
  font-weight: 500;
  flex-shrink: 0;
}
.soil-slope-grade {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink, #1e293b);
  min-width: 1.5ch;
}
.soil-slope-solar {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  background: var(--surface, #f8fafc);
  color: var(--ink, #1e293b);
  border: 1px solid var(--border, #e2e8f0);
}
.soil-slope-status {
  font-size: 0.75rem;
  color: var(--muted, #64748b);
  margin-left: auto;
}
.soil-slope-body {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.soil-slope-desc {
  font-size: 0.8rem;
  color: var(--ink, #1e293b);
}
.soil-slope-pct {
  font-size: 0.78rem;
  color: var(--muted, #64748b);
}

/* 등급별 색상 */
.soil-slope-panel.slope--optimal { border-color: #16a34a; background: #f0fdf4; }
.soil-slope-panel.slope--optimal .soil-slope-solar { background: #dcfce7; color: #15803d; border-color: #86efac; }
.soil-slope-panel.slope--good    { border-color: #2563eb; background: #eff6ff; }
.soil-slope-panel.slope--good    .soil-slope-solar { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.soil-slope-panel.slope--conditional { border-color: #ca8a04; background: #fefce8; }
.soil-slope-panel.slope--conditional .soil-slope-solar { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.soil-slope-panel.slope--caution { border-color: #ea580c; background: #fff7ed; }
.soil-slope-panel.slope--caution .soil-slope-solar { background: #ffedd5; color: #c2410c; border-color: #fdba74; }
.soil-slope-panel.slope--poor    { border-color: #dc2626; background: #fef2f2; }
.soil-slope-panel.slope--poor    .soil-slope-solar { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

/* 결과 카드 래퍼 */
.soil-slope-result-card { padding: 1rem 1.25rem; }
.soil-slope-result-card h3 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.soil-slope-src-badge {
  font-size: 0.68rem;
  font-weight: 500;
  font-family: monospace;
  color: var(--muted, #64748b);
  background: var(--surface, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}

.staff-flow-body label {
  margin-top: 8px;
  display: block;
}

.staff-flow-body textarea {
  margin-top: 6px;
  width: 100%;
  min-height: 60px;
}

.staff-profit-dashboard {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
}

.staff-profit-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.staff-profit-kpi {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: var(--space-md);
  min-height: 8.2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.staff-profit-kpi-label {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
}

.staff-profit-kpi-value {
  margin: 0;
  font-size: clamp(1.45rem, 0.95vw + 1rem, 2rem);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.staff-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-xs) 0 0;
  padding: 0.44rem 0.78rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--border-light);
}

.staff-grade-badge--ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.staff-grade-badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.staff-grade-badge--fail {
  background: var(--danger-soft);
  color: var(--danger);
}

.staff-step9-live-data {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
}

.staff-step9-live-data__title {
  margin: 0 0 var(--space-xs);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.staff-step9-live-data__intro {
  margin: 0 0 var(--space-md);
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}

.staff-step9-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.staff-step9-live-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: var(--space-md);
}

.staff-step9-live-card--run {
  grid-column: 1 / -1;
}

.staff-step9-live-card-title {
  margin: 0 0 var(--space-sm);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink-secondary);
}

.staff-step9-live-lead {
  margin: 0 0 var(--space-sm);
  font-size: 0.84rem;
  color: var(--ink);
  line-height: 1.5;
}

.staff-step9-live-meta {
  margin: 0 0 var(--space-sm);
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.staff-step9-energy-badge {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
  background: var(--border-light);
  color: var(--ink-secondary);
}

.staff-step9-energy-badge--ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.staff-step9-energy-badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.staff-step9-energy-badge--error {
  background: var(--danger-soft);
  color: var(--danger);
}

.staff-step9-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.staff-step9-dl-row {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) 1fr;
  gap: var(--space-xs) var(--space-sm);
  align-items: start;
  font-size: 0.82rem;
}

.staff-step9-dl-row dt {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.staff-step9-dl-row dd {
  margin: 0;
  color: var(--ink);
  line-height: 1.4;
}

.staff-step9-dl-row dd strong {
  display: block;
  font-weight: 700;
}

.staff-step9-dl-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
}

.staff-step9-apartment-live {
  margin-top: var(--space-md);
  max-height: 320px;
  overflow: auto;
}

.staff-profit-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-lg);
}

.staff-profit-panel h5 {
  margin: 0 0 var(--space-md);
  font-size: 0.95rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.staff-scenario-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.staff-scenario-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: var(--space-md);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.staff-scenario-card:hover {
  box-shadow: var(--shadow-sm);
}

.staff-scenario-card--low {
  border-color: rgba(2, 132, 199, 0.32);
}

.staff-scenario-card--base {
  border-color: rgba(37, 99, 235, 0.32);
}

.staff-scenario-card--high {
  border-color: rgba(79, 70, 229, 0.32);
}

.staff-scenario-label {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.staff-scenario-profit {
  margin: var(--space-xs) 0 0;
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--ink);
}

.staff-scenario-payback {
  margin: var(--space-xs) 0 0;
  font-size: 0.8rem;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.staff-cashflow-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 170px;
}

.staff-cashflow-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.staff-cashflow-bar {
  width: min(100%, 2.2rem);
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #60a5fa 0%, var(--data-blue) 100%);
  min-height: 10px;
}

.staff-cashflow-item.done .staff-cashflow-bar {
  background: linear-gradient(180deg, #818cf8 0%, var(--data-indigo) 100%);
}

.staff-cashflow-month {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 700;
}

.staff-cashflow-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.staff-profit-panel--decision {
  border-left: 4px solid var(--accent);
}

.staff-decision-badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 800;
  background: var(--border-light);
  color: var(--ink);
}

.staff-decision-badge--ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.staff-decision-badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.staff-decision-badge--fail {
  background: var(--danger-soft);
  color: var(--danger);
}

.staff-decision-reason {
  margin: var(--space-sm) 0 0;
  font-size: 0.96rem;
  color: var(--ink-secondary);
  line-height: 1.55;
}

.staff-action-items {
  margin: var(--space-sm) 0 0;
  padding-left: 1.1rem;
  color: var(--ink-secondary);
  font-size: 0.94rem;
  line-height: var(--leading-relaxed);
}

.staff-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.staff-cards .card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.staff-cards .card .k {
  font-size: 0.82rem;
  color: var(--muted);
}

.staff-cards .card .v {
  font-size: 1.1rem;
  margin-top: 6px;
  font-weight: 700;
}

.staff-total {
  margin-top: 14px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}

.staff-page5-layout-block {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.staff-page5-layout-summary {
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

.staff-page5-layout-map-wrap {
  max-height: min(360px, 70vw);
}

.staff-page5-module-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  transition: background-color 200ms ease, border-color 200ms ease;
}

.staff-page5-module-block.is-applied {
  background: linear-gradient(0deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.05));
  border-top-color: rgba(16, 185, 129, 0.55);
  border-radius: 6px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.staff-page5-module-block label.is-applied {
  position: relative;
}

.staff-page5-module-block label.is-applied select {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
  background-color: rgba(16, 185, 129, 0.06);
}

.staff-page5-applied-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0 0.4rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.staff-page5-applied-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
}

.staff-page5-applied-pill--mod {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.45);
}

.staff-page5-applied-pill--inv {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.45);
}

.staff-page5-applied-pill--pending {
  background: rgba(148, 163, 184, 0.14);
  color: #64748b;
  border-color: rgba(148, 163, 184, 0.4);
  font-weight: 500;
}

.staff-page5-phase-hint {
  margin: 0 0 0.65rem;
  line-height: 1.45;
}

/* 직원 6단계: 예상 비용 · 산정 근거 */
.staff-step6-subtitle {
  margin: 1rem 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink-secondary, #334155);
}

.staff-step6-equip {
  margin-top: 0.5rem;
}

.staff-step6-equip--cards {
  margin-top: 0.35rem;
}

.staff-step6-cost {
  margin-top: 0.35rem;
}

.staff-step6-cost-total {
  margin: 0.35rem 0 0.75rem;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-primary, #0f172a);
}

.staff-step6-cost-footnote {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  color: #64748b;
}

.staff-step6-cost-table-wrap {
  overflow: auto;
  max-height: min(56vh, 560px);
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.staff-step6-cost-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.8rem;
  line-height: 1.35;
}

.staff-step6-cost-table th,
.staff-step6-cost-table td {
  padding: 0.28rem 0.45rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}

.staff-step6-cost-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 650;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.staff-step6-cost-table tbody tr:last-child td {
  border-bottom: none;
}

.staff-step6-cost-table td:first-child {
  font-weight: 600;
  color: #334155;
  width: 18%;
}

/* 항목 | 수량 | 단가 | 금액 | 산정 이유 | 작업 */
.staff-step6-cost-breakdown-table td:first-child,
.staff-step6-cost-breakdown-table th:first-child {
  width: 16%;
}

.staff-step6-th-qty,
.staff-step6-qty-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 11%;
  color: #475569;
}

.staff-step6-th-unit,
.staff-step6-unit-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 16%;
  color: #475569;
}

.staff-step6-th-money,
.staff-step6-money-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 14%;
}

.staff-step6-money-cell {
  font-weight: 650;
  white-space: nowrap;
  color: #0f172a;
}

.staff-step6-th-actions,
.staff-step6-actions-cell {
  width: 3.6rem;
  text-align: right;
  padding-left: 0.15rem;
  padding-right: 0.35rem;
  white-space: nowrap;
}

.staff-step6-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
}

.staff-step6-icon-btn {
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.staff-step6-icon-btn:hover,
.staff-step6-icon-btn:focus-visible {
  background: #f1f5f9;
  color: #0f172a;
  outline: none;
}

.staff-step6-icon-btn.staff-step6-row-del:hover,
.staff-step6-icon-btn.staff-step6-row-del:focus-visible {
  background: #fef2f2;
  color: #b91c1c;
}

.staff-step6-row-del--disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .staff-step6-cost-table tbody tr .staff-step6-row-actions {
    opacity: 0;
  }

  .staff-step6-cost-table tbody tr:hover .staff-step6-row-actions,
  .staff-step6-cost-table tbody tr:focus-within .staff-step6-row-actions {
    opacity: 1;
  }
}

.staff-step6-cost-row--meta td {
  background: #fafbfc;
  color: #64748b;
  font-weight: 500;
}

.staff-step6-cost-row--line td {
  background: #fff;
}

.staff-step6-cost-row--extra td:first-child,
.staff-step6-cost-row--editable[data-staff-step6-extra-id] td:first-child {
  box-shadow: inset 3px 0 0 #86efac;
}

.staff-step6-cost-row--total td {
  background: #f8fafc;
  font-weight: 700;
  border-top: 1px solid #e2e8f0;
}

.staff-step6-cost-table tbody tr:hover td {
  background: #f8fafc;
}

.staff-step6-cost-row--extra td:first-child,
.staff-step6-cost-row--editable td:first-child {
  white-space: normal;
}

.staff-step6-extra-input--narrow {
  max-width: 3.25rem;
}

.staff-step6-extra-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.22rem 0.3rem;
  font: inherit;
  font-size: 0.8rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
}

.staff-step6-cost-table tbody tr:hover .staff-step6-extra-input,
.staff-step6-extra-input:hover {
  background: #fff;
}

.staff-step6-extra-input:focus {
  outline: none;
  border-color: #86efac;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.staff-step6-extra-input--right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.staff-step6-quote-set-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin: 0 0 0.65rem;
  padding: 0.4rem 0.2rem 0.5rem;
  border-bottom: 1px solid var(--border-light, #e2e8f0);
  background: transparent;
}

.staff-step6-quote-set-compact__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  min-width: 0;
}

.staff-step6-quote-lines {
  margin: 0;
}

.staff-step6-quote-lines__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.7rem;
  margin: 0 0 0.55rem;
}

.staff-step6-quote-lines__head .staff-step6-subtitle {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
}

.staff-step6-incidental-page-lede {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted, #64748b);
}

.staff-step6-site-incidental-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  margin: 0 0 0.85rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 10px;
  background: #f8fafc;
}

[data-incidental-pane][hidden] {
  display: none !important;
}

[data-incidental-page="library"] [data-incidental-tables] {
  display: none !important;
}

.staff-incidental-library-mount {
  margin-top: 0.75rem;
}

.staff-incidental-presets--page {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.staff-incidental-presets--page .staff-incidental-presets__lede {
  margin: 0 0 0.65rem;
}

.staff-step6-quote-lines-mount {
  width: 100%;
}

.staff-step6-quote-lines-mount .staff-step6-cost-table-wrap {
  width: 100%;
}

.staff-step6-quote-set-bar {
  position: relative;
  margin: 0 0 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 10px;
  background: #f8fafc;
}

.staff-step6-quote-set-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.7rem;
}

.staff-step6-quote-set-bar__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
  min-width: 0;
  flex: 1 1 16rem;
}

.staff-step6-quote-set-bar__badge {
  display: inline-flex;
  align-items: center;
  max-width: 16rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-step6-quote-set-bar__badge.is-clean {
  background: #ecfdf5;
  color: #047857;
}

.staff-step6-quote-set-bar__badge.is-dirty,
.staff-step6-quote-set-bar__badge.is-empty {
  background: #fff7ed;
  color: #c2410c;
}

.staff-step6-quote-set-bar__meta {
  font-size: 0.74rem;
  font-weight: 600;
  color: #475569;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.staff-step6-quote-set-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  min-width: 0;
}

.staff-step6-quote-chip {
  display: inline-flex;
  align-items: center;
  max-width: 7.5rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-step6-quote-chip.is-empty {
  color: #94a3b8;
  border-style: dashed;
  background: transparent;
}

.staff-step6-quote-chip.is-more {
  border: none;
  background: transparent;
  color: #64748b;
}

.staff-step6-quote-set-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 0 1 auto;
}

.staff-step6-quote-set-bar__name {
  display: block;
  margin: 0;
}

.staff-step6-quote-set-bar__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.staff-step6-quote-set-bar__name input {
  width: 11.5rem;
  min-height: 2rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px;
  font: inherit;
  font-size: 0.8rem;
  background: #fff;
  color: var(--ink, #0f172a);
}

.staff-step6-quote-set-bar__name input:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.staff-step6-quote-set-bar__feedback {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
}

.staff-step6-quote-set-bar__feedback[data-tone="ok"] {
  color: var(--ok, #059669);
}

.staff-step6-quote-set-bar__feedback[data-tone="error"] {
  color: var(--danger, #dc2626);
}

.staff-step6-quote-set-bar .staff-step6-quote-presets-shell {
  display: block;
  width: 100%;
}

.staff-step6-quote-set-bar .staff-incidental-presets-mount {
  top: 0.4rem;
  left: 0;
  right: 0;
  min-width: 0;
  max-width: none;
}

.staff-step6-cost-extra-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0.45rem 0 0;
}

.staff-step6-cost-extra-actions .staff-step6-quote-set-bar__feedback {
  margin: 0;
  flex: 1 1 12rem;
}

.staff-step6-apply-to-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 1.15rem 0 0.25rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #f8fafc;
}

.staff-step6-apply-to-summary .primary {
  flex: 0 0 auto;
}

.staff-step6-apply-to-summary__hint {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #475569;
}

.staff-step6-quote-presets-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.staff-step6-quote-presets-shell .staff-incidental-presets-mount {
  top: calc(100% + 0.35rem);
  left: 0;
  right: auto;
  min-width: min(28rem, 86vw);
}

.staff-step6-cost-main {
  margin-bottom: 0.25rem;
}

.staff-step6-grand-total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(148, 163, 184, 0.45);
}

.staff-step6-grand-total-hero {
  margin: 0 0 0.35rem;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-primary, #0f172a);
}

.staff-step6-grand-total-vat {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-secondary, #334155);
  font-variant-numeric: tabular-nums;
}

.staff-step6-grand-total-vat.hidden {
  display: none;
}

.staff-step6-grand-total-hint {
  margin: 0;
  font-size: 0.8rem;
}

.staff-step6-gen-summary {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.staff-step6-gen-hero {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-primary, #0f172a);
  line-height: 1.35;
}

.staff-step6-gen-detail,
.staff-step6-gen-source {
  margin: 0 0 0.35rem;
  line-height: 1.45;
}

.staff-step6-gen-source {
  margin-bottom: 0;
  font-size: 0.78rem;
  color: var(--ink-muted, #64748b);
}

.staff-step6-rev-summary {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.staff-step6-rev-hero {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-primary, #0f172a);
  line-height: 1.35;
}

.staff-step6-rev-detail,
.staff-step6-rev-source {
  margin: 0 0 0.35rem;
  line-height: 1.45;
}

.staff-step6-rev-source {
  margin-bottom: 0;
  font-size: 0.78rem;
  color: var(--ink-muted, #64748b);
}

/* 6단계 수익 블록: 전기요금 연동·데이터 출처 */
.staff-step6-bill-evidence {
  margin: 0.55rem 0 0.45rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(248, 250, 252, 0.9);
}

.staff-step6-bill-evidence.is-live-data {
  border-color: rgba(5, 150, 105, 0.35);
  background: rgba(240, 253, 244, 0.65);
}

.staff-step6-bill-evidence.is-api-estimate {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(239, 246, 255, 0.55);
}

.staff-step6-bill-evidence.is-bill-missing {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(254, 242, 242, 0.55);
}

.staff-step6-bill-evidence-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  margin-bottom: 0.35rem;
}

.staff-step6-bill-evidence-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink-secondary, #334155);
  letter-spacing: -0.02em;
}

.staff-step6-bill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  padding: 0.08rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 1px solid var(--border-light, #e2e8f0);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-muted, #64748b);
}

.staff-step6-bill-badge--live {
  border-color: rgba(5, 150, 105, 0.35);
  background: rgba(5, 150, 105, 0.12);
  color: var(--data-emerald, #047857);
}

.staff-step6-bill-badge--estimate {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

.staff-step6-bill-badge--manual {
  border-color: rgba(124, 58, 237, 0.32);
  background: rgba(124, 58, 237, 0.08);
  color: #5b21b6;
}

.staff-step6-bill-badge--warn {
  border-color: rgba(220, 38, 38, 0.3);
  background: rgba(254, 226, 226, 0.65);
  color: #b91c1c;
}

.staff-step6-bill-badge--muted {
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(241, 245, 249, 0.9);
  color: var(--ink-muted, #64748b);
}

.staff-step6-bill-evidence-lead {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-secondary, #475569);
}

.staff-step6-bill-dl {
  margin: 0;
  padding: 0;
}

.staff-step6-bill-dl-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 38%) 1fr;
  gap: 0.15rem 0.65rem;
  padding: 0.22rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 0.78rem;
  line-height: 1.4;
}

.staff-step6-bill-dl-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.staff-step6-bill-dl dt {
  margin: 0;
  font-weight: 700;
  color: var(--ink-muted, #64748b);
}

.staff-step6-bill-dl dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink-primary, #0f172a);
  word-break: break-word;
}

.staff-step6-bill-evidence-foot {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink-muted, #64748b);
}

.staff-step6-cost-intro {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.staff-step6-default-costs {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light, #e2e8f0);
}

.staff-step6-default-costs .staff-step6-quote-lines__head {
  margin-bottom: 0.5rem;
}

.staff-step6-default-costs-shell {
  position: relative;
  margin-top: 0.45rem;
}

.staff-step6-default-costs-mount {
  width: 100%;
}

.staff-step6-default-costs-mount .staff-step6-cost-table-wrap,
.staff-step6-default-costs-mount .staff-step6-default-cost-table {
  width: 100%;
}

.staff-step6-spec-preset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink-secondary, #334155);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.staff-step6-spec-preset-btn:hover,
.staff-step6-spec-preset-btn[aria-expanded="true"] {
  border-color: #86efac;
  background: #f0fdf4;
  outline: 2px solid rgba(34, 197, 94, 0.28);
  outline-offset: 1px;
}

.staff-step6-spec-preset-btn.is-placeholder {
  font-weight: 500;
  color: var(--muted, #64748b);
}

.staff-step6-spec-preset-btn__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-step6-spec-preset-btn__caret {
  flex: 0 0 auto;
  color: var(--muted, #64748b);
  font-size: 0.7rem;
}

.staff-step6-default-cost-table td:first-child {
  width: 32%;
  font-weight: 600;
  color: #334155;
}

.staff-step6-default-cost-table td:nth-child(2) {
  width: 10%;
  font-weight: 500;
  color: #64748b;
}

.staff-step6-cost-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.staff-step6-default-cost-sum-row td {
  background: #eef2ff;
  border-top: 2px solid var(--border, #c7d2fe);
  font-size: 0.88rem;
}

.staff-step6-table-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35rem 0.75rem;
  margin: 0.45rem 0 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: #eef2ff;
  color: #312e81;
  font-size: 0.86rem;
  font-weight: 600;
}

.staff-step6-table-sum strong {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #1e1b4b;
}

.staff-incidental-presets-mount {
  position: absolute;
  z-index: 40;
  top: 2.6rem;
  left: 0;
  right: 0;
  max-width: min(36rem, 100%);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.staff-incidental-presets-mount.is-open {
  display: block;
}

.staff-incidental-presets-mount[hidden] {
  display: none !important;
}

.staff-incidental-presets {
  padding: 0.7rem 0.75rem 0.8rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(15, 23, 42, 0.12));
}

.staff-incidental-presets.staff-incidental-presets--page {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.staff-incidental-presets__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.staff-incidental-presets__head .staff-step6-subtitle {
  margin: 0;
  font-size: 0.84rem;
}

.staff-incidental-presets__lede {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: var(--muted, #64748b);
  line-height: 1.4;
}

.staff-incidental-presets__now {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: #475569;
}

.staff-incidental-presets__close {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
}

.staff-incidental-presets__close:hover {
  background: #f8fafc;
  color: #0f172a;
}

.staff-incidental-presets__block {
  margin-top: 0.65rem;
}

.staff-incidental-presets__block-title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
}

.staff-incidental-presets__footer {
  margin-top: 0.55rem;
}

.staff-incidental-presets__save-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  align-items: flex-end;
  margin: 0.15rem 0 0.35rem;
}

.staff-incidental-presets__pick {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.staff-incidental-presets__pick-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent, #2563eb);
}

.staff-incidental-presets__item.is-active {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.staff-incidental-presets__item.is-active .staff-incidental-presets__pick-label {
  color: #1d4ed8;
}

.staff-incidental-presets__del {
  flex: 0 0 auto;
}

.staff-incidental-presets__name-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 12rem;
  min-width: 10rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-secondary, #334155);
}

.staff-incidental-presets__name-label input {
  width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 8px);
  font: inherit;
  background: #fff;
}

.staff-incidental-presets__feedback {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
}

.staff-incidental-presets__feedback[data-tone="ok"] {
  color: var(--ok, #0f766e);
}

.staff-incidental-presets__feedback[data-tone="error"] {
  color: var(--danger, #b91c1c);
}

.staff-incidental-presets__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: min(40vh, 22rem);
  overflow: auto;
}

.staff-incidental-presets__item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 8px;
  background: #fff;
}

.staff-incidental-presets__item:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.staff-incidental-presets__meta {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.staff-incidental-presets__name {
  font-size: 0.82rem;
  color: var(--ink, #0f172a);
}

.staff-incidental-presets__sub {
  font-size: 0.72rem;
  color: var(--muted, #64748b);
}

.staff-incidental-presets__author {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-secondary, #334155);
}

.staff-incidental-presets__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.staff-incidental-presets__empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted, #64748b);
}

.staff-page5-plan-module-hint {
  margin: 0 0 0.5rem;
}

.staff-page5-map-details,
.staff-page5-layout-details {
  margin: 10px 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-soft);
  padding: 0 10px 8px;
}

.staff-page5-map-details-summary,
.staff-page5-layout-details-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 10px 4px;
  color: var(--text);
  list-style-position: outside;
}

.staff-page5-plan-manual-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 10px 0 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
}

.staff-page5-plan-manual-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}

.staff-page5-plan-manual-status {
  font-size: 0.75rem;
  color: var(--muted);
  flex: 1 1 140px;
}

.staff-page5-plan-block {
  margin-top: 0;
  padding-top: 0;
}

.staff-page5-plan-block h5 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

/* 배치 설계 옵션(좌) · 축척 평면도(우) — 도면 중심 단일 열 */
.staff-page5-plan-main-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem 1.25rem;
  margin-top: 2px;
}

.staff-page5-plan-main-row--stacked {
  flex-direction: column;
  align-items: stretch;
}

/* 평면도 · 축척 배치도(좌) + 위성·현장 맥락 배치도(우) — 한 row */
.staff-page5-drawing-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(34rem, 100%);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.staff-page5-drawing-view-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 0.32rem 0.9rem;
  min-height: 30px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  width: 100%;
  margin-top: 0;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.staff-page5-drawing-view-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-secondary);
}

.staff-page5-drawing-view-btn.active {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--border-light);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06);
}

.staff-page5-plan-toolbar-field--segment-dup.hidden {
  display: none;
}

.staff-page5-plan-drawings-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "opt"
    "canvas";
  row-gap: 0;
  column-gap: 0.55rem;
  align-items: start;
  margin-top: 2px;
}

.staff-page5-plan-drawings-row > .staff-page5-drawing-opt-row {
  grid-area: opt;
}

.staff-page5-plan-drawings-row > .staff-page5-drawing-col {
  grid-area: canvas;
  min-width: 0;
}

.staff-page5-plan-drawings-row.staff-page5-plan-drawings-row--with-widgets {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 18rem);
  grid-template-areas:
    "opt widgets"
    "canvas widgets";
  align-items: start;
}

.staff-page5-plan-drawings-row--with-widgets > .staff-page5-drawing-widgets {
  grid-area: widgets;
}

.staff-page5-plan-drawings-row[data-drawing-view="layout"] .staff-page5-drawing-col--context,
.staff-page5-plan-drawings-row[data-drawing-view="plan"] .staff-page5-drawing-col--plan {
  width: 100%;
  max-width: none;
  justify-self: start;
}

.staff-page5-plan-drawings-row[data-drawing-view="layout"] .staff-page5-drawing-col--plan {
  display: none;
}

.staff-page5-plan-drawings-row[data-drawing-view="plan"] .staff-page5-drawing-col--context {
  display: none;
}

.staff-page5-plan-drawings-row[data-drawing-view="layout"] .staff-page5-drawing-col--context .staff-page5-layout-map-inner {
  aspect-ratio: auto;
  width: 100%;
  max-width: none;
  height: min(62vh, 720px);
  max-height: none;
}

.staff-page5-plan-drawings-row--with-widgets[data-drawing-view="layout"] .staff-page5-drawing-col--context .staff-page5-layout-map-inner {
  height: min(68vh, 780px);
  max-height: none;
}

body[data-role="staff"] #staffFlowPage5 .staff-page5-plan-drawings-row[data-drawing-view="layout"] .staff-page5-layout-map-wrap:not(.hidden) {
  width: 100%;
  min-height: min(420px, 48vw);
}

body[data-role="staff"] #staffFlowPage5 .staff-page5-plan-drawings-row[data-drawing-view="layout"] .staff-page5-layout-map-wrap:not(.hidden) .staff-page5-layout-map-inner {
  min-height: min(380px, 44vw);
}

body[data-role="staff"] #staffFlowPage5 .staff-page5-plan-drawings-row--with-widgets[data-drawing-view="layout"] .staff-page5-layout-map-wrap:not(.hidden) {
  min-height: min(480px, 52vh);
}

body[data-role="staff"] #staffFlowPage5 .staff-page5-plan-drawings-row--with-widgets[data-drawing-view="layout"] .staff-page5-layout-map-wrap:not(.hidden) .staff-page5-layout-map-inner {
  min-height: min(440px, 50vh);
}

.staff-page5-layout-opt-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(3px);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 14%, transparent);
}

.staff-page5-layout-opt-loading.hidden {
  display: none;
}

.staff-page5-layout-opt-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(148, 163, 184, 0.35);
  border-top-color: var(--accent, #2563eb);
  border-radius: 50%;
  animation: address-search-spinner 0.75s linear infinite;
}

.staff-page5-layout-opt-loading-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.staff-page5-plan-drawings-row--layout-opt-loading .staff-page5-drawing-col {
  pointer-events: none;
  user-select: none;
}

/* ── 18조합 전체화면 로딩 + 배치 미리보기 ───────────────── */
#layout-opt-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: clamp(12px, 2.5vw, 28px);
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.72));
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

#layout-opt-loading-overlay.layout-opt-loading-overlay--active {
  display: flex;
  opacity: 1;
}

.layout-opt-loading-modal {
  width: min(960px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 96%, white);
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent));
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

.layout-opt-loading-modal--with-map {
  width: min(1080px, 100%);
  max-height: min(920px, calc(100vh - 24px));
}

.layout-opt-loading-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.layout-opt-loading-pct-hero {
  flex: 0 0 auto;
  min-width: 4.5rem;
  margin-left: auto;
  padding: 4px 2px 0;
  text-align: right;
  font-size: clamp(1.75rem, 4.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent, #2563eb);
  font-variant-numeric: tabular-nums;
}

.layout-opt-loading-spinner {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border: 3px solid rgba(148, 163, 184, 0.35);
  border-top-color: var(--accent, #2563eb);
  border-radius: 50%;
  animation: address-search-spinner 0.75s linear infinite;
}

.layout-opt-loading-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.layout-opt-loading-title {
  display: block;
  font-size: var(--text-subtitle);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

.layout-opt-loading-detail {
  margin: 6px 0 0;
  font-size: var(--font-md-plus);
  color: var(--ink-secondary);
  line-height: var(--leading-normal);
}

.layout-opt-loading-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.layout-opt-loading-progress-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--muted-bg);
  overflow: hidden;
}

.layout-opt-loading-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--data-cyan) 70%, var(--accent)));
  transition: width 0.18s ease-out;
}

.layout-opt-loading-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--muted);
}

.layout-opt-loading-stats [data-stat="modules"] {
  color: var(--data-emerald);
}

.layout-opt-loading-map-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
}

.layout-opt-loading-map-label {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.layout-opt-loading-map-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: min(420px, 52vh);
  max-height: min(560px, 58vh);
  height: min(420px, 52vh);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #0b1220;
  overflow: hidden;
}

.layout-opt-loading-map-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.layout-opt-loading-map-pan {
  position: absolute;
  inset: 0;
}

.layout-opt-loading-map-stage .layout-map-leaflet,
.layout-opt-loading-map-stage .staff-layout-map-image,
.layout-opt-loading-map-stage .layout-opt-loading-map-image,
.layout-opt-loading-map-stage .layout-opt-loading-preview-svg,
.layout-opt-loading-map-stage .staff-layout-map-svg,
.layout-opt-loading-map-stage .staff-page5-plan-svg,
.layout-opt-loading-map-stage #layoutOptLoadingPreviewSvg {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  background: transparent;
}

.layout-opt-loading-map-stage .layout-map-leaflet.hidden {
  display: none !important;
}

.layout-opt-loading-map-stage:has(.layout-map-leaflet:not(.hidden)) .staff-layout-map-image,
.layout-opt-loading-map-stage:has(.layout-map-leaflet:not(.hidden)) .layout-opt-loading-map-image {
  display: none !important;
}

.layout-opt-loading-map-stage .staff-layout-map-svg,
.layout-opt-loading-map-stage .layout-opt-loading-preview-svg {
  z-index: 2;
  pointer-events: none;
  background: transparent !important;
}

.layout-opt-loading-map-stage .layout-opt-loading-modules-layer .module-cell,
.layout-opt-loading-map-stage .module-cell {
  fill: #0f172a;
  stroke: #ffffff;
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
  opacity: 1;
}

.layout-opt-loading-map-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: var(--font-md-plus);
  color: var(--muted);
  pointer-events: none;
}

.layout-opt-loading-map-empty[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .layout-opt-loading-modal--with-map {
    max-height: calc(100vh - 16px);
    padding: 14px;
  }

  .layout-opt-loading-map-stage {
    min-height: min(300px, 42vh);
    max-height: min(380px, 46vh);
    height: min(300px, 42vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  .staff-page5-layout-opt-loading-spinner,
  .layout-opt-loading-spinner {
    animation: none;
    border-top-color: var(--accent, #2563eb);
  }

  .layout-opt-loading-progress-bar,
  #layout-opt-loading-overlay {
    transition: none;
  }
}

.staff-page5-drawing-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.staff-page5-drawing-col--plan .staff-page5-plan-wrap {
  margin-top: 0;
  margin-left: 0;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
}

.staff-page5-drawing-col--plan .staff-page5-plan-canvas,
.staff-page5-drawing-col--plan .staff-page5-plan-svg-clickable {
  width: 100%;
  max-width: none;
}

.staff-page5-drawing-col--context {
  min-width: 0;
  width: 100%;
}

.staff-page5-drawing-col--context .staff-page5-context-layout {
  min-height: min(400px, 48vw);
  width: 100%;
}

.staff-page5-context-map-inline.staff-page5-layout-block,
.staff-page5-context-map-inline {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.staff-page5-drawing-col--context .staff-page5-plan-section-title {
  margin-top: 0;
}

.staff-page5-drawing-col--context .staff-page5-layout-summary {
  font-size: 0.78rem;
  margin: 0 0 0.25rem;
}

.staff-page5-drawing-col--context .staff-page5-layout-map-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-height: none;
}

.staff-page5-drawing-col--context .staff-page5-layout-map-inner {
  aspect-ratio: auto;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  align-self: stretch;
  max-height: none;
  height: min(58vh, 680px);
}

/* 4단계 맥락 배치도 — flex min-height:0 그리드 안에서 타일 높이 붕괴 방지 */
body[data-role="staff"] #staffFlowPage5 .staff-page5-layout-map-wrap:not(.hidden) {
  width: 100%;
  min-height: min(360px, 42vw);
}

body[data-role="staff"] #staffFlowPage5 .staff-page5-layout-map-wrap:not(.hidden) .staff-page5-layout-map-inner {
  min-height: min(300px, 38vw);
  flex: 1 1 auto;
}

.staff-page5-drawing-col--context .staff-layout-note {
  font-size: 0.78rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.staff-page5-plan-below-row {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.staff-page5-plan-below-row,
#staffPage5ElevationWrap,
#staffPage5PlanDesigner {
  display: none !important;
}

.staff-page5-plan-below-row .staff-page5-plan-legend-details {
  margin-top: 0;
}

/* 평면도 캔버스 + 도면 기호(범례·표제란) 한 덩어리 */
.staff-page5-plan-canvas {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border, #dbe3ef);
  background: #fff;
}

.staff-page5-plan-canvas .staff-page5-plan-svg-clickable {
  border-bottom: none;
}

.staff-page5-plan-symbols {
  margin-top: 0;
  border-top: 1px solid var(--border, #e2e8f0);
}

.staff-page5-plan-symbols.hidden {
  display: none;
}

.staff-page5-plan-symbols .spm-sym-inner {
  border: none;
  border-radius: 0;
  background: #f8fafc;
}

/* 축척 배치도 — 맵 하단 범례 */
.staff-page5-drawing-col--context .staff-page5-layout-map-inner {
  flex: 1 1 auto;
}

.staff-page5-drawing-legend {
  flex-shrink: 0;
  margin-top: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--border, #dbe3ef);
  background: #f8fafc;
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
}

.staff-page5-drawing-legend.hidden {
  display: none;
}

/* 입면도 도면 기호 */
.staff-page5-elevation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 12px;
  border-top: 1px solid var(--border, #dbe3ef);
  background: #faf5ff;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted, #64748b);
}

.staff-page5-elevation-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.staff-page5-elevation-legend-item::before {
  content: "";
  width: 14px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.staff-page5-elevation-legend-item--cut::before {
  width: 18px;
  height: 0;
  border-top: 2px dashed #be185d;
  border-radius: 0;
}

.staff-page5-elevation-legend-item--module::before {
  background: rgba(37, 99, 235, 0.85);
  border: 1px solid #1d4ed8;
}

.staff-page5-elevation-legend-item--building::before {
  background: rgba(71, 85, 105, 0.55);
  border: 1px solid #334155;
}

.staff-page5-elevation-legend-item--north::before {
  background: linear-gradient(180deg, #dc2626 0%, #fca5a5 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border-radius: 0;
  width: 10px;
  height: 10px;
}

.staff-page5-plan-controls-col {
  flex: 1 1 min(340px, 42%);
  min-width: 0;
}

.staff-page5-plan-canvas-col {
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
}

.staff-page5-plan-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #dbe3ef);
  background: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
  position: sticky;
  top: 0;
  z-index: 24;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(6px);
}

.staff-page5-plan-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.staff-page5-plan-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  min-width: 0;
}

.staff-page5-plan-toolbar-field input,
.staff-page5-plan-toolbar-field select {
  font-size: 0.82rem;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, #cbd5e1);
  background: #fff;
  color: var(--text, #0f172a);
  min-width: 0;
}

.staff-page5-plan-toolbar-field input[type="number"] {
  width: 4.8rem;
}

.staff-page5-plan-toolbar-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px dashed #fdba74;
  background: #fff7ed;
  font-size: 0.78rem;
  color: #9a3412;
}

.staff-page5-plan-toolbar-rec.hidden {
  display: none;
}

.staff-page5-plan-toolbar-btn {
  align-self: flex-end;
  white-space: nowrap;
  font-size: 0.75rem;
  padding: 5px 10px;
}

.staff-page5-plan-manual-bar.staff-page5-plan-toolbar-row {
  padding-top: 4px;
  border-top: 1px dashed #cbd5e1;
  align-items: center;
}

#staffPage5ElevationWrap .staff-page5-elevation-cut-bar {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #dbe3ef);
  background: #faf5ff;
}

.staff-page5-plan-canvas-col .staff-page5-plan-wrap {
  margin-top: 0;
}

.staff-page5-plan-canvas-col .staff-page5-plan-legend-details {
  margin-top: 10px;
}

@media (max-width: 1100px) {
  .staff-page5-plan-drawings-row:not(.staff-page5-plan-drawings-row--with-widgets) {
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-page5-plan-main-row {
    flex-direction: column;
    align-items: stretch;
  }

  .staff-page5-plan-controls-col,
  .staff-page5-plan-canvas-col {
    flex-basis: auto;
    max-width: none;
  }
}

@media print {
  body.staff-print-plan-page5 .staff-page5-plan-drawings-row,
  body.staff-print-plan-page5 .staff-page5-plan-main-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 0.75rem;
  }
}

.staff-page5-plan-intro {
  margin: 0 0 0.5rem;
  line-height: 1.45;
}

/* 축척 평면도: SVG와 동일 색상의 도면 기호(범례) */
.staff-page5-plan-legend {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
}

.staff-page5-plan-legend-heading {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-secondary);
  margin-bottom: 8px;
}

.staff-page5-plan-legend-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
}

.staff-page5-plan-legend-list strong {
  color: var(--text);
  font-weight: 600;
}

.staff-page5-plan-legend-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.staff-page5-plan-legend-swatch {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  margin-top: 1px;
  box-sizing: border-box;
}

.staff-page5-plan-legend-swatch-grid {
  background-color: #f1f5f9;
  background-image:
    linear-gradient(#64748b 1px, transparent 1px),
    linear-gradient(90deg, #64748b 1px, transparent 1px);
  background-size: 6px 6px;
  background-position: -1px -1px;
  border: 1px solid #94a3b8;
}

.staff-page5-plan-legend-swatch-parcel {
  background: rgba(37, 99, 235, 0.06);
  border: 1px dashed #2563eb;
}

.staff-page5-plan-legend-swatch-install {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid #0284c7;
}

.staff-page5-plan-legend-swatch-module {
  background: rgba(37, 99, 235, 0.75);
  border: 1px solid #1e3a8a;
}

.staff-page5-plan-legend-swatch-inverter {
  background: rgba(245, 158, 11, 0.9);
  border: 1px solid #b45309;
}

.staff-page5-plan-legend-swatch-building {
  background: rgba(71, 85, 105, 0.55);
  border: 1px solid #1e293b;
}

.staff-page5-plan-legend-swatch-shadow {
  background: rgba(30, 41, 59, 0.28);
  border: 1px dashed rgba(30, 41, 59, 0.7);
}

.staff-page5-plan-legend-swatch-shaded-module {
  background: rgba(100, 116, 139, 0.7);
  border: 1px solid #334155;
}

.staff-page5-plan-section-title {
  margin: 14px 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}
.staff-page5-plan-section-title--plan {
  margin-top: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.staff-page5-elevation-svg {
  min-height: 180px;
  background: #fafafa;
}

.staff-page5-plan-legend-note {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}

.staff-page5-plan-import {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 0.5rem;
}

.staff-page5-plan-import-status {
  margin: 0 0 0.5rem;
  line-height: 1.45;
}

.staff-page5-plan-import-status:not(.hidden) {
  color: var(--ink-secondary);
}

/** 건물 외곽이 평면도에 올라와 있을 때(다시 누르면 숨김) */
#staffPage5PlanImportBuilding.staff-page5-plan-import-building--on {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}
#staffPage5PlanImportBuilding.staff-page5-plan-import-building--on:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.staff-page5-plan-empty {
  margin: 0;
  line-height: 1.45;
}

.staff-page5-plan-wrap {
  margin-top: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-soft);
  overflow: visible;
}

.staff-page5-elevation-cut-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px 4px;
  font-size: 0.85rem;
  color: var(--muted);
}

.staff-page5-elevation-cut-bar label {
  font-weight: 600;
  color: var(--text);
}

.staff-page5-elevation-cut-bar input[type="range"] {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 320px;
}

.staff-page5-elevation-cut-value {
  font-variant-numeric: tabular-nums;
  min-width: 7.5em;
  color: var(--text);
}

.staff-page5-elevation-gap-bar {
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.staff-page5-elevation-gap-bar input[type="range"] {
  min-width: 8rem;
  flex: 1 1 10rem;
}

.staff-page5-elevation-gap-eff {
  font-size: 0.85em;
  color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
}

.staff-page5-elevation-caption {
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.65);
}

.staff-page5-elevation-caption.hidden {
  display: none;
}

.staff-page5-elevation-caption-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 14px;
}

.staff-page5-elevation-caption-text {
  flex: 1 1 12rem;
  min-width: 0;
}

.staff-page5-elevation-caption-line {
  margin: 0 0 3px;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.staff-page5-elevation-caption-legend {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.staff-page5-elevation-caption-sun {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 0.72rem;
  line-height: 1.45;
  font-weight: 600;
  color: #b45309;
  white-space: nowrap;
}

.staff-page5-elevation-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(2px);
  border-radius: inherit;
}

.staff-page5-elevation-loading.hidden {
  display: none;
}

.staff-page5-elevation-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(148, 163, 184, 0.35);
  border-top-color: var(--accent, #2563eb);
  border-radius: 50%;
  animation: address-search-spinner 0.75s linear infinite;
}

.staff-page5-elevation-loading-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

#staffPage5ElevationWrap.staff-page5-elevation-wrap--loading .staff-page5-plan-svg-clickable {
  pointer-events: none;
  cursor: wait;
}

#staffPage5ElevationWrap.staff-page5-elevation-wrap--loading .staff-page5-plan-svg-zoom-hint {
  opacity: 0;
}

.staff-page5-plan-svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 820px);
  margin-left: 0;
  margin-right: auto;
  background: #f8fafc;
  overflow: visible;
}

/* 축척 평면도 1m 격자: 미리보기에서 보이도록 화면 픽셀 두께(내부 SVG style 보강) */
.staff-page5-plan-svg .staff-plan-meter-grid line {
  vector-effect: non-scaling-stroke;
  stroke: #64748b;
  stroke-opacity: 0.78;
  stroke-width: 1.35px;
  fill: none;
}

/* 실제 배치 모듈·인버터 수 카드 위젯 */
.staff-page5-plan-count-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px 6px;
  background: #f0f4ff;
  border-top: 1px solid #c7d4f5;
}
.staff-page5-plan-count-bar.hidden { display: none; }
.staff-page5-plan-custom-widget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 6px 10px;
  border: 1px solid #d6deea;
  border-radius: 10px;
  background: #f7faff;
}
.staff-page5-plan-custom-widget label {
  font-size: 12px;
  color: #465264;
  font-weight: 600;
}
.staff-page5-plan-custom-widget input {
  width: 70px;
  padding: 4px 6px;
}
.staff-page5-plan-manual-mode-badge {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid #cbd5e1;
  color: #334155;
  background: #f8fafc;
}
.staff-page5-plan-manual-mode-badge.is-manual {
  border-color: #fdba74;
  color: #9a3412;
  background: #fff7ed;
}
.staff-page5-plan-manual-mode-badge.is-auto {
  border-color: #93c5fd;
  color: #1d4ed8;
  background: #eff6ff;
}

.spc-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: #fff;
  border-radius: 8px;
  padding: 5px 12px 5px 10px;
  box-shadow: 0 1px 3px rgba(30, 64, 175, 0.1);
  border: 1px solid #dbeafe;
  white-space: nowrap;
}
.spc-chip--inv {
  border-color: #fde68a;
  box-shadow: 0 1px 3px rgba(180, 83, 9, 0.1);
}
.spc-chip--area {
  border-color: #d1fae5;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.1);
}
.spc-chip--meta {
  border-color: #d6deea;
  box-shadow: none;
  gap: 6px;
}
.spc-chip--compare {
  border-color: #c7d2fe;
  background: #eef2ff;
  box-shadow: none;
  gap: 6px;
}
.spc-num {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: #1e3a8a;
  letter-spacing: -0.02em;
}
.spc-chip--inv .spc-num { color: #92400e; }
.spc-chip--area .spc-num { color: #065f46; }
.spc-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e3a8a;
  margin-right: 2px;
}
.spc-chip--inv .spc-unit { color: #92400e; }
.spc-chip--area .spc-unit { color: #065f46; }
.spc-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: #475569;
  margin-left: 2px;
}
.spc-sub {
  font-size: 0.7rem;
  color: #64748b;
  margin-left: 4px;
}
.spc-sub--warn {
  color: #b45309;
  font-weight: 600;
}
.spc-chip--warn {
  border-color: #fcd34d;
  background: #fffbeb;
}

.staff-page5-plan-svg-foot {
  margin: 0;
  padding: 6px 10px 2px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: left;
  direction: ltr;
  unicode-bidi: plaintext;
  background: #f8fafc;
}

/* 도면 클릭 영역 */
.staff-page5-plan-svg-clickable {
  position: relative;
  display: block;
  cursor: zoom-in;
}
.staff-page5-plan-svg-clickable:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
.staff-page5-plan-svg-zoom-hint {
  position: absolute;
  bottom: 8px;
  right: 10px;
  padding: 3px 8px;
  font-size: 0.68rem;
  color: #fff;
  background: rgba(15, 23, 42, 0.52);
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
  white-space: nowrap;
}
.staff-page5-plan-svg-clickable:hover .staff-page5-plan-svg-zoom-hint,
.staff-page5-plan-svg-clickable:focus-visible .staff-page5-plan-svg-zoom-hint {
  opacity: 1;
}

/* 확대 모달 */
.plan-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-zoom-modal[hidden] {
  display: none;
}
.plan-zoom-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.plan-zoom-modal-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  max-width: min(96vw, 1200px);
  max-height: 94vh;
  width: 90vw;
  overflow: hidden;
}
.plan-zoom-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: rgba(15, 23, 42, 0.12);
  color: #1e293b;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.plan-zoom-modal-close:hover {
  background: rgba(15, 23, 42, 0.22);
}
.plan-zoom-modal-toolbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 0;
}
.plan-zoom-modal-selection-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: #1e293b;
}
.plan-zoom-modal-selection-delta {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}
.plan-zoom-modal-roof-selector {
  flex: 0 0 auto;
  margin: 8px 16px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.plan-zoom-modal-svg-wrap {
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px 16px 4px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.plan-zoom-modal-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(94vh - 60px);
  pointer-events: auto;
  user-select: none;
}
.plan-zoom-modal.is-building-pick .plan-zoom-modal-svg polygon.staff-plan-building.is-on-parcel.is-roof-base[data-roof-building-idx] {
  cursor: pointer;
  transition: stroke-width 0.12s ease, filter 0.12s ease;
}
.plan-zoom-modal.is-building-pick .plan-zoom-modal-svg polygon.staff-plan-building.is-on-parcel.is-roof-base[data-roof-building-idx]:hover {
  stroke-width: 0.22;
  filter: brightness(1.05);
}
/* 건물 선택 모드: 모듈이 건물 위에 있어 폴리곤 클릭이 막히지 않도록 통과 */
.plan-zoom-modal.is-building-pick .plan-zoom-modal-svg .staff-plan-module,
.plan-zoom-modal.is-building-pick .plan-zoom-modal-svg .staff-plan-inverter {
  pointer-events: none;
}
.plan-zoom-modal-foot {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 16px 10px;
  font-size: 0.7rem;
  color: var(--muted);
  background: #f8fafc;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* 입면도 확대 모달: 줌 툴바 + SVG 영역 */
.elevation-zoom-modal-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 48px 4px 16px;
  flex-wrap: wrap;
}
.elevation-zoom-modal-toolbar-hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: auto;
}
.elevation-zoom-modal-box .elevation-zoom-modal-svg-wrap {
  padding-top: 0;
}
.elevation-zoom-modal-box .plan-zoom-modal-svg.staff-page5-elevation-svg {
  max-height: min(82vh, 900px);
  width: 100%;
  background: #f8fafc;
}

.staff-page5-plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.staff-page5-plan-designer {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
}

.staff-page5-plan-designer summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
}

.staff-page5-plan-designer-hint {
  margin: 8px 0 6px;
}

.staff-page5-plan-designer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px 14px;
  align-items: end;
  margin-top: 8px;
}

.staff-page5-plan-designer-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

.staff-page5-plan-designer-grid input {
  font-size: 0.85rem;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
}

.staff-page5-plan-designer-grid select {
  font-size: 0.85rem;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  max-width: 100%;
}

.staff-page5-plan-dir-label {
  grid-column: 1 / -1;
}

.staff-page5-plan-preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.staff-page5-plan-preset-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.staff-page5-plan-preset-row .small {
  padding: 4px 10px;
  font-size: 0.75rem;
}

/* ── 배치 설계 옵션 하단 적용 버튼 ── */
.staff-page5-plan-apply-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.staff-page5-plan-apply-btn {
  font-size: 0.8rem;
  padding: 6px 16px;
  white-space: nowrap;
}
.staff-page5-plan-apply-status {
  font-size: 0.78rem;
  color: var(--success, #16a34a);
  font-weight: 600;
  min-width: 60px;
}

/* ── 5단계 단계별 블록 ── */
.staff-page5-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: start;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.staff-page5-top-row .staff-page5-phase-block {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.staff-page5-phase-block--equipment .staff-page5-module-block {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.staff-page5-equipment-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.staff-page5-equipment-row {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-secondary, #475569);
  min-width: 0;
}

.staff-page5-equipment-row select {
  width: 100%;
  font-size: 0.88rem;
  padding: 0.42rem 0.55rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border, #cbd5e1);
  background: var(--panel, #fff);
  color: var(--ink, #0f172a);
}

.staff-page5-equipment-add-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.staff-page5-catalog-dialog {
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: 0;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.staff-page5-catalog-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
}

.staff-page5-catalog-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--panel-soft, #f8fafc);
}

.staff-page5-catalog-dialog__head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.staff-page5-catalog-dialog__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

.staff-page5-catalog-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 900px) {
  .staff-page5-top-row {
    grid-template-columns: 1fr;
  }
}

.staff-page5-phase-block {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

/* ── Step 5 자동 면적 감지 힌트 ── */
.staff-page5-auto-area-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}
.staff-page5-auto-area-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: var(--radius-md, 8px);
  flex-wrap: wrap;
  row-gap: 3px;
}
.staff-page5-auto-area-label {
  font-size: 0.73rem;
  font-weight: 600;
  color: #166534;
  white-space: nowrap;
}
.staff-page5-auto-area-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: #15803d;
  white-space: nowrap;
}
.staff-page5-auto-area-source {
  font-size: 0.68rem;
  color: #4b7c5a;
  max-width: 16rem;
  line-height: 1.3;
}
.staff-page5-phase-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #2563eb);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}

.staff-page5-plan-import-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
}

.staff-page5-plan-actions-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
  margin-right: 2px;
}

/* ── 축척 평면도 h5 부제목 ── */
.staff-page5-plan-subtitle {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.4rem;
}

/* ── 도면 기호 범례 접기 ── */
.staff-page5-plan-legend-details {
  margin-top: 10px;
}
.staff-page5-plan-legend-summary {
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

/* ── 일조 계산기 — nested details 제거 후 flat 섹션 ── */
.staff-page5-shadow-calc-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-secondary, #475569);
  margin: 0 0 6px;
}
.staff-page5-shadow-calc-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.staff-page5-shadow-calc-grid label {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  gap: 0.15rem;
}
.staff-page5-shadow-calc-grid input { width: 5.5rem; }
.staff-page5-shadow-calc-output {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  padding: 0 0.1rem;
}
.staff-page5-shadow-calc-output-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-right: 0.15rem;
}
.staff-page5-shadow-note {
  font-size: 0.75rem;
  color: var(--muted);
}
.staff-page5-shadow-spacing-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0.25rem;
}

@media print {
  body.staff-print-plan-page5 * {
    visibility: hidden !important;
  }
  body.staff-print-plan-page5 #staffFlowPage5,
  body.staff-print-plan-page5 #staffFlowPage5 * {
    visibility: visible !important;
  }
  body.staff-print-plan-page5 #staffFlowPage5 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    background: #fff;
  }
  body.staff-print-plan-page5 .staff-page5-plan-svg {
    max-height: none;
    page-break-inside: avoid;
  }
  body.staff-print-plan-page5 .staff-page5-plan-toolbar {
    position: static;
    box-shadow: none;
    backdrop-filter: none;
  }
  @page {
    size: A4 portrait;
    margin: 12mm;
  }
}

.staff-layout-map-block {
  margin-top: 18px;
}

.staff-layout-map-block h5 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.staff-layout-map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-soft);
}

/* 5단계 맥락 배치도: 툴바 + 내부 정사각 타일(드래그·휠 줌) */
.staff-page5-layout-map-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
  border: none;
  background: transparent;
}

.staff-page5-layout-map-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.staff-page5-layout-map-nav--overlay {
  position: absolute;
  right: 10px;
  left: auto;
  bottom: 10px;
  z-index: 5;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 5px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.staff-page5-layout-map-nav--overlay .staff-page5-layout-map-nav__btn {
  min-width: 30px;
  height: 30px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.staff-page5-layout-map-nav--overlay .staff-page5-layout-map-nav__btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.staff-page5-layout-map-nav--overlay .staff-page5-layout-map-nav__btn--reset {
  padding: 0 10px;
  font-size: 0.72rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.staff-page5-layout-zoom-label {
  display: none;
}

.staff-page5-layout-map-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  touch-action: none;
  overscroll-behavior: contain;
}

.staff-page5-layout-map-pan {
  position: absolute;
  inset: 0;
}

.staff-page5-layout-map-pan .layout-map-leaflet,
.staff-page5-layout-map-pan .staff-layout-map-image,
.staff-page5-layout-map-pan .staff-layout-map-svg,
.customer-context-map__inner .layout-map-leaflet,
.customer-layout-map-zoom-modal__inner .layout-map-leaflet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.layout-map-leaflet {
  z-index: 0;
  background: #1a2332;
}

.layout-map-leaflet.hidden {
  display: none;
}

.layout-map-pan--leaflet .leaflet-container,
.layout-map-leaflet.leaflet-container {
  width: 100%;
  height: 100%;
  background: #1a2332;
  font: inherit;
  pointer-events: none;
}

/* 고객 결과 맥락 배치도 — 입력 지도처럼 Leaflet이 휠·핀치·드래그 수신 */
.layout-map-pan--leaflet-interactive,
.layout-map-pan--leaflet-interactive .leaflet-container,
.layout-map-pan--leaflet-interactive .layout-map-leaflet.leaflet-container {
  pointer-events: auto !important;
  touch-action: none !important;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.layout-map-pan--leaflet-interactive .leaflet-dragging,
.layout-map-pan--leaflet-interactive.leaflet-dragging {
  cursor: grabbing;
}

/* SVG 오버레이가 위에 있어도 터치·핀치는 Leaflet으로 통과 */
.layout-map-pan--leaflet-interactive .staff-layout-map-svg,
.layout-map-pan--leaflet-interactive .staff-layout-map-image {
  pointer-events: none !important;
  touch-action: none;
}

.layout-map-leaflet .leaflet-tile {
  opacity: 1 !important;
}

.layout-map-pan--leaflet .staff-layout-map-svg {
  transform-origin: 0 0;
}

.layout-map-pan--leaflet .staff-layout-map-image.hidden,
.address-map-frame .address-map-image.hidden {
  display: none;
}

.address-map-frame .layout-map-leaflet,
.address-map-frame .address-map-leaflet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 맥락 배치도 — 지도 우상단 8px inset 미니 나침반 (staff-layout-map-svg 금지 — 100% 확대됨) */
.staff-layout-map-compass-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 3;
  display: none;
  overflow: visible;
  flex: none;
}

.staff-layout-map-compass-overlay .staff-layout-map-compass__label {
  stroke-width: 2px;
}

@media (min-width: 960px) {
  .staff-page5-plan-drawings-row[data-drawing-view="layout"] .staff-layout-map-compass-overlay,
  .staff-rdash-map__frame .staff-layout-map-compass-overlay {
    display: block;
  }
}

.staff-layout-map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.staff-layout-map-image[src=""],
.staff-layout-map-image:not([src]) {
  opacity: 0;
}

.staff-layout-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* 필지 경계(연속지적) — 파란 점선 외곽 */
.staff-layout-map-svg .parcel-fill {
  fill: rgba(37, 99, 235, 0.07);
  stroke: none;
}

.staff-layout-map-svg .parcel-line {
  fill: none;
  stroke: #1d4ed8;
  stroke-width: 2;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
}

/* OSM 건물 footprint: 위성 타일과 동일 정사영 m/px, 순수 2D 폴리곤
   평면도의 .staff-plan-building.is-roof-base 와 동일 색조로 맞춤 */
.staff-layout-map-svg .building-footprint {
  fill: rgba(234, 88, 12, 0.45);
  stroke: rgba(146, 64, 14, 0.90);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.staff-layout-map-svg.is-map-gesturing {
  pointer-events: none !important;
}
.staff-layout-map-svg.is-map-gesturing .layout-axis-label {
  display: none;
}

.staff-layout-map-svg .module-cell {
  fill: #111827;
  stroke: #ffffff;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.staff-layout-map-svg .module-cell--shaded {
  fill: #475569;
  stroke: #ffffff;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.staff-layout-map-svg .module-cell.is-segment-selected {
  fill: #2563eb;
  stroke: #ffffff;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(37, 99, 235, 0.75));
}

.staff-layout-map-svg .module-cell.is-segment-dimmed {
  fill: rgba(17, 24, 39, 0.22);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.staff-layout-map-svg .module-cell--shaded.is-segment-selected {
  fill: #1d4ed8;
}

.staff-layout-map-svg .module-cell--shaded.is-segment-dimmed {
  fill: rgba(71, 85, 105, 0.28);
}

.staff-layout-map-svg .building-footprint.is-segment-selected-footprint {
  fill: rgba(37, 99, 235, 0.35);
  stroke: rgba(29, 78, 216, 0.95);
  stroke-width: 2px;
}

.staff-layout-map-svg .building-footprint.is-segment-dimmed-footprint {
  fill: rgba(234, 88, 12, 0.18);
  stroke: rgba(146, 64, 14, 0.35);
  stroke-width: 1px;
}

.staff-page5-plan-svg .staff-plan-module.is-segment-selected {
  fill: #2563eb;
  stroke: #1e40af;
  stroke-width: 0.06;
}

.staff-page5-plan-svg .staff-plan-module.is-segment-dimmed {
  fill: rgba(17, 24, 39, 0.18);
  stroke: rgba(15, 23, 42, 0.25);
  stroke-width: 0.03;
}

.staff-layout-map-svg .module-cell.is-block-selected {
  fill: #059669;
  stroke: #047857;
  stroke-width: 1.4px;
  filter: drop-shadow(0 0 2px rgba(5, 150, 105, 0.45));
}

.staff-layout-map-svg .module-cell.is-block-dimmed {
  fill: rgba(17, 24, 39, 0.12);
  stroke: rgba(15, 23, 42, 0.2);
  stroke-width: 0.8px;
}

.staff-page5-plan-svg .staff-plan-module.is-block-selected {
  fill: #059669;
  stroke: #047857;
  stroke-width: 0.07;
}

.staff-page5-plan-svg .staff-plan-module.is-block-dimmed {
  fill: rgba(17, 24, 39, 0.14);
  stroke: rgba(15, 23, 42, 0.22);
  stroke-width: 0.03;
}

.staff-page5-plan-svg.is-axis-pick .staff-plan-module,
.plan-zoom-modal-svg.is-axis-pick .staff-plan-module,
.staff-layout-map-svg .module-cell[data-plan-block-band] {
  cursor: pointer;
}

.staff-page5-plan-svg .staff-plan-module.is-row-selected,
.plan-zoom-modal-svg .staff-plan-module.is-row-selected {
  fill: #ea580c;
  stroke: #c2410c;
  stroke-width: 0.08;
}

.staff-page5-plan-svg .staff-plan-module.is-col-selected,
.plan-zoom-modal-svg .staff-plan-module.is-col-selected {
  fill: #7c3aed;
  stroke: #5b21b6;
  stroke-width: 0.08;
}

.staff-page5-plan-svg .staff-plan-module.is-axis-selected,
.plan-zoom-modal-svg .staff-plan-module.is-axis-selected {
  fill: #e11d48;
  stroke: #9f1239;
  stroke-width: 0.09;
}

.staff-layout-map-svg .module-cell.is-row-selected {
  fill: #ea580c;
  stroke: #c2410c;
  stroke-width: 1.6px;
}

.staff-layout-map-svg .module-cell.is-col-selected {
  fill: #7c3aed;
  stroke: #5b21b6;
  stroke-width: 1.6px;
}

.staff-layout-map-svg .module-cell.is-axis-selected {
  fill: #e11d48;
  stroke: #9f1239;
  stroke-width: 1.8px;
  filter: drop-shadow(0 0 3px rgba(225, 29, 72, 0.45));
}

.staff-layout-map-svg .layout-axis-label {
  fill: #0f766e;
  font-weight: 700;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 3px;
}

.staff-layout-map-svg .layout-axis-label--col { fill: #6d28d9; }
.staff-layout-map-svg .layout-axis-label--row { fill: #c2410c; }
.staff-layout-map-svg .layout-axis-label.is-active { fill: #9f1239; }

.staff-page5-plan-svg .staff-plan-building.is-segment-selected-footprint {
  fill: rgba(37, 99, 235, 0.28);
  stroke: rgba(29, 78, 216, 0.9);
  stroke-width: 0.08;
}

.staff-page5-plan-svg .staff-plan-building.is-segment-dimmed-footprint {
  fill: rgba(234, 88, 12, 0.12);
  stroke: rgba(146, 64, 14, 0.35);
  stroke-width: 0.04;
}

.staff-layout-map-svg .inverter-cell {
  fill: rgba(245, 158, 11, 0.85);
  stroke: rgba(245, 158, 11, 1);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

/* 평면도 설치면 inset(그린이 없을 때) */
.staff-layout-map-svg .staff-layout-map-install {
  fill: rgba(14, 165, 233, 0.18);
  stroke: rgba(3, 105, 161, 0.75);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

/* 고객·직원이 그린 설치 구역 — 필지(파란 점선)와 구분되는 초록 실선 */
.staff-layout-map-svg .staff-layout-map-drawn-zone {
  fill: rgba(16, 185, 129, 0.30);
  stroke: #047857;
  stroke-width: 2.75px;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
}

.staff-layout-map-svg .staff-layout-map-install-setback {
  fill: none;
  stroke: rgba(37, 99, 235, 0.55);
  stroke-width: 1.5px;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.staff-layout-map-svg .staff-layout-plan-overlay {
  pointer-events: none;
}

/* 위성·맥락 배치도 — 나침반(남쪽 강조) */
.staff-layout-map-svg .staff-layout-map-compass,
.staff-layout-map-compass-overlay .staff-layout-map-compass,
.layout-map-svg .staff-layout-map-compass {
  pointer-events: none;
}

.staff-layout-map-svg .staff-layout-map-compass__ring,
.staff-layout-map-compass-overlay .staff-layout-map-compass__ring,
.layout-map-svg .staff-layout-map-compass__ring {
  fill: rgba(255, 255, 255, 0.92);
  stroke: #334155;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.staff-layout-map-compass-overlay .staff-layout-map-compass__ring {
  stroke-width: 1px;
}

.staff-layout-map-svg .staff-layout-map-compass__south-sector,
.staff-layout-map-compass-overlay .staff-layout-map-compass__south-sector,
.layout-map-svg .staff-layout-map-compass__south-sector {
  fill: rgba(239, 68, 68, 0.22);
  stroke: none;
}

.staff-layout-map-svg .staff-layout-map-compass__north,
.staff-layout-map-compass-overlay .staff-layout-map-compass__north,
.layout-map-svg .staff-layout-map-compass__north {
  fill: #dc2626;
  stroke: #7f1d1d;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.staff-layout-map-svg .staff-layout-map-compass__south-arrow,
.staff-layout-map-compass-overlay .staff-layout-map-compass__south-arrow,
.layout-map-svg .staff-layout-map-compass__south-arrow {
  fill: #0f172a;
  stroke: #ffffff;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.staff-layout-map-svg .staff-layout-map-compass__label,
.staff-layout-map-compass-overlay .staff-layout-map-compass__label,
.layout-map-svg .staff-layout-map-compass__label {
  fill: #334155;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

.staff-layout-map-compass-overlay .staff-layout-map-compass__label {
  stroke-width: 2px;
}

.staff-layout-map-svg .staff-layout-map-compass__label--n,
.staff-layout-map-compass-overlay .staff-layout-map-compass__label--n,
.layout-map-svg .staff-layout-map-compass__label--n {
  fill: #7f1d1d;
}

.staff-layout-map-svg .staff-layout-map-compass__label--s,
.staff-layout-map-compass-overlay .staff-layout-map-compass__label--s,
.layout-map-svg .staff-layout-map-compass__label--s {
  fill: #b91c1c;
  font-weight: 800;
}

.staff-layout-legend {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}

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

.staff-layout-legend span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.staff-legend-parcel::before {
  background: rgba(37, 99, 235, 0.12);
  border: 2px dashed #1d4ed8;
  box-sizing: border-box;
}

.staff-legend-drawn-zone::before {
  background: rgba(16, 185, 129, 0.35);
  border: 2px solid #047857;
  box-sizing: border-box;
}

.staff-legend-module::before {
  background: rgba(17, 24, 39, 0.9);
}

.staff-legend-inverter::before {
  background: rgba(245, 158, 11, 0.9);
}

.staff-legend-building::before {
  background: rgba(234, 88, 12, 0.45);
  border: 1px solid rgba(180, 60, 10, 0.75);
}

.staff-legend-south::before {
  background: linear-gradient(180deg, #dc2626 0%, #fca5a5 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border-radius: 0;
  width: 9px;
  height: 9px;
}

.staff-layout-note {
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: var(--muted);
}

/* 주소 지도 영역 */
.address-map-area {
  margin-bottom: 16px;
}

/* 지도 프레임 위 주소 검색 오버레이 */
.address-map-visual {
  position: relative;
  width: 100%;
}

/* 지도 위 오버레이(레거시) — 현재 HTML은 `--above-map` 스택 배치 */
.address-search-shell.address-search-shell--above-map {
  position: relative;
  z-index: auto;
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  margin: 0 0 0.75rem;
  backdrop-filter: none;
}

.address-search-shell--above-map .address-search-results:not(:empty) {
  margin-top: 0.35rem;
  max-height: min(14rem, 42vh);
}

.staff-input-reset-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.address-search-shell.address-search-shell--map-overlay {
  position: absolute;
  z-index: 25;
  top: 0.45rem;
  left: 0.45rem;
  width: min(26.5rem, calc(100% - 0.9rem));
  max-height: min(72vh, calc(100% - 0.9rem));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.55rem 0.72rem 0.62rem;
  margin: 0;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.14), 0 2px 10px rgba(37, 99, 235, 0.08);
  backdrop-filter: saturate(150%) blur(12px);
  background: color-mix(in srgb, var(--panel, #fff) 93%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 28%, var(--border, #e2e8f0));
}

.address-search-shell.address-search-shell--map-overlay.address-search-shell--panel-collapsed {
  max-height: none;
  overflow: visible;
  width: auto;
  min-width: min(11rem, calc(100% - 0.9rem));
}

.address-search-shell--map-overlay:focus-within {
  transform: none;
}

.address-search-shell--map-overlay.is-focused {
  transform: none;
}

.address-search-shell--map-overlay .address-search-results:not(:empty) {
  margin-top: 0.3rem;
  max-height: min(12.5rem, 36vh);
}

.address-search-integrations {
  margin-top: 0.65rem;
}

.address-map-title {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.address-map-frame {
  position: relative;
  width: 100%;
  min-height: 14rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--muted-bg);
  aspect-ratio: 16 / 9;
}

.address-map-pan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.address-map-pan--interactive {
  cursor: grab;
  touch-action: none;
}

.address-map-pan--dragging {
  cursor: grabbing;
}

.address-map-pan .address-map-leaflet,
.address-map-pan .address-map-image,
.address-map-pan .address-map-parcel-svg,
.address-map-pan .address-map-parcel-pick-svg,
.address-map-pan .address-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.address-map-leaflet {
  z-index: 0;
  background: var(--muted-bg);
}

.address-map-leaflet.hidden {
  display: none;
}

.address-map-pan--leaflet {
  cursor: grab;
  /* 모바일: 페이지 스크롤과 지도 팬/핀치 줌이 경쟁하지 않도록 */
  touch-action: none;
}

.address-map-pan--leaflet .address-map-parcel-svg,
.address-map-pan--leaflet .address-map-parcel-pick-svg,
.address-map-pan--leaflet .address-map-overlay {
  transform-origin: 0 0;
}

.address-map-pan--leaflet .leaflet-container,
.address-map-leaflet.leaflet-container {
  width: 100%;
  height: 100%;
  /* 타일 로드 전·사이 빈칸이 덜 눈에 띄도록 위성톤에 가까운 배경 */
  background: #1a2332;
  font: inherit;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Leaflet 기본 타일 페이드가 꺼져도 opacity 트랜지션 잔여 방지 */
.address-map-leaflet .leaflet-tile,
.address-map-pan--leaflet .leaflet-tile {
  opacity: 1 !important;
}

.address-map-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 0;
}

.address-map-pan--leaflet .address-map-image.hidden {
  display: none;
}

.address-map-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  flex: 0 0 auto;
}

.address-map-nav .secondary.small {
  min-width: 2rem;
  padding-inline: 0.45rem;
}

.address-map-zoom-label {
  /* 줌 레벨 숫자는 사용자에게 노출하지 않음 (− / + / 중심·줌 만 사용) */
  display: none;
}

.address-map-parcel-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.address-map-parcel-svg.hidden {
  display: none;
}

.address-map-parcel-svg .parcel-fill {
  fill: rgba(37, 99, 235, 0.12);
  stroke: rgba(37, 99, 235, 0.55);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.address-map-parcel-svg .parcel-line {
  fill: none;
  stroke: #1d4ed8;
  stroke-width: 2;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
}

/* 적용된 그린 설치면 — 필지(파란 점선)와 구분 */
.address-map-parcel-svg .address-map-drawn-zone {
  fill: rgba(16, 185, 129, 0.28);
  stroke: #047857;
  stroke-width: 2.5;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.address-map-parcel-svg .building-footprint-fill {
  fill: rgba(234, 88, 12, 0.18);
  stroke: rgba(234, 88, 12, 0.45);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.address-map-parcel-svg .building-footprint-line {
  fill: none;
  stroke: rgba(194, 65, 12, 0.95);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* 여러 필지 모드(선택 모드 OFF): 누적 선택 필지 — 대표와 동일 파란색 */
.address-map-parcel-svg .parcel-multi-secondary-fill {
  fill: rgba(37, 99, 235, 0.12);
  stroke: rgba(37, 99, 235, 0.55);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.address-map-parcel-svg .parcel-multi-secondary-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* 필지 선택 모드: 화면 범위 연속지적 다각형(실데이터) — 위성 위에서도 선이 보이게 */
.address-map-parcel-svg.parcel-pick-mode .parcel-pick-cell {
  fill: rgba(250, 204, 21, 0.07);
  stroke: rgba(253, 224, 71, 0.95);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.address-map-leaflet .address-map-parcel-wms {
  pointer-events: none;
  filter: contrast(1.2) saturate(1.15);
}

.address-map-parcel-svg.parcel-pick-mode .parcel-pick-hover {
  fill: rgba(37, 99, 235, 0.15);
  stroke: var(--accent, #2563eb);
  stroke-width: 2;
}

.address-map-parcel-svg.parcel-pick-mode .parcel-pick-current {
  fill: rgba(37, 99, 235, 0.1);
  stroke: var(--accent, #2563eb);
  stroke-width: 2.2;
}

/* 여러 필지 모드: 누적 선택 필지 — 대표와 동일 파란색 */
.address-map-parcel-svg.parcel-pick-mode .parcel-pick-selected {
  fill: rgba(37, 99, 235, 0.1);
  stroke: var(--accent, #2563eb);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}

.address-map-parcel-svg .parcel-pick-missing-ring {
  fill: rgba(255, 152, 0, 0.35);
  stroke: #e65100;
  stroke-width: 1.5;
}

.address-map-parcel-svg .parcel-pick-missing-label {
  fill: #e65100;
  font-size: 9px;
  pointer-events: none;
}

.address-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.address-map-marker {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  transform: translate(-50%, -100%);
  background: #dc2626;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
}

.address-map-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #dc2626;
}

.address-map-area-circle {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 2px solid rgba(11, 113, 194, 0.9);
  background: rgba(14, 165, 233, 0.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset;
}

.address-map-meta {
  margin: 8px 2px 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.address-map-overlay-meta {
  margin: 4px 2px 0;
  font-size: 0.76rem;
  color: #36546e;
}

/* 설치 희망자 입력 지도 — 필지 호버·클릭 지번 툴팁 */
/* SVG 루트는 이벤트 통과 — auto 이면 박스 전체가 Leaflet 휠/드래그를 가로챔 */
body[data-role="customer"] .address-map-parcel-svg.parcel-jibun-interactive {
  pointer-events: none;
}

body[data-role="customer"] .address-map-parcel-svg .parcel-jibun-hit {
  fill: rgba(37, 99, 235, 0.01);
  stroke: none;
  pointer-events: auto;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}

body[data-role="customer"] .address-map-parcel-svg .parcel-jibun-hit:hover,
body[data-role="customer"] .address-map-parcel-svg .parcel-jibun-hit:focus {
  fill: rgba(37, 99, 235, 0.2);
  outline: none;
}

body[data-role="customer"] .address-map-parcel-svg.parcel-pick-mode .parcel-pick-cell {
  pointer-events: auto;
  cursor: pointer;
}

.address-map-parcel-tooltip {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, calc(-100% - 10px));
  max-width: min(280px, calc(100% - 16px));
  margin: 0;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
  pointer-events: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.address-map-parcel-tooltip--pinned {
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35);
  outline: 1px solid rgba(96, 165, 250, 0.55);
}

.address-map-parcel-tooltip.hidden {
  display: none;
}

.staff-parcel-pick-multi {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  background: rgba(248, 250, 252, 0.85);
}

@media (max-width: 720px) {
  body[data-role="customer"] .staff-parcel-pick-multi-label,
  body[data-role="customer"] .staff-parcel-pick-multi-hint {
    display: none !important;
  }

  body[data-role="customer"] .staff-parcel-pick-multi .staff-parcel-pick-list {
    max-height: none;
    margin-top: 0;
  }

  body[data-role="customer"] .staff-parcel-pick-row {
    padding: 0.65rem 0.7rem;
    gap: 0.45rem 0.55rem;
  }

  body[data-role="customer"] .staff-parcel-pick-snippet {
    flex: 1 1 100%;
    font-size: 0.8125rem;
  }

  body[data-role="customer"] .staff-parcel-pick-actions {
    margin-left: auto;
  }
}

.staff-parcel-pick-multi-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}

.staff-parcel-pick-multi-hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

.staff-parcel-pick-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.customer-building-zone-list {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 80%, transparent);
}

.customer-building-zone-title {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text, #0f172a);
}

.customer-building-zone-list__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.customer-building-zone-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

.customer-building-zone-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg, #fff);
}

.customer-building-zone-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #0ea5e9) 16%, transparent);
  color: var(--accent, #0369a1);
}

.customer-building-zone-label {
  font-size: 0.8rem;
  font-weight: 600;
  flex: 1 1 auto;
}

.customer-building-zone-meta {
  font-size: 0.75rem;
  color: var(--muted, #64748b);
}

.customer-building-zone-remove {
  margin-left: auto;
}

.staff-parcel-pick-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

.staff-parcel-pick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
}

.staff-parcel-pick-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.staff-parcel-pick-pnu {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

.staff-parcel-pick-snippet {
  flex: 1 1 140px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #0f172a;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-parcel-pick-dialog .staff-parcel-pick-snippet {
  font-size: 0.92rem;
  font-weight: 750;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.35;
}

.staff-parcel-pick-meta {
  font-size: 0.74rem;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.08);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.staff-parcel-pick-meta--loading {
  color: var(--muted, #64748b);
  background: transparent;
  font-style: italic;
}

.staff-parcel-pick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.staff-parcel-pick-clear {
  margin-top: 10px;
}

.address-area-panel {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: var(--shadow-sm);
}

.address-area-panel--result {
  margin-top: 0;
}

.address-area-panel--quick-edit {
  margin: 0;
  padding: var(--space-lg) 0 0;
  border: 0;
  border-top: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.address-area-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.address-area-panel__head h3,
.address-area-panel__head h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.address-area-panel__summary {
  margin: 0.32rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.address-area-panel__site-kind {
  margin: 0.28rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #64748b;
}

.address-area-panel__site-kind--building {
  color: #0f766e;
}

.address-area-panel__site-kind--parcel {
  color: #b45309;
}

.address-area-panel__site-kind--unknown {
  color: #64748b;
}

.address-area-panel--input.address-area-panel--site-building {
  border-color: rgba(13, 148, 136, 0.4);
}

.address-area-panel--input.address-area-panel--site-parcel {
  border-color: rgba(217, 119, 6, 0.4);
}

.address-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}

.address-area-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-md);
}

.address-area-card h4 {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.address-area-card__value {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--ink);
}

.address-area-card__meta {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.address-area-note-list {
  margin: var(--space-md) 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.apartment-energy-panel {
  margin: 0 0 var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top left, rgba(16, 185, 129, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.99));
  box-shadow: var(--shadow-sm);
}

.apartment-energy-panel.is-live-data {
  border-color: rgba(16, 185, 129, 0.24);
  background:
    radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(244, 255, 249, 0.98), rgba(255, 255, 255, 0.99));
}

.apartment-energy-panel.is-derived-data {
  border-color: rgba(245, 158, 11, 0.24);
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.99));
}

.apartment-energy-panel.is-idle,
.apartment-energy-panel.is-not-apartment {
  border-color: rgba(148, 163, 184, 0.2);
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.99));
}

.apartment-energy-panel.is-error {
  border-color: rgba(239, 68, 68, 0.24);
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 244, 244, 0.98), rgba(255, 255, 255, 0.99));
}

.apartment-energy-panel.is-live-data .address-area-card,
.apartment-energy-panel.is-live-data .apartment-energy-basis-card,
.apartment-energy-panel.is-live-data .apartment-energy-chart-card {
  border-color: rgba(16, 185, 129, 0.18);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.92), rgba(255, 255, 255, 0.96));
}

.apartment-energy-panel.is-derived-data .address-area-card,
.apartment-energy-panel.is-derived-data .apartment-energy-basis-card,
.apartment-energy-panel.is-derived-data .apartment-energy-chart-card {
  border-color: rgba(245, 158, 11, 0.2);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.94), rgba(255, 255, 255, 0.97));
}

.apartment-energy-panel.is-idle .address-area-card,
.apartment-energy-panel.is-idle .apartment-energy-basis-card,
.apartment-energy-panel.is-idle .apartment-energy-chart-card,
.apartment-energy-panel.is-not-apartment .address-area-card,
.apartment-energy-panel.is-not-apartment .apartment-energy-basis-card,
.apartment-energy-panel.is-not-apartment .apartment-energy-chart-card {
  border-color: rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.98));
}

.apartment-energy-panel.is-error .address-area-card,
.apartment-energy-panel.is-error .apartment-energy-basis-card,
.apartment-energy-panel.is-error .apartment-energy-chart-card {
  border-color: rgba(239, 68, 68, 0.18);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.94), rgba(255, 255, 255, 0.98));
}

.apartment-energy-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.apartment-energy-panel__head h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.apartment-energy-panel__summary {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.apartment-energy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-sm) 0 var(--space-md);
}

.apartment-energy-tabs--compact {
  margin: 0;
  gap: 6px;
}

.apartment-energy-tab {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 999px;
  padding: 0.38rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-secondary);
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.apartment-energy-tab:hover {
  border-color: rgba(14, 165, 233, 0.45);
  color: var(--ink);
}

.apartment-energy-tab--active,
.apartment-energy-tab[aria-selected="true"] {
  border-color: rgba(13, 148, 136, 0.55);
  background: rgba(240, 253, 250, 0.95);
  color: #0f766e;
}

.apartment-energy-bill-panel--parcel {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(255, 251, 235, 0.55);
  border: 1px solid rgba(217, 119, 6, 0.22);
}

.apartment-energy-parcel-lead {
  margin: 0 0 var(--space-sm);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.apartment-energy-parcel-site-kind {
  margin: 0 0 var(--space-md);
  font-size: 0.8rem;
  font-weight: 600;
  color: #b45309;
}

.result-apartment-energy-tabs-wrap {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
}

.result-apartment-energy-tabs-label {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

.apartment-energy-panel__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.apartment-energy-panel__meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.apartment-energy-section-head {
  display: grid;
  gap: 0.28rem;
  margin-top: var(--space-md);
}

.apartment-energy-section-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: rgba(14, 116, 144, 0.08);
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.apartment-energy-panel.is-live-data .apartment-energy-section-kicker {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.apartment-energy-panel.is-derived-data .apartment-energy-section-kicker {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.apartment-energy-panel.is-idle .apartment-energy-section-kicker,
.apartment-energy-panel.is-not-apartment .apartment-energy-section-kicker {
  background: rgba(148, 163, 184, 0.14);
  color: #475569;
}

.apartment-energy-panel.is-error .apartment-energy-section-kicker {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.apartment-energy-meta-line {
  display: block;
}

.apartment-energy-basis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-md);
}

.apartment-energy-basis-card {
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.84);
  padding: var(--space-md);
}

.apartment-energy-basis-card h5 {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.apartment-energy-basis-card__body p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.84rem;
}

.apartment-energy-basis-card__body dl {
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.apartment-energy-basis-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.apartment-energy-basis-row dt {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.apartment-energy-basis-row dd {
  margin: 0;
  display: grid;
  gap: 0.18rem;
}

.apartment-energy-basis-row dd strong {
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
}

.apartment-energy-basis-row dd span {
  font-size: 0.78rem;
  color: var(--ink-secondary);
  line-height: 1.4;
}

.apartment-energy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.apartment-energy-badge.is-ok {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.apartment-energy-badge.is-warn {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.apartment-energy-badge.is-error {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.apartment-energy-grid {
  margin-top: var(--space-md);
}

.apartment-energy-grid--evidence {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.apartment-energy-live-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.apartment-energy-live-card {
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.84);
  padding: var(--space-md);
}

.apartment-energy-live-card--live {
  border-color: rgba(16, 185, 129, 0.22);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.98));
}

.apartment-energy-live-card--api-live {
  border-color: rgba(16, 185, 129, 0.28);
  background: linear-gradient(180deg, rgba(220, 252, 231, 0.98), rgba(255, 255, 255, 0.99));
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08) inset;
}

.apartment-energy-live-card--derived {
  border-color: rgba(245, 158, 11, 0.24);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.99));
}

.apartment-energy-live-card--api-derived {
  border-color: rgba(20, 184, 166, 0.22);
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.98), rgba(255, 255, 255, 0.99));
  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.06) inset;
}

.apartment-energy-live-card--muted {
  border-color: rgba(148, 163, 184, 0.2);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.99));
}

.apartment-energy-live-card--error {
  border-color: rgba(239, 68, 68, 0.2);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(255, 255, 255, 0.99));
}

.apartment-energy-live-card h5 {
  margin: 0 0 0.45rem;
  font-size: 0.84rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.apartment-energy-live-card--live h5 {
  color: #047857;
}

.apartment-energy-live-card--api-live h5 {
  color: #047857;
}

.apartment-energy-live-card--derived h5 {
  color: #b45309;
}

.apartment-energy-live-card--api-derived h5 {
  color: #0f766e;
}

.apartment-energy-live-card--error h5 {
  color: #b91c1c;
}

.apartment-energy-live-card__value {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}

.apartment-energy-live-card__meta {
  margin: 0.45rem 0 0;
  font-size: 0.79rem;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.apartment-energy-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.apartment-energy-source-badge.is-api-live {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(220, 252, 231, 0.92);
  color: #047857;
}

.apartment-energy-source-badge.is-api-derived {
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(240, 253, 250, 0.96);
  color: #0f766e;
}

.apartment-energy-source-badge.is-estimate {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 247, 237, 0.98);
  color: #b45309;
}

.apartment-energy-source-badge.is-error {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(254, 242, 242, 0.96);
  color: #b91c1c;
}

.apartment-energy-source-badge.is-muted {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
}

.apartment-energy-live-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.apartment-energy-panel .address-area-card__meta {
  display: grid;
  gap: 0.18rem;
}

.address-area-card.is-api-live,
.apartment-energy-basis-card.is-api-live,
.apartment-energy-chart-card.is-api-live {
  border-color: rgba(16, 185, 129, 0.28);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.06) inset;
}

.address-area-card.is-api-derived,
.apartment-energy-basis-card.is-api-derived,
.apartment-energy-chart-card.is-api-derived {
  border-color: rgba(20, 184, 166, 0.22);
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.05) inset;
}

.address-area-card.is-estimate,
.apartment-energy-basis-card.is-estimate,
.apartment-energy-chart-card.is-estimate {
  border-color: rgba(245, 158, 11, 0.24);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
}

.address-area-card.is-muted,
.apartment-energy-basis-card.is-muted,
.apartment-energy-chart-card.is-muted {
  border-color: rgba(148, 163, 184, 0.18);
}

.address-area-card.is-error,
.apartment-energy-basis-card.is-error,
.apartment-energy-chart-card.is-error {
  border-color: rgba(239, 68, 68, 0.22);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(255, 255, 255, 0.98));
}

.apartment-energy-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.95rem;
}

.apartment-energy-chart-card--wide {
  grid-column: 1 / -1;
}

.apartment-energy-chart-card--cashflow {
  margin-top: 0.95rem;
}

.apartment-energy-chart-card {
  padding: 0.95rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(14, 116, 144, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

.apartment-energy-chart-card__head {
  display: grid;
  gap: 0.24rem;
  margin-bottom: 0.8rem;
}

.apartment-energy-chart-card__head h5 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.apartment-energy-chart-card__head p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--muted);
}

.apartment-energy-compare-chart {
  display: grid;
  gap: 0.8rem;
}

.apartment-energy-savings-highlight {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.apartment-energy-savings-highlight-card {
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.86), rgba(255, 255, 255, 0.96));
  padding: 0.95rem 1rem;
  display: grid;
  gap: 0.3rem;
}

.apartment-energy-savings-highlight__label {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--data-blue);
  letter-spacing: 0.01em;
}

.apartment-energy-savings-highlight__value {
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ink);
  font-weight: 900;
}

.apartment-energy-savings-highlight__household {
  display: grid;
  gap: 0.16rem;
  margin-top: 0.22rem;
  padding: 0.72rem 0.8rem;
  border-radius: 0.9rem;
  background: rgba(14, 116, 144, 0.08);
  border: 1px solid rgba(14, 116, 144, 0.14);
}

.apartment-energy-savings-highlight__household-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--data-blue);
  letter-spacing: 0.01em;
}

.apartment-energy-savings-highlight__household-value {
  font-size: 1.78rem;
  line-height: 1.05;
  font-weight: 950;
  color: var(--ink);
}

.apartment-energy-savings-highlight__household-meta {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-secondary);
}

.apartment-energy-savings-highlight__meta {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.apartment-energy-compare-empty {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--muted);
}

.apartment-energy-line-chart {
  width: 100%;
  aspect-ratio: 340 / 176;
}

.apartment-energy-line-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.apartment-energy-line-grid {
  stroke: rgba(148, 163, 184, 0.24);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.apartment-energy-line-axis {
  fill: var(--muted);
  font-size: 9px;
}

.apartment-energy-line-path {
  fill: none;
  stroke: #64748b;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.apartment-energy-line-dot {
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 1.6;
  fill: #64748b;
}

.apartment-energy-line-dot--ok {
  fill: #9ca3af;
}

.apartment-energy-line-dot--warn {
  fill: #6b7280;
}

.apartment-energy-line-dot--base {
  fill: #1d4ed8;
}

.apartment-energy-line-dot--prod {
  fill: #cbd5e1;
}

.apartment-energy-line-dot--loss {
  fill: #d1d5db;
}

.apartment-energy-line-value {
  fill: var(--ink);
  font-size: 10px;
  font-weight: 700;
}

.apartment-energy-line-label {
  fill: var(--ink-secondary);
  font-size: 9px;
  font-weight: 700;
}

.apartment-energy-line-legend {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.32rem;
}

.apartment-energy-line-legend-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.79rem;
  color: var(--ink-secondary);
}

.apartment-energy-line-legend-item strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.apartment-energy-line-legend-swatch {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.95);
}

.apartment-energy-line-grid--zero {
  stroke: rgba(15, 23, 42, 0.45);
  stroke-width: 1.25;
  stroke-dasharray: none;
}

.apartment-energy-line-path--cashflow {
  stroke: #1e293b;
}

.apartment-energy-line-path--ok {
  stroke: #9ca3af;
}

.apartment-energy-line-path--prod {
  stroke: #cbd5e1;
}

.apartment-energy-line-path--warn {
  stroke: #6b7280;
}

.apartment-energy-line-path--loss {
  stroke: #cbd5e1;
}

.apartment-energy-line-legend-swatch--ok {
  background: #9ca3af;
}

.apartment-energy-line-legend-swatch--warn {
  background: #6b7280;
}

.apartment-energy-line-legend-swatch--base {
  background: #1d4ed8;
}

.apartment-energy-line-legend-swatch--prod {
  background: #cbd5e1;
}

.apartment-energy-line-legend-swatch--loss {
  background: #d1d5db;
}

.apartment-energy-note-list {
  margin-top: 0.9rem;
}

.result .status {
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  font-weight: 600;
  font-size: var(--text-body);
  margin-bottom: var(--space-lg);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}

/* 설치 희망자: 가능 여부 히어로 (중앙, 강조) */
.feasibility-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  font-size: var(--text-subtitle);
  padding: var(--space-2xl);
  margin-bottom: var(--space-xl);
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
  border-radius: var(--radius-xl);
  line-height: var(--leading-relaxed);
  background: var(--panel);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
}

.feasibility-icon {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 0 var(--space-xs);
  flex-shrink: 0;
}

.feasibility-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.feasibility-label {
  font-size: clamp(2.2rem, 1.3vw + 1.5rem, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
}

.feasibility-detail {
  font-size: calc(1rem * var(--font-scale));
  font-weight: 500;
  color: var(--ink-secondary);
  max-width: 100%;
  line-height: var(--leading-relaxed);
}

.result--customer .feasibility-hero {
  padding: 2rem 2.25rem;
  margin-bottom: var(--space-xl);
  gap: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

.result--customer .feasibility-icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--space-sm);
}

.result--customer .feasibility-label {
  font-size: clamp(3rem, 2vw + 1.9rem, 3.7rem);
  letter-spacing: -0.04em;
}

.result--customer .feasibility-detail {
  font-size: calc(1.15rem * var(--font-scale));
}

.status.ok .feasibility-label,
.status.ok .feasibility-icon { color: var(--ok); }
.status.warn .feasibility-label,
.status.warn .feasibility-icon { color: var(--warn); }
.status.fail .feasibility-label,
.status.fail .feasibility-icon { color: var(--danger); }
.result .status:not(.ok):not(.warn):not(.fail) .feasibility-label,
.result .status:not(.ok):not(.warn):not(.fail) .feasibility-icon { color: var(--muted); }

.result-priority-panel {
  margin: 0 0 var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: var(--shadow-sm);
}

.result-priority-panel.is-customer {
  border-color: rgba(14, 116, 144, 0.18);
}

.result-priority-panel.is-staff {
  border-color: rgba(15, 23, 42, 0.16);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
}

.result-priority-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 0.85rem;
}

.result-priority-kicker {
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.result-priority-head h3 {
  margin: 0;
  font-size: var(--font-lg);
}

.result-priority-summary {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.result-priority-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.result-priority-empty {
  color: var(--muted);
}

.result-priority-btn {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: 0.85rem 0.95rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.result-priority-btn:hover,
.result-priority-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
}

.result-priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 1.8rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: rgba(14, 116, 144, 0.1);
  color: var(--data-blue);
  font-size: 0.78rem;
  font-weight: 800;
}

.result-priority-panel.is-staff .result-priority-badge {
  background: rgba(15, 23, 42, 0.08);
  color: var(--ink);
}

.result-priority-copy {
  display: grid;
  gap: 0.15rem;
}

.result-priority-copy strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.result-priority-copy span {
  color: var(--ink-secondary);
  font-size: 0.84rem;
  line-height: 1.45;
}

.customer-glance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.glance-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--panel);
  padding: var(--space-md);
  min-height: 11rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.glance-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.glance-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.result--customer .customer-glance {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.result--customer .glance-card {
  padding: var(--space-md);
  min-height: 12rem;
  border-width: 1.5px;
  box-shadow: var(--shadow);
}

.glance-card[data-glance-card="status"] .feasibility-hero {
  max-width: 100%;
  margin: 0 0 var(--space-sm);
  padding: 0;
  gap: 0.45rem;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.glance-card[data-glance-card="status"] .feasibility-icon {
  width: 2rem;
  height: 2rem;
  margin: 0;
}

.glance-card[data-glance-card="status"] .feasibility-label {
  font-size: clamp(1.55rem, 1.1vw + 1rem, 2.2rem);
}

.glance-card[data-glance-card="status"] .feasibility-detail {
  font-size: 0.9rem;
}

.glance-card.is-live {
  border-color: color-mix(in srgb, var(--ok) 34%, var(--border));
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.glance-card.is-estimate,
.glance-card.is-error {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.kpi-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
}

.glance-k {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.result--customer .glance-k {
  font-size: 1rem;
  font-weight: 700;
}

.glance-v {
  margin: 0;
  font-size: clamp(1.45rem, 1.05vw + 1rem, 2.15rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.result--customer .glance-v {
  font-size: clamp(1.95rem, 1.55vw + 1.4rem, 2.7rem);
  line-height: 1.2;
}

.glance-v.ok {
  color: var(--ok);
}

.glance-v.warn {
  color: var(--warn);
}

.glance-v.fail {
  color: var(--danger);
}

.glance-v.estimate {
  color: var(--danger);
}

.glance-source-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.glance-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  padding: 0.1rem 0.62rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.glance-source-badge.is-live {
  border-color: rgba(5, 150, 105, 0.28);
  background: rgba(5, 150, 105, 0.1);
  color: var(--data-emerald);
}

.glance-source-badge.is-estimate,
.glance-source-badge.is-error {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(220, 38, 38, 0.1);
  color: var(--data-red);
}

.glance-source-badge.is-muted {
  border-color: var(--border);
  background: var(--bg-subtle);
  color: var(--muted);
}

.glance-source-meta {
  margin: 0;
  min-height: 1.35rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  font-weight: 700;
}

.kpi-trend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kpi-trend-up {
  color: var(--data-emerald);
  border-color: rgba(5, 150, 105, 0.28);
  background: rgba(5, 150, 105, 0.1);
}

.kpi-trend-down {
  color: var(--data-red);
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(220, 38, 38, 0.1);
}

.kpi-trend-neutral {
  color: var(--muted);
}

.customer-guided-message {
  margin: 0 0 var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: calc(1.02rem * var(--font-scale));
  line-height: var(--leading-relaxed);
}

.customer-integration-panel {
  margin: 0 0 var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: var(--shadow-sm);
}

.customer-integration-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.customer-integration-head h3 {
  margin: 0 0 0.25rem;
  font-size: var(--font-lg);
}

.customer-integration-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.customer-integration-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.customer-integration-list--detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-integration-list--permit {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.customer-integration-empty {
  margin: 0;
  color: var(--muted);
}

.customer-integration-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.customer-integration-item.is-live {
  border-color: rgba(5, 150, 105, 0.25);
  background: rgba(236, 253, 245, 0.7);
}

.customer-integration-item.is-estimate,
.customer-integration-item.is-error {
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(254, 242, 242, 0.72);
}

.customer-integration-panel + .customer-integration-panel {
  margin-top: var(--space-md);
}

.customer-integration-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.customer-integration-item__head h4 {
  margin: 0;
  font-size: 1rem;
}

.customer-integration-item__source {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.customer-integration-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.customer-integration-badge.is-live {
  border-color: rgba(5, 150, 105, 0.28);
  background: rgba(5, 150, 105, 0.1);
  color: var(--data-emerald);
}

.customer-integration-badge.is-estimate,
.customer-integration-badge.is-error {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(220, 38, 38, 0.1);
  color: var(--data-red);
}

.customer-integration-item__meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  color: var(--ink-secondary);
  font-size: 0.84rem;
  line-height: 1.45;
}

.customer-integration-item__meta .apartment-energy-meta-line {
  margin: 0;
}

.customer-integration-item__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.customer-integration-jump {
  white-space: nowrap;
}

.customer-integration-evidence {
  white-space: nowrap;
}

/* ── Glance 카드 클릭 상세 팝업 ─────────────────────────── */
.glance-detail-dialog {
  width: min(480px, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}
.glance-detail-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
}
.glance-detail-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
}
.glance-detail-dialog__head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.glance-detail-dialog__shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.glance-detail-dialog--with-map {
  width: min(920px, calc(100vw - 2rem));
}

.glance-detail-dialog--with-map .glance-detail-dialog__shell {
  display: grid;
  grid-template-columns: minmax(200px, 42%) minmax(0, 1fr);
  align-items: stretch;
  max-height: min(78vh, 720px);
}

.glance-detail-dialog__map-panel {
  padding: 0.85rem 1rem 1rem;
  border-right: 1px solid var(--border);
  background: var(--panel-soft);
  overflow-y: auto;
}

.glance-detail-dialog__map-panel .address-map-frame {
  min-height: 9rem;
  aspect-ratio: 4 / 3;
}

.glance-detail-dialog__map-panel .result-map-parcel-cta {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.78rem;
}

.glance-detail-dialog--with-map .glance-detail-dialog__body {
  overflow-y: auto;
}

.glance-detail-dialog--with-integrations {
  width: min(920px, calc(100vw - 1.5rem));
}

.glance-detail-dialog--with-integrations .glance-detail-dialog__body {
  max-height: min(70vh, 640px);
}

/* 월수익·회수 팝업 — 지도 열 없이 본문 전체 너비 */
.glance-detail-dialog--metrics {
  width: min(520px, calc(100vw - 2rem));
}
.glance-detail-dialog--metrics .glance-detail-dialog__shell {
  display: block;
  max-height: none;
}
.glance-detail-dialog--metrics .glance-detail-dialog__map-panel {
  display: none !important;
}
.glance-detail-dialog--metrics .glance-detail-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-height: 12rem;
  max-height: min(72vh, 680px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 회수 팝업 + 경제성 위젯(데스크톱 고객) */
.glance-detail-dialog--with-payback-viz {
  width: min(640px, calc(100vw - 2rem));
}

.glance-detail-dialog--with-payback-viz .glance-detail-dialog__body {
  max-height: min(88vh, 820px);
}

.glance-detail__monthly-viz-mount {
  margin-top: 0.15rem;
}

.glance-detail-dialog .monthly-profit-viz--in-dialog {
  display: block !important;
  margin: 0;
  padding: 0.95rem 0.85rem 0.9rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border);
  background: var(--bg-subtle, #f8fafc);
  box-shadow: none;
}

.glance-detail-dialog .monthly-profit-viz--in-dialog .monthly-profit-viz-title {
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

.glance-detail-dialog .monthly-profit-viz--in-dialog .monthly-profit-chips {
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.glance-detail-dialog .monthly-profit-viz--in-dialog .profit-chip {
  padding: 0.3rem 0.4rem;
  font-size: clamp(0.62rem, 1.2vw, 0.74rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glance-detail-dialog .monthly-profit-viz--in-dialog .investment-phase-strip {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

.glance-detail-dialog .monthly-profit-viz--in-dialog .investment-phase-arrow {
  display: none;
}

/* 지도 패널이 숨겨진 채 2열 그리드가 남아 있으면 본문이 좁아지는 문제 방지 */
.glance-detail-dialog--with-map .glance-detail-dialog__map-panel.hidden + .glance-detail-dialog__body,
.glance-detail-dialog--with-map .glance-detail-dialog__shell:has(.glance-detail-dialog__map-panel.hidden) .glance-detail-dialog__body {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}

.glance-detail__integration-block {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.glance-detail__integration-title {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.glance-detail__integration-meta {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.glance-detail-dialog__body .glance-detail__eum-act {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

.glance-detail-dialog__body .glance-detail__kepco-list {
  margin: 0.35rem 0 0.5rem;
}

.glance-detail-dialog__body .glance-detail__kepco-detail {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}

@media (max-width: 720px) {
  .glance-detail-dialog--with-map .glance-detail-dialog__shell {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .glance-detail-dialog__map-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

.glance-detail-dialog__body {
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.glance-detail__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  background: var(--panel-soft);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
}
.glance-detail__hero-val {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent);
}
.glance-detail__hero-label {
  font-size: 0.78rem;
  color: var(--muted);
}
.glance-detail__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.glance-detail__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.glance-detail__row:last-child { border-bottom: none; }
.glance-detail__row-label { color: var(--muted); flex-shrink: 0; }
.glance-detail__row-val { font-weight: 600; text-align: right; }
.glance-detail__row--total {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-weight: 700;
}
.glance-detail__row--total .glance-detail__row-val { color: var(--accent); }
.glance-detail__status-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.glance-detail__status-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.glance-detail__status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.35em;
}
.glance-detail__status-dot.ok   { background: var(--ok, #22c55e); }
.glance-detail__status-dot.warn { background: var(--warn, #f59e0b); }
.glance-detail__status-dot.fail { background: var(--fail, #ef4444); }
.glance-detail__status-dot.muted{ background: var(--muted-border, #94a3b8); }
.glance-detail__status-text { flex: 1; line-height: 1.4; }
.glance-detail__status-title { font-weight: 600; display: block; }
.glance-detail__note {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  background: var(--panel-soft);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
}

.install-cost-breakdown-dialog {
  width: min(520px, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
}

.install-cost-breakdown-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
}

.install-cost-breakdown-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
}

.install-cost-breakdown-dialog__head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.install-cost-breakdown-dialog__intro {
  margin: 0;
  padding: 0.85rem 1.15rem 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.install-cost-breakdown-list {
  margin: 0;
  padding: 0.75rem 1.15rem 1.1rem;
  list-style: none;
  max-height: min(60vh, 420px);
  overflow: auto;
}

.install-cost-breakdown-item {
  display: grid;
  grid-template-columns: minmax(6rem, 32%) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  align-items: start;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
}

.install-cost-breakdown-item:last-child {
  border-bottom: none;
}

.install-cost-breakdown-item__label {
  color: var(--muted);
  font-weight: 600;
}

.install-cost-breakdown-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.install-cost-breakdown-item__amount {
  margin: 0;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.install-cost-breakdown-item__qty,
.install-cost-breakdown-item__unit {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.install-cost-breakdown-item__qty-label {
  font-weight: 600;
  color: var(--text);
  margin-right: 0.25rem;
}

.install-cost-breakdown-item__reason {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.install-cost-breakdown-item__value {
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 고객용 — 예상 설치비 안내 팝업 (간단·시각) */
.install-cost-breakdown-dialog--customer {
  width: min(560px, calc(100vw - 2rem));
}

.install-cost-customer-pane {
  padding: 0 1.15rem 1.1rem;
}

.install-cost-customer-pane.hidden {
  display: none !important;
}

.install-cost-staff-pane.hidden {
  display: none !important;
}

.install-cost-customer-pane__lead {
  margin: 0.85rem 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink-primary);
}

.install-cost-customer-hero {
  text-align: center;
  padding: 1rem 1rem 0.85rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #eff6ff 0%, #f8fafc 55%, #fff 100%);
  border: 1px solid #dbeafe;
}

.install-cost-customer-hero__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.04em;
}

.install-cost-customer-hero__amount {
  margin: 0;
  font-size: clamp(1.55rem, 5vw, 1.95rem);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.install-cost-customer-hero__amount--empty {
  font-size: 1.25rem;
  color: var(--muted);
}

.install-cost-customer-hero__sub {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}

.install-cost-customer-formula {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.4rem 0.35rem;
  align-items: stretch;
  margin-top: 0.85rem;
}

.install-cost-customer-formula.hidden {
  display: none;
}

.install-cost-customer-formula__eq {
  display: none;
}

.install-cost-customer-formula__op {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--muted);
  padding-top: 1.1rem;
}

.install-cost-customer-formula__card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.65rem 0.55rem;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  text-align: center;
}

.install-cost-customer-formula__card--total {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.install-cost-customer-formula__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.3;
}

.install-cost-customer-formula__value {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.install-cost-customer-formula__card--total .install-cost-customer-formula__value {
  color: #1d4ed8;
}

.install-cost-customer-formula__hint {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted);
}

.install-cost-customer-notes {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.install-cost-customer-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--panel-soft);
  border: 1px solid var(--border);
}

.install-cost-customer-note--extra {
  background: #fffbeb;
  border-color: #fde68a;
}

.install-cost-customer-note__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.install-cost-customer-note--extra .install-cost-customer-note__icon {
  background: #fef3c7;
  color: #b45309;
}

.install-cost-customer-note__title {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
}

.install-cost-customer-note__text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 520px) {
  .install-cost-customer-formula {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .install-cost-customer-formula__op {
    padding: 0;
    font-size: 0.95rem;
  }

  .install-cost-customer-formula__op::before {
    content: "";
  }
}

.customer-result-view-dialog {
  width: min(720px, calc(100vw - 2rem));
  max-height: min(88vh, 920px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.customer-result-view-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
}

.customer-result-view-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.customer-result-view-dialog__kicker {
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.customer-result-view-dialog__head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.customer-result-view-dialog__summary {
  margin: 0;
  padding: 0.85rem 1.2rem 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.customer-result-view-dialog__kpi-grid,
.customer-result-view-dialog__status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.85rem 1.2rem 0.25rem;
}

.customer-result-view-dialog__kpi-card,
.customer-result-view-dialog__status-card {
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}

.customer-result-view-dialog__status-card.is-pass {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.06);
}

.customer-result-view-dialog__status-card.is-fail,
.customer-result-view-dialog__status-card.is-reject {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.06);
}

.customer-result-view-dialog__status-card.is-conditional,
.customer-result-view-dialog__status-card.is-review {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.06);
}

.customer-result-view-dialog__kpi-label,
.customer-result-view-dialog__status-label {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.customer-result-view-dialog__kpi-value,
.customer-result-view-dialog__status-value {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.customer-result-view-dialog__list {
  max-height: min(42vh, 420px);
  overflow: auto;
  padding: 0.75rem 1.2rem 0.5rem;
}

.customer-result-view-dialog__empty {
  margin: 0;
  padding: 0.75rem 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.customer-result-view-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.85rem 1.2rem 1rem;
  border-top: 1px solid var(--border);
  background: rgba(248, 250, 252, 0.65);
}

@media (max-width: 520px) {
  .customer-result-view-dialog__kpi-grid,
  .customer-result-view-dialog__status-grid {
    grid-template-columns: 1fr;
  }
}

.integration-evidence-dialog {
  width: min(940px, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
}

.integration-evidence-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
}

.integration-evidence-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.integration-evidence-dialog__kicker {
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.integration-evidence-dialog__head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.integration-evidence-dialog__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem 1.2rem 0.2rem;
}

.integration-evidence-dialog__meta p {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.integration-evidence-dialog__meta span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.integration-evidence-dialog__meta strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.4;
}

.integration-evidence-dialog__role-guide {
  padding: 0.9rem 1.2rem 0.25rem;
}

.integration-evidence-dialog__role-title {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
}

.integration-evidence-dialog__role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.integration-evidence-dialog__role-grid p {
  margin: 0;
  padding: 0.78rem 0.9rem;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.9) 0%, rgba(255, 255, 255, 0.98) 100%);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.integration-evidence-dialog__role-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.integration-evidence-dialog__role-grid strong {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.5;
}

.integration-evidence-dialog__analysis {
  padding: 0.95rem 1.2rem 0.2rem;
}

.integration-evidence-dialog__analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.integration-evidence-dialog__analysis-grid p {
  margin: 0;
  padding: 0.82rem 0.9rem;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(245, 248, 252, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.integration-evidence-dialog__analysis-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.integration-evidence-dialog__analysis-grid strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

.integration-evidence-dialog__decision-groups {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.integration-evidence-dialog__decision-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
  padding: 0.82rem 0.92rem;
}

.integration-evidence-dialog__decision-group.is-fail {
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.9) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.integration-evidence-dialog__decision-group.is-conditional {
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.integration-evidence-dialog__decision-group.is-pass {
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.integration-evidence-dialog__decision-group.is-unknown {
  border-style: dashed;
}

.integration-evidence-dialog__decision-group h4 {
  margin: 0 0 0.52rem;
  font-size: 0.92rem;
}

.integration-evidence-dialog__decision-group ul {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.38rem;
}

.integration-evidence-dialog__decision-group li {
  color: var(--ink-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
}

.integration-evidence-dialog__decision-group strong {
  color: var(--ink);
}

.integration-evidence-dialog__decision-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.integration-evidence-dialog__decision-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.72rem 0.8rem;
  background: #fff;
}

.integration-evidence-dialog__decision-step.is-fail {
  border-left: 3px solid var(--danger);
}

.integration-evidence-dialog__decision-step.is-conditional {
  border-left: 3px solid var(--warn);
}

.integration-evidence-dialog__decision-step.is-pass {
  border-left: 3px solid var(--ok);
}

.integration-evidence-dialog__decision-step.is-unknown {
  border-left: 3px solid var(--muted);
}

.integration-evidence-dialog__decision-step p,
.integration-evidence-dialog__decision-step strong,
.integration-evidence-dialog__decision-step span {
  display: block;
}

.integration-evidence-dialog__decision-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.integration-evidence-dialog__decision-step strong {
  margin-top: 0.28rem;
  color: var(--ink);
  font-size: 0.9rem;
}

.integration-evidence-dialog__decision-step span {
  margin-top: 0.22rem;
  color: var(--ink-secondary);
  font-size: 0.8rem;
  line-height: 1.45;
}

.integration-evidence-list {
  margin: 0;
  padding: 1rem 1.35rem 1.25rem 2.2rem;
  color: var(--ink-secondary);
}

.integration-evidence-list li + li {
  margin-top: 0.55rem;
}

.integration-evidence-item {
  display: grid;
  gap: 0.28rem;
}

.integration-evidence-item__text {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.integration-evidence-item__note {
  margin: 0;
  color: var(--ink-secondary);
}

.integration-evidence-item__link {
  width: fit-content;
  color: var(--brand-strong);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-strong) 34%, transparent);
}

.integration-evidence-item__link:hover,
.integration-evidence-item__link:focus-visible {
  border-bottom-color: var(--brand-strong);
}

.rejected-reason-panel {
  margin: 0 0 var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger-soft) 72%, white), rgba(255, 255, 255, 0.94));
  box-shadow: 0 16px 32px rgba(127, 29, 29, 0.08);
}

.rejected-reason-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.rejected-reason-head h3 {
  margin: 0;
  font-size: var(--font-lg);
}

.rejected-reason-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 14%, white);
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 800;
}

.rejected-reason-summary {
  margin: 0 0 0.85rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}

.rejected-reason-list {
  margin: 0;
  padding-left: 1.125rem;
  color: var(--ink);
}

.rejected-reason-item + .rejected-reason-item {
  margin-top: 0.72rem;
}

.rejected-reason-item strong {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--danger);
}

.rejected-reason-item p {
  margin: 0;
  line-height: 1.55;
}

.rejected-reason-item span {
  display: inline-block;
  margin-top: 0.22rem;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.customer-reliability {
  margin: 0 0 var(--space-lg);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
}

.customer-reliability.ok {
  color: var(--ok);
}

.customer-reliability.warn {
  color: var(--warn);
}

.summary-detail-toggle {
  width: 100%;
  margin-top: 0;
  margin-bottom: var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border: 1px dashed var(--border);
  color: var(--ink-secondary);
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.summary-detail-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* 설치 희망자 전용: 다음 단계 CTA (경제성 / 인허가·연계) — 한 줄 2열 */
.customer-result-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.customer-result-cta .cta-btn {
  flex: unset;
  min-width: 0;
  width: 100%;
}

.customer-result-cta.hidden {
  display: none;
}

.cta-btn {
  flex: 1;
  min-width: 10rem;
  min-height: 48px;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-body);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.cta-finance {
  background: var(--accent);
  color: var(--panel);
}

.cta-finance:hover {
  background: var(--accent-hover);
}

.cta-permit {
  background: var(--ink);
  color: var(--panel);
}

.cta-permit:hover {
  background: var(--ink-secondary);
  box-shadow: var(--shadow-lg);
}

.customer-pdf-block {
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 246, 255, 0.82) 100%);
  box-shadow: var(--shadow-sm);
}

.customer-pdf-head h3 {
  font-size: var(--text-subtitle);
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}

.customer-pdf-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
}

.customer-pdf-actions {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-pdf-preview {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.8);
}

.customer-report-frame {
  width: 100%;
  height: min(78vh, 980px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  margin: 8px 0 12px;
}

.customer-pdf-preview h4 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--ink);
}

.customer-pdf-preview-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ink-secondary);
  font-size: 0.88rem;
}

.customer-pdf-preview-list li + li {
  margin-top: 4px;
}

/* 견적 요청 받기 (설치 희망자 전용) */
.quote-request-block {
  margin-bottom: var(--space-xl);
  padding: var(--space-2xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-subtle);
  box-shadow: var(--shadow-sm);
}

.quote-request-block.hidden {
  display: none;
}

.quote-request-title {
  font-size: var(--text-subtitle);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

.quote-request-desc {
  font-size: var(--text-body);
  color: var(--muted);
  margin-bottom: var(--space-xl);
  line-height: var(--leading-relaxed);
}

.quote-request-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

@media (max-width: 900px) {
  .quote-request-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .quote-request-fields {
    grid-template-columns: 1fr;
  }
}

.quote-label {
  display: block;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ink);
}

.quote-label input {
  margin-top: var(--space-sm);
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
}

.quote-consent-wrap {
  margin-bottom: var(--space-lg);
  padding: 0.75rem 0.82rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.75);
}

.quote-consent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-secondary);
}

.quote-consent-item + .quote-consent-item {
  margin-top: 6px;
}

.quote-consent-item input[type="checkbox"],
.customer-quote-consent-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  min-height: unset;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
}

.quote-consent-note {
  margin: 10px 0 0;
  font-size: 0.77rem;
  color: var(--muted);
  line-height: 1.45;
}

.cta-quote {
  background: var(--accent);
  color: var(--panel);
  width: 100%;
  max-width: 280px;
  font-weight: 600;
  min-height: 48px;
  border-radius: var(--radius-md);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.cta-quote:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 981px) {
  #customerLookupBtn.cta-quote {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

.quote-request-message {
  margin-top: 12px;
  font-size: var(--font-lg);
  font-weight: 600;
}

.quote-request-message.error {
  color: var(--danger);
}

.quote-request-message.success {
  color: var(--ok);
}

.quote-request-message.warn {
  color: var(--warn);
}

/* 고객 결과: 하단 견적 요청 FAB + 직원 견적 포맷 다이얼로그 */
@keyframes customer-quote-fab-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.95),
      0 6px 0 rgba(15, 23, 42, 0.12),
      0 18px 44px rgba(37, 99, 235, 0.55),
      0 0 28px rgba(59, 130, 246, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 1),
      0 6px 0 rgba(15, 23, 42, 0.1),
      0 22px 52px rgba(37, 99, 235, 0.62),
      0 0 36px rgba(59, 130, 246, 0.55);
  }
}

.customer-quote-fab {
  position: fixed;
  left: 50%;
  bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 450;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(160deg, #3b82f6 0%, #1d4ed8 42%, #1e3a8a 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 6px 0 rgba(15, 23, 42, 0.15),
    0 18px 44px rgba(37, 99, 235, 0.55);
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
  animation: customer-quote-fab-glow 2.6s ease-in-out infinite;
}

.customer-quote-fab__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.65rem;
  min-height: 3.25rem;
}

.customer-quote-fab__icon {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.customer-quote-fab__text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .customer-quote-fab {
    animation: none;
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.95),
      0 6px 0 rgba(15, 23, 42, 0.12),
      0 18px 44px rgba(37, 99, 235, 0.5);
  }
}

.customer-quote-fab:hover {
  transform: translateX(-50%) translateY(-3px);
  filter: brightness(1.06);
}

.customer-quote-fab:active {
  transform: translateX(-50%) translateY(-1px);
  filter: brightness(0.98);
}

.customer-quote-fab:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 4px;
}

@media (max-width: 380px) {
  .customer-quote-fab__inner {
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 1.15rem;
    min-height: 0;
  }

  .customer-quote-fab__text {
    font-size: 0.92rem;
  }
}

body.view-result[data-role="customer"] #resultPanel.result {
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

.customer-quote-request-dialog {
  width: min(560px, calc(100vw - 1.75rem));
  max-height: min(92vh, 900px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.customer-quote-request-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.customer-quote-request-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.customer-quote-request-dialog__kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.customer-quote-request-dialog__title {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

.customer-quote-request-dialog__subtitle {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}

.customer-quote-request-dialog__body {
  padding: 1rem 1.2rem 1.25rem;
  max-height: calc(92vh - 140px);
  overflow: auto;
}

.customer-quote-staff-format {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
}

.customer-quote-staff-format__title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
}

.customer-quote-cost-details {
  margin: 0;
  padding: 0;
  border: none;
}

.customer-quote-cost-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 255, 0.92) 100%);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.customer-quote-cost-details > summary::-webkit-details-marker {
  display: none;
}

.customer-quote-cost-details > summary::marker {
  content: "";
}

.customer-quote-cost-details > summary:hover {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
}

.customer-quote-cost-details > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.customer-quote-cost-details[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.customer-quote-cost-summary {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.customer-quote-cost-summary__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

.customer-quote-cost-summary__label::before {
  content: "▸ ";
  color: var(--accent);
  font-weight: 800;
}

.customer-quote-cost-details[open] .customer-quote-cost-summary__label::before {
  content: "▾ ";
}

.customer-quote-detail-stack {
  padding: 0.85rem 0.75rem 0.5rem;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: rgba(255, 255, 255, 0.96);
}

.customer-quote-detail-stack .customer-quote-key-metrics {
  margin-top: 0;
}

.customer-quote-key-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

@media (max-width: 480px) {
  .customer-quote-key-metrics {
    grid-template-columns: 1fr;
  }
}

.customer-quote-key-metric {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.88);
}

.customer-quote-key-metric--cost {
  border-color: rgba(37, 99, 235, 0.35);
  background: linear-gradient(145deg, rgba(239, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.customer-quote-key-metric--profit {
  border-color: rgba(5, 150, 105, 0.35);
  background: linear-gradient(145deg, rgba(236, 253, 245, 0.95) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.customer-quote-key-metric__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.customer-quote-key-metric__value {
  display: block;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  color: var(--ink);
}

.customer-quote-key-metric--cost .customer-quote-key-metric__value {
  color: #1d4ed8;
}

.customer-quote-key-metric--profit .customer-quote-key-metric__value {
  color: #047857;
}

.customer-quote-staff-module-line {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
}

.customer-quote-staff-legend {
  margin-bottom: 10px;
}

.customer-quote-staff-cards {
  margin-bottom: 0.5rem;
}

.customer-quote-staff-manual {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.customer-quote-staff-empty {
  margin: 0;
  padding: 0.75rem 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.customer-quote-request-dialog .quote-request-block {
  margin-bottom: 0;
}

.customer-share-block {
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, rgba(236, 253, 245, 0.58) 0%, rgba(255, 255, 255, 0.95) 55%, rgba(239, 246, 255, 0.78) 100%);
  box-shadow: var(--shadow-sm);
}

.customer-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-md);
}

.customer-share-actions .secondary {
  min-height: 42px;
}

/* 예상 월수익 시각화: 3칩 + 막대 그래프 (조건부 표시) */
.monthly-profit-viz {
  margin-bottom: var(--space-xl);
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: none;
}

.monthly-profit-viz.hidden {
  display: none;
}

.monthly-profit-viz-title {
  font-size: clamp(1.3rem, 0.9vw + 1.05rem, 1.7rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-lg);
}

.monthly-profit-viz-formula {
  margin: -0.35rem 0 var(--space-lg);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted, #64748b);
  word-break: keep-all;
}

.monthly-profit-viz-formula.hidden {
  display: none;
}

.monthly-profit-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.35rem;
  margin-bottom: var(--space-xl);
}

.profit-chip {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  padding: 0.32rem 0.4rem;
  border-radius: 999px;
  font-size: clamp(0.62rem, 0.85vw, 0.78rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: var(--ink-secondary);
}

/* 오른쪽 경제성 패널(좁은 30% 열) — 데스크톱 고객 */
body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz .monthly-profit-viz-title,
.result-map-status-row__aside .monthly-profit-viz-title {
  font-size: 0.95rem;
  margin-bottom: 0.55rem;
}

body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz .monthly-profit-chips,
.result-map-status-row__aside .monthly-profit-chips {
  gap: 0.28rem;
  margin-bottom: 0.65rem;
}

body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz .profit-chip,
.result-map-status-row__aside .profit-chip {
  padding: 0.26rem 0.3rem;
  font-size: clamp(0.56rem, 1.4vw, 0.68rem);
  letter-spacing: -0.02em;
}

.profit-chip--low {
  background: #f8fafc;
  color: #64748b;
  border-color: #d1d5db;
}

.profit-chip--base {
  background: #eff6ff;
  color: #1e3a8a;
  border-color: #93c5fd;
}

.profit-chip--high {
  background: #f8fafc;
  color: #64748b;
  border-color: #d1d5db;
}

.monthly-profit-chart {
  margin-top: 4px;
}

.profit-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 118px;
  padding: 0 4px;
}

.profit-bar {
  flex: 1;
  min-width: 0;
  border-radius: 8px 8px 2px 2px;
  min-height: 12px;
  transition: height 0.35s ease;
  border: 1px solid #cbd5e1;
}

.profit-bar--low {
  background: #d1d5db;
}

.profit-bar--base {
  background: #3b82f6;
}

.profit-bar--high {
  background: #cbd5e1;
}

.profit-chart-labels {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding: 0 4px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

.profit-chart-labels span {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.profit-trend-viz {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.profit-trend-viz.hidden {
  display: none !important;
}

.profit-trend-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.profit-trend-title {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.profit-trend-years-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  font-weight: 700;
}

.profit-trend-years-label input {
  width: 5.2rem;
  margin: 0;
  padding: 0.5rem 0.65rem;
  text-align: center;
  font-size: 0.96rem;
}

.trend-focus {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.trend-focus-btn {
  width: auto;
  margin-top: 0;
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--panel);
  color: var(--ink-secondary);
  font-size: 0.9rem;
  font-weight: 700;
}

.trend-focus-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--panel);
}

.profit-trend-legend {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.trend-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.42rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 700;
}

.trend-legend--low {
  background: rgba(2, 132, 199, 0.12);
  color: var(--data-cyan);
}

.trend-legend--base {
  background: rgba(37, 99, 235, 0.12);
  color: var(--data-blue);
}

.trend-legend--high {
  background: rgba(79, 70, 229, 0.12);
  color: var(--data-indigo);
}

.profit-trend-svg {
  width: 100%;
  height: auto;
  min-height: 23rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.trend-grid {
  stroke: #d7deea;
  stroke-width: 1;
}

.trend-axis {
  stroke: var(--muted);
  stroke-width: 1.2;
}

.trend-axis-zero {
  stroke: var(--muted);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}

.trend-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-line--low {
  stroke: var(--data-cyan);
}

.trend-line--base {
  stroke: var(--data-blue);
}

.trend-line--high {
  stroke: var(--data-indigo);
}

.trend-area {
  opacity: 0.9;
}

.trend-area-stop--top {
  stop-color: rgba(37, 99, 235, 0.24);
}

.trend-area-stop--bottom {
  stop-color: rgba(37, 99, 235, 0.01);
}

.trend-point {
  display: none;
}

.trend-label {
  fill: var(--ink);
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2.3px;
}

.trend-axis-title {
  fill: var(--ink);
  font-size: calc(14.2px * var(--font-scale));
  font-weight: 800;
  letter-spacing: 0.01em;
}

.trend-end-label {
  font-size: calc(13.8px * var(--font-scale));
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2.3px;
}

.trend-end-label--low {
  fill: var(--data-cyan);
}

.trend-end-label--base {
  fill: var(--data-blue);
}

.trend-end-label--high {
  fill: var(--data-indigo);
}

.profit-trend-note {
  margin: 10px 0 0;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 600;
  line-height: var(--leading-relaxed);
}

.install-cost-summary {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  font-size: 1rem;
  color: var(--muted);
}

.customer-layout-opt-note {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-tertiary);
}

.customer-layout-opt-note--hero {
  margin: 0.65rem 1rem 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(240, 253, 244, 0.95);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.5;
  color: #166534;
}

.customer-layout-opt-note.hidden {
  display: none;
}

.layout-opt-segment-summary-host {
  margin: 0.5rem 1rem 0.75rem;
}

.layout-opt-segment-summary__title,
.parcel-legal-table__title {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-secondary, #334155);
}

.layout-opt-segment-summary__scroll,
.parcel-legal-table-wrap {
  overflow-x: auto;
}

.layout-opt-segment-summary__table,
.parcel-legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.layout-opt-segment-summary__table th,
.layout-opt-segment-summary__table td,
.parcel-legal-table th,
.parcel-legal-table td {
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border, #e2e8f0);
  text-align: left;
  vertical-align: top;
}

.layout-opt-segment-summary__table th,
.parcel-legal-table th {
  background: rgba(248, 250, 252, 0.95);
  font-weight: 600;
}

.customer-multi-parcel-legal-notice {
  margin: 0.35rem 1rem 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(255, 251, 235, 0.95);
  font-size: 0.72rem;
  line-height: 1.45;
  color: #92400e;
}

.customer-multi-parcel-legal-notice.hidden,
.layout-opt-segment-summary-host.hidden,
.parcel-legal-table-host.hidden {
  display: none;
}

.customer-profit-segment-block {
  margin-top: 0.85rem;
}

.customer-profit-segment-block__title {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.staff-layout-opt-segment-building-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #1e40af;
  background: rgba(219, 234, 254, 0.9);
}

.parcel-legal-primary {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
}

.parcel-legal-table .status-fail,
.parcel-legal-table .status-rejected {
  color: #b91c1c;
  font-weight: 600;
}

.parcel-legal-table .status-conditional,
.parcel-legal-table .status-review_required {
  color: #b45309;
  font-weight: 600;
}

.parcel-legal-table .status-pass,
.parcel-legal-table .status-approved {
  color: #15803d;
  font-weight: 600;
}

.parcel-legal-table__hint {
  margin: -0.2rem 0 0.5rem;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--ink-muted, #64748b);
}

.parcel-legal-table td.parcel-legal-table__cell {
  padding: 0;
}

.parcel-legal-table__cell-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.45rem;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
}

.parcel-legal-table__cell-btn:hover,
.parcel-legal-table__cell-btn:focus-visible {
  background: rgba(219, 234, 254, 0.55);
  outline: none;
}

.parcel-legal-table__cell-btn.is-open,
.parcel-legal-table tr.is-detail-open td {
  background: rgba(219, 234, 254, 0.72);
}

.parcel-legal-detail {
  margin-top: 0.55rem;
  padding: 0.7rem 0.8rem 0.75rem;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.92);
}

.parcel-legal-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.parcel-legal-detail__kicker {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #1e40af;
}

.parcel-legal-detail__close {
  flex: 0 0 auto;
  padding: 0.12rem 0.4rem;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  background: #fff;
  color: #1d4ed8;
  font-size: 0.66rem;
  cursor: pointer;
}

.parcel-legal-detail__verdict {
  margin: 0.35rem 0 0.15rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.parcel-legal-detail__verdict.status-fail,
.parcel-legal-detail__verdict.status-rejected {
  color: #b91c1c;
}

.parcel-legal-detail__verdict.status-conditional,
.parcel-legal-detail__verdict.status-review_required,
.parcel-legal-detail__verdict.status-unknown {
  color: #b45309;
}

.parcel-legal-detail__verdict.status-pass,
.parcel-legal-detail__verdict.status-approved {
  color: #15803d;
}

.parcel-legal-detail__why-title {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #334155;
}

.parcel-legal-detail__why {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #1e293b;
}

.parcel-legal-detail__facts,
.parcel-legal-detail__items {
  margin: 0.4rem 0 0;
  padding-left: 1.05rem;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #334155;
}

.parcel-legal-detail__facts strong {
  color: #0f172a;
}

.parcel-legal-detail__item {
  margin: 0.2rem 0;
}

.parcel-legal-detail__badge {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0.02rem 0.3rem;
  border-radius: 4px;
  background: #e2e8f0;
  font-size: 0.62rem;
  font-weight: 700;
}

.parcel-legal-detail__item.tone-fail .parcel-legal-detail__badge,
.parcel-legal-detail__item.tone-rejected .parcel-legal-detail__badge {
  color: #991b1b;
  background: #fee2e2;
}

.parcel-legal-detail__item.tone-warn .parcel-legal-detail__badge,
.parcel-legal-detail__item.tone-conditional .parcel-legal-detail__badge {
  color: #92400e;
  background: #fef3c7;
}

.parcel-legal-detail__item.tone-ok .parcel-legal-detail__badge,
.parcel-legal-detail__item.tone-pass .parcel-legal-detail__badge,
.parcel-legal-detail__item.tone-approved .parcel-legal-detail__badge {
  color: #166534;
  background: #dcfce7;
}

.parcel-legal-detail__evidence {
  margin: 0.1rem 0 0;
  color: #64748b;
}

.parcel-legal-detail__sources {
  margin: 0.45rem 0 0;
  font-size: 0.64rem;
  color: #64748b;
}

.customer-calc-diagnostic {
  margin: 0.65rem 1rem 0;
  padding: 0.55rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--warn) 8%);
  font-size: 0.72rem;
  line-height: 1.45;
}

.customer-calc-diagnostic.hidden {
  display: none !important;
}

.customer-calc-diagnostic__summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-secondary);
  list-style-position: inside;
}

.customer-calc-diagnostic__body {
  margin-top: 0.45rem;
}

.customer-calc-diagnostic__verdict {
  margin: 0 0 0.45rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.35rem;
}

.customer-calc-diagnostic--ok {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ink);
}

.customer-calc-diagnostic--warn {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--ink);
}

.customer-calc-diagnostic--error {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  color: var(--ink);
}

.customer-calc-diagnostic__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
}

.customer-calc-diagnostic__table th,
.customer-calc-diagnostic__table td {
  padding: 0.25rem 0.35rem;
  border-top: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}

.customer-calc-diagnostic__table th {
  width: 6.5rem;
  color: var(--muted);
  font-weight: 600;
}

.customer-calc-diagnostic__note {
  color: var(--muted);
  font-size: 0.65rem;
}

.staff-page5-layout-opt-actions {
  margin: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

/* 5단계 — 18조합 월수익 최적화 CTA */
.staff-page5-layout-opt-actions--cta {
  margin: 0.55rem 0 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--accent-soft) 55%, var(--panel)) 0%,
    color-mix(in srgb, var(--accent) 6%, var(--panel)) 100%
  );
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}

.staff-page5-layout-opt-actions--cta .staff-page5-layout-opt-btn {
  width: 100%;
  min-height: 3.1rem;
  margin: 0;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #3b82f6 0%, var(--accent) 48%, var(--accent-hover) 100%);
  border-color: var(--accent-hover);
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--accent) 42%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
}

.staff-page5-layout-opt-actions--cta .staff-page5-layout-opt-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #60a5fa 0%, var(--accent) 40%, #1e40af 100%);
  border-color: #1e40af;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--accent) 48%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent);
  transform: translateY(-2px);
}

.staff-page5-layout-opt-actions--cta .staff-page5-layout-opt-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 32%, transparent);
}

.staff-page5-layout-opt-btn__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  line-height: 1.25;
}

.staff-page5-layout-opt-btn__title {
  font-size: 1.02em;
}

.staff-page5-layout-opt-btn__sub {
  font-size: 0.72em;
  font-weight: 500;
  opacity: 0.92;
  letter-spacing: 0;
}

.staff-page5-layout-opt-actions--running .staff-page5-layout-opt-btn {
  cursor: wait;
  animation: staff-page5-layout-opt-pulse 1.4s ease-in-out infinite;
}

.staff-page5-layout-opt-actions--applied:not(.staff-page5-layout-opt-actions--running) {
  border-color: color-mix(in srgb, #16a34a 42%, var(--border));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #dcfce7 70%, var(--panel)) 0%,
    color-mix(in srgb, #16a34a 5%, var(--panel)) 100%
  );
}

.staff-page5-layout-opt-actions--applied:not(.staff-page5-layout-opt-actions--running) .staff-page5-layout-opt-btn {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
  border-color: #15803d;
  box-shadow: 0 3px 12px color-mix(in srgb, #16a34a 35%, transparent);
}

.staff-page5-layout-opt-actions--applied:not(.staff-page5-layout-opt-actions--running) .staff-page5-layout-opt-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 50%, #166534 100%);
  border-color: #166534;
}

.staff-page5-layout-opt-actions--disabled .staff-page5-layout-opt-btn {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--muted) 35%, var(--accent));
  border-color: var(--border);
}

@keyframes staff-page5-layout-opt-pulse {
  0%,
  100% {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent);
  }
  50% {
    box-shadow: 0 4px 22px color-mix(in srgb, var(--accent) 58%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .staff-page5-layout-opt-actions--running .staff-page5-layout-opt-btn {
    animation: none;
  }
}

.staff-page5-layout-opt-btn {
  font-size: 0.78rem;
}

.staff-page5-layout-opt-note {
  margin: 0.35rem 0 0.65rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-secondary);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 0.45rem;
}

.staff-page5-layout-opt-note.hidden {
  display: none !important;
}

.install-cost-summary strong {
  color: var(--ink);
  font-weight: 700;
}

/* 판정 진행 6단계 바 (설치 희망자) */
.decision-progress-bar {
  max-width: 680px;
  margin: 0 auto 20px;
  padding: 14px 0;
}

.decision-progress-bar.hidden {
  display: none !important;
}

.decision-progress-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-secondary);
  margin: 0 0 8px;
  text-align: center;
}

.decision-progress-segments {
  display: flex;
  width: 100%;
  height: 1rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border-light);
}

.decision-segment {
  flex: 1;
  min-width: 0;
  transition: background 0.2s ease;
}

.decision-segment--ok {
  background: var(--ok);
}

.decision-segment--warn {
  background: var(--warn);
}

.decision-segment--fail {
  background: var(--danger);
}

.decision-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--muted);
}

.decision-progress-labels span {
  flex: 1;
  text-align: center;
}

/* 20년 누적 손익 + 회수 시각화 좌/우 배치 클러스터 */
.customer-longterm-cluster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
  margin-top: 20px;
}

.customer-longterm-cluster--with-map {
  grid-template-columns: minmax(0, 1fr);
}

.customer-longterm-cluster--chart-expanded > .customer-longterm-chart:not(.hidden) {
  margin-top: 0.15rem;
}

.customer-longterm-cluster > .customer-longterm-chart {
  margin: 0;
}

.customer-longterm-cluster__side {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* 경제성 패널(오른쪽) · 히어로 하단 차트 */
.monthly-profit-viz > .payback-viz,
.monthly-profit-viz > .investment-timeline-viz,
.monthly-profit-viz > .customer-profit-breakdown-btn,
.monthly-profit-viz > .cost-breakdown-viz,
.customer-longterm-cluster .payback-viz,
.customer-longterm-cluster .investment-timeline-viz,
.customer-longterm-cluster .cost-breakdown-viz {
  margin-top: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
}

.monthly-profit-viz > .payback-viz,
.monthly-profit-viz > .investment-timeline-viz,
.monthly-profit-viz > .customer-profit-breakdown-btn,
.monthly-profit-viz > .cost-breakdown-viz {
  margin-top: 0.65rem;
}

.monthly-profit-viz > .customer-profit-breakdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.95rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.monthly-profit-viz > .customer-profit-breakdown-btn:hover {
  border-color: var(--accent, #2563eb);
  background: #f8fbff;
}

.monthly-profit-viz > .customer-profit-breakdown-btn:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

.customer-profit-breakdown-btn.hidden {
  display: none !important;
}

.customer-profit-breakdown-btn__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.customer-profit-breakdown-btn__title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-primary);
}

.customer-profit-breakdown-btn__hint {
  font-size: 0.74rem;
  color: var(--ink-tertiary);
  line-height: 1.35;
}

.customer-profit-breakdown-btn__action {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #2563eb);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
}

.monthly-profit-viz > .investment-timeline-head,
.customer-longterm-cluster .investment-timeline-head {
  margin-bottom: 0.5rem;
}

.monthly-profit-viz > .investment-phase-strip,
.customer-longterm-cluster .investment-phase-strip {
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.monthly-profit-viz > .investment-phase-arrow,
.customer-longterm-cluster .investment-phase-arrow {
  display: none;
}

.monthly-profit-viz > .investment-phase-card,
.customer-longterm-cluster .investment-phase-card {
  text-align: left;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
}

.monthly-profit-viz > .investment-phase-card__value,
.customer-longterm-cluster .investment-phase-card__value {
  margin-left: auto;
  font-size: 0.9rem;
}

.monthly-profit-viz > .payback-viz .payback-viz-stat,
.customer-longterm-cluster .payback-viz-stat {
  text-align: left;
}

.monthly-profit-viz > .payback-viz .payback-viz-rail,
.customer-longterm-cluster .payback-viz-rail {
  justify-content: flex-start;
}

.customer-longterm-cluster .cost-breakdown-bar {
  height: 22px;
  margin-bottom: 8px;
}

.customer-longterm-cluster .cost-breakdown-legend {
  gap: 6px;
  font-size: 0.78rem;
}

.customer-longterm-cluster .cost-legend-item {
  grid-template-columns: 11px minmax(0, 1fr) auto auto;
  column-gap: 6px;
}

.customer-longterm-cluster .cost-legend-label {
  font-size: 0.8rem;
}

.customer-longterm-cluster .cost-legend-ratio {
  font-size: 0.75rem;
  min-width: 34px;
}

.customer-longterm-cluster .cost-legend-amount {
  font-size: 0.76rem;
}

.customer-longterm-cluster .cost-legend-note {
  font-size: 0.7rem;
}

.customer-longterm-cluster .cost-breakdown-footnote {
  font-size: 0.7rem;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .customer-longterm-cluster,
  .customer-longterm-cluster--with-map {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 회수 기간 · 투자 회수 이후 수익 (막대 없음, 카드형) */
.payback-viz {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.payback-viz.hidden {
  display: none !important;
}

.payback-viz-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 0.65rem;
  letter-spacing: 0.02em;
}

.payback-viz-stat {
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md, 10px);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.08), rgba(255, 255, 255, 0.95));
  border: 1px solid rgba(37, 99, 235, 0.18);
  text-align: center;
}

.payback-viz-stat__main {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem;
}

.payback-viz-stat__value {
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  font-weight: 800;
  color: var(--accent, #2563eb);
  letter-spacing: -0.03em;
}

.payback-viz-stat__unit {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent, #2563eb);
  opacity: 0.85;
}

.payback-viz-stat__sub {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-secondary, #475569);
  line-height: 1.4;
}

.payback-viz-rail {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.payback-viz-rail__node {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payback-viz-rail__node span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
}

.payback-viz-rail__node.is-active span {
  border-color: #cbd5e1;
  color: #64748b;
}

.payback-viz-rail__node.is-focus span {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent, #2563eb);
}

.payback-viz-rail__node.is-gain span {
  border-color: rgba(22, 163, 74, 0.4);
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}

.payback-viz-rail__bridge {
  flex: 1;
  min-width: 1.25rem;
  max-width: 2.5rem;
  height: 2px;
  margin: 0 0.15rem;
  background: linear-gradient(90deg, #cbd5e1, var(--accent, #2563eb));
  border-radius: 1px;
}

.payback-viz-rail__bridge.is-gain {
  background: linear-gradient(90deg, var(--accent, #2563eb), #22c55e);
}

.investment-timeline-viz {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.investment-timeline-viz.hidden {
  display: none !important;
}

.investment-timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.investment-timeline-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.investment-years-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
}

.investment-years-label input {
  width: 3.2rem;
  margin: 0;
  padding: 0.32rem 0.4rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  background: transparent;
}

.investment-phase-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.investment-phase-card {
  margin: 0;
  padding: 0.6rem 0.55rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  text-align: center;
}

.investment-phase-card--cost {
  border-color: rgba(148, 163, 184, 0.55);
  background: linear-gradient(180deg, #f8fafc, #fff);
}

.investment-phase-card--recover {
  border-color: rgba(37, 99, 235, 0.35);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.9), #fff);
}

.investment-phase-card--profit {
  border-color: rgba(22, 163, 74, 0.35);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.9), #fff);
}

.investment-phase-card__kicker {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.investment-phase-card--recover .investment-phase-card__kicker {
  color: var(--accent, #2563eb);
}

.investment-phase-card--profit .investment-phase-card__kicker {
  color: #15803d;
}

.investment-phase-card__label {
  font-size: 0.72rem;
  color: var(--ink-secondary, #64748b);
}

.investment-phase-card__value {
  font-size: clamp(0.78rem, 2.2vw, 0.92rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  word-break: keep-all;
}

.investment-phase-card--recover .investment-phase-card__value {
  color: var(--accent, #2563eb);
}

.investment-phase-card--profit .investment-phase-card__value {
  color: #15803d;
}

.investment-phase-arrow {
  align-self: center;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 2px solid #94a3b8;
  border-right: 2px solid #94a3b8;
  transform: rotate(45deg);
  margin: 0 0.1rem;
  flex-shrink: 0;
}

.investment-summary-text {
  margin: 0;
  padding: 0.55rem 0.65rem;
  font-size: 0.8rem;
  color: var(--ink-secondary);
  line-height: 1.5;
  border-radius: var(--radius-sm, 8px);
  background: rgba(248, 250, 252, 0.9);
  border: 1px dashed var(--border-light, #e2e8f0);
}

/* 설치비용 구성 stacked bar */
.cost-breakdown-viz {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.cost-breakdown-viz.hidden {
  display: none !important;
}

.cost-breakdown-title {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px;
}

.cost-breakdown-bar {
  display: flex;
  width: 100%;
  height: 26px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

.cost-segment {
  display: block;
  min-width: 4px;
  transition: width 0.2s ease;
}

.cost-breakdown-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  list-style: none;
  padding: 0;
  margin: 0;
}

.cost-legend-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
}

.cost-legend-item i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
  align-self: center;
}

.cost-legend-label {
  color: var(--text);
  font-weight: 600;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cost-legend-ratio {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  min-width: 38px;
  text-align: right;
}

.cost-legend-amount {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 500;
  font-size: 0.8rem;
  text-align: right;
}

.cost-legend-note {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.cost-breakdown-footnote {
  margin: 10px 0 0;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.4;
}

/* 직원 2페이지: 검토 타임라인 */
.staff-review-timeline {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--muted-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.staff-timeline-track {
  display: flex;
  align-items: center;
  width: 100%;
}

.staff-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}

.staff-timeline-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 0.75rem;
}

.staff-timeline-dot--ok {
  background: var(--ok);
}

.staff-timeline-dot--warn {
  background: var(--warn);
}

.staff-timeline-dot--fail {
  background: var(--danger);
}

.staff-timeline-dot--review {
  background: #7b91a3;
}

.staff-timeline-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: var(--font-sm);
  color: var(--muted);
  padding: 0 2px;
}

.staff-timeline-labels span {
  flex: 1;
  text-align: center;
}

.staff-cost-breakdown-bar {
  display: flex;
  width: 100%;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

.status.ok {
  color: var(--ok);
  background: var(--ok-soft);
}

.status.warn {
  color: var(--warn);
  background: var(--warn-soft);
}

.status.fail {
  color: var(--danger);
  background: var(--danger-soft);
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  min-height: 9.8rem;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xs);
}

.card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-light);
  transform: translateY(-1px);
}

.card .k {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.card .v {
  font-size: clamp(1.35rem, 0.95vw + 0.95rem, 2rem);
  margin: 0;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.card .v small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-secondary);
}

.finance-measure-panel {
  border: 1px solid var(--border);
  border-left: 4px solid var(--data-cyan);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.finance-measure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.finance-measure-head h3 {
  margin: 0;
  font-size: var(--text-subtitle);
  color: var(--ink);
}

.finance-measure-status {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--ink-secondary);
}

.finance-measure-status.ok {
  color: var(--ok);
}

.finance-measure-status.warn {
  color: var(--warn);
}

.finance-measure-status.error {
  color: var(--danger);
}

.finance-measure-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #f8fbff 0%, #e8eef8 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.finance-measure-map-frame:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.finance-measure-map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.finance-measure-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.finance-measure-poly-fill {
  fill: rgba(2, 132, 199, 0.25);
  stroke: rgba(2, 132, 199, 0.7);
  stroke-width: 1.6;
}

.finance-measure-poly-line {
  fill: none;
  stroke: rgba(37, 99, 235, 0.95);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finance-measure-poly-point {
  fill: #ffffff;
  stroke: #1d4ed8;
  stroke-width: 1.8;
}

.finance-measure-compare {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--ink-secondary);
}

.finance-measure-actions {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.finance-measure-actions .secondary.small {
  width: auto;
  min-height: 42px;
}

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

.bottom-grid article {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.full-span {
  grid-column: 1 / -1;
}

.verify-panel {
  border-left: 4px solid var(--accent);
}

.eum-viewer-panel {
  border-left: 4px solid #0b71c2;
}

.eum-viewer-panel-head {
  margin-top: 0.35rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.eum-viewer-panel-head .secondary,
.eum-viewer-panel-head .primary {
  min-height: 44px;
  min-width: 220px;
}

.eum-act-content-panel {
  border-left: 4px solid var(--ok);
}

.eum-flow-panel {
  padding: var(--space-sm) 0 var(--space-sm);
}

.eum-flow-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.eum-act-content {
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-subtle) 80%, var(--panel));
  padding: 0.75rem;
  max-height: 28rem;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
  display: grid;
  gap: 0.5rem;
}

.eum-act-content::-webkit-scrollbar {
  width: 8px;
}

.eum-act-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 999px;
}

.eum-act-section {
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: 0.6rem 0.72rem 0.72rem;
}

.eum-act-section h4 {
  margin: 0 0 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.eum-act-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.eum-act-item {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink);
  word-break: break-word;
}

.eum-act-item.has-details {
  display: grid;
  gap: 0.35rem;
}

.eum-act-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.eum-act-item-title {
  flex: 1;
  min-width: 0;
}

.eum-act-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.eum-act-item-badge.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.eum-act-item-badge.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.eum-act-item-badge.fail {
  background: var(--danger-soft);
  color: var(--danger);
}

.eum-act-item-badge.note {
  background: color-mix(in srgb, var(--accent-soft) 65%, var(--panel));
  color: var(--ink-secondary);
}

.eum-act-detail-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}

.eum-act-detail {
  margin: 0;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-subtle) 92%, var(--panel));
  color: var(--ink-secondary);
  font-size: 0.77rem;
  line-height: 1.45;
}

.eum-act-empty {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px dashed color-mix(in srgb, var(--warn) 35%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn-soft) 64%, var(--panel));
  color: var(--muted);
  font-size: 0.82rem;
}

.eum-act-content.is-loading {
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--panel));
}

.eum-act-loading {
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: 0.75rem;
  display: grid;
  gap: 0.5rem;
}

.eum-act-loading-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-secondary);
}

.eum-act-spinner {
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: eum-act-spin 0.9s linear infinite;
}

.eum-act-skeleton-line {
  height: 0.6rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--border) 82%, white) 0%,
    color-mix(in srgb, var(--accent-soft) 78%, white) 48%,
    color-mix(in srgb, var(--border) 82%, white) 100%
  );
  background-size: 200% 100%;
  animation: eum-act-shimmer 1.25s ease-in-out infinite;
}

.eum-act-skeleton-line.w-92 { width: 92%; }
.eum-act-skeleton-line.w-88 { width: 88%; }
.eum-act-skeleton-line.w-84 { width: 84%; }
.eum-act-skeleton-line.w-76 { width: 76%; }

@keyframes eum-act-spin {
  to { transform: rotate(360deg); }
}

@keyframes eum-act-shimmer {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

.eum-viewer-source {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, #0b71c2 35%, var(--border));
  background: color-mix(in srgb, #0b71c2 12%, white);
  color: #0b71c2;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

#eumLanduseViewStatusResult {
  margin-top: 0.75rem;
  color: var(--ink-secondary);
}

.eum-restriction-panel {
  border-left: 4px solid #7c3aed;
}

.eum-restriction-summary {
  margin-top: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.eum-restriction-list {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.eum-restriction-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 0.7rem 0.75rem;
}

.eum-restriction-item.pass {
  border-left: 3px solid var(--ok);
}

.eum-restriction-item.conditional,
.eum-restriction-item.unknown {
  border-left: 3px solid var(--warn);
}

.eum-restriction-item.fail {
  border-left: 3px solid var(--danger);
}

.eum-restriction-item-head {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.eum-restriction-item-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

.eum-restriction-item-status {
  margin-left: 0.3rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.5rem;
}

.eum-restriction-item-status.pass {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}

.eum-restriction-item-status.conditional,
.eum-restriction-item-status.unknown {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}

.eum-restriction-item-status.fail {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.eum-restriction-item-value {
  margin: 0.45rem 0 0;
  color: var(--ink);
  line-height: 1.45;
  font-size: 0.84rem;
  word-break: break-word;
}

.eum-restriction-item-headline {
  margin: 0.45rem 0 0;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.eum-restriction-item--big-pass {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
  background: color-mix(in srgb, var(--ok-soft) 65%, #ffffff 35%);
}

.eum-restriction-item--big-pass .eum-restriction-item-headline {
  font-size: 1.2rem;
  color: var(--ok);
}

.eum-restriction-item--big-pass .eum-restriction-item-value {
  font-size: 0.95rem;
  font-weight: 700;
}

.eum-restriction-empty {
  margin: 0;
  padding: 0.45rem 0.6rem;
  color: var(--muted);
  font-size: 0.84rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.solar-law-compare-panel {
  border-left: 4px solid #c27600;
}

.solar-law-compare-summary {
  margin-top: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 600;
}

.solar-law-compare-summary.pass {
  color: var(--ok);
}

.solar-law-compare-summary.conditional,
.solar-law-compare-summary.unknown {
  color: var(--warn);
}

.solar-law-compare-summary.fail {
  color: var(--danger);
}

.solar-law-fail-reason-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.solar-law-fail-reason-item {
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger-soft) 58%, var(--panel));
  padding: 0.58rem 0.68rem;
}

.solar-law-fail-reason-head {
  margin: 0;
  line-height: 1.35;
}

.solar-law-fail-reason-head strong {
  color: var(--danger);
  font-size: 0.83rem;
  font-weight: 700;
}

.solar-law-fail-reason-meta {
  margin: 0.3rem 0 0;
  color: var(--ink-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

.solar-law-fail-reason-evidence {
  margin: 0.3rem 0 0;
  color: var(--ink);
  font-size: 0.79rem;
  line-height: 1.4;
  word-break: break-word;
}

.solar-law-compare-list {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.solar-law-compare-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 0.64rem 0.72rem;
}

.solar-law-compare-item.pass {
  border-left: 3px solid var(--ok);
}

.solar-law-compare-item.conditional,
.solar-law-compare-item.unknown {
  border-left: 3px solid var(--warn);
}

.solar-law-compare-item.fail {
  border-left: 3px solid var(--danger);
}

.solar-law-compare-head {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.solar-law-compare-law {
  font-size: 0.83rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.solar-law-compare-status {
  margin-left: 0.3rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.5rem;
}

.solar-law-compare-status.pass {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}

.solar-law-compare-status.conditional,
.solar-law-compare-status.unknown {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}

.solar-law-compare-status.fail {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.solar-law-compare-meta {
  margin: 0.42rem 0 0;
  color: var(--ink-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

.solar-law-compare-evidence {
  margin: 0.34rem 0 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.4;
  word-break: break-word;
}

.solar-law-compare-empty {
  margin: 0;
  padding: 0.45rem 0.6rem;
  color: var(--muted);
  font-size: 0.84rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.verify-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.verify-grid p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.verify-grid p span {
  font-size: 0.81rem;
  color: var(--muted);
}

.verify-grid p strong {
  font-size: 1rem;
  color: var(--ink);
}

.verify-actions {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.copy-msg {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.copy-msg.error {
  color: var(--danger);
}

.copy-msg.success {
  color: var(--ok);
}

.source-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ordinance-panel {
  border-left: 4px solid #b45309;
}

.ordinance-panel--staff {
  margin-top: 1rem;
}

.ordinance-summary,
.ordinance-meta {
  margin-top: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.ordinance-search-toolbar {
  margin-top: 0.95rem;
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(180, 83, 9, 0.18);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 247, 237, 0.92));
}

.ordinance-search-toolbar--compact {
  padding: 0.8rem 0.9rem;
}

.ordinance-search-field {
  display: grid;
  gap: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ordinance-search-field input {
  width: 100%;
  min-height: 40px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.85rem;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 400;
  font: inherit;
  font-size: 0.875rem;
}

.ordinance-search-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

.ordinance-search-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* 체크박스 필터 칩 */
.ordinance-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--panel);
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.ordinance-scope-chip:hover {
  border-color: #b45309;
  color: #92400e;
  background: #fef3c7;
}

.ordinance-scope-chip:has(input:checked) {
  border-color: #b45309;
  background: #fef3c7;
  color: #92400e;
}

.ordinance-scope-chip input {
  width: 0.9rem;
  height: 0.9rem;
  min-height: unset;
  margin-top: 0;
  padding: 0;
  border: none;
  accent-color: #b45309;
  cursor: pointer;
}

.ordinance-search-actions {
  margin-top: 0;
}

.ordinance-address-laws-toggle {
  margin-top: 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.85rem 0.85rem;
  background: rgba(250, 250, 252, 0.55);
}

.ordinance-address-laws-toggle--staff {
  margin-top: 0.85rem;
}

.ordinance-address-laws-toggle__summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  padding: 0.45rem 0.15rem 0.45rem 1.15rem;
  line-height: 1.35;
  position: relative;
}

.ordinance-address-laws-toggle__summary::before {
  content: "▸";
  position: absolute;
  left: 0.05rem;
  top: 0.42rem;
  font-size: 0.72rem;
  opacity: 0.72;
  line-height: 1;
}

.ordinance-address-laws-toggle[open] > .ordinance-address-laws-toggle__summary::before {
  content: "▾";
}

.ordinance-address-laws-toggle__summary::-webkit-details-marker {
  display: none;
}

.ordinance-address-laws-toggle__summary::marker {
  content: "";
}

.ordinance-address-laws-toggle__body {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.2rem;
}

.ordinance-criteria-ordinance {
  margin: 0.2rem 0 0.38rem;
  font-size: 0.82rem;
  color: var(--ink-secondary);
  font-weight: 600;
  line-height: 1.45;
}

.ordinance-related-panel {
  margin-top: 0.95rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.88);
}

.ordinance-related-panel--staff {
  margin-top: 0.85rem;
}

.ordinance-related-panel__head {
  display: grid;
  gap: 0.22rem;
}

.ordinance-related-panel__head h4,
.ordinance-related-panel__head h5 {
  margin: 0;
  color: var(--ink);
}

.ordinance-related-summary {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.8rem;
  line-height: 1.5;
}

.ordinance-related-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.ordinance-related-item,
.ordinance-related-empty {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.78);
  padding: 0.8rem 0.88rem;
}

.ordinance-related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.ordinance-related-link {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.ordinance-related-link:hover {
  text-decoration: underline;
}

.ordinance-related-link.is-static {
  text-decoration: none;
}

.ordinance-related-meta,
.ordinance-related-match {
  margin: 0.32rem 0 0;
  color: var(--ink-secondary);
  font-size: 0.78rem;
  line-height: 1.5;
}

.ordinance-related-match {
  color: var(--ink);
}

.ordinance-related-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.24rem 0.56rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.ordinance-related-badge--local {
  background: rgba(21, 128, 61, 0.12);
  color: #166534;
}

.ordinance-related-badge--regional {
  background: rgba(3, 105, 161, 0.12);
  color: #075985;
}

.ordinance-related-badge--search {
  background: rgba(180, 83, 9, 0.12);
  color: #9a3412;
}

.ordinance-grid {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.ordinance-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
}

.ordinance-card:hover {
  box-shadow: var(--shadow);
}

.ordinance-card--distance {
  border-top: 4px solid #b45309;
}

.ordinance-card--restriction {
  border-top: 4px solid #b91c1c;
}

.ordinance-card--caution {
  border-top: 4px solid #0369a1;
}

.ordinance-card--benefit {
  border-top: 4px solid #15803d;
}

.ordinance-grid h4,
.ordinance-grid h5 {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-secondary);
}

.ordinance-card-copy {
  margin: 0.32rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.ordinance-list {
  margin: 0.55rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.38rem;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.48;
}

.ordinance-criteria {
  margin: 1rem 0 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-top: 4px solid #7c3aed;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.7), rgba(237, 233, 254, 0.55));
}

.ordinance-criteria > h4,
.ordinance-criteria > h5 {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  color: var(--ink);
}

.ordinance-criteria-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.6rem;
}

.ordinance-criteria-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
}

.ordinance-criteria-tab {
  appearance: none;
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 999px;
  background: #fff;
  color: #5b21b6;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 0.42rem 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ordinance-criteria-tab:hover {
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(245, 243, 255, 0.95);
}

.ordinance-criteria-tab--active {
  border-color: #7c3aed;
  background: linear-gradient(180deg, #8b5cf6, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.22);
}

.ordinance-criteria-panel[hidden],
.ordinance-criteria-summary-item[hidden],
.ordinance-criteria-summary-empty[hidden] {
  display: none !important;
}

.ordinance-criteria-summary-empty {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.ordinance-criteria-item {
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-left: 3px solid #7c3aed;
  background: #ffffff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.ordinance-criteria-item + .ordinance-criteria-item {
  margin-top: 0;
}

.ordinance-criteria-category {
  display: inline-block;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  color: #5b21b6;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.ordinance-criteria-heading {
  display: block;
  margin: 0.35rem 0 0.3rem;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.88rem;
}

.ordinance-criteria-text {
  margin: 0;
  color: var(--ink);
  font-size: 0.83rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: keep-all;
}

.ordinance-criteria-source {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.76rem;
  color: var(--accent);
  text-decoration: none;
}

.ordinance-criteria-source:hover {
  text-decoration: underline;
}

.ordinance-criteria-empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.ordinance-criteria-summary {
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.95);
}

.ordinance-criteria-popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
}

.ordinance-criteria-popup-head .ordinance-criteria-summary-title {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.ordinance-popup-open-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.ordinance-criteria-toolbar {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.85), rgba(255, 255, 255, 0.95));
}

.ordinance-criteria-toolbar-note {
  margin: 0 0 0.5rem;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.45;
}

.ordinance-criteria-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.ordinance-criteria-articles {
  margin-top: 0.35rem;
}

.ordinance-criteria-combined-popup {
  display: grid;
  gap: 1rem;
}

.ordinance-criteria-combined-popup .ordinance-criteria-toolbar {
  margin-bottom: 0;
}

.ordinance-criteria-popup-dialog__body .ordinance-criteria-combined-popup .ordinance-attachments--hide-inline-detail > .ordinance-attachments-body {
  display: block !important;
}

.ordinance-criteria-popup-dialog__body .ordinance-criteria-combined-popup .ordinance-criteria-summary--hide-inline-detail .ordinance-criteria-summary-note,
.ordinance-criteria-popup-dialog__body .ordinance-criteria-combined-popup .ordinance-criteria-summary--hide-inline-detail .ordinance-criteria-summary-list {
  display: block !important;
}

.ordinance-criteria-popup-dialog__body .ordinance-criteria-combined-popup .ordinance-criteria-summary--hide-inline-detail .ordinance-criteria-summary-list {
  display: grid !important;
}

/* 인라인 조례 패널: 요약·별표첨부 세부 본문은 「크게 보기」로만 확인 (패널 내 스크롤 제거) */
.ordinance-criteria-list .ordinance-criteria-summary.ordinance-criteria-summary--hide-inline-detail .ordinance-criteria-summary-note,
.ordinance-criteria-list .ordinance-criteria-summary.ordinance-criteria-summary--hide-inline-detail .ordinance-criteria-summary-list {
  display: none !important;
}

.ordinance-criteria-list .ordinance-attachments.ordinance-attachments--hide-inline-detail > .ordinance-attachments-body {
  display: none !important;
}

/* 다이얼로그에 복제된 블록은 전체 내용 표시 */
.ordinance-criteria-popup-dialog__body .ordinance-criteria-summary--hide-inline-detail .ordinance-criteria-summary-note,
.ordinance-criteria-popup-dialog__body .ordinance-criteria-summary--hide-inline-detail .ordinance-criteria-summary-list {
  display: block !important;
}

.ordinance-criteria-popup-dialog__body .ordinance-criteria-summary--hide-inline-detail .ordinance-criteria-summary-list {
  display: grid !important;
}

.ordinance-criteria-popup-dialog__body .ordinance-attachments.ordinance-attachments--hide-inline-detail > .ordinance-attachments-body {
  display: block !important;
}

.ordinance-criteria-summary-title {
  margin: 0 0 0.35rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #5b21b6;
}

.ordinance-criteria-summary-note {
  margin: 0 0 0.55rem;
  padding: 0.35rem 0.5rem 0.4rem 0.75rem;
  border-left: 3px solid rgba(124, 58, 237, 0.2);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted);
  background: rgba(124, 58, 237, 0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ordinance-criteria-summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.ordinance-criteria-summary-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.75rem;
  align-items: start;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink);
  padding: 0.55rem 0.65rem 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-left: 4px solid #7c3aed;
  background: rgba(255, 255, 255, 0.92);
}

.ordinance-criteria-summary-tag {
  display: inline-block;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  color: #5b21b6;
  font-weight: 700;
  font-size: 0.72rem;
  margin-top: 0.12rem;
}

.ordinance-criteria-summary-text {
  word-break: keep-all;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ordinance-criteria-summary-details {
  margin: 0;
}

.ordinance-criteria-summary-summary {
  cursor: pointer;
  list-style: none;
  display: block;
  max-width: 100%;
  color: var(--ink);
  position: relative;
  padding: 0.2rem 0.35rem 0.25rem 1.2rem;
  margin: 0 0 0 0.1rem;
  font-size: 0.82rem;
  line-height: 1.48;
  border-radius: var(--radius-sm);
  background: rgba(124, 58, 237, 0.06);
}

.ordinance-criteria-summary-summary::-webkit-details-marker {
  display: none;
}

.ordinance-criteria-summary-summary::marker {
  content: "";
}

.ordinance-criteria-summary-summary::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.55em;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 2px solid #7c3aed;
  border-bottom: 2px solid #7c3aed;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  opacity: 0.85;
}

.ordinance-criteria-summary-details[open] > .ordinance-criteria-summary-summary::before {
  transform: rotate(45deg);
  top: 0.5em;
}

.ordinance-criteria-summary-source {
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.12em;
}

.ordinance-criteria-summary-details[open] .ordinance-criteria-summary-source {
  text-decoration-style: solid;
}

.ordinance-criteria-summary-provenance {
  margin: 0.15rem 0 0 1.35rem;
  padding: 0.5rem 0.65rem 0.55rem 0.85rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-left: 3px solid rgba(124, 58, 237, 0.45);
  background: rgba(250, 245, 255, 0.98);
}

.ordinance-criteria-summary-provenance-kicker {
  margin: 0 0 0.4rem;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #5b21b6;
}

.ordinance-criteria-summary-provenance-list {
  margin: 0;
  padding: 0 0 0 1.15rem;
  list-style-type: disc;
  list-style-position: outside;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.74rem;
  line-height: 1.52;
  color: var(--ink);
}

.ordinance-criteria-summary-provenance-list li {
  padding-left: 0.15rem;
}

.ordinance-criteria-summary-provenance-list li::marker {
  color: #7c3aed;
}

.ordinance-criteria-summary-provenance-empty {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
  padding: 0.35rem 0 0.15rem 1.15rem;
}

.ordinance-criteria-summary-body-line {
  margin: 0.1rem 0 0;
  padding: 0.38rem 0.5rem 0.42rem 1.35rem;
  margin-left: 0.1rem;
  border-left: 2px solid rgba(124, 58, 237, 0.22);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(241, 245, 249, 0.75);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink);
}

.ordinance-criteria-summary-body-line--solo {
  margin-left: 0;
  padding-left: 0.55rem;
  border-left: 2px dashed rgba(124, 58, 237, 0.22);
  background: rgba(248, 250, 252, 0.85);
}

.ordinance-criteria-summary-sep {
  color: var(--muted);
  margin-right: 0.12rem;
}

.ordinance-attachments {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(124, 58, 237, 0.32);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.92);
}

.ordinance-attachments--collapsible {
  padding: 0.55rem 0.75rem 0.65rem;
}

.ordinance-attachments-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.15rem 0.35rem 1.15rem;
  position: relative;
  font-weight: 700;
  color: #5b21b6;
}

.ordinance-attachments-summary::-webkit-details-marker {
  display: none;
}

.ordinance-attachments-summary::marker {
  content: "";
}

.ordinance-attachments-summary::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.62em;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 2px solid #7c3aed;
  border-bottom: 2px solid #7c3aed;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  opacity: 0.85;
}

.ordinance-attachments--collapsible[open] > .ordinance-attachments-summary::before {
  transform: rotate(45deg);
  top: 0.55em;
}

.ordinance-attachments-summary-title {
  font-size: 0.86rem;
}

.ordinance-attachments-summary-main {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
}

.ordinance-attachments-count {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6d28d9;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
}

.ordinance-attachments-body {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(124, 58, 237, 0.16);
}

.ordinance-attachments-title {
  margin: 0 0 0.45rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #5b21b6;
}

.ordinance-att-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

.ordinance-att-item {
  list-style: none;
}

.ordinance-att-entry {
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.96);
  overflow: hidden;
}

.ordinance-att-entry-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem 0.55rem 1.35rem;
  position: relative;
}

.ordinance-att-entry-summary::-webkit-details-marker {
  display: none;
}

.ordinance-att-entry-summary::marker {
  content: "";
}

.ordinance-att-entry-summary::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.72em;
  width: 0.34rem;
  height: 0.34rem;
  border-right: 2px solid #7c3aed;
  border-bottom: 2px solid #7c3aed;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  opacity: 0.8;
}

.ordinance-att-entry[open] > .ordinance-att-entry-summary::before {
  transform: rotate(45deg);
  top: 0.65em;
}

.ordinance-att-entry-title {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

.ordinance-att-entry-kind {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #5b21b6;
  padding: 0.16rem 0.42rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
}

.ordinance-att-entry-body {
  padding: 0 0.65rem 0.65rem;
  border-top: 1px solid rgba(124, 58, 237, 0.12);
}

.ordinance-att-entry-actions {
  margin-top: 0.5rem;
}

.ordinance-att-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.ordinance-att-link:hover {
  text-decoration: underline;
}

.ordinance-att-title {
  margin-left: 0.25rem;
  color: var(--ink);
  font-weight: 500;
}

.ordinance-att-filename {
  display: block;
  margin: 0.35rem 0 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.ordinance-att-content-list {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.ordinance-att-content-item {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-light);
  border-left: 3px solid #7c3aed;
  border-radius: var(--radius-sm);
  background: var(--muted-bg);
}

.ordinance-att-content-tag {
  display: inline-flex;
  margin-bottom: 0.28rem;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  color: #5b21b6;
  font-size: 0.68rem;
  font-weight: 800;
}

.ordinance-att-content-heading {
  display: block;
  margin: 0 0 0.32rem;
  font-size: 0.8rem;
  color: var(--ink);
  line-height: 1.4;
}

.ordinance-att-content-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.52;
  color: var(--ink-secondary);
  max-height: 16rem;
  overflow: auto;
}

.ordinance-att-content-empty {
  margin: 0.5rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.45;
}

.ordinance-att-hint {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

/* 조례 요약·별표첨부 — 크게 보기 다이얼로그 */
.ordinance-criteria-popup-dialog {
  padding: 0;
  border: none;
  max-width: min(920px, 94vw);
  width: min(920px, 94vw);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.28);
  background: transparent;
}

.ordinance-criteria-popup-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.ordinance-criteria-popup-dialog__box {
  background: var(--surface, #fff);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 900px);
}

.ordinance-criteria-popup-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.08), transparent);
}

.ordinance-criteria-popup-dialog__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
}

.ordinance-criteria-popup-dialog__close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.ordinance-criteria-popup-dialog__close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink);
}

.ordinance-criteria-popup-dialog__body {
  padding: 0.85rem 1rem 1rem;
  overflow: auto;
  max-height: calc(85vh - 56px);
  font-size: 0.88rem;
  line-height: 1.55;
}

.ordinance-criteria-popup-dialog__body .ordinance-criteria-summary,
.ordinance-criteria-popup-dialog__body .ordinance-attachments {
  margin-bottom: 0;
}

.ordinance-src-att-link {
  font-weight: 600;
  color: var(--accent);
}

.ordinance-src-att-label {
  font-weight: 500;
  color: var(--muted);
}

.ordinance-diagnostics {
  margin-top: 1.1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ordinance-diagnostics h4,
.ordinance-diagnostics h5 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #b91c1c;
}

.ordinance-diagnostics-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ordinance-diagnostic-empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.ordinance-diagnostic-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.ordinance-diagnostic-group-fail {
  border-left: 3px solid #dc2626;
}

.ordinance-diagnostic-group-conditional {
  border-left: 3px solid #d97706;
  background: rgba(251, 191, 36, 0.08);
}

.ordinance-diagnostic-group-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.ordinance-diagnostic-group-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.ordinance-diagnostic-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ordinance-diagnostic-card-fail {
  border-color: rgba(220, 38, 38, 0.35);
}

.ordinance-diagnostic-card-conditional {
  border-color: rgba(217, 119, 6, 0.35);
}

.ordinance-diagnostic-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.ordinance-diagnostic-status {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--muted);
}

.ordinance-diagnostic-status-fail {
  background: #dc2626;
}

.ordinance-diagnostic-status-conditional {
  background: #d97706;
}

.ordinance-diagnostic-status-pass {
  background: #16a34a;
}

.ordinance-diagnostic-status-unknown {
  background: #64748b;
}

.ordinance-diagnostic-reason,
.ordinance-diagnostic-bucket {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(15, 23, 42, 0.08);
  color: var(--ink);
}

.ordinance-diagnostic-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}

.ordinance-diagnostic-basis {
  margin: 0;
  font-size: 0.76rem;
  color: var(--ink-secondary);
}

.ordinance-diagnostic-summary {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink);
}

.ordinance-diagnostic-trigger {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid #dc2626;
  background: rgba(254, 226, 226, 0.6);
  font-size: 0.82rem;
  line-height: 1.5;
  color: #7f1d1d;
  white-space: pre-wrap;
}

.ordinance-diagnostic-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  counter-reset: ordinance-diagnostic-step;
}

.ordinance-diagnostic-step {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.03);
  font-size: 0.77rem;
  line-height: 1.45;
  color: var(--ink-secondary);
}

.ordinance-diagnostic-step strong {
  color: var(--ink);
  font-weight: 700;
}

.ordinance-diagnostic-outcome-hit,
.ordinance-diagnostic-outcome-fail {
  background: rgba(220, 38, 38, 0.1);
}

.ordinance-diagnostic-outcome-downgrade {
  background: rgba(217, 119, 6, 0.12);
}

.ordinance-diagnostic-outcome-miss,
.ordinance-diagnostic-outcome-none {
  background: rgba(15, 23, 42, 0.04);
}

.ordinance-diagnostic-full {
  margin: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.04);
  font-size: 0.78rem;
  color: var(--ink-secondary);
}

.ordinance-diagnostic-full summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.ordinance-diagnostic-full p {
  margin: 0.4rem 0 0;
  white-space: pre-wrap;
  line-height: 1.5;
}

.ordinance-diagnostic-source {
  align-self: flex-start;
  font-size: 0.78rem;
  color: #1d4ed8;
  text-decoration: none;
}

.ordinance-diagnostic-source:hover {
  text-decoration: underline;
}

.ordinance-source {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-secondary);
}

.ordinance-source a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.ordinance-source a:hover {
  text-decoration: underline;
}

.legal-rag-panel {
  border-left: 4px solid #0f766e;
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.96), rgba(236, 253, 245, 0.92));
}

.legal-rag-panel--staff {
  margin-top: 0.95rem;
}

.legal-rag-panel--citations-only {
  padding: 0.85rem 0.95rem;
}

.legal-rag-citation-panel--solo {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.legal-rag-citation-panel--solo .staff-flow-card__title {
  margin: 0 0 0.65rem;
}

.legal-rag-citation-panel--solo .legal-rag-citation-list {
  margin: 0;
}

.legal-rag-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}

.legal-rag-head h3,
.legal-rag-head h4,
.legal-rag-head h5 {
  margin: 0;
}

.legal-rag-summary {
  margin: 0.36rem 0 0;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.55;
}

.legal-rag-toolbar {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.88);
}

.legal-rag-toolbar--compact {
  padding: 0.8rem 0.9rem;
}

.legal-rag-field {
  display: grid;
  gap: 0.32rem;
  color: var(--ink-secondary);
  font-size: 0.82rem;
  font-weight: 700;
}

.legal-rag-field input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 12px;
  padding: 0.72rem 0.82rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font-size: 0.92rem;
}

.legal-rag-meta,
.legal-rag-model-status,
.legal-rag-qa-summary {
  margin: 0.5rem 0 0;
  color: var(--ink-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}

.legal-rag-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0.34rem 0.68rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.legal-rag-status--pass {
  background: rgba(21, 128, 61, 0.14);
  color: #166534;
}

.legal-rag-status--conditional,
.legal-rag-status--loading,
.legal-rag-status--unknown {
  background: rgba(180, 83, 9, 0.12);
  color: #9a3412;
}

.legal-rag-status--fail {
  background: rgba(185, 28, 28, 0.12);
  color: #991b1b;
}

.legal-rag-grid {
  margin-top: 0.88rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.legal-rag-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
}

.legal-rag-card--restriction {
  border-top: 4px solid #b91c1c;
}

.legal-rag-card--distance {
  border-top: 4px solid #b45309;
}

.legal-rag-card--benefit {
  border-top: 4px solid #15803d;
}

.legal-rag-card--caution {
  border-top: 4px solid #0369a1;
}

.legal-rag-card--manual {
  border-top: 4px solid #475569;
}

.legal-rag-list,
.legal-rag-citation-list,
.legal-rag-qa-list {
  margin: 0.58rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.48;
}

.legal-rag-item,
.legal-rag-citation-item,
.legal-rag-empty {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
  padding: 0.78rem 0.84rem;
  list-style: none;
}

.legal-rag-item-text,
.legal-rag-item-ref,
.legal-rag-citation-meta,
.legal-rag-citation-excerpt {
  margin: 0;
}

.legal-rag-item-ref,
.legal-rag-citation-meta {
  margin-top: 0.28rem;
  color: var(--ink-secondary);
  font-size: 0.76rem;
}

.legal-rag-citation-panel,
.legal-rag-qa-panel {
  margin-top: 0.88rem;
}

.legal-rag-citation-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.legal-rag-citation-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 0.2rem 0.46rem;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 800;
}

.legal-rag-citation-origin {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: var(--ink-secondary);
  font-size: 0.72rem;
  font-weight: 700;
}

.legal-rag-citation-context {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(2, 132, 199, 0.12);
  color: #0f5c7c;
  font-size: 0.72rem;
  font-weight: 700;
}

.legal-rag-citation-link {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.legal-rag-citation-link:hover {
  text-decoration: underline;
}

.legal-rag-citation-link.is-static {
  text-decoration: none;
}

.distance-guide-panel {
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(248, 250, 252, 0.94));
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.07);
  padding: 1rem 1.04rem;
}

.distance-guide-panel--input {
  margin-top: 1rem;
}

.distance-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}

.distance-guide-summary,
.distance-guide-meta,
.distance-guide-card-meta,
.distance-guide-card-submeta {
  margin: 0;
}

.distance-guide-summary {
  margin-top: 0.28rem;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.55;
}

.distance-guide-meta {
  margin-top: 0.55rem;
  color: var(--ink-secondary);
  font-size: 0.79rem;
}

.distance-guide-grid {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.distance-guide-type {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}

.distance-guide-type select {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font-size: 0.9rem;
}

.distance-guide-card {
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.86rem 0.92rem;
}

.distance-guide-card h4,
.distance-guide-card h5 {
  margin: 0;
}

.distance-guide-value {
  margin: 0.48rem 0 0;
  color: #0f766e;
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.distance-guide-card-meta {
  margin-top: 0.34rem;
  color: var(--ink);
  font-size: 0.83rem;
  line-height: 1.45;
}

.distance-guide-card-submeta {
  margin-top: 0.38rem;
  color: var(--ink-secondary);
  font-size: 0.76rem;
  line-height: 1.42;
}

.distance-guide-note-panel {
  margin-top: 0.88rem;
}

.distance-guide-note-list {
  margin: 0.55rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.42rem;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.46;
}

@media (max-width: 720px) {
  .ordinance-search-toolbar,
  .ordinance-related-panel,
  .legal-rag-toolbar {
    padding: 0.82rem 0.88rem;
  }

  .ordinance-related-head {
    align-items: flex-start;
  }

  .legal-rag-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .distance-guide-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .distance-guide-grid {
    grid-template-columns: 1fr;
  }
}

.vworld-capability-panel {
  border-left: 4px solid var(--ink-secondary);
}

.vworld-capability-summary {
  margin-top: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.vworld-capability-grid {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vworld-capability-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 0.85rem 0.9rem;
}

.vworld-capability-card .title {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.vworld-capability-card .status {
  margin: 0.4rem 0 0;
  font-size: 0.96rem;
  font-weight: 700;
}

.vworld-capability-card .reason {
  margin: 0.5rem 0 0;
  font-size: 0.81rem;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.vworld-capability-card.pass .status {
  color: var(--ok);
}

.vworld-capability-card.conditional .status,
.vworld-capability-card.unknown .status {
  color: var(--warn);
}

.vworld-capability-card.fail .status {
  color: var(--danger);
}

.vworld-evidence-list {
  margin: 0.9rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.83rem;
  line-height: 1.45;
}

.vworld-landuse-panel {
  border-left: 4px solid #0b71c2;
}

.vworld-landuse-summary {
  margin-top: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.vworld-landuse-list {
  margin: 0.85rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.45;
}

.vworld-landuse-split-host {
  padding-left: 0;
}

.vworld-landuse-split {
  display: grid;
  gap: 0.85rem;
}

.vworld-landuse-split__block {
  margin: 0;
}

.vworld-landuse-split__label {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-secondary);
  line-height: 1.35;
}

.vworld-landuse-split__ul {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.3rem;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.45;
}

.vworld-landuse-split__empty {
  color: var(--ink-secondary);
  list-style: none;
  margin-left: -1rem;
  padding-left: 0;
}

.vworld-landuse-split__ul .vworld-landuse-split__empty {
  margin-left: 0;
}

.staff-flow-page1-landuse-aside__list.vworld-landuse-split-host {
  padding-left: 0;
}

/* 지도 클릭(WMS) · 용도지역 강조 (계획관리·농림·주거·상업 등) */
.vworld-landuse-split__block--has-emphasis {
  padding: 10px 10px 8px;
  margin: 0 -4px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.9), rgba(248, 250, 252, 0.55));
  border: 1px solid rgba(100, 116, 139, 0.35);
}

.vworld-landuse-map-pick-hero {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border: 2px solid #94a3b8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 3px 10px rgba(15, 23, 42, 0.08);
}

.vworld-landuse-map-pick-hero__eyebrow {
  display: block;
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
}

.vworld-landuse-map-pick-hero__name {
  margin: 0;
  padding: 8px 10px 8px 12px;
  font-size: clamp(1rem, 3vw, 1.22rem);
  font-weight: 900;
  line-height: 1.25;
  word-break: keep-all;
  border-radius: 8px;
  border-left: 4px solid #64748b;
  background: rgba(255, 255, 255, 0.72);
}

.vworld-landuse-map-pick-hero__name + .vworld-landuse-map-pick-hero__name {
  margin-top: 6px;
}

.vworld-landuse-split__ul--map-pick {
  gap: 0.45rem;
}

.vworld-landuse-zone-item {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.vworld-landuse-zone-item--emphasis {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.vworld-landuse-zone-item__badge {
  flex-shrink: 0;
  padding: 3px 7px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  border-radius: 6px;
}

.vworld-landuse-zone-item__label {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
  word-break: keep-all;
}

.vworld-landuse-zone-item:not(.vworld-landuse-zone-item--emphasis) {
  padding-left: 0.15rem;
  font-size: 0.82rem;
  color: var(--ink);
}

/* 용도별 색상 — 히어로·목록·칩 공통 data-landuse-kind */
.vworld-landuse-map-pick-hero__name[data-landuse-kind="plan-mgmt"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="plan-mgmt"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="plan-mgmt"],
.staff-landuse-id-popup__name[data-landuse-kind="plan-mgmt"] {
  --lu-bg: rgba(254, 243, 199, 0.92);
  --lu-border: #d97706;
  --lu-badge: linear-gradient(180deg, #f59e0b, #d97706);
  --lu-text: #78350f;
}

.vworld-landuse-map-pick-hero__name[data-landuse-kind="agri-forest"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="agri-forest"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="agri-forest"],
.staff-landuse-id-popup__name[data-landuse-kind="agri-forest"] {
  --lu-bg: rgba(220, 252, 231, 0.92);
  --lu-border: #16a34a;
  --lu-badge: linear-gradient(180deg, #22c55e, #15803d);
  --lu-text: #14532d;
}

.vworld-landuse-map-pick-hero__name[data-landuse-kind="green"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="green"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="green"],
.staff-landuse-id-popup__name[data-landuse-kind="green"] {
  --lu-bg: rgba(209, 250, 229, 0.9);
  --lu-border: #059669;
  --lu-badge: linear-gradient(180deg, #10b981, #047857);
  --lu-text: #064e3b;
}

.vworld-landuse-map-pick-hero__name[data-landuse-kind="residential"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="residential"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="residential"],
.staff-landuse-id-popup__name[data-landuse-kind="residential"] {
  --lu-bg: rgba(219, 234, 254, 0.92);
  --lu-border: #2563eb;
  --lu-badge: linear-gradient(180deg, #3b82f6, #1d4ed8);
  --lu-text: #1e3a8a;
}

.vworld-landuse-map-pick-hero__name[data-landuse-kind="commercial"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="commercial"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="commercial"],
.staff-landuse-id-popup__name[data-landuse-kind="commercial"] {
  --lu-bg: rgba(237, 233, 254, 0.92);
  --lu-border: #7c3aed;
  --lu-badge: linear-gradient(180deg, #8b5cf6, #6d28d9);
  --lu-text: #4c1d95;
}

.vworld-landuse-map-pick-hero__name[data-landuse-kind="industrial"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="industrial"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="industrial"],
.staff-landuse-id-popup__name[data-landuse-kind="industrial"] {
  --lu-bg: rgba(226, 232, 240, 0.95);
  --lu-border: #475569;
  --lu-badge: linear-gradient(180deg, #64748b, #334155);
  --lu-text: #1e293b;
}

.vworld-landuse-map-pick-hero__name[data-landuse-kind="mgmt"],
.vworld-landuse-map-pick-hero__name[data-landuse-kind="mgmt-prod"],
.vworld-landuse-map-pick-hero__name[data-landuse-kind="mgmt-conserve"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="mgmt"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="mgmt-prod"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="mgmt-conserve"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="mgmt"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="mgmt-prod"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="mgmt-conserve"],
.staff-landuse-id-popup__name[data-landuse-kind="mgmt"],
.staff-landuse-id-popup__name[data-landuse-kind="mgmt-prod"],
.staff-landuse-id-popup__name[data-landuse-kind="mgmt-conserve"] {
  --lu-bg: rgba(204, 251, 241, 0.9);
  --lu-border: #0d9488;
  --lu-badge: linear-gradient(180deg, #14b8a6, #0f766e);
  --lu-text: #134e4a;
}

.vworld-landuse-map-pick-hero__name[data-landuse-kind="nature"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="nature"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="nature"],
.staff-landuse-id-popup__name[data-landuse-kind="nature"] {
  --lu-bg: rgba(204, 251, 241, 0.88);
  --lu-border: #0f766e;
  --lu-badge: linear-gradient(180deg, #0d9488, #115e59);
  --lu-text: #134e4a;
}

.vworld-landuse-map-pick-hero__name[data-landuse-kind="generic"],
.vworld-landuse-zone-item--emphasis[data-landuse-kind="generic"],
.address-map-landuse-pick-chip--emphasis[data-landuse-kind="generic"],
.staff-landuse-id-popup__name[data-landuse-kind="generic"] {
  --lu-bg: rgba(241, 245, 249, 0.95);
  --lu-border: #64748b;
  --lu-badge: linear-gradient(180deg, #94a3b8, #64748b);
  --lu-text: #334155;
}

.vworld-landuse-map-pick-hero__name[data-landuse-kind] {
  color: var(--lu-text, #334155);
  border-left-color: var(--lu-border, #64748b);
  background: var(--lu-bg, rgba(255, 255, 255, 0.72));
}

.staff-landuse-id-popup__name[data-landuse-kind] {
  color: var(--lu-text, #0f172a);
  border-left-color: var(--lu-border, #64748b);
  background: var(--lu-bg, #f8fafc);
}

.staff-landuse-id-popup__name[data-landuse-kind] .staff-landuse-id-popup__badge {
  background: var(--lu-badge, #64748b);
}

.vworld-landuse-zone-item--emphasis[data-landuse-kind] {
  background: var(--lu-bg, #f8fafc);
  border-color: var(--lu-border, #94a3b8);
}

.vworld-landuse-zone-item--emphasis[data-landuse-kind] .vworld-landuse-zone-item__badge {
  background: var(--lu-badge, linear-gradient(180deg, #94a3b8, #64748b));
}

.vworld-landuse-zone-item--emphasis[data-landuse-kind] .vworld-landuse-zone-item__label {
  color: var(--lu-text, #334155);
}

.address-map-landuse-pick-chip--emphasis[data-landuse-kind] {
  font-size: clamp(1rem, 3vw, 1.18rem);
  color: var(--lu-text, #334155);
  background: var(--lu-bg, #f1f5f9);
  border-color: var(--lu-border, #64748b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 3px 12px color-mix(in srgb, var(--lu-border, #64748b) 28%, transparent);
}

.staff-flow-page1-landuse-aside .vworld-landuse-split__block--has-emphasis .vworld-landuse-split__label {
  color: #334155;
  font-weight: 700;
}

.eiass-landuse-panel {
  border-left: 4px solid #0f766e;
}

.eiass-landuse-summary {
  margin-top: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.eiass-landuse-grid {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.eiass-landuse-grid h4 {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-secondary);
}

.eiass-landuse-list {
  margin: 0.55rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.45;
}

.permit-stage-panel {
  border-left: 4px solid #0f766e;
}

.permit-stage-summary {
  margin-top: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.permit-stage-summary.pass {
  color: var(--ok);
}

.permit-stage-summary.conditional,
.permit-stage-summary.unknown {
  color: var(--warn);
}

.permit-stage-summary.fail {
  color: var(--danger);
}

.permit-stage-list {
  margin: 0.85rem 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.permit-stage-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 0.72rem 0.85rem;
}

.permit-stage-item.pass {
  border-left: 3px solid var(--ok);
}

.permit-stage-item.conditional,
.permit-stage-item.unknown {
  border-left: 3px solid var(--warn);
}

.permit-stage-item.fail {
  border-left: 3px solid var(--danger);
}

.permit-stage-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.permit-stage-item-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}

.permit-stage-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.4rem;
  padding: 0 0.52rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.permit-stage-item-badge.pass {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: rgba(5, 150, 105, 0.25);
}

.permit-stage-item-badge.conditional,
.permit-stage-item-badge.unknown {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: rgba(217, 119, 6, 0.25);
}

.permit-stage-item-badge.fail {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(220, 38, 38, 0.25);
}

.permit-stage-item-reason {
  margin: 0.55rem 0 0;
  color: var(--ink-secondary);
  font-size: 0.82rem;
  line-height: 1.48;
}

.permit-stage-item-meta {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.permit-stage-item-meta strong {
  color: var(--ink-secondary);
  margin-right: 0.25rem;
}

.legal-reasoning-panel {
  border-left: 4px solid #1d4ed8;
}

.legal-reasoning-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.legal-reasoning-summary {
  margin: 0.35rem 0 0;
  color: var(--ink-secondary);
  font-size: 0.94rem;
  line-height: 1.6;
}

.legal-reasoning-list {
  margin-top: 0.95rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.legal-reasoning-empty {
  margin: 0;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: 1rem 1.05rem;
  color: var(--muted);
}

.legal-reasoning-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: 0.95rem 1rem;
  display: grid;
  gap: 0.68rem;
  box-shadow: var(--shadow-sm);
}

.legal-reasoning-item.pass {
  border-left: 4px solid var(--ok);
}

.legal-reasoning-item.conditional,
.legal-reasoning-item.unknown {
  border-left: 4px solid var(--warn);
}

.legal-reasoning-item.fail {
  border-left: 4px solid var(--danger);
}

.legal-reasoning-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.legal-reasoning-item__step {
  margin: 0 0 0.16rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.legal-reasoning-item__head h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}

.legal-reasoning-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  padding: 0 0.62rem;
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid var(--border);
}

.legal-reasoning-item__badge.pass {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: rgba(5, 150, 105, 0.24);
}

.legal-reasoning-item__badge.conditional,
.legal-reasoning-item__badge.unknown {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: rgba(217, 119, 6, 0.24);
}

.legal-reasoning-item__badge.fail {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(220, 38, 38, 0.22);
}

.legal-reasoning-item__summary {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 700;
}

.legal-reasoning-item__meta {
  margin: 0;
  display: grid;
  gap: 0.18rem;
  color: var(--ink-secondary);
}

.legal-reasoning-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.solar-audit-panel {
  border-left: 4px solid #0f766e;
}

.solar-audit-summary {
  margin-top: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.solar-audit-summary.pass {
  color: var(--ok);
}

.solar-audit-summary.conditional,
.solar-audit-summary.unknown {
  color: var(--warn);
}

.solar-audit-summary.fail {
  color: var(--danger);
}

.solar-audit-kpi {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.solar-audit-kpi p {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 0.75rem 0.8rem;
  display: grid;
  gap: 0.25rem;
}

.solar-audit-kpi span {
  font-size: 0.78rem;
  color: var(--muted);
}

.solar-audit-kpi strong {
  font-size: 1rem;
  color: var(--ink);
}

.solar-audit-grid {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.solar-audit-grid h4,
.solar-audit-actions-wrap h4 {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-secondary);
}

.solar-audit-list {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.solar-audit-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 0.7rem 0.75rem;
}

.solar-audit-item.pass {
  border-color: #86efac;
}

.solar-audit-item.conditional,
.solar-audit-item.unknown {
  border-color: #fdba74;
}

.solar-audit-item.fail {
  border-color: #fca5a5;
}

.solar-audit-item-head {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-secondary);
}

.solar-audit-item-head strong {
  font-size: 0.84rem;
}

.solar-audit-item.pass .solar-audit-item-head strong {
  color: var(--ok);
}

.solar-audit-item.conditional .solar-audit-item-head strong,
.solar-audit-item.unknown .solar-audit-item-head strong {
  color: var(--warn);
}

.solar-audit-item.fail .solar-audit-item-head strong {
  color: var(--danger);
}

.solar-audit-item-reason {
  margin: 0.38rem 0 0;
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.45;
}

.solar-audit-item-meta {
  margin: 0.3rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.solar-audit-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.75rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.solar-audit-actions-wrap {
  margin-top: 0.8rem;
}

.solar-next-actions {
  margin: 0.55rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.84rem;
  line-height: 1.45;
}

.building-lookup-panel {
  border-left: 4px solid #2563eb;
}

.building-lookup-summary {
  margin-top: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.building-lookup-list {
  margin: 0.85rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.45;
}

.source-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--panel);
  min-height: 7.8rem;
}

.source-title {
  font-size: 0.84rem;
  color: var(--muted);
}

.source-status {
  font-weight: 700;
  margin-top: 6px;
  font-size: 1rem;
}

.source-reason {
  margin-top: var(--space-md);
  font-size: 0.82rem;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.source-card.pass .source-status {
  color: var(--ok);
}

.source-card.conditional .source-status,
.source-card.unknown .source-status {
  color: var(--warn);
}

.source-card.fail .source-status {
  color: var(--danger);
}

.decision-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.journey-step {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  min-height: 6.5rem;
}

.journey-label {
  font-size: 0.84rem;
  color: var(--muted);
}

.journey-state {
  margin-top: 6px;
  font-weight: 700;
  font-size: 0.96rem;
}

.journey-step.done .journey-state {
  color: var(--ok);
}

.journey-step.check .journey-state {
  color: var(--warn);
}

.journey-step.blocked .journey-state {
  color: var(--danger);
}

.bottom-grid h3 {
  margin-bottom: 8px;
}

.hidden {
  display: none;
}

@keyframes fade-in {
  from { opacity: 0.5; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  main {
    max-width: 70rem;
    grid-template-columns: 1fr;
  }

  body > header.hero,
  body.view-result > header.hero {
    max-width: 70rem;
  }

  .bottom-grid,
  .cards,
  .source-grid,
  .verify-grid,
  .vworld-capability-grid,
  .eiass-landuse-grid,
  .solar-audit-kpi,
  .solar-audit-grid,
  .address-area-grid,
  .decision-journey,
  .staff-cards,
  .staff-profit-kpis,
  .staff-overview-grid,
  .staff-admin-grid,
  .staff-admin-scenarios,
  .b2b-executive-cards,
  .b2b-analytics-grid,
  .b2b-section-grid,
  .b2b-package-cards,
  .b2b-print-meta,
  .staff-scenario-cards,
  .staff-ux-grid,
  .result-quick-edit-grid,
  .result-edit-grid,
  .result-edit-staff {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: var(--space-lg);
  }

  .hero-controls {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.4rem;
  }

  .hero-topbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .hero-controls .page-switch {
    max-width: min(14rem, 38vw);
  }

  .hero-main {
    grid-template-columns: 1fr;
    display: grid;
  }

  .hero-brand {
    gap: 0.5rem;
  }

  .hero-brand-logo {
    height: 2.25rem;
  }

  .hero-brand-copy .eyebrow {
    display: none;
  }

  .page-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .role-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(20rem, 48vw);
    min-width: 10.5rem;
  }

  .customer-integration-list,
  .customer-integration-list--detail,
  .customer-integration-list--permit {
    grid-template-columns: 1fr;
  }

  .result-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .result-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .result-quick-edit {
    position: static;
  }

  .result-quick-edit-toggle {
    padding: var(--space-md);
  }

  .result-quick-edit-head,
  .result-quick-edit-toggle-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .result-quick-edit-summary {
    text-align: left;
  }

  .result-quick-edit-body {
    padding: 0 var(--space-md) var(--space-md);
  }

  .result-quick-edit-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .result-quick-edit-actions button {
    width: 100%;
  }

  .staff-admin-toggle {
    padding: var(--space-md);
  }

  .staff-admin-head,
  .staff-admin-toggle-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .staff-admin-progress {
    text-align: left;
  }

  .staff-admin-body {
    padding: 0 var(--space-md) var(--space-md);
  }

  .result--staff .staff-flow {
    padding-bottom: 9.2rem;
  }

  .staff-sticky-actions {
    left: 6px;
    right: 6px;
    transform: none;
    width: auto;
    bottom: 8px;
    padding: 8px;
    gap: 6px;
  }

  .staff-sticky-btn {
    min-height: 42px;
    font-size: 0.84rem;
    padding: 0.35rem 0.4rem;
  }

  .customer-pdf-block,
  .customer-share-block,
  .quote-request-block {
    padding: var(--space-lg);
  }

  .address-area-panel__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .apartment-energy-panel__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .apartment-energy-basis-grid {
    grid-template-columns: 1fr;
  }

  .apartment-energy-grid--evidence {
    grid-template-columns: 1fr;
  }

  .apartment-energy-live-grid {
    grid-template-columns: 1fr;
  }

  .apartment-energy-basis-row {
    grid-template-columns: 1fr;
    gap: 0.28rem;
  }

  .apartment-energy-chart-grid {
    grid-template-columns: 1fr;
  }

  .apartment-energy-savings-highlight {
    grid-template-columns: 1fr;
  }

  .customer-pdf-actions,
  .customer-share-actions {
    flex-direction: column;
  }

  .customer-pdf-actions .secondary,
  .customer-share-actions .secondary {
    width: 100%;
  }

  .cta-btn {
    min-width: 100%;
  }

  .customer-result-cta .cta-btn {
    min-width: 0;
  }

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

  .result-priority-list {
    grid-template-columns: 1fr;
  }

  .integration-evidence-dialog__meta,
  .integration-evidence-dialog__role-grid,
  .integration-evidence-dialog__analysis-grid {
    grid-template-columns: 1fr;
  }

  .integration-evidence-dialog__decision-flow {
    grid-template-columns: 1fr;
  }

  .input-stepper {
    padding: var(--space-sm);
  }

  .input-stepper-title {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .input-step-dot {
    padding-inline: 12px;
    white-space: normal;
  }

  .input-step-sep {
    color: #9aa9c3;
  }

  .input-step-controls-buttons {
    gap: 10px;
  }

  .input-step-controls-buttons .secondary {
    width: 100%;
  }

  .address-api-actions:not(.address-api-actions--collapsed):not([hidden]) {
    display: grid;
    grid-template-columns: 1fr;
  }

  .address-search-shell {
    padding: 0.55rem 0.7rem 0.65rem;
  }

  #addressInput {
    min-height: 2.85rem;
    font-size: 0.98rem;
  }

  .address-search-shell .address-api-actions > button {
    width: 100%;
    min-height: 2.25rem;
  }

  .address-search-item {
    flex-direction: column;
    align-items: stretch;
  }

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

  .kepco-capacity-detail-grid {
    grid-template-columns: 1fr;
  }

  .address-search-apply {
    width: 100%;
  }

  .eum-viewer-panel-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .finance-measure-panel {
    padding: var(--space-md);
  }

  .finance-measure-map-frame {
    min-height: 260px;
  }

  .finance-measure-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .finance-measure-actions .secondary.small {
    width: 100%;
  }

  .viewer-action-link {
    width: 100%;
    min-height: 42px;
  }

  .eum-act-content {
    max-height: 22rem;
  }

  .input-eum-act-preview .eum-act-content {
    max-height: 12rem;
  }

  #eumLanduseViewBtnResult {
    width: 100%;
  }

  .b2b-report-head {
    flex-direction: column;
  }

  .staff-flow-layout {
    grid-template-columns: minmax(2.8rem, auto) minmax(0, 1fr);
    column-gap: 8px;
  }

  body[data-role="staff"] .staff-flow-layout {
    grid-template-columns: minmax(min(15rem, 40vw), auto) minmax(0, 1fr);
  }

  .staff-flow-sidebar {
    position: sticky;
    top: 8px;
    width: 2.8rem;
  }

  body[data-role="staff"] .staff-flow-sidebar {
    width: min(15rem, 40vw);
  }

  .staff-flow.staff-overview-drawer-open .staff-flow-sidebar {
    width: min(22rem, 44vw);
  }

  .staff-flow-page {
    min-height: auto;
    padding: var(--space-md);
  }

  .staff-flow:not(.staff-overview-drawer-open) .staff-admin-control-hub {
    display: none;
  }

  .staff-overview-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .staff-overview-step--compact {
    padding: 0.4rem 0.28rem 0.45rem;
  }

  .staff-widget,
  .glance-card,
  .card,
  .source-card,
  .b2b-exec-card,
  .b2b-section-card,
  .b2b-analytic-card {
    min-height: auto;
  }

  .profit-trend-svg,
  .b2b-sensitivity-svg {
    min-height: 0;
  }

  .b2b-analytic-card,
  .b2b-analytic-card--wide {
    grid-column: 1 / -1;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  body * {
    visibility: hidden !important;
  }

  #b2bReportHub,
  #b2bReportHub * {
    visibility: visible !important;
  }

  #b2bReportHub {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 0 !important;
  }

  #b2bReportHub .b2b-head-actions,
  #b2bReportHub .b2b-cta-bar,
  #b2bReportHub #b2bSummaryCopyMsg,
  #staffStickyActions {
    display: none !important;
  }

  #b2bReportHub .b2b-report-head {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 10mm;
  }

  #b2bReportHub .b2b-executive-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #b2bReportHub .b2b-analytics-grid {
    grid-template-columns: 1fr;
    gap: 4mm;
  }

  #b2bReportHub .b2b-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4mm;
  }

  #b2bReportHub .b2b-package-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3mm;
  }

  #b2bReportHub .b2b-print-break {
    display: block;
    break-before: page;
    page-break-before: always;
    height: 0;
    margin: 0;
    border: 0;
  }

  #b2bReportHub .b2b-exec-card,
  #b2bReportHub .b2b-section-card,
  #b2bReportHub .b2b-analytic-card,
  #b2bReportHub .b2b-pack-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

@media (max-width: 560px) {
  .support-hero {
    grid-template-columns: 1fr;
  }

  .support-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .support-section-summary {
    text-align: left;
  }

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

  .customer-glance {
    grid-template-columns: 1fr;
  }

  .investment-phase-strip {
    grid-template-columns: 1fr;
  }

  .investment-phase-arrow {
    display: none;
  }

  .result--staff .staff-flow {
    padding-bottom: 10.2rem;
  }

  .staff-sticky-actions {
    gap: 4px;
    padding: 6px;
  }

  .staff-sticky-btn {
    min-height: 38px;
    font-size: 0.76rem;
    letter-spacing: 0;
  }
}

/* 접근성: 동작 줄이기 (Part D.4) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   건축물 구조 분석 패널 (BSA — Building Structure Analysis)
   ════════════════════════════════════════════════════════════════ */

/* 빈 상태 */
.bsa-empty {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  padding: 0.5rem 0;
}

/* 판정 배너 */
.bsa-verdict {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-subtle);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.bsa-verdict--ok          { border-color: color-mix(in srgb, var(--ok) 40%, var(--border));      background: var(--ok-soft); }
.bsa-verdict--conditional { border-color: color-mix(in srgb, var(--warn) 40%, var(--border));    background: var(--warn-soft); }
.bsa-verdict--difficult   { border-color: color-mix(in srgb, var(--danger) 40%, var(--border));  background: var(--danger-soft); }
.bsa-verdict--unknown     { border-color: var(--border); background: var(--bg-subtle); }

.bsa-verdict-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 800;
  flex-shrink: 0;
  background: rgba(255,255,255,0.6);
}

.bsa-verdict--ok .bsa-verdict-icon          { color: var(--ok); }
.bsa-verdict--conditional .bsa-verdict-icon { color: var(--warn); }
.bsa-verdict--difficult .bsa-verdict-icon   { color: var(--danger); }

.bsa-verdict-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.bsa-verdict-label {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--ink);
  display: block;
}

.bsa-verdict-reason {
  font-size: 0.8rem;
  color: var(--ink-secondary);
}

/* 점수 바 */
.bsa-score-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.bsa-score-bar-wrap {
  width: 80px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.1);
  overflow: hidden;
}

.bsa-score-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width 0.4s ease;
}

.bsa-verdict--ok .bsa-score-bar-fill          { background: var(--ok); }
.bsa-verdict--conditional .bsa-score-bar-fill { background: var(--warn); }
.bsa-verdict--difficult .bsa-score-bar-fill   { background: var(--danger); }

.bsa-score-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* CAD 파일 뱃지 */
.bsa-dxf-badge {
  font-size: 0.75rem;
  color: var(--data-indigo);
  font-weight: 700;
  align-self: center;
}

/* 세부 정보 카드 그리드 */
.bsa-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
}

.bsa-detail-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: 0.65rem 0.75rem;
  display: grid;
  gap: 0.2rem;
}

.bsa-detail-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bsa-detail-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
}

.bsa-detail-note {
  font-size: 0.75rem;
  color: var(--ink-secondary);
  line-height: 1.4;
}

/* 조건 목록 */
.bsa-conditions {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.bsa-condition {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid currentColor;
  line-height: 1.4;
}

.bsa-condition--info   { color: var(--data-cyan);    background: rgba(2,132,199,0.07);  border-color: var(--data-cyan); }
.bsa-condition--warn   { color: #92400e;              background: var(--warn-soft);      border-color: var(--warn); }
.bsa-condition--danger { color: #991b1b;              background: var(--danger-soft);    border-color: var(--danger); }

/* 참고 목록 */
.bsa-notes {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.bsa-notes li {
  font-size: 0.8rem;
  color: var(--ink-secondary);
  padding-left: 1rem;
  position: relative;
  line-height: 1.45;
}

.bsa-notes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ok);
  font-size: 0.7rem;
  top: 0.1rem;
}

/* 액션 버튼 영역 */
.bsa-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

/* DXF 업로드 레이블 버튼 */
.bsa-dxf-upload {
  display: inline-block;
  cursor: pointer;
  margin: 0;
}

.bsa-dxf-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bsa-dxf-upload:hover .bsa-dxf-upload-btn {
  background: var(--bg-subtle);
  border-color: var(--data-indigo);
  color: var(--data-indigo);
}

/* DXF 결과 요약 */
.bsa-dxf-summary {
  font-size: 0.8rem;
  color: var(--data-indigo);
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  background: rgba(79,70,229,0.07);
  border: 1px solid rgba(79,70,229,0.18);
  margin-bottom: var(--space-sm);
}

/* 범례 */
.bsa-legend {
  margin-top: var(--space-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bsa-legend > summary {
  padding: 0.5rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.bsa-legend > summary::-webkit-details-marker { display: none; }

.bsa-legend-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.75rem;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--border-light);
  background: var(--bg-subtle);
  font-size: 0.78rem;
}

.bsa-legend-dl dt {
  font-weight: 700;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.bsa-legend-dl dd {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 600px) {
  .bsa-details {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   실행 진행 오버레이 (Run Progress Overlay)
   ═══════════════════════════════════════════════════════════════════════════ */

#run-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#run-progress-overlay.run-progress-overlay--active {
  opacity: 1;
  pointer-events: all;
}

#run-progress-overlay.run-progress-overlay--suppressed {
  opacity: 0 !important;
  pointer-events: none !important;
}

.run-progress-modal {
  background: var(--surface, #fff);
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.1);
  padding: 2rem 2.25rem 1.75rem;
  width: min(90vw, 400px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.run-progress-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.run-progress-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-primary, #1e293b);
  flex: 1;
  transition: color 0.15s;
}

.run-progress-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--brand-soft, #dbeafe);
  border-top-color: var(--accent, #2563eb);
  border-radius: 50%;
  animation: run-spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes run-spin {
  to { transform: rotate(360deg); }
}

.run-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.run-progress-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-md, 8px);
  transition: background 0.15s;
}

.run-progress-item[data-status="active"] {
  background: var(--brand-soft, #dbeafe);
}

.run-progress-item[data-status="done"] {
  opacity: 0.65;
}

.run-progress-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent, #2563eb);
  flex-shrink: 0;
}

.run-progress-item[data-status="done"] .run-progress-icon {
  color: #16a34a;
}

.run-progress-item[data-status="error"] .run-progress-icon {
  color: #b45309;
}

.run-progress-item[data-status="error"] .run-progress-label {
  color: #92400e;
}

.run-progress-item[data-status="pending"] .run-progress-icon {
  border: 1.5px solid var(--border-soft, #e2e8f0);
  border-radius: 50%;
  background: var(--surface-raised, #f8fafc);
}

.run-progress-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-secondary, #475569);
  line-height: 1.4;
}

.run-progress-item[data-status="active"] .run-progress-label {
  color: var(--accent, #2563eb);
  font-weight: 600;
}

#busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

#busy-overlay.busy-overlay--active {
  opacity: 1;
  pointer-events: all;
}

.busy-overlay-modal {
  background: var(--surface, #fff);
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 1.75rem 2rem;
  width: min(90vw, 320px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
}

.busy-overlay-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-primary, #1e293b);
}

.busy-overlay-message {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-secondary, #475569);
}

/* ── PVGIS 상태 배지 ─────────────────────────────────────────────────────── */
[data-pvgis-status] {
  font-size: 0.775rem;
  line-height: 1.5;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-md, 8px);
  background: var(--surface-raised, #f8fafc);
  color: var(--ink-secondary, #475569);
  border: 1px solid var(--border-soft, #e2e8f0);
  display: block;
}

[data-pvgis-status="ok"] {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

[data-pvgis-status="loading"] {
  background: var(--brand-soft, #dbeafe);
  color: var(--accent, #2563eb);
  border-color: #bfdbfe;
}

[data-pvgis-status="error"] {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

/* ── 실데이터 배지 (result cards) ────────────────────────────────────────── */
.data-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  line-height: 1.4;
}

.data-badge--real {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.data-badge--estimated {
  background: #fefce8;
  color: #a16207;
  border: 1px solid #fde68a;
}

.data-badge--pvgis {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}


/* ═══════════════════════════════════════════════════════════════════════════
   역할 기반 UX 분리 (Role-based UX — Customer vs Staff)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 역할 선택 버튼 (클릭 시 팝업) ─────────────────────────────────────── */
.role-open-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
  align-self: center;
  min-width: 0;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  border-radius: var(--radius-xl, 14px);
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.95);
  color: var(--accent, #2563eb);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.15s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.role-open-btn:hover {
  background: #fff;
  border-color: rgba(255,255,255,0.65);
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}

.role-open-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.85);
  outline-offset: 2px;
}

.role-open-btn__icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.role-open-btn__text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.2;
  min-width: 0;
}

.role-open-btn__kicker {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(37, 99, 235, 0.65);
}

.role-open-btn__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink, #0f172a);
}

.role-open-btn__desc {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--muted, #64748b);
}

.role-open-btn__chevron {
  flex-shrink: 0;
  margin-left: 0.15rem;
  font-size: 0.75rem;
  line-height: 1;
  color: rgba(37, 99, 235, 0.55);
}

/* ── 고객 전용 CTA 배너 ──────────────────────────────────────────────────── */
.customer-cta-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1.5px solid #bfdbfe;
  border-radius: var(--radius-xl, 14px);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.customer-cta-banner__icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.customer-cta-banner__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-primary, #1e293b);
  margin: 0 0 0.3rem;
}

.customer-cta-banner__desc {
  font-size: 0.8375rem;
  color: var(--ink-secondary, #475569);
  margin: 0;
  line-height: 1.5;
}

/* 고객 모드: CTA 배너 보임 / 직원 모드: 숨김 */
body[data-role="staff"] .customer-cta-banner { display: none !important; }
body[data-role="customer"] .customer-cta-banner { display: flex; }

/* 고객 입력 패널 — 단일 열 레이아웃 */
.input-panel-customer-layout {
  display: block;
}
body[data-role="customer"] .input-panel-customer-layout {
  display: block;
}

.input-panel-customer-main {
  min-width: 0;
}

/* ── 고객 전용: 설치 유형 (지붕·지상) ──────────────────────────────── */
.customer-install-type-picker {
  display: none; /* 직원 모드 기본 */
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0;
}
body[data-role="customer"] .customer-install-type-picker {
  display: flex;
  flex: 1 1 auto;
}
.customer-install-type-question {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink-primary, #1e293b);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.customer-install-type-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
body[data-role="customer"] .customer-install-type-btns {
  flex: 1 1 auto;
  min-height: clamp(7.5rem, 24vh, 12.5rem);
}
.customer-install-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  padding: 1.35rem 1rem 1.25rem;
  min-height: 10.5rem;
  height: 100%;
  border-radius: var(--radius-xl, 16px);
  border: 2px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.18s ease;
  text-align: center;
  color: var(--ink-secondary, #475569);
  width: 100%;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -8px rgba(15, 23, 42, 0.12);
  position: relative;
  overflow: hidden;
}
.customer-install-btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35), transparent);
  opacity: 0.65;
}
.customer-install-btn:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: linear-gradient(165deg, #f8fafc 0%, #eff6ff 55%, #e0f2fe 100%);
  color: var(--accent, #2563eb);
  transform: translateY(-3px);
  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.12),
    0 20px 40px -20px rgba(15, 23, 42, 0.18);
}
.customer-install-btn:hover::before {
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.55), transparent);
  opacity: 1;
}
.customer-install-btn--active {
  border-color: var(--accent, #2563eb);
  background: linear-gradient(165deg, #eff6ff 0%, #dbeafe 40%, #e0f2fe 100%);
  color: var(--accent, #2563eb);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.2),
    0 0 0 4px rgba(37, 99, 235, 0.14),
    0 16px 36px -14px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}
.customer-install-btn--active::before {
  background: linear-gradient(90deg, #3b82f6, #2563eb, #1d4ed8);
  opacity: 1;
  height: 4px;
}
.customer-install-btn[data-customer-install="ROOF"] .customer-install-btn__icon {
  background: linear-gradient(155deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.06));
}
.customer-install-btn[data-customer-install="GROUND"] .customer-install-btn__icon {
  background: linear-gradient(155deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.07));
}
.customer-install-btn[data-customer-install="AGRIVOLTAIC"] .customer-install-btn__icon {
  background: linear-gradient(155deg, rgba(234, 179, 8, 0.28), rgba(180, 83, 9, 0.08));
}
.customer-install-btn__icon {
  font-size: 2.65rem;
  line-height: 1;
  flex-shrink: 0;
  width: 4.25rem;
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.customer-install-btn:hover .customer-install-btn__icon {
  transform: scale(1.06);
}
.customer-install-btn--active .customer-install-btn__icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 6px 16px rgba(37, 99, 235, 0.15);
}
.customer-install-btn__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  width: 100%;
}
.customer-install-btn__title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink, #0f172a);
}
.customer-install-btn:hover .customer-install-btn__title,
.customer-install-btn--active .customer-install-btn__title {
  color: var(--accent, #2563eb);
}
.customer-install-btn__desc {
  font-size: 0.8125rem;
  opacity: 0.82;
  line-height: 1.45;
  max-width: 12rem;
}
.customer-install-btn__ratio {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.1);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
}
.customer-install-btn--active .customer-install-btn__ratio {
  background: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
}
.customer-install-type-hint {
  font-size: 0.8125rem;
  color: var(--ink-secondary, #475569);
  margin: 0;
  min-height: 1.25em;
}
.customer-install-type-hint.hint--ok  { color: #059669; }
.customer-install-type-hint.hint--warn { color: #d97706; }
body[data-role="customer"] .customer-install-btn {
  min-height: 100%;
}
@media (max-width: 720px) {
  .customer-install-type-btns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  body[data-role="customer"] .customer-install-type-btns {
    min-height: clamp(6.5rem, 28vh, 11rem);
  }
  .customer-install-btn {
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.65rem 0.35rem 0.6rem;
    gap: 0.4rem;
  }
  body[data-role="customer"] .customer-install-btn {
    min-height: 100%;
    height: 100%;
  }
  .customer-install-btn__icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.45rem;
    border-radius: 0.75rem;
  }
  .customer-install-btn__body {
    align-items: center;
    gap: 0.15rem;
  }
  .customer-install-btn__title {
    font-size: 0.8125rem;
    line-height: 1.25;
  }
  .customer-install-btn__desc {
    display: none;
  }
  .customer-install-btn:hover {
    transform: none;
  }
  .customer-install-btn--active {
    transform: none;
  }
}

/* ── staff-only-element: 직원 모드에서만 표시 ──────────────────────────── */
body[data-role="customer"] .staff-only-element { display: none !important; }
/* ── customer-only-element: 고객 모드에서만 표시 ────────────────────────── */
body[data-role="staff"] .customer-only-element { display: none !important; }
/* 직원 모드: 입력 안내·견적 계산 CTA는 입력 탭에서만 */
body[data-role="staff"]:not(.view-input) .input-step-controls {
  display: none !important;
}
/* 고객 모드: 분석 CTA — 입력 화면에서만 (결과·포털 잔존 시에도 공간 차지 금지) */
body[data-role="customer"]:not(.view-input) .input-step-controls,
body[data-role="customer"] #inputView.hidden-view .input-step-controls {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* 직원 입력: 분석 CTA 하단 고정 */
body[data-role="staff"].view-input #inputView .input-panel-customer-main {
  padding-bottom: clamp(6.5rem, 14vh, 8.5rem);
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(0.45rem * var(--web-ui-scale) + env(safe-area-inset-bottom, 0px));
  width: min(calc(98vw - 1.5rem), calc(160rem - 1.5rem));
  z-index: 110;
  margin: 0;
  padding: 0.55rem 0.75rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(10px);
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar .input-hint {
  display: none;
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar .input-step-controls-buttons {
  display: none;
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar.input-step-controls--run-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar #inputFlowGuide {
  margin: 0;
  padding: 0.4rem 0.55rem;
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar .input-flow-status {
  font-size: 0.78rem;
  line-height: 1.4;
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar .input-flow-issues {
  max-height: 3.25rem;
  overflow-y: auto;
  margin-top: 0.25rem;
  font-size: 0.74rem;
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar #runBtn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 48px;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
}

/* 직원 입력: 그려서 넣기 위젯을 견적 계산 버튼 바로 위에 */
body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar #addressMapDrawControls {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md, 10px);
  background: rgba(248, 250, 252, 0.98);
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar #addressMapDrawControls .address-map-draw-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

@media (max-width: 560px) {
  body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar #addressMapDrawControls .address-map-draw-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar #addressMapDrawControls .address-map-draw-actions .primary.small,
body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar #addressMapDrawControls .address-map-draw-actions .secondary.small {
  width: 100%;
  min-height: 2.35rem;
  font-size: 0.76rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

body[data-role="staff"].view-input .input-step-controls.staff-input-run-bar.staff-input-run-bar--draw {
  max-height: min(70vh, 28rem);
  overflow-y: auto;
}

body[data-role="staff"].view-input #inputView .input-panel-customer-main.staff-input-main--draw-pad {
  padding-bottom: clamp(12rem, 28vh, 18rem);
}
/* 고객 모드일 때 직원 전용 섹션 숨기기 */
body[data-role="customer"] .input-advanced { display: none !important; }
body[data-role="customer"] #staffInputGroup { display: none !important; }
/* 고객 모드: 1단계에서는 분석 버튼 숨김 — 2단계에서 표시 */
/* 고객 모드: 입력 1페이지(주소·지도·설치 유형) 하단에 분석 버튼 표시 */
body[data-role="customer"] .input-step-controls--run-row {
  grid-template-columns: 1fr;
}
body[data-role="customer"] .input-step-controls--run-row #runBtn {
  grid-column: 1 / -1;
}

/* 고객: 그려서 넣기 위젯도 분석 버튼 바로 위 */
body[data-role="customer"] .input-step-controls.customer-input-run-bar #addressMapDrawControls {
  grid-column: 1 / -1;
  margin: 0;
}
/* 고객: 분석 버튼 — 입력 화면에서만 (body 포털·#inputView 모두) */
body[data-role="customer"].view-input .input-step-controls.customer-input-run-bar #runBtn:not(.customer-run-btn--hidden),
body[data-role="customer"] #inputView:not(.hidden-view) #runBtn:not(.customer-run-btn--hidden) {
  display: block !important;
  width: 100%;
  font-size: 1.0625rem;
  padding: 0.875rem 1.5rem;
  min-height: 56px;
  margin-top: 0;
  border-radius: var(--radius-xl, 14px);
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35);
}
body[data-role="customer"] #inputView.hidden-view #runBtn,
body[data-role="customer"] #runBtn.customer-run-btn--hidden {
  display: none !important;
}
/* 고객 모드: 한전ON·토지이음·조례 카드만 숨김 (그려서 넣기·필지 선택은 유지) */
/* 고객 모드: 고객 안내 표시 */
body[data-role="customer"] .customer-guide { display: block !important; }
/* 직원 모드: 고객 가이드 숨기기 */
body[data-role="staff"] .customer-guide { display: none !important; }

/* ── 고객 모드: 헤더 간소화 ──────────────────────────────────────────── */
/* 고객에게 불필요한 기업용 정보 숨김 */
body[data-role="customer"] .hero-workspace { display: none !important; }
body[data-role="customer"] .eyebrow { display: none !important; }
body[data-role="customer"] .hero-company-name { display: none !important; }
/* 고객 모드: 결과 상단 빠른 수정 위젯 숨김 (입력 화면에서만 수정) */
body[data-role="customer"] #resultQuickEditBar {
  display: none !important;
}
/* 고객 모드: 결과 상단 「결과 / 입력으로 이동」 헤더 숨김 */
body[data-role="customer"] #resultView .result-head {
  display: none !important;
}

/* 고객 모드: 결과 페이지 hero 강조 */
body[data-role="customer"] #resultView .result-head h2 {
  font-size: 1.5rem;
}

/* 고객 모드: "설치 희망자 우선 확인 순서" 위젯 제거 */
body[data-role="customer"] #resultPriorityPanel {
  display: none !important;
}

/* 고객 결과: 헤더를 기준으로 요약 위젯 좌우 정렬 통일 */
body[data-role="customer"] #resultTabSummary > .customer-result-summary-grid,
body[data-role="customer"] #resultTabSummary > .result-map-status-row,
body[data-role="customer"] #resultTabSummary > #customerGlance,
body[data-role="customer"] #resultTabSummary > #customerGuidedMessage,
body[data-role="customer"] #resultTabSummary > #customerReliability {
  max-width: min(100%, 68rem);
  margin-left: auto;
  margin-right: auto;
}

/* ── 고객 모드: 주소 입력창 강조 ──────────────────────────────────────── */
body[data-role="customer"] #addressInput {
  font-size: 1.02rem;
  min-height: 2.85rem;
  border-width: 2px;
  border-color: var(--accent, #2563eb);
  border-radius: var(--radius-lg, 10px);
}

body[data-role="customer"] #addressSearchShell,
body[data-role="customer"] #addressSearchShell.address-search-shell--above-map {
  margin-bottom: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

body[data-role="customer"] .address-map-area {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

body[data-role="customer"] .address-map-toolbar {
  margin-bottom: 0;
}

/* 고객 모드: 1단계 주소 지도 */
body[data-role="customer"] .input-step[data-input-step="1"] .address-map-frame {
  min-height: 14rem;
  aspect-ratio: 16 / 9;
}

/* 고객 모드에서는 한전/토지이음 관련 버튼 숨기기 */
body[data-role="customer"] #kepcoCapacityOpenBtnInput,
body[data-role="customer"] #eumLanduseViewBtnInput,
body[data-role="customer"] #eumLanduseOpenBtnInput,
body[data-role="customer"] #eumLanduseViewLinkInput {
  display: none !important;
}

/* ── 고객 모드: 이격거리 패널 간소화 ─────────────────────────────────── */
body[data-role="customer"] .distance-guide-panel { display: none !important; }

/* ── 직원 모드 헤더 배지 ──────────────────────────────────────────────── */
body[data-role="staff"] .input-panel > h2::after {
  content: " — 직원 전용";
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent, #2563eb);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 99px;
  padding: 0.15rem 0.6rem;
  margin-left: 0.75rem;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ── 직원 전용 섹션 강조 마커 ─────────────────────────────────────────── */
body[data-role="staff"] .input-group--advanced > .input-group-title::before {
  content: "⚙ ";
  font-size: 0.9em;
  opacity: 0.7;
}

/* ── 고객 결과 화면 강조 ──────────────────────────────────────────────── */
body[data-role="customer"] .result--customer .result-cards-grid {
  gap: 1rem;
}

body[data-role="customer"] .result--customer .card-item {
  border-radius: var(--radius-xl, 14px);
  padding: 1.5rem;
}

/* ── 모바일 대응 ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .role-open-btn {
    padding: 0.45rem 0.65rem 0.45rem 0.55rem;
    gap: 0.45rem;
  }
  .role-open-btn__desc {
    display: none;
  }
  .customer-cta-banner {
    padding: 1rem;
  }
}

/* ── 고객 모드: 하단 고정 분석 버튼 ─────────────────────────────────────── */
body[data-role="customer"] .customer-run-cta,
body[data-role="customer"] #inputFlowGuideCustomer {
  display: none !important;
}

body[data-role="customer"] #inputView:not(.hidden-view) .input-panel-customer-main {
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

body[data-role="customer"].view-input .input-step-controls.customer-input-run-bar,
body[data-role="customer"] #inputView:not(.hidden-view) .input-step-controls.customer-input-run-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(0.45rem * var(--web-ui-scale) + env(safe-area-inset-bottom, 0px));
  width: min(calc(98vw - 1.5rem), calc(160rem - 1.5rem));
  z-index: 1100;
  margin: 0 !important;
  border-top: none;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(10px);
  display: block;
}

body[data-role="customer"].view-input .input-step-controls.customer-input-run-bar #runBtn:not(.customer-run-btn--hidden),
body[data-role="customer"] #inputView:not(.hidden-view) .input-step-controls.customer-input-run-bar #runBtn:not(.customer-run-btn--hidden) {
  margin-top: 0;
  min-height: 52px;
}

/* 고객 모드 flow guide → 더 친근한 스타일 */
body[data-role="customer"] .input-flow-guide {
  border-radius: var(--radius-lg, 10px);
  padding: 0.75rem 1rem;
}

body[data-role="customer"] .input-flow-guide.ok {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

body[data-role="customer"] .input-flow-guide.ok .input-flow-status::before {
  content: "✅ ";
}

body[data-role="customer"] .input-flow-guide.warn .input-flow-status::before {
  content: "📍 ";
}


/* ═══════════════════════════════════════════════════════════════════════════
   설치 유형 카드 UI (Install Type Cards)
   ═══════════════════════════════════════════════════════════════════════════ */

.install-type-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.install-type-group__label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-secondary, #475569);
  letter-spacing: 0.01em;
}

.install-type-required {
  color: #ef4444;
  margin-left: 0.15rem;
}

.install-type-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

/* 4유형(예: 영농형 추가)일 때만 4열 */
.install-type-cards:has(.install-type-card:nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.install-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 9.25rem;
  padding: 1.15rem 0.85rem;
  border-radius: var(--radius-xl, 14px);
  border: 2px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.18s ease;
  text-align: center;
  color: var(--ink-secondary);
  width: 100%;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 20px -10px rgba(15, 23, 42, 0.1);
  position: relative;
  overflow: hidden;
}
.install-type-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35), transparent);
  opacity: 0.55;
}
.install-type-card:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: linear-gradient(165deg, #f8fafc 0%, #eff6ff 100%);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.1),
    0 18px 32px -16px rgba(15, 23, 42, 0.15);
}
.install-type-card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.5), transparent);
  opacity: 1;
}
.install-type-card--active {
  border-color: var(--accent);
  background: linear-gradient(165deg, #eff6ff 0%, #dbeafe 100%);
  color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.18),
    0 0 0 4px rgba(37, 99, 235, 0.12),
    0 14px 28px -12px rgba(37, 99, 235, 0.28);
  transform: translateY(-1px);
}
.install-type-card--active::before {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  opacity: 1;
  height: 4px;
}
.install-type-card__icon {
  font-size: 2.1rem;
  line-height: 1;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  margin-inline: auto;
  border-radius: 1rem;
  background: linear-gradient(155deg, rgba(59, 130, 246, 0.12), rgba(37, 99, 235, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.install-type-card[data-install-type="GROUND"] .install-type-card__icon {
  background: linear-gradient(155deg, rgba(34, 197, 94, 0.16), rgba(22, 163, 74, 0.06));
}
.install-type-card[data-install-type="AGRIVOLTAIC"] .install-type-card__icon {
  background: linear-gradient(155deg, rgba(234, 179, 8, 0.22), rgba(180, 83, 9, 0.07));
}
.install-type-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1.35;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 100%;
  text-align: center;
}
.install-type-card__name,
.install-type-card__desc {
  text-align: center;
}
.install-type-card__name {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink, #0f172a);
}
.install-type-card:hover .install-type-card__name,
.install-type-card--active .install-type-card__name {
  color: var(--accent);
}
.install-type-card__desc {
  font-size: 0.75rem;
  opacity: 0.82;
  max-width: 11rem;
}
.install-type-card__ratio {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.1);
  border-radius: 99px;
  padding: 0.22rem 0.5rem;
  margin-top: 0.15rem;
  display: inline-block;
}
.install-type-card--active .install-type-card__ratio {
  background: rgba(37, 99, 235, 0.18);
}

.install-type-guide {
  font-size: 0.775rem;
  color: var(--ink-secondary, #475569);
  padding: 0.5rem 0.75rem;
  background: #fefce8;
  border-left: 3px solid #eab308;
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  line-height: 1.5;
}

.install-type-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.usable-area-highlight {
  color: var(--accent, #2563eb);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   주소 지도 드로잉 (Address Map Draw)
   ═══════════════════════════════════════════════════════════════════════════ */

.address-map-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.address-map-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  margin-bottom: 0.5rem;
}

.address-map-toolbar .address-map-title {
  margin: 0;
  flex: 0 1 auto;
}

.address-map-toolbar > .map-preview-layer-toggle {
  flex: 0 0 auto;
}

.address-map-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.55rem 0 0;
  justify-content: stretch;
  min-width: 0;
}

.address-map-toolbar-actions .secondary.small {
  flex: 1 1 0;
  justify-content: center;
  min-width: min(100%, 8rem);
}

.result-map-parcel-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

.result-map-parcel-cta__hint {
  flex: 1 1 12rem;
}

.map-preview-layer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: var(--panel-soft, #f8fafc);
}

.map-preview-layer-btn {
  margin: 0;
  padding: 0.28rem 0.65rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.map-preview-layer-btn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
}

.map-preview-layer-btn--active {
  background: var(--panel, #fff);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.result-map-status-row {
  display: grid;
  /* 요약(히어로) 왼쪽 · 경제성 시각화 또는 지도 오른쪽 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
  gap: 0.9rem;
  align-items: stretch;
}

/* 고객 결과: KPI 히어로 + 경제성 시각화(모바일만 화면 노출) */
body[data-role="customer"] .customer-result-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  align-items: start;
}

body[data-role="customer"] .customer-result-summary-grid > .result-map-status-row {
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr);
}

body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz {
  grid-column: 1;
  grid-row: auto;
  margin-top: 0;
  margin-bottom: var(--space-md);
  min-height: 0;
}

/* 결과 요약 본문에서는 경제성 위젯 비표시 (KPI 팝업 임베드 시에만 표시) */
body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz:not(.monthly-profit-viz--in-dialog) {
  display: none !important;
}

body[data-role="customer"] .result-map-status-row {
  grid-template-columns: minmax(0, 70%) minmax(0, 30%);
}

.result-map-status-row__aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.result-map-status-row__aside .monthly-profit-viz {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.result-map-status-row__aside .result-map-area {
  flex: 1;
}

/* 직원 모드: 고객 히어로는 숨김 → 지도만 한 열로 */
body[data-role="staff"] .result-map-status-row {
  grid-template-columns: 1fr;
}

.result-map-area {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.result-map-status-row #customerResultHero {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.result-map-area .address-map-frame {
  min-height: 10.5rem;
  aspect-ratio: 16 / 7;
}

@media (max-width: 900px) {
  .result-map-status-row {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  body[data-role="customer"] .customer-result-summary-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  body[data-role="customer"] .customer-result-summary-grid > .result-map-status-row {
    grid-column: 1;
  }

  body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
    overflow: visible;
  }
}

/* 고객 모바일: 경제성 위젯을 히어로 아래 독립 섹션으로 */
@media (max-width: 720px) {
  body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz {
    padding: 1.1rem 1rem 1.15rem;
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
  }

  body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz .monthly-profit-viz-title {
    font-size: clamp(1.12rem, 4.2vw, 1.35rem);
    margin-bottom: 0.75rem;
  }

  body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz .monthly-profit-chips {
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
  }

  body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz .profit-chip {
    flex: 1 1 calc(33.333% - 0.35rem);
    min-width: 5.5rem;
    padding: 0.38rem 0.45rem;
    font-size: clamp(0.68rem, 2.8vw, 0.78rem);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz .install-cost-summary {
    font-size: 0.875rem;
    margin-bottom: 0.35rem;
  }

  body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz .investment-phase-strip {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz .investment-phase-arrow {
    display: none;
  }

  body[data-role="customer"] .customer-result-summary-grid > #monthlyProfitViz .customer-profit-breakdown-btn__hint {
    display: none;
  }
}

@media (min-width: 901px) {
  body[data-role="customer"] #resultTabSummary > .customer-result-summary-grid,
  body[data-role="customer"] #resultTabSummary > .result-map-status-row {
    max-width: none;
    width: 100%;
  }
}

.address-map-draw-toggle {
  font-size: 0.775rem !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 99px !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.address-map-parcel-pick-toggle {
  font-size: 0.775rem !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 99px !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.address-map-draw-toggle.active {
  background: var(--accent, #2563eb) !important;
  color: #fff !important;
  border-color: var(--accent, #2563eb) !important;
}

.address-map-parcel-pick-toggle.active {
  background: var(--accent, #2563eb) !important;
  color: #fff !important;
  border-color: var(--accent, #2563eb) !important;
}

.address-map-landuse-pick-toggle {
  font-size: 0.775rem !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 99px !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.address-map-landuse-pick-toggle.active {
  background: #0f766e !important;
  color: #fff !important;
  border-color: #0f766e !important;
}

.address-map-frame--landuse-pick {
  outline: 2px solid rgba(15, 118, 110, 0.45);
  outline-offset: -2px;
}

/* 용도지역 클릭 결과 — 눈에 띄는 카드 + 칩 */
.address-map-landuse-pick-shell {
  margin: 10px 2px 0;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15, 118, 110, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--border, #e2e8f0);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.95), rgba(255, 255, 255, 0.98));
}

.address-map-landuse-pick-shell--idle {
  border-style: dashed;
  background: rgba(248, 250, 252, 0.96);
  box-shadow: none;
}

.address-map-landuse-pick-shell--loading {
  border-color: rgba(14, 165, 233, 0.45);
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.98), rgba(255, 255, 255, 0.99));
}

.address-map-landuse-pick-shell--success {
  border-color: rgba(15, 118, 110, 0.55);
  background: linear-gradient(165deg, rgba(204, 251, 241, 0.55), rgba(255, 255, 255, 0.97));
  box-shadow: 0 8px 32px rgba(15, 118, 110, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
}

.address-map-landuse-pick-shell--error {
  border-color: rgba(220, 38, 38, 0.35);
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(255, 255, 255, 0.98));
}

.address-map-landuse-pick-shell--empty,
.address-map-landuse-pick-shell--ready {
  border-color: rgba(100, 116, 139, 0.35);
}

.address-map-landuse-pick-shell__inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
}

.address-map-landuse-pick-shell__inner--center {
  align-items: center;
}

.address-map-landuse-pick-shell__icon {
  flex-shrink: 0;
  font-size: 1.75rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.12));
}

.address-map-landuse-pick-shell__icon--warn {
  font-size: 1.5rem;
}

.address-map-landuse-pick-shell__text {
  flex: 1;
  min-width: 0;
}

.address-map-landuse-pick-shell__title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.address-map-landuse-pick-shell__desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #475569;
}

.address-map-landuse-pick-shell__desc.muted {
  color: var(--muted, #64748b);
}

.address-map-landuse-pick-shell__desc--error {
  font-weight: 600;
  color: #b91c1c;
}

.address-map-landuse-pick-shell__meta {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--muted, #64748b);
}

.address-map-landuse-pick-shell__eyebrow {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f766e;
}

.address-map-landuse-pick-shell__success {
  padding: 14px 16px 16px;
}

.address-map-landuse-pick-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.address-map-landuse-pick-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  font-weight: 800;
  line-height: 1.25;
  color: #042f2e;
  background: linear-gradient(180deg, #ccfbf1, #99f6e4);
  border: 2px solid rgba(13, 148, 136, 0.85);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 8px rgba(13, 148, 136, 0.2);
  max-width: 100%;
  word-break: keep-all;
  animation: address-map-landuse-chip-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.address-map-landuse-pick-chip:nth-child(1) {
  animation-delay: 0s;
}
.address-map-landuse-pick-chip:nth-child(2) {
  animation-delay: 0.05s;
}
.address-map-landuse-pick-chip:nth-child(3) {
  animation-delay: 0.1s;
}
.address-map-landuse-pick-chip:nth-child(n + 4) {
  animation-delay: 0.14s;
}

@keyframes address-map-landuse-chip-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.address-map-landuse-pick-shell__coord {
  margin: 10px 0 0;
  font-size: 0.76rem;
  color: #64748b;
}

.address-map-landuse-pick-shell__coord code {
  font-size: 0.74rem;
  font-weight: 600;
  color: #334155;
  background: rgba(241, 245, 249, 0.9);
  padding: 2px 6px;
  border-radius: 4px;
}

.address-map-landuse-pick-shell__spinner {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(14, 165, 233, 0.25);
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: address-map-landuse-spin 0.75s linear infinite;
}

@keyframes address-map-landuse-spin {
  to {
    transform: rotate(360deg);
  }
}

.address-map-parcel-pick-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.address-map-parcel-pick-svg:not(.hidden) {
  pointer-events: auto;
  cursor: crosshair;
  /* 모바일: 페이지 스크롤·패닝이 탭을 가로채지 않게 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.address-map-parcel-pick-svg.hidden {
  display: none;
}

/* WebKit: fill=transparent 은 터치 hit 제외되는 경우 있음 → 명시적 hit 레이어 */
.address-map-parcel-pick-svg .apick-hit {
  fill: rgba(0, 0, 0, 0);
  pointer-events: all;
}

.address-map-draw-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  z-index: 10;
  pointer-events: auto;
  /* 모바일: 페이지 스크롤이 탭을 가로채지 않게 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.address-map-draw-svg.hidden {
  display: none;
}

/* 빈 SVG 터치 통과 방지용 전체 hit 레이어 (필지선택 rect 와 동일 역할) */
.address-map-draw-svg .adraw-hit {
  fill: transparent;
  pointer-events: all;
}

/* 드로잉 SVG — 결과의 그린 설치면(초록)과 동일 톤 */
.adraw-poly-fill {
  fill: rgba(16, 185, 129, 0.28);
  stroke: none;
}

.adraw-poly-line {
  fill: none;
  stroke: #047857;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
}

.adraw-point {
  fill: #047857;
  stroke: #fff;
  stroke-width: 2;
}

.adraw-label {
  fill: #065f46;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans, system-ui, sans-serif);
  user-select: none;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}

/* 드로잉 컨트롤 패널 */
.address-map-draw-controls {
  background: var(--surface-raised, #f8fafc);
  border: 1.5px solid var(--accent, #2563eb);
  border-radius: var(--radius-lg, 10px);
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.address-map-draw-controls.hidden {
  display: none;
}

.address-map-draw-status-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.address-map-draw-mode-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent, #2563eb);
  border-radius: 99px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.address-map-draw-status {
  font-size: 0.8rem;
  color: var(--ink-secondary, #475569);
  line-height: 1.5;
  flex: 1;
}

.address-map-draw-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════════════════════
   고객 결과 히어로 카드  (#customerResultHero)
   customer mode only — staff mode는 staff-only-element #feasibility 사용
   ══════════════════════════════════════════════════════════════════════ */

.customer-result-hero {
  display: none; /* staff mode: hidden by default */
  position: relative;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(30, 58, 138, 0.08);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  letter-spacing: -0.01em;
}

body[data-role="customer"] .customer-result-hero {
  display: flex;
}

.customer-result-hero[data-status="idle"] {
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* 판정 상태별 테두리 색 (V1 솔라 옐로 액센트 힌트) */
.customer-result-hero[data-status="approved"]    { border-color: #16a34a; box-shadow: 0 2px 24px rgba(22, 163, 74, 0.14); }
.customer-result-hero[data-status="conditional"] { border-color: #d97706; box-shadow: 0 2px 24px rgba(217, 119, 6, 0.14); }
.customer-result-hero[data-status="rejected"]    { border-color: #dc2626; box-shadow: 0 2px 24px rgba(220, 38, 38, 0.14); }
.customer-result-hero[data-status="review"]      { border-color: #e2e8f0; }

.crh-legacy-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 그라데이션 히어로 (v1-customer.jsx) */
.crh-hero-gradient {
  position: relative;
  padding: 1.35rem 1.35rem 1.2rem;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
  color: #fff;
  overflow: hidden;
}

.customer-result-hero[data-status="idle"] .crh-hero-gradient {
  background: linear-gradient(135deg, #334155 0%, #475569 55%, #64748b 100%);
}

.crh-hero-sun {
  position: absolute;
  right: -3.5rem;
  top: -2.5rem;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, rgba(251, 191, 36, 0.12) 45%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.crh-hero-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.88;
  margin-bottom: 1rem;
}

.crh-brand-mark {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 8px;
  background: #fbbf24;
  color: #1e3a8a;
  font-weight: 800;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.crh-hero-glance {
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  margin: 0 -0.35rem;
  padding: 0.35rem 0.35rem 0.15rem;
  transition: background 0.15s ease;
}

.crh-hero-glance:hover {
  background: rgba(255, 255, 255, 0.06);
}

.crh-eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

.crh-headline {
  margin: 0 0 0.65rem;
  font-size: clamp(1.25rem, 2.8vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.crh-headline--html .crh-headline-accent {
  color: #fbbf24;
}

.crh-address-line {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.crh-status-pill {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  max-width: 100%;
}

.crh-status-pill-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  margin-top: 0.32em;
  flex-shrink: 0;
}

.crh-status-pill[data-tone="ok"] {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #a7f3d0;
}
.crh-status-pill[data-tone="ok"] .crh-status-pill-dot {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

.crh-status-pill[data-tone="warn"] {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fef3c7;
}
.crh-status-pill[data-tone="warn"] .crh-status-pill-dot {
  background: #fbbf24;
}

.crh-status-pill[data-tone="bad"] {
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fecaca;
}
.crh-status-pill[data-tone="bad"] .crh-status-pill-dot {
  background: #f87171;
}

.crh-status-pill[data-tone="mute"] {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.88);
}
.crh-status-pill[data-tone="mute"] .crh-status-pill-dot {
  background: #e2e8f0;
}

.crh-kpi-deck {
  padding: 1rem 1rem 1.2rem;
  background: #f0f4f9;
}

/* 상단 판정 행 (레거시 / 직원 화면 호환) */
.crh-status-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.crh-hero-glance[data-glance-card],
.crh-status-row[data-glance-card],
.crh-number-card[data-glance-card] {
  cursor: pointer;
}

.crh-hero-glance[data-glance-card]:focus-visible,
.crh-status-row[data-glance-card]:focus-visible,
.crh-number-card[data-glance-card]:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
  border-radius: var(--radius-sm, 0.5rem);
}

.crh-status-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.crh-status-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.crh-status-label-sm {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-secondary, #64748b);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.crh-status-label {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  color: var(--ink-primary, #0f172a);
  letter-spacing: -0.03em;
}

.crh-status-label--ok   { color: #16a34a; }
.crh-status-label--warn { color: #d97706; }
.crh-status-label--bad  { color: #dc2626; }
.crh-status-label--mute { color: var(--ink-secondary, #64748b); }

/* 숫자 행 */
.crh-numbers-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: color-mix(in srgb, var(--accent-soft, #eff6ff) 60%, var(--panel, #fff));
  border-radius: var(--radius-md, 0.625rem);
  overflow: hidden;
}

.crh-number-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 1rem 0.75rem 0.875rem;
  text-align: center;
  transition: background 0.14s ease;
}

.crh-number-card[data-glance-card]:hover {
  background: rgba(255, 255, 255, 0.55);
}

.crh-divider {
  width: 1px;
  background: var(--border, #e2e8f0);
  margin: 0.75rem 0;
  flex-shrink: 0;
}

.crh-number-label {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--ink-secondary, #64748b);
  letter-spacing: 0.03em;
  margin: 0;
}

.crh-number-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink-primary, #0f172a);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
}

.crh-number-value--ok   { color: #16a34a; }
.crh-number-value--warn { color: #d97706; }
.crh-number-value--bad  { color: #dc2626; }

/* KPI 카드 레이아웃: 용량 + 설치비 + 월수익 + 회수기간 */
.crh-numbers-row--three .crh-number-card,
.crh-numbers-row--four .crh-number-card { flex: 1 1 0; min-width: 0; }
.crh-numbers-row--three .crh-number-card--cost,
.crh-numbers-row--four .crh-number-card--cost { border-top: 3px solid #f59e0b; }
.crh-numbers-row--three .crh-number-card--profit,
.crh-numbers-row--four .crh-number-card--profit { border-top: 3px solid #22c55e; }
.crh-numbers-row--three .crh-number-card--payback,
.crh-numbers-row--four .crh-number-card--payback { border-top: 3px solid #3b82f6; }
.crh-numbers-row--four .crh-number-card--capacity { border-top: 3px solid #6366f1; }

/* V1 스타일: KPI를 개별 화이트 카드로 */
.crh-kpi-deck .crh-numbers-row--three,
.crh-kpi-deck .crh-numbers-row--four {
  display: grid;
  gap: 0.65rem;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.crh-kpi-deck .crh-numbers-row--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crh-kpi-deck .crh-numbers-row--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crh-kpi-deck .crh-divider {
  display: none;
}

.crh-kpi-deck .crh-number-card {
  align-items: flex-start;
  text-align: left;
  padding: 1.05rem 0.9rem 0.95rem;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.crh-kpi-deck .crh-number-card[data-glance-card]:hover {
  border-color: #bfdbfe;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.1);
}

.crh-kpi-deck .crh-number-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink-secondary, #475569);
  letter-spacing: 0.01em;
}

.crh-kpi-deck .crh-number-value {
  font-size: clamp(1.55rem, 2.4vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.crh-kpi-deck .crh-number-sub {
  font-size: 0.78rem;
  color: var(--ink-muted, #94a3b8);
}

.crh-kpi-deck .crh-number-card--profit .crh-number-value {
  color: #059669;
}

.crh-kpi-deck .crh-number-card--payback .crh-number-value {
  color: #d97706;
}

.crh-kpi-deck .crh-number-card--cost .crh-number-value {
  color: #b45309;
}

.customer-result-hero > .customer-longterm-cluster:not(.hidden),
.customer-result-hero > .customer-longterm-chart:not(.hidden),
.customer-result-hero > .crh-next-steps:not(.hidden) {
  margin: 0 1rem 1rem;
}

.customer-result-hero > .customer-longterm-cluster > .customer-longterm-chart,
.customer-result-hero > .customer-longterm-chart {
  padding: 0.75rem 0.85rem 0.85rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.customer-context-layout-map-block {
  padding: 0.75rem 0.85rem 0.85rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  min-width: 0;
}

.customer-scale-plan-block {
  padding: 0.75rem 0.85rem 0.85rem;
  margin-bottom: 0.65rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  min-width: 0;
}

.customer-scale-plan-block__title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-secondary, #475569);
  letter-spacing: 0.02em;
}

.customer-scale-plan__svg-wrap {
  display: block;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-sm, 6px);
  background: #f8fafc;
  cursor: zoom-in;
  overflow: visible;
}

.customer-scale-plan-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 120px;
  max-height: min(420px, 52vh);
}

.customer-scale-plan-summary {
  margin: 0.45rem 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--ink-secondary, #475569);
}

.customer-scale-plan-note {
  margin: 0.35rem 0 0;
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--muted);
}

.customer-longterm-chart-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.65rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.customer-longterm-chart-toggle.hidden {
  display: none !important;
}

.customer-longterm-chart-toggle:hover {
  border-color: var(--accent, #2563eb);
  background: #f8fbff;
}

.customer-longterm-chart-toggle:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

.customer-longterm-chart-toggle__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.customer-longterm-chart-toggle__title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-primary);
}

.customer-longterm-chart-toggle__hint {
  font-size: 0.74rem;
  color: var(--ink-tertiary);
  line-height: 1.35;
}

.customer-longterm-chart-toggle__action {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #2563eb);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
}

.customer-context-layout-map-block__title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-secondary, #475569);
  letter-spacing: 0.02em;
}

.customer-context-layout-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.45rem;
}

.customer-context-map__inner--interactive {
  cursor: grab;
  touch-action: none;
}

.customer-layout-map-zoom-modal__box {
  width: min(96vw, 920px);
  max-height: min(92vh, 900px);
}

.customer-layout-map-zoom-modal__map {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: #0b1220;
}

.customer-layout-map-zoom-modal__inner {
  aspect-ratio: 1;
  max-height: min(68vh, 720px);
  width: 100%;
}

.customer-layout-map-zoom-modal__hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: auto;
}

.customer-context-layout-map-block .staff-page5-layout-zoom-label {
  display: none;
}

.customer-longterm-cluster .customer-context-map__frame {
  display: flex;
  flex-direction: column;
}

.customer-context-map__frame {
  aspect-ratio: auto;
  max-height: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #0b1220;
}

.customer-context-map__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 160px;
  max-height: min(360px, 48vh);
  overflow: hidden;
}

.customer-longterm-cluster .customer-context-map__inner {
  aspect-ratio: 1;
  min-height: clamp(240px, 42vw, 340px);
  max-height: min(520px, 62vh);
}

.customer-longterm-cluster .staff-layout-note {
  margin: 0.45rem 0 0;
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--muted);
}

.customer-longterm-cluster .staff-layout-legend {
  margin-top: 0.45rem;
  font-size: 0.65rem;
}

.customer-result-hero > .customer-longterm-cluster > .customer-longterm-chart .customer-longterm-chart__title,
.customer-result-hero > .customer-longterm-chart .customer-longterm-chart__title {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink-secondary, #475569);
  letter-spacing: 0.02em;
}

/* 20년 누적 손익 — 차트 축·범례 (고객 히어로: 시나리오 금액 강조) */
#staffLongtermChart .apartment-energy-line-axis,
#customerLongtermChart .apartment-energy-line-axis {
  font-size: 8px;
}

#staffLongtermChart .apartment-energy-line-value,
#customerLongtermChart .apartment-energy-line-value {
  font-size: 8.5px;
}

#staffLongtermChart .apartment-energy-line-label,
#customerLongtermChart .apartment-energy-line-label {
  font-size: 8px;
}

#staffLongtermChart .apartment-energy-line-legend,
#customerLongtermChart .apartment-energy-line-legend {
  gap: 0.45rem;
  margin-top: 0.55rem;
}

#staffLongtermChart .apartment-energy-line-legend-item {
  gap: 0.4rem;
  font-size: 0.74rem;
}

#staffLongtermChart .apartment-energy-line-legend-item strong {
  font-size: 0.8rem;
  font-weight: 700;
}

#customerLongtermChart .apartment-energy-line-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
}

#customerLongtermChart .apartment-energy-line-legend-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 0.15rem 0.45rem;
  padding: 0.5rem 0.55rem;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.95);
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--ink-secondary);
}

#customerLongtermChart .apartment-energy-line-legend-swatch {
  grid-row: 1 / span 2;
  align-self: center;
  width: 0.72rem;
  height: 0.72rem;
  margin-top: 0.1rem;
}

#customerLongtermChart .apartment-energy-line-legend-label {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-secondary);
  line-height: 1.2;
}

#customerLongtermChart .apartment-energy-line-legend-item strong {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0.1rem;
  font-size: clamp(0.92rem, 2.2vw, 1.05rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

@media (max-width: 520px) {
  #customerLongtermChart .apartment-energy-line-legend {
    grid-template-columns: 1fr;
  }
}

.staff-profit-panel:has(#staffLongtermChart) h5 {
  font-size: 0.82rem;
}

.staff-profit-panel:has(#staffLongtermChart) .staff-profit-panel-meta {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
}

.customer-result-hero > .customer-longterm-cluster > .customer-longterm-chart .apartment-energy-line-chart svg,
.customer-result-hero > .customer-longterm-chart .apartment-energy-line-chart svg {
  min-height: 155px;
}

#customerLongtermChart .apartment-energy-line-chart {
  aspect-ratio: 340 / 190;
}

@media (max-width: 900px) {
  .crh-kpi-deck .crh-numbers-row--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .crh-kpi-deck .crh-numbers-row--three,
  .crh-kpi-deck .crh-numbers-row--four {
    grid-template-columns: 1fr;
  }
}

.crh-number-sub {
  font-size: 0.67rem;
  color: var(--ink-muted, #94a3b8);
  margin: 0;
}

/* 판정 이유 한 줄 */
.crh-reason-row {
  padding: 0.6rem 0.875rem;
  background: color-mix(in srgb, var(--panel, #fff) 80%, var(--accent-soft, #eff6ff));
  border-radius: var(--radius-sm, 0.375rem);
  border-left: 3px solid var(--accent, #2563eb);
}

.crh-reason-text {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ink-primary, #0f172a);
  margin: 0;
}

/* 다음 단계 */
.crh-next-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.crh-next-steps-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-primary, #0f172a);
  margin: 0;
}

.crh-next-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.crh-next-step-item {
  font-size: 0.82rem;
  color: var(--ink-secondary, #475569);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}

.crh-next-step-item::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent, #2563eb);
  font-weight: 700;
}

/* 보조금 배지 */
.crh-subsidy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.crh-subsidy-badge {
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 99px;
  white-space: nowrap;
}

.crh-subsidy-badge--ok   { background: #dcfce7; color: #166534; }
.crh-subsidy-badge--cond { background: #fef9c3; color: #854d0e; }
.crh-subsidy-badge--more { background: var(--accent-soft, #eff6ff); color: var(--accent, #2563eb); }

/* 직원 판정 히어로는 customer mode에서 숨김 */
body[data-role="customer"] .staff-only-element.feasibility-hero,
body[data-role="customer"] #feasibility.staff-only-element {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   필지 면적 평 ↔ m² 변환 그룹
   ══════════════════════════════════════════════════════════════════════ */

.parcel-area-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.parcel-area-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-primary, #0f172a);
  margin: 0;
}

.parcel-area-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.parcel-area-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  background: var(--panel, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 0.375rem);
  padding: 0.3rem 0.6rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.parcel-area-field:focus-within {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}

.parcel-area-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-primary, #0f172a);
  padding: 0.2rem 0;
  outline: none;
  -moz-appearance: textfield;
}

.parcel-area-field input::-webkit-outer-spin-button,
.parcel-area-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.parcel-area-unit {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-secondary, #64748b);
  flex-shrink: 0;
}

.parcel-area-sep {
  font-size: 1rem;
  color: var(--ink-muted, #94a3b8);
  flex-shrink: 0;
  font-weight: 500;
}

.parcel-area-hint {
  font-size: 0.72rem;
  color: var(--ink-muted, #94a3b8);
  margin: 0;
}

.parcel-area-map-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.parcel-area-map-measured {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: var(--radius-md, 8px);
  padding: 0.2rem 0.55rem;
}

.parcel-area-map-measured__label {
  font-size: 0.72rem;
  color: var(--ink-secondary, #475569);
}

.parcel-area-map-measured__value {
  font-weight: 700;
  color: #16a34a;
}

/* ══════════════════════════════════════════════════════════════════════
   5단계 일조 이격거리 계산기
   ══════════════════════════════════════════════════════════════════════ */
.staff-page5-shadow-calc-row { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed var(--border, #e2e8f0); }

/* 평면도 SVG 내부 도면 기호 */
.spm-dim-lines line, .spm-dim-lines text { pointer-events: none; }
.spm-bldg-dim-lines line, .spm-bldg-dim-lines text { pointer-events: none; }
.spm-area-ann text { pointer-events: none; user-select: none; }
.spm-setback-dim line, .spm-setback-dim text { pointer-events: none; }
.spm-legend { pointer-events: none; }

/* 평면도 SVG 외부 도면 기호 위젯 (범례 + 표제란) */
.staff-page5-plan-symbols { margin-top: 0; }
.staff-page5-plan-symbols.hidden { display: none; }

.spm-sym-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 34%);
  gap: 12px 16px;
  padding: 10px 12px;
  background: #f8fafc;
  border: none;
  border-radius: 0;
  font-size: 0.78rem;
}

@media (max-width: 720px) {
  .spm-sym-inner {
    grid-template-columns: 1fr;
  }
}

.spm-sym-section { display: flex; flex-direction: column; gap: 4px; }

.spm-sym-heading {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 범례 목록 */
.spm-sym-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.spm-sym-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.spm-sym-legend-label {
  font-size: 0.76rem;
  color: #334155;
  font-weight: 500;
}

/* 표제란 테이블 */
.spm-sym-table {
  border-collapse: collapse;
  font-size: 0.76rem;
  min-width: 220px;
}
.spm-sym-th {
  padding: 3px 10px 3px 4px;
  font-weight: 600;
  color: #475569;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e2e8f0;
}
.spm-sym-td {
  padding: 3px 4px;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
}

/* ROOF 모드 건물별 설치 선택 UI */
.staff-page5-roof-bldg-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.staff-page5-roof-bldg-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.staff-page5-roof-bldg-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  cursor: pointer;
}
.staff-page5-roof-bldg-item.is-selected {
  color: #0f172a;
}
.staff-page5-roof-bldg-item.is-unselected {
  color: #64748b;
}
.staff-page5-roof-bldg-state {
  margin-left: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
}
.staff-page5-roof-bldg-item.is-unselected .staff-page5-roof-bldg-state {
  color: #64748b;
}
.staff-page5-roof-bldg-picked {
  font-size: 0.74rem;
  color: #1d4ed8;
  font-weight: 600;
}
.staff-page5-roof-bldg-item input[type="checkbox"] {
  margin: 0;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  cursor: pointer;
}
.staff-page5-roof-bldg-area {
  margin-left: auto;
  color: var(--text-muted, #64748b);
  font-size: 0.75rem;
}

.staff-page5-orientation-analysis {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-sm, 6px);
  background: rgba(245, 158, 11, 0.05);
}
.staff-page5-orientation-body {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--text, #0f172a);
}
.staff-page5-orientation-tips {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
  list-style: disc;
}
.staff-page5-orientation-tips li {
  margin: 0.2rem 0;
  line-height: 1.5;
}
.staff-page5-orientation-tips li strong {
  color: var(--accent, #2563eb);
  font-weight: 600;
}
.staff-page5-orientation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin: 0.3rem 0;
}
.staff-page5-orientation-table th,
.staff-page5-orientation-table td {
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border, #e2e8f0);
  text-align: left;
}
.staff-page5-orientation-table thead th {
  background: rgba(245, 158, 11, 0.1);
  font-weight: 600;
}
.staff-page5-orientation-table tr.is-on-parcel td {
  background: rgba(234, 88, 12, 0.08);
}
.staff-page5-onparcel-tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.02rem 0.35rem;
  border-radius: 999px;
  background: #ea580c;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  vertical-align: middle;
}

/* 시각화: 나침반 + 회전각 발전량 곡선 */
.staff-page5-orientation-viz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem;
  margin: 0.2rem 0 0.6rem;
}
@media (max-width: 900px) {
  .staff-page5-orientation-viz { grid-template-columns: 1fr; }
}
.staff-page5-compass-figure,
.staff-page5-curve-figure {
  margin: 0;
  padding: 0.3rem 0.35rem;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
}
.staff-page5-compass-caption {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  margin-bottom: 0.15rem;
}
.staff-page5-compass-svg,
.staff-page5-curve-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 나침반 */
.staff-page5-compass-south-sector { fill: rgba(239, 68, 68, 0.07); stroke: none; }
.staff-page5-compass-ring { fill: none; stroke: #cbd5e1; stroke-width: 1; }
.staff-page5-compass-ring-faint { stroke: #e2e8f0; stroke-dasharray: 2 3; }
.staff-page5-compass-axis { stroke: #e2e8f0; stroke-width: 1; }
.staff-page5-compass-label {
  font-size: 10px;
  fill: #64748b;
}
.staff-page5-compass-label.is-cardinal {
  font-weight: 700;
  fill: #0f172a;
}
.staff-page5-compass-site { fill: #0f172a; }

/* 태양 경로 */
.staff-page5-compass-sun-summer {
  stroke: #f59e0b;
  stroke-width: 1.5;
  stroke-dasharray: 4 2;
}
.staff-page5-compass-sun-winter {
  stroke: #ea580c;
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
}

/* 건물 점 */
.staff-page5-compass-building {
  fill: #94a3b8;
  stroke: #fff;
  stroke-width: 0.5;
}
.staff-page5-compass-building.is-threat {
  fill: #dc2626;
  stroke: #fff;
}
.staff-page5-compass-building.is-on-parcel {
  fill: #ea580c;
  stroke: #7c2d12;
  stroke-width: 1.2;
}
.staff-page5-compass-building.is-on-parcel.is-threat {
  fill: #b91c1c;
  stroke: #7c2d12;
}

/* 패널 방향 벡터 */
.staff-page5-compass-svg line.current { stroke: #2563eb; color: #2563eb; }
.staff-page5-compass-svg line.recommended {
  stroke: #059669;
  color: #059669;
  stroke-dasharray: 3 2;
}
.staff-page5-compass-svg text.current-label {
  font-size: 9.5px;
  fill: #2563eb;
  font-weight: 600;
}
.staff-page5-compass-svg text.recommended-label {
  font-size: 9.5px;
  fill: #059669;
  font-weight: 600;
}

/* 범례 */
.staff-page5-compass-legend text { font-size: 9px; fill: #475569; }
.staff-page5-compass-legend line { stroke-width: 1.5; }

/* 회전각 발전량 곡선 */
.staff-page5-curve-grid {
  stroke: #e2e8f0;
  stroke-width: 0.5;
  stroke-dasharray: 2 3;
}
.staff-page5-curve-axis-line { stroke: #94a3b8; stroke-width: 1; }
.staff-page5-curve-axis { font-size: 9px; fill: #64748b; }
.staff-page5-curve-line {
  stroke: #f59e0b;
  stroke-width: 2;
}
.staff-page5-curve-point.is-current { fill: #2563eb; stroke: #fff; stroke-width: 1.5; }
.staff-page5-curve-point.is-recommended { fill: #059669; stroke: #fff; stroke-width: 1.5; }

/* 입면도 (남-북 단면) */
.staff-page5-elevation-figure {
  margin: 0.4rem 0 0.6rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 0.5rem);
  background: #fafafa;
}
.staff-page5-elevation-svg { display: block; }
.staff-page5-elev-grid { stroke: #e2e8f0; stroke-width: 0.5; stroke-dasharray: 2 3; }
.staff-page5-elev-ground { stroke: #475569; stroke-width: 1.5; }
.staff-page5-elev-axis { font-size: 9px; fill: #64748b; }
.staff-page5-elev-axis-tick { stroke: #94a3b8; stroke-width: 1; }
.staff-page5-elev-building {
  fill: rgba(71, 85, 105, 0.72);
  stroke: #1e293b;
  stroke-width: 1;
}
.staff-page5-elev-building.is-on-parcel {
  fill: rgba(234, 88, 12, 0.72);
  stroke: #9a3412;
  stroke-width: 1.2;
}
.staff-page5-elev-height-label {
  font-size: 9px;
  fill: #334155;
  font-weight: 600;
}
.staff-page5-elev-shadow {
  fill: rgba(30, 41, 59, 0.22);
  stroke: rgba(30, 41, 59, 0.4);
  stroke-width: 0.6;
  stroke-dasharray: 2 2;
  pointer-events: none;
}
.staff-page5-elev-install {
  fill: rgba(14, 165, 233, 0.55);
}
.staff-page5-elev-panel {
  stroke: #2563eb;
  stroke-width: 3;
  stroke-linecap: round;
}
.staff-page5-elev-site { fill: #0f172a; stroke: #fff; stroke-width: 1; }
.staff-page5-elev-site-label { font-size: 9px; fill: #0f172a; font-weight: 600; }
.staff-page5-elev-dir { font-size: 10px; fill: #64748b; font-weight: 600; }
.staff-page5-elev-sun { stroke: #f59e0b; stroke-width: 2; }
.staff-page5-elev-sun-disc { fill: #fbbf24; stroke: #d97706; stroke-width: 1; }
.staff-page5-elev-sun-label { font-size: 9px; fill: #b45309; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   주소 자동완성 드롭다운  (customer mode)
   ══════════════════════════════════════════════════════════════════════ */

.address-input-wrap {
  position: relative;
}

.address-auto-hint {
  font-size: 0.75rem;
  color: var(--accent, #2563eb);
  margin: 0.25rem 0 0;
  animation: auto-hint-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes auto-hint-pulse {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

/* customer mode: 결과 목록을 드롭다운 오버레이로 */
body[data-role="customer"] #addressSearchResults:not(:empty) {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 300;
  margin: 0;
  border-radius: var(--radius-md, 0.625rem);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel, #fff);
  border: 1.5px solid color-mix(in srgb, var(--accent, #2563eb) 35%, var(--border, #e2e8f0));
}

/* customer mode에서 주소 검색 힌트 텍스트 교체 */
body[data-role="customer"] #addressSearchHint {
  display: none;
}

/* customer mode에서 주소 검색 버튼 숨김 (자동 검색으로 대체) */
body[data-role="customer"] #addressLookupBtn {
  display: none !important;
}

/* 설치 유형 미선택 시 주소 검색 영역 강조(선행 선택 유도) */
.address-search-shell--needs-install-type .address-search-shell__input-row {
  opacity: 0.72;
}
.address-search-shell--needs-install-type #addressInput {
  cursor: pointer;
  caret-color: transparent;
}

/* customer mode에서 결과 목록 — 지도 위 스택 배치 */
body[data-role="customer"] .address-search-shell--above-map {
  position: relative;
}

/* 숫자 카드 반응형: 작은 화면에서도 두 열 유지 */
@media (max-width: 380px) {
  .crh-kpi-deck .crh-number-value { font-size: 1.35rem; }
  .crh-kpi-deck .crh-number-label { font-size: 0.82rem; }
  .crh-status-label { font-size: 1.35rem; }
}

.crh-subsidy-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-secondary, #64748b);
  align-self: center;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   직원 체크리스트 다중 색상 상태  (3상태: 미완료 / 완료 / 보류)
   ══════════════════════════════════════════════════════════════════════ */

/* 기본 상태 리셋 (기존 .done 유지하되 override) */
.staff-admin-task-btn {
  position: relative;
  transition: background 0.17s ease, border-color 0.17s ease, color 0.17s ease,
              transform 0.1s ease, box-shadow 0.17s ease;
  cursor: pointer;
}

.staff-admin-task-btn:active {
  transform: scale(0.97);
}

/* ── 완료 색상 0 (파란색 — 첫 번째 태스크) ── */
.staff-admin-task-btn.done.done-color-0 {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35);
  font-weight: 700;
}

.staff-admin-task-btn.done.done-color-0:hover {
  background: #1d4ed8;
}

/* ── 완료 색상 1 (초록색 — 두 번째 태스크) ── */
.staff-admin-task-btn.done.done-color-1 {
  background: #15803d;
  border-color: #166534;
  color: #fff;
  box-shadow: 0 1px 4px rgba(21, 128, 61, 0.35);
  font-weight: 700;
}

.staff-admin-task-btn.done.done-color-1:hover {
  background: #166534;
}

/* ── 완료 색상 2 (인디고 — 세 번째 태스크) ── */
.staff-admin-task-btn.done.done-color-2 {
  background: #6d28d9;
  border-color: #5b21b6;
  color: #fff;
  box-shadow: 0 1px 4px rgba(109, 40, 217, 0.35);
  font-weight: 700;
}

.staff-admin-task-btn.done.done-color-2:hover {
  background: #5b21b6;
}

/* ── 보류 상태 (주황색) ── */
.staff-admin-task-btn.hold {
  background: #fff7ed;
  border-color: #fb923c;
  color: #9a3412;
  box-shadow: 0 1px 4px rgba(251, 146, 60, 0.2);
  font-weight: 700;
}

.staff-admin-task-btn.hold:hover {
  background: #ffedd5;
  border-color: #ea580c;
}

/* 체크리스트 범례 (태스크 목록 위) */
.staff-admin-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.staff-admin-task-legend {
  display: flex;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--ink-secondary, #475569);
  flex-wrap: wrap;
}

.staff-task-legend-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.staff-task-legend-dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.staff-task-legend-dot--blue::before   { background: #2563eb; }
.staff-task-legend-dot--green::before  { background: #15803d; }
.staff-task-legend-dot--indigo::before { background: #6d28d9; }
.staff-task-legend-dot--hold::before   { background: #fb923c; }

/* ── Staff Recent Sessions Panel ────────────────────────────────────────── */
.staff-recent-panel {
  margin-bottom: 1rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  background: var(--panel, #fff);
}

.staff-recent-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink, #1e293b);
  transition: background 0.15s ease;
  text-align: left;
}

.staff-recent-toggle:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #dcfce7 100%);
}

.staff-recent-toggle__arrow {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
  color: var(--muted, #64748b);
}

.staff-recent-toggle[aria-expanded="true"] .staff-recent-toggle__arrow {
  transform: rotate(90deg);
}

.staff-recent-body {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--border, #e2e8f0);
}

.staff-recent-hint {
  font-size: 0.75rem;
  color: var(--muted, #64748b);
  margin-bottom: 0.5rem;
}

.staff-recent-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.staff-recent-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  background: var(--panel-soft, #f8fafc);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.staff-recent-item:hover {
  border-color: var(--accent, #2563eb);
  background: #eff6ff;
}

.staff-recent-item__status {
  font-size: 1rem;
  flex-shrink: 0;
}

.staff-recent-item__info {
  flex: 1;
  min-width: 0;
}

.staff-recent-item__address {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-recent-item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.2rem;
}

.staff-recent-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.08rem 0.38rem;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid currentColor;
  line-height: 1.4;
}
.staff-recent-badge--ok     { color: #065f46; background: rgba(5,150,105,0.08); }
.staff-recent-badge--warn   { color: #92400e; background: rgba(217,119,6,0.08); }
.staff-recent-badge--fail   { color: #991b1b; background: rgba(220,38,38,0.08); }
.staff-recent-badge--muted  { color: var(--muted); background: var(--muted-bg); }
.staff-recent-badge--step   { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

.staff-recent-item__meta {
  font-size: 0.71rem;
  color: var(--muted, #64748b);
  margin-top: 0.1rem;
}

.staff-recent-item__time {
  font-size: 0.7rem;
  color: var(--muted, #64748b);
  flex-shrink: 0;
  white-space: nowrap;
}

.staff-recent-item--empty {
  font-size: 0.8rem;
  color: var(--muted, #64748b);
  cursor: default;
  text-align: center;
  padding: 0.75rem;
}

.staff-recent-item--empty:hover {
  border-color: var(--border, #e2e8f0);
  background: var(--panel-soft, #f8fafc);
}

.staff-recent-clear-btn {
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  opacity: 0.7;
}

.staff-recent-clear-btn:hover {
  opacity: 1;
}

.staff-recent-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.staff-recent-item__delete {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.staff-recent-item:hover .staff-recent-item__delete {
  opacity: 1;
}

.staff-recent-item__delete:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.staff-recent-item__memo {
  font-size: 0.69rem;
  color: var(--ink-secondary);
  font-style: italic;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-recent-group-label {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 0 0.15rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0.15rem;
}

.staff-recent-import-btn {
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  opacity: 0.7;
}

.staff-recent-import-btn:hover {
  opacity: 1;
}

/* ── Road Use Type Visualization ──────────────────────────────────────────── */
.road-use-viz-panel {
  margin-top: 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 10px);
  background: var(--panel, #fff);
  overflow: hidden;
  animation: fadeSlideDown 0.2s ease;
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.road-use-viz-inner {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* SVG diagram */
.road-use-viz-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

#roadUseVizSvg {
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
  display: block;
}

.road-use-viz-svg-legend {
  font-size: 0.68rem;
  color: var(--muted, #64748b);
  text-align: center;
}

/* Info side */
.road-use-viz-info {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.road-use-viz-badge-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.road-use-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  border: 2px solid currentColor;
}

.road-use-badge--agri    { color: #15803d; background: #dcfce7; }
.road-use-badge--forest  { color: #166534; background: #bbf7d0; }
.road-use-badge--myeon   { color: #0369a1; background: #e0f2fe; }
.road-use-badge--gun     { color: #1d4ed8; background: #dbeafe; }
.road-use-badge--si      { color: #7c3aed; background: #ede9fe; }
.road-use-badge--national{ color: #b45309; background: #fef3c7; }
.road-use-badge--highway { color: #dc2626; background: #fee2e2; }
.road-use-badge--other   { color: #4b5563; background: #f3f4f6; }

.road-use-risk-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
}
.road-use-risk-badge--low    { background: #dcfce7; color: #166534; }
.road-use-risk-badge--medium { background: #fef3c7; color: #92400e; }
.road-use-risk-badge--high   { background: #fee2e2; color: #991b1b; }

/* Table */
.road-use-viz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.road-use-viz-table th {
  background: #f1f5f9;
  padding: 5px 8px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-size: 0.72rem;
}
.road-use-viz-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.road-use-viz-table tr:last-child td { border-bottom: none; }

.road-viz-verdict {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
}
.road-viz-verdict--ok   { background: #dcfce7; color: #166534; }
.road-viz-verdict--warn { background: #fef3c7; color: #92400e; }
.road-viz-verdict--fail { background: #fee2e2; color: #991b1b; }
.road-viz-verdict--na   { background: #f3f4f6; color: #6b7280; }

.road-use-viz-note {
  font-size: 0.68rem;
  color: var(--muted, #64748b);
  margin: 0;
  line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════════════
   모바일 반응형 개선 + 고객/직원 UX 폴리싱
   ══════════════════════════════════════════════════════════════════════ */

/* ── 모바일: 기본 레이아웃 ─────────────────────────────────────────── */
@media (max-width: 700px) {
  body {
    padding: var(--space-sm);
  }

  main {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .hero {
    padding: 1rem;
    gap: 0.875rem;
    border-radius: var(--radius-lg);
  }

  .hero-topbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
  }

  .hero-controls {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.35rem;
  }

  .hero-controls .page-switch {
    max-width: min(12.5rem, 36vw);
  }

  .hero-brand {
    gap: 0.4rem;
  }

  .hero-brand-logo {
    height: 2.05rem;
    max-width: min(11.5rem, 44vw);
  }

  .hero-brand-copy {
    display: none;
  }

  body[data-role="staff"] .hero-company-name {
    display: none;
  }

  .role-open-btn {
    width: min(11.5rem, 42vw);
    min-width: 8.5rem;
    padding: 0.35rem 0.5rem 0.35rem 0.45rem;
    gap: 0.35rem;
  }

  .role-open-btn__kicker {
    display: none;
  }

  .role-open-btn__desc {
    display: none;
  }

  .hero-controls .page-switch {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hero-main {
    gap: 0.75rem;
  }
}

/* ── 모바일: 입력 패널 ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  .panel.input-panel {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
  }

  .install-type-cards {
    grid-template-columns: 1fr 1fr;
  }

  .parcel-area-row {
    flex-wrap: wrap;
  }

  .address-api-actions {
    flex-wrap: wrap;
  }

  .kepco-step-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── 모바일: 결과 패널 ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  .result-switch {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .result-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .result-quick-edit-grid {
    grid-template-columns: 1fr;
  }

  .result-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .result-head-actions {
    width: 100%;
    display: flex;
    gap: 0.5rem;
  }

  .result-head-actions button {
    flex: 1;
  }
}

/* ── 모바일: 직원 플로우 ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .staff-flow-pagination {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .staff-page-dots {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .staff-page-dot {
    min-width: 2.2rem;
    min-height: 2.2rem;
    font-size: 0.85rem;
  }

  /* 모바일: 진행 맵은 본문 위 오버레이, 본문은 좌측 레일 유지 */
  .staff-flow-layout {
    grid-template-columns: minmax(2.6rem, auto) minmax(0, 1fr);
  }

  body[data-role="staff"] .staff-flow-layout {
    grid-template-columns: minmax(min(13.5rem, calc(100vw - 2.6rem)), auto) minmax(0, 1fr);
  }

  body[data-role="staff"] .staff-flow-sidebar {
    width: min(13.5rem, calc(100vw - 2.6rem));
  }

  .staff-flow.staff-overview-drawer-open .staff-flow-sidebar {
    width: min(20rem, calc(100vw - 3.4rem));
  }

  .staff-overview-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(20rem, calc(100vw - 1rem));
    max-width: 100%;
    height: auto;
    max-height: 60vh;
    overflow: hidden;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    z-index: 1000;
    box-shadow: var(--shadow-lg);
  }

}

/* ── 고객 모드: 입력 → 결과 전환 시 CTA 강조 ──────────────────────── */
body[data-role="customer"] #resultView .result-head h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

/* ── 직원 모드: 단계 타이틀 강조 ─────────────────────────────────── */
.staff-current-step-title {
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border-left: 3px solid var(--accent);
  padding: 0.35rem 0.75rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem) !important;
  letter-spacing: -0.01em;
}

/* ── 직원 최근 작업 - 호버 시 단계/판정 배지 더 선명하게 ──────────── */
.staff-recent-item:hover .staff-recent-badge {
  filter: brightness(0.92);
}

/* ── 공통: 빈 상태 텍스트 스타일 통일 ────────────────────────────── */
[data-address-area-parcel-value],
[data-address-area-building-value],
[data-address-area-roof-value],
[data-address-area-usable-value] {
  min-height: 1.5em;
}

/* 초기 '조회 후 표시됩니다' 텍스트를 skeleton처럼 처리 */
.address-area-card__value:empty::after,
.address-area-card__value:only-child:contains("조회 후")::after {
  content: "";
}

/* ── 접근성: focus ring 강화 ──────────────────────────────────────── */
.staff-page-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.install-type-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.customer-install-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── 결과 화면 캔버스 + 직원 V1 워크스페이스 바 (v1-staff.jsx) ───────── */
#resultView.active-view {
  background: #f0f4f9;
}

#resultView.active-view #resultPanel.panel.result {
  background: transparent;
  border: none;
  box-shadow: none;
}

#resultView.active-view .result-switch {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 10px;
}

#resultView.active-view .result-tab-btn {
  border-radius: 8px;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 0.82rem;
  color: #64748b;
}

#resultView.active-view .result-tab-btn.active {
  background: #eff6ff;
  color: #1d4ed8;
}

#resultView.active-view .result-head {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.65rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.staff-result-workspace-bar {
  display: none;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0;
  background: #0f172a;
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: -0.01em;
  border-radius: 10px;
  border: 1px solid #0f172a;
}

.staff-result-workspace-bar:has(+ .staff-verdict-banner:not(.hidden)) {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}

.staff-result-workspace-bar:has(+ .staff-verdict-banner.hidden) {
  border-radius: 10px;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid #1e293b;
}

body[data-role="staff"] #resultView.active-view .staff-result-workspace-bar {
  display: flex;
}

.staff-result-workspace-bar__mark {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  background: #fbbf24;
  color: #1e3a8a;
  font-weight: 800;
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.staff-result-workspace-bar__title {
  font-weight: 600;
  font-size: 0.74rem;
}

.staff-result-workspace-bar__crumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.65);
  margin-left: 0.25rem;
}

.staff-result-workspace-bar__sep {
  opacity: 0.5;
}

.staff-result-workspace-bar__crumb-current {
  color: #fff;
  font-weight: 600;
}

/* ── 직원 판정 요약 배너 (V1 KPI 패널) ─────────────────────────────── */
.staff-verdict-banner {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.staff-result-workspace-bar:has(+ .staff-verdict-banner:not(.hidden)) + .staff-verdict-banner {
  border-top: none;
  border-radius: 0 0 10px 10px;
}

.staff-rejected-progression-notice {
  margin: 0 0 0.5rem;
  padding: 0.55rem 0.8rem;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-left: 3px solid #dc2626;
  border-radius: var(--radius-sm);
  color: #7f1d1d;
  font-size: 0.82rem;
  line-height: 1.45;
}

.staff-verdict-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.5rem;
  flex: 1;
  align-items: stretch;
  min-width: 0;
}

.staff-verdict-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.45rem 0.55rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 0;
  text-align: left;
}

.staff-verdict-kpi-label {
  font-size: 0.58rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.staff-verdict-kpi-value {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.staff-verdict-kpi-value--ok   { color: #065f46; }
.staff-verdict-kpi-value--warn { color: #92400e; }
.staff-verdict-kpi-value--fail { color: #991b1b; }
.staff-verdict-kpi-value--muted { color: var(--muted); }

.staff-verdict-edit-btn {
  flex-shrink: 0;
  white-space: nowrap;
  align-self: center;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

/* ── 결과 재계산 시 KPI 값 flash 애니메이션 ─────────────────────────── */
@keyframes kpiFlash {
  0%   { background: rgba(37, 99, 235, 0.18); border-radius: 3px; }
  60%  { background: rgba(37, 99, 235, 0.08); }
  100% { background: transparent; }
}

.value--just-updated {
  animation: kpiFlash 1.1s ease-out forwards;
}

/* ── 스텝 인라인 수정 패널 (5/6/7단계) ─────────────────────────────── */
.staff-step-inline-edit {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.staff-step-inline-edit::before {
  content: "✏️ 이 단계에서 바로 수정";
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.staff-step-inline-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem 1rem;
}

.staff-step-inline-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

.staff-step-inline-edit-grid input,
.staff-step-inline-edit-grid select {
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
}

.staff-custom-catalog-add {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.staff-custom-catalog-add__hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.staff-custom-catalog-add__block {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(37, 99, 235, 0.04);
  border: 1px solid var(--border);
}

.staff-custom-catalog-add__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 0.45rem;
}

.staff-custom-catalog-add__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: end;
}

.staff-custom-catalog-add__grid label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

.staff-custom-catalog-add__grid input {
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
}

.staff-custom-catalog-add__field--name {
  grid-column: 1 / -1;
}

.staff-custom-catalog-add__btnwrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 1px;
}

.staff-custom-catalog-delete-row {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.staff-custom-catalog-delete-hint {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--muted);
}

.staff-custom-catalog-delete-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

button.staff-custom-catalog-delete-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.staff-custom-catalog-user-lists {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.staff-custom-catalog-user-lists__hint {
  margin: 0;
}

.staff-custom-catalog-user-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.staff-custom-catalog-user-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.staff-custom-catalog-user-list__item:last-child {
  border-bottom: none;
}

.staff-custom-catalog-user-list__meta {
  flex: 1 1 10rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink);
  min-width: 0;
}

.staff-custom-catalog-user-list__empty {
  margin: 0.35rem 0 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--muted);
}

button.staff-custom-catalog-user-list__del {
  flex-shrink: 0;
}

/* 5단계: 비활성 탭(inert) 밖에서도 조작감 확보 — 겹침·텍스트 선택 */
.staff-custom-catalog-add--page5 {
  position: relative;
  z-index: 1;
  user-select: text;
}

.staff-custom-catalog-add--page5 input,
.staff-custom-catalog-add--page5 button {
  pointer-events: auto;
}

.staff-step-inline-edit-actions {
  display: flex;
  justify-content: flex-end;
}

/* ── 9단계 B2B CTA 블록 ─────────────────────────────────────────── */
.staff-b2b-cta-block {
  margin-top: 1.5rem;
  padding: 1.25rem 1.25rem;
  background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(16,185,129,0.04) 100%);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.staff-b2b-cta-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.staff-b2b-cta-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.staff-b2b-cta-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.staff-b2b-cta-desc {
  font-size: 0.8rem;
  color: var(--muted);
}

.staff-b2b-cta-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.staff-b2b-cta-btns .primary {
  flex: 1;
  min-width: 14rem;
  font-size: 0.95rem;
  padding: 0.6rem 1rem;
}

/* ── 모바일: verdict banner 세로 정렬 ─────────────────────────────── */
@media (max-width: 700px) {
  .staff-verdict-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .staff-verdict-kpi {
    min-width: 4rem;
    padding: 0.2rem 0.4rem;
  }
  .staff-verdict-kpi-value {
    font-size: 0.78rem;
  }
  .staff-b2b-cta-btns .primary {
    min-width: 0;
  }
}

/* ── 인쇄 스타일 개선 ─────────────────────────────────────────────── */
@media print {
  .hero,
  .page-switch,
  .staff-recent-panel,
  .result-head-actions,
  .result-quick-edit,
  .result-edit-block,
  .staff-flow-context {
    display: none !important;
  }
}

/* ── 직원 수익 산정 근거 테이블 ─────────────────────────────── */
.staff-profit-breakdown {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}

.staff-profit-breakdown__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink-secondary);
  background: #f5f8fc;
  padding: 10px 14px;
  margin: 0;
  border-bottom: 1px solid var(--border-light);
  letter-spacing: 0.01em;
}

.staff-profit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  table-layout: fixed;
}

.staff-profit-table__head th {
  background: #edf2fb;
  font-weight: 700;
  color: var(--ink-secondary);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
}

.staff-profit-table__head th:nth-child(2) {
  width: 22%;
  text-align: right;
}

.staff-profit-table__head th:nth-child(3) {
  width: 42%;
}

.staff-profit-table__section td {
  background: #f0f4fa;
  font-weight: 700;
  color: var(--ink-secondary);
  padding: 5px 12px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.staff-profit-table tr td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.staff-profit-table tr:last-child td {
  border-bottom: 0;
}

.staff-profit-table__val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.staff-profit-table__src {
  color: var(--ink-tertiary);
  font-size: 0.78rem;
}

.staff-profit-table__highlight td {
  background: #f0fbf4;
  font-weight: 700;
  color: var(--ok, #1a7f4b);
}

.staff-profit-table__highlight .staff-profit-table__src {
  color: var(--ok, #1a7f4b);
  opacity: 0.75;
}

/* ── 수익 산정 요약 배너 (직원·고객 공통) ──────────────────────── */
.profit-breakdown-summary {
  margin: 0 14px 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f0fbf4;
  border: 1px solid #d0ecdc;
  color: #1a7f4b;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.5;
}
.profit-breakdown-summary--warn {
  background: #fff7e6;
  border-color: #ffe2b3;
  color: #94621a;
}
.profit-breakdown-summary__formula {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--ink-secondary);
}

/* 표 안 작은 배지(실데이터/추정) */
.staff-profit-table__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 8px;
  vertical-align: middle;
  letter-spacing: 0;
}
.staff-profit-table__badge--live {
  color: #1a7f4b;
  background: #e2f5ea;
  border: 1px solid #c8ecd3;
}
.staff-profit-table__badge--est {
  color: #94621a;
  background: #fff3dc;
  border: 1px solid #f0d99e;
}

/* ── 고객용 용지 시나리오 비교 카드 ───────────────────────────── */
.customer-area-scenarios {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: #fff;
}
.customer-area-scenarios.hidden {
  display: none !important;
}
.customer-area-scenarios__head {
  margin-bottom: 12px;
}
.customer-area-scenarios__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-primary);
}
.customer-area-scenarios__lead {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--ink-secondary);
  line-height: 1.5;
}
.customer-area-scenarios__list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.customer-area-scenario-card {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.customer-area-scenario-card--recommended {
  border-color: #1a7f4b;
  background: #f0fbf4;
  box-shadow: 0 1px 0 rgba(26, 127, 75, 0.08);
}
.customer-area-scenario-card__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-primary);
}
.customer-area-scenario-card__badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #1a7f4b;
  background: #e2f5ea;
  border: 1px solid #c8ecd3;
}
.customer-area-scenario-card__sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-tertiary);
  line-height: 1.5;
}
.customer-area-scenario-card__formula {
  margin: 0;
  font-size: 0.76rem;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.customer-area-scenario-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.customer-area-scenario-card__row strong {
  color: var(--ink-primary);
  font-weight: 600;
}
.customer-area-scenario-card__row--muted {
  font-size: 0.76rem;
  color: var(--ink-tertiary);
}
.customer-area-scenario-card__row--muted span:last-child {
  color: var(--ink-tertiary);
}
.customer-area-scenario-card__metric {
  margin: 4px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a7f4b;
  font-variant-numeric: tabular-nums;
}
.customer-area-scenarios__footnote {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--ink-tertiary);
  line-height: 1.5;
}

/* ── 고객용 수익 산정 팝업 ─────────────────────────────────────── */
.customer-profit-breakdown-dialog {
  width: min(560px, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
}

.customer-profit-breakdown-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
}

.customer-profit-breakdown-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
}

.customer-profit-breakdown-dialog__head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.customer-profit-breakdown-dialog__lead {
  margin: 0;
  padding: 0.85rem 1.15rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-primary);
  font-weight: 600;
}

.customer-profit-breakdown-dialog__body {
  padding: 0.65rem 1.15rem 0.85rem;
  max-height: min(52vh, 380px);
  overflow: auto;
}

.customer-profit-breakdown-dialog__body .profit-breakdown-summary {
  margin-bottom: 0.75rem;
}

.customer-profit-breakdown-dialog__advanced {
  margin: 0 1.15rem 1rem;
  border-top: 1px dashed var(--border-light);
  padding-top: 0.65rem;
}

.customer-profit-breakdown-dialog__advanced > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--ink-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.customer-profit-breakdown-dialog__advanced > summary::-webkit-details-marker {
  display: none;
}

.customer-profit-breakdown-dialog__advanced > summary::before {
  content: "▶";
  font-size: 0.65rem;
  color: var(--ink-tertiary);
  transition: transform 0.18s ease;
}

.customer-profit-breakdown-dialog__advanced[open] > summary::before {
  transform: rotate(90deg);
}

.customer-profit-breakdown-dialog__advanced-body {
  margin-top: 0.65rem;
  max-height: min(28vh, 220px);
  overflow: auto;
}

/* ── 직원 입력: 주소 검색 전체 너비 + 지도|연계서비스(세로) 2열 ─── */
.input-address-below-search {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}

body[data-role="staff"] .input-steps-pager-pane[data-pane="1"] .input-step[data-input-step="1"] > #addressSearchShell {
  width: 100%;
  max-width: none;
}

body[data-role="staff"] .input-address-below-search {
  grid-template-columns: minmax(0, 1.55fr) minmax(10.5rem, 0.38fr);
  gap: 0.5rem;
  align-items: start;
}

body[data-role="staff"] .input-address-below-search .address-search-integrations {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  min-width: 0;
  gap: 0.35rem;
}

body[data-role="staff"] .input-address-below-search .integration-action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-top: 0;
}

body[data-role="staff"] .input-address-below-search .address-map-toolbar-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin: 0;
}

body[data-role="staff"] .input-address-below-search .address-map-toolbar-actions .secondary.small {
  flex: none;
  width: 100%;
  min-width: 0;
  min-height: 2.55rem;
  justify-content: center;
  font-size: 0.84rem;
  font-weight: 700;
}

body[data-role="staff"] .input-address-below-search .integration-action-card {
  height: auto;
  min-height: 0;
  gap: 0.12rem 0.35rem;
  padding: 0.32rem 0.48rem;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title badge"
    "meta meta";
  align-content: start;
}

body[data-role="staff"] .input-address-below-search .integration-action-card__title {
  grid-area: title;
  font-size: 0.76rem;
  line-height: 1.25;
}

body[data-role="staff"] .input-address-below-search .integration-action-card__badge {
  grid-area: badge;
  font-size: 0.82rem;
  line-height: 1.2;
  justify-self: end;
  white-space: nowrap;
}

body[data-role="staff"] .input-address-below-search .integration-action-card__meta {
  grid-area: meta;
  font-size: 0.68rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

body[data-role="staff"] .input-address-below-search .address-map-area {
  margin-bottom: 0;
  min-width: 0;
}

body[data-role="staff"] .input-address-below-search .address-map-frame {
  min-height: 8.5rem;
  aspect-ratio: 16 / 9;
}

body[data-role="staff"] .input-address-below-search .address-map-meta,
body[data-role="staff"] .input-address-below-search .address-map-overlay-meta {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  body[data-role="staff"] .input-address-below-search {
    grid-template-columns: 1fr;
  }
}

/* ── customer-guide <details> summary 스타일 ─────────────────────── */
.customer-guide > summary.customer-guide-summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-secondary);
  list-style: none;
  padding: 0;
  user-select: none;
}
.customer-guide > summary.customer-guide-summary::-webkit-details-marker {
  display: none;
}
.customer-guide > summary.customer-guide-summary::before {
  content: '▶ ';
  font-size: 0.65rem;
  color: var(--accent);
}
.customer-guide[open] > summary.customer-guide-summary::before {
  content: '▼ ';
}

/* ═══════════════════════════════════════════════════════
   직원 플로우 — 통합 위젯 카드 (4단계 법령·조례 패널)
   ═══════════════════════════════════════════════════════ */

.staff-flow-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-lg);
  min-width: 0;
}

.staff-flow-card--ordinance {
  border-top: 3px solid #b45309;
}

.staff-flow-card--distance {
  border-top: 3px solid #0e7490;
}

.staff-flow-card--criteria {
  border-top: 3px solid #7c3aed;
}

.staff-flow-card--legal-rag {
  border-top: 3px solid #0f766e;
}

.staff-flow-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.staff-flow-card__head-main {
  flex: 1;
  min-width: 0;
}

.staff-flow-card__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.staff-flow-card__desc {
  margin: 0.35rem 0 0;
  color: var(--ink-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}

.staff-flow-card__meta {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.staff-flow-card__actions {
  flex-shrink: 0;
  margin-top: 0;
}

.staff-flow-card__body {
  margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════════════
   직원 플로우 — 페이지별 2컬럼 대시보드 레이아웃
   ═══════════════════════════════════════════════════════ */

/* ── 페이지 2: 판정 요약은 전폭, 지도+한전은 `.staff-step2-map-kepco-row` 플렉스 한 줄 ── */

/* ── 페이지 4: 허가기준 원문(최상단 전폭) → 조례(좌)+이격(우) → AI 법령 정리(전폭) ── */
#staffFlowPage4 .staff-flow-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}
#staffFlowPage4 .staff-flow-body > h4,
#staffFlowPage4 .staff-flow-body > #staffLocalGovResult,
#staffFlowPage4 .staff-flow-body > #staffLocalGovReason {
  grid-column: 1 / -1;
}
#staffFlowPage4 .staff-flow-body > .ordinance-criteria--staff-step4 {
  grid-column: 1 / -1;
  margin-top: 0;
}
#staffFlowPage4 .staff-flow-body > .ordinance-panel,
#staffFlowPage4 .staff-flow-body > .distance-guide-panel {
  margin-top: 0;
}
#staffFlowPage4 .staff-flow-body > .ordinance-panel {
  grid-column: 1;
}
#staffFlowPage4 .staff-flow-body > .distance-guide-panel {
  grid-column: 2;
}
#staffFlowPage4 .staff-flow-body > .ordinance-panel.hidden ~ .distance-guide-panel {
  grid-column: 1 / -1;
}
#staffFlowPage4 .staff-flow-body > .staff-step4-legal-pair-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}
#staffFlowPage4 .staff-step4-legal-pair-row > .staff-flow-card {
  margin-top: 0;
  min-width: 0;
}
#staffFlowPage4 .staff-step4-legal-pair-row--single {
  grid-template-columns: 1fr;
}

/* 4단계: 패널별 이질적 셸 제거 → staff-flow-card 기준으로 통일 */
#staffFlowPage4 .staff-flow-card.ordinance-panel {
  border-left: none;
  margin-top: 0;
}

#staffFlowPage4 .staff-flow-card.distance-guide-panel {
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-lg);
}

#staffFlowPage4 .staff-flow-card.legal-rag-panel {
  border-left: none;
  background: var(--panel);
  margin-top: 0;
}

#staffFlowPage4 .staff-flow-card.ordinance-criteria {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--panel);
  border: 1px solid var(--border);
  border-top-width: 3px;
}

#staffFlowPage4 .staff-flow-card__head .legal-rag-status {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.05rem;
}

#staffFlowPage4 .staff-flow-card .ordinance-address-laws-toggle,
#staffFlowPage4 .staff-flow-card .ordinance-diagnostics,
#staffFlowPage4 .staff-flow-card .legal-rag-toolbar,
#staffFlowPage4 .staff-flow-card .legal-rag-citation-panel,
#staffFlowPage4 .staff-flow-card .legal-rag-qa-panel,
#staffFlowPage4 .staff-flow-card .distance-guide-note-panel {
  margin-top: 0.85rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--muted-bg);
}

#staffFlowPage4 .staff-flow-card .legal-rag-citation-panel--solo {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#staffFlowPage4 .staff-flow-card .legal-rag-toolbar {
  background: var(--panel);
}

#staffFlowPage4 .staff-flow-card .ordinance-grid,
#staffFlowPage4 .staff-flow-card .legal-rag-grid {
  margin-top: 0.85rem;
  gap: 0.75rem;
}

#staffFlowPage4 .staff-flow-card .legal-rag-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

#staffFlowPage4 .staff-flow-card .distance-guide-grid {
  margin-top: 0.85rem;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

#staffFlowPage4 .staff-flow-card .distance-guide-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

#staffFlowPage4 .staff-flow-card .distance-guide-card h5 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

#staffFlowPage4 .staff-flow-card .distance-guide-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0e7490;
}

#staffFlowPage4 .staff-flow-card .legal-rag-card,
#staffFlowPage4 .staff-flow-card .ordinance-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

#staffFlowPage4 .staff-flow-card .legal-rag-card h5,
#staffFlowPage4 .staff-flow-card .ordinance-card h5 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

#staffFlowPage4 .staff-flow-card .ordinance-criteria-item {
  border: 1px solid var(--border);
  border-left: 3px solid #7c3aed;
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 720px) {
  #staffFlowPage4 .staff-flow-card__head {
    flex-direction: column;
    align-items: stretch;
  }

  #staffFlowPage4 .staff-flow-card__actions {
    width: 100%;
  }

  #staffFlowPage4 .staff-flow-card__actions .address-api-actions {
    width: 100%;
  }
}

/* ── 페이지 8: 비용 바(전폭) + 카드(좌) + 배치도(우) ── */
#staffFlowPage8 .staff-flow-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}
#staffFlowPage8 .staff-flow-body > h4,
#staffFlowPage8 .staff-flow-body > #staffCostBreakdownBar {
  grid-column: 1 / -1;
}
#staffFlowPage8 .staff-flow-body > #staffQuoteBreakdown,
#staffFlowPage8 .staff-flow-body > #staffQuoteTotal {
  grid-column: 1;
}
#staffFlowPage8 .staff-flow-body > .staff-layout-map-block {
  grid-column: 2;
  grid-row: 3 / span 2;
}

/* ── 7단계 맥락 배치도 미러 ────────────────────── */
.staff-page7-context-map-block {
  margin-top: 18px;
}
.staff-page7-context-map-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted, #475569);
  margin: 0 0 6px;
}
.staff-page7-layout-map-wrap {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, #e2e8f0);
  pointer-events: none; /* 7단계는 읽기 전용 */
  max-height: 320px;
}

.staff-page7-layout-map-wrap .staff-page5-layout-map-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 320px;
}

/* ── 페이지 9: KPI 전폭 + 패널 2컬럼 그리드 ────────── */
.staff-profit-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.staff-profit-kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.65rem;
  background: var(--muted-bg);
}
.staff-profit-kpi-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.staff-profit-kpi-value {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0.1rem 0 0;
}
.staff-profit-dashboard > .staff-profit-kpis { margin-bottom: 0.5rem; }
.staff-profit-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  align-items: start;
}
.staff-profit-dashboard > .staff-profit-kpis {
  grid-column: 1 / -1;
}
.staff-profit-panel {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem;
  background: var(--panel);
}
.staff-profit-panel h5 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.staff-profit-panel--decision {
  grid-column: 1 / -1;
}

/* 반응형: 900px 이하 → 1컬럼 */
@media (max-width: 900px) {
  .staff-step2-map-kepco-row {
    flex-direction: column;
    flex-wrap: wrap;
  }
  .staff-step2-map-kepco-row .staff-step2-map-wrap,
  .staff-step2-map-kepco-row .staff-step2-kepco-panel {
    flex: 1 1 auto;
    max-width: 100%;
    max-height: none;
  }
  #staffFlowPage4 .staff-flow-body,
  #staffFlowPage8 .staff-flow-body,
  .staff-profit-dashboard {
    grid-template-columns: 1fr;
  }
  #staffFlowPage4 .staff-flow-body > *,
  #staffFlowPage8 .staff-flow-body > *,
  .staff-profit-dashboard > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  #staffFlowPage4 .staff-step4-legal-pair-row {
    grid-template-columns: 1fr;
  }
  .staff-profit-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}