* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0e14;
  font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif; color: #dde3ec;
  touch-action: manipulation; }   /* no double-tap page zoom; globe canvas sets its own */
#c { position: fixed; inset: 0; display: block; }

#hud-top-left { position: fixed; top: 14px; left: 18px; pointer-events: none; }
#title { font-size: 20px; font-weight: 700; letter-spacing: .5px; text-shadow: 0 1px 4px #000; }
#title .sub { font-size: 12px; font-weight: 400; color: #9fb0c8; margin-left: 6px; }
#cycle-info { font-size: 11px; color: #8fa2bd; margin-top: 3px; text-shadow: 0 1px 3px #000; }
#disclaimer { font-size: 9px; color: #5f6f88; margin-top: 2px; text-shadow: 0 1px 3px #000; }

#hud-top-right { position: fixed; top: 14px; right: 18px; display: flex; gap: 10px;
  flex-direction: column; align-items: flex-end; background: rgba(12,16,24,.65);
  padding: 10px 12px; border-radius: 10px; backdrop-filter: blur(6px); }
/* the three stacked control groups share one width; buttons split it evenly */
#view-toggle, #mode-toggle, #field-toggle { display: flex; width: 189px; }
#view-toggle button, #mode-toggle button, #field-toggle button { flex: 1; padding: 5px 0; }
.btn-group button { background: #1b2330; color: #b9c6d8; border: 1px solid #2c3a4f;
  padding: 5px 12px; font-size: 12px; cursor: pointer; }
.btn-group button:first-child { border-radius: 6px 0 0 6px; }
.btn-group button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.btn-group button.active { background: #2f6fed; color: #fff; border-color: #2f6fed; }
.ctl { font-size: 12px; color: #b9c6d8; display: flex; align-items: center; gap: 5px; }
.ctl input[type=range] { width: 80px; accent-color: #2f6fed; }
.ctl input[type=checkbox] { accent-color: #2f6fed; }

#loadbar-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: #131a26; }
#loadbar { height: 100%; width: 0; background: #2f6fed; transition: width .2s; }
#loadtext { position: fixed; top: 6px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: #7d8fa9; }

#legends { position: fixed; right: 18px; bottom: 92px; display: flex; flex-direction: column;
  gap: 6px; background: rgba(12,16,24,.55); padding: 8px 10px; border-radius: 8px; }
.legend-row { display: flex; flex-direction: row; align-items: center; gap: 8px; }
#legends img { width: 315px; display: block; }
.cb-wrap { position: relative; }
.cb-lab { position: absolute; top: 16%; transform: translateX(-50%); font-size: 10px;
  font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.6);
  pointer-events: none; }
#cbl-cold { left: 15%; }
#cbl-warm { left: 85%; }
#legend-pr { cursor: pointer; }
.btn-group.vertical { display: flex; flex-direction: column; }
.btn-group.vertical button { padding: 4px 8px; font-size: 11px; }
.btn-group.vertical button:first-child { border-radius: 6px 6px 0 0; }
.btn-group.vertical button:last-child { border-radius: 0 0 6px 6px; border-left: 1px solid #2c3a4f;
  border-top: none; }

#timebar { position: fixed; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(transparent, rgba(8,11,17,.92) 30%);
  display: flex; align-items: center; gap: 14px; padding: 14px 22px 12px; }
#btn-play { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #2c3a4f;
  background: #1b2330; color: #dde3ec; font-size: 15px; cursor: pointer; flex: none; }
#btn-play:hover { background: #24303f; }
#btn-back, #btn-fwd { width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #2c3a4f; background: #1b2330; color: #b9c6d8;
  font-size: 13px; cursor: pointer; flex: none; }
#btn-back:hover, #btn-fwd:hover { background: #24303f; }
#btn-now { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid #b28a2e;
  background: #2a2413; color: #ffd257; font-size: 12px; font-weight: 600;
  cursor: pointer; flex: none; }
#btn-now:hover { background: #3a3118; }
#btn-loc { width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #2c3a4f; background: #1b2330; font-size: 14px;
  cursor: pointer; flex: none; color: #9fc0e8;
  display: flex; align-items: center; justify-content: center; }
#btn-loc:hover { background: #24303f; color: #cfe2f8; }
#btn-radar { width: 189px; padding: 5px 0; border-radius: 6px;
  border: 1px solid #2c3a4f; background: #1b2330; color: #b9c6d8;
  font-size: 12px; cursor: pointer; }
#btn-radar:hover { background: #24303f; }
#btn-radar.active { border-color: #2f6fed; background: #2f6fed; color: #fff; }
#time-labels { flex: none; width: 350px; line-height: 1.25; }
#time-kst { display: block; font-size: 30px; font-weight: 700; }
#time-utc { display: inline-block; font-size: 11px; color: #8fa2bd; margin-right: 8px; }
#time-kind { display: inline-block; font-size: 10px; color: #6f829d; }
#slider-wrap { position: relative; flex: 1; height: 64px; display: flex;
  align-items: flex-end; }
#time-slider { width: 100%; accent-color: #2f6fed; height: 6px; cursor: pointer;
  margin-bottom: 10px; }
#day-ruler { position: absolute; top: 0; left: 0; right: 0; height: 30px;
  pointer-events: none; }
.day-tick { position: absolute; top: 22px; width: 1px; height: 14px;
  background: rgba(255,255,255,.22); }
.day-lab { position: absolute; top: 8px; transform: translateX(-50%);
  font-size: 11px; color: #9fb0c8; white-space: nowrap; }
.day-lab.red { color: #ff6b6b; font-weight: 600; }
#now-tick { position: absolute; top: 22px; width: 2px; height: 30px; background: #ffd257;
  pointer-events: none; }
#now-tick::after { content: "NOW"; position: absolute; top: -13px; left: -12px;
  font-size: 10px; font-weight: 700; color: #ffd257; }

#popup { position: fixed; min-width: 220px; background: rgba(14,19,28,.72);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border: 1px solid #31415a; border-radius: 10px; padding: 12px 14px; z-index: 20;
  box-shadow: 0 6px 24px rgba(0,0,0,.5); }
#popup-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding-right: 118px; }
#popup-title.small { font-size: 11px; font-weight: 500; color: #b9c6d8; padding-top: 3px; }
#popup-title a { color: #7db3ff; text-decoration: none; }
#popup-title a:hover { text-decoration: underline; }
#popup-graph { display: none; margin-top: 2px; }
#popup-links a { display: block; font-size: 12px; color: #7db3ff; text-decoration: none;
  padding: 5px 8px; border: 1px solid #2c3a4f; border-radius: 6px; margin-top: 5px;
  background: #18202d; }
#popup-links a:hover { background: #22304a; }
#popup-close { position: absolute; top: 8px; right: 8px; background: none; border: none;
  color: #8fa2bd; cursor: pointer; font-size: 12px; }
#popup-span { position: absolute; top: 6px; right: 28px; display: flex; }
#popup-span button { background: #18202d; border: 1px solid #2c3a4f; color: #8fa2bd;
  cursor: pointer; font-size: 10px; padding: 3px 7px; border-left: none; }
#popup-span button:first-child { border-left: 1px solid #2c3a4f; border-radius: 6px 0 0 6px; }
#popup-span button:last-child { border-radius: 0 6px 6px 0; }
#popup-span button.active { background: #2f6fed; border-color: #2f6fed; color: #fff; }

/* ---- advisor ---- */
#advisor { position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(560px, 44vw); z-index: 15; display: flex; flex-direction: column; gap: 6px; }
#adv-search { display: flex; gap: 6px; }
#adv-input { flex: 1; height: 38px; padding: 0 14px; border-radius: 19px;
  border: 1px solid #31415a; background: rgba(14,19,28,.55); color: #dde3ec;
  font-size: 13px; outline: none; backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); }
#adv-input:focus { border-color: #2f6fed; }
#adv-input::placeholder { color: #aebdd4; }
#adv-go { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #2c3a4f;
  background: #2f6fed; color: #fff; cursor: pointer; font-size: 12px; }
#adv-now { position: fixed; top: 78px; left: 18px; width: 330px; z-index: 12;
  font-size: 12px; line-height: 1.55; color: #c3cede;
  background: rgba(14,19,28,.75); border: 1px solid #24304a; border-radius: 10px;
  padding: 9px 26px 9px 12px; backdrop-filter: blur(6px); }
#adv-now-close { position: absolute; top: 6px; right: 7px; background: none; border: none;
  color: #62748f; cursor: pointer; font-size: 11px; }
#adv-now-close:hover { color: #dde3ec; }
.adv-now-place { color: #ffd257; font-weight: 600; margin-right: 4px; }
#adv-card { position: relative; background: rgba(14,19,28,.92); border: 1px solid #31415a;
  border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.5);
  backdrop-filter: blur(8px); max-height: 60vh; overflow-y: auto; }
#adv-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }
#adv-actions button { background: none; border: none; color: #8fa2bd; cursor: pointer;
  font-size: 13px; padding: 2px 5px; border-radius: 5px; }
#adv-actions button:hover { background: #24304a; color: #dde3ec; }
/* copy / report: shown at the END of the advice text, only after the search finishes */
#adv-tools { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
#adv-tools[hidden] { display: none; }
#adv-tools button { background: #18202d; border: 1px solid #2c3a4f; color: #7db3ff;
  font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
#adv-tools button:hover { background: #22304a; }
#adv-chip { font-size: 12px; color: #7db3ff; font-weight: 600; padding-right: 76px; }
#adv-status { font-size: 12px; color: #9fb0c8; margin-top: 6px; }
#adv-status.error { color: #ff8a8a; }
#adv-status .dots { animation: advdots 1.2s infinite; }
@keyframes advdots { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
#adv-advice { font-size: 13.5px; line-height: 1.65; margin-top: 8px; white-space: pre-wrap; }
.adv-strip-cap { font-size: 10px; color: #6f829d; margin-top: 4px; }
.adv-strip { display: flex; gap: 4px; overflow-x: auto; margin-top: 10px; }
.adv-cell { flex: none; min-width: 58px; background: #141b28; border: 1px solid #22304a;
  border-radius: 8px; padding: 5px 6px; text-align: center; font-size: 11px; }
.adv-h { color: #8fa2bd; font-size: 10px; }
.adv-t { font-size: 15px; font-weight: 700; margin-top: 2px; }
.adv-t.warm { color: #ff9a6b; }
.adv-t.cold { color: #7db3ff; }
.adv-a { color: #9fb0c8; font-size: 10px; }
.adv-p { color: #62748f; margin-top: 2px; }
.adv-p.rain { color: #6bd3ff; font-weight: 600; }
.adv-rh { color: #6f829d; font-size: 10px; }

/* ---- mobile drawers + compact layout ---- */
.m-drawer-btn { display: none; position: fixed; z-index: 30; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid #31415a; background: rgba(14,19,28,.9);
  color: #dde3ec; font-size: 17px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
#m-left-btn { top: 58px; left: 10px; }
/* right-edge icon column (75% size), collapsible behind the ☰ menu button */
#m-menu, .m-col { width: 30px; height: 30px; font-size: 12px; }
#m-menu { top: 10px; right: 8px; }
#m-view { top: 46px; right: 8px; font-size: 10px; font-weight: 700; }
#m-t2m { top: 82px; right: 8px; }
#m-pr { top: 118px; right: 8px; }
#m-wind { top: 154px; right: 8px; }
#m-radar { top: 190px; right: 8px; }
#m-loc { top: 226px; right: 8px; color: #9fc0e8;
  align-items: center; justify-content: center; }
#m-legend-btn { top: 262px; right: 8px; }
.m-col { transition: transform .22s, opacity .22s; }
body.mcol-closed .m-col { transform: translateX(52px); opacity: 0; pointer-events: none; }
.m-field.active { border-color: #2f6fed; background: rgba(35,80,180,.85); }

@media (max-width: 820px) {
  .m-drawer-btn { display: block; }
  #title { font-size: 16px; }
  #cycle-info { display: none; }
  #disclaimer { font-size: 8px; max-width: 60vw; }

  /* right drawers: ☰ controls / 🌈 legends (separate buttons, never both open) */
  #hud-top-right { top: 104px; right: 0; border-radius: 10px 0 0 10px;
    transform: translateX(103%); transition: transform .25s; z-index: 25;
    max-height: 55vh; overflow-y: auto; }
  /* everything lives in the icon column on mobile: hide the panel & its drawer button */
  #field-toggle, #btn-radar, #view-toggle, #mode-toggle, #hud-top-right { display: none; }
  /* header: title only — tapping the title reveals the PC-style details */
  #title .sub, #disclaimer { display: none; }
  #title { pointer-events: auto; cursor: pointer; }
  body.info-open #title .sub { display: inline; }
  body.info-open #cycle-info { display: block; }
  body.info-open #disclaimer { display: block; }
  body.right-open #hud-top-right { transform: none; }
  /* legends open to the LEFT of the icon column so the unit buttons stay tappable */
  #legends { right: 46px; top: 226px; bottom: auto; border-radius: 10px;
    transform: translateX(calc(100% + 50px)); transition: transform .25s; z-index: 24;
    max-width: calc(100vw - 56px); }
  body.legend-open #legends { transform: none; }
  #legends img { width: min(230px, calc(100vw - 150px)); }

  /* left drawer: default nowcast mention */
  #adv-now { top: 104px; left: 0; width: min(320px, 82vw); border-radius: 0 10px 10px 0;
    transform: translateX(-103%); transition: transform .25s; z-index: 25; }
  body.left-open #adv-now { transform: none; }

  /* search above the timebar; result card opens upward */
  #advisor { top: auto; bottom: calc(132px + env(safe-area-inset-bottom));
    left: 8px; right: 8px; width: auto;
    transform: none; flex-direction: column-reverse;
    z-index: 35; }   /* above the drawer buttons: nothing may cover the card's ✕ */
  #adv-card { max-height: 44vh; background: rgba(14,19,28,.72);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  /* ✕: zero-height sticky anchor — no wasted row, still pinned while scrolling */
  #adv-actions { position: sticky; top: -12px; height: 0; margin: 0;
    display: flex; justify-content: flex-end; z-index: 2; overflow: visible; }
  #adv-actions button { font-size: 15px; padding: 4px 9px;
    background: rgba(20,27,40,.85); border-radius: 8px; }
  #adv-chip { padding-right: 34px; }
  /* 16px min: any smaller and mobile browsers auto-zoom the page on focus */
  #adv-input { height: 38px; font-size: 16px; }
  #adv-go { width: 38px; height: 38px; }

  /* compact timebar — auto height: a wrapped row must never push the slider offscreen */
  #timebar { height: auto; padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 6px 8px; flex-wrap: wrap; }
  #time-labels { flex: 1 1 0; width: auto; min-width: 0; order: 1; }
  #time-kst { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #time-utc { font-size: 9px; }
  #time-kind { font-size: 9px; }
  #btn-now { order: 2; height: 26px; padding: 0 10px; font-size: 11px; }
  #btn-loc { display: none; }   /* lives in the right icon column on mobile */
  #btn-back, #btn-fwd { order: 3; width: 28px; height: 28px; font-size: 12px; }
  #btn-play { order: 3; width: 30px; height: 30px; font-size: 12px; }
  #slider-wrap { order: 4; flex-basis: 100%; height: 42px; }
  .day-lab { font-size: 9px; }
  #now-tick::after { font-size: 9px; }
}

#pin { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 7; }
#pin .dot, #pin .ring { position: absolute; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%; box-sizing: border-box; }
#pin .dot { background: #ffd23e; border: 2px solid #fff;
  box-shadow: 0 0 8px rgba(0,0,0,.55); animation: pin-blink 1.1s infinite; }
#pin .ring { border: 2px solid rgba(255,210,62,.85);
  animation: pin-pulse 1.6s ease-out infinite; }
@keyframes pin-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes pin-pulse { 0% { transform: scale(1); opacity: .9; }
  100% { transform: scale(4.2); opacity: 0; } }

#city-labels { position: fixed; inset: 0; pointer-events: none; z-index: 6;
  transition: opacity .25s; }
.city-label { position: absolute; left: 0; top: 0; font-size: 11px; color: #eef2f8;
  text-shadow: 0 1px 3px #000, 0 0 5px rgba(0,0,0,.9);
  white-space: nowrap; margin: -9px 0 0 3px; padding: 3px 5px;
  pointer-events: auto; cursor: pointer; }
.city-label:hover { text-decoration: underline; color: #ffd257; }

#toast { position: fixed; top: 54px; left: 50%; transform: translateX(-50%);
  background: #2f6fed; color: #fff; font-size: 13px; padding: 8px 16px; border-radius: 8px;
  z-index: 30; }
#toast a { color: #ffe28a; }