@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

/* ============================================================================
   寃쎄린???띿큿?ㅼ? 吏€???뚮옯????Rural Data Intelligence Design System
   ----------------------------------------------------------------------------
   Sections
   1.  Design tokens (CSS custom properties)
   2.  Reset & base typography
   3.  Utility helpers
   4.  Loading overlay
   5.  App shell
   6.  Header
   7.  Search dropdown
   8.  Tab navigation
   9.  Main layout
   10. Map container, indicator selector, legends
   11. Detail panel ??empty state
   12. Detail panel ??city header
   13. Radar chart card
   14. Score cards (static + dynamic variants)
   15. Section titles & indicator filter tabs
   16. Indicator list cards
   17. Buttons
   18. Scenario panel
   19. Namyangju?れ쑉吏€??section
   20. Comparison section (bottom drawer)
   21. Leaflet overrides
   22. Responsive
   ============================================================================ */


/* ============================================================================
   1. Design tokens
   ============================================================================ */
:root {
  /* ---- Brand / primary ---- */
  --primary:          #2D5F3F;
  --primary-dark:     #1B3E2A;
  --primary-hover:    #234D33;
  --primary-light:    #4A8263;
  --primary-soft:     #E6EFE9;
  --primary-bg:       #EEF4F0;

  /* ---- Accent ---- */
  --accent:           #D4A574;
  --accent-dark:      #B48352;
  --accent-soft:      #F5EBDC;

  /* ---- Surfaces ---- */
  --surface-base:     #FAFBF7;
  --surface-card:     #FFFFFF;
  --surface-sunken:   #F3F5EE;
  --surface-hover:    #F0F3EC;

  /* ---- Borders ---- */
  --border-soft:      #E8EAE3;
  --border:           #D5D9CE;
  --border-strong:    #B9BFB1;

  /* ---- Text ---- */
  --text-primary:     #1F2523;
  --text-body:        #4A524E;
  --text-muted:       #8A9089;
  --text-subtle:      #AEB3AA;
  --text-onprimary:   #FFFFFF;
  --text-secondary:   var(--text-body);

  /* ---- Category colors (pillars) ---- */
  --samlter:          #3E7CB1;
  --samlter-dark:     #2A5A85;
  --samlter-soft:     #E5EEF6;
  --samlter-tint:     #C7DAEA;

  --ilter:            #D97E3A;
  --ilter-dark:       #A55E26;
  --ilter-soft:       #FAEDDF;
  --ilter-tint:       #F2CFAE;

  --shimter:          #5B8C5A;
  --shimter-dark:     #3F6B3E;
  --shimter-soft:     #E8EFE6;
  --shimter-tint:     #C6D7C3;

  /* ---- Category color aliases (for legacy class names) ---- */
  --color-samlter:        var(--samlter);
  --color-samlter-light:  var(--samlter-tint);
  --color-samlter-bg:     var(--samlter-soft);
  --color-ilter:          var(--ilter);
  --color-ilter-light:    var(--ilter-tint);
  --color-ilter-bg:       var(--ilter-soft);
  --color-shimter:        var(--shimter);
  --color-shimter-light:  var(--shimter-tint);
  --color-shimter-bg:     var(--shimter-soft);

  /* ---- Semantic ---- */
  --success:          #2F7A4B;
  --success-soft:     #E1EFE6;
  --warning:          #C8892B;
  --warning-soft:     #F7ECD2;
  --danger:           #B8453D;
  --danger-soft:      #F5DEDB;

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 2px rgba(27, 62, 42, 0.04);
  --shadow-sm:  0 1px 3px rgba(27, 62, 42, 0.06), 0 0 0 1px rgba(27, 62, 42, 0.03);
  --shadow-md:  0 4px 12px rgba(27, 62, 42, 0.08), 0 0 0 1px rgba(27, 62, 42, 0.04);
  --shadow-lg:  0 12px 32px rgba(27, 62, 42, 0.10);
  --shadow:     var(--shadow-sm);

  /* ---- Radius ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius:     10px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-pill: 999px;

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

  /* ---- Typography ---- */
  --font:
    'Pretendard Variable', 'Pretendard',
    'Noto Sans KR',
    -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --font-mono:
    'JetBrains Mono', 'SF Mono', ui-monospace,
    'Cascadia Code', Menlo, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-body: 13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-hero: 40px;

  /* ---- Layout ---- */
  --header-h:     64px;
  --tab-h:        48px;
  --comparison-h: 48px;

  /* ---- Motion ---- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 160ms var(--ease);
  --transition-slow: 240ms var(--ease);
}


/* ============================================================================
   2. Reset & base typography
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-base);
  font-feature-settings: 'ss01', 'tnum', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

p {
  color: var(--text-body);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--primary-dark);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Tabular figures for all numeric displays */
.city-total-score,
.city-rank-badge,
.score-card-value,
.score-card-rank,
.score-overall-value,
.score-rank,
.indicator-value,
.indicator-rank,
.indicator-rank-badge,
.indicator-range,
.delta-value,
.slider-value,
.lever-value-display,
.delta-table td,
.delta-table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Styled scrollbars (WebKit) */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}


/* ============================================================================
   3. Utility helpers
   ============================================================================ */
.hidden {
  display: none !important;
}

/* .active is contextual ??handled per component */


/* ============================================================================
   4. Loading overlay
   ============================================================================ */
#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(250, 251, 247, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#loading-overlay p {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-body);
  letter-spacing: 0.01em;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 2.5px solid var(--border-soft);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ============================================================================
   5. App shell
   ============================================================================ */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--surface-base);
}


/* ============================================================================
   6. Header
   ============================================================================ */
#app-header {
  height: var(--header-h);
  min-height: var(--header-h);
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: linear-gradient(180deg, var(--primary-dark) 0%, #17361F 100%);
  color: var(--text-onprimary);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 100;
  position: relative;
}

@supports (backdrop-filter: blur(12px)) {
  #app-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 15% 50%, rgba(212, 165, 116, 0.08), transparent 50%);
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.header-logo {
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
}

.header-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.header-title {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.header-subtitle {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}

.header-right {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ---- Search input ---- */
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

#search-input {
  width: 260px;
  height: 36px;
  padding: 0 14px 0 36px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 400;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

#search-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

#search-input:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

#search-input:focus {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(212, 165, 116, 0.7);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(212, 165, 116, 0.18);
}


/* ============================================================================
   7. Search dropdown
   ============================================================================ */
.search-dropdown,
#search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-1);
  scrollbar-width: thin;
}

.search-dropdown-item,
.search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 9px 12px;
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.search-dropdown-item:hover,
.search-item:hover {
  background: var(--surface-hover);
}

.search-item-name,
.search-dropdown-item > span:first-child {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-primary);
}

.city-type-small,
.search-item-type {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--surface-sunken);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.search-no-result {
  padding: var(--space-4);
  font-size: var(--fs-body);
  color: var(--text-muted);
  text-align: center;
}


/* ============================================================================
   8. Tab navigation
   ============================================================================ */
#tab-nav {
  height: var(--tab-h);
  min-height: var(--tab-h);
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  padding: 0 var(--space-6);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-soft);
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 90;
}

#tab-nav::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
}

.tab-btn::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 2px 2px 0 0;
  transition: background var(--transition);
}

.tab-btn:hover {
  color: var(--text-body);
}

.tab-btn.active {
  color: var(--primary);
  font-weight: 600;
}

.tab-btn.active::after {
  background: var(--primary);
}

.tab-icon {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.tab-label {
  letter-spacing: -0.01em;
}


/* ============================================================================
   9. Main layout
   ============================================================================ */
#main-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-base);
}


/* ============================================================================
   10. Map container
   ============================================================================ */
#map-container {
  flex: 0 0 55%;
  position: relative;
  background: #E8EEE4;
  overflow: hidden;
  border-right: 1px solid var(--border-soft);
}

#map {
  width: 100%;
  height: 100%;
  background: #EEF2EA;
}

/* ---- Indicator selector overlay (top-left) ---- */
#indicator-selector-wrapper {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 220px;
}

.selector-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

#indicator-selector {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A524E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px;
}

/* ---- Static legend (bottom-left, HTML-defined) ---- */
#legend-container {
  position: absolute;
  bottom: 24px;
  left: var(--space-4);
  z-index: 500;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-md);
  min-width: 160px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.legend-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.legend-scale {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.legend-bar {
  height: 8px;
  width: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, #E6EFE9, var(--primary-light), var(--primary), var(--primary-dark));
}

.legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-body);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* ---- Leaflet map-legend (JS-injected) ---- */
.map-legend {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow-md);
  font-family: var(--font);
  font-size: var(--fs-xs);
  color: var(--text-body);
  min-width: 140px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.map-legend .legend-title {
  margin-bottom: 8px;
}

.legend-gradient {
  margin-bottom: 8px;
}

.legend-gradient:last-child {
  margin-bottom: 0;
}

.legend-bar.samlter-bar {
  background: linear-gradient(to right, var(--samlter-soft), var(--samlter));
  height: 6px;
  border-radius: var(--radius-pill);
}

.legend-bar.ilter-bar {
  background: linear-gradient(to right, var(--ilter-soft), var(--ilter));
  height: 6px;
  border-radius: var(--radius-pill);
}

.legend-bar.shimter-bar {
  background: linear-gradient(to right, var(--shimter-soft), var(--shimter));
  height: 6px;
  border-radius: var(--radius-pill);
}

.legend-bar.composite-bar {
  background: linear-gradient(to right, #F5F5F5, #1B4332);
  height: 6px;
  border-radius: var(--radius-pill);
}

.legend-cat {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
}

/* 5?④퀎 遺꾨쪟 踰붾? */
.legend-class-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 10px;
}

.legend-class-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.legend-class-range {
  color: var(--text-secondary);
  min-width: 60px;
}

.legend-class-label {
  color: var(--text-muted);
  font-weight: 500;
}

/* ?됱젙???댄똻 */
.dong-tooltip {
  background: rgba(255,255,255,0.85);
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 10px;
  padding: 2px 6px;
  color: #333;
}


/* ============================================================================
   11. Detail panel (right aside)
   ============================================================================ */
#detail-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#detail-panel::-webkit-scrollbar {
  width: 6px;
}
#detail-panel::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-pill);
}

/* ---- Empty state (before any city is selected) ---- */
#no-selection-msg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  background:
    radial-gradient(circle at 50% 30%, var(--primary-soft) 0%, transparent 60%),
    var(--surface-card);
}

.no-selection-inner {
  text-align: center;
  max-width: 360px;
}

.no-selection-icon {
  font-size: 56px;
  margin-bottom: var(--space-4);
  opacity: 0.85;
  filter: grayscale(20%);
}

.no-selection-inner h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
}

.no-selection-inner p {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.hint-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.hint-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.hint-card:hover {
  border-color: var(--border);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.hint-card .hint-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}

.hint-card small {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  letter-spacing: -0.005em;
}


/* ============================================================================
   12. City detail ??header
   ============================================================================ */
#city-detail {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#city-header {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background:
    linear-gradient(135deg, var(--primary-dark) 0%, #234D33 55%, #2D5F3F 100%);
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

#city-header::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(212, 165, 116, 0.16), transparent 65%);
  pointer-events: none;
}

.city-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  position: relative;
}

#city-title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.city-badge,
#city-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* Legacy type variants (HTML-defined) */
.city-badge.type-?띿큿??{
  background: rgba(91, 140, 90, 0.28);
  border-color: rgba(198, 215, 195, 0.5);
}
.city-badge.type-?꾨냽蹂듯빀 {
  background: rgba(212, 165, 116, 0.25);
  border-color: rgba(212, 165, 116, 0.5);
}
.city-badge.type-?꾩떆??{
  background: rgba(62, 124, 177, 0.25);
  border-color: rgba(199, 218, 234, 0.5);
}

/* JS-driven classes (#city-type-badge receives type-special/type-normal) */
.city-type-badge.type-special {
  background: rgba(212, 165, 116, 0.28);
  border-color: rgba(212, 165, 116, 0.55);
  color: #fff;
}
.city-type-badge.type-normal {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.city-meta-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  position: relative;
}

.city-score-label,
#city-score-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.city-total-score,
#city-total-score {
  font-size: var(--fs-hero);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-left: var(--space-1);
}

.city-score-unit {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.65);
  font-weight: 400;
  margin-left: 2px;
}

.city-rank-badge,
#city-rank-badge {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.01em;
  align-self: center;
}


/* ============================================================================
   13. Radar chart card
   ============================================================================ */
#radar-chart-container {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  background: var(--surface-card);
  position: relative;
}

#radar-chart-container canvas,
#radar-canvas {
  max-height: 280px !important;
  max-width: 100% !important;
  height: 280px !important;
  width: 100% !important;
  display: block;
}


/* ============================================================================
   14. Score cards (static 3-up + dynamic variant from app.js)
   ============================================================================ */

/* ---- Static grid (HTML-defined) ---- */
#score-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-card);
  flex-shrink: 0;
}

.score-card {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.score-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--border);
}

.score-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}

.score-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.score-card-icon {
  font-size: 14px;
  line-height: 1;
}

.score-card-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.score-card-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.score-card-rank {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

/* Category accent stripes on left edge */
.score-card--samlter::before { background: var(--samlter); }
.score-card--samlter .score-card-label { color: var(--samlter-dark); }
.score-card--samlter .score-card-value { color: var(--samlter-dark); }

.score-card--ilter::before { background: var(--ilter); }
.score-card--ilter .score-card-label { color: var(--ilter-dark); }
.score-card--ilter .score-card-value { color: var(--ilter-dark); }

.score-card--shimter::before { background: var(--shimter); }
.score-card--shimter .score-card-label { color: var(--shimter-dark); }
.score-card--shimter .score-card-value { color: var(--shimter-dark); }

/* ---- Dynamic variant (app.js innerHTML into #score-cards) ----
   updateScoreCards() replaces the inner HTML with .score-overall + .score-category-grid */
.score-overall {
  grid-column: 1 / -1;
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--primary-dark), #234D33);
  color: #fff;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.score-overall::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(212, 165, 116, 0.15), transparent 60%);
  pointer-events: none;
}

.score-overall-value {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}

.score-unit {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.75;
  margin-left: 4px;
}

.score-overall-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.72;
  margin-top: 6px;
}

.score-rank {
  font-size: var(--fs-sm);
  opacity: 0.85;
  margin-top: 4px;
}

.score-category-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.score-samlter,
.score-ilter,
.score-shimter {
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.score-samlter::before,
.score-ilter::before,
.score-shimter::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.score-samlter::before { background: var(--samlter); }
.score-ilter::before   { background: var(--ilter); }
.score-shimter::before { background: var(--shimter); }

.score-samlter:hover,
.score-ilter:hover,
.score-shimter:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.score-samlter .score-card-label,
.score-ilter   .score-card-label,
.score-shimter .score-card-label {
  display: block;
  text-align: center;
  margin-bottom: 6px;
}

.score-samlter .score-card-value { color: var(--samlter-dark); font-size: 24px; }
.score-ilter   .score-card-value { color: var(--ilter-dark);   font-size: 24px; }
.score-shimter .score-card-value { color: var(--shimter-dark); font-size: 24px; }


/* ============================================================================
   15. Section titles & indicator filter tabs
   ============================================================================ */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.section-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.indicator-filter-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}

.indicator-filter-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition);
  letter-spacing: -0.005em;
}

.indicator-filter-btn:hover {
  color: var(--text-primary);
}

.indicator-filter-btn.active {
  background: var(--surface-card);
  color: var(--primary);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}


/* ============================================================================
   16. Indicator list
   ============================================================================ */
#indicator-list-section {
  padding: var(--space-5) var(--space-6);
  flex: 1;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-card);
}

#indicator-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.no-city-msg {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--fs-body);
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-radius: var(--radius);
  border: 1px dashed var(--border);
}

/* Indicator card ??covers both HTML-static (.indicator-card) and JS-injected (.indicator-item) */
.indicator-card,
.indicator-item {
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  cursor: pointer;  /* 클릭 → 지표 탐색 페이지 열기 */
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.indicator-card:hover,
.indicator-item:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.indicator-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Static ID badge (.indicator-id) */
.indicator-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.indicator-id.samlter { background: var(--samlter-soft); color: var(--samlter-dark); }
.indicator-id.ilter   { background: var(--ilter-soft);   color: var(--ilter-dark); }
.indicator-id.shimter { background: var(--shimter-soft); color: var(--shimter-dark); }

/* Dynamic key badge (.indicator-key) ??JS sets inline background/color */
.indicator-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.indicator-name {
  flex: 1;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

/* Rank badges */
.indicator-rank,
.indicator-rank-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.indicator-rank-badge {
  margin-left: auto;
}

.rank-high { background: var(--success-soft); color: var(--success); }
.rank-mid  { background: var(--warning-soft); color: var(--warning); }
.rank-low  { background: var(--danger-soft);  color: var(--danger); }

/* Value row (dynamic template) */
.indicator-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-2) 0 6px;
}

.indicator-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.indicator-range {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Progress bars ??covers .indicator-bar (static) and .indicator-bar-bg (dynamic) */
.indicator-bar,
.indicator-bar-bg {
  height: 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 6px;
}

.indicator-fill,
.indicator-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 600ms var(--ease);
}

.samlter-fill { background: var(--samlter); }
.ilter-fill   { background: var(--ilter); }
.shimter-fill { background: var(--shimter); }

.indicator-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.data-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.status-local {
  background: rgba(45, 95, 63, 0.12);
  color: var(--primary);
}
.status-kosis,
.status-sgis {
  background: rgba(74, 144, 217, 0.14);
  color: var(--samlter);
}
.status-computed {
  background: rgba(82, 168, 102, 0.16);
  color: var(--shimter);
}
.status-manual,
.status-partial,
.status-local_only {
  background: rgba(232, 164, 74, 0.18);
  color: var(--ilter);
}
.status-mock,
.status-not_collected,
.status-local_parse_failed {
  background: rgba(120, 120, 120, 0.13);
  color: var(--text-muted);
}
.status-field_survey {
  background: rgba(132, 80, 185, 0.14);
  color: #6c3aa0;
}
.status-not_available {
  background: rgba(180, 70, 70, 0.13);
  color: #a33f3f;
}


/* ============================================================================
   17. Buttons
   ============================================================================ */

/* Primary CTA */
#add-comparison-wrapper {
  padding: var(--space-5) var(--space-6) var(--space-6);
  flex-shrink: 0;
  background: var(--surface-card);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px var(--space-5);
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    background var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.btn-primary svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  background: var(--primary-dark);
  box-shadow: var(--shadow-xs);
}

/* Secondary */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px var(--space-4);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: var(--fs-body);
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-secondary:active {
  background: var(--surface-sunken);
}


/* ============================================================================
   18. Scenario panel
   ============================================================================ */
#scenario-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-card);
  overflow-y: auto;
}

.scenario-header h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}

.scenario-desc,
.scenario-guide {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: 1.65;
}

.scenario-guide {
  margin-bottom: var(--space-4);
}

#scenario-city-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--primary-soft);
  border: 1px solid rgba(45, 95, 63, 0.15);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
}

.scenario-city-label {
  font-size: var(--fs-xs);
  color: var(--primary-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scenario-city-name,
#scenario-city-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
}

/* ---- Slider groups ---- */
#scenario-sliders,
.scenario-levers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.slider-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
  margin-top: var(--space-2);
}

.scenario-slider-group,
.scenario-lever {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.scenario-slider-group:hover,
.scenario-lever:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

.slider-header,
.lever-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.slider-header label,
.lever-label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  cursor: default;
}

.slider-value,
.lever-value-display {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--primary);
  min-width: 64px;
  text-align: right;
  padding: 2px 10px;
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
}

/* ---- Custom range input ---- */
.scenario-range,
.lever-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-soft);
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background var(--transition);
}

.scenario-range:hover,
.lever-slider:hover {
  background: var(--border);
}

.scenario-range::-webkit-slider-thumb,
.lever-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.scenario-range::-webkit-slider-thumb:hover,
.lever-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-md);
}

.scenario-range::-webkit-slider-thumb:active,
.lever-slider::-webkit-slider-thumb:active {
  transform: scale(1.06);
  background: var(--primary);
}

.scenario-range::-moz-range-thumb,
.lever-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.scenario-range::-moz-range-track,
.lever-slider::-moz-range-track {
  background: var(--border-soft);
  height: 4px;
  border-radius: var(--radius-pill);
}

.slider-track-labels,
.lever-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 6px;
  letter-spacing: 0.01em;
}

.slider-desc,
.lever-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 8px;
  font-style: normal;
}

/* ---- Before / After charts ---- */
.scenario-charts,
.scenario-charts-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.scenario-chart-box,
.scenario-chart-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.scenario-chart-box canvas,
.scenario-chart-block canvas {
  max-width: 100%;
  max-height: 200px;
}

.scenario-chart-label,
.scenario-chart-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-align: center;
}

.scenario-chart-title {
  background: transparent;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 2px;
  font-size: var(--fs-xs);
}

.before-label {
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
}

.after-label {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid rgba(45, 95, 63, 0.18);
}

.scenario-arrow {
  font-size: 22px;
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
  align-self: center;
  opacity: 0.7;
}

/* ---- Summary (delta) cards ---- */
#scenario-summary {
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.scenario-summary-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.scenario-delta-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.delta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) 6px;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.delta-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.delta-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.delta-value {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.delta-samlter { background: var(--samlter-soft); border-color: var(--samlter-tint); }
.delta-samlter .delta-value { color: var(--samlter-dark); }

.delta-ilter { background: var(--ilter-soft); border-color: var(--ilter-tint); }
.delta-ilter .delta-value { color: var(--ilter-dark); }

.delta-shimter { background: var(--shimter-soft); border-color: var(--shimter-tint); }
.delta-shimter .delta-value { color: var(--shimter-dark); }

.delta-total { background: var(--primary-soft); border-color: rgba(45, 95, 63, 0.18); }
.delta-total .delta-value { color: var(--primary-dark); }

/* ---- Delta table (dynamic) ---- */
.scenario-delta-table {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.delta-title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: -0.005em;
}

.delta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.delta-table th {
  padding: 8px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-soft);
}

.delta-table th:nth-child(n+3) {
  text-align: right;
}

.delta-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-body);
}

.delta-table td:nth-child(n+3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.delta-table tbody tr:last-child td {
  border-bottom: none;
}

.delta-table tbody tr:hover {
  background: var(--surface-hover);
}

.delta-changed {
  background: var(--accent-soft);
}

.delta-changed:hover {
  background: #F0DEC0 !important;
}

.delta-pos {
  color: var(--success);
  font-weight: 700;
}

.delta-neg {
  color: var(--danger);
  font-weight: 700;
}

.delta-key {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--primary);
  font-size: var(--fs-xs);
}

.delta-name {
  font-weight: 500;
  color: var(--text-primary);
}

.delta-before,
.delta-after {
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

/* Scenario action buttons */
.scenario-actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.scenario-actions .btn-secondary {
  flex: 1;
}

.scenario-actions .btn-primary {
  flex: 2;
}


/* ============================================================================
   19. Namyangju?れ쑉吏€??section
   ============================================================================ */
.namyangju-section {
  margin: var(--space-4) var(--space-6);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--accent-soft) 0%, #F9F1E2 100%);
  border: 1px solid rgba(212, 165, 116, 0.3);
  border-radius: var(--radius-lg);
  position: relative;
}

.namyangju-section::before {
  content: '??;
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  color: var(--accent);
  font-size: 14px;
  opacity: 0.6;
}

.namyangju-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(212, 165, 116, 0.25);
}

/* Override .section-title color when combined with .namyangju-title */
.section-title.namyangju-title {
  color: var(--accent-dark);
}

.namyangju-indicator-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.namyangju-ind-card {
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  border-left-width: 3px;
  border-left-style: solid;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}

.namyangju-ind-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.namyangju-ind-key {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.namyangju-ind-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.namyangju-ind-value {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.namyangju-ind-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.01em;
}


/* ============================================================================
   19-b. Jayul (자율지표) section — 15시군 공통 (남양주 전용 → 일반화)
   ============================================================================ */
.jayul-section {
  margin: var(--space-4) var(--space-6);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--accent-soft) 0%, #F9F1E2 100%);
  border: 1px solid rgba(212, 165, 116, 0.3);
  border-radius: var(--radius-lg);
  position: relative;
}
.jayul-section::before {
  content: '🎯';
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  font-size: 14px;
  opacity: 0.6;
}
.jayul-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(212, 165, 116, 0.25);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.section-title.jayul-title {
  color: var(--accent-dark);
}
.jayul-count-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(212, 165, 116, 0.18);
  color: var(--accent-dark);
  letter-spacing: 0.01em;
}
.jayul-help-text {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-3) 0;
}

.jayul-indicator-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

/* 카드 베이스 */
.jayul-ind-card {
  --cat-color: #666;
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--cat-color);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  position: relative;
  cursor: pointer;  /* 클릭 → 지표 탐색 페이지 열기 */
}
.jayul-ind-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* 선정된 카드: 진한 색 + 그림자 */
.jayul-ind-card.is-selected {
  background: #fff;
  box-shadow: 0 2px 8px rgba(45, 95, 63, 0.12);
}

/* 후보 카드: 회색조 + 약간 흐리게 */
.jayul-ind-card.is-candidate {
  background: rgba(255, 255, 255, 0.55);
  opacity: 0.7;
  filter: grayscale(0.25);
}
.jayul-ind-card.is-candidate:hover {
  opacity: 0.95;
  filter: grayscale(0);
}

.jayul-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.jayul-ind-key {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cat-color);
}

.jayul-state-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.jayul-state-badge.selected {
  background: rgba(45, 95, 63, 0.12);
  color: var(--primary);
}
.jayul-state-badge.candidate {
  background: rgba(120, 120, 120, 0.12);
  color: var(--text-muted);
}

.jayul-ind-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.jayul-ind-value {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.jayul-ind-source {
  display: flex;
  margin-top: 6px;
}
.jayul-ind-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.01em;
}

.field-survey-section {
  margin: var(--space-5) var(--space-6);
  padding: var(--space-4);
  border: 1px solid rgba(132, 80, 185, 0.16);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(132, 80, 185, 0.06), rgba(255, 255, 255, 0.92));
}

.field-survey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.field-survey-head h3 {
  margin: 0 0 4px 0;
  font-family: 'Noto Serif KR', serif;
  font-size: var(--fs-md);
  color: var(--primary);
}

.field-survey-head p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.field-survey-count {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(132, 80, 185, 0.12);
  color: #6c3aa0;
  font-size: 10px;
  font-weight: 700;
}

.field-survey-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.field-survey-card {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid rgba(132, 80, 185, 0.10);
  box-shadow: var(--shadow-xs);
}

.field-survey-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 6px;
}

.field-survey-category {
  font-size: 10px;
  font-weight: 700;
  color: #6c3aa0;
}

.field-survey-card h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

.field-survey-card dl {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 4px 8px;
  margin: 0 0 var(--space-2) 0;
  font-size: 11px;
  line-height: 1.45;
}

.field-survey-card dt {
  color: var(--text-muted);
  font-weight: 700;
}

.field-survey-card dd {
  margin: 0;
  color: var(--text-body);
}

.field-survey-card details {
  font-size: 11px;
  color: var(--text-body);
}

.field-survey-card summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
}

.field-survey-card details p {
  margin: var(--space-2) 0 0;
  line-height: 1.55;
}


/* ============================================================================
   20. Comparison section (bottom collapsible)
   ============================================================================ */
#comparison-section {
  flex-shrink: 0;
  background: var(--surface-card);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -2px 8px rgba(27, 62, 42, 0.04);
  z-index: 80;
}

.comparison-header,
#comparison-header {
  height: var(--comparison-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  user-select: none;
}

.comparison-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.comparison-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

.comparison-title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  flex-shrink: 0;
}

#comparison-cities {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}

#comparison-cities::-webkit-scrollbar {
  display: none;
}

.comparison-empty-msg,
.no-comparison {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  font-style: normal;
  font-weight: 400;
}

/* ---- City tag chips (both .city-tag and .comparison-city-tag) ---- */
.city-tag,
.comparison-city-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid rgba(45, 95, 63, 0.18);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
}

.city-tag:hover,
.comparison-city-tag:hover {
  background: #DCE8E0;
  border-color: rgba(45, 95, 63, 0.3);
}

.city-tag .remove-tag-btn,
.remove-comparison-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--primary-dark);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity var(--transition),
    background var(--transition),
    color var(--transition);
}

.city-tag .remove-tag-btn:hover,
.remove-comparison-btn:hover {
  opacity: 1;
  background: rgba(184, 69, 61, 0.12);
  color: var(--danger);
}

/* ---- Add-city button (compact pill) ---- */
.btn-add-city,
#add-city-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px 5px 10px;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-xs);
  transition:
    background var(--transition),
    box-shadow var(--transition);
}

.btn-add-city svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

.btn-add-city:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-sm);
}

.btn-add-city:active {
  background: var(--primary-dark);
}

/* ---- Toggle button ---- */
.comparison-toggle-btn,
#comparison-toggle-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--transition),
    border-color var(--transition);
}

.comparison-toggle-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border);
}

.toggle-arrow {
  width: 14px;
  height: 14px;
  stroke: var(--text-body);
  transition: transform var(--transition);
}

#comparison-section.expanded .toggle-arrow {
  transform: rotate(180deg);
}

/* ---- Body ---- */
.comparison-body,
#comparison-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-soft);
}

.comparison-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-body);
}

.comparison-controls label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.comparison-controls select,
#comparison-indicator {
  padding: 6px 28px 6px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A524E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  transition: border-color var(--transition);
}

.comparison-controls select:hover,
#comparison-indicator:hover {
  border-color: var(--border-strong);
}

.comparison-controls select:focus,
#comparison-indicator:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

#comparison-chart-container {
  position: relative;
  height: 220px;
  padding: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

#comparison-canvas {
  width: 100% !important;
  height: 100% !important;
}

.comparison-empty,
#comparison-empty {
  position: absolute;
  inset: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}


/* ============================================================================
   21. Leaflet overrides
   ============================================================================ */
.leaflet-container {
  font-family: var(--font) !important;
  background: #EEF2EA !important;
  outline: none !important;
}

.leaflet-container:focus,
.leaflet-container *:focus {
  outline: none !important;
}

.leaflet-container a {
  color: var(--primary) !important;
}

/* Attribution */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.85) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-xs) 0 0 0 !important;
  font-family: var(--font) !important;
}

.leaflet-control-attribution a {
  color: var(--text-body) !important;
}

/* Zoom control */
.leaflet-bar {
  box-shadow: var(--shadow-md) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}

.leaflet-bar a,
.leaflet-bar a:hover {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  transition: background var(--transition) !important;
}

.leaflet-bar a:hover {
  background: var(--surface-hover) !important;
  color: var(--primary) !important;
}

.leaflet-bar a:last-child {
  border-bottom: none !important;
}

/* Popups */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border-soft) !important;
  padding: 2px !important;
  background: var(--surface-card) !important;
}

.leaflet-popup-content {
  margin: 10px 14px !important;
  font-size: var(--fs-body) !important;
  font-family: var(--font) !important;
  line-height: 1.5 !important;
  color: var(--text-primary) !important;
}

.leaflet-popup-tip {
  background: var(--surface-card) !important;
  box-shadow: var(--shadow-sm) !important;
}

.leaflet-popup-close-button {
  color: var(--text-muted) !important;
  padding: 4px 8px !important;
  font-size: 18px !important;
  transition: color var(--transition);
}

.leaflet-popup-close-button:hover {
  color: var(--text-primary) !important;
  background: transparent !important;
}

/* Tooltips (both .map-tooltip and .city-tooltip) */
.map-tooltip,
.leaflet-tooltip.city-tooltip,
.city-tooltip.leaflet-tooltip {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  box-shadow: var(--shadow-md) !important;
  white-space: nowrap;
}

.map-tooltip::before,
.city-tooltip.leaflet-tooltip::before,
.leaflet-tooltip.city-tooltip::before {
  display: none !important;
}


/* ============================================================================
   22. Responsive
   ============================================================================ */
@media (max-width: 1280px) {
  #indicator-selector-wrapper {
    min-width: 200px;
  }

  #search-input {
    width: 220px;
  }

  .scenario-delta-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  #map-container {
    flex: 0 0 50%;
  }

  #city-header {
    padding: var(--space-5);
  }

  #city-title {
    font-size: var(--fs-2xl);
  }

  .city-total-score,
  #city-total-score {
    font-size: var(--fs-3xl);
  }
}

@media (max-width: 768px) {
  :root {
    --header-h: 56px;
    --tab-h: 44px;
    --comparison-h: 44px;
  }

  html,
  body {
    overflow: auto;
  }

  #app {
    height: auto;
    min-height: 100vh;
  }

  #app-header {
    padding: 0 var(--space-4);
  }

  .header-title {
    font-size: var(--fs-body);
  }

  .header-subtitle {
    display: none;
  }

  #search-input {
    width: 160px;
  }

  #tab-nav {
    padding: 0 var(--space-4);
  }

  #main-layout {
    flex-direction: column;
    overflow: visible;
  }

  #map-container {
    flex: none;
    height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }

  #detail-panel {
    flex: none;
    height: auto;
    overflow-y: visible;
  }

  #city-header {
    padding: var(--space-5) var(--space-4);
  }

  #score-cards {
    grid-template-columns: repeat(3, 1fr);
    padding: var(--space-4);
    gap: var(--space-2);
  }

  .score-category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  #radar-chart-container,
  #indicator-list-section {
    padding: var(--space-4);
  }

  .scenario-delta-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .scenario-charts,
  .scenario-charts-wrapper {
    flex-direction: column;
    gap: var(--space-3);
  }

  .scenario-arrow {
    transform: rotate(90deg);
  }

  #comparison-chart-container {
    height: 180px;
  }

  .namyangju-section,
  .jayul-section {
    margin: var(--space-4);
    padding: var(--space-4);
  }

  .jayul-indicator-grid {
    grid-template-columns: 1fr;
  }

  .namyangju-indicator-grid {
    grid-template-columns: 1fr;
  }

  .tab-label {
    display: none;
  }

  .tab-btn {
    padding: 0 var(--space-3);
  }

  .tab-icon {
    font-size: 18px;
  }

  #scenario-panel {
    padding: var(--space-4);
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  #search-input {
    width: 130px;
  }

  #city-title {
    font-size: var(--fs-xl);
  }

  .city-total-score,
  #city-total-score {
    font-size: 28px;
  }

  .score-card-value {
    font-size: 22px;
  }

  .hint-cards {
    gap: 6px;
  }

  .hint-card {
    padding: var(--space-3) 6px;
  }

  .scenario-delta-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .scenario-actions {
    flex-direction: column;
  }

  .scenario-actions .btn-primary,
  .scenario-actions .btn-secondary {
    flex: none;
    width: 100%;
  }

  .comparison-header {
    padding: 0 var(--space-3);
  }
}

/* ============================================================================
   23. Landing screen ??Portal v2 (Bento + Hero)
   ============================================================================ */

/* ---- ?ㅽ봽?덉엫 ---- */
@keyframes landing-glow-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.12); }
}
@keyframes landing-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes landing-exit {
  from { opacity: 1; transform: translateY(0)    scale(1);    }
  to   { opacity: 0; transform: translateY(-12px) scale(0.985); }
}
@keyframes landing-pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.4; transform: scale(1.6); }
}
@keyframes landing-card-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%);  }
}

/* ---- ?ㅻ쾭?덉씠 ---- */
#landing-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background:
    radial-gradient(ellipse at 25% 0%,  rgba(45, 95, 63, 0.55)   0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(212, 165, 116, 0.18) 0%, transparent 50%),
    linear-gradient(155deg, #0A1F12 0%, #122B1B 45%, #0F2415 100%);
  overflow: hidden;
  font-family: 'Noto Sans KR', sans-serif;
  color: rgba(255, 255, 255, 0.92);
}
#landing-screen.is-hidden  { display: none !important; }
#landing-screen.is-exiting {
  animation: landing-exit 0.55s cubic-bezier(.4, 0, .2, 1) forwards;
  pointer-events: none;
}

/* ---- 諛곌꼍 湲€濡쒖슦 / 洹몃━??---- */
.landing-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.landing-bg-glow--1 {
  width: 680px; height: 680px;
  top: -180px; left: -120px;
  background: radial-gradient(circle, rgba(60, 130, 85, 0.65) 0%, transparent 70%);
  animation: landing-glow-pulse 9s ease-in-out infinite;
}
.landing-bg-glow--2 {
  width: 560px; height: 560px;
  bottom: -120px; right: -100px;
  background: radial-gradient(circle, rgba(212, 165, 116, 0.32) 0%, transparent 70%);
  animation: landing-glow-pulse 12s ease-in-out infinite reverse;
  animation-delay: -3s;
}
.landing-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* ---- ?ㅽ겕濡??섑띁 ---- */
.landing-scroll-wrap {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.landing-portal {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 56px 64px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ---- ?ㅽ깭嫄??좊땲硫붿씠??---- */
.landing-anim {
  opacity: 0;
  animation: landing-fade-up 0.65s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(0.1s + var(--anim-order) * 0.13s);
}

/* ---- ?곷떒 ?ㅻ퉬 ---- */
.landing-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.landing-nav-brand {
  display: flex; align-items: center; gap: 12px;
}
.landing-nav-logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  backdrop-filter: blur(8px);
}
.landing-nav-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.88);
}
.landing-nav-links {
  display: flex; gap: 4px;
}
.landing-nav-link {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms ease;
  font-family: inherit;
}
.landing-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ---- ?덉뼱濡?---- */
.landing-hero-v2 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 520px;
  padding: 24px 0 8px;
}

/* 醫뚯륫 移댄뵾 */
.landing-hero-left {
  display: flex; flex-direction: column;
  gap: 22px;
}
.landing-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(212, 165, 116, 0.12);
  border: 1px solid rgba(212, 165, 116, 0.32);
  color: #E5C19A;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  width: fit-content;
}
.landing-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #E5C19A;
  box-shadow: 0 0 8px rgba(212, 165, 116, 0.7);
  animation: landing-pulse-dot 2.4s ease-in-out infinite;
}
.landing-headline {
  font-family: 'Noto Serif KR', serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.landing-headline-accent {
  background: linear-gradient(135deg, #E5C19A 0%, #D4A574 60%, #B88C5A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}
.landing-sub {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 460px;
}
.landing-sub strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.landing-cta-row {
  display: flex; gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.landing-cta-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3F8B5C 0%, #2D5F3F 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 6px 24px rgba(45, 95, 63, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  font-family: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.landing-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 32px rgba(45, 95, 63, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.landing-cta-primary .landing-cta-arrow {
  transition: transform 180ms ease;
}
.landing-cta-primary:hover .landing-cta-arrow {
  transform: translateX(4px);
}
.landing-cta-secondary {
  padding: 14px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 180ms ease;
}
.landing-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* ── 보조 primary 버튼 (지표별로 보기) — 골든 액센트 ── */
.landing-cta-primary--alt {
  background: linear-gradient(135deg, #E8C088 0%, #D4A574 60%, #B5874A 100%);
  color: #2A1F12;
  box-shadow:
    0 6px 24px rgba(180, 130, 70, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.landing-cta-primary--alt:hover {
  box-shadow:
    0 10px 32px rgba(180, 130, 70, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ── 작은 hint 텍스트 링크 (기능 둘러보기) ── */
.landing-cta-hint {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.18s ease;
}
.landing-cta-hint:hover {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.landing-cta-hint:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

/* ?곗륫 KPI + 誘몃땲留?*/
.landing-hero-right {
  display: flex; flex-direction: column;
  gap: 24px;
}
.landing-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.landing-kpi {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
  backdrop-filter: blur(12px);
}
.landing-kpi-num {
  display: block;
  font-family: 'Noto Serif KR', serif;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, #E5C19A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-feature-settings: 'tnum';
}
.landing-kpi-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
}
.landing-minimap-wrap {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 18px 18px 14px;
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.landing-minimap-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.landing-minimap-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5BCB8E;
  box-shadow: 0 0 10px rgba(91, 203, 142, 0.7);
  animation: landing-pulse-dot 2s ease-in-out infinite;
}
#landing-minimap {
  width: 100%; height: 240px;
  display: block;
}
#landing-minimap path.minimap-region {
  fill: rgba(212, 165, 116, 0.18);
  stroke: rgba(212, 165, 116, 0.55);
  stroke-width: 1;
  transition: fill 160ms ease, stroke 160ms ease;
  cursor: default;
}
#landing-minimap path.minimap-region:hover {
  fill: rgba(212, 165, 116, 0.55);
  stroke: #E5C19A;
}
.landing-minimap-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(15, 36, 21, 0.92);
  border: 1px solid rgba(212, 165, 116, 0.4);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 120ms ease;
  white-space: nowrap;
  z-index: 5;
}
.landing-minimap-tooltip.is-visible { opacity: 1; }

/* ---- 鍮좊Ⅸ 吏꾩엯 (Bento) ---- */
.landing-bento { display: flex; flex-direction: column; gap: 22px; }
.landing-section-head {
  display: flex; align-items: baseline;
  gap: 14px;
}
.landing-section-title {
  font-family: 'Noto Serif KR', serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.landing-section-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.landing-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 220px 220px;
  gap: 16px;
}

/* 移대뱶 踰좎씠??*/
.bento-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px 22px 22px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
  color: inherit;
  display: flex; flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(12px);
  transition:
    transform 220ms cubic-bezier(.4, 0, .2, 1),
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}
.bento-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
  z-index: 1;
}
.bento-card:hover::before {
  animation: landing-card-shimmer 1.1s ease-out;
}
.bento-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(212, 165, 116, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* 移대뱶 ?대? */
.bento-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex; align-items: center; justify-content: center;
}
.bento-icon { font-size: 22px; line-height: 1; }
.bento-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}
.bento-desc {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 92%;
}
.bento-arrow {
  position: absolute;
  bottom: 18px; right: 22px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.45);
  transition: transform 200ms ease, color 200ms ease;
}
.bento-card:hover .bento-arrow {
  color: #E5C19A;
  transform: translateX(4px);
}
.bento-badge {
  position: absolute;
  top: 18px; right: 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E5C19A, #D4A574);
  color: #2D1810;
  box-shadow: 0 2px 8px rgba(212, 165, 116, 0.4);
}

/* 移대뱶 洹몃━??諛곗튂 */
.bento-card--map      { grid-column: 1 / 3; grid-row: 1 / 2; }
.bento-card--compare  { grid-column: 3 / 4; grid-row: 1 / 2; }
.bento-card--scenario { grid-column: 1 / 2; grid-row: 2 / 3; }
.bento-card--ranking  { grid-column: 2 / 3; grid-row: 2 / 3; }
.bento-card--namyangju{ grid-column: 3 / 4; grid-row: 2 / 3; }

/* 移대뱶 ?됱“ */
.bento-card--map::after,
.bento-card--compare::after,
.bento-card--scenario::after,
.bento-card--ranking::after,
.bento-card--namyangju::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.7;
  transition: opacity 220ms ease;
}
.bento-card--map::after      { background: radial-gradient(circle at 90% 110%, rgba(91, 175, 220, 0.18), transparent 55%); }
.bento-card--compare::after  { background: radial-gradient(circle at 100% 100%, rgba(232, 168, 76, 0.18), transparent 55%); }
.bento-card--scenario::after { background: radial-gradient(circle at 0% 100%, rgba(220, 90, 70, 0.16), transparent 55%); }
.bento-card--ranking::after  { background: radial-gradient(circle at 50% 100%, rgba(212, 165, 116, 0.20), transparent 55%); }
.bento-card--namyangju::after{ background: radial-gradient(circle at 100% 0%, rgba(91, 203, 142, 0.20), transparent 55%); }
.bento-card:hover::after { opacity: 1; }

/* ?쇰윭: 吏€??移대뱶 移?*/
.bento-illust--map {
  position: absolute;
  bottom: 22px; right: 56px;
  display: flex; gap: 6px;
  z-index: 2;
}
.bento-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}
.bento-chip--samlter { background: rgba(91, 175, 220, 0.32); }
.bento-chip--ilter   { background: rgba(232, 168, 76, 0.32); }
.bento-chip--shimter { background: rgba(91, 203, 142, 0.32); }

/* ---- ?명꽣 ??---- */
.landing-footer-v2 {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0 4px;
  margin-top: 12px;
}
.landing-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 56px;
  justify-content: flex-start;
}
.landing-footer-cell {
  display: flex; flex-direction: column;
  gap: 4px;
}
.landing-footer-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.landing-footer-val {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

/* ---- ?좎뒪??---- */
.landing-toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 36, 21, 0.96);
  border: 1px solid rgba(212, 165, 116, 0.42);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.landing-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- 諛섏쓳??---- */
@media (max-width: 1024px) {
  .landing-portal { padding: 24px 36px 56px; gap: 44px; }
  .landing-hero-v2 { grid-template-columns: 1fr; gap: 36px; min-height: 0; }
  .landing-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 200px 200px 200px;
  }
  .bento-card--map      { grid-column: 1 / 3; grid-row: 1 / 2; }
  .bento-card--compare  { grid-column: 1 / 2; grid-row: 2 / 3; }
  .bento-card--scenario { grid-column: 2 / 3; grid-row: 2 / 3; }
  .bento-card--ranking  { grid-column: 1 / 3; grid-row: 3 / 4; }
  .bento-card--namyangju{ grid-column: 1 / 3; grid-row: 4 / 5; }
  .landing-bento-grid { grid-template-rows: 200px 200px 200px 200px; }
}
@media (max-width: 640px) {
  .landing-portal { padding: 18px 20px 40px; gap: 36px; }
  .landing-nav-title { display: none; }
  .landing-headline { font-size: 36px; }
  .landing-kpi-num { font-size: 30px; }
  .landing-bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 180px);
  }
  .bento-card--map, .bento-card--compare, .bento-card--scenario,
  .bento-card--ranking, .bento-card--namyangju {
    grid-column: 1 / 2;
  }
  .bento-card--map      { grid-row: 1 / 2; }
  .bento-card--compare  { grid-row: 2 / 3; }
  .bento-card--scenario { grid-row: 3 / 4; }
  .bento-card--ranking  { grid-row: 4 / 5; }
  .bento-card--namyangju{ grid-row: 5 / 6; }
  .landing-footer-row { gap: 18px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-anim,
  #landing-screen.is-exiting,
  .landing-bg-glow,
  .landing-tag-dot,
  .landing-minimap-pulse,
  .bento-card::before {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* ============================================================================
   23-b. Landing — WHY 섹션 + 6대 권역 섹션
   ============================================================================ */

/* ---- 공통: 섹션 헤드 (eyebrow + title) ---- */
.landing-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #E5C19A;
  background: rgba(212, 165, 116, 0.1);
  border: 1px solid rgba(212, 165, 116, 0.28);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.landing-why .landing-section-head,
.landing-zones .landing-section-head {
  display: block;
  text-align: center;
  margin-bottom: 28px;
}
.landing-why .landing-section-title,
.landing-zones .landing-section-title {
  font-size: 32px;
  margin-bottom: 10px;
}
.landing-why .landing-section-sub,
.landing-zones .landing-section-sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  max-width: 680px;
  margin: 0 auto;
}
.landing-why .landing-section-sub strong,
.landing-zones .landing-section-sub strong {
  color: #fff;
  font-weight: 600;
}

/* ---- WHY: 3대 기둥 카드 ---- */
.landing-why { display: flex; flex-direction: column; gap: 28px; }
.landing-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pillar {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
}
.pillar--samlter::before { background: linear-gradient(90deg, #5BAFDC, #3F8FBF); }
.pillar--ilter::before   { background: linear-gradient(90deg, #E8A84C, #C8843A); }
.pillar--shimter::before { background: linear-gradient(90deg, #5BCB8E, #3D9F6B); }

.pillar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.55;
  transition: opacity 220ms ease;
}
.pillar--samlter::after { background: radial-gradient(circle at 0% 100%, rgba(91, 175, 220, 0.18), transparent 55%); }
.pillar--ilter::after   { background: radial-gradient(circle at 0% 100%, rgba(232, 168, 76, 0.18), transparent 55%); }
.pillar--shimter::after { background: radial-gradient(circle at 0% 100%, rgba(91, 203, 142, 0.20), transparent 55%); }

.pillar:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}
.pillar:hover::after { opacity: 1; }

.pillar-head { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.pillar-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.pillar-tag-row { display: flex; flex-direction: column; gap: 3px; }
.pillar-tag {
  font-family: 'Noto Serif KR', serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
}
.pillar--samlter .pillar-tag { color: #8AC9E8; }
.pillar--ilter   .pillar-tag { color: #F0BE6E; }
.pillar--shimter .pillar-tag { color: #7DDCA8; }
.pillar-tag-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pillar-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 4px 0 0;
  letter-spacing: -0.02em;
}
.pillar-summary {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.pillar-section {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 4px;
}
.pillar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.pillar-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.pillar-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}
.pillar-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.pillar--samlter .pillar-list li::before { background: #5BAFDC; }
.pillar--ilter   .pillar-list li::before { background: #E8A84C; }
.pillar--shimter .pillar-list li::before { background: #5BCB8E; }

.pillar-effect {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  margin-top: 6px;
}
.pillar-effect-arrow {
  color: #E5C19A;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- 법적 근거 노트 ---- */
.landing-legal {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  background: rgba(212, 165, 116, 0.06);
  border: 1px solid rgba(212, 165, 116, 0.22);
  border-radius: 14px;
}
.landing-legal-icon { font-size: 22px; flex-shrink: 0; }
.landing-legal-text {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.landing-legal-text strong { color: #E5C19A; font-weight: 600; }

/* ---- 6대 권역 섹션 ---- */
.landing-zones { display: flex; flex-direction: column; gap: 24px; }
.landing-zones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.zone {
  position: relative;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(10px);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
  overflow: hidden;
}
.zone::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
}
.zone--north-border::before  { background: linear-gradient(180deg, #8FB8C9, #547589); }
.zone--south-farm::before    { background: linear-gradient(180deg, #E0B86A, #B0863C); }
.zone--west-coast::before    { background: linear-gradient(180deg, #6FB7C9, #3D8092); }
.zone--east-mountain::before { background: linear-gradient(180deg, #7DC4A0, #468B6E); }
.zone--urban-edge::before    { background: linear-gradient(180deg, #B69ACB, #785D8E); }

.zone {
  padding: 20px 22px 18px;
  gap: 10px;
}
.zone:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 165, 116, 0.32);
}
.zone-head {
  display: flex; align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}
.zone-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.zone-meta {
  display: flex; flex-direction: column;
  gap: 2px;
  flex: 1; min-width: 0;
}
.zone-name {
  font-family: 'Noto Serif KR', serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.zone-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.zone-cities {
  font-size: 13px;
  font-weight: 600;
  color: #E5C19A;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.01em;
  padding: 6px 10px;
  background: rgba(212, 165, 116, 0.08);
  border-radius: 6px;
  border-left: 2px solid rgba(212, 165, 116, 0.4);
}
.zone-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  line-height: 1.65;
  letter-spacing: -0.005em;
}
.zone-desc strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

/* 5개 권역 그리드: 3+2 비대칭 (3개 위, 2개 아래 가운데) */
.landing-zones-grid--5 {
  grid-template-columns: repeat(6, 1fr);
}
.landing-zones-grid--5 .zone:nth-child(1) { grid-column: 1 / 3; }
.landing-zones-grid--5 .zone:nth-child(2) { grid-column: 3 / 5; }
.landing-zones-grid--5 .zone:nth-child(3) { grid-column: 5 / 7; }
.landing-zones-grid--5 .zone:nth-child(4) { grid-column: 2 / 4; }
.landing-zones-grid--5 .zone:nth-child(5) { grid-column: 4 / 6; }

/* 인용 문구 (출처 표기) */
.landing-section-cite {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ---- 반응형 (WHY/Zones) ---- */
@media (max-width: 1024px) {
  .landing-pillars { grid-template-columns: 1fr; gap: 14px; }
  .landing-zones-grid,
  .landing-zones-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .landing-zones-grid--5 .zone:nth-child(1),
  .landing-zones-grid--5 .zone:nth-child(2),
  .landing-zones-grid--5 .zone:nth-child(3),
  .landing-zones-grid--5 .zone:nth-child(4),
  .landing-zones-grid--5 .zone:nth-child(5) { grid-column: auto; }
  .landing-zones-grid--5 .zone:nth-child(5) { grid-column: 1 / 3; }
  .landing-why .landing-section-title,
  .landing-zones .landing-section-title { font-size: 26px; }
}
@media (max-width: 640px) {
  .landing-zones-grid,
  .landing-zones-grid--5 { grid-template-columns: 1fr; }
  .landing-zones-grid--5 .zone:nth-child(5) { grid-column: 1 / 2; }
  .pillar { padding: 22px; }
  .landing-legal { flex-direction: column; gap: 8px; padding: 16px; }
  .landing-why .landing-section-title,
  .landing-zones .landing-section-title { font-size: 22px; }
}

/* ============================================================================
   24. Header brand 클릭 (랜딩 복귀) + 랜딩 복귀 애니메이션
   ============================================================================ */

/* 헤더 로고+타이틀 영역 — 버튼으로 변환 */
.header-brand-btn {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: opacity 160ms;
}
.header-brand-btn:hover { opacity: 0.82; }
.header-brand-btn:hover .header-title {
  color: #fff;
}
.header-brand-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 3px;
}

/* 랜딩 복귀 페이드-인 (애니메이션 재트리거) */
@keyframes landing-return-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#landing-screen.landing-screen--return {
  animation: landing-return-fade 0.38s ease forwards;
}

/* ── 헤더 "첫 화면" 복귀 버튼 ── */
.back-to-landing-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill, 9999px);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-xs, 12px);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms, border-color 160ms, color 160ms, transform 140ms;
  flex-shrink: 0;
}
.back-to-landing-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}
.back-to-landing-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  transform: translateY(-1px);
}
.back-to-landing-btn:active {
  transform: scale(0.97);
}

@media (max-width: 480px) {
  .back-to-landing-btn span { display: none; }
  .back-to-landing-btn { padding: 6px 8px; }
}

/* ============================================================================
   25. 시군 상세 패널 (미니맵 클릭)
   ============================================================================ */

@keyframes city-panel-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* 전체 패널 래퍼 (landing-screen 안, absolute) */
.landing-city-panel {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.landing-city-panel.is-open {
  pointer-events: all;
  opacity: 1;
}

/* 반투명 배경 */
.city-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

/* 카드 */
.city-panel-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(145deg, rgba(18, 42, 26, 0.95) 0%, rgba(12, 30, 18, 0.97) 100%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  padding: 28px 26px 24px;
  width: 100%;
  max-width: 500px;
  max-height: 82vh;
  overflow-y: auto;
  backdrop-filter: blur(20px);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.city-panel-card::-webkit-scrollbar { width: 4px; }
.city-panel-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* 닫기 버튼 */
.city-panel-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  line-height: 1;
}
.city-panel-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* 카드 애니메이션 (패널 열릴 때 카드만) */
.landing-city-panel.is-open .city-panel-card {
  animation: city-panel-slide-up 0.3s cubic-bezier(.4, 0, .2, 1) forwards;
}

/* ---- 헤더 ---- */
.city-panel-header { margin-bottom: 18px; }
.city-panel-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.city-panel-type-badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: rgba(212, 165, 116, 0.14);
  border: 1px solid rgba(212, 165, 116, 0.3);
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}
.city-panel-name {
  font-family: 'Noto Serif KR', serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.city-panel-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.65;
  margin: 0;
}

/* ---- 종합점수 ---- */
.city-panel-score-row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.city-panel-score-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.city-panel-score-label {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: 0.02em;
}
.city-panel-score-val {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.city-panel-score-bar-wrap {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 7px;
}
.city-panel-score-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-light, #3A7A52), #6DC87A);
  transition: width 0.7s cubic-bezier(.4, 0, .2, 1);
  width: 0%;
}
.city-panel-rank-row { text-align: right; }
.city-panel-rank {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
}

/* ---- 카테고리 섹션 ---- */
.city-panel-categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.city-panel-cat {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.city-panel-cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cat--samlter .city-panel-cat-head { background: rgba(74, 144, 217, 0.13); }
.cat--ilter   .city-panel-cat-head { background: rgba(232, 164, 74,  0.13); }
.cat--shimter .city-panel-cat-head { background: rgba(82,  168, 102, 0.13); }
.cat-icon { font-size: 15px; line-height: 1; }
.cat-name {
  font-size: 13.5px;
  font-weight: 700;
  flex: 1;
}
.cat--samlter .cat-name { color: #7DBEF2; }
.cat--ilter   .cat-name { color: #F0C474; }
.cat--shimter .cat-name { color: #7ED696; }
.cat-score {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

/* 지표 리스트 */
.city-panel-ind-list {
  list-style: none;
  padding: 10px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: rgba(255, 255, 255, 0.025);
}
.city-panel-ind-item { display: flex; flex-direction: column; gap: 3px; }
.ind-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ind-name { font-size: 11.5px; color: rgba(255, 255, 255, 0.58); }
.ind-value { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.88); }
.ind-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.ind-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.55s cubic-bezier(.4, 0, .2, 1);
  width: 0%;
}
.cat--samlter .ind-bar-fill { background: var(--samlter, #4A90D9); }
.cat--ilter   .ind-bar-fill { background: var(--ilter,   #E8A44A); }
.cat--shimter .ind-bar-fill { background: var(--shimter, #52A866); }

/* ---- CTA 버튼 ---- */
.city-panel-cta { padding-top: 4px; }
.city-panel-goto-btn {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--primary-light, #3A7A52) 0%, var(--primary, #2D5F3F) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms, box-shadow 150ms;
  box-shadow: 0 4px 16px rgba(45, 95, 63, 0.38);
  letter-spacing: 0.01em;
}
.city-panel-goto-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(45, 95, 63, 0.55);
}
.city-panel-goto-btn:active { transform: scale(0.99); }

/* 미니맵 폴리곤 — 클릭 가능 커서 */
.minimap-region { cursor: pointer; }


/* ============================================================================
   26. 지도 위 시군명 라벨 (DivIcon, 줌 연동)
   ============================================================================ */

/* Leaflet 마커 컨테이너 초기화 */
.city-label-marker {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 라벨 텍스트 */
.city-label-text {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  pointer-events: none;
  user-select: none;
  /* 가독성을 위한 다층 텍스트 쉐도우 */
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 3px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.85),
    -1px  0   0 rgba(0, 0, 0, 0.6),
     1px  0   0 rgba(0, 0, 0, 0.6),
     0   -1px 0 rgba(0, 0, 0, 0.6),
     0    1px 0 rgba(0, 0, 0, 0.6);
  transition: font-size 0.18s ease, opacity 0.18s ease;
}

/* 줌별 크기 (map 컨테이너에 map-zoom-N 클래스 부착) */
#map .city-label-text             { font-size: 10px; opacity: 0.88; }
#map.map-zoom-7 .city-label-text  { font-size:  7px; opacity: 0.55; }
#map.map-zoom-8 .city-label-text  { font-size:  9px; opacity: 0.72; }
#map.map-zoom-9 .city-label-text  { font-size: 11px; opacity: 0.88; }
#map.map-zoom-10 .city-label-text { font-size: 12px; opacity: 0.92; }
#map.map-zoom-11 .city-label-text { font-size: 13px; opacity: 1;    }
#map.map-zoom-12 .city-label-text { font-size: 14px; opacity: 1;    }
#map.map-zoom-13 .city-label-text { font-size: 15px; opacity: 1;    }

/* ---- 모바일 ---- */
@media (max-width: 600px) {
  .city-panel-card { padding: 22px 18px 20px; max-height: 88vh; }
  .city-panel-name { font-size: 19px; }
  .city-panel-score-val { font-size: 19px; }
}

/* ============================================================================
   [임시] 베이스맵 비교 스위처 UI (basemap-compare 브랜치 전용)
   ============================================================================ */
.basemap-switcher {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  font-family: 'Noto Sans KR', sans-serif;
  min-width: 220px;
}
.basemap-switcher-label {
  font-size: 12px;
  font-weight: 700;
  color: #2D5F3F;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.basemap-switcher select {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background: #fff;
  color: #222;
  font-family: 'Noto Sans KR', sans-serif;
  cursor: pointer;
}
.basemap-switcher select:focus {
  outline: none;
  border-color: #2D5F3F;
}

/* 다크 베이스맵 활성화 시 — 타일 간격 사이 흰 줄 비침 방지 */
#map.basemap-is-dark,
#map.basemap-is-dark .leaflet-container,
#map.basemap-is-dark .leaflet-tile-pane,
#map.basemap-is-dark .leaflet-pane {
  background-color: #0d0d0d !important;
}

/* ============================================================================
   27. 오버레이 풀스크린 페이지 공통 (#ranking-screen, #guide-screen)
   ============================================================================ */

.overlay-screen {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: linear-gradient(160deg, #0D2818 0%, #1B3E2A 45%, #0F2415 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: overlay-fade-in 0.32s cubic-bezier(.4, 0, .2, 1);
}
.overlay-screen.is-hidden { display: none !important; }

@keyframes overlay-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 상단 헤더 ── */
.overlay-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(13, 40, 24, 0.85);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.overlay-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: #fff;
  font-family: 'Noto Sans KR', sans-serif;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: opacity 160ms;
}
.overlay-brand:hover { opacity: 0.8; }
.overlay-brand-logo { font-size: 22px; }
.overlay-brand-text { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.overlay-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background 160ms, transform 160ms;
}
.overlay-close:hover { background: rgba(255, 255, 255, 0.16); transform: scale(1.05); }

/* ── 메인 콘텐츠 ── */
.overlay-main {
  flex: 1;
  overflow-y: auto;
  padding: 36px 28px 80px;
}
.overlay-main > section {
  max-width: 1100px;
  margin: 0 auto 36px;
}

/* ============================================================================
   27-a. 시군 랭킹 페이지
   ============================================================================ */

.ranking-hero {
  text-align: center;
  padding-top: 12px;
}
.ranking-hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ranking-hero-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.ranking-hero-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 26px;
}

/* 탭 (pill) */
.ranking-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  margin: 0 auto;
}
.ranking-tab {
  padding: 9px 20px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms, color 180ms, transform 120ms;
}
.ranking-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.ranking-tab.is-active {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(45, 95, 63, 0.5);
}

/* 포디움 (1·2·3위) */
.ranking-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 18px;
  align-items: end;
  margin-top: 32px;
}
.podium-card {
  position: relative;
  padding: 22px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  backdrop-filter: blur(10px);
  transition: transform 200ms;
}
.podium-card:hover { transform: translateY(-4px); }
.podium-card--1 {
  background: linear-gradient(165deg, rgba(212, 165, 116, 0.22), rgba(212, 165, 116, 0.06));
  border-color: rgba(212, 165, 116, 0.45);
  box-shadow: 0 10px 30px rgba(212, 165, 116, 0.2);
  padding: 28px 18px;
}
.podium-card--2 {
  background: linear-gradient(165deg, rgba(190, 195, 200, 0.18), rgba(190, 195, 200, 0.04));
  border-color: rgba(190, 195, 200, 0.4);
}
.podium-card--3 {
  background: linear-gradient(165deg, rgba(196, 138, 95, 0.18), rgba(196, 138, 95, 0.04));
  border-color: rgba(196, 138, 95, 0.4);
}
.podium-medal {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 6px;
}
.podium-card--1 .podium-medal { font-size: 44px; }
.podium-name {
  font-family: 'Noto Serif KR', serif;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 4px 0 2px;
  letter-spacing: -0.01em;
}
.podium-card--1 .podium-name { font-size: 22px; }
.podium-type {
  display: inline-block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.podium-score {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.podium-score-unit {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 2px;
}

/* 4~15위 리스트 */
.ranking-list-wrap { margin-top: 40px; }
.ranking-list-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.ranking-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ranking-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: background 160ms, transform 160ms;
}
.ranking-row:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}
.ranking-row-rank {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  letter-spacing: -0.02em;
}
.ranking-row-body { min-width: 0; }
.ranking-row-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
}
.ranking-row-type {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.ranking-row-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  max-width: 360px;
}
.ranking-row-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-light), var(--accent));
  border-radius: 999px;
  transition: width 320ms cubic-bezier(.2, .8, .2, 1);
}
.ranking-row-score {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  text-align: right;
  min-width: 60px;
}

/* 카테고리별 액센트 (탭에 따라 진행 바 색 변경) */
.ranking-screen-cat-samlter .ranking-row-bar-fill,
.ranking-screen-cat-samlter .podium-score { background: linear-gradient(90deg, var(--samlter), #6FB6F0); color: #6FB6F0; }
.ranking-screen-cat-samlter .podium-score { background: none; color: #6FB6F0; }
.ranking-screen-cat-ilter .ranking-row-bar-fill { background: linear-gradient(90deg, var(--ilter), #F0C26E); }
.ranking-screen-cat-ilter .podium-score { color: #F0C26E; }
.ranking-screen-cat-shimter .ranking-row-bar-fill { background: linear-gradient(90deg, var(--shimter), #80D195); }
.ranking-screen-cat-shimter .podium-score { color: #80D195; }

.ranking-footnote {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-top: 28px;
}

/* ============================================================================
   27-b. 지표 가이드 페이지
   ============================================================================ */

.guide-hero { text-align: center; padding-top: 12px; }
.guide-hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.guide-hero-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.guide-hero-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 22px;
}
.guide-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
.guide-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.guide-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.guide-legend-dot--common { background: var(--accent); }
.guide-legend-dot--auto { background: #6FB6F0; }
.guide-legend-arrow { font-weight: 700; font-size: 14px; }
.guide-legend-arrow--up { color: #6FE08A; }
.guide-legend-arrow--down { color: #E08A8A; }

/* 카테고리 섹션 */
.guide-category-wrap {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.guide-category-section { }
.guide-category-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--cat-color, rgba(255, 255, 255, 0.15));
}
.guide-category-icon { font-size: 24px; }
.guide-category-name {
  font-family: 'Noto Serif KR', serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.guide-category-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 4px;
}

.guide-subhead {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 18px 0 10px;
}
.guide-subhead-auto { color: #8FCBE8; }

.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.guide-card {
  position: relative;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: background 160ms, transform 160ms, border-color 160ms;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}
.guide-card[data-autonomy="true"] {
  border-color: rgba(143, 203, 232, 0.3);
  background: linear-gradient(165deg, rgba(143, 203, 232, 0.08), rgba(255, 255, 255, 0.03));
}
.guide-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.guide-card-keyname {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.guide-card-key {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(212, 165, 116, 0.18);
  border: 1px solid rgba(212, 165, 116, 0.35);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.guide-card[data-autonomy="true"] .guide-card-key {
  background: rgba(143, 203, 232, 0.15);
  border-color: rgba(143, 203, 232, 0.4);
  color: #8FCBE8;
}
.guide-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.guide-card-direction {
  font-size: 16px;
  font-weight: 700;
  flex: 0 0 auto;
}
.guide-card-direction--up { color: #6FE08A; }
.guide-card-direction--down { color: #E08A8A; }

.guide-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.guide-meta-chip {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}
.guide-card-formula {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.22);
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 2px solid var(--accent);
  margin-top: 4px;
  word-break: keep-all;
  line-height: 1.5;
}
.guide-card-formula--missing {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  border-left-color: rgba(255, 255, 255, 0.18);
}
.guide-card-autobadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #8FCBE8;
  background: rgba(143, 203, 232, 0.1);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* 반응형 */
@media (max-width: 768px) {
  .overlay-header { padding: 12px 16px; }
  .overlay-brand-text { font-size: 13px; }
  .overlay-main { padding: 24px 16px 60px; }
  .ranking-hero-title { font-size: 24px; }
  .ranking-tabs { flex-wrap: wrap; }
  .ranking-podium { grid-template-columns: 1fr; gap: 12px; }
  .podium-card--1 { padding: 22px 18px; }
  .ranking-row { grid-template-columns: 44px 1fr auto; gap: 10px; padding: 12px 14px; }
  .ranking-row-bar { max-width: 100%; }
  .guide-hero-title { font-size: 22px; }
  .guide-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .overlay-brand-text { display: none; }
  .ranking-tab { padding: 7px 14px; font-size: 13px; }
}

/* ============================================================================
   28. 기능별 분석 탭 (#analysis-container)
   ============================================================================ */

#analysis-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-card, #fff);
  overflow: hidden;
}
#analysis-container.hidden { display: none !important; }

.analysis-head {
  flex: 0 0 auto;
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--border-soft, rgba(0, 0, 0, 0.08));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #F8FAF6 0%, #FFFFFF 100%);
}
.analysis-head-text { min-width: 200px; }
.analysis-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary, #2D5F3F);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.analysis-sub {
  font-size: 13px;
  color: var(--text-muted, #6B7770);
  margin: 0;
}

.analysis-purpose-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  background: rgba(45, 95, 63, 0.06);
  border: 1px solid rgba(45, 95, 63, 0.12);
  border-radius: 999px;
}
.analysis-purpose-tab {
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--text-muted, #5A6660);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, color 160ms;
  font-family: 'Noto Sans KR', sans-serif;
}
.analysis-purpose-tab:hover { background: rgba(45, 95, 63, 0.08); color: var(--primary, #2D5F3F); }
.analysis-purpose-tab.is-active {
  background: linear-gradient(135deg, var(--primary-light, #3A7A52), var(--primary, #2D5F3F));
  color: #fff;
  box-shadow: 0 3px 12px rgba(45, 95, 63, 0.3);
}

.analysis-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding: 20px 28px 28px;
  overflow: auto;
}

.analysis-chart-wrap {
  position: relative;
  background: #FAFCF8;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 16px;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.analysis-chart-wrap canvas {
  max-height: 600px !important;
  width: 100% !important;
}

.analysis-interpret {
  background: linear-gradient(165deg, #F4F8F1 0%, #FFFFFF 100%);
  border: 1px solid rgba(45, 95, 63, 0.12);
  border-radius: 12px;
  padding: 18px 18px 20px;
  overflow-y: auto;
}
.analysis-interpret-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary, #2D5F3F);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(45, 95, 63, 0.15);
}
.analysis-interpret-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-body, #3A4540);
  margin: 0 0 14px;
}
.analysis-axis-info {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analysis-axis-info li {
  font-size: 12.5px;
  color: var(--text-muted, #5A6660);
  line-height: 1.5;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  border-left: 3px solid var(--accent, #D4A574);
}
.analysis-axis-info li b {
  color: var(--primary, #2D5F3F);
  font-weight: 700;
}

/* 차트 컬럼 (캔버스 + 컬러 스케일) */
.analysis-chart-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* 컬러 스케일 범례 (히트맵용) */
.analysis-color-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  position: relative;
}
.analysis-color-legend-label {
  font-size: 11.5px;
  color: var(--text-muted, #5A6660);
  font-weight: 600;
  flex: 0 0 auto;
}
.analysis-color-legend-bar {
  flex: 1;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    rgba(45,95,63,0.10) 0%,
    rgba(45,95,63,0.30) 30%,
    rgba(45,95,63,0.55) 60%,
    rgba(45,95,63,0.88) 100%
  );
}
.analysis-color-legend-ticks {
  position: absolute;
  bottom: -16px;
  left: 50px;
  right: 50px;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-muted, #5A6660);
}

/* 우측 해석 패널 — 사분면 색 동기화 */
.axis-info-axis {
  background: rgba(255,255,255,0.85) !important;
  border-left-color: var(--accent, #D4A574) !important;
}
.axis-info-explain {
  color: var(--text-muted, #6B7770);
  font-size: 11.5px;
}

.quad-legend {
  padding: 8px 10px !important;
  font-size: 12.5px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  border-left-width: 3px !important;
  border-left-style: solid;
}
.quad-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}
.quad-legend--upperRight { border-left-color: #3B8A4E !important; background: rgba(82, 168, 102, 0.10) !important; }
.quad-legend--upperRight .quad-dot { background: #52A866; }
.quad-legend--lowerRight { border-left-color: #C56F2E !important; background: rgba(224, 138, 74, 0.15) !important; }
.quad-legend--lowerRight .quad-dot { background: #E08A4A; }
.quad-legend--upperLeft  { border-left-color: #3673BC !important; background: rgba(74, 144, 217, 0.10) !important; }
.quad-legend--upperLeft .quad-dot { background: #4A90D9; }
.quad-legend--lowerLeft  { border-left-color: #777 !important; background: rgba(140, 140, 140, 0.10) !important; }
.quad-legend--lowerLeft .quad-dot { background: #8C8C8C; }

/* 히트맵 지표 칩 — 카테고리별 색 */
.axis-info-indicator {
  display: flex !important;
  align-items: center;
  gap: 6px;
  border-left-width: 3px !important;
  border-left-style: solid;
}
.axis-info-indicator b {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.axis-info-indicator--samlter { border-left-color: #4A90D9 !important; background: rgba(74, 144, 217, 0.08) !important; }
.axis-info-indicator--samlter b { background: rgba(74, 144, 217, 0.15); color: #3673BC; }
.axis-info-indicator--ilter   { border-left-color: #E08A4A !important; background: rgba(224, 138, 74, 0.10) !important; }
.axis-info-indicator--ilter b   { background: rgba(224, 138, 74, 0.18); color: #C56F2E; }
.axis-info-indicator--shimter { border-left-color: #52A866 !important; background: rgba(82, 168, 102, 0.10) !important; }
.axis-info-indicator--shimter b { background: rgba(82, 168, 102, 0.15); color: #3B8A4E; }

/* "이렇게 읽으세요" 가이드 */
.analysis-howto {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(45, 95, 63, 0.04);
  border: 1px dashed rgba(45, 95, 63, 0.22);
  border-radius: 8px;
}
.analysis-howto h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #2D5F3F);
  margin: 0 0 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.analysis-howto ol {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.analysis-howto li {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-body, #3A4540);
}
.analysis-howto li b {
  color: #C56F2E;
}

/* 반응형 */
@media (max-width: 960px) {
  .analysis-body { grid-template-columns: 1fr; }
  .analysis-interpret { max-height: 360px; }
}
@media (max-width: 768px) {
  .analysis-head { padding: 16px 18px 12px; gap: 14px; }
  .analysis-body { padding: 14px 18px 22px; gap: 14px; }
  .analysis-title { font-size: 19px; }
  .analysis-chart-wrap { min-height: 420px; padding: 10px; }
  .analysis-purpose-tab { padding: 7px 12px; font-size: 12.5px; }
  .analysis-color-legend-ticks { left: 40px; right: 40px; }
}

/* ============================================================================
   29. 지역 드릴다운 — Breadcrumb + 읍면 상세
   ============================================================================ */

.region-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: linear-gradient(180deg, #F4F7F1 0%, #FFFFFF 100%);
  border: 1px solid rgba(45, 95, 63, 0.10);
  border-radius: 10px;
  font-size: 13px;
}
.region-breadcrumb:empty { display: none; }

.region-breadcrumb-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  color: var(--text-muted, #5A6660);
  cursor: pointer;
  transition: background 140ms, color 140ms;
  white-space: nowrap;
}
.region-breadcrumb-step:hover:not(.is-active):not(.is-disabled) {
  background: rgba(45, 95, 63, 0.08);
  color: var(--primary, #2D5F3F);
}
.region-breadcrumb-step.is-active {
  background: rgba(45, 95, 63, 0.12);
  color: var(--primary, #2D5F3F);
  font-weight: 700;
  cursor: default;
}
.region-breadcrumb-step.is-disabled {
  color: rgba(120, 130, 125, 0.65);
  cursor: not-allowed;
  font-style: italic;
}
.region-breadcrumb-sep {
  color: rgba(0, 0, 0, 0.25);
  font-size: 14px;
  margin: 0 2px;
  user-select: none;
}
.region-breadcrumb-sep--placeholder { color: rgba(0, 0, 0, 0.12); }

/* 읍면 상세 카드 */
.dong-detail {
  padding: 18px 20px 20px;
  margin: 0 0 16px;
  background: linear-gradient(165deg, #FFF8EA 0%, #FFFFFF 60%);
  border: 1px solid rgba(212, 165, 116, 0.32);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(212, 165, 116, 0.08);
  animation: dong-detail-fade-in 0.32s cubic-bezier(.4, 0, .2, 1);
}
@keyframes dong-detail-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dong-detail.hidden { display: none; }

.dong-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.dong-detail-name {
  font-family: 'Noto Serif KR', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--primary, #2D5F3F);
  margin: 0;
  letter-spacing: -0.01em;
}
.dong-detail-meta-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #B8742E;
  background: rgba(255, 200, 100, 0.18);
  border: 1px solid rgba(212, 165, 116, 0.45);
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.dong-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dong-info-card {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dong-info-card--wide { grid-column: 1 / -1; }
.dong-info-label {
  font-size: 11.5px;
  color: var(--text-muted, #6B7770);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dong-info-value {
  font-size: 15px;
  color: var(--text-body, #2C3530);
  font-weight: 600;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
.dong-info-card--wide .dong-info-value {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
}

.dong-detail-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted, #5A6660);
  background: rgba(45, 95, 63, 0.04);
  border: 1px dashed rgba(45, 95, 63, 0.18);
  border-radius: 8px;
  line-height: 1.55;
}

.dong-back-btn {
  margin-top: 14px;
  padding: 9px 16px;
  background: var(--primary, #2D5F3F);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, transform 120ms;
}
.dong-back-btn:hover { background: var(--primary-light, #3A7A52); }
.dong-back-btn:active { transform: scale(0.98); }

/* 읍면 모드일 때 시군 상세 카드들 숨김 */
.is-dong-mode #city-header,
.is-dong-mode #radar-chart-container,
.is-dong-mode #score-cards,
.is-dong-mode #indicator-list-section,
.is-dong-mode #namyangju-section,
.is-dong-mode #add-comparison-wrapper {
  display: none !important;
}
/* 행정리 모드일 때 시군·읍면 카드 모두 숨김 */
.is-ri-mode #city-header,
.is-ri-mode #radar-chart-container,
.is-ri-mode #score-cards,
.is-ri-mode #indicator-list-section,
.is-ri-mode #namyangju-section,
.is-ri-mode #add-comparison-wrapper,
.is-ri-mode #dong-detail {
  display: none !important;
}

/* ============================================================================
   29-b. 데이터 출처 배지 + 행정리 상세 패널
   ============================================================================ */

.dong-detail-source {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.dong-detail-source.is-source-mock {
  color: #B8742E;
  background: rgba(255, 200, 100, 0.18);
  border: 1px solid rgba(212, 165, 116, 0.45);
}
.dong-detail-source.is-source-kosis {
  color: #2D5F3F;
  background: rgba(82, 168, 102, 0.12);
  border: 1px solid rgba(82, 168, 102, 0.45);
}
.dong-detail-source.is-source-sgis {
  color: #275E8E;
  background: rgba(74, 144, 217, 0.14);
  border: 1px solid rgba(74, 144, 217, 0.40);
}
.dong-detail-source.is-source-boundary {
  color: #5B6B45;
  background: rgba(139, 166, 92, 0.14);
  border: 1px solid rgba(139, 166, 92, 0.40);
}

/* 행정리 상세 — dong-detail 스타일 변형 */
.ri-detail {
  margin-top: 12px;
  padding: 16px 18px 18px;
  background: rgba(74, 144, 217, 0.04);
  border: 1px solid rgba(74, 144, 217, 0.16);
  border-radius: 12px;
}
.ri-detail.hidden { display: none; }
.ri-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.ri-detail-name {
  font-family: 'Noto Serif KR', serif;
  font-size: 18px;
  font-weight: 700;
  color: #2C5A8A;
  margin: 0;
  letter-spacing: -0.01em;
}
.ri-detail-parent {
  font-size: 11.5px;
  color: var(--text-muted, #6B7770);
  font-weight: 500;
}
.ri-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ri-info-card {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(74, 144, 217, 0.18);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ri-info-card--wide { grid-column: 1 / -1; }
.ri-info-label {
  font-size: 11.5px;
  color: var(--text-muted, #6B7770);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ri-info-value {
  font-size: 14px;
  color: var(--text-body, #2C3530);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ri-detail-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted, #5A6660);
  background: rgba(74, 144, 217, 0.05);
  border: 1px dashed rgba(74, 144, 217, 0.22);
  border-radius: 8px;
  line-height: 1.55;
}
.ri-back-btn {
  margin-top: 14px;
  padding: 9px 16px;
  background: #4A90D9;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, transform 120ms;
}
.ri-back-btn:hover { background: #3673BC; }
.ri-back-btn:active { transform: scale(0.98); }

/* 반응형 */
@media (max-width: 768px) {
  .region-breadcrumb { padding: 8px 10px; font-size: 12px; gap: 4px; }
  .region-breadcrumb-step { padding: 3px 7px; font-size: 12px; }
  .dong-detail, .ri-detail { padding: 14px 14px 16px; }
  .dong-info-grid, .ri-info-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   30. 지도/패널 드래그 구분선 (panel resizer)
   ============================================================================ */

/* map-container 기존 border-right 제거 — resizer가 대신 담당 */
#map-container {
  border-right: none;
}

#panel-resizer {
  flex: 0 0 6px;
  position: relative;
  background: var(--border-soft, rgba(0, 0, 0, 0.08));
  cursor: col-resize;
  z-index: 50;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.18s;
}
#panel-resizer:hover,
#panel-resizer.is-dragging {
  background: rgba(45, 95, 63, 0.28);
}
/* 중앙 그립 핸들 (3점) */
#panel-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 48px;
  border-radius: 2px;
  background: rgba(80, 100, 90, 0.35);
  transition: background 0.18s, height 0.18s;
}
#panel-resizer:hover::after,
#panel-resizer.is-dragging::after {
  background: var(--primary, #2D5F3F);
  height: 64px;
  opacity: 0.7;
}

/* 모바일(세로 레이아웃)에서는 숨김 */
@media (max-width: 768px) {
  #panel-resizer { display: none; }
}

/* ============================================================================
   31. 읍면·행정리 상시 라벨 (permanent tooltip → 지도 라벨)
   ============================================================================ */

/* ── 공통: Leaflet 툴팁 버블 제거 ── */
.dong-label-permanent.leaflet-tooltip,
.ri-label-permanent.leaflet-tooltip {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* opacity 전환은 Leaflet이 관리 */
}
.dong-label-permanent.leaflet-tooltip::before,
.ri-label-permanent.leaflet-tooltip::before {
  display: none !important;
}

/* ── 읍면 라벨 ── */
.dong-label-permanent {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(18, 40, 26, 0.88);
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.95),
    0 0 6px rgba(255, 255, 255, 0.7),
    0 0 10px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

/* ── 행정리 라벨 (더 작고 연하게 — 개수가 많아 과밀 방지) ── */
.ri-label-permanent {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(30, 60, 80, 0.72);
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.9),
    0 0 6px rgba(255, 255, 255, 0.55);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.1px;
}

/* ============================================================================
   32. 지도 컨텍스트 HUD
   ============================================================================ */

@keyframes hud-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}

#map-context-hud {
  position: absolute;
  bottom: 36px;
  left: 10px;
  z-index: 800;
  background: rgba(15, 30, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
  white-space: nowrap;
  animation: hud-fade-in 0.2s ease;
  line-height: 1.5;
}
#map-context-hud.is-hidden {
  display: none;
}
.hud-sep {
  opacity: 0.55;
  margin: 0 4px;
}
.hud-dong {
  color: rgba(180, 220, 195, 0.9);
}

/* ============================================================================
   33. 선택 레벨 토스트
   ============================================================================ */

@keyframes toast-slide-down {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
@keyframes toast-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

#map-select-toast {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  background: rgba(15, 30, 20, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.95);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
  white-space: nowrap;
  animation: toast-slide-down 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#map-select-toast.is-hidden {
  display: none;
}
#map-select-toast.is-fading {
  animation: toast-fade-out 0.5s ease forwards;
}

/* ============================================================================
   34. KOSIS 시군 기본 통계 섹션 (#kosis-sigun-stats)
   ============================================================================ */

.kosis-sigun-stats {
  margin: var(--space-4) 0 var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(45, 95, 63, 0.03);
  border: 1px solid rgba(45, 95, 63, 0.13);
  border-radius: var(--radius-lg);
}
.kosis-sigun-stats.hidden {
  display: none;
}

/* 접힘 상태 — 토글 버튼 클릭으로 펼침/접힘 */
.kosis-sigun-stats.is-collapsed {
  max-height: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  background: transparent;
  overflow: hidden;
  transition: max-height 0.28s ease, padding 0.28s ease, margin 0.28s ease, opacity 0.18s ease;
  opacity: 0;
}
.kosis-sigun-stats {
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.32s ease, padding 0.28s ease, margin 0.28s ease, opacity 0.22s ease;
}

/* 토글 버튼 — 자율지표 섹션 다음, 시군 패널 맨 아래 */
.kosis-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: calc(100% - 2 * var(--space-6));
  margin: var(--space-3) var(--space-6) var(--space-2) var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: rgba(45, 95, 63, 0.06);
  border: 1px solid rgba(45, 95, 63, 0.16);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
  text-align: left;
  transition: background 0.18s, border-color 0.18s;
}
.kosis-toggle-btn:hover {
  background: rgba(45, 95, 63, 0.10);
  border-color: rgba(45, 95, 63, 0.28);
}
.kosis-toggle-icon {
  font-size: 10px;
  transition: transform 0.2s;
  color: var(--primary-light);
}
.kosis-toggle-btn[aria-expanded="true"] .kosis-toggle-icon {
  transform: none;
}
.kosis-toggle-label {
  flex: 1;
}
.kosis-toggle-hint {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.kosis-section-title {
  font-family: 'Noto Serif KR', serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 var(--space-3) 0;
  letter-spacing: 0.01em;
}

.kosis-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.kosis-stat-card {
  background: #fff;
  border: 1px solid rgba(45, 95, 63, 0.09);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.kosis-stat-card:hover {
  border-color: rgba(45, 95, 63, 0.22);
  box-shadow: 0 2px 8px rgba(45, 95, 63, 0.10);
}

.kosis-stat-emoji {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 4px;
}

/* 카드 상단 — 이모지 + 출처 배지 가로 배치 */
.kosis-stat-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}
.kosis-stat-top .kosis-stat-emoji {
  margin-bottom: 0;
}

/* 데이터 출처 배지 (raw=KOSIS / computed=계산 / manual=수동) */
.kosis-stat-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.kosis-badge-kosis {
  background: rgba(74, 144, 217, 0.14);
  color: var(--samlter);
}
.kosis-badge-sgis {
  background: rgba(74, 144, 217, 0.14);
  color: var(--samlter);
}
.kosis-badge-local {
  background: rgba(45, 95, 63, 0.12);
  color: var(--primary);
}
.kosis-badge-boundary {
  background: rgba(139, 166, 92, 0.14);
  color: #5B6B45;
}
.kosis-badge-computed {
  background: rgba(82, 168, 102, 0.16);
  color: var(--shimter);
}
.kosis-badge-manual {
  background: rgba(232, 164, 74, 0.18);
  color: var(--ilter);
}
.kosis-stat-value {
  font-family: 'Noto Serif KR', serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2px;
  white-space: nowrap;
}
.kosis-stat-label {
  font-size: var(--fs-xs);
  color: #666;
  font-weight: 500;
}
.kosis-stat-period {
  font-size: 10px;
  color: rgba(100, 100, 100, 0.65);
  margin-top: 2px;
}

.kosis-source-note {
  margin: var(--space-3) 0 0 0;
  font-size: 10px;
  color: rgba(80, 80, 80, 0.7);
  line-height: 1.45;
}

/* ============================================================================
   35. 지표 탐색 페이지 v2 (#explore-screen) — SGIS 통계주제도 패턴
   ============================================================================ */

/* ── 풀페이지 전환: 짙은 녹색 overlay → 라이트 톤 사이트 화면 ── */
#explore-screen {
  background: #f4f6f1;
}
#explore-screen .overlay-header {
  background: #fff;
  border-bottom: 1px solid rgba(45, 95, 63, 0.14);
  padding: 10px 24px;
  backdrop-filter: none;
}
#explore-screen .overlay-brand,
#explore-screen .overlay-brand-text {
  color: var(--primary);
}
#explore-screen .overlay-close {
  color: var(--primary);
  background: rgba(45, 95, 63, 0.08);
  border: 1px solid rgba(45, 95, 63, 0.18);
}
#explore-screen .overlay-close:hover {
  background: rgba(45, 95, 63, 0.16);
}
/* overlay-main 의 디폴트 padding/scroll 제거 → grid가 풀 영역 차지 */
#explore-screen .overlay-main.explore-main {
  padding: 0;
  overflow: hidden;            /* 외부 스크롤 X — 각 column 내부 스크롤 */
  max-width: none;
  margin: 0;
  min-height: 0;               /* flex 자식 height 계산 안정 */
}

/* ── 3-Column 레이아웃 ── */
.explore-main {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 340px;
  gap: 0;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

/* ── 좌측 사이드바 (260px) — 카테고리 트리 ── */
.explore-sidebar {
  background: linear-gradient(180deg, #f7faf6 0%, #f0f5ec 100%);
  border-right: 1px solid rgba(45, 95, 63, 0.18);
  padding: var(--space-5) var(--space-4);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;       /* grid item — 부모 높이 초과 시 스크롤 */
  max-height: 100%;
}
/* 스크롤바 시각 — 가는 회녹색 */
.explore-sidebar::-webkit-scrollbar { width: 8px; }
.explore-sidebar::-webkit-scrollbar-track { background: transparent; }
.explore-sidebar::-webkit-scrollbar-thumb {
  background: rgba(45, 95, 63, 0.18);
  border-radius: 4px;
}
.explore-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(45, 95, 63, 0.32); }
.explore-h2 {
  font-family: 'Noto Serif KR', serif;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.explore-help {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.explore-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(45, 95, 63, 0.22);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-sm);
  background: #fff;
}
.explore-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45, 95, 63, 0.12);
}
.explore-cat-tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-height: 0;
}

/* 카테고리 그룹 */
.explore-cat-group {
  background: #fff;
  border: 1px solid rgba(45, 95, 63, 0.10);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.explore-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.explore-cat-header:hover {
  background: rgba(45, 95, 63, 0.06);
}
.cat-header-label {
  flex: 1;
  letter-spacing: -0.01em;
}
.cat-header-count {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  background: rgba(45, 95, 63, 0.10);
  color: var(--primary);
  border-radius: var(--radius-pill);
}
.cat-header-icon {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.2s;
}
.explore-cat-list {
  list-style: none;
  padding: 4px 6px 6px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(45, 95, 63, 0.08);
}
.explore-ind-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.explore-ind-item:hover {
  background: rgba(45, 95, 63, 0.07);
  transform: translateX(2px);
}
.explore-ind-item.is-active {
  background: rgba(45, 95, 63, 0.13);
  box-shadow: inset 3px 0 0 var(--primary);
}
.explore-ind-key {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(45, 95, 63, 0.10);
  color: var(--primary);
  flex-shrink: 0;
  min-width: 28px;
  text-align: center;
}
.explore-ind-key.cat-samlter { color: var(--samlter); background: rgba(74, 144, 217, 0.13); }
.explore-ind-key.cat-ilter   { color: var(--ilter);   background: rgba(232, 164, 74, 0.16); }
.explore-ind-key.cat-shimter { color: var(--shimter); background: rgba(82, 168, 102, 0.16); }
.explore-ind-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

/* ── 가운데 메인 패널 ── */
.explore-main-panel {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  background: #fdfcfa;
  min-width: 0;  /* grid overflow 방지 */
}
.explore-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 320px;
  text-align: center;
  color: var(--text-muted);
}
.explore-empty-emoji {
  font-size: 56px;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}
.explore-detail-empty h3 {
  font-family: 'Noto Serif KR', serif;
  font-size: var(--fs-lg);
  color: var(--primary);
  margin: 0 0 var(--space-2) 0;
}
.explore-detail-empty p {
  font-size: var(--fs-sm);
  max-width: 380px;
  line-height: 1.6;
  margin: 0;
}

/* ── 메인 헤더 (지표 정보) ── */
.explore-map-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(45, 95, 63, 0.14);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.explore-key-badge {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}
.explore-key-badge.cat-samlter { background: rgba(74,144,217,0.18);  color: var(--samlter); }
.explore-key-badge.cat-ilter   { background: rgba(232,164,74,0.20);  color: var(--ilter); }
.explore-key-badge.cat-shimter { background: rgba(82,168,102,0.20);  color: var(--shimter); }
.explore-map-title { flex: 1; min-width: 0; }
.explore-map-title h2 {
  font-family: 'Noto Serif KR', serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.explore-map-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.explore-cat-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  color: #fff;
}
.explore-cat-chip.samlter { background: var(--samlter); }
.explore-cat-chip.ilter   { background: var(--ilter); }
.explore-cat-chip.shimter { background: var(--shimter); }
.explore-cat-chip--jayul  { background: var(--accent); color: #2A1F12; }
.explore-cat-chip--common { background: rgba(120,120,120,0.18); color: var(--text-muted); }
.explore-meta-chip {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(0,0,0,0.04);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.explore-show-on-map-btn {
  padding: 10px 16px;
  font-size: 13px;
}

/* ── 큰 코로플레스 지도 ── */
.explore-map-wrap {
  position: relative;
  background: #f5f8f3;
  border: 1px solid rgba(45,95,63,0.10);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
#explore-map-area {
  width: 100%;
  aspect-ratio: 9 / 7;
  max-height: 560px;
}
#explore-map-area svg {
  width: 100%;
  height: 100%;
  display: block;
}
.explore-map-label text { pointer-events: none; }

/* 범례 */
.explore-legend {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(45,95,63,0.14);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legend-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--primary);
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.legend-method {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
  text-transform: none;
}
.legend-bar {
  display: flex;
  gap: 2px;
}
.legend-tier {
  width: 22px;
  height: 14px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legend-hint {
  font-size: 9.5px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── 산식 (collapsible) ── */
.explore-formula-collapsible {
  background: rgba(45, 95, 63, 0.04);
  border: 1px solid rgba(45, 95, 63, 0.10);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.explore-formula-collapsible summary {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.explore-formula-collapsible summary::-webkit-details-marker { display: none; }
.explore-formula-collapsible summary::before {
  content: '▶';
  margin-right: 6px;
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.2s;
  display: inline-block;
}
.explore-formula-collapsible[open] summary::before {
  transform: rotate(90deg);
}
.explore-formula-collapsible:hover summary { background: rgba(45,95,63,0.06); }
.explore-formula-body {
  padding: 0 14px 12px;
  border-top: 1px solid rgba(45,95,63,0.08);
}
.explore-formula-body p {
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 8px 0 0 0;
}
.explore-formula-body strong {
  color: var(--primary);
  margin-right: 6px;
}

/* ── 표 ── */
.explore-section-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin: var(--space-5) 0 var(--space-3) 0;
  letter-spacing: -0.005em;
}
.explore-table-section { margin-bottom: var(--space-5); }
.explore-table-wrap {
  background: #fff;
  border: 1px solid rgba(45,95,63,0.10);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.explore-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.explore-table thead {
  background: rgba(45, 95, 63, 0.07);
}
.explore-table th {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(45,95,63,0.10);
  white-space: nowrap;
}
.explore-table th.num-cell { text-align: right; }
.explore-table th.sortable { cursor: pointer; user-select: none; }
.explore-table th.sortable:hover { background: rgba(45,95,63,0.12); }
.explore-table th.sortable::after { content: ' ⇅'; opacity: 0.35; font-size: 9px; }
.explore-table th.sort-asc::after  { content: ' ▲'; opacity: 1; color: var(--primary); }
.explore-table th.sort-desc::after { content: ' ▼'; opacity: 1; color: var(--primary); }
.explore-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  vertical-align: middle;
}
.explore-table td.num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.explore-table .rank-cell {
  text-align: center;
  width: 48px;
  font-weight: 700;
  color: var(--primary);
  font-size: 14px;
}
.explore-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
.explore-table tbody tr:nth-child(even) { background: rgba(45,95,63,0.025); }
.explore-table tbody tr:hover { background: rgba(45,95,63,0.10); }
.explore-table tbody tr.is-top {
  background: rgba(255, 230, 180, 0.18);
}
.explore-table tbody tr.is-top:hover {
  background: rgba(255, 220, 150, 0.32);
}
.explore-table .raw-col {
  font-size: 11.5px;
  color: var(--text-secondary, #555);
}
.explore-table .raw-mock {
  opacity: 0.4;
  font-style: italic;
}
.quantile-chip {
  display: inline-block;
  min-width: 24px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.jayul-selected-mark { color: var(--primary); font-weight: 800; font-size: 14px; }
.jayul-not-selected { color: rgba(0,0,0,0.18); }

/* ── 차트 ── */
.explore-chart-section { margin-bottom: var(--space-5); }
.explore-chart {
  background: #fff;
  border: 1px solid rgba(45,95,63,0.10);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  height: 280px;
  position: relative;
}

/* ── 우측 aside (340px) — 시군 카드 / TOP3 ── */
.explore-aside {
  background: linear-gradient(180deg, rgba(212,165,116,0.06) 0%, rgba(212,165,116,0.10) 100%);
  border-left: 1px solid rgba(212, 165, 116, 0.24);
  padding: var(--space-5);
  overflow-y: auto;
}
.explore-aside-empty,
.explore-aside-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) 0;
  color: var(--text-muted);
}
.explore-aside-emoji { font-size: 48px; opacity: 0.55; margin-bottom: var(--space-3); }
.explore-aside-empty p,
.explore-aside-prompt p {
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}
.explore-aside-prompt h4 {
  font-family: 'Noto Serif KR', serif;
  font-size: 15px;
  color: var(--primary);
  margin: 0 0 var(--space-2) 0;
}

/* TOP 3 */
.explore-aside-top3 {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(212,165,116,0.30);
}
.explore-aside-top3 h4 {
  font-family: 'Noto Serif KR', serif;
  font-size: 13px;
  color: var(--accent-dark);
  margin: 0 0 var(--space-3) 0;
  letter-spacing: 0.01em;
}
.explore-aside-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid rgba(212, 165, 116, 0.22);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 6px;
  text-align: left;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.explore-aside-top-row:hover {
  transform: translateX(-3px);
  box-shadow: 0 2px 8px rgba(212,165,116,0.20);
  border-color: var(--accent);
}
.top-emoji { font-size: 18px; }
.top-name { flex: 1; font-weight: 600; color: var(--text-primary); }
.top-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--primary);
}
.explore-aside-avg {
  display: flex;
  justify-content: space-between;
  padding: 8px 11px;
  margin-top: 8px;
  background: rgba(45,95,63,0.05);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.avg-label { color: var(--text-muted); font-weight: 500; }
.avg-value {
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* 시군 상세 카드 */
.explore-city-card {
  background: #fff;
  border: 1px solid rgba(45, 95, 63, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 4px 14px rgba(45, 95, 63, 0.08);
}
.explore-city-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3);
}
.explore-city-rank {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-pill);
}
.explore-city-card-header h3 {
  font-family: 'Noto Serif KR', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}
.explore-city-value-big {
  font-family: 'Noto Serif KR', serif;
  font-size: 38px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.explore-city-value-big .unit {
  font-size: 16px;
  font-weight: 600;
  opacity: 0.7;
  margin-left: 4px;
}
.explore-city-context {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed rgba(0,0,0,0.10);
}
.explore-city-quantile {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: #fff;
}

/* Raw 블록 */
.explore-raw-block {
  margin-bottom: var(--space-3);
}
.explore-raw-block h4 {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px 0;
}
.raw-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  border-bottom: 1px dotted rgba(0,0,0,0.06);
}
.raw-item:last-of-type { border-bottom: none; }
.raw-item--highlight {
  background: rgba(45, 95, 63, 0.07);
  border-radius: var(--radius-sm);
  border-bottom: none !important;
  margin-top: 4px;
}
.raw-item--highlight .raw-value {
  font-weight: 700;
  color: var(--primary);
}
.raw-label { color: var(--text-muted); }
.raw-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
}
.raw-note {
  font-size: 10.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 2px 8px 6px 8px;
}
.raw-empty-note {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-3);
  font-style: italic;
}

.explore-city-go-btn {
  width: 100%;
  margin-top: var(--space-3);
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.explore-city-go-btn:hover {
  background: var(--primary);
  color: #fff;
}
.explore-aside-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 8px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.explore-unpin {
  font-family: inherit;
  font-size: 10.5px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  color: var(--text-muted);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.explore-unpin:hover { color: var(--primary); border-color: var(--primary); }

/* 반응형 */
@media (max-width: 1280px) {
  .explore-main {
    grid-template-columns: 220px minmax(0, 1fr) 300px;
  }
}
@media (max-width: 1100px) {
  .explore-main {
    grid-template-columns: 220px 1fr;
  }
  .explore-aside { display: none; }
}
@media (max-width: 820px) {
  .explore-main {
    grid-template-columns: 1fr;
  }
  .explore-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(45,95,63,0.14);
    max-height: 280px;
  }
  .explore-main-panel { padding: var(--space-4); }
}