:root {
  --ink: #183b38;
  --muted: #738784;
  --line: #e4ebe9;
  --paper: #f7f9f8;
  --coral: #ee8069;
  --violet: #7f70c9;
  --shadow: 0 8px 28px rgba(28, 61, 58, 0.055);
  font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
}

body {
  background: var(--paper);
}

.sidebar {
  background: #123c39;
}

.nav-item {
  padding: 12px 14px;
  gap: 13px;
  border-radius: 10px;
  color: #adc1be;
}

.nav-item:hover,
.nav-item.active {
  background: rgba(255, 255, 255, 0.1);
}

main {
  max-width: 1500px;
  padding: 42px clamp(30px, 5vw, 72px) 28px;
}

.eyebrow,
.kicker {
  text-transform: none;
  letter-spacing: 0.3px;
}

.risk-card,
.weather-card,
.panel {
  border-color: var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
}

.risk-card {
  min-height: 312px;
  padding: 34px 38px;
  background: linear-gradient(135deg, #124d49, #0d6b63);
}

.risk-card::before {
  width: 220px;
  height: 220px;
  right: 12%;
  top: 16%;
  background: #2b8379;
  filter: blur(90px);
}

.risk-card h2 {
  margin: 23px 0 13px;
  font-size: 31px;
  line-height: 1.32;
}

.weather-card {
  padding: 28px;
}

.quick-log {
  padding: 34px 0 26px;
}

.action-card,
.action-card.coral,
.action-card.violet {
  padding: 19px 21px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.action-card:hover {
  transform: none;
  border-color: #c8dad6;
  box-shadow: 0 8px 22px rgba(27, 73, 68, 0.07);
}

.action-icon {
  border-radius: 10px;
}

.panel {
  padding: 26px;
}

.prediction-item {
  padding: 16px;
  border-radius: 14px;
}

@media (max-width: 1000px) {
  main {
    padding: 34px 26px;
  }
}

@media (max-width: 720px) {
  main {
    padding: 23px 18px 92px;
  }

  .risk-card {
    min-height: 376px;
    padding: 25px 23px;
    border-radius: 20px;
  }

  .risk-card h2 {
    font-size: 27px;
  }

  .weather-card {
    padding: 23px;
  }

  .panel {
    padding: 22px 19px;
  }
}