/* HealingMart Weather ? 94c visual skin on the full data layout.
   Presentation only: keep existing DOM, API routes, IDs and service logic. */
:root{
  --skin-ink:#102a32;
  --skin-ink-strong:#071b22;
  --skin-muted:#5f7379;
  --skin-paper:#f5f8f6;
  --skin-surface:#ffffff;
  --skin-line:#dbe4e1;
  --skin-line-soft:#eaf0ee;
  --skin-accent:#087c69;
  --skin-accent-deep:#055c50;
  --skin-accent-soft:#dcf3ec;
  --skin-blue:#1877c9;
  --skin-shadow:0 12px 32px rgba(16,42,50,.10);
  --skin-left:398px;
  --skin-right:304px;
}

/* Keep the 94c visual language, not the 94c content structure. */
html,body{background:var(--skin-paper)!important;color:var(--skin-ink)!important}
body,button,input,select,textarea{font-family:Pretendard Variable,Pretendard,SUIT,"Noto Sans KR","Apple SD Gothic Neo",Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important}
.app{background:var(--skin-paper)!important}
.top{background:rgba(255,255,255,.97)!important;border-bottom:1px solid var(--skin-line)!important;box-shadow:none!important}
.search{border:2px solid var(--skin-ink)!important;border-radius:15px!important;background:#fff!important;box-shadow:0 7px 20px rgba(16,42,50,.07)!important}
.search button{background:var(--skin-ink)!important}
.nav{background:#f8faf9!important;border-bottom:1px solid var(--skin-line)!important}
.nav button{background:transparent!important;color:#4c6561!important;border-color:var(--skin-line-soft)!important;box-shadow:none!important}
.nav button.active{background:var(--skin-ink)!important;color:#fff!important;border-radius:10px!important;margin:7px 6px!important}
.nav button.active::after{display:none!important}
.nav button.active strong,.nav button.active small{color:#fff!important}
.nav button.active .eyebrow{background:#ffcf61!important;color:#27372f!important}

/* Desktop: FULL DATA LEFT RAIL + MAP + KOREA TOP10 RIGHT RAIL. */
@media (min-width:981px){
  #screen-local.active{
    display:grid!important;
    grid-template-columns:var(--skin-left) minmax(0,1fr) var(--skin-right)!important;
    height:calc(100dvh - var(--hm-header-h,74px) - var(--hm-nav-h,70px))!important;
    min-height:610px!important;
    overflow:hidden!important;
    background:#dfe8e5!important;
  }

  #screen-local>.rail{
    display:block!important;position:relative!important;z-index:20!important;
    width:auto!important;height:100%!important;max-height:none!important;
    border:0!important;border-right:1px solid var(--skin-line)!important;border-radius:0!important;
    background:#fff!important;box-shadow:8px 0 24px rgba(16,42,50,.055)!important;
    overflow:hidden!important;transform:none!important;backdrop-filter:none!important;
  }
  #screen-local>.rail>.mobile-handle{display:none!important}
  #screen-local .rail-inner{
    height:100%!important;max-height:none!important;overflow-y:auto!important;
    padding:20px 22px 30px!important;scrollbar-width:thin!important;scrollbar-color:#c8d6d2 transparent!important;
  }

  /* Critical: restore the original full data rail on PC. */
  /* Restore legacy data blocks with the same ID-level specificity as the old hide rule. */
  #screen-local .rail-inner>.local-hero-head:not(#mobileLocalDashboard),
  #screen-local .rail-inner>#topAlert:not(#mobileLocalDashboard),
  #screen-local .rail-inner>.source-proof:not(#mobileLocalDashboard),
  #screen-local .rail-inner>.brief:not(#mobileLocalDashboard),
  #screen-local .rail-inner>.nowcast:not(#mobileLocalDashboard),
  #screen-local .rail-inner>.local-extras:not(#mobileLocalDashboard),
  #screen-local .rail-inner>.source:not(#mobileLocalDashboard){display:block!important}
  #screen-local .rail-inner>.hero-temp:not(#mobileLocalDashboard){display:grid!important}
  #screen-local .rail-inner>.metrics:not(#mobileLocalDashboard){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #screen-local .rail-inner>.trust-panel:not(#mobileLocalDashboard):not([hidden]){display:block!important}

  /* Beat the old high-specificity mobile-dashboard hide rule on desktop. */
  #screen-local #mobileLocalDashboard{display:none!important}
  #screen-local .rail-inner>.only-mobile{display:none!important}
  #screen-local #trustPanel[hidden]{display:none!important}

  #screen-local #mobileLocalDashboard{display:none!important}
  #screen-local .rail-inner>.local-hero-head,
  #screen-local .rail-inner>#topAlert,
  #screen-local .rail-inner>.hero-temp,
  #screen-local .rail-inner>.source-proof,
  #screen-local .rail-inner>.trust-panel,
  #screen-local .rail-inner>.metrics,
  #screen-local .rail-inner>.brief,
  #screen-local .rail-inner>.nowcast,
  #screen-local .rail-inner>.local-extras,
  #screen-local .rail-inner>.source{display:block!important}
  #screen-local .rail-inner>.only-mobile{display:none!important}

  /* Weather briefing: informative, not oversized. */
  #screen-local .local-hero-head{margin:0 0 8px!important;padding:0 0 12px!important;border-bottom:1px solid var(--skin-line)!important}
  #screen-local .local-hero-head>div{min-width:0!important}
  #screen-local .local-hero-head .kicker{display:block!important;margin:0 0 4px!important;color:var(--skin-accent)!important;font-size:9px!important;font-weight:900!important;letter-spacing:.14em!important}
  #screen-local .local-hero-head h1{margin:0!important;color:var(--skin-ink-strong)!important;font-size:21px!important;font-weight:900!important;line-height:1.25!important;letter-spacing:-.04em!important}
  #screen-local .local-hero-head p{margin:5px 0 0!important;color:var(--skin-muted)!important;font-size:11px!important;line-height:1.45!important}
  #screen-local .official-data-badge{font-size:9px!important;padding:5px 7px!important;border:1px solid var(--skin-line)!important;background:#f8fbfa!important;color:#45615b!important;box-shadow:none!important}

  #screen-local .hero-temp{
    display:grid!important;grid-template-columns:50px auto minmax(0,1fr) auto!important;align-items:center!important;gap:9px!important;
    margin:12px 0 11px!important;padding:0 0 12px!important;border:0!important;border-bottom:1px solid var(--skin-line)!important;
    border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  #screen-local .wx-icon{width:48px!important;height:48px!important;display:grid!important;place-items:center!important;font-size:38px!important;line-height:1!important}
  #screen-local .wx-icon svg{width:44px!important;height:44px!important}
  #screen-local .hero-reading{display:contents!important}
  #screen-local .hero-reading>div{display:flex!important;align-items:baseline!important;gap:9px!important;min-width:0!important}
  #screen-local .hero-temp strong{font-size:43px!important;line-height:.95!important;font-weight:850!important;letter-spacing:-.055em!important;color:var(--skin-ink-strong)!important}
  #screen-local .hero-condition{font-size:13px!important;font-weight:850!important;color:var(--skin-ink)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #screen-local #feels{font-size:11px!important;color:var(--skin-muted)!important;white-space:nowrap!important}
  #screen-local #ydayDiff,#screen-local #observed{font-size:9px!important;color:#819096!important}
  #screen-local .hero-alert{min-width:auto!important;padding:5px 7px!important;border-radius:999px!important;font-size:9px!important;box-shadow:none!important}

  #screen-local .brief{
    margin:0 0 12px!important;padding:12px 13px!important;border:1px solid #cfe2dc!important;border-left:4px solid var(--skin-accent)!important;
    border-radius:9px!important;background:#f2f7f5!important;box-shadow:none!important;
  }
  #screen-local .brief span{font-size:9px!important;color:var(--skin-accent)!important;letter-spacing:.11em!important}
  #screen-local .brief strong{display:block!important;color:var(--skin-ink-strong)!important;font-size:15px!important;line-height:1.38!important;font-weight:900!important}
  #screen-local .brief p{margin:5px 0 0!important;color:var(--skin-muted)!important;font-size:11px!important;line-height:1.45!important}

  #screen-local .metrics{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;margin:0 0 12px!important;border:1px solid var(--skin-line)!important;border-radius:10px!important;background:#fff!important;overflow:hidden!important}
  #screen-local .metric{min-height:58px!important;padding:9px 7px!important;border:0!important;border-right:1px solid var(--skin-line-soft)!important;background:#fff!important}
  #screen-local .metric:last-child{border-right:0!important}
  #screen-local .metric span{font-size:9px!important;color:#7b8d91!important;white-space:nowrap!important}
  #screen-local .metric b{margin-top:3px!important;color:var(--skin-ink-strong)!important;font-size:13px!important;font-weight:900!important;white-space:nowrap!important}

  /* Hourly forecast remains data-dense but compact. */
  #screen-local .nowcast{margin:0 0 12px!important;border:1px solid var(--skin-line)!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important;overflow:hidden!important}
  #screen-local .nowcast-head{padding:9px 10px!important;background:#f8faf9!important;border-bottom:1px solid var(--skin-line-soft)!important}
  #screen-local .nowcast-head strong{font-size:11px!important;color:var(--skin-ink-strong)!important}
  #screen-local .nowcast-head span{font-size:9px!important;color:#819095!important}
  #screen-local .nowcast-strip{display:flex!important;gap:6px!important;padding:8px!important;overflow-x:auto!important;scrollbar-width:thin!important}
  #screen-local .nowcast-item{flex:0 0 66px!important;min-width:66px!important;min-height:88px!important;padding:8px 5px!important;border:1px solid var(--skin-line-soft)!important;border-radius:9px!important;background:#fafcfb!important}
  #screen-local .nowcast-item b{font-size:9px!important}.nowcast-item i{font-size:19px!important;min-height:23px!important;margin:4px 0!important}.nowcast-item strong{font-size:15px!important}.nowcast-item small{font-size:8px!important;margin-top:2px!important}

  /* All existing data sections stay in the left rail. */
  #screen-local .local-extras{display:block!important}
  #screen-local .section{margin:0!important;padding:13px 0!important;border:0!important;border-top:1px solid var(--skin-line)!important;background:transparent!important;box-shadow:none!important}
  #screen-local .section>h3{margin:0 0 9px!important;color:var(--skin-ink-strong)!important;font-size:12px!important;font-weight:900!important;letter-spacing:-.02em!important}
  #screen-local .air-row,#screen-local .sun-row{gap:7px!important}
  #screen-local .sun-row.sun-quad{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #screen-local .pillbox{min-width:0!important;padding:9px!important;border:1px solid var(--skin-line)!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important}
  #screen-local .pillbox span{font-size:9px!important;color:#7a8b8f!important;white-space:nowrap!important}
  #screen-local .pillbox b{margin-top:3px!important;font-size:12px!important;color:var(--skin-ink-strong)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #screen-local #localOceanSection{display:block!important}
  #screen-local #localOcean{font-size:11px!important;line-height:1.55!important;text-align:left!important}
  #screen-local #localOcean .capture{padding:10px!important;border:1px solid #d7e7e2!important;border-radius:9px!important;background:#f5f9f7!important;text-align:left!important}
  #screen-local #localOcean .tide-events{justify-content:flex-start!important;gap:6px!important;overflow-x:auto!important}
  #screen-local #localOcean .tide-events>div{min-width:72px!important;padding:7px 8px!important;border:1px solid var(--skin-line-soft)!important;border-radius:8px!important;background:#fff!important}
  #screen-local #localOcean .tide-events span{font-size:9px!important;color:var(--skin-muted)!important}
  #screen-local #localOcean .tide-events b{font-size:12px!important;color:var(--skin-ink-strong)!important}
  #screen-local #localOcean .tide-events small{font-size:9px!important;color:#7d8c90!important}

  #screen-local .source-proof{margin:0 0 11px!important;padding:10px!important;border:1px solid var(--skin-line)!important;border-radius:9px!important;background:#fbfcfc!important;box-shadow:none!important}
  #screen-local .source-proof-head{gap:7px!important}.source-proof-grid{gap:6px!important}
  #screen-local .source-proof-grid article{padding:8px!important;border:1px solid var(--skin-line-soft)!important;border-radius:8px!important;background:#fff!important}
  #screen-local .source-proof-grid b{font-size:10px!important}.source-proof-grid small{font-size:8px!important}
  #screen-local .trust-panel{margin:0 0 10px!important;border:1px solid var(--skin-line)!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important}

  #screen-local .windy-mini{border:1px solid var(--skin-line)!important;border-radius:9px!important;background:#e8f0ed!important}
  #screen-local .windy-mini iframe{height:150px!important}
  #screen-local .windy-tabs{padding:5px!important;gap:3px!important;border-bottom:1px solid var(--skin-line-soft)!important}
  #screen-local .windy-tabs button{padding:5px 6px!important;border:1px solid var(--skin-line)!important;border-radius:7px!important;font-size:9px!important;background:#fff!important}
  #screen-local .windy-tabs button.active{background:var(--skin-ink)!important;border-color:var(--skin-ink)!important;color:#fff!important}
  #screen-local .provider{padding:7px 0!important;border-color:var(--skin-line-soft)!important}.provider b{font-size:11px!important}.provider span,.provider small{font-size:9px!important}.provider strong{font-size:12px!important}
  #screen-local .capture{padding:9px 10px!important;border:1px solid #d7e7e2!important;border-radius:9px!important;background:#f5f9f7!important;font-size:10px!important;line-height:1.5!important;text-align:left!important}
  #screen-local .detail-link{min-height:40px!important;margin:0 0 9px!important;border:0!important;border-radius:9px!important;background:var(--skin-ink)!important;color:#fff!important;font-size:11px!important;font-weight:850!important}
  #screen-local .favline{margin:0 0 10px!important}
  #screen-local .source{padding:12px 0 0!important;color:#8a989b!important;font-size:8px!important;line-height:1.55!important}

  /* Center map: map stays the hero, briefing stays in the left rail. */
  #screen-local>.maparea{position:relative!important;min-width:0!important;height:100%!important;background:#dfe8e5!important;overflow:hidden!important}
  #screen-local #localMap{width:100%!important;height:100%!important;min-height:100%!important}
  #screen-local .map-title{top:16px!important;left:16px!important;max-width:300px!important;padding:11px 13px!important;border:1px solid rgba(16,42,50,.14)!important;border-radius:10px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 9px 24px rgba(16,42,50,.11)!important;backdrop-filter:blur(10px)!important}
  #screen-local .map-title span{font-size:8px!important;color:var(--skin-accent)!important;letter-spacing:.12em!important}.map-title strong{font-size:17px!important;color:var(--skin-ink-strong)!important}.map-title small{font-size:9px!important;color:var(--skin-muted)!important}
  #screen-local .map-timebar{right:12px!important;bottom:12px!important;left:auto!important;width:auto!important;max-width:calc(100% - 24px)!important}

  /* Right rail: Korea current situation TOP 10. */
  #screen-local>.local-right-rail{display:block!important;position:relative!important;width:auto!important;height:100%!important;overflow:hidden!important;border:0!important;border-left:1px solid var(--skin-line)!important;background:#f8faf9!important;box-shadow:-8px 0 24px rgba(16,42,50,.045)!important}
  #screen-local .local-right-inner{height:100%!important;overflow-y:auto!important;padding:20px 16px 24px!important;scrollbar-width:thin!important}
  #screen-local .local-right-inner>.kicker{margin:0 0 5px!important;color:var(--skin-accent)!important;font-size:9px!important;font-weight:900!important;letter-spacing:.13em!important}
  #screen-local .local-right-inner>h2{margin:0!important;color:var(--skin-ink-strong)!important;font-size:21px!important;font-weight:900!important;letter-spacing:-.045em!important}
  #screen-local #localRankScope{margin:5px 0 13px!important;color:var(--skin-muted)!important;font-size:10px!important;line-height:1.45!important}
  #screen-local #localRankTabs.local-rank-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;margin:0 0 12px!important;flex-wrap:nowrap!important}
  #screen-local .local-rank-tabs button{min-width:0!important;min-height:31px!important;padding:0 3px!important;border:1px solid var(--skin-line)!important;border-radius:7px!important;background:#fff!important;color:#5d716d!important;font-size:9px!important;font-weight:850!important}
  #screen-local .local-rank-tabs button.active{background:var(--skin-ink)!important;border-color:var(--skin-ink)!important;color:#fff!important}
  #screen-local .ranking{display:grid!important;gap:4px!important}
  #screen-local .rank{display:grid!important;grid-template-columns:24px minmax(0,1fr) auto!important;align-items:center!important;min-height:42px!important;padding:6px 8px!important;border:1px solid transparent!important;border-bottom:1px solid var(--skin-line-soft)!important;border-radius:7px!important;background:transparent!important}
  #screen-local .rank:hover{border-color:var(--skin-line)!important;background:#fff!important}
  #screen-local .rank em{font-size:9px!important;color:#93a09d!important}.rank b{overflow:hidden!important;font-size:11px!important;color:var(--skin-ink)!important;text-overflow:ellipsis!important;white-space:nowrap!important}.rank strong{font-size:13px!important;color:var(--skin-accent-deep)!important;font-weight:900!important}
  #screen-local .local-right-inner>.source{margin-top:10px!important;padding-top:10px!important;border-top:1px solid var(--skin-line)!important;font-size:8px!important;color:#8a989b!important}
}

/* Medium desktop: keep the left data rail, collapse the ranking rail first. */
@media (min-width:981px) and (max-width:1180px){
  :root{--skin-left:380px}
  #screen-local.active{grid-template-columns:var(--skin-left) minmax(0,1fr)!important}
  #screen-local>.local-right-rail{display:none!important}
}

/* Mobile/tablet: retain the existing map-first bottom-sheet behavior and make typography restrained. */
@media (max-width:980px){
  #screen-local #mobileLocalDashboard{display:block!important}
  #screen-local .rail-inner>*:not(#mobileLocalDashboard){display:none!important}
  #screen-local #mobileLocalDashboard #temp{font-size:46px!important;line-height:.95!important}
  #screen-local #mobileLocalDashboard .point-weather-icon{width:56px!important;min-width:56px!important;height:56px!important}
  #screen-local #mobileLocalDashboard .v8-weather-art{width:54px!important;height:54px!important}
  #screen-local #mobileLocalDashboard .mld-point-head h1,#screen-local #mobileLocalDashboard .mld-point-head h2{font-size:20px!important}
  #screen-local #mobileLocalDashboard .mld-weather-hero{padding-bottom:10px!important;margin-bottom:10px!important}
  #screen-local>.local-right-rail{display:none!important}
}

/* Final desktop specificity lock: data layout wins over legacy/mobile presentation rules. */
@media (min-width:981px){
  #screen-local .rail-inner>.hero-temp{display:grid!important}
  #screen-local #temp{font-size:43px!important;line-height:.95!important}
  #screen-local .rail-inner>.metrics{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #screen-local .rail-inner>.brief{display:block!important}
  #screen-local .rail-inner>.nowcast{display:block!important}
  #screen-local .rail-inner>.local-extras{display:block!important}
  #screen-local #localRankTabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;flex-wrap:nowrap!important;margin:0 0 12px!important}
}

/* Compact current-weather row and four-metric strip: explicit final desktop display. */
@media (min-width:981px){
  #screen-local .rail-inner>.hero-temp.hero-temp{display:grid!important}
  #screen-local .rail-inner>.metrics.metrics{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
}