.weather-panel { margin: 0 0 24px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); min-width: 0; }
.weather-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.weather-heading h2 { margin:3px 0 8px; font-size:18px; overflow-wrap:anywhere; }
.weather-actions { display:flex; gap:8px; flex-shrink:0; }
.weather-actions button { font-size:13px; min-height:44px; padding:8px 12px; }
#weather-current { font-size:16px; line-height:1.6; font-weight:600; }
#weather-status { color:var(--muted); font-size:12px; margin:8px 0; line-height:1.6; }
#weather-details > summary { cursor:pointer; font-size:14px; color:var(--green); padding:12px 0 0; min-height:44px; }
.weather-tabs { display:grid; grid-template-columns:repeat(4,minmax(max-content,1fr)); gap:4px; overflow-x:auto; padding:5px 3px; margin:12px -3px 0; border-bottom:1px solid var(--line); }
.weather-tabs [role=tab] { min-height:44px; padding:8px 10px; border:0; border-bottom:3px solid transparent; border-radius:6px 6px 0 0; background:transparent; color:var(--muted); font-size:14px; white-space:nowrap; }
.weather-tabs [role=tab][aria-selected=true] { background:var(--soft); border-bottom-color:var(--green); color:var(--green); font-weight:700; }
.weather-tabs [role=tab]:focus-visible { outline-offset:-3px; }
.weather-tabpanel:focus-visible,.weather-table-wrap:focus-visible { outline:3px solid var(--amber); outline-offset:2px; }
.weather-block { border-top:1px solid var(--line); padding:18px 0 4px; margin-top:16px; min-width:0; }
.weather-tabpanel > .weather-block:first-child { margin-top:0; border-top:0; }
.weather-block-heading { display:flex; align-items:baseline; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-bottom:8px; }
.weather-block h3 { font-size:17px; margin:0; }
.weather-block h4 { font-size:14px; margin:16px 0 8px; }
.weather-block-heading a { font-size:12px; color:var(--green); text-underline-offset:3px; }
.weather-meta { font-size:12px; color:var(--muted); line-height:1.7; margin:5px 0; }
#weather-observation a { color:var(--green); white-space:nowrap; }
.weather-ranges { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; }
.weather-ranges > div { padding:12px; background:var(--soft); border-radius:8px; }
.weather-ranges dt { font-size:12px; color:var(--muted); }
.weather-ranges dd { margin:4px 0 0; font-size:18px; font-weight:600; overflow-wrap:anywhere; }
.weather-ranges dd.weather-meta { font-size:12px; font-weight:400; }
.weather-more { margin:14px 0 4px; border-top:1px solid var(--line); }
.weather-more > summary { min-height:44px; padding:12px 0; cursor:pointer; font-size:14px; color:var(--green); }
.weather-more > .weather-block { margin-top:0; padding-top:8px; border-top:0; }
.weather-history-status { display:block; margin-top:5px; color:var(--amber); font-size:12px; }
.weather-more[open] > summary::after { content:" · 다시 눌러 접기"; font-size:12px; color:var(--muted); }
.weather-message { font-size:14px; line-height:1.7; margin:10px 0; overflow-wrap:anywhere; }
.weather-message.is-error { color:var(--amber); }
.weather-original { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.8; background:var(--soft); padding:12px; border-radius:6px; }
.weather-table-wrap { width:100%; overflow-x:auto; margin:14px 0; border:1px solid var(--line); border-radius:8px; }
.weather-table-hint { display:none; padding:8px 10px; font-size:12px; color:var(--muted); }
.weather-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; white-space:nowrap; }
.weather-table th { background:var(--soft); font-weight:600; color:var(--muted); }
.weather-table th,.weather-table td { padding:10px 12px; border-bottom:1px solid var(--line); }
.weather-table tr:last-child td { border-bottom:0; }
.weather-disclaimer { font-size:13px; line-height:1.8; color:var(--muted); padding:16px 0 0; }
#weather-location-dialog { width:min(580px,calc(100% - 32px)); max-height:85dvh; padding:24px; border:1px solid var(--line); border-radius:12px; color:var(--ink); }
#weather-location-dialog::backdrop { background:#102c24aa; }
#weather-location-dialog h2 { font-size:23px; }
#weather-location-form > label { display:flex; flex-direction:column; gap:8px; font-size:14px; margin:18px 0 12px; }
#weather-region-search { width:100%; min-height:48px; font-size:16px; }
#weather-region-options { max-height:30vh; overflow-y:auto; display:grid; gap:6px; padding:4px; margin:10px -4px; }
.weather-region-option { text-align:left; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--white); color:var(--ink); min-height:44px; font-size:14px; }
.weather-region-option[aria-pressed=true] { border-color:var(--green); background:var(--soft); font-weight:700; }
#weather-selected-region { font-size:14px; margin:14px 0; font-weight:600; }
#weather-location-error { font-size:14px; line-height:1.7; color:var(--amber); margin:10px 0; }
.weather-location-actions { display:flex; gap:12px; flex-wrap:wrap; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:720px) {
  .weather-panel { padding:16px; margin-bottom:18px; }
  .weather-heading { flex-wrap:wrap; gap:6px; }
  .weather-actions { width:100%; justify-content:flex-end; }
  #weather-current { font-size:15px; }
  .weather-tabs [role=tab] { font-size:13px; padding:8px 5px; }
  .weather-table th,.weather-table td { padding:9px 10px; }
  .weather-table-hint { display:block; }
  .weather-ranges { gap:8px; }
  .weather-ranges > div { padding:10px; }
  #weather-location-dialog { padding:18px; }
}