:root{
    color-scheme: light;
    /* bright = map/legend paint; *-tx = readable-on-white text (WCAG AA) */
    /* Okabe-Ito-derived, color-vision-safe status palette. Status is also
       encoded with line/pattern/icon/text, never by hue alone. */
    --green:#007a58; --red:#a3231a; --amber:#e69f00; --gray:#6b7280;
    --green-tx:#005f45; --red-tx:#8c1d16; --amber-tx:#6f5000;
    --ink:#202124; --muted:#5f6368; --line:#e6e8eb; --card:#ffffff;
    --bg:#f7f4ef; --shadow:0 3px 14px rgba(74,58,38,.13),0 1px 3px rgba(74,58,38,.08);
    --radius:20px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  }
  *{box-sizing:border-box}
  html:lang(ko) body,html:lang(ko) button,html:lang(ko) input{word-break:keep-all;
    overflow-wrap:break-word}
  .place-title,.status-line,.verdict,.irow span,.ev span{text-wrap:pretty}
  html,body{margin:0;height:100%;overflow:hidden;font-family:var(--sans);color:var(--ink);background:var(--bg)}
  #map{position:absolute;inset:0}
  .maplibregl-ctrl-attrib{font-size:10px}
  .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
    margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .site-lockup{pointer-events:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
  .site-lockup img{display:block;object-fit:contain}
  .site-lockup .lockup-wordmark{width:auto;height:31px}
  .site-lockup .lockup-compact{display:none;width:auto;height:32px}
  .help-link{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-height:38px;padding:0 10px;border:2px solid #132d3d;border-radius:7px;background:#fff7e0;
    color:#132d3d;box-shadow:3px 3px 0 #132d3d;text-decoration:none;font-size:11px;font-weight:850;white-space:nowrap}
  .help-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  .topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;gap:8px;
    padding:12px;padding-top:max(12px,env(safe-area-inset-top));align-items:center;pointer-events:none}
  .searchwrap{pointer-events:auto;flex:1;max-width:520px;display:flex;align-items:center;
    background:var(--card);border-radius:999px;box-shadow:var(--shadow);padding:8px 8px 8px 16px;gap:8px}
  .searchwrap svg{flex:0 0 auto;color:var(--muted)}
  .searchwrap input{flex:1;border:0;outline:0;font-size:16px;background:transparent;min-width:0;color:var(--ink)}
  .icon-btn{border:0;background:#f1f3f4;border-radius:999px;width:44px;height:44px;display:grid;
    place-items:center;cursor:pointer;color:var(--ink);flex:0 0 auto;padding:0}
  .icon-btn svg{display:block}
  #locate svg{width:24px;height:24px}
  .icon-btn:focus-visible,.searchwrap input:focus-visible,.pillbtn:focus-visible,
  .langbtn:focus-visible,.help-link:focus-visible{outline:3px solid #1f4a68;outline-offset:2px}
  .go{background:#1f4a68;color:#fff}
  .lang{pointer-events:auto;display:flex;background:var(--card);border-radius:999px;
    box-shadow:var(--shadow);overflow:hidden}
  .langbtn{border:0;background:transparent;padding:9px 12px;font-size:13px;font-weight:600;
    color:var(--muted);cursor:pointer}
  .langbtn[aria-pressed="true"]{background:#1f4a68;color:#fff}

  .legend{position:absolute;left:12px;top:70px;z-index:4;background:var(--card);
    border-radius:12px;box-shadow:var(--shadow);padding:10px 12px;font-size:12.5px;max-width:180px}
  .legend .legend-head{width:100%;border:0;background:none;margin:0 0 7px;padding:0;
    font:600 11px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
    cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-align:left}
  .legend .row{width:100%;border:0;background:none;font:inherit;text-align:left;
    display:flex;align-items:center;gap:8px;margin:5px 0;color:#2b2f36;padding:0}
  .legend .lg-toggle{cursor:pointer;border-radius:6px;padding:2px 3px;margin-left:-3px}
  .legend .lg-toggle:hover{background:#f1f3f4}
  .legend .legend-head:focus-visible,.legend .lg-toggle:focus-visible{outline:3px solid #1f4a68;outline-offset:2px}
  .legend .lg-toggle.off{opacity:.38}
  .swatch{width:22px;height:7px;border-radius:3px;flex:0 0 auto}
  .swatch.allowed{background:var(--green)}
  .swatch.prohibited{height:8px;background:repeating-linear-gradient(135deg,var(--red) 0 4px,#6b2d12 4px 6px)}
  .swatch.dash{background:repeating-linear-gradient(90deg,var(--amber) 0 5px,transparent 5px 9px);height:7px}
  .swatch.private{background:repeating-linear-gradient(90deg,var(--gray) 0 2px,transparent 2px 5px);height:7px}

  .timedock{position:absolute;left:12px;transform:none;z-index:6;
    bottom:calc(12px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:bottom .25s ease}
  .timedock.raised{bottom:calc(46vh + 12px)}
  .timepicker{position:relative;max-width:100%}
  /* One thin line under the address: the chosen date/time, a localized
     "Change" cue and the chevron. Fully opaque white on a thin navy-toned
     border so basemap labels never bleed through and the row separates
     from the cream basemap. No clock badge, heavy border or shadow;
     the 44px hit target is kept (border-box, so the 1px border adds no height). */
  .time-button{min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
    border:1px solid rgba(31,74,104,.4);
    background:var(--card);padding:6px 12px;border-radius:6px;
    box-shadow:none;cursor:pointer;color:var(--ink);max-width:100%;text-align:left}
  .time-button:focus-visible,.time-option:focus-visible,.time-custom:focus-within{
    outline:3px solid #1f4a68;outline-offset:2px}
  /* The date is one unit and never breaks around the "Change" cue. When the
     two do not fit on one line, the cue group drops to its own right-aligned
     line and the row grows; the date itself wraps only when it alone is wider
     than the row. */
  .time-copy{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.35}
  .time-copy strong{font-size:14px;font-weight:700;line-height:1.35;letter-spacing:-.01em;text-align:left;text-wrap:pretty}
  html[lang="ko"] .time-copy strong{letter-spacing:0}
  .time-cue{display:flex;flex:0 0 auto;align-items:center;gap:8px;margin-left:auto}
  .time-live{font-size:12px;font-weight:800;line-height:1.2;color:#137047;background:#eaf6ef;
    border-radius:999px;padding:3px 8px}
  .time-change{font-size:14px;font-weight:700;line-height:1.35;color:#132d3d}
  .time-arrow{display:flex;align-items:center;font-size:14px;color:#132d3d;line-height:1}
  .time-menu[hidden]{display:none}
  .time-menu{position:absolute;left:0;bottom:58px;width:310px;background:#fff;
    border:1px solid #dfe3ea;border-radius:16px;box-shadow:0 18px 45px rgba(20,31,50,.2);
    padding:14px;z-index:20}
  .time-menu h3{font-size:15px;margin:0 0 3px;color:var(--ink)}
  .time-help{font-size:11.5px;line-height:1.4;color:#697386;margin:0 0 12px}
  .time-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .time-option{border:1px solid #dfe3ea;background:#fff;border-radius:10px;padding:9px;
    text-align:left;cursor:pointer;color:#293244}
  .time-option b{display:block;font-size:12px}.time-option span{display:block;font-size:10.5px;
    color:#70798a;margin-top:2px}.time-option.on{border-color:#1f4a68;background:#eef3f6;color:#173a52}
  .time-custom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;
    width:100%;border:1px solid #dfe3ea;border-radius:10px;background:#fff;padding:8px 10px;
    font-size:12px;color:#173a52;font-weight:750}
  .time-custom input{min-width:124px;max-width:160px;border:0;background:transparent;color:#42526a;font:inherit}
  .time-note{display:flex;gap:6px;margin:10px 0 0;color:#70798a;font-size:10.5px;line-height:1.4}
  .preview-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin:0 0 11px;padding:9px 10px;border:1px solid #c9dcfb;background:#f3f7ff;
    border-radius:10px;color:#174ea6;font-size:12px;font-weight:700}
  .preview-banner button{border:0;background:transparent;color:#174ea6;text-decoration:underline;
    font:inherit;cursor:pointer;white-space:nowrap}
  .source-note{display:block;color:var(--muted);font-size:11px;line-height:1.35;margin-top:3px}
  .source-note.warn{color:#7a5b00}
  .sweepchip{position:absolute;left:12px;transform:none;z-index:6;
    bottom:calc(64px + env(safe-area-inset-bottom));background:#fff7e0;color:#7a5b00;
    border:1px solid #f0d98a;border-radius:999px;padding:4px 11px;font-size:11.5px;
    box-shadow:var(--shadow);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;
    text-overflow:ellipsis;box-sizing:border-box;transition:bottom .25s ease,opacity .15s ease}
  .sweepchip.time-open{opacity:0;pointer-events:none}
  .sweepchip.raised{bottom:calc(46vh + 64px)}

  .card{position:absolute;z-index:7;background:var(--card);box-shadow:var(--shadow);
    left:0;right:0;bottom:0;max-height:46vh;border-radius:18px 18px 0 0;
    transform:translateY(8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .18s ease,visibility 0s linear .28s;
    display:flex;flex-direction:column;overflow:hidden}
  .card.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .card-chrome{position:absolute;inset:0 0 auto;flex:none;min-height:0;height:0;background:transparent;z-index:4}
  .card .grip{display:none}
  .card .body{padding:6px 18px 20px;min-height:0;overflow:auto}
  .place-title{font-size:21px;font-weight:600;line-height:1.3;margin:10px 0 6px;
    letter-spacing:-.01em}
  .status-line{font-size:14.5px;font-weight:600;margin:0 0 4px;display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;line-height:1.45}
  .status-line>.ic{margin-top:2px}
  .status-line>.ic+span{flex:1 1 0;min-width:0}
  .status-line .statsub{color:#3c4043;font-weight:400;display:block;flex-basis:100%;text-wrap:pretty;word-break:keep-all}
  .timechips{display:flex;gap:7px;margin:9px 0 2px;flex-wrap:wrap}
  .tchip{border:1.5px solid #dfe3ea;background:#fff;border-radius:999px;padding:6px 12px;
    font-size:12px;font-weight:750;color:#3c4043;cursor:pointer}
  .tchip b{font-weight:850}
  .tchip[aria-pressed="true"]{background:#132d3d;border-color:#132d3d;color:#fff}
  .tchip:focus-visible{outline:3px solid #1f4a68;outline-offset:2px}
  .sweep-day{color:var(--red-tx);font-weight:800;text-decoration:underline;
    text-decoration-thickness:2px;text-underline-offset:2px}
  .statnote{font-size:13px;color:var(--muted);margin-top:2px}
  .actrow{display:flex;justify-content:flex-start;gap:26px;margin:22px 2px 6px}
  .act{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;
    align-items:center;gap:6px;padding:0;color:#1f4a68;min-width:56px}
  .act .actic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    border:1px solid var(--line);background:var(--card)}
  .act .actic svg{width:18px;height:18px;stroke:#1f4a68;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  .act.primary .actic{background:#1f4a68;border-color:#1f4a68}
  .act.primary .actic svg{stroke:#fff}
  .act .actlbl{font-size:12px;font-weight:500;color:#1f4a68}
  .act:focus-visible .actic{outline:3px solid #1f4a68;outline-offset:2px}
  .hr{border-top:1px solid var(--line);margin:14px 0 2px}
  .irow{display:flex;gap:14px;padding:11px 0;font-size:13.5px;color:#2b2f36;
    align-items:flex-start;line-height:1.55}
  .irow>.ic{color:#5b616e;margin-top:1px}
  .irow a{color:#1f4a68;text-decoration:none}
  .irow .mut{color:var(--muted);font-size:12.5px}
  .holiday-link{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
    border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;
    cursor:pointer;padding:8px 0 2px;margin-top:8px;text-align:left}
  .holiday-link .hl-rule{font-size:12.5px;font-weight:550}
  .holiday-link .hl-action{color:#1f4a68;font-size:12px;font-weight:650;white-space:nowrap}
  .holiday-link:focus-visible{outline:3px solid #1f4a68;outline-offset:2px;border-radius:4px}
  .holiday-notice{display:flex;align-items:flex-start;gap:7px;margin:7px 0 2px;padding:7px 9px;
    border:1px solid #e6c96d;border-radius:8px;background:#fff8df;color:#614b00;font-size:12.5px;font-weight:650}
  .holiday-notice .ic{color:#7a5b00;margin-top:1px}
  .sheet-back{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.4);
    display:grid;place-items:center;padding:16px}
  .sheet-back[hidden]{display:none}
  @keyframes sheetFade{from{opacity:0}to{opacity:1}}
  @keyframes sheetPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
  .sheet-back:not([hidden]){animation:sheetFade .16s ease}
  .sheet-back:not([hidden]) .sheet{animation:sheetPop .2s cubic-bezier(.2,.7,.2,1)}
  @media(prefers-reduced-motion:reduce){.sheet-back:not([hidden]),.sheet-back:not([hidden]) .sheet{animation:none}}
  .sheet{background:var(--card);border-radius:16px;width:min(440px,100%);
    max-height:calc(100vh - 48px);overflow:auto;padding:16px 18px 18px;
    box-shadow:0 12px 48px rgba(0,0,0,.28)}
  .sheet .grip{display:none}
  .sheet-title{font-size:18px;line-height:1.3;color:var(--ink);margin:0 0 8px;font-weight:650}
  .holiday-lead{font-size:13px;color:var(--muted);line-height:1.45;margin:0 0 10px}
  .holiday-schedule{border-top:1px solid var(--line);margin-bottom:8px}
  .holiday-row{display:grid;grid-template-columns:128px 1fr;gap:12px;padding:9px 2px;
    border-bottom:1px solid var(--line);align-items:baseline}
  .holiday-date{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .holiday-name{font-size:13.5px;color:var(--ink);font-weight:550}
  .sheet a{display:flex;align-items:center;gap:14px;padding:13px 4px;font-size:15.5px;
    color:var(--ink);text-decoration:none;border-radius:10px}
  .sheet a:hover{background:#f1f3f4}
  .sheet .cancel{flex:1;border:0;background:#f1f3f4;border-radius:10px;
    padding:12px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;margin-top:6px}
  .sheetrow{display:flex;gap:8px}
  .sheetsubmit{flex:1;border:0;background:#1f4a68;color:#fff;border-radius:10px;
    padding:12px;font-size:14.5px;font-weight:600;cursor:pointer;margin-top:6px}
  .sheetsubmit:disabled{background:#a9c6f5;cursor:default}
  .receipt-lead{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.55}
  .receipt-code{display:block;margin:0 0 10px;padding:14px;border:1.5px solid var(--ink);
    border-radius:10px;background:var(--cream);color:var(--ink);font:750 17px/1.4 ui-monospace,
    SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.035em;text-align:center;
    overflow-wrap:anywhere;user-select:all}
  .receipt-note{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.5}
  .receipt-status{justify-content:center;border:1px solid var(--line);font-weight:650}
  .repcats{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 10px}
  .repcat{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;
    font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
  .repcat.on{background:#eef3f6;border-color:#1f4a68;color:#173a52}
  .rep-dest{font-size:12px;color:var(--muted);margin:-2px 0 10px;line-height:1.4}
  .reptext{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
    font:14px/1.5 var(--sans);resize:vertical;box-sizing:border-box}
  .reptext:focus-visible{outline:2px solid #1f4a68;outline-offset:0}
  .repphoto{width:100%;border:1px dashed var(--line);background:#fff;border-radius:10px;
    padding:10px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;margin-top:8px}
  .tips{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
  .tips-h{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#5f6368;font-weight:600;margin-bottom:5px}
  .tip{display:flex;gap:9px;font-size:13.5px;color:#2b2f36;padding:4px 0;line-height:1.45;align-items:flex-start}
  .tip .tip-q{color:#1f4a68;flex:0 0 auto;margin-top:1px}
  .tip-d{color:var(--muted);font-size:12px}
  .tip-sub{font-size:12.5px;color:var(--muted);margin:-2px 0 8px}
  .lg-basics{border:0;background:none;color:#1f4a68;font-size:12px;font-weight:600;
    cursor:pointer;padding:8px 0 2px;margin-top:4px;border-top:1px solid var(--line);width:100%;text-align:left}
  .curbrow{display:flex;align-items:flex-start;gap:11px;padding:8px 0;font-size:13.5px;color:#2b2f36;line-height:1.4}
  .curbsw{width:20px;height:20px;border-radius:4px;flex:0 0 auto;margin-top:1px;
    border:1px solid rgba(0,0,0,.25);display:grid;place-items:center;font:800 10px/1 var(--sans)}
  .curbrow b{font-weight:600}
  #basics-body h5{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#5f6368;margin:14px 0 4px;font-weight:600}
  #basics-body .never li{font-size:13.5px;color:#2b2f36;margin:4px 0}
  #basicssheet .sheet{width:min(560px,100%)}
  #basics-body .hub-lead{font-size:13.5px;color:#3c4043;line-height:1.5;margin:0 0 12px}
  #basics-body .hub-actions{border-top:1px solid var(--line);margin-bottom:8px}
  #basics-body .hub-action{justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 2px;font-size:13.5px;font-weight:600;color:#1f4a68}
  #basics-body .hub-action span:last-child{font-size:16px;font-weight:400}
  #basics-body details{border-bottom:1px solid var(--line)}
  #basics-body summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;cursor:pointer;font-size:14px;font-weight:650;color:var(--ink)}
  #basics-body summary::-webkit-details-marker{display:none}
  #basics-body summary::after{content:'+';font-size:18px;font-weight:400;color:var(--muted)}
  #basics-body details[open] summary::after{content:'−'}
  #basics-body details ul{margin:0 0 12px;padding-left:20px}
  #basics-body details li{font-size:13px;color:#3c4043;line-height:1.45;margin:6px 0}
  #basics-body .hub-note{font-size:12px;color:#6b5600;line-height:1.45;background:#fff8df;border:1px solid #ead487;border-radius:8px;padding:9px 10px;margin:12px 0}
  #basics-body .src{font-size:11.5px;color:var(--muted);margin-top:12px;line-height:1.5}
  .note{display:flex;align-items:flex-start;gap:8px;font-size:13px;
    color:var(--muted);margin:10px 0 0;line-height:1.45}
  .note.warn{color:#8a6400}
  .note.fire{color:#b3261e}
  .ic{display:inline-flex;flex:0 0 auto;vertical-align:-3px;margin-top:1px}
  .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  .pillbtn .ic{margin-top:0}
  .linkbtn{border:0;background:none;color:#1f4a68;font-size:13.5px;font-weight:600;
    cursor:pointer;padding:6px 14px 6px 0;display:inline-flex;align-items:center;gap:6px}
  .linkbtn:focus-visible{outline:3px solid #1f4a68;outline-offset:2px}
  .spotblk{margin-top:12px;background:#f8f9fa;border:1px solid var(--line);border-radius:12px;padding:11px 12px}
  .spotq{font-size:13px;color:#3c4043;font-weight:500}
  .spotbtns{display:flex;gap:8px;margin-top:8px}
  .spot-recent{font-size:12.5px;color:#3c4043;margin-top:8px}
  .contrib{display:flex;flex-wrap:wrap;gap:4px 2px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
  .spotbtn{flex:1;border:1px solid var(--line);background:#fff;border-radius:9px;
    padding:9px 12px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .spotbtn.yes .ic{color:var(--green-tx)} .spotbtn.no .ic{color:var(--muted)}
  .spotbtn:focus-visible{outline:3px solid #1f4a68;outline-offset:2px}
  .spot-disc{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.4}
  #adslot{display:none;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
  #adslot.on{display:block;min-height:250px}
  #adslot .adlabel{font-size:10px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--muted);margin-bottom:6px}
  .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .pillbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
    background:#fff;border-radius:999px;padding:9px 14px;font-size:13.5px;font-weight:600;
    color:var(--ink);text-decoration:none;cursor:pointer}
  .pillbtn.primary{background:#1f4a68;border-color:#1f4a68;color:#fff}
  .pillbtn.permit{background:#fff7e0;border-color:#f0d98a;color:#7a5b00}
  .events{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
  .tznote{font-size:11.5px;color:#6b5600;background:#fff8df;border:1px solid #ead487;
    border-radius:8px;padding:7px 10px;margin:0 0 10px;line-height:1.45}
  .step{display:flex;align-items:center;gap:12px;margin:0 0 12px}
  .step button{width:36px;height:36px;border-radius:50%;border:1px solid #dfe3ea;
    background:#fff;font-size:18px;color:#1f4a68;cursor:pointer;line-height:1}
  .step button:focus-visible{outline:3px solid #1f4a68;outline-offset:2px}
  .step .val{flex:1;text-align:center}
  .step .big{font-size:21px;font-weight:750;color:var(--ink);letter-spacing:-.01em}
  .step .until{display:block;font-size:11.5px;color:#6b7280;margin-top:2px}
  .verdict{font-size:14.5px;font-weight:650;color:var(--red-tx);margin:11px 0 2px;line-height:1.4}
  .verdict.ok{color:var(--green-tx)}
  .cd{display:flex;align-items:center;gap:12px;background:#eef3f6;border:1px solid #cfe0fb;
    border-radius:14px;padding:12px 14px;margin:0 0 12px}
  .cd .num{font-size:23px;font-weight:750;color:#173a52;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums}
  .cd .cap{font-size:11.5px;color:#4a5568;margin-top:1px}
  .cd{flex-wrap:wrap}
  .bell.push{margin-left:0;background:#fff7e0;color:#1f4a68;border:1.5px solid #1f4a68}
  .bell{margin-left:auto;border:0;background:#1f4a68;color:#fff;border-radius:999px;
    padding:9px 14px;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
  .tl-plan{position:absolute;top:0;bottom:0;background:rgba(26,115,232,.22);
    border-right:2px solid #1f4a68;border-radius:2px}
  .tl{margin:2px 0 12px}
  .tl-track{position:relative;height:12px;border-radius:999px;background:#dceaf6;overflow:hidden}
  .tlb{position:absolute;top:0;bottom:0;border-radius:2px}
  .tl-no{background:var(--red)}
  .tl-check{background:var(--amber)}
  .tl-now{position:absolute;left:0;top:-3px;bottom:-3px;width:2px;background:#202124;border-radius:2px}
  .tl-ticks{position:relative;height:14px;margin-top:3px}
  .tlt{position:absolute;transform:translateX(-50%);font-size:10.5px;color:#77808d}
  .events h5{margin:22px 0 10px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#5f6368;font-weight:600}
  .ev{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:5px 0;color:#202124}
  .ev .when{color:#3c4043;white-space:nowrap}
  .ev .badge{font-size:10px;background:#fdecc8;color:#7a5b00;border-radius:5px;padding:1px 5px;margin-left:6px}
  .foot{margin-top:16px;font-size:11.5px;color:var(--muted);line-height:1.5}
  .foot a{color:#1f4a68}.foot-source{padding:10px 0;border-top:1px solid var(--line)}
  .installchip{position:absolute;right:12px;z-index:6;border:1px solid #e2d9c8;
    bottom:calc(12px + env(safe-area-inset-bottom));background:var(--card);color:#1f4a68;
    border-radius:999px;padding:9px 15px;font-size:12.5px;font-weight:650;cursor:pointer;
    box-shadow:var(--shadow);transition:bottom .25s ease}
  .installchip[hidden]{display:none}
  .installchip{display:flex;align-items:center;gap:8px;text-align:left;max-width:min(300px,calc(100% - 24px))}
  .installchip .ios-share svg{width:16px;height:16px;flex:0 0 auto}
  .installchip.raised{bottom:calc(46vh + 12px)}
  .loadchip{position:absolute;left:50%;transform:translateX(-50%);z-index:6;
    top:calc(70px + env(safe-area-inset-top));background:var(--card);color:var(--muted);
    border-radius:999px;padding:6px 14px;font-size:12px;box-shadow:var(--shadow);
    display:flex;align-items:center;gap:8px;transition:opacity .3s ease}
  .loadchip[hidden]{display:none}
  .loadchip.gone{opacity:0}
  .loadchip .cit{width:20px;height:20px;flex:0 0 auto;animation:hop 1.1s ease-in-out infinite}
  @keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  @media(prefers-reduced-motion:reduce){.loadchip .cit{animation:none}}
  .sources{margin-top:6px}
  .sources summary{cursor:pointer;color:#1f4a68;font-size:11.5px;list-style:none}
  .sources summary::-webkit-details-marker{display:none}
  .sources summary::before{content:"\203A ";display:inline-block;transition:transform .15s}
  .sources[open] summary::before{transform:rotate(90deg)}
  .sources>*{margin-top:6px}
  .foot-links{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px}
  .foot-links a{font-weight:650;text-decoration:none}.foot-meta{margin-top:8px;color:#747b86}
  .card .closebtn{position:absolute;top:18px;right:12px;z-index:3;
    border:0;background:#fff7e0;width:44px;height:44px;border-radius:11px;
    display:grid;place-items:center;cursor:pointer;color:#132d3d;font-size:15px}
  .card .closebtn:hover{background:rgba(19,45,61,.08)}
  .card .closebtn:focus-visible{outline:2px solid #132d3d;outline-offset:1px;background:rgba(19,45,61,.08)}
  .card .backbtn{right:58px;display:grid;place-items:center;color:#132d3d}
  .card .backbtn[hidden]{display:none}
  .card .closebtn svg{width:20px;height:20px}
  .sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);
    border-radius:14px;box-shadow:var(--shadow);overflow:hidden;z-index:8}
  .sugg:empty{display:none}
  .sugg div{padding:11px 16px;font-size:14px;cursor:pointer;display:flex;gap:10px;align-items:center;color:var(--ink)}
  .sugg div:hover,.sugg div[aria-selected="true"]{background:#f1f3f4}
  .sugg .ic{color:var(--muted)}
  .searchwrap{position:relative}
  .go.loading svg{display:none}
  .go.loading::after{content:"";width:16px;height:16px;border:2px solid #fff;
    border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .legend .legend-head{user-select:none}
  .legend.collapsed .row,.legend.collapsed #curblegend{display:none}
  .legend .chev{transition:transform .2s}
  .legend.collapsed .chev{transform:rotate(-90deg)}
  .carchip{position:absolute;left:50%;transform:translateX(-50%);top:70px;z-index:6;
    display:flex;align-items:center;gap:8px;background:#1f4a68;color:#fff;border-radius:999px;
    box-shadow:var(--shadow);padding:8px 8px 8px 14px;font-size:13px;font-weight:600;max-width:calc(100% - 24px)}
  .carchip[hidden]{display:none}
  .carchip .ic svg{stroke:#fff}
  .carchip .cc-t{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .carchip .cc-b{border:0;background:rgba(255,255,255,.2);border-radius:50%;width:24px;height:24px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
  .carchip .cc-b svg{stroke:#fff;width:13px;height:13px}
  .carchip .cc-x{border:0;background:rgba(255,255,255,.2);border-radius:50%;width:24px;height:24px;
    display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
  .carchip .cc-x svg{stroke:#fff;width:13px;height:13px}
  .share-note{margin-top:10px;padding:9px 11px;border:1px solid var(--line);
    border-radius:10px;background:#fff;font-size:12px;line-height:1.45;color:var(--muted)}
  .nb{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
    padding:11px 4px;border:0;border-top:1px solid var(--line);background:none;cursor:pointer}
  .nb .nb-n{flex:none;width:22px;height:22px;border-radius:50%;background:#132d3d;color:#fff;
    display:grid;place-items:center;font-size:11px;font-weight:800}
  .nb.no .nb-n{background:var(--red-tx)} .nb.check .nb-n{background:var(--amber-tx)}
  .nb-b{flex:1;min-width:0} .nb-s{display:block;font-weight:700;font-size:14px;color:var(--ink)}
  .nb-m{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .parkbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;
    border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px;font-size:14px;
    font-weight:600;color:#1f4a68;cursor:pointer}
  .parkbtn .ic svg{stroke:#1f4a68}
  .parkbtn{flex-wrap:wrap;line-height:1.35}
  .parkbtn .parksub{display:block;width:100%;font-size:11.5px;font-weight:400;
    color:#5f6368;margin-top:3px;white-space:normal}
  .parkbtn.saved .parksub{color:#137333}
  .parkbtn.saved{background:#e6f4ea;border-color:#1e7e3e;color:#137333}
  .parkbtn.saved .ic svg{stroke:#137333}
  .maplibregl-ctrl button#btn3d{font:700 11px/1 sans-serif;color:var(--muted)}
  .maplibregl-ctrl button#btn3d[aria-pressed="true"]{color:#1f4a68}
  .maplibregl-popup{z-index:8}
  .maplibregl-popup-content{font-family:var(--sans);border-radius:12px;
    box-shadow:var(--shadow);padding:14px 16px;min-width:230px;max-width:310px}
  .maplibregl-popup-close-button{font-size:18px;padding:4px 7px;color:var(--ink)}
  .lotpopup h3{font-size:15px;line-height:1.35;margin:0 24px 2px 0}
  .lotpopup .lotkind{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
  .lotpopup .lotcond{font-size:12.5px;line-height:1.45;color:#3c4043;margin-bottom:8px}
  .lotpopup h4{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:9px 0 3px}
  .lotpopup ul{margin:0;padding-left:17px;color:#2b2f36;font-size:12.5px;line-height:1.42}
  .lotpopup li{margin:3px 0}
  .lotpopup .lotsrc{font-size:10.5px;color:var(--muted);margin-top:9px}
  .lotpopup a{display:inline-flex;margin-top:10px;color:#005ea8;font-size:12.5px;font-weight:700;text-decoration:none}
  .toast{position:absolute;top:66px;left:50%;transform:translateX(-50%);z-index:9;
    background:#1f2328;color:#fff;padding:8px 14px;border-radius:8px;font-size:13px;
    box-shadow:var(--shadow);opacity:0;transition:opacity .2s;pointer-events:none;max-width:88%}
  .toast.show{opacity:1}

  @media(max-width:640px){
    /* Phones and the Aside sidepanel share one full-width bottom stack. Both
       used to sit at top:70px, so a parked car covered the legend on a phone.
       The chip takes its own row and the legend moves under it. */
    .carchip{left:12px;right:12px;transform:none;max-width:none;justify-content:center}
    body.has-car .legend{top:118px}
    body.has-car .loadchip{top:calc(118px + env(safe-area-inset-top))}
    .timedock{left:10px;right:10px;max-width:none;bottom:calc(42px + env(safe-area-inset-bottom))}
    .timedock.raised{bottom:calc(46vh + 42px)}
    .timepicker,.time-button{width:100%}.time-copy{flex:1;min-width:0}
    .time-menu{left:0;width:100%;max-width:none}
    .time-custom{display:grid;grid-template-columns:1fr;align-items:start;gap:6px}
    .time-custom input{width:100%;min-width:0;max-width:none;padding:6px 0}
    .sweepchip{bottom:calc(98px + env(safe-area-inset-bottom))}
    .sweepchip.raised{bottom:calc(46vh + 98px)}
  }
  @media(max-width:819px){
    .sheet-back.holiday-back{align-items:end;padding:0;padding-top:max(48px,env(safe-area-inset-top))}
    .holiday-back .sheet{width:100%;max-height:78dvh;border-radius:18px 18px 0 0;
      padding-bottom:max(18px,env(safe-area-inset-bottom))}
    .holiday-back .sheet .grip{display:block;width:38px;height:4px;border-radius:2px;
      background:#d6d9dd;margin:-6px auto 12px}
    .holiday-row{grid-template-columns:116px 1fr}
  }
  @media(min-width:820px){
    .card{left:auto;right:14px;bottom:14px;top:70px;width:380px;max-height:none;
      border-radius:18px;transform:translateX(8px)}
    .card.open{transform:translateX(0)}
    .timedock.raised{bottom:calc(14px + env(safe-area-inset-bottom))}
    .sweepchip.raised{bottom:calc(66px + env(safe-area-inset-bottom))}
    .timedock{max-width:calc(100% - 420px)}
  }
  /* The reference's editorial energy lives in the chrome, not in the parking
     verdict colors. Blue/red/amber keep their safety meaning unchanged. */
  .brand-preview{--brand-navy:#132d3d;--brand-cream:#fff7e0;--brand-yellow:#ffd33f;--bg:#fff7e0;
    --brand-coral:#c53a2c;--brand-coral-bright:#ef5b48}
  .brand-preview .searchwrap{max-width:620px;background:var(--brand-cream);border:2px solid var(--brand-navy);
    border-radius:10px;box-shadow:4px 4px 0 var(--brand-navy),0 10px 24px rgba(28,44,54,.13);
    padding:6px 7px 6px 13px;gap:8px}
  .brand-preview .icon-btn{background:#ffedaa;color:var(--brand-navy);border-radius:10px}
  .brand-preview .icon-btn.go{background:var(--brand-navy);color:var(--brand-yellow)}
  .brand-preview .lang{background:var(--brand-cream);border:2px solid var(--brand-navy);border-radius:7px;
    box-shadow:3px 3px 0 var(--brand-navy)}
  .brand-preview .langbtn[aria-pressed="true"]{background:var(--brand-yellow);color:var(--brand-navy)}
  .brand-preview .legend,.brand-preview .time-menu,
  .brand-preview .installchip,.brand-preview .loadchip{background:var(--brand-cream);border:2px solid var(--brand-navy);
    box-shadow:3px 3px 0 var(--brand-navy),0 9px 20px rgba(28,44,54,.1)}
  .brand-preview .legend{border-radius:13px}.brand-preview .legend .legend-head{color:var(--brand-navy)}
  .brand-preview .time-live{background:#dcead2;color:#315b39}
  .brand-preview .card{background:var(--brand-cream);border:2px solid var(--brand-navy)}
  .brand-preview .maplibregl-ctrl-group{background:var(--brand-cream);border:2px solid var(--brand-navy);
    box-shadow:3px 3px 0 var(--brand-navy);overflow:hidden}
  .brand-preview .maplibregl-ctrl-group button+button{border-top:1px solid rgba(19,45,61,.28)}
  .brand-preview .maplibregl-ctrl-attrib{background:rgba(255,247,224,.9);color:var(--brand-navy)}

  /* Promotional mascot sits in the panel's own dead space and never over the
     map, the road colours, or a parking verdict. */
  /* First-visit concept. The map is already visible and usable behind this
     single action, so the brand moment never becomes a landing-page gate. */
  @media(max-width:640px){

    /* The compact panel drops the sub, steps and note, so the bottom-right
       corner belongs to the primary button. Park the mascot beside the title
       instead, which is the only space left. */
  }
  /* Between the phone layout and the desktop row the topbar is one tight
     line: the worded Help control is what pushes it past the viewport,
     so it drops to its icon and the row is allowed to wrap. */
  @media(min-width:561px) and (max-width:819px){
    .topbar{flex-wrap:wrap;align-items:center}
    .help-link{width:38px;min-width:38px;padding:0;gap:0}
    .help-link span{display:none}
  }
  @media(max-width:560px){
    .topbar{flex-wrap:wrap;align-items:center}
    .site-lockup{gap:5px;height:41px}
    /* Below this width the wordmark stops being legible next to the search
       field, so the compact mark takes the slot instead of shrinking. */
    .site-lockup .lockup-wordmark{display:none}
    .site-lockup .lockup-compact{display:block;height:30px}
    .searchwrap{order:3;flex:1 0 100%;max-width:none}
    .lang{position:absolute;right:12px;top:max(12px,env(safe-area-inset-top))}
    .help-link{position:absolute;right:132px;top:max(12px,env(safe-area-inset-top));width:38px;height:38px;min-height:38px;padding:0}
    .help-link span{display:none}
    .legend{top:126px}
    .loadchip{top:calc(126px + env(safe-area-inset-top))}
    .brand-preview .searchwrap{padding-left:12px;gap:6px;min-width:0;width:100%;
      max-width:calc(100vw - 24px)}
    .brand-preview .searchwrap input{width:0;min-width:0}
  }
  @media(max-height:520px){



  }
  @media(prefers-reduced-motion:reduce){ .card,.timedock,.sweepchip{transition:none} }
  /* Light-only: the design target is a familiar light map. A half-built dark
     mode kept producing low-contrast text, so we pin light for readability. */

  /* ===== Minimal map UI ===== */
  #legend{display:none!important}
  .installchip{display:none!important}
  .timedock.mx-dockhidden{display:none!important}
  .maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{display:none!important}
  .mx-logo{position:fixed;top:14px;left:14px;background:var(--brand-cream,#fff8e8);border:2px solid #132d3d;border-radius:12px;
    box-shadow:3px 3px 0 #132d3d;padding:10px 12px 7px;z-index:60;display:none}
  .mx-logo img{width:96px;height:auto;display:block}
  .mx-pill{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;right:70px;height:48px;background:#fff;
    border:2px solid #132d3d;border-radius:10px;box-shadow:3px 3px 0 #132d3d;display:flex;align-items:center;
    gap:10px;padding:0 6px 0 12px;z-index:60}
  .mx-pill-logo{height:24px;width:auto;flex:0 0 auto}
  .mx-pill .searchwrap{position:static;flex:1;max-width:none;min-width:0;display:flex;align-items:center;gap:6px}
  .brand-preview .mx-pill .searchwrap{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
  .mx-pill .sugg{position:absolute;top:52px;left:-2px;right:-2px}
  .mx-help{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;width:48px;height:48px;background:var(--brand-cream,#fff8e8);
    border:2px solid #132d3d;border-radius:10px;box-shadow:3px 3px 0 #132d3d;display:flex;align-items:center;
    justify-content:center;font:900 19px/1 sans-serif;color:#132d3d;cursor:pointer;z-index:70;padding:0}
  .mx-help.open{background:#132d3d;color:#fff}
  .mx-help:focus-visible,.mx-col .b:focus-visible,.mx-legendbar:focus-visible,
  .mx-strip .ib:focus-visible,.mx-flagrow:focus-visible{outline:3px solid #1f4a68;outline-offset:2px}
  .mx-dim{position:fixed;inset:0;background:rgba(19,45,61,.3);z-index:65}
  .mx-dim[hidden]{display:none}
  .mx-menu{position:fixed;top:calc(68px + env(safe-area-inset-top));right:12px;width:256px;background:#fff;
    border:2px solid #132d3d;border-radius:14px;box-shadow:4px 4px 0 #132d3d;z-index:70;
    max-height:calc(100dvh - 86px - env(safe-area-inset-top));overflow-y:auto;overscroll-behavior:contain}
  .mx-menu[hidden]{display:none}
  .mx-menu .row{display:flex;width:100%;align-items:center;gap:10px;padding:13px 16px;border:0;border-bottom:1.5px solid #eee8d8;
    font-size:13.5px;font-weight:800;color:#132d3d;cursor:pointer;text-decoration:none;background:none;text-align:left}
  .mx-menu .row svg{width:17px;height:17px;stroke:#132d3d;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .mx-menu .row .arr{margin-left:auto;color:#b9ab8d;font-weight:900}
  .mx-menu .langs{display:flex;gap:6px;padding:13px 14px;border-bottom:1.5px solid #eee8d8;flex-wrap:wrap}
  .mx-menu .langs .langbtn{padding:7px 10px;border-radius:8px;background:#f4efe2;font-size:11.5px;font-weight:850;
    color:#132d3d;border:0;cursor:pointer}
  .mx-menu .langs .langbtn[aria-pressed="true"]{background:#132d3d;color:#fff}
  .mx-menu .foot{padding:11px 16px 13px;font-size:9.5px;color:#99917e;line-height:1.55;background:#fffdf6;
    text-wrap:pretty;word-break:keep-all;overflow-wrap:break-word}
  .mx-menu .foot .legal{margin-top:8px}
  .mx-menu .foot .legal a{color:#8a8272;margin-right:12px}
  .mx-col{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;
    flex-direction:column;gap:8px;z-index:55;transition:opacity .18s,transform .18s}
  .mx-col.mx-hidden,.mx-strip.mx-hidden{opacity:0;pointer-events:none;transform:translateY(6px)}
  .mx-col .b{width:48px;height:48px;background:#fff;border:2px solid #132d3d;border-radius:10px;
    box-shadow:3px 3px 0 #132d3d;display:flex;align-items:center;justify-content:center;
    font:900 13px/1 sans-serif;color:#132d3d;cursor:pointer;padding:0}
  .mx-col .b svg{width:20px;height:20px;stroke:#132d3d;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .mx-col .b.flag{background:var(--brand-cream,#fff8e8);margin-bottom:8px}
  .mx-col .b[aria-pressed="true"]{background:#132d3d;color:#fff}
  .mx-col .b[aria-pressed="true"] svg{stroke:#fff}
  .mx-col .b.zoom{display:none}
  .mx-legendbar{position:fixed;left:12px;bottom:calc(48px + env(safe-area-inset-bottom) + var(--composer-height));z-index:54;
    display:flex;align-items:center;gap:9px;min-height:26px;background:#fff;border:1px solid #e2ddd0;
    border-radius:6px;padding:4px 9px;cursor:pointer;transition:opacity .18s,transform .18s}
  .mx-legendbar.mx-hidden{opacity:0;pointer-events:none;transform:translateY(6px)}
  .mx-legendbar .li{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#63707a;white-space:nowrap}
  .mx-legendbar .sw{width:11px;height:var(--lg-sw-h,3px);border-radius:2px;flex:0 0 auto}
  .mx-legendbar .sw.dash{background:repeating-linear-gradient(90deg,var(--sw-c) 0 4px,transparent 4px 7px)}
  .mx-strip{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:54;
    display:flex;align-items:center;gap:3px;min-height:28px;background:#fffdf7;border:0;box-shadow:none;
    border-radius:6px;padding:4px 8px 4px 30px;max-width:min(360px,calc(100vw - 90px));transition:opacity .18s,transform .18s}
  .mx-strip .ib{position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;color:transparent;
    display:flex;align-items:center;justify-content:center;font:0/0 sans-serif;
    background:none;cursor:pointer;padding:0}
  .mx-strip .ib::before{content:'i';display:flex;align-items:center;justify-content:center;width:14px;height:14px;border:1.1px solid #68737a;border-radius:50%;color:#68737a;font:700 8px/1 Georgia,serif}
  .mx-strip .tx{font-size:10px;color:#566168;font-weight:500;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mx-strip .credits{display:none;font-size:9.5px;color:#6b767e;line-height:1.5;white-space:normal;text-wrap:pretty;
    word-break:keep-all;overflow-wrap:break-word;max-width:34ch}
  .mx-strip.open{flex-direction:column;align-items:flex-start;padding-top:7px;padding-bottom:7px;padding-left:46px}
  .mx-strip.open .ib{top:0;transform:none}
  .mx-strip.open .credits{display:block}
  .mx-strip.open .tx{white-space:normal}
  .mx-strip .credits a{color:#3d6b8f}
  a.mx-flagrow,button.mx-flagrow{display:block}
  .mx-flagrow{display:block;text-align:left;background:none;border:0;border-top:1.5px solid #eee8d8;
    padding:14px 12px;margin:0 -6px;width:calc(100% + 12px);border-radius:10px;cursor:pointer;text-decoration:none}
  .mx-flagrow:hover{background:#f7f3e8}
  .mx-flagrow b{display:block;margin-bottom:2px}
  .mx-flagrow small{display:block;line-height:1.45;text-wrap:pretty;word-break:keep-all;overflow-wrap:break-word}
  .mx-flagrow:first-of-type{border-top:0}
  #mx-flag-cancel,#mx-legend-cancel{width:100%}
  .mx-flagrow b{display:block;font-size:14px;color:#132d3d}
  .mx-flagrow small{color:#8a8272;font-size:11.5px}
  .mx-legend .li{display:flex;gap:10px;align-items:center;padding:7px 0;font-size:12.5px;color:#132d3d;font-weight:700}
  .mx-legend .sw{width:26px;height:8px;border-radius:4px;flex:0 0 auto}
  .mx-legend .sw.dash{background:repeating-linear-gradient(90deg,var(--sw-c) 0 6px,transparent 6px 10px)}
    color:#132d3d;border:0;cursor:pointer}
  .mx-toastbig{position:fixed;top:calc(70px + env(safe-area-inset-top));left:12px;right:12px;max-width:430px;
    background:#132d3d;color:#fff;border-radius:10px;padding:11px 12px 11px 14px;font-size:12.5px;font-weight:700;
    box-shadow:0 4px 14px rgba(19,45,61,.35);display:flex;gap:9px;align-items:center;z-index:80;
    text-wrap:pretty;word-break:keep-all}
  .mx-toastbig a{color:#ffc83d;font-weight:900;white-space:nowrap}
  .mx-toastbig .x{margin-left:auto;background:none;border:0;color:#fff;opacity:.75;font:900 15px/1 sans-serif;cursor:pointer;padding:4px 6px}
  /* Locate and Check are siblings in the same pill, so they share one idle and
     one hover treatment. Giving only Check a filled state made the pair read as
     two unrelated controls. */
  .brand-preview .mx-pill .icon-btn,
  .brand-preview .mx-pill .icon-btn.go{background:none;color:#132d3d;border-radius:8px}
  .brand-preview .mx-pill .icon-btn:hover,.brand-preview .mx-pill .icon-btn:focus-visible,
  .brand-preview .mx-pill .icon-btn.go:hover,.brand-preview .mx-pill .icon-btn.go:focus-visible{background:#132d3d;color:#fff}
  @media(min-width:820px){
    .mx-logo{display:block}
    .mx-pill{left:148px;width:380px;right:auto}
    .mx-pill-logo{display:none}
    .mx-col .b.zoom{display:flex}
    .mx-toastbig{left:148px;right:auto;width:430px}
  }

  /* A verdict card and the time chooser each own the bottom interaction zone.
     Bind visibility to actual DOM state so stale JS observers cannot leave the
     map legend, disclosure strip, or right controls sitting over their content. */
  body:has(.card.open) .mx-col,
  body:has(.time-menu:not([hidden])) .mx-col,
  body:has(.time-menu:not([hidden])) .mx-legendbar,
  body:has(.time-menu:not([hidden])) .mx-strip,
  body:has(.timedock:not(.mx-dockhidden)) .mx-col,
  body:has(.timedock:not(.mx-dockhidden)) .mx-legendbar,
  body:has(.timedock:not(.mx-dockhidden)) .mx-strip{
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px)
  }
  /* Above 820px the verdict card is a right-hand panel, so the bottom-left
     legend and disclosure strip never sit under it and must stay readable.
     Only the bottom-sheet layout actually collides with them. */
  @media(max-width:819px){
    body:has(.card.open) .mx-legendbar,
    body:has(.card.open) .mx-strip{
      opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px)
    }
  }

  /* ===== Bottom overlay (chat composer) clearance ===== */
  :root{--composer-height:0px}
  .mx-col{bottom:calc(12px + env(safe-area-inset-bottom) + var(--composer-height))!important}
  .mx-strip{bottom:calc(12px + env(safe-area-inset-bottom) + var(--composer-height))!important}
  .timedock{transform:translateY(calc(-1 * var(--composer-height)))}
  .card .body{padding-bottom:calc(16px + env(safe-area-inset-bottom) + var(--composer-height))}
  .sheet{margin-bottom:var(--composer-height)}
  @media(max-width:819px){
    .mx-col{bottom:calc(52px + env(safe-area-inset-bottom) + var(--composer-height))!important}
    .mx-legendbar{left:12px;right:76px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;min-height:64px;padding:8px 10px}
    .mx-legendbar .li{min-width:0}
  }
  body:has(.mx-strip.open) .mx-legendbar{
    bottom:calc(128px + env(safe-area-inset-bottom) + var(--composer-height))!important
  }

/* Strict style-CSP classes: public markup never carries a style attribute. */
.lg-symbol{width:16px;height:16px;color:#fff;font:800 9px/16px sans-serif;text-align:center;flex:0 0 auto}
.lg-symbol--lot{border-radius:50%;background:#009e73}
.lg-symbol--structure{border-radius:3px;background:#7b4ab5}
.curb-legend-detail{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.curb-legend-title{font-weight:700;font-size:11.5px;margin-bottom:5px}
.curb-legend-swatch{width:14px;height:9px;border-radius:2px;flex:0 0 auto}
.curb-legend-swatch--exempt{background:var(--green)}
.curb-legend-swatch--banned{background:var(--red)}
.curb-legend-note{color:var(--muted);font-size:10.5px;line-height:1.35;margin-top:4px}
.selected-marker-svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.car-map-marker{width:30px;height:30px;border-radius:50%;background:#1f4a68;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);display:grid;place-items:center;cursor:pointer}
.status-line--ok{color:var(--green-tx)}
.status-line--no{color:var(--red-tx)}
.status-line--check{color:var(--amber-tx)}
.events--stay{margin-top:6px;border-top:0;padding-top:0}
.events--rules{margin-top:4px;border-top:0;padding-top:0}
.text-success{color:var(--green-tx)}
.text-danger{color:#b3261e}
.text-warning{color:var(--amber-tx)}
.curbsw.curb-red{background:#b3261e;color:#fff}
.curbsw.curb-yellow{background:#f9ab00;color:#202124}
.curbsw.curb-white{background:#fff;color:#202124}
.curbsw.curb-green{background:#188038;color:#fff}
.curbsw.curb-blue{background:#1967d2;color:#fff}
.status-swatch-allowed{background:var(--green)}
.status-swatch-prohibited{background:#a3231a}
.status-swatch-private{background:#6b7280}
.mx-legendbar .sw.status-swatch-unknown,.mx-legend .sw.status-swatch-unknown{background:repeating-linear-gradient(90deg,#e69f00 0 6px,transparent 6px 10px)}

/* Map failure keeps the existing search and verdict surfaces available. */
.map-error{position:absolute;z-index:5;top:150px;left:16px;width:min(380px,calc(100% - 32px));
  padding:16px;border:2px solid var(--ink);border-radius:12px;background:var(--card);
  color:var(--ink);box-shadow:var(--shadow);font-size:14px;line-height:1.45}
.map-error[hidden]{display:none}
.map-error p{margin:8px 0 12px;color:var(--muted)}
.map-error-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.map-error-actions button,.map-error-actions a{font:inherit;font-weight:650;min-height:44px;
  padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer}
.map-error-actions :focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.map-runtime-failed #map{visibility:hidden}
.map-runtime-failed #mx-legendbar{visibility:hidden}
.map-runtime-failed #mx-col button:disabled{opacity:.45;cursor:default}

/* Keep the selected parking time attached to the address, not the result sheet. */
.timedock,.timedock.raised{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 56px);bottom:auto;left:12px;right:70px;max-width:none;transform:none;transition:none;z-index:59}
.timedock .timepicker,.timedock .time-button{width:100%}
/* Outranks the shared resilience layer's 6px padding-block so a two-line row
   keeps optical room above and below the text. */
.timedock .time-button{padding:7px 12px}
.timedock .time-menu{top:calc(100% + 8px);bottom:auto;width:100%;max-height:min(50dvh,480px);overflow-y:auto;overscroll-behavior:contain}
@media(min-width:820px){
  .timedock,.timedock.raised{left:148px;right:auto;width:380px}
  body:has(#card.open) .mx-pill,body:has(#card.open) .timedock{width:min(380px,calc(100vw - 148px - 440px - 28px))}
}
/* Between 820px and 1009px the 440px result panel plus the stacked logo leave
   under 205px for the address and time controls. Use the phone chrome in that
   band instead: the compact mark rides inside the pill, both controls start at
   the left edge, and they keep at least 326px beside an open card. */
@media(min-width:820px) and (max-width:1009px){
  .mx-logo{display:none}
  .mx-pill-logo{display:block}
  .mx-pill,.mx-toastbig,.timedock,.timedock.raised{left:12px}
  body:has(#card.open) .mx-pill,body:has(#card.open) .timedock{width:min(380px,calc(100vw - 12px - 440px - 14px - 28px))}
}

/* First-use purpose note (2026-09-15). It borrows the time dock's slot under
   the address, so the two never stack, and it is bound to DOM state instead of
   a JS observer: any surface that owns the viewport (result card, time dock or
   its menu, help menu, suggestion list, sheets, map error, not-found toast,
   the loading chip) hides it, and closing that surface restores it. The map
   stays draggable everywhere else. The visible headline is a presentational
   twin of the hidden accessible h1, which the discovery contract pins. */
.intro{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 56px);left:12px;right:12px;z-index:58;
  padding:10px 50px 12px 14px;background:var(--brand-cream,#fff7e0);border:2px solid #132d3d;border-radius:10px;
  box-shadow:3px 3px 0 #132d3d;color:#132d3d;text-wrap:pretty;word-break:keep-all;overflow-wrap:break-word;
  transition:opacity .18s,transform .18s}
.intro[hidden]{display:none}
.intro-head{margin:0;font-size:17px;line-height:1.3;font-weight:850;letter-spacing:-.01em}
html[lang="ko"] .intro-head{letter-spacing:0}
.intro-sub{margin:4px 0 0;font-size:13px;line-height:1.45;font-weight:600;color:#2b3f4c}
.intro-boundary{display:inline-block;margin:8px 0 0;padding:3px 9px;border:1px solid rgba(19,45,61,.4);border-radius:999px;
  background:#fff;font-size:11.5px;line-height:1.35;font-weight:800;color:#132d3d}
.intro-close{position:absolute;top:2px;right:2px;width:44px;height:44px;border:0;border-radius:8px;background:transparent;
  color:#132d3d;font:900 18px/1 sans-serif;cursor:pointer;padding:0}
.intro-close:hover{background:rgba(19,45,61,.08)}
.intro-close:focus-visible{outline:3px solid #1f4a68;outline-offset:2px}
@media(min-width:820px){.intro{left:148px;right:auto;width:380px}}
@media(min-width:820px) and (max-width:1009px){.intro{left:12px}}
body:has(#card.open) .intro,
body:has(.timedock:not(.mx-dockhidden)) .intro,
body:has(.time-menu:not([hidden])) .intro,
body:has(.mx-menu:not([hidden])) .intro,
body:has(.sheet-back:not([hidden])) .intro,
body:has(.ns-plan-sheet:not([hidden])) .intro,
body:has(#sugg:not(:empty)) .intro,
body:has(.map-error:not([hidden])) .intro,
body:has(.mx-toastbig) .intro,
body:has(#loadchip:not([hidden]):not(.gone)) .intro{
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px)
}
@media(prefers-reduced-motion:reduce){.intro{transition:none}}