/* 세계 시차 모니터 전용 CSS (2026-10-14). 기준 시각 머리 + 낮·밤 지도(가로 스크롤 640px 이상) + 시각 옮겨 보기 + 내 도시 카드(아날로그 시계) + 도시 목록 격자.
   공용 부품은 assets/v2.css. 움직임은 새 카드 등장 하나(250ms, cubic-bezier(.22,1,.36,1)), 동작 줄이기면 없음. */
.wz-work{container:wz/inline-size;--wz-sea:color-mix(in srgb,#5f86a6 16%,var(--paper));--wz-land:color-mix(in srgb,var(--muted) 34%,var(--paper));--wz-night:rgba(16,18,40,.42);--wz-grid:color-mix(in srgb,var(--muted) 22%,transparent);
  --wz-w:color-mix(in srgb,var(--accent) 55%,var(--paper));--wz-e:color-mix(in srgb,var(--muted) 22%,var(--paper));--wz-n:color-mix(in srgb,var(--ink) 78%,var(--paper));--wz-face-n:#25211c;--wz-hand-n:#f3e7cf}
:root[data-theme="dark"] .wz-work{--wz-sea:color-mix(in srgb,#5f86a6 14%,var(--paper));--wz-land:color-mix(in srgb,var(--muted) 30%,var(--paper));--wz-night:rgba(0,0,0,.5);--wz-n:#0d0905;--wz-face-n:#0d0905}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wz-work{--wz-sea:color-mix(in srgb,#5f86a6 14%,var(--paper));--wz-land:color-mix(in srgb,var(--muted) 30%,var(--paper));--wz-night:rgba(0,0,0,.5);--wz-n:#0d0905;--wz-face-n:#0d0905} }

/* 기준 시각 */
.wz-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:14px 24px;align-items:end;padding:16px 18px;border-bottom:1px solid var(--soft)}
.wz-base{min-width:0}
.wz-big{margin-top:6px;gap:6px;flex-wrap:wrap}
.wz-big .ss{font-size:26px;color:var(--muted);font-weight:700}
.wz-big .ap{font-size:22px;font-weight:700}
.wz-big .ap:empty{display:none}
.wz-bsub{margin-top:8px;font-family:var(--sans);font-size:13px;color:var(--muted)}
.wz-ctl{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px}
.wz-ctl .v2-f > .v2-label{display:block;margin:0 0 5px}
.wz-sel{display:block;width:100%;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;min-width:0;text-overflow:ellipsis}
.wz-seg{display:flex;flex-wrap:nowrap;width:100%}
.wz-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 6px;font-size:13px;font-weight:700;white-space:nowrap}
.wz-sel:focus-visible,.wz-shift input:focus-visible,.wz-city:focus-visible,.wz-x:focus-visible,.wz-qx:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 본문: DOM은 카드 → 지도. 지도가 스크롤되지 않는 넓은 폭에서만 지도를 위로(order), 좁은 폭은 DOM 순서 그대로 */
.wz-body{display:flex;flex-direction:column}
.wz-mapbox{order:-1;padding:14px 18px 6px;min-width:0}
.wz-maphead{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-bottom:6px}
.wz-sunat{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.wz-mapscroll{overflow-x:auto;border:1px solid var(--soft);border-radius:var(--radius);-webkit-overflow-scrolling:touch}
.wz-map{display:block;width:100%;min-width:640px;height:auto}
.wz-sea{fill:var(--wz-sea)}
.wz-land{fill:var(--wz-land)}
.wz-grat path{stroke:var(--wz-grid);stroke-width:.6;fill:none}
.wz-grat path.tr{stroke-dasharray:3 4}
.wz-night{fill:var(--wz-night);pointer-events:none}
.wz-dot{cursor:pointer}
.wz-dot .hit{fill:transparent}
.wz-dot .pt{fill:var(--ink);opacity:.5}
.wz-dot.is-n .pt{fill:var(--paper);opacity:.75}
.wz-dot:hover .pt{opacity:1}
.wz-dot.is-pin .pt{fill:var(--accent);opacity:1;stroke:var(--paper);stroke-width:1.2}
.wz-dot.is-base .pt{fill:var(--ink);opacity:1;stroke:var(--paper);stroke-width:1.2}
.wz-dot.is-base .hit{stroke:var(--ink);stroke-width:1.4}
.wz-sunpt{pointer-events:none}
.wz-sunpt .halo{fill:#f6b73c;opacity:.28}
.wz-sunpt .core{fill:#f6b73c;stroke:#b06d00;stroke-width:1}
.wz-lab{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round;pointer-events:none;font-variant-numeric:tabular-nums}
.wz-lab.is-base{font-weight:800}
.wz-note{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.wz-swipe{display:none}
@container wz (max-width:675px){ .wz-swipe{display:block} .wz-mapbox{order:0;border-top:1px solid var(--soft);padding-top:14px} .wz-cardbox{padding-top:16px} }

.wz-shift{margin-bottom:14px}
.wz-shift > .v2-label{display:block;margin-bottom:4px}
.wz-shiftrow{display:flex;align-items:center;gap:10px}
.wz-shift input[type="range"]{flex:1 1 auto;min-width:0;accent-color:var(--accent);height:28px;margin:0}
.wz-shiftrow .v2-btn{flex:0 0 auto}
.wz-shiftout{display:block;margin-top:2px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* 내 도시 카드 */
.wz-cardbox{padding:14px 18px 16px;min-width:0}
.wz-cardbox > .v2-label{display:block;margin-bottom:8px}
.wz-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}
.wz-card{position:relative;min-width:0;padding:11px 12px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);display:flex;flex-direction:column;gap:7px}
.wz-card.is-base{border-color:var(--ink);background:color-mix(in srgb,var(--wash) 70%,var(--paper))}
.wz-card.is-new{animation:wz-in 250ms cubic-bezier(.22,1,.36,1) both}
@keyframes wz-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wz-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
.wz-nm{min-width:0;display:flex;flex-direction:column}
.wz-nm b{font-family:var(--sans);font-size:14.5px;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.wz-nm small{font-family:var(--sans);font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.wz-btag{flex:0 0 auto;font-family:var(--sans);font-size:11px;font-weight:800;color:var(--accent)}
.wz-x{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);cursor:pointer}
.wz-x svg{width:12px;height:12px}
.wz-x:hover{color:var(--accent);border-color:var(--accent)}
.wz-cm{display:flex;align-items:center;gap:10px;min-width:0}
.wz-clock{flex:0 0 auto;width:58px;height:58px}
.wz-clock .face{fill:var(--card);stroke:var(--line);stroke-width:1.2}
.wz-clock .tk{stroke:var(--muted);stroke-width:1.2;stroke-linecap:round}
.wz-clock .tk.q{stroke:var(--ink);stroke-width:2}
.wz-clock .hh{stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}
.wz-clock .mh{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.wz-clock .sh{stroke:var(--accent);stroke-width:1.1;stroke-linecap:round}
.wz-clock .pin{fill:var(--accent)}
.wz-clock[data-dn="n"] .face{fill:var(--wz-face-n);stroke:var(--wz-face-n)}
.wz-clock[data-dn="n"] .tk,.wz-clock[data-dn="n"] .tk.q,.wz-clock[data-dn="n"] .hh,.wz-clock[data-dn="n"] .mh{stroke:var(--wz-hand-n)}
.wz-work.is-shift .wz-clock .sh,.wz-work.is-shift .wz-time .ss{display:none}
.wz-ct{min-width:0}
.wz-time{margin:0;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;font-family:var(--sans);font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.wz-time .ss{font-size:15px;font-weight:700;color:var(--muted)}
.wz-time .ap{font-size:13px;font-weight:700}
.wz-time .ap:empty{display:none}
.wz-date{margin:4px 0 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.wz-rel{font-style:normal;font-size:11px;font-weight:800;color:var(--on-fill);background:var(--fill);padding:1px 6px;border-radius:var(--radius)}
.wz-rel[hidden]{display:none}
.wz-diff{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wz-diff b{font-family:var(--sans);font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.wz-diff small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.wz-tags{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center}
.wz-st{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink)}
.wz-st i{width:11px;height:11px;border:1px solid var(--line);border-radius:1px;flex:0 0 auto}
.wz-st.st-w i{background:var(--wz-w);border-color:var(--accent)}
.wz-st.st-e i{background:var(--wz-e)}
.wz-st.st-n i{background:repeating-linear-gradient(135deg,var(--wz-n) 0 2px,color-mix(in srgb,var(--wz-n) 55%,var(--paper)) 2px 3.5px);border-color:var(--wz-n)}
.wz-dst{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:var(--radius);padding:0 5px;line-height:1.6}
.wz-dst[hidden]{display:none}
.wz-next{margin:0;padding-top:7px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.wz-next:lang(ko){word-break:keep-all;overflow-wrap:anywhere} /* "+1시간"이 숫자와 단위 사이에서 끊기지 않게(띄어쓰기 단위로만) */
.wz-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.wz-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}

/* 도시 목록 */
.wz-dir{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.wz-dirhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.wz-count{font-family:var(--mono);font-size:11px;color:var(--muted)}
.wz-search{max-width:440px}
.wz-search .v2-input input{text-align:left;font-size:14.5px}
.wz-search .v2-input input::-webkit-search-cancel-button{display:none}
.wz-qx{flex:0 0 auto;width:38px;display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid var(--soft);background:none;color:var(--muted);cursor:pointer}
.wz-qx svg{width:12px;height:12px}
.wz-qx[hidden]{display:none}
.wz-rg{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 10px}
.wz-rg button small{font-family:var(--mono);font-size:10.5px;opacity:.75;margin-left:2px}
.wz-list{list-style:none;margin:0;padding:2px 4px 2px 2px;display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:6px;max-height:440px;overflow-y:auto;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft);padding-top:8px;padding-bottom:8px}
.wz-list li[hidden]{display:none}
.wz-city{width:100%;min-height:46px;display:grid;grid-template-columns:minmax(0,1fr) auto 16px;grid-template-areas:"nm tm mk" "nm df mk";align-items:center;gap:0 8px;padding:5px 8px 5px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;font-family:var(--sans);transition:background-color 150ms ease-out,border-color 150ms ease-out}
.wz-city:hover{background:var(--btn)}
.wz-city .nm{grid-area:nm;min-width:0;display:flex;flex-direction:column}
.wz-city .nm b{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-city .nm small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-city .nm small:empty{display:none}
.wz-city .tm{grid-area:tm;font-size:13.5px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wz-city .df{grid-area:df;font-size:11px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wz-city .mk{grid-area:mk;width:16px;height:16px;border:1px solid var(--line);border-radius:50%;position:relative}
.wz-city .mk::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px;background:var(--muted);transform:translate(-50%,-50%)}
.wz-city .mk::before{content:"";position:absolute;left:50%;top:50%;width:1.5px;height:8px;background:var(--muted);transform:translate(-50%,-50%)}
.wz-city[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash)}
.wz-city[aria-pressed="true"] .mk{background:var(--accent);border-color:var(--accent)}
.wz-city[aria-pressed="true"] .mk::before{display:none}
.wz-city[aria-pressed="true"] .mk::after{background:var(--paper);width:7px}
.wz-city.is-base{border-color:var(--ink);cursor:default}
.wz-city.is-base .df{color:var(--accent);font-weight:800}
.wz-city.is-base .mk{visibility:hidden}
.wz-none{margin:10px 0 0;font-family:var(--sans);font-size:13px;color:var(--muted)}
.wz-none[hidden]{display:none}

/* 좁은 툴 폭 */
@container wz (max-width:599px){
  .wz-head{grid-template-columns:minmax(0,1fr)}
  .wz-big{font-size:40px}
  .wz-cards{grid-template-columns:minmax(0,1fr);gap:8px}
  .wz-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"ck nm nm" "ck tm df" "tg tg tg" "nx nx nx";gap:4px 10px;padding:10px 11px}
  .wz-ch{grid-area:nm}
  .wz-cm{display:contents}
  .wz-clock{grid-area:ck;width:48px;height:48px;align-self:start}
  .wz-ct{grid-area:tm}
  .wz-time{font-size:22px}
  .wz-diff{grid-area:df;flex-direction:column;align-items:flex-end;gap:0;align-self:end}
  .wz-tags{grid-area:tg}
  .wz-next{grid-area:nx;padding-top:5px}
  .wz-list{max-height:380px}
  .wz-search{max-width:none}
}
@container wz (max-width:380px){
  .wz-ctl{grid-template-columns:minmax(0,1fr)}
  .wz-list{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .wz-card.is-new{animation:none}
  .wz-city{transition:none}
}