/* ========================================= */
/* [0. Àü¿ª º¯¼ö ¹× Ä÷¯ ½Ã½ºÅÛ]             */
/* ========================================= */
:root {
  /* 1. ±âº» ¹× ºê·£µå Ä÷¯ */
  --primary: #0d1b2a;
  --accent: #6c5ce7;
  --accentt: #0052d4;
  --danger: #d00000;
  --gold: #ff8c00;

  /* 2. ¹è°æ ¹× Å׵θ® °øÅë */
  --border: rgba(0, 0, 0, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.98);

  /* 3. Å׸¶º° Ä÷¯¼Â */
  /* [District] ÇàÁ¤±¸¿ª - ±×¸° */
  --district: #008a3d;
  --dist-main: #00b894;
  --dist-dark: #006266;
  --dist-bg: #f0fdf4;
  --dist-grad: linear-gradient(135deg, #00b894 0%, #55efc4 100%);

  /* [Analysis] ºÐ¼® - ¹ÙÀ̿÷¿ */
  --analysis: #6a11cb;

  /* [Point] Á¡ µ¥ÀÌÅÍ - ¹ÎÆ®/½Ã¾È */
  --point-bg: #fef9e7;
  --point-accent: #f39c12;
  --point-main: #00d2d3;
  --point-dark: #2c3e50;
  --point-light: #e0f7fa;
  --point-gradient: linear-gradient(135deg, #00d2d3 0%, #54a0ff 100%);

  /* [Polygon/Poly] ¸é ºÐ¼® - ¿À¼Ç ºí·ç */
  --poly-main: #0984e3;
  --poly-dark: #2d3436;
  --poly-bg: #eeffff;
  --poly-grad: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%);

  /* [Report] ¸®Æ÷Æ® - ºê¶óÀÌÆ® ºí·ç */
  --report-main: #2980b9;
  --report-dark: #2c3e50;
  --report-bg: #ebf5fb;
  --report-grad: linear-gradient(135deg, #3498db 0%, #2980b9 100%);

  /* [Save] ÀúÀå - ¼±¼Â ¿À·»Áö */
  --save-main: #e17055;
  --save-dark: #d35400;
  --save-bg: #fff5eb;
  --save-grad: linear-gradient(135deg, #e17055 0%, #fab1a0 100%);
}

/* ========================================= */
/* [1. °øÅë UI ÄÄÆ÷³ÍÆ® (Base Styles)]       */
/* ========================================= */

/* 1-1. »çÀ̵å¹Ù ÄÁÅ×ÀÌ³Ê °øÅë */
.gis-sidebar {
  position: fixed;
  right: 80px;
  width: 300px;
  z-index: 9998;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 15px;
  height: auto; /* ÀÚµ¿ ³ôÀÌ */
  display: block;
  overflow-y: auto;
  box-sizing: border-box;
  /* ¡å¡å¡å [Ãß°¡ÇÒ ÄÚµå] ¡å¡å¡å */
  touch-action: manipulation; /* ´õºí ÅÇ È®´ë ¹æÁö */
  user-select: none; /* ÅؽºÆ® ¼±Åà ¹æÁö */
  -webkit-user-select: none;
  /* ¡ã¡ã¡ã [¿©±â±îÁö Ãß°¡] ¡ã¡ã¡ã */
}

/* »çÀ̵å¹Ù ¼û±è »óÅ */
.gis-sidebar.collapsed {
  transform: translateX(30px);
  opacity: 0;
  pointer-events: none;
}

/* 1-2. Åä±Û ¹öÆ° °øÅë */
.control-toggle-btn {
  position: fixed;
  right: 20px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  /* ¡å¡å¡å [Ãß°¡ÇÒ ÄÚµå] ¡å¡å¡å */
  touch-action: manipulation; /* ´õºí ÅÇ È®´ë ¹æÁö (ÇÙ½É) */
  user-select: none; /* ¹öÆ° ÅؽºÆ®/¾ÆÀÌÄÜ ¼±Åà ¹æÁö */
  -webkit-user-select: none; /* »çÆĸ®/Å©·Ò ȣȯ */
  -webkit-tap-highlight-color: transparent; /* ÅÍÄ¡ ½Ã ÆĶõ ¹Ú½º Á¦°Å */
  /* ¡ã¡ã¡ã [¿©±â±îÁö Ãß°¡] ¡ã¡ã¡ã */
}
.control-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.control-toggle-btn svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* 1-3. °øÅë ŸÀÌÆ÷±×·¡ÇÇ & ¹öÆ° */
.vivid-header {
  border-bottom: 3px solid var(--primary);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.vivid-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
}
.gis-btn {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  color: white !important;
  cursor: pointer;
  font-weight: 700;
  font-size: 11px;
  margin-top: 10px;
  transition: 0.2s;
  background: var(--primary);
}
.gis-btn:hover {
  filter: brightness(1.1);
}

/* ÀÔ·Â ÇÊµå °øÅë */
input,
select {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  width: 100%;
  box-sizing: border-box;
}
input[type="color"] {
  width: 35px;
  height: 28px;
  padding: 1px;
  cursor: pointer;
  border: 1px solid var(--border);
}

/* ±âŸ À¯Æ¿¸®Æ¼ */
.compass-control {
  margin-top: 10px !important;
  margin-right: 30px !important;
}
.icon-btn {
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  color: #666;
  transition: color 0.2s;
}
.icon-btn:hover {
  color: var(--danger);
}
.toggle-arrow {
  transition: transform 0.2s;
  font-size: 9px;
}
.section-label {
  font-size: 10px;
  font-weight: 800;
  margin: 15px 0 6px;
  text-transform: uppercase;
  border-left: 4px solid #ccc;
  padding-left: 8px;
}
label {
  display: block;
  font-size: 10px;
  margin-top: 8px;
  color: #666;
  font-weight: 600;
}
.flex-row {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 4px;
}
.half-btn {
  flex: 1;
}
.del-btn {
  background: #95a5a6;
}
.inner-section {
  display: none;
  margin-top: 8px;
  border-top: 1px dashed #eee;
  padding-top: 6px;
}
.inner-section.open {
  display: block;
}
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================= */
/* [2. Layout System] À§Ä¡ Á¤·Ä ¸ðÀ½          */
/* ========================================= */

/* 2-1. »çÀ̵å¹Ù À§Ä¡ ¹× ÃÖ´ë ³ôÀÌ (Top ¼ø¼­ Á¤·Ä) */
#district-sidebar {
  top: 180px;
  max-height: calc(100vh - 200px);
}

#analysis-sidebar {
  top: 180px;
  max-height: calc(100vh - 200px);
}

#poly-sidebar {
  top: 180px;
  max-height: calc(100vh - 200px);
}

#vis-sidebar {
  top: 180px;
  /* ÇÊ¿ä ½Ã max-height Ãß°¡ °¡´É */
}

#point-sidebar {
  top: 180px;
  max-height: calc(100vh - 200px);
}

#toggle-chartupload-btn {
  top: 180px;
}

#report-sidebar {
  top: 180px;
  max-height: calc(100vh - 200px);
}

#chartsave-sidebar,
#save-sidebar {
  top: 180px;
  max-height: calc(100vh - 200px);
}

/* 2-2. Åä±Û ¹öÆ° À§Ä¡ (Top ¼ø¼­ Á¤·Ä) */
#toggle-district-btn {
  top: 180px;
}
#toggle-analysis-btn {
  top: 240px;
} /* Poly¿Í Analysis °øÀ¯ */
#toggle-point-btn {
  top: 300px;
}
#toggle-chartreport-btn {
  top: 240px;
} /* Chart Report */
#toggle-report-btn {
  top: 360px;
}
#toggle-chartsave-btn {
  top: 300px;
}
#toggle-save-btn {
  top: 420px;
}

#toggle-chartupload-btn {
  top: 180px;
}

/* ³»ºÎ Ä«µå °£ ¿©¹é Á¤¸® */
.poly-layer-card,
.point-layer-card,
.save-card,
.report-card {
  margin-bottom: 10px;
}

/* ========================================= */
/* [3. Theme & Content] ±â´Éº° ½ºÅ¸ÀÏ »ó¼¼    */
/* ========================================= */

/* ----------------------------------------- */
/* 3-A. ÇàÁ¤±¸¿ª (District) */
/* ----------------------------------------- */
/* Å׸¶ ½ºÅ¸ÀÏ */
.gis-sidebar.district-theme {
  border-top: 4px solid var(--dist-main);
  background: linear-gradient(to bottom, #ffffff 60%, var(--dist-bg) 100%);
  border-right: 1px solid #d1fae5;
  box-shadow: 0 10px 25px rgba(0, 184, 148, 0.15);
}
/* Åä±Û ¹öÆ° ½ºÅ¸ÀÏ */
#toggle-district-btn {
  background: var(--dist-grad) !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(0, 184, 148, 0.4);
}
#toggle-district-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 184, 148, 0.5);
}
#toggle-district-btn svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* ³»ºÎ ¿ä¼Ò */
.district-theme .vivid-header {
  border-bottom: 2px solid var(--dist-main);
  margin-bottom: 15px;
  padding-bottom: 10px;
}
.district-theme .vivid-title {
  color: var(--dist-dark) !important;
  display: flex;
  align-items: center;
}
.district-theme .vivid-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--dist-main);
  margin-right: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 184, 148, 0.2);
}
.district-label {
  background: var(--dist-bg);
  color: var(--dist-dark);
  border-left: 3px solid var(--dist-main);
  padding: 8px 12px;
  font-weight: 800;
  font-size: 11px;
  border-radius: 0 4px 4px 0;
  margin: 15px 0 8px;
}
.district-theme input {
  border: 1px solid #a7f3d0;
  background: #f0fdf4;
  color: var(--dist-dark);
}
.district-theme input:focus {
  border-color: var(--dist-main);
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.15);
}
.district-theme .gis-btn,
.district-btn {
  background: var(--dist-grad) !important;
  box-shadow: 0 4px 10px rgba(0, 184, 148, 0.3);
}
.district-theme .gis-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 184, 148, 0.4);
}
/* ¸®½ºÆ® */
.manualInputList {
  max-height: 180px;
  overflow-y: auto;
  background: #f9f9f9;
  border: 1px solid #eee;
  margin-top: 5px;
  border-radius: 4px;
}
.list-header {
  display: flex;
  background: #eee;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: bold;
  position: sticky;
  top: 0;
}
.district-input-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
  gap: 5px;
  font-size: 12px;
}
.dist-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dist-input {
  width: 80px !important;
  padding: 4px !important;
  margin-bottom: 0;
}

/* ----------------------------------------- */
/* 3-C. Á¡ µ¥ÀÌÅÍ (Point) */
/* ----------------------------------------- */
/* Å׸¶ ½ºÅ¸ÀÏ */
.gis-sidebar.point-theme {
  border-top: 4px solid var(--point-main);
  background: linear-gradient(to bottom, #ffffff 50%, #f0faff 100%);
  border-right: 1px solid #e1e8ee;
}
/* Åä±Û ¹öÆ° */
#toggle-point-btn {
  background: var(--point-gradient) !important;
  box-shadow: 0 3px 10px rgba(0, 210, 211, 0.3);
}
#toggle-point-btn:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 5px 15px rgba(0, 210, 211, 0.6) !important;
}
#toggle-point-btn svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* ³»ºÎ ¿ä¼Ò */
.gis-sidebar.point-theme .vivid-header {
  border-bottom: 2px solid var(--point-main) !important;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.gis-sidebar.point-theme .vivid-title {
  color: var(--point-dark) !important;
  display: flex;
  align-items: center;
  letter-spacing: -0.5px;
}
.gis-sidebar.point-theme .vivid-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--point-main);
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 8px var(--point-main);
}
.point-section-label {
  color: var(--point-dark);
  background: var(--point-light);
  border-left: 3px solid var(--point-main);
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 0 4px 4px 0;
  margin: 15px 0 10px;
  text-transform: uppercase;
}
.gis-sidebar.point-theme .gis-btn {
  background: var(--point-gradient) !important;
  box-shadow: 0 4px 12px rgba(0, 210, 211, 0.3);
}
.gis-sidebar.point-theme .gis-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 210, 211, 0.5);
}
.gis-sidebar.point-theme input,
.gis-sidebar.point-theme select {
  border: 1px solid #c7ecee;
  background-color: #f8fcfd;
  color: var(--point-dark);
}
.gis-sidebar.point-theme input:focus,
.gis-sidebar.point-theme select:focus {
  border-color: var(--point-main);
  background-color: white;
  box-shadow: 0 0 0 3px rgba(0, 210, 211, 0.15);
}
.point-theme .dist-input:focus {
  background-color: #fff;
  border-color: var(--point-main);
  box-shadow: 0 0 5px rgba(0, 210, 211, 0.2);
}
.gis-sidebar.point-theme input[type="file"] {
  background: #f0faff;
  border: 2px dashed #b2bec3;
  padding: 12px;
}
.gis-sidebar.point-theme input[type="file"]:hover {
  border-color: var(--point-main);
}
.gis-sidebar.point-theme input[type="file"]::file-selector-button {
  background: var(--point-dark);
  color: var(--point-main);
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  font-weight: 700;
  margin-right: 10px;
}
.gis-sidebar.point-theme input[type="file"]::file-selector-button:hover {
  background: var(--point-main);
  color: white;
}
/* ·¹À̾î Ä«µå */
.point-layer-card {
  background: white;
  border: 1px solid #dcede6;
  border-left: 4px solid var(--point-main);
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(44, 62, 80, 0.05);
  overflow: hidden;
}
.point-layer-card .layer-header {
  background: #f8fcfd;
  padding: 10px 12px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.point-layer-card .layer-title-input {
  color: var(--point-dark);
  font-weight: 700;
}
.point-layer-card .layer-content {
  padding: 12px;
}
/* 1. Á¡ Å׸¶ ³» ¸ðµç ¹öÆ° ³ôÀÌ Ãà¼Ò */
.point-theme .gis-btn {
  padding: 8px 10px; /* »óÇÏ ¿©¹éÀ» 12px -> 8px·Î Ãà¼Ò */
  font-size: 11px; /* ±ÛÀÚ Å©±â À¯Áö */
  line-height: 1.2; /* ÁÙ °£°Ý Á¶Á¤ */
  min-height: 34px; /* ¹öÆ° ÃÖ¼Ò ³ôÀÌ Á¦ÇÑ (³Ê¹« ÀÛ¾ÆÁü ¹æÁö) */
  margin-top: 6px; /* ¹öÆ° °£ °£°Ýµµ Á¶±Ý ÁÙÀÓ */
}

/* 2. Á¡ Å׸¶ ³» ÀÔ·Ââ(Select, Input) ³ôÀ̵µ ¹öÆ°°ú ±ÕÇü ¸ÂÃã */
.point-theme .styled-select,
.point-theme input[type="text"],
.point-theme input[type="number"] {
  padding: 6px 8px;
  height: 34px; /* ¹öÆ°°ú ³ôÀÌ ÅëÀÏ */
}

/* 3. Ä÷¯ ÇÇÄ¿ ³ôÀÌ Á¶Á¤ */
.point-theme input[type="color"] {
  height: 34px;
  padding: 2px;
}

/* 10-2. ÇàÁ¤±¸¿ª(District) Å׸¶ - ±×¸° */
.district-theme .input-group-card {
  border-left: 4px solid #00b894;
  box-shadow: 0 4px 10px rgba(0, 184, 148, 0.05);
}
.district-theme .input-group-card:hover {
  border-color: #55efc4;
  box-shadow: 0 6px 15px rgba(0, 184, 148, 0.15);
}
.district-theme .card-desc span {
  color: #006266;
  font-weight: 700;
}

/* 10-3. ¸é(Polygon) Å׸¶ - ºí·ç */
.poly-theme .input-group-card,
.poly-layer-card {
  /* µ¿Àû »ý¼º ·¹À̾î */
  background: white;
  border: 1px solid #d1d8e0;
  border-left: 4px solid #0984e3;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(9, 132, 227, 0.05);
}
.poly-theme .input-group-card:hover,
.poly-layer-card:hover {
  box-shadow: 0 6px 15px rgba(9, 132, 227, 0.15);
  border-color: #74b9ff;
}
.poly-theme .card-desc span {
  color: #0984e3;
  font-weight: 700;
}

/* ----------------------------------------- */
/* 3-D. ¸é ºÐ¼® (Polygon/Poly) */
/* ----------------------------------------- */
/* Å׸¶ ½ºÅ¸ÀÏ */
.gis-sidebar.poly-theme {
  border-top: 4px solid var(--poly-main);
  background: linear-gradient(to bottom, #ffffff 60%, #f0f9ff 100%);
  border-right: 1px solid #d6eaff;
  box-shadow: 0 10px 25px rgba(9, 132, 227, 0.15);
}
/* Åä±Û ¹öÆ° (Analysis ¹öÆ° ID¸¦ ÀçÁ¤ÀÇÇÏ¿© »ç¿ë) */
#toggle-analysis-btn {
  /* Poly°¡ È°¼ºÈ­µÉ ¶§ ÆĶõ»ö Å׸¶ Àû¿ë */
  background: var(--poly-grad) !important;
  box-shadow: 0 4px 10px rgba(9, 132, 227, 0.4);
}
#toggle-analysis-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(9, 132, 227, 0.5);
}

/* ³»ºÎ ¿ä¼Ò */
.poly-theme .vivid-header {
  border-bottom: 2px solid var(--poly-main);
  margin-bottom: 15px;
  padding-bottom: 10px;
}
.poly-theme .vivid-title {
  color: var(--poly-main) !important;
  display: flex;
  align-items: center;
}
.poly-theme .vivid-title::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--poly-main);
  margin-right: 10px;
  filter: drop-shadow(0 2px 2px rgba(9, 132, 227, 0.3));
}
.poly-label {
  color: var(--poly-main);
  background: #e3f2fd;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  margin: 12px 0 6px;
  display: inline-block;
}
.poly-theme label {
  white-space: nowrap; /* ±ÛÀÚ ÁÙ¹Ù²Þ °­Á¦ ±ÝÁö */
  margin: 0 5px 0 0;
  display: flex;
  align-items: center;
  height: 34px; /* ÀÔ·Ââ ³ôÀÌ¿Í ¸ÂÃç ¼öÁ÷ Á¤·Ä */
  color: #333;
}
.poly-theme input,
.poly-theme select {
  border: 1px solid #b2bec3;
  background: #fff;
  color: #333;
  padding: 6px;
}
.poly-theme input:focus,
.poly-theme select:focus {
  border-color: var(--poly-main);
  box-shadow: 0 0 0 3px rgba(9, 132, 227, 0.15);
}
.poly-theme .gis-btn {
  padding: 0 10px;
  font-size: 11px;
  min-height: 34px; /* ³ôÀÌ 34px·Î °íÁ¤ */
  height: 34px;
  line-height: 34px; /* ÅؽºÆ® ¼öÁ÷ Áß¾Ó Á¤·Ä */
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.poly-theme .gis-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(9, 132, 227, 0.4);
}
/* ·¹À̾î Ä«µå */
.poly-layer-card {
  background: white;
  border: 1px solid #d1d8e0;
  border-left: 4px solid var(--poly-main);
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(9, 132, 227, 0.08);
  overflow: hidden;
  transition: transform 0.2s;
}
.poly-layer-card:hover {
  transform: translateX(2px);
}
.poly-layer-card .layer-header {
  background: #f4faff;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e1e8ef;
  color: var(--poly-main);
  font-weight: 700;
  font-size: 13px;
}
.poly-layer-card .layer-content {
  padding: 12px;
}

/* ========================================= */
/* [8. Report Module Redesign]               */
/* ========================================= */

/* 8-1. ¸®Æ÷Æ® Å׸¶ ¹è°æ (¿¬ÇÑ ºí·ç ƾƮ) */
.gis-sidebar.report-theme {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    #e3f2fd 100%
  );
  border-top: 5px solid #3498db;
  border-right: 1px solid #bbdefb;
}

/* 8-2. ¸®Æ÷Æ® Ä«µå ½ºÅ¸ÀÏ (ÆĶõ»ö Æ÷ÀÎÆ®) */
.report-theme .input-group-card {
  border-left: 4px solid #3498db; /* Blue accent */
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.05);
}
.report-theme .input-group-card:hover {
  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.15);
  border-color: #aed6f1;
}

/* 8-3. ¸®Æ÷Æ® ¼³¸í ÅؽºÆ® °­Á¶»ö */
.report-theme .card-desc span {
  color: #2980b9; /* Darker Blue */
}

/* 8-4. ½½·Ô Àü¼Û ¹öÆ° (Blue Gradients) */
.report-btn-slot1 {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
  margin-bottom: 8px;
}
.report-btn-slot2 {
  background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;
  box-shadow: 0 4px 10px rgba(41, 128, 185, 0.3);
}

.report-btn-slot1:hover,
.report-btn-slot2:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* ----------------------------------------- */
/* 3-F. ÀúÀå (Save & ChartSave) */
/* ----------------------------------------- */
/* Å׸¶ ½ºÅ¸ÀÏ */
.gis-sidebar.save-theme {
  border-top: 4px solid var(--save-main);
  background: linear-gradient(to bottom, #ffffff 60%, var(--save-bg) 100%);
  border-right: 1px solid #ffccb0;
  box-shadow: 0 10px 25px rgba(211, 84, 0, 0.15);
}
/* Åä±Û ¹öÆ° */
#toggle-save-btn,
#toggle-chartsave-btn {
  background: var(--save-grad) !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(211, 84, 0, 0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
#toggle-save-btn:hover,
#toggle-chartsave-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(211, 84, 0, 0.6);
}
#toggle-save-btn svg,
#toggle-chartsave-btn svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Â÷Æ® ¾÷·Îµå Åä±Û (Analysis¿Í À¯»çÇÏÁö¸¸ À§Ä¡»ó ¿©±â ¹èÄ¡) */
#toggle-chartupload-btn {
  background: linear-gradient(135deg, var(--analysis) 0%, #4a00e0 100%);
}

/* ³»ºÎ ¿ä¼Ò */
.save-theme .vivid-header {
  border-bottom: 2px solid var(--save-main);
  margin-bottom: 15px;
  padding-bottom: 10px;
}
.save-theme .vivid-title {
  color: var(--save-dark) !important;
  display: flex;
  align-items: center;
}
.save-theme .vivid-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--save-main);
  margin-right: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(225, 112, 85, 0.2);
}
.save-card {
  background: white;
  border: 1px solid #f3d0c2;
  border-left: 4px solid var(--save-main);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 2px 5px rgba(211, 84, 0, 0.05);
  transition: transform 0.2s;
}
.save-card:hover {
  transform: translateX(2px);
}
.save-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.save-card-icon {
  font-size: 18px;
  margin-right: 8px;
  color: var(--save-main);
}
.save-card-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--save-dark);
}
.save-card-desc {
  font-size: 11px;
  color: #888;
  margin-bottom: 12px;
  line-height: 1.4;
  display: block;
}
.save-theme .gis-btn {
  background: var(--save-grad) !important;
  box-shadow: 0 4px 10px rgba(211, 84, 0, 0.3);
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  font-weight: 700;
}
.save-theme .gis-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(211, 84, 0, 0.4);
  filter: brightness(1.05);
}

/* 9-1. ÀúÀå Å׸¶ÀÇ Ä«µå ½ºÅ¸ÀÏ (¿À·»Áö Æ÷ÀÎÆ®) */
.gis-sidebar.save-theme {
  /* ¹è°æ¿¡ ÀºÀºÇÑ ¿À·»Áö ƾƮ */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    #fff3e0 100%
  );
  border-top: 5px solid #e17055;
  border-right: 1px solid #ffe0b2;
}

/* 9-2. Ä«µå Å׵θ® »ö»ó º¯°æ (º¸¶ó»ö -> ¿À·»Áö»ö) */
.save-theme .input-group-card {
  border-left: 4px solid #e17055; /* Orange Accent */
  box-shadow: 0 4px 10px rgba(225, 112, 85, 0.05);
}

.save-theme .input-group-card:hover {
  box-shadow: 0 6px 15px rgba(225, 112, 85, 0.15);
  border-color: #ffccbc;
}

/* 9-3. ¼³¸í ÅؽºÆ® °­Á¶»ö º¯°æ */
.save-theme .card-desc span {
  color: #d35400; /* Dark Orange */
}

/* 9-4. ÀúÀå ¹öÆ° ½ºÅ¸ÀÏ °­È­ */
.save-btn-action {
  background: linear-gradient(135deg, #e17055 0%, #fab1a0 100%) !important;
  box-shadow: 0 4px 10px rgba(225, 112, 85, 0.3);
  border: none;
  transition: all 0.2s ease;
}
.save-btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(225, 112, 85, 0.4);
  filter: brightness(1.05);
}

/* ========================================= */
/* [7. Analysis & Data Module Redesign]      */
/* ========================================= */

/* 7-1. ºÐ¼® Å׸¶ »ö»ó º¸°­ (dz¼ºÇÑ ´À³¦) */
.gis-sidebar.analysis-theme {
  /* ¹è°æ¿¡ ÀºÀºÇÑ ¹ÙÀ̿÷¿ ƾƮ Ãß°¡ */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    #f3e5f5 100%
  );
  border-top: 5px solid #8e44ad;
  border-right: 1px solid #e1bee7;
}

/* 7-2. ÀÔ·Â ±×·ì Ä«µå (ChartSaveÀÇ save-card¿Í À¯»çÇÑ ¿ªÇÒ) */
.input-group-card {
  background: white;
  border: 1px solid #ede7f6;
  border-left: 4px solid #9b59b6; /* ¹ÙÀ̿÷¿ Æ÷ÀÎÆ® */
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(155, 89, 182, 0.05);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.input-group-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(155, 89, 182, 0.15);
  border-color: #d1c4e9;
}

/* 7-3. ŸÀÌÆ÷±×·¡ÇÇ (¼³¸í±Û) */
.card-desc {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 10px;
  line-height: 1.4;
}
.card-desc span {
  color: #8e44ad;
  font-weight: 800;
}

/* 7-4. ÆÄÀÏ ¾÷·Îµå ¹öÆ° Ä¿½ºÅÒ */
.custom-file-input {
  width: 100%;
  font-size: 11px;
}
.custom-file-input::file-selector-button {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  margin-right: 10px;
  transition: 0.2s;
}
.custom-file-input::file-selector-button:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

/* 7-5. ¼¿·ºÆ® ¹Ú½º ½ºÅ¸Àϸµ */
.styled-select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1c4e9;
  border-radius: 6px;
  background-color: #fcfbfd;
  color: #4a148c;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
.styled-select:focus {
  border-color: #8e44ad;
  box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.1);
}

/* 7-6. ¸ð´ø Åä±Û ½ºÀ§Ä¡ (üũ¹Ú½º ´ëü) */
.toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.toggle-label {
  font-size: 12px;
  font-weight: 700;
  color: #555;
}

/* ½ºÀ§Ä¡ º»Ã¼ */
.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
/* üũµÇ¾úÀ» ¶§ »ö»ó (¹ÙÀ̿÷¿) */
input:checked + .slider {
  background-color: #8e44ad;
}
input:checked + .slider:before {
  transform: translateX(16px);
}

/* 7-7. ¼ýÀÚ ÀÔ·Â ¹× Ä÷¯ ÀÔ·Â Çà */
.row-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.mini-input {
  width: 60px;
  padding: 5px;
  text-align: center;
  border: 1px solid #d1c4e9;
  border-radius: 4px;
  color: #8e44ad;
  font-weight: 700;
}
/* ========================================= */
/* [4. Animations & Utilities]               */
/* ========================================= */
/* ½ºÅ©·Ñ¹Ù */
.gis-sidebar::-webkit-scrollbar {
  width: 6px;
}
.gis-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.gis-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.gis-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes slideInRight {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.gis-sidebar:not(.collapsed) {
  animation: slideInRight 0.3s ease-out;
}
.gis-btn:active {
  transform: scale(0.98);
}

/* ========================================= */
/* [¼¿·ºÆ®¹Ú½º       */
/* ========================================= */

/* ·¹À̾î Çì´õ ¹èÄ¡ */
.layer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  cursor: pointer;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* »èÁ¦ ¹öÆ° (X) µðÀÚÀÎ */
.layer-remove-btn {
  background: none;
  border: none;
  color: #ff7675;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition:
    transform 0.2s,
    color 0.2s;
}

.layer-remove-btn:hover {
  color: #ff4d4d;
  transform: scale(1.2);
}

/* À§°æµµ ¼¿·ºÆ® ¹Ú½º ²Ù¹Ì±â */
.geo-select-group {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.select-wrapper {
  position: relative;
  flex: 1;
}

.select-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: bold;
  color: #54a0ff;
  text-transform: uppercase;
  pointer-events: none;
}

.gis-select {
  width: 100%;
  padding: 6px 6px 6px 30px; /* ¾ÆÀÌÄÜ °ø°£ È®º¸ */
  background: #2d3436;
  border: 1px solid #636e72;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  outline: none;
}

.gis-select:focus {
  border-color: #54a0ff;
}

/* ±âŸ ÀÔ·Â ¿ä¼Ò */
.gis-input {
  background: #2d3436;
  border: 1px solid #636e72;
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
}

/* ========================================= */
/* [END OF CSS]                              */
/* ========================================= */
/*¹ü·Ê*/
.legend-container {
  position: fixed;
  bottom: 25px; /* ÇÏ´Ü ¿©¹é ¾à°£ Á¶Á¤ */
  right: 20px; /* ¿ÞÂÊ(left)¿¡¼­ ¿À¸¥ÂÊ(right)À¸·Î º¯°æ */
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;

  /* [Áß¿ä] 1024px À̻󿡼­µµ º¸À̵µ·Ï z-index¸¦ »çÀ̵å¹Ù¿Í ºñ½ÁÇÏ°Ô ³ôÀÓ */
  z-index: 2500;

  /* ¸¶¿ì½º Ŭ¸¯ÀÌ ¹ü·Ê µÚÀÇ Áöµµ·Î Àü´ÞµÇÁö ¾Êµµ·Ï ¼³Á¤ (ÇÊ¿ä ½Ã) */
  pointer-events: auto;
}

.legend {
  padding: 15px;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* ±×¸²ÀÚ °­È­ */
  border-radius: 8px;
  font-size: 11px;
  min-width: 150px;
}

.legend b {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}
.legend-choro-item {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
}
.legend-choro-box {
  width: 18px;
  height: 12px;
  border: 1px solid #999;
}

.nested-container {
  position: relative;
  width: 120px;
  height: 90px;
  margin-top: 10px;
}
.nested-circle-outer {
  position: absolute;
  border-radius: 50%;
  border: 1.2px solid #333;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
}
.nested-line {
  position: absolute;
  border-top: 1px dotted #666;
  width: 40px;
}
.nested-value {
  position: absolute;
  left: 45px;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 10px;
  white-space: nowrap;
}

.leaflet-tooltip-own {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 800;
  color: #000;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff,
    0px 0px 3px #fff;
  white-space: nowrap;
}
.leaflet-tooltip-bottom:before {
  display: none !important;
}
/* 2. Ãàô(Scale) ¾È º¸ÀÌ´Â ¹®Á¦ ÇØ°á */
@media (max-width: 1024px) {
  .leaflet-bottom.leaflet-left {
    z-index: 9999 !important; /* »çÀ̵å¹Ùº¸´Ù ¹«Á¶°Ç À§¿¡ Ç¥½Ã */
    display: flex !important; /* ¼û°ÜÁü ¹æÁö */
    position: fixed !important; /* È­¸é °íÁ¤ */
    bottom: 35px !important; /* È­¸é ¹Ù´Ú¿¡¼­ 35px ¶ç¿ö¼­ ºê¶ó¿ìÀú UI¿¡ °¡¸®Áö ¾Ê°Ô ÇÔ */
    left: 15px !important; /* ¿ÞÂÊ ¿©¹é */
  }
}