/* ═══════════════════════════════════════════════════════════════════
   styles-addition.css  —  안개·상고대 UI 확장 스타일
   (styles.css를 덮어쓰지 않고 추가·보완)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 헤더 타이틀 ──────────────────────────────────────────────── */
.app-header h1 {
  font-size: clamp(1.45rem, 4vw, 2rem);
  letter-spacing: -0.04em;
}
.title-sep {
  opacity: .45;
  font-weight: 400;
  margin: 0 .15em;
}

/* ── 2. 오른쪽 컬럼 래퍼 ────────────────────────────────────────── */
.right-col {
  display: flex;
  flex-direction: column;
  gap: 0;                    /* 탭바와 패널 사이 gap은 탭바 border로 처리 */
  min-width: 0;
}

/* ── 3. 탭 바 (안개 | 상고대) ───────────────────────────────────── */
.risk-tab-bar {
  display: flex;
  gap: 0;
  background: var(--soft, #f1f5f9);
  border-radius: 14px 14px 0 0;
  padding: 4px 4px 0;
  border: 1px solid var(--line, #e2e8f0);
  border-bottom: none;
}

.risk-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--muted, #94a3b8);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.risk-tab:hover:not(.tab-active) {
  background: rgba(0,0,0,.04);
  color: var(--ink, #0f172a);
}
.risk-tab.tab-active {
  background: var(--card, #fff);
  color: var(--ink, #0f172a);
  box-shadow: 0 -1px 0 0 var(--line, #e2e8f0) inset;
}
[data-tab="sangodae"].tab-active { color: #0369a1; }

.tab-icon { font-size: 14px; line-height: 1; }
.tab-label { letter-spacing: -.02em; }

/* 탭 패널 — 기존 fog-risk-card에 연결되는 테두리 처리 */
#tabPaneFog,
#tabPaneSangodae {
  border-radius: 0 0 22px 22px;
}
#tabPaneFog .fog-risk-card,
#tabPaneSangodae .fog-risk-card {
  border-radius: 0 0 22px 22px;
  border-top: none;
  margin-top: 0;
}

/* ── 4. 상고대 카드 강조색 ──────────────────────────────────────── */
.sangodae-card .fog-risk-head strong { border-left: 3px solid #0ea5e9; }
.sangodae-card .fog-risk-score { color: #0369a1; }
html[data-theme="dark"] .sangodae-card .fog-risk-score { color: #38bdf8; }

/* 구름 속 뱃지 */
.cloud-badge {
  display: inline-flex;
  align-items: center;
  margin-left: .5rem;
  padding: .2rem .55rem;
  background: #0ea5e9;
  color: #fff;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  vertical-align: middle;
  letter-spacing: .01em;
}

/* 상고대 하단 버튼 */
.sangodae-actions {
  margin-top: 1rem;
  text-align: center;
}
.btn-primary {
  padding: .6rem 1.4rem;
  border-radius: 999px;
  border: none;
  background: #0369a1;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-primary:hover { opacity: .85; }

/* 상고대 안내 텍스트 */
.sangodae-card .fog-sat-note {
  margin-top: .9rem;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--muted, #94a3b8);
}

/* ── 5. 상고대 바 색상 ──────────────────────────────────────────── */
#sangodaeBarFill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #0369a1, #1e3a5f);
  transition: width .45s ease;
}

/* ── 6. 즐겨찾기 (favorites) ────────────────────────────────────── */
.fav-toggle-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #94a3b8);
  transition: color .15s, border-color .15s;
}
.fav-toggle-btn.fav-active,
.fav-toggle-btn:hover { color: #f59e0b; border-color: #f59e0b; }

.favorites-wrap {
  margin-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.fav-empty {
  font-size: .75rem;
  color: var(--muted, #94a3b8);
  margin: .25rem 0 0;
}
.fav-item {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
  overflow: hidden;
  background: var(--soft, #f8fafc);
  transition: border-color .15s;
}
.fav-item:hover { border-color: var(--accent, #2563eb); }
.fav-name {
  padding: .22rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink, #1e293b);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.fav-name:hover { color: var(--accent, #2563eb); }
.fav-del {
  padding: .22rem .45rem;
  font-size: .65rem;
  color: var(--muted, #94a3b8);
  background: transparent;
  border: none;
  border-left: 1px solid var(--line, #e2e8f0);
  cursor: pointer;
}
.fav-del:hover { color: #ef4444; }

/* ── 7. 알람 패널 관련 ──────────────────────────────────────────── */
/* 기존 alarm form에 상고대 설정 섹션 추가될 경우 대비 */
.alarm-section-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 1rem 0 .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}

/* ── 8. 모바일 반응형 ───────────────────────────────────────────── */
@media (max-width: 740px) {
  /* 모바일: 탭바 좀 더 컴팩트 */
  .risk-tab {
    font-size: 12px;
    padding: 7px 8px;
    gap: 4px;
  }
  .tab-icon { font-size: 13px; }

  /* 오른쪽 컬럼은 1컬럼에서 full-width */
  .right-col {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .risk-tab { font-size: 11px; padding: 6px 6px; gap: 3px; }
  .tab-icon { font-size: 12px; }
  .tab-label { font-size: 11px; }
  .fav-name  { font-size: .7rem; }
  .fav-empty { font-size: .7rem; }
}

/* ── 9. 다크모드 보정 ───────────────────────────────────────────── */
html[data-theme="dark"] .risk-tab-bar {
  background: var(--soft, #1e293b);
  border-color: var(--line, #334155);
}
html[data-theme="dark"] .risk-tab.tab-active {
  background: var(--card, #0f172a);
}
html[data-theme="dark"] .fav-item {
  background: var(--soft, #1e293b);
}
html[data-theme="dark"] .fav-del:hover { color: #f87171; }

/* 시스템 다크모드 (data-theme="auto" 때 미디어쿼리 폴백) */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .risk-tab-bar {
    background: var(--soft, #1e293b);
    border-color: var(--line, #334155);
  }
  html[data-theme="auto"] .risk-tab.tab-active {
    background: var(--card, #0f172a);
  }
  html[data-theme="auto"] .fav-item  { background: var(--soft, #1e293b); }
  html[data-theme="auto"] .fav-name  { color: var(--ink, #e2e8f0); }
  html[data-theme="auto"] .fav-del:hover { color: #f87171; }
}

/* ══════════════════════════════════════════════
   판단 기준 섹션 — 안개 + 상고대 축소 레이아웃
   ══════════════════════════════════════════════ */
.criteria-label {
  margin: 10px 0 5px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted, #64748b);
  letter-spacing: .04em;
}
.criteria-sub {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--soft, #f1f5f9);
  color: var(--muted, #64748b);
}

/* 안개 기준 카드 — 틸 왼쪽 테두리 */
.fog-criteria {
  border-left: 3px solid #0f766e !important;
}
.fog-criteria b { color: #0f766e; }

/* 상고대 기준 카드 — 아이스블루 왼쪽 테두리 */
.sng-criteria {
  border-left: 3px solid #0369a1 !important;
}
.sng-criteria b { color: #0369a1; }

/* 기준 카드 공통 글꼴 축소 */
.guide-grid b { font-size: 13px; }
.guide-grid p { font-size: 12px; }

/* ══════════════════════════════════════════════
   알람 패널 — 안개·상고대 분리 레이아웃
   ══════════════════════════════════════════════ */

/* 배지 그룹 (상태 뱃지 2개) */
.alarm-badge-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}
.alarm-badge-ice {
  background: rgba(3,105,161,.18) !important;
  color: #7dd3fc !important;
  border-color: rgba(56,189,248,.25) !important;
}

/* 알람 섹션 헤더 (🌫 안개 알람 / 🌨 상고대 알람) */
.alarm-section-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 8px;
}
.alarm-section-icon { font-size: 15px; }
.alarm-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, #0f172a);
}
.alarm-section-note {
  font-size: 11px;
  color: var(--muted, #64748b);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--soft, #f1f5f9);
}

/* 상고대 폼 인풋 — 아이스 포커스 */
.alarm-form-ice input:focus,
.alarm-form-ice select:focus {
  border-color: #0369a1 !important;
  outline-color: #0369a1 !important;
}

/* 안개/상고대 구분 저장 버튼 색상 */
.alarm-buttons-fog #btnSaveAlarm    { background: #0f766e; }
.alarm-buttons-ice #btnSaveSngAlarm { background: #0369a1; }

/* 섹션 구분선 */
.alarm-divider {
  height: 1px;
  background: var(--line, #e2e8f0);
  margin: 16px 0;
}

@media (max-width: 430px) {
  .alarm-badge-group { flex-direction: row; }
}

/* ══════════════════════════════════════════════
   지역 검색 드롭다운 포탈
   (backdrop-filter 스태킹 컨텍스트 탈출용)
   ══════════════════════════════════════════════ */
.geo-portal {
  /* position: absolute → fixed로 변경해 카드 경계 탈출 */
  position: fixed !important;
  z-index: 99999 !important;
  /* 원래 absolute 스타일 덮어쓰기 */
  top: auto;
  left: auto;
}