/* 바다이음 밝은 바다 유리 — 색 토큰과 유리 재료 (docs/디자인_유리.md §2·§3 값 그대로)
   다른 파일은 변수 이름만 쓴다. 배치·크기는 app.css */
:root {
  --bg: #E9F0F6;
  --text: #0B1F3A;
  --text-2: #2B4669;
  --accent: #0A7E95;
  --accent-2: #C93F24;
  --line: rgba(11, 31, 58, .12);
  --grid: rgba(11, 31, 58, .09);
  --c-obs: #1659C7;
  --c-clim: #5C6B7E;
  --c-thresh: #C2410C;
  --c-fcst: #6250D6;
  --c-bar: #6DA7EC;
  --c-bar-hi: #1C5CAB;
  --mhw-1: #DFA20A;
  --mhw-2: #EB6A1E;
  --mhw-3: #C9283A;
  --mhw-4: #6E0F3A;
  --anom-neg: #2A78D6;
  --anom-mid: #EEF1F4;
  --anom-pos: #D03B3B;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --glass-shadow: 0 .8rem 2.4rem rgba(16, 42, 76, .10), 0 .1rem .3rem rgba(16, 42, 76, .06),
    inset 0 .06rem 0 rgba(255, 255, 255, .95), inset 0 -.06rem 0 rgba(255, 255, 255, .45);
}

/* 바탕: 옅은 그라데이션 위 크게 흐린 색 덩어리 4개(무늬·사진 없음) */
body { background: var(--bg); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 48% at 6% 4%, rgba(125, 211, 232, .55), rgba(125, 211, 232, 0) 72%),
    radial-gradient(44% 50% at 96% 6%, rgba(160, 196, 245, .55), rgba(160, 196, 245, 0) 72%),
    radial-gradient(46% 52% at 94% 98%, rgba(255, 178, 156, .42), rgba(255, 178, 156, 0) 72%),
    radial-gradient(46% 52% at 4% 96%, rgba(120, 170, 230, .38), rgba(120, 170, 230, 0) 72%),
    linear-gradient(160deg, #F4F8FB, #E3ECF4);
}

/* 패널 유리 */
.glass, .glass-card {
  position: relative; isolation: isolate;
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: blur(1rem) saturate(1.6);
  backdrop-filter: blur(1rem) saturate(1.6);
  box-shadow: var(--glass-shadow);
}
.glass-card {
  border-radius: .9rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .70));
}
/* 지도 위에 띄우는 유리: 불투명도 .82 이상 */
.glass-map {
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .84));
}
/* 테두리 빛: 1.5px 그라데이션 테두리 */
.glass::after, .glass-card::after, .glass-pill::after, .icon-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* 반사 광택: 글자 아래층 */
.glass::before, .glass-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 58%);
}

/* 알약 묶음(탭) */
.glass-pill {
  position: relative; isolation: isolate;
  border-radius: 999px; padding: .3rem;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(.8rem) saturate(1.6);
  backdrop-filter: blur(.8rem) saturate(1.6);
  box-shadow: 0 .4rem 1.4rem rgba(16, 42, 76, .08), inset 0 .06rem 0 rgba(255, 255, 255, .9);
}
.pill-thumb {
  position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: 0; width: 0;
  border-radius: 999px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 .3rem .9rem rgba(16, 42, 76, .12);
  transition: transform 280ms var(--ease), width 280ms var(--ease);
}
.glass-pill > .is-active, .glass-pill > [aria-current="page"], .glass-pill > [aria-pressed="true"] {
  color: var(--text); font-weight: 700;
}

.chip {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .28rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--line);
  color: var(--text-2); font-size: .8rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: inherit; font-weight: 700; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 .3rem .9rem rgba(10, 126, 149, .28); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-glass { background: rgba(255, 255, 255, .78); color: var(--text); box-shadow: var(--glass-shadow); }

.icon-btn {
  position: relative; isolation: isolate;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--text);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(.6rem) saturate(1.6);
  backdrop-filter: blur(.6rem) saturate(1.6);
  box-shadow: 0 .3rem .9rem rgba(16, 42, 76, .12), inset 0 .06rem 0 rgba(255, 255, 255, .95);
}

/* 액체 굴절(크롬 계열만, html.lg-on 일 때). 다른 브라우저는 위의 일반 흐림 유지 */
html.lg-on .liquid {
  -webkit-backdrop-filter: url(#lg) blur(.35rem) saturate(1.7);
  backdrop-filter: url(#lg) blur(.35rem) saturate(1.7);
}

/* 화면 전환: 아래에서 살짝 떠오름 */
@keyframes rise { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
.view.is-entering [data-rise] { animation: rise 240ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@media (prefers-reduced-motion: reduce) {
  .view.is-entering [data-rise] { animation: none; }
  .pill-thumb { transition: none; }
}