:root { --menu-bg: #1e2533; --menu-width: 288px; }
.tour-sidebar, .menu-toggle { font-family: 'Malgun Gothic', Arial, sans-serif; box-sizing: border-box; }
.tour-sidebar { position:fixed; inset:0 auto 0 0; width:min(var(--menu-width), 100vw); z-index:100; background:var(--menu-bg); color:#fff; display:flex; flex-direction:column; padding:22px 12px 16px; box-shadow:8px 0 30px #0003; transition:transform .24s ease; }
.tour-sidebar[hidden] { display:none; }
.tour-sidebar.is-closed { transform:translateX(-110%); pointer-events:none; }
.menu-brand { height:66px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0; flex-shrink:0; }
.menu-brand img { width:162px; max-width:calc(100% - 96px); height:auto; mix-blend-mode:screen; object-fit:contain; }
.menu-toggle { position:relative; flex-shrink:0; width:88px; padding:0; height:42px; display:flex; align-items:center; justify-content:center; gap:8px; background:transparent; color:white; border:1px solid transparent; border-radius:10px; cursor:pointer; z-index:101; transition:left .24s, background .2s; }
.menu-toggle:hover { background:#ffffff0c; }
.menu-toggle.is-closed { position:fixed; top:24px; left:16px; border-color:#ffffff26; background:var(--menu-bg); box-shadow:0 4px 16px #0003; }
.menu-toggle .menu-icon span { display:block; width:19px; height:2px; background:currentColor; border-radius:2px; }
.menu-icon { display:grid; gap:4px; }
.menu-toggle .menu-toggle-label { white-space:pre-line; line-height:1.25; text-align:center; font-size:12px; font-weight:700; }
.tour-sidebar button { font:inherit; color:inherit; cursor:pointer; }
.overview-button { border:1px solid #ffffff20; background:#4268ee; min-height:46px; border-radius:8px; margin:12px 0 22px; font-weight:700!important; flex-shrink:0; }
.menu-caption { margin:0 12px 12px; color:#c5d5f2; font-size:12px; letter-spacing:.06em; }
.center-navigation { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; overscroll-behavior:contain; scrollbar-width:none; padding-right:0; }
.center-navigation::-webkit-scrollbar { display:none; width:0; }
.center-navigation::-webkit-scrollbar-thumb { background:#93abe0; border-radius:8px; }
.center-section { flex:0 0 auto; min-height:0; margin-bottom:6px; }
.center-section.is-expanded { display:flex; flex-direction:column; flex:1 1 0; min-height:0; }
.center-section > .center-button { flex-shrink:0; }
.center-button { display:flex; width:100%; align-items:center; gap:9px; min-height:54px; padding:12px 8px; border:0; border-radius:8px; background:transparent; text-align:left; font-size:13px!important; font-weight:700!important; }
.center-button img { width:23px; height:23px; flex-shrink:0; }
.center-label { white-space:nowrap; flex:1; }
.center-arrow { width:7px; height:7px; border-right:1.5px solid; border-bottom:1.5px solid; transform:rotate(-45deg); margin:0 4px 0 auto; flex-shrink:0; }
.center-button[aria-expanded=true] { background:#4268ee; }
.center-button[aria-expanded=true] .center-arrow { transform:rotate(45deg); }
.scene-list { flex:1 1 0; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#93abe0 #ffffff0c; margin:6px 0 12px 21px; padding:0 0 0 12px; border-left:1px solid #ffffff30; list-style:none; }
.scene-list[hidden] { display:none; }
.scene-button { display:block; width:100%; min-height:38px; padding:9px 10px; border:0; border-radius:6px; background:transparent; text-align:left; line-height:1.5; font-size:13px!important; color:#d5e0f4!important; }
.scene-button[aria-current=true] { background:#ffffff20; color:#fff!important; box-shadow:inset 3px 0 #94baff; }
.center-button:hover,.scene-button:hover { background:#ffffff18; }
.tour-sidebar button:focus-visible,.menu-toggle:focus-visible { outline:2px solid #c0d8ff; outline-offset:-2px; }
@media(max-width:340px) { .tour-sidebar { padding-inline:10px; } .center-button { gap:8px; font-size:13px!important; } }
@media(prefers-reduced-motion:reduce) { .tour-sidebar,.menu-toggle { transition:none; } }








/* Compact, proportionate scene cards with a joined left-hand tab. */
.scene-strip { position:fixed; left:12px; right:12px; bottom:12px; z-index:95; background:#283239; color:#fff; border-radius:0 16px 16px 16px; font-family:'Malgun Gothic',Arial,sans-serif; }
.scene-strip[hidden], #strip-body[hidden] { display:none; }
.scene-strip button { font-family:inherit; color:inherit; cursor:pointer; }
.strip-toggle { position:absolute; bottom:calc(100% - 1px); left:0; display:flex; align-items:center; gap:14px; min-height:36px; padding:8px 15px; border:0; border-radius:12px 12px 0 0; background:#283239; font-size:13px; font-weight:700; }
.strip-toggle i { width:8px; height:8px; border-right:2px solid; border-bottom:2px solid; transform:translateY(-2px) rotate(45deg); }
.strip-heading { padding:10px 34px 0; color:#cbd4da; font-size:12px; font-weight:700; }
.strip-row { display:flex; align-items:center; gap:5px; padding:8px 8px 10px; }
.strip-track { position:relative; display:flex; flex:1; min-width:0; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; touch-action:pan-x pinch-zoom; scrollbar-width:thin; scrollbar-color:#ffffff55 transparent; padding:3px 2px 9px; cursor:grab; user-select:none; }
.strip-card { flex:0 0 138px; min-width:0; padding:3px 3px 8px; background:transparent; border:1px solid transparent; border-radius:12px; text-align:center; }
.strip-card img { display:block; width:130px; height:80px; object-fit:cover; border-radius:9px; margin-bottom:8px; -webkit-user-drag:none; }
.strip-card strong { display:block; font-size:12px; line-height:1.45; min-height:35px; overflow-wrap:anywhere; }
.strip-card[aria-current=true] { border-color:#f6f8f2; background:#ffffff0d; box-shadow:0 0 0 1px #ffffff35; }
.strip-card:hover { background:#ffffff12; }
.strip-prev,.strip-next { flex:0 0 20px; padding:0; border:0; background:transparent; font-size:28px; }
.strip-prev:disabled,.strip-next:disabled { opacity:.25; cursor:default; }
.scene-strip.is-collapsed { background:transparent; }
.scene-strip.is-collapsed .strip-toggle { bottom:0; border-radius:12px; }
.scene-strip.is-collapsed .strip-toggle i { transform:translateY(2px) rotate(225deg); }
.scene-strip button:focus-visible { outline:2px solid #c0d8ff; outline-offset:-2px; }
@media(min-width:900px) { .scene-strip.sidebar-open { left:calc(var(--menu-width) + 12px); } }
@media(max-width:600px) { .scene-strip { left:8px; right:8px; bottom:8px; } .strip-card { flex-basis:122px; } .strip-card img { width:114px; height:70px; } .strip-heading { padding-top:8px; } .strip-row { padding:6px 5px 8px; } }

.menu-help { flex-shrink:0; margin:12px 0 0; padding:12px 10px; border-radius:8px; background:#17202e; color:#c9d4e2; font-size:11px; letter-spacing:-0.65px; line-height:1.6; white-space:nowrap; }
.menu-help span { margin-right:4px; font-weight:700; }



.location-bar { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:96; display:flex; align-items:center; gap:9px; box-sizing:border-box; min-height:44px; max-width:calc(100vw - 32px); padding:8px 17px; background:#111827f0; border:1px solid #ffffff24; border-radius:17px; box-shadow:0 3px 9px #0005; color:#fff; font:700 14px/1.4 'Malgun Gothic',Arial,sans-serif; }
.location-home { display:flex; align-items:center; gap:6px; flex-shrink:0; padding:0; border:0; background:none; color:#dbe4f4; font:inherit; cursor:pointer; white-space:nowrap; }
.location-home svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.location-home:hover { color:#99baff; }
.location-home:focus-visible { outline:2px solid #99baff; outline-offset:4px; border-radius:3px; }
.location-divider { color:#8190a6; font-weight:400; }
.location-name { min-width:0; overflow-wrap:anywhere; }
@media(max-width:600px) {
  .location-bar { top:24px; left:112px; right:12px; transform:none; width:max-content; max-width:calc(100vw - 124px); height:42px; min-height:42px; font-size:12px; padding:7px 10px; gap:6px; }
  .location-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

@media(max-height:700px) {
  .tour-sidebar { padding-top:12px; padding-bottom:10px; }
  .menu-brand { height:48px; }
  .overview-button { min-height:40px; margin:8px 0 12px; }
  .menu-caption { margin-bottom:8px; }
  .center-button { min-height:44px; padding-block:8px; }
  .center-section { margin-bottom:4px; }
  .menu-help { margin-top:8px; padding-block:8px; }
}
@media(max-height:520px) {
  .menu-brand { height:38px; }
  .overview-button { min-height:32px; margin:4px 0 6px; }
  .menu-caption { display:none; }
  .center-button { min-height:32px; padding-block:4px; }
  .center-button img { width:20px; height:20px; }
  .menu-help { padding-block:5px; margin-top:4px; }
  .scene-list { margin-block:3px; }
}

/* Loading feedback and first-visit instructions. */
.tour-booting #pano { visibility:hidden; }
.loading-notice { position:fixed; z-index:1000; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:16px; box-sizing:border-box; max-width:calc(100vw - 32px); padding:20px 24px; border:1px solid #ffffff26; border-radius:20px; background:#1e2533f5; color:#fff; box-shadow:0 12px 40px #0005; font-family:'Malgun Gothic',Arial,sans-serif; pointer-events:none; }
.loading-notice[hidden] { display:none; }
.loading-notice strong { font-size:15px; }
.loading-notice p { margin:6px 0 0; font-size:12px; color:#bcc7db; }
.loading-symbol { position:relative; display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:50%; background:#5c68e32b; color:#aab6ff; font-size:28px; }
.loading-symbol::before { content:''; position:absolute; inset:-3px; border:2px solid #aab6ff30; border-top-color:#aab6ff; border-radius:50%; animation:tour-loading-turn 1.4s linear infinite; }
@keyframes tour-loading-turn { to { transform:rotate(360deg); } }
.tour-welcome { box-sizing:border-box; width:360px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 40px); overflow:auto; padding:28px; border:1px solid #ffffff26; border-radius:22px; background:#1e2533; color:#eef2ff; box-shadow:0 18px 60px #0006; font:14px/1.65 'Malgun Gothic',Arial,sans-serif; }
.tour-welcome::backdrop { background:#0b10206b; backdrop-filter:blur(3px); }
.tour-welcome .welcome-brand { display:block; width:180px; max-width:100%; height:auto; margin:0 auto 24px; object-fit:contain; mix-blend-mode:screen; }
.tour-welcome h2 { margin:0 0 14px; font-size:21px; }
.tour-welcome p { color:#cbd3e3; }
.tour-welcome ul { padding-left:18px; margin:20px 0 24px; font-size:12px; color:#cbd3e3; }
.tour-welcome li + li { margin-top:10px; }
.tour-welcome strong { color:#fff; }
.tour-welcome button { width:100%; padding:12px; border:0; border-radius:11px; background:#5c68e3; color:white; font:700 14px 'Malgun Gothic',Arial,sans-serif; cursor:pointer; }
.tour-welcome button:focus-visible { outline:2px solid #c0d8ff; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .loading-symbol::before { animation:none; } }

.institute-photo { box-sizing:border-box; width:min(1100px,calc(100vw - 24px)); max-width:none; max-height:calc(100dvh - 24px); padding:0; border:1px solid #ffffff26; border-radius:16px; background:#1e2533; color:#fff; box-shadow:0 18px 60px #0008; overflow:auto; }
.institute-photo::backdrop { background:#080e1bd9; }
.institute-photo header { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px; background:#1e2533; }
.institute-photo h2 { margin:0; font:700 17px 'Malgun Gothic',Arial,sans-serif; }
.institute-photo button { border:1px solid #ffffff40; border-radius:8px; padding:8px 14px; background:#5c68e3; color:white; cursor:pointer; font:700 14px 'Malgun Gothic',Arial,sans-serif; }
.institute-photo button:focus-visible { outline:2px solid #c0d8ff; outline-offset:2px; }
.institute-photo img { display:block; width:100%; height:auto; max-height:calc(100dvh - 92px); object-fit:contain; }