.tour-card {
  position: fixed;
  container-type: inline-size;
  z-index: 16;
  inset: auto;
  width: min(354px, calc(100vw - 24px));
  max-height: calc(100dvh - 70px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 8px 16px 14px;
}
.tour-meta, .tour-actions {display:flex; align-items:center; justify-content:space-between; gap:8px}
.tour-meta,.tour-progress,.tour-actions{flex:0 0 auto}
.tour-card>[aria-live]{min-height:0;overflow:auto;overscroll-behavior:contain}
.tour-kicker {font-size:12px; color:var(--green); font-weight:650}
.tour-kicker span {color:var(--muted); font-weight:450}
.tour-card h2 {margin:12px 0 4px; color:var(--ink); font-size:18px; font-weight:650; letter-spacing:-.035em; line-height:1.35}
.tour-card h2:focus {outline:none}
.tour-message {margin:0; color:var(--muted); font-size:14px; line-height:1.5; word-break:keep-all; overflow-wrap:anywhere}
.tour-card button, #map-tour-open {min-height:44px; border-radius:12px; font-size:13px; font-weight:550}
.tour-card button {min-width:44px;padding:0 12px; background:var(--tint); color:var(--green)}
.tour-card [data-tour-skip] {padding-inline:4px; color:var(--muted); background:transparent; flex-shrink:0}
.tour-card [data-tour-skip]:hover {color:var(--green); text-decoration:underline}
.tour-card [data-tour-next] {background:var(--green); color:var(--surface)}
.tour-card button:disabled {background:var(--tint);color:var(--muted)}
.tour-actions {justify-content:flex-end; margin-top:10px}
.tour-progress {display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
.tour-progress i {display:block; height:3px; border-radius:3px; background:var(--line)}
.tour-progress [data-filled="true"] {background:var(--green)}
.tour-card[data-context="invite"] .tour-progress {display:none}
.tour-card[data-context="invite"] h2 {margin-top:0}
#map-tour-open {padding:0 14px; background:var(--tint); color:var(--green)}
#site-menu .tour-card {
  z-index:3; margin:0; background:var(--surface); pointer-events:auto;
}
.tour-card:is([data-context="miniature"],[data-context="menu"])>[aria-live]{flex:1}
/* A viewport-sized native dialog keeps focus in both the menu and guidance.
   The card is a sibling of the scrollable surface, never clipped by its width. */
#site-menu[data-tour-layout]{width:100%;max-width:none;height:100dvh;max-height:100dvh;padding:0;border-radius:0;overflow:hidden;background:transparent;box-shadow:none;pointer-events:none}
#site-menu[data-tour-layout]::backdrop{background:transparent}
.tour-menu-surface{position:relative;width:min(380px,calc(100% - 24px));height:var(--tour-menu-height,100dvh);max-height:100dvh;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));border-radius:0 20px 20px 0;overflow:auto;overscroll-behavior:contain;background:var(--surface);box-shadow:var(--shadow);pointer-events:auto}
@media(min-width:768px){.tour-menu-surface{width:min(480px,calc(100% - 24px))}}
@media(max-width:767px){.tour-menu-surface{width:min(256px,calc(100% - 24px));padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));border-radius:0 16px 16px 0}}
.tour-card[data-context="selected"] .tour-actions{flex-wrap:wrap}
.tour-card[data-context="selected"] [data-tour-next]{height:auto;padding-block:10px;line-height:1.45;letter-spacing:-.04em}
#view-toggle[data-tour-action],#accepting-housing[data-tour-action]{position:relative}
[data-tour-action]::after{content:'↑ ' attr(data-tour-action);position:absolute;top:calc(100% + 7px);left:8px;z-index:17;white-space:nowrap;padding:6px 10px;border-radius:10px;background:#c73449;color:#fff;font-size:12px;font-weight:700;line-height:1.4;box-shadow:var(--shadow);pointer-events:none;animation:tour-tap 1.4s ease-in-out infinite}
[data-tour-action] [data-view-label="3d"]{text-decoration:underline;text-underline-offset:4px}
@keyframes tour-tap{50%{transform:translateY(3px)}}
[data-tour-target] {outline:2px solid #b77b39; outline-offset:-2px; animation:tour-mark .65s ease-out 2}
.search-field[data-tour-target], .filter-check[data-tour-target] {border-radius:12px}
@keyframes tour-mark {50% {outline-color:var(--green); outline-width:3px}}
@media (max-width:700px) {
  .tour-card {
    width:calc(100vw - 24px);
  }
  .tour-card h2 {font-size:16px}
  #site-menu .tour-card {padding-inline:12px}
}
@media(max-width:767px){
 .workspace:has(#map-tour:is([data-context="search"],[data-context="results"],[data-context="selected"]):not([hidden])) :is(#results-panel,#detail){top:var(--tour-panel-top,300px);bottom:12px;max-height:none;height:auto}
}
@media (max-height:480px) {
  .tour-card {padding-block:2px 8px}
  .tour-card h2 {margin-top:6px; font-size:16px}
  .tour-actions {margin-top:4px}
}
@media (max-width:767px) and (max-height:650px) {
  .workspace:has(#map-tour[data-context="miniature"]:not([hidden])) #sun-time[open] {
    max-height:min(var(--sun-max-height,100dvh),max(112px,calc(100dvh - 380px)));
  }
}
@media(max-height:520px){.workspace:has(#map-tour[data-context="miniature"]:not([hidden])) #sun-time[open]{width:min(250px,calc(var(--visible-width,100vw) - 76px))}}
@media (prefers-reduced-motion:reduce) {[data-tour-target],[data-tour-action]::after {animation:none}}

/* The cutouts follow the active control and the tour card without blocking input. */
.tour-shade {position:fixed; inset:0; z-index:15; pointer-events:none}
.tour-shade svg {display:block; width:100%; height:100%; stroke:none}
.tour-shade rect {stroke:none}
#site-menu .tour-shade {z-index:1}

.tour-playback{display:flex;align-items:center;gap:4px;margin-right:auto}
.tour-playback:has(button:not([hidden])){flex-shrink:0}
.tour-playback button{padding-inline:8px;font-size:12px;background:transparent;border:1px solid var(--line)}
@container(max-width:220px){
 .tour-actions{flex-wrap:wrap}
 .tour-playback:has(button:not([hidden])){flex-basis:100%}
}
.tour-card[data-playback="loading"] .tour-kicker::after{content:' · 준비 중';color:var(--muted);font-weight:450}
.tour-card[data-playback="paused"] .tour-kicker::after{content:' · 일시정지';color:var(--muted);font-weight:450}
@media(max-width:767px){
 .tour-card{padding:4px 12px 10px}
 .tour-card h2{margin-top:6px;font-size:15px;line-height:1.3}
 .tour-message{font-size:12px;line-height:1.4}
 .tour-actions{gap:6px;margin-top:4px}
 .tour-actions>button{padding-inline:10px}
 .tour-playback button{padding-inline:6px;font-size:11px}
 .tour-card[data-context="selected"] h2{font-size:15px}
 .tour-card[data-context="selected"] .tour-message{font-size:12px}
 .tour-card[data-context="selected"] [data-tour-next]{font-size:11px;padding-inline:8px;white-space:nowrap}
 .workspace:has(#map-tour[data-context="miniature"]:not([hidden])) #sun-time[open]{max-height:min(var(--sun-max-height,100dvh),clamp(160px,calc(100dvh - 380px),240px));width:min(238px,calc(var(--visible-width,100vw) - 88px))}
 .workspace:has(#map-tour[data-context="notices"]:not([hidden])) #detail{bottom:var(--tour-notice-bottom,220px)}
}
@media(min-width:480px) and (max-width:767px) and (max-height:480px){
 .workspace:has(#map-tour[data-context="miniature"]:not([hidden])) #sun-time[open]{width:min(238px,calc((var(--visible-width,100vw) - 100px)/2))}
}