:root {
  --sky-top: #7ec8f5;
  --sky-mid: #aaddf9;
  --sky-bottom: #cde8f7;
  --sky-far: #ede8ff;
  --ink: #1e3a50;
  --ink-soft: #6a90a8;
  --ink-faint: #a0c2d6;
  --card: rgba(255,255,255,.70);
  --surface: rgba(255,255,255,.55);
  --glass-border: rgba(255,255,255,.75);
  --line: rgba(180,220,245,.55);
  --line-soft: rgba(220,240,252,.6);
  --accent: #4ea8e0;
  --accent-deep: #2779b8;
  --accent-warm: #ff9eb5;
  --accent-wash: rgba(200,232,252,.45);
  --cloud: rgba(255,255,255,.85);
  --shadow-soft: rgba(60,120,175,.08);
  --shadow-key: rgba(60,120,175,.16);
  --radius: 28px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  min-height: 100%
}

body {
  font-family: 'Pretendard', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse 110% 55% at 20% 5%, var(--sky-top) 0%, transparent 55%),
    radial-gradient(ellipse 80% 55% at 88% 25%, var(--sky-mid) 0%, transparent 50%),
    linear-gradient(160deg, var(--sky-bottom) 0%, #dff0fc 50%, var(--sky-far) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 22px 18px;
  overflow-x: hidden;
  transition: background .8s ease;
  -webkit-font-smoothing: antialiased;
}

/* 콘텐츠가 화면보다 길면 위에서부터 정렬(중앙정렬 시 위쪽 잘림 방지) */

/* 전역 스크롤바 (페이지 세로) */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent
}

body::-webkit-scrollbar {
  width: 10px
}

body::-webkit-scrollbar-track {
  background: transparent
}

body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #9ccdf0, var(--accent));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box
}

body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  background-clip: padding-box
}

/* 떠다니는 구름 (은은하게) */
.sky-deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0
}

.cloud {
  position: absolute;
  background: var(--cloud);
  border-radius: 100px;
  opacity: .4;
  filter: blur(1px)
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: var(--cloud);
  border-radius: 100px
}

.cloud.c1 {
  width: 130px;
  height: 36px;
  top: 10%;
  left: -150px;
  animation: drift 46s linear infinite
}

.cloud.c1::before {
  width: 58px;
  height: 58px;
  top: -24px;
  left: 24px
}

.cloud.c1::after {
  width: 42px;
  height: 42px;
  top: -15px;
  left: 70px
}

.cloud.c2 {
  width: 90px;
  height: 26px;
  top: 26%;
  left: -120px;
  animation: drift 64s linear infinite;
  animation-delay: -16s;
  opacity: .28
}

.cloud.c2::before {
  width: 42px;
  height: 42px;
  top: -17px;
  left: 16px
}

.cloud.c2::after {
  width: 30px;
  height: 30px;
  top: -10px;
  left: 50px
}

.cloud.c3 {
  width: 150px;
  height: 40px;
  top: 72%;
  left: -170px;
  animation: drift 74s linear infinite;
  animation-delay: -36s;
  opacity: .22
}

.cloud.c3::before {
  width: 62px;
  height: 62px;
  top: -26px;
  left: 28px
}

.cloud.c3::after {
  width: 46px;
  height: 46px;
  top: -17px;
  left: 80px
}

@keyframes drift {
  to {
    transform: translateX(calc(100vw + 340px))
  }
}

/* ---- 날씨별 연출 ---- */
/* 비/눈 올 때 구름을 좀 더 흐리고 진하게 */
.sky-deco.rainy .cloud {
  opacity: .5;
  background: #c4d2dd
}

.sky-deco.rainy .cloud::before,
.sky-deco.rainy .cloud::after {
  background: #c4d2dd
}

.sky-deco.snowy .cloud {
  opacity: .55
}

/* 빗방울 */
.drop {
  position: absolute;
  top: -12%;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--drop, rgba(60, 100, 140, .7)));
  animation: fall linear infinite
}

@keyframes fall {
  0% {
    transform: translateY(-20px);
    opacity: 0
  }

  10% {
    opacity: 1
  }

  100% {
    transform: translateY(105vh);
    opacity: .8
  }
}

/* 눈송이 */
.flake {
  position: absolute;
  top: -5%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, .9);
  animation: snowfall linear infinite
}

@keyframes snowfall {
  0% {
    transform: translateY(-20px) translateX(0);
    opacity: 0
  }

  10% {
    opacity: .95
  }

  100% {
    transform: translateY(105vh) translateX(var(--sway, 20px));
    opacity: .85
  }
}

/* 맑을 때 은은한 햇살 (화면 우상단) */
.sunshine {
  position: absolute;
  top: -90px;
  right: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 238, 180, .45), rgba(255, 238, 180, 0) 70%);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none
}

.sky-deco.sunny .sunshine {
  opacity: 1;
  animation: sunpulse 6s ease-in-out infinite
}

@keyframes sunpulse {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.08)
  }
}

/* 안개: 화면 전체에 옅은 흰 베일 + 가로로 흐르는 안개 띠 */
.fog-veil {
  position: absolute;
  inset: 0;
  background: rgba(220, 225, 230, 0);
  transition: background .8s ease;
  pointer-events: none
}

.sky-deco.foggy .fog-veil {
  background: rgba(220, 225, 230, .45)
}

/* 뇌우: 가끔 번쩍 빛나는 번개 플래시 */
.lightning {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
  mix-blend-mode: screen
}

.sky-deco.stormy .lightning {
  animation: flash 8s ease-in infinite
}

@keyframes flash {

  0%,
  92%,
  100% {
    background: rgba(255, 255, 255, 0);
  }

  93% {
    background: rgba(255, 255, 255, .85);
  }

  94% {
    background: rgba(255, 255, 255, .1);
  }

  95% {
    background: rgba(255, 255, 255, .7);
  }

  96% {
    background: rgba(255, 255, 255, 0);
  }
}

.fog-band {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 90px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(245, 247, 250, .6), rgba(255, 255, 255, 0));
  filter: blur(8px);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  animation: fogDrift 60s linear infinite
}

.fog-band.b1 {
  top: 25%;
  animation-duration: 55s
}

.fog-band.b2 {
  top: 55%;
  animation-duration: 80s;
  animation-delay: -30s
}

.fog-band.b3 {
  top: 75%;
  animation-duration: 70s;
  animation-delay: -50s;
  height: 70px
}

.sky-deco.foggy .fog-band {
  opacity: 1
}

@keyframes fogDrift {
  0% {
    transform: translateX(-10%)
  }

  50% {
    transform: translateX(10%)
  }

  100% {
    transform: translateX(-10%)
  }
}

@media (prefers-reduced-motion: reduce) {

  .cloud,
  .drop,
  .flake,
  .sunshine,
  .fog-band,
  .lightning {
    animation: none !important
  }

  .drop,
  .flake {
    display: none !important
  }

  .char-ph,
  .char-ph.hop,
  .char-ph.wiggle,
  #charToggle.flip svg {
    animation: none !important
  }
}

.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 412px;
  margin: 0 auto
}

/* DEV 테스트 버튼 */
.test-btn {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  font-family: 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,.7);
  background: rgba(60,60,80,.45);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 0 0 12px 12px;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(8px);
  transition: background .15s, color .15s;
}
.test-btn:hover { background: rgba(60,60,80,.7); color: #fff; }
.test-btn .test-label { font-size: 10px; opacity: .7; margin-left: 6px; }

/* 플로팅 로고 */
.app-logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  padding: 19px 18px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
  color: rgba(78, 168, 224, 0.75);
  text-shadow:
    0 1px 0 rgba(255,255,255,.8),
    0 2px 8px rgba(20,90,200,.18),
    0 0 20px rgba(80,160,255,.22);
  pointer-events: none;
}

/* 상단 토글 묶음 (캐릭터 + 다크모드) */
.top-toggles {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  display: flex;
  gap: 8px
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--accent-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 12px;
  box-shadow: 0 6px 14px -8px var(--shadow-key);
  transition: transform .15s, background-color .35s, color .35s, border-color .35s
}

.theme-toggle:hover {
  transform: translateY(-2px)
}

.theme-toggle:active {
  transform: scale(.94)
}

#charToggle svg {
  width: 30px;
  height: 30px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1)
}

/* 캐릭터 토글 누르면 회전+팝 */
#charToggle.flip svg {
  animation: flipSpin .45s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes flipSpin {
  0% {
    transform: scale(1) rotate(0)
  }

  50% {
    transform: scale(.3) rotate(180deg);
    opacity: .3
  }

  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1
  }
}

/* 다크모드 전환 시 전체 색을 부드럽게 페이드 */
body,
.card,
.stage,
.hourly,
.daily,
.stat,
.hr-card,
.cody-items span,
.cody-note,
.swing-msg,
.search-box input,
.city-results button {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease
}

/* 아주 작은 화면: 좌우 패딩과 카드 안쪽 여백을 줄여 답답함 방지 */
@media (max-width:380px) {
  body {
    padding: 14px 10px
  }

  .card {
    padding: 24px 18px 22px
  }
}

/* 세로로 짧은 화면(가로 모드 등): 위아래 패딩 축소 */
@media (max-height:640px) {
  body {
    padding: 12px 18px
  }
}

.card {
  position: relative;
  background: rgba(255, 255, 255, .38);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-radius: var(--radius);
  border: 1.5px solid rgba(255, 255, 255, .88);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .95) inset,
    0 0 0 1px rgba(120,180,230,.12),
    0 20px 50px -12px rgba(60, 120, 175, .22),
    0 6px 20px -6px rgba(60, 120, 175, .12);
  padding: 30px 24px 28px;
  animation: rise .55s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* 브랜드 */
.brand {
  text-align: center;
}

.brand .logo {
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--ink-faint);
}

.brand .sub {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 8px;
  letter-spacing: .3px
}

.hidden {
  display: none !important
}

/* ---- 캐릭터 선택 ---- */
.pick-title {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  margin: 26px 0 2px;
  color: var(--ink)
}

.pick-desc {
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  margin-bottom: 22px
}

.pick-row {
  display: flex;
  gap: 14px
}

.pick {
  flex: 1;
  cursor: pointer;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  padding: 26px 10px 20px;
  text-align: center;
  background: linear-gradient(180deg, var(--surface), var(--accent-wash));
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), border-color .18s, box-shadow .18s;
}

.pick:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 16px 26px -14px var(--shadow-key)
}

.pick:active {
  transform: translateY(-2px) scale(.99)
}

.pick .face {
  width: 74px;
  height: 74px;
  margin: 0 auto;
  display: block
}

.pick .name {
  font-family: 'Pretendard';
  font-weight: 700;
  margin-top: 12px;
  font-size: 18px;
  color: var(--ink)
}

/* ---- 메인 ---- */
.loc {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 14px auto 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 99px;
  padding: 7px 14px 7px 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 2px 10px -4px var(--shadow-key);
  transition: background .15s, border-color .15s, transform .14s;
}

.loc:hover {
  background: rgba(255,255,255,.75);
  border-color: rgba(78,168,224,.45);
  transform: translateY(-1px);
}

.loc:active { transform: scale(.96); }

.loc svg {
  width: 13px;
  height: 13px;
  opacity: .7
}

.loc .loc-edit {
  font-size: 11px;
  line-height: 1;
  opacity: .45;
  transition: opacity .15s;
}

.loc:hover .loc-edit { opacity: .85; }

.temp-big {
  font-family: 'Pretendard';
  font-weight: 800;
  font-size: 72px;
  text-align: center;
  line-height: .95;
  letter-spacing: -1px;
  margin-top: 14px;
  color: #1a72cc;
  text-shadow:
    0 1px 0 rgba(255,255,255,.7),
    0 -1px 0 rgba(8,50,130,.2),
    0 4px 16px rgba(20,90,200,.3),
    0 0 40px rgba(80,160,255,.18);
}

.temp-desc {
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 5px;
  letter-spacing: .1px;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 18px 0 2px
}

.stat {
  flex: 1;
  max-width: 108px;
  background: rgba(255,255,255,.42);
  border: 1.5px solid rgba(255,255,255,.82);
  border-radius: 16px;
  padding: 12px 6px 10px;
  text-align: center;
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.95) inset,
    0 4px 16px -6px rgba(60,120,175,.15);
}

.stat .k {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 4px;
  letter-spacing: .2px;
}

.stat .v {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 20px;
  color: var(--accent-deep);
  line-height: 1
}

/* 무대 */
.stage {
  margin: 14px 0 0;
  border-radius: 20px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 20px -6px var(--shadow-key);
  padding: 28px 18px 20px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.char-ph {
  width: 220px;
  height: 140px;
  display: block;
  animation: bob 3.4s ease-in-out infinite;
  cursor: pointer
}

@keyframes bob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-7px)
  }
}

/* 코디 바꿀 때 캐릭터가 통통 튀며 갈아입는 모션 */
.char-ph.hop {
  animation: hop .55s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes hop {
  0% {
    transform: translateY(0) scale(1)
  }

  35% {
    transform: translateY(-22px) scale(1.05, .95)
  }

  70% {
    transform: translateY(0) scale(.96, 1.04)
  }

  100% {
    transform: translateY(0) scale(1)
  }
}

/* 캐릭터 클릭하면 좌우로 흔들리며 반응 */
.char-ph.wiggle {
  animation: wiggle .5s ease-in-out
}

@keyframes wiggle {

  0%,
  100% {
    transform: rotate(0)
  }

  20% {
    transform: rotate(-7deg)
  }

  50% {
    transform: rotate(7deg)
  }

  80% {
    transform: rotate(-4deg)
  }
}

/* 무대 카드도 클릭 가능함을 살짝 표시 */
.stage {
  cursor: pointer
}

.cody-name {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  margin-top: 14px
}

.cody-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 12px
}

.cody-items span {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 2px 8px -4px var(--shadow-key);
}

.speech-bubble {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(78,168,224,.45);
  border-radius: 12px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent-deep);
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 14px -4px rgba(78,168,224,.25);
  z-index: 1;
  animation: popIn .3s cubic-bezier(.34, 1.56, .64, 1);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: rgba(240,250,255,.9);
  border-right: 1.5px solid rgba(78,168,224,.45);
  border-bottom: 1.5px solid rgba(78,168,224,.45);
}

@keyframes popIn {
  from { transform: translateX(-50%) scale(.7); opacity: 0 }
  to   { transform: translateX(-50%) scale(1);  opacity: 1 }
}

.reroll {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 6px 14px -8px var(--shadow-key);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}

.reroll:hover {
  transform: translateY(-2px);
}

.reroll:active {
  transform: scale(.93);
}

.reroll svg {
  width: 18px;
  height: 18px;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.reroll.spin svg {
  transform: rotate(360deg);
}

.ghost-btn {
  background: var(--accent-wash);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12.5px;
  cursor: pointer;
  font-family: 'Pretendard';
  padding: 8px 16px;
  border-radius: 99px;
  transition: color .15s, background .15s, border-color .15s, transform .12s
}

.ghost-btn:hover {
  color: var(--accent-deep);
  background: var(--surface);
  border-color: var(--accent);
  transform: translateY(-1px)
}

.ghost-btn:active {
  transform: translateY(0) scale(.98)
}

/* ---- 공통 섹션 ---- */
.hourly,
.daily {
  background: rgba(255,255,255,.42);
  border: 1.5px solid rgba(255,255,255,.82);
  border-radius: 20px;
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.95) inset,
    0 6px 24px -8px rgba(60,120,175,.14);
}

/* ---- 시간대별 ---- */
.hourly {
  margin-top: 14px;
  padding: 16px 6px 14px;
}

.hourly-head {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 14px 0;
  padding-bottom: 10px;
  letter-spacing: .2px;
}

.hourly .hourly-head {
  border-bottom: 1px solid var(--line);
}

.hr-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 12px 10px;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none
}

.hr-cards::-webkit-scrollbar {
  display: none
}

.hr-cards.dragging {
  cursor: grabbing
}

.hr-card {
  flex: 0 0 auto;
  width: 62px;
  text-align: center;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 16px;
  padding: 11px 4px 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 10px -4px var(--shadow-key);
  transition: transform .12s;
}

.hr-card:active {
  transform: scale(.96)
}

.hr-card.now {
  background: rgba(200, 232, 255, .55);
  border-color: rgba(78, 168, 224, .5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 12px -4px rgba(78,168,224,.3);
}

.hr-time {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: .1px;
}

.hr-icon {
  width: 26px;
  height: 26px;
  margin: 5px auto 4px;
  display: block
}

.hr-temp {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 18px;
  color: var(--accent-deep);
  line-height: 1
}

.hr-pop {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--accent);
  margin-top: 3px;
  min-height: 14px
}

.swing-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 10px 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: rgba(200,232,255,.4);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 9px 13px;
  line-height: 1.45
}

.swing-msg svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto
}

/* ---- 오늘 최고/최저 ---- */
.hilo {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px
}

/* ---- 일별 7일 예보 ---- */
.daily {
  margin-top: 14px;
  padding: 16px 14px 12px;
}

.day-row {
  display: grid;
  grid-template-columns: 40px 42px 1fr 88px;
  align-items: center;
  gap: 6px;
  padding: 9px 2px;
  border-top: 1px solid var(--line)
}

.day-row:first-of-type {
  border-top: none
}

.day-row.today .day-name {
  color: var(--accent-deep);
  font-weight: 700;
}

.day-name-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.day-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink)
}

.day-date {
  font-size: 10.5px;
  color: var(--ink-faint);
  font-weight: 400;
}

.day-ico {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1
}

.day-ico svg {
  width: 24px;
  height: 24px
}

.day-pop {
  font-size: 10px;
  color: var(--accent);
  margin-top: 1px
}

.day-cody {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.day-temps {
  display: flex;
  align-items: center;
  gap: 7px
}

.t-min {
  font-size: 12.5px;
  color: var(--ink-faint);
  width: 26px;
  text-align: right
}

.t-max {
  font-size: 12.5px;
  color: var(--ink);
  width: 26px;
  text-align: left
}

.t-bar {
  position: relative;
  flex: 1;
  height: 6px;
  background: rgba(180,220,245,.3);
  border-radius: 99px;
  overflow: hidden;
  box-shadow:
    inset 0 2px 3px rgba(80,130,180,.15),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.t-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 99px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45) 0%, transparent 55%, rgba(0,0,0,.06) 100%),
    linear-gradient(90deg, #72c2f5, #ffaa5e);
  box-shadow: 0 1px 3px rgba(100,160,220,.35);
}

/* ---- 참고 스타일 아코디언 ---- */
.style-accordion {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 20px -8px var(--shadow-key);
}

.style-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  background: rgba(255,255,255,.48);
  border: none;
  padding: 14px 18px;
  color: var(--ink-soft);
  font-family: 'Pretendard', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.style-toggle:hover {
  background: rgba(255,255,255,.65);
  color: var(--accent-deep);
}

.style-toggle.open {
  background: rgba(200,232,255,.45);
  color: var(--accent-deep);
  border-bottom: 1px solid rgba(255,255,255,.6);
}

.style-toggle .chevron {
  margin-left: auto;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.style-toggle.open .chevron {
  transform: rotate(180deg);
}

.style-ref {
  max-height: 0;
  overflow: hidden;
  background: rgba(255,255,255,.38);
  border: none;
  border-radius: 0;
  transition: max-height .4s cubic-bezier(.22, 1, .36, 1);
}

.style-ref.open {
  max-height: 240px;
}

.style-imgs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 12px 14px;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.style-imgs::-webkit-scrollbar { display: none }
.style-imgs.dragging { cursor: grabbing }

.style-loading {
  color: var(--ink-faint);
  font-size: 13px;
  padding: 16px 14px;
}

.style-img-link {
  flex: 0 0 auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px -4px var(--shadow-key);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}

.style-img-link:hover { transform: translateY(-3px) }
.style-img-link:active { transform: scale(.97) }

.style-img {
  width: 110px;
  height: 160px;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ---- 폴백: 도시 검색 ---- */
.search-wrap {
  margin-top: 22px
}

.search-wrap p {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.5
}

.search-box {
  display: flex;
  gap: 8px
}

.search-box input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 13px 15px;
  font-family: 'Pretendard';
  font-size: 14px;
  color: var(--ink);
  outline: none;
  background: var(--accent-wash);
  transition: border-color .15s, background .15s;
}

.search-box input:focus {
  border-color: var(--accent);
  background: var(--surface)
}

.search-box button {
  border: none;
  background: linear-gradient(180deg, #74bdf0 0%, var(--accent) 45%, var(--accent-deep) 100%);
  color: #fff;
  font-family: 'Pretendard';
  border-radius: 16px;
  padding: 0 22px;
  cursor: pointer;
  font-size: 16px;
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, .5) inset,
    0 -2px 6px rgba(28, 90, 150, .3) inset,
    0 6px 14px -6px var(--shadow-key);
  transition: transform .14s, filter .2s;
}

.search-box button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px)
}

.search-box button:active {
  transform: translateY(1px) scale(.98)
}

.city-results {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px
}

.city-results button {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 15px;
  cursor: pointer;
  font-family: 'Pretendard';
  font-size: 13.5px;
  color: var(--ink);
  transition: border-color .15s, transform .12s;
}

.city-results button:hover {
  border-color: var(--accent);
  transform: translateX(2px)
}

/* 상태 메시지 */
.status {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 30px 0
}

.status .spin-dot {
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 3.5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rot 1s linear infinite;
  margin-bottom: 12px
}

@keyframes rot {
  to {
    transform: rotate(360deg)
  }
}

.err {
  color: #d27a91
}