/* HealingMart Weather — visual polish inspired by the approved mobile UX reference.
   Design-only layer: no API, state, map, tab, or bottom-sheet logic changes. */
:root{
  --hm-navy:#0b2a4d;
  --hm-blue:#1769aa;
  --hm-sky:#eef7ff;
  --hm-soft-blue:#f6f9fd;
  --hm-line:#dbe6ef;
  --hm-text:#16344d;
  --hm-muted:#6c7f91;
  --hm-green:#1f8b72;
  --hm-card:#ffffff;
  --hm-shadow:0 10px 28px rgba(20,55,84,.10);
  --hm-shadow-strong:0 16px 38px rgba(20,55,84,.16);
}
body{background:#f4f7fb;color:var(--hm-text)}
.top{background:rgba(255,255,255,.98)!important;border-bottom:1px solid #e7edf3!important;box-shadow:0 2px 10px rgba(28,60,87,.035)}
.brand{color:var(--hm-navy)!important;letter-spacing:-.035em}
.brand small{color:#5b7288!important;letter-spacing:.20em}
.search{border:1.5px solid #cbd9e5!important;border-radius:15px!important;box-shadow:0 3px 12px rgba(25,60,88,.045)!important;transition:border-color .18s ease,box-shadow .18s ease}
.search:focus-within{border-color:#73a7d2!important;box-shadow:0 0 0 4px rgba(66,139,198,.10)!important}
.search span{color:#47728f!important}
.search button{background:var(--hm-navy)!important;border-radius:10px!important;box-shadow:none!important}
.ghost{border:1px solid #d8e3ec!important;background:#fff!important;color:#264b66!important;box-shadow:0 3px 10px rgba(28,60,87,.04)}
.nav{background:rgba(255,255,255,.98)!important;border-bottom:1px solid #e5edf4!important}
.nav button{color:#3c5c73!important}
.nav button.active{background:linear-gradient(145deg,#123b5d,#0d5973)!important;color:#fff!important;box-shadow:0 8px 20px rgba(14,69,96,.16)!important}
.nav .eyebrow{background:#eef4f8!important;color:#557086!important}
.nav button.active .eyebrow{background:#dff2ff!important;color:#235a7f!important}
.nav button.active small{color:#deebf3!important}
.weather-panel,.info-block,.source-proof,.pillbox,.detail-card{border-color:var(--hm-line)!important;background:var(--hm-card)!important}
.weather-panel,.info-block{border-radius:18px!important;box-shadow:0 5px 18px rgba(24,59,87,.055)!important}
.weather-panel h3,.info-block h3,.section h3{color:#173b58!important}
.detail-weather{background:#f4f7fb!important}
.detail-title h2,.detail-head h2{color:var(--hm-navy)!important}
.detail-title p,.detail-head p,.muted,.tiny{color:var(--hm-muted)!important}
.detail-card{border-radius:15px!important;box-shadow:0 4px 14px rgba(24,59,87,.045)!important}
.hm-hour{border-color:#dfe9f1!important;background:linear-gradient(180deg,#fff 0%,#f6faff 100%)!important;box-shadow:0 4px 14px rgba(24,59,87,.05)!important}
.hm-hour.is-now{border-color:#4f90c2!important;box-shadow:0 8px 22px rgba(38,112,166,.14)!important}
.hm-day{border-color:#e0e9f1!important;box-shadow:0 3px 12px rgba(24,59,87,.045)!important}
#screen-local .local-hero-head h1{color:var(--hm-navy)!important}
.official-data-badge{background:#edf8f4!important;border-color:#cbe5dc!important;color:#236b59!important}
#screen-local .hero-professional{border:1px solid #d7e7f3!important;border-radius:19px!important;background:radial-gradient(circle at 88% 18%,rgba(255,255,255,.94) 0 8%,rgba(255,255,255,0) 25%),linear-gradient(135deg,#edf8ff 0%,#f8fbff 58%,#eef7f4 100%)!important;box-shadow:0 7px 22px rgba(25,75,111,.075)!important}
#screen-local .hero-professional strong#temp{color:#0b3150!important}
#screen-local .hero-professional .hero-condition{color:#174c71!important}
#screen-local .hero-professional .hero-reading>b{color:#4b687d!important}
#screen-local .hero-professional .obs-line{color:#6f8291!important}
#screen-local .hero-alert{border-radius:999px!important;padding:5px 9px!important;font-size:10px!important;font-weight:850!important}
#screen-local .source-proof{border:1px solid #dce8f0!important;border-radius:17px!important;background:#fff!important;box-shadow:0 5px 17px rgba(25,60,88,.045)!important}
#screen-local .source-proof-head strong{color:#1a4665!important}
#screen-local .source-proof-head span{color:#748696!important}
#screen-local .source-proof-grid article{border:1px solid #e2ebf2!important;border-radius:13px!important;background:#f8fbfe!important}
#screen-local .source-proof-grid article:first-child{background:#f3f9ff!important;border-color:#d9e9f6!important}
#screen-local .source-proof-grid article:last-child{background:#f4faf7!important;border-color:#d8eae2!important}
#screen-local .source-kind{background:#e7f3fd!important;color:#28638d!important}
#screen-local .source-kind.air{background:#e9f6f0!important;color:#23715c!important}
#screen-local .source-proof-grid b{color:#183f5a!important}
.map-title{border:1px solid rgba(220,232,241,.95)!important;border-radius:15px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 9px 26px rgba(15,52,82,.11)!important}
.map-title span{color:#47779b!important}.map-title strong{color:#153a55!important}
.map-timebar{border:1px solid rgba(218,230,240,.98)!important;border-radius:16px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 10px 26px rgba(15,52,82,.12)!important}
.map-timebar button{color:#49677d!important;border-radius:11px!important;transition:background .16s ease,color .16s ease,transform .16s ease}
.map-timebar button.active{background:linear-gradient(145deg,#123b5d,#0d5973)!important;color:#fff!important;box-shadow:0 5px 12px rgba(17,75,105,.17)!important}
.map-timebar button:active{transform:translateY(1px)}
.kakao-city-marker .city-orb,.glass-marker .orb{background:rgba(255,255,255,.94)!important;border:1.5px solid rgba(255,255,255,.98)!important;box-shadow:0 6px 18px rgba(17,56,83,.16)!important}
.kakao-city-marker .city-name,.glass-marker .name{color:#173b58!important}
.kakao-city-marker .city-temp,.glass-marker .temp{color:#0c3554!important}
.layer-grid button,.windy-tabs button,.quick button{border-color:#dce7ef!important;background:#fff!important;color:#31566f!important;border-radius:12px!important;box-shadow:0 2px 8px rgba(25,60,88,.035)!important}
.layer-grid button{position:relative!important;min-height:44px!important;padding-left:34px!important}
.layer-grid button::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;border:1.8px solid currentColor;border-radius:50%;box-sizing:border-box;opacity:.86}
.layer-grid button[data-overlay="wind"]::before{border-radius:2px 10px 10px 2px;border-left:0;height:10px}
.layer-grid button[data-overlay="rain"]::before{border-radius:60% 40% 60% 40%;transform:translateY(-55%) rotate(45deg)}
.layer-grid button[data-overlay="temp"]::before{width:8px;height:17px;border-radius:8px}
.layer-grid button[data-overlay="clouds"]::before{width:17px;height:10px;border-radius:10px}
.layer-grid button[data-overlay="pressure"]::before{border-radius:3px}
.layer-grid button.active,.windy-tabs button.active{background:#eaf5fd!important;border-color:#aad0ec!important;color:#17679d!important;box-shadow:none!important}
.aq-grade{box-shadow:none!important}
.air-values>div,.sun-values>div{border-color:#e2eaf0!important;border-radius:13px!important;background:#fff!important}
.sun-box{background:#fff9ed!important;border-color:#f1dfb7!important}
.moon-box{background:#f1f6fd!important;border-color:#d5e2f0!important}
.compare-dock-card{border-color:#dfe9f1!important;border-radius:15px!important;box-shadow:0 5px 16px rgba(23,58,86,.06)!important}
.compare-number-marker{background:linear-gradient(145deg,#287cb2,#155478)!important;box-shadow:0 8px 20px rgba(18,74,106,.20)!important}

@media(max-width:980px){
  :root{--studio-nav:54px}
  .top{padding:0 12px!important;gap:8px!important;box-shadow:0 2px 9px rgba(28,60,87,.035)!important}
  .brand{min-width:max-content!important;font-size:17px!important;gap:5px!important}
  .brand small{display:inline!important;margin-left:4px!important;font-size:8px!important;letter-spacing:.20em!important}
  .search{height:43px!important;border-radius:14px!important}
  .search input{font-size:14px!important;color:#29495f!important}
  .ghost{min-width:43px!important;width:43px!important;height:43px!important;padding:0!important;border-radius:14px!important;display:grid!important;place-items:center!important}
  .nav{height:var(--studio-nav)!important;padding:0 4px!important;background:#fff!important}
  .nav button{height:54px!important;gap:1px!important;flex-direction:column!important;color:#526b7d!important}
  .nav button::before{display:block;font-size:12px;line-height:13px;height:13px;color:#6f8798;font-weight:700}
  .nav button[data-mode="local"]::before{content:"⌖"}
  .nav button[data-mode="korea"]::before{content:"▱"}
  .nav button[data-mode="world"]::before{content:"◎"}
  .nav button[data-mode="moon"]::before{content:"◐"}
  .nav button[data-mode="detail"]::before{content:"≡"}
  .nav button[data-mode="compare"]::before{content:"⇄"}
  .nav button::after{font-size:10.5px!important;line-height:12px!important;color:#496477!important;font-weight:850!important;letter-spacing:-.03em!important}
  .nav button.active{height:44px!important;margin:5px 2px!important;border-radius:12px!important;background:linear-gradient(145deg,#123b5d,#0d5973)!important}
  .nav button.active::before,.nav button.active::after{color:#fff!important}
  .screen.active>.rail{border-color:#dce7ef!important;border-radius:22px 22px 0 0!important;background:rgba(255,255,255,.985)!important;box-shadow:0 -14px 34px rgba(17,55,82,.14)!important;backdrop-filter:blur(18px)!important}
  .mobile-handle{height:30px!important}
  .mobile-handle::before{width:36px!important;height:4px!important;background:#c3d1dc!important}
  #screen-local.rail-collapsed>.rail .local-mobile-peek{background:#fff!important;padding:4px 14px 9px!important}
  .peek-primary{height:49px!important;grid-template-columns:40px auto 1fr!important}
  .peek-icon{width:37px!important;height:37px!important;border-radius:11px!important;background:#eef7ff!important}
  .peek-primary b{color:#0c3453!important;font-size:25px!important}
  .peek-primary strong{color:#476579!important}
  .peek-official{padding:4px 7px!important;background:#edf8f4!important;color:#226b58!important;border:1px solid #d6ebe3!important}
  .peek-stations{border-top:1px solid #e6edf3!important;gap:6px!important}
  .peek-stations span{position:relative;padding-left:13px;color:#6a7f90!important}
  .peek-stations span::before{content:"";position:absolute;left:1px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#3e8fc3}
  .peek-stations span:last-child::before{background:#39a17f}
  .peek-stations b{color:#264b65!important}
  #screen-local.active>.rail .rail-inner{padding:17px 15px 28px!important}
  #screen-local .local-hero-head{gap:10px!important;margin-bottom:8px!important}
  #screen-local .local-hero-head h1{font-size:20px!important;line-height:1.25!important;color:#0c3150!important}
  .official-data-badge{padding:5px 7px!important;font-size:9px!important;border-radius:999px!important}
  #screen-local .hero-professional{margin:9px 0!important;padding:11px!important;border-radius:17px!important;grid-template-columns:54px minmax(0,1fr) auto!important;gap:9px!important}
  #screen-local .hero-professional .wx-icon{width:54px!important;height:54px!important}
  #screen-local .hero-professional .wx-icon .wx-svg{width:50px!important;height:50px!important}
  #screen-local .hero-professional strong#temp{font-size:41px!important}
  #screen-local .hero-professional .hero-condition{font-size:12.5px!important}
  #screen-local .source-proof{padding:9px!important;border-radius:15px!important}
  #screen-local .source-proof-head{margin-bottom:8px!important}
  #screen-local .source-proof-head strong{font-size:11px!important}
  #screen-local .source-proof-head span{font-size:9.5px!important}
  #screen-local .source-proof-grid{gap:6px!important}
  #screen-local .source-proof-grid article{padding:8px!important;border-radius:11px!important}
  #screen-local .source-proof-grid b{font-size:10.5px!important}
  #screen-local .source-proof-grid small{font-size:9px!important}
  #screen-local .map-title{top:10px!important;left:10px!important;max-width:188px!important;padding:7px 10px!important;border-radius:13px!important}
  #screen-local .map-title strong{font-size:12.5px!important}
  #screen-local .map-timebar{left:10px!important;right:10px!important;padding:5px!important;gap:3px!important;border-radius:15px!important}
  #screen-local .map-timebar button{min-height:35px!important;padding:0 4px!important;font-size:10.5px!important;border-radius:10px!important}
  #screen-detail.active{background:#f4f7fb!important}
  #screen-detail.active>.detail-weather{padding:13px 11px 30px!important}
  #screen-detail .detail-title{padding:14px 15px!important;margin-bottom:10px!important;border-radius:18px!important;background:linear-gradient(145deg,#eff8ff,#ffffff)!important;border:1px solid #dae9f4!important}
  #screen-detail .detail-title h2{font-size:22px!important;color:#0b3150!important}
  #screen-detail .info-block{margin-bottom:10px!important;padding:14px!important;border-radius:17px!important}
  #screen-detail .hm-hscroll{border-radius:12px!important}
  #screen-korea .rail-inner,#screen-world .rail-inner,#screen-moon .rail-inner,#screen-compare .rail-inner{padding:16px 15px 26px!important}
  .layer-grid{gap:7px!important}
  .layer-grid button{font-size:11px!important;min-height:42px!important}
  .ranking .rank{border-radius:12px!important;border-color:#e0e9f1!important;background:#fff!important}
  .nav,.map-timebar,.hourly,.nowcast-strip,.favorite-chips,.hm-hscroll{scrollbar-width:none!important}
  .nav::-webkit-scrollbar,.map-timebar::-webkit-scrollbar,.hourly::-webkit-scrollbar,.nowcast-strip::-webkit-scrollbar,.favorite-chips::-webkit-scrollbar,.hm-hscroll::-webkit-scrollbar{display:none!important}
}
@media(max-width:420px){
  .brand small{display:none!important}
  .nav button::before{font-size:11px}
  .nav button::after{font-size:10px!important}
  #screen-local .map-timebar button{font-size:10px!important}
}