#openNotice{margin-top:8px;background:#4b2e21;border-color:#d2b17e;color:#fff2d4;min-height:44px}
#openNotice[hidden]{display:none}
#noticeDialog{padding:0;border:0;border-radius:0;background:transparent;color:#3d3026;width:min(1060px,96vw);max-width:96vw;max-height:94dvh;overflow:auto;box-shadow:0 24px 100px #081b21aa}
#noticeDialog::backdrop{background:#06191cbb;backdrop-filter:blur(5px)}
.notice-display{position:relative;width:100%;aspect-ratio:1619/971;isolation:isolate;overflow:hidden}
.notice-monitor{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.notice-content{position:absolute;left:11%;top:17%;width:78%;height:64%;padding:clamp(8px,2vw,30px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:auto}
.notice-content small{font:600 clamp(7px,1.3vw,14px) system-ui;letter-spacing:.18em;color:#847049}
.notice-content h2{font-family:serif;font-size:clamp(17px,3.7vw,42px);line-height:1.45;margin:12px 0;color:#31544d;text-wrap:balance}
.notice-content p{font-size:clamp(10px,1.8vw,20px);line-height:1.85;margin:0;white-space:pre-line;color:#65523b}
.notice-arrow,.notice-close{position:absolute;display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;background:#4b2e21ed;color:#ffebc3;border:1px solid #d6b878;box-shadow:0 3px 14px #101c2544;cursor:pointer;z-index:2}
.notice-arrow{top:50%;transform:translateY(-50%);border-radius:50%;font:36px/1 system-ui}
.notice-previous{left:2%}.notice-next{right:2%}.notice-close{top:2%;right:2%;border-radius:50%;font:28px/1 system-ui}
.notice-page{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);background:#193b3fe8;border:1px solid #ba9d64;border-radius:20px;padding:5px 16px;color:#ffe8ba;font-size:13px}
@media(max-width:500px){.notice-content h2{margin:6px 0}.notice-content{left:11%;width:78%;padding:5px}.notice-content p{line-height:1.6}.notice-arrow{min-width:44px;width:44px;min-height:44px;font-size:30px}.notice-close{min-width:44px;width:44px;min-height:44px;font-size:24px}.notice-page{font-size:10px;padding:3px 10px;bottom:3%}}
@media(max-height:480px) and (min-width:651px){#noticeDialog{width:min(720px,96vw)}}

/* Fit clinic chrome and the map to the viewport; only the map itself pans. */
html{height:100%;overflow:hidden}
body{height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
header,nav,footer{min-width:0}
nav{scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
#view{height:auto;min-height:0;min-width:0}
footer{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px;padding:6px 10px calc(6px + env(safe-area-inset-bottom))}
footer #status{grid-column:1 / -1;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer #openNotice{grid-column:1;grid-row:2;margin:0;min-height:44px}
footer .clinic-music{grid-column:2;grid-row:2;margin:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
footer .clinic-music span{max-width:none;min-width:0;line-height:1.3}
footer .clinic-music small{flex:0 1 auto;font-size:11px}
footer .clinic-music small:empty{display:none}
@media(max-width:600px){
 footer{gap:3px 8px;padding:5px 8px calc(5px + env(safe-area-inset-bottom))}
 footer #status{font-size:11px}
 footer #openNotice{font-size:12px;padding:7px}
 footer .clinic-music{gap:5px}
 footer .clinic-music span{font-size:11px}
 footer .clinic-music small{display:none}
}