@import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');
@import url('../../../css/basic-tools.css?v=20260924-3');

.jeju-travel-tool {
  max-width: 920px;

  margin: 0 auto;
}

/* =========================================================
   공통
   ========================================================= */

.jeju-hero,
.jeju-control-card,
.jeju-point-card,
.jeju-map-card,
.jeju-region-section,
.jeju-detail-section,
.jeju-guide,
.jeju-source {
  margin-top: 14px;

  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.78);
}

/* =========================================================
   Hero
   ========================================================= */

.jeju-hero {
  overflow: hidden;

  padding: 18px;

  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.09),
    rgba(16, 185, 129, 0.05) 52%,
    rgba(251, 191, 36, 0.08)
  );
}

.jeju-hero-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;
}

.jeju-eyebrow {
  display: block;

  margin-bottom: 4px;

  color: #0284c7;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.13em;
}

.jeju-hero h2 {
  margin: 0;

  color: #0f172a;

  font-size: 22px;

  letter-spacing: -0.04em;
}

.jeju-hero p {
  max-width: 590px;

  margin: 7px 0 0;

  color: #64748b;

  font-size: 12px;
  line-height: 1.55;
}

.jeju-hero-icon {
  flex: 0 0 auto;

  font-size: 42px;
}

.jeju-load-status {
  margin-top: 12px;
  padding: 7px 9px;

  border-radius: 9px;

  background: rgba(255, 255, 255, 0.65);

  color: #64748b;

  font-size: 12px;

  text-align: center;
}

.jeju-load-status.is-ready {
  color: #047857;
}

.jeju-load-status.is-error {
  color: #b91c1c;
}

/* =========================================================
   공통 헤더
   ========================================================= */

.jeju-section-title {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 11px;
}

.jeju-section-title strong,
.jeju-section-title span {
  display: block;
}

.jeju-section-title strong {
  color: #0f172a;

  font-size: 14px;
}

.jeju-section-title span {
  margin-top: 2px;

  color: #94a3b8;

  font-size: 12px;
}

/* =========================================================
   날짜 / 시간대
   ========================================================= */

.jeju-control-card {
  padding: 15px;
}

.jeju-date-tabs {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 6px;
}

.jeju-date-tab {
  min-width: 0;

  padding: 9px 4px;

  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 11px;

  background: rgba(15, 23, 42, 0.025);

  color: #475569;

  font: inherit;

  cursor: pointer;
}

.jeju-date-tab strong,
.jeju-date-tab span {
  display: block;
}

.jeju-date-tab strong {
  font-size: 12px;
}

.jeju-date-tab span {
  margin-top: 2px;

  color: #94a3b8;

  font-size: 12px;
}

.jeju-date-tab.is-active {
  border-color: rgba(14, 165, 233, 0.28);

  background: #0284c7;

  color: #fff;

  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.16);
}

.jeju-date-tab.is-active span {
  color: rgba(255, 255, 255, 0.78);
}

.jeju-period-block {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 12px;
}

.jeju-period-label {
  flex: 0 0 auto;

  color: #64748b;

  font-size: 12px;
  font-weight: 700;
}

.jeju-period-tabs {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 5px;

  flex: 1;
}

.jeju-period-tabs button {
  padding: 7px 5px;

  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 9px;

  background: rgba(15, 23, 42, 0.025);

  color: #475569;

  font: inherit;
  font-size: 12px;

  cursor: pointer;
}

.jeju-period-tabs small {
  display: block;

  margin-top: 1px;

  color: #94a3b8;

  font-size: 12px;
}

.jeju-period-tabs button.is-active {
  border-color: rgba(14, 165, 233, 0.24);

  background: rgba(14, 165, 233, 0.1);

  color: #0369a1;

  font-weight: 700;
}

/* =========================================================
   여행 포인트
   ========================================================= */

.jeju-point-card {
  padding: 15px;
}

.jeju-point-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.jeju-point-head > div > span {
  display: block;

  color: #94a3b8;

  font-size: 12px;
}

.jeju-point-head > div > strong {
  display: block;

  margin-top: 2px;

  color: #0f172a;

  font-size: 16px;

  letter-spacing: -0.03em;
}

.jeju-period-badge {
  flex: 0 0 auto;

  padding: 5px 8px;

  border-radius: 999px;

  background: rgba(14, 165, 233, 0.08);

  color: #0369a1;

  font-size: 12px;
  font-weight: 700;
}

.jeju-travel-tips {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 7px;

  margin-top: 12px;
}

.jeju-tip {
  padding: 9px 10px;

  border-radius: 10px;

  background: rgba(15, 23, 42, 0.035);

  color: #475569;

  font-size: 12px;
  line-height: 1.45;
}

/* =========================================================
   지도
   ========================================================= */

.jeju-map-card {
  padding: 15px;
}

.jeju-status-legend {
  display: flex;

  align-items: center;

  gap: 7px;
}

.jeju-status-legend > span {
  display: flex;

  align-items: center;

  gap: 3px;

  color: #64748b;

  font-size: 12px;
}

.jeju-status-legend i {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}

.jeju-status-legend .good {
  background: #10b981;
}

.jeju-status-legend .watch {
  background: #f59e0b;
}

.jeju-status-legend .bad {
  background: #ef4444;
}

.jeju-map-wrap {
  overflow: hidden;

  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
}

.jeju-travel-map {
  height: 370px;

  background: #eaf2f1;
}

.jeju-travel-map .leaflet-tile-pane {
  filter: saturate(0.62) contrast(0.94) brightness(1.04);
}

.jeju-travel-map .leaflet-control-attribution {
  opacity: 0.65;

  font-size: 12px;
}

/* =========================================================
   지도 마커
   ========================================================= */

.jeju-weather-marker {
  border: 0 !important;

  background: transparent !important;
}

.jeju-marker {
  position: relative;

  min-width: 66px;

  padding: 5px 7px 6px;

  border: 2px solid #fff;
  border-radius: 11px;

  background: rgba(255, 255, 255, 0.94);

  color: #334155;

  text-align: center;

  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.18);

  transform: translate(-50%, -50%);

  cursor: pointer;

  backdrop-filter: blur(7px);
}

.jeju-marker::after {
  content: '';

  position: absolute;

  left: 50%;
  bottom: -5px;

  width: 8px;
  height: 8px;

  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;

  background: inherit;

  transform: translateX(-50%) rotate(45deg);
}

.jeju-marker.good {
  border-top-color: #10b981;
}

.jeju-marker.watch {
  border-top-color: #f59e0b;
}

.jeju-marker.bad {
  border-top-color: #ef4444;
}

.jeju-marker.is-selected {
  box-shadow:
    0 0 0 3px rgba(2, 132, 199, 0.22),
    0 5px 15px rgba(15, 23, 42, 0.22);
}

.jeju-marker-top {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 3px;
}

.jeju-marker-icon {
  font-size: 12px;
}

.jeju-marker strong {
  font-size: 12px;

  white-space: nowrap;
}

.jeju-marker small {
  display: block;

  margin-top: 1px;

  color: #64748b;

  font-size: 12px;

  white-space: nowrap;
}

/* =========================================================
   지역 비교
   ========================================================= */

.jeju-region-section {
  padding: 15px;
}

.jeju-region-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 7px;
}

.jeju-region-card {
  min-width: 0;

  padding: 11px 8px;

  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 13px;

  background: rgba(15, 23, 42, 0.025);

  color: inherit;

  text-align: left;

  cursor: pointer;
}

.jeju-region-card.good {
  border-top: 3px solid #10b981;
}

.jeju-region-card.watch {
  border-top: 3px solid #f59e0b;
}

.jeju-region-card.bad {
  border-top: 3px solid #ef4444;
}

.jeju-region-card.is-selected {
  background: rgba(14, 165, 233, 0.07);

  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.14);
}

.jeju-region-card-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 5px;
}

.jeju-region-card-head span {
  color: #64748b;

  font-size: 12px;
}

.jeju-region-card-head i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
}

.jeju-region-card.good i {
  background: #10b981;
}

.jeju-region-card.watch i {
  background: #f59e0b;
}

.jeju-region-card.bad i {
  background: #ef4444;
}

.jeju-region-card h4 {
  margin: 4px 0 0;

  font-size: 13px;
}

.jeju-region-weather {
  display: flex;

  align-items: center;

  gap: 4px;

  margin-top: 7px;
}

.jeju-region-weather > span {
  font-size: 20px;
}

.jeju-region-weather strong {
  font-size: 12px;
}

.jeju-region-weather small {
  display: block;

  color: #94a3b8;

  font-size: 12px;
}

.jeju-region-values {
  display: grid;

  gap: 3px;

  margin-top: 7px;
}

.jeju-region-values div {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 4px;

  color: #64748b;

  font-size: 12px;
}

.jeju-region-values strong {
  color: #334155;

  font-size: 12px;
}

/* =========================================================
   상세
   ========================================================= */

.jeju-detail-section {
  padding: 16px;
}

.jeju-detail-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}

.jeju-detail-head span {
  color: #0284c7;

  font-size: 12px;
  font-weight: 700;
}

.jeju-detail-head h3 {
  margin: 2px 0 0;

  font-size: 20px;

  letter-spacing: -0.03em;
}

.jeju-detail-head p {
  margin: 3px 0 0;

  color: #94a3b8;

  font-size: 12px;
}

.jeju-detail-status {
  flex: 0 0 auto;

  padding: 5px 8px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;
}

.jeju-detail-status.good {
  background: rgba(16, 185, 129, 0.1);

  color: #047857;
}

.jeju-detail-status.watch {
  background: rgba(245, 158, 11, 0.12);

  color: #b45309;
}

.jeju-detail-status.bad {
  background: rgba(239, 68, 68, 0.1);

  color: #b91c1c;
}

.jeju-detail-metrics {
  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 6px;

  margin-top: 14px;
}

.jeju-detail-metrics > div {
  padding: 9px 5px;

  border-radius: 10px;

  background: rgba(15, 23, 42, 0.035);

  text-align: center;
}

.jeju-detail-metrics span,
.jeju-detail-metrics strong {
  display: block;
}

.jeju-detail-metrics span {
  color: #94a3b8;

  font-size: 12px;
}

.jeju-detail-metrics strong {
  margin-top: 3px;

  color: #334155;

  font-size: 12px;
}

.jeju-detail-comment {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 11px;
  padding: 10px;

  border-radius: 11px;

  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.055),
    rgba(16, 185, 129, 0.035)
  );
}

.jeju-detail-comment > span {
  flex: 0 0 auto;

  font-size: 27px;
}

.jeju-detail-comment strong {
  display: block;

  font-size: 12px;
}

.jeju-detail-comment p {
  margin: 2px 0 0;

  color: #64748b;

  font-size: 12px;
  line-height: 1.45;
}

/* =========================================================
   시간별
   ========================================================= */

.jeju-hourly-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-top: 15px;
  margin-bottom: 8px;
}

.jeju-hourly-head strong {
  font-size: 12px;
}

.jeju-hourly-head span {
  color: #94a3b8;

  font-size: 12px;
}

.jeju-hourly-list {
  display: flex;

  gap: 6px;

  overflow-x: auto;

  padding-bottom: 3px;
}

.jeju-hour-card {
  flex: 0 0 84px;

  padding: 9px 6px;

  border: 1px solid rgba(15, 23, 42, 0.065);
  border-radius: 11px;

  background: rgba(255, 255, 255, 0.8);

  text-align: center;
}

.jeju-hour-time {
  color: #64748b;

  font-size: 12px;
  font-weight: 700;
}

.jeju-hour-icon {
  margin-top: 4px;

  font-size: 20px;
}

.jeju-hour-temp {
  margin-top: 2px;

  color: #0f172a;

  font-size: 12px;
  font-weight: 800;
}

.jeju-hour-weather {
  overflow: hidden;

  margin-top: 1px;

  color: #94a3b8;

  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.jeju-hour-sub {
  margin-top: 5px;

  color: #64748b;

  font-size: 12px;
  line-height: 1.45;
}

/* =========================================================
   Guide
   ========================================================= */

.jeju-guide {
  padding: 14px 15px;
}

.jeju-guide summary {
  cursor: pointer;

  font-size: 12px;
  font-weight: 700;
}

.jeju-guide-body {
  margin-top: 10px;

  color: #64748b;

  font-size: 12px;
  line-height: 1.65;
}

.jeju-guide-body p {
  margin: 6px 0;
}

/* =========================================================
   Source
   ========================================================= */

.jeju-source {
  padding: 13px 15px;

  color: #64748b;

  font-size: 12px;
  line-height: 1.55;
}

.jeju-source strong {
  color: #334155;
}

.jeju-source p {
  margin: 4px 0 0;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 760px) {
  .jeju-region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jeju-region-card:last-child {
    grid-column: 1 / -1;
  }

  .jeju-detail-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .jeju-hero-icon {
    font-size: 32px;
  }

  .jeju-hero h2 {
    font-size: 19px;
  }

  .jeju-date-tabs {
    gap: 4px;
  }

  .jeju-date-tab {
    padding: 8px 2px;
  }

  .jeju-date-tab strong {
    font-size: 12px;
  }

  .jeju-date-tab span {
    font-size: 12px;
  }

  .jeju-period-block {
    display: block;
  }

  .jeju-period-label {
    margin-bottom: 5px;
  }

  .jeju-travel-tips {
    grid-template-columns: 1fr;
  }

  .jeju-travel-map {
    height: 330px;
  }

  .jeju-status-legend {
    display: none;
  }
}

@media (max-width: 430px) {
  .jeju-region-grid {
    grid-template-columns: 1fr;
  }

  .jeju-region-card:last-child {
    grid-column: auto;
  }

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

  .jeju-period-tabs button {
    padding: 7px 2px;

    font-size: 12px;
  }

  .jeju-period-tabs small {
    font-size: 12px;
  }
}