@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root {
  font-family: 'DM Sans', 'Noto Sans KR', sans-serif;
  font-synthesis: none;
  color: #294b53;
  --ink: #294b53;
  --muted: #718b91;
  --accent: #2e747c;
  --line: #dbe7e8;
  --surface: rgba(249, 252, 252, .96);
  --edge: 20px;
  --safe-top: max(var(--edge), env(safe-area-inset-top));
  --safe-right: max(var(--edge), env(safe-area-inset-right));
  --safe-bottom: max(var(--edge), env(safe-area-inset-bottom));
  --safe-left: max(var(--edge), env(safe-area-inset-left));
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #e5edef; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; min-height: 44px; border: 0; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #3b909a; outline-offset: 3px; }
button:hover { filter: brightness(.98); }
.hidden, [hidden] { display: none !important; }
.eyebrow { font-size: 9px; font-weight: 600; letter-spacing: .18em; color: var(--muted); }
#world, #world canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
#world canvas { touch-action: none; }

/* The resting view leaves the room visible: identity, one menu and a location. */
.topbar {
  position: fixed; z-index: 8; top: var(--safe-top); right: var(--safe-right); left: var(--safe-left);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.top-actions { display: flex; align-items: center; gap: 5px; }
.sound-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; min-width: 44px; height: 44px; font-size: 10px; border: 1px solid #ffffffcc; border-radius: 12px; background: #f8fbfbd9; backdrop-filter: blur(12px); }
.sound-toggle > span:first-child { font-size: 15px; }
.sound-toggle[aria-pressed=false] { color: #819397; background: #f8fbfba8; }
.resident-note { margin: 8px 10px; font-size: 12px; line-height: 1.8; }
.resident-note small { color: var(--muted); font-size: 10px; }
@media (max-width: 380px) { .topbar { gap: 6px; } .brand-sub:not(.online-count) { display: none !important; } .sound-toggle { padding: 0 6px; } }
.brand {
  display: flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none;
  color: #214e59; font-size: 18px; line-height: 1; font-weight: 700; letter-spacing: .025em;
  text-shadow: 0 1px 10px #f4fafadd;
}
.brand-icon { display: grid; place-items: center; position: relative; width: 34px; height: 34px; border-radius: 10px; background: #285761; color: #fff; font-size: 24px; text-shadow: none; }
.brand-icon span { position: absolute; right: 6px; bottom: 1px; color: #a1d7c0; }
.brand-sub { display: block; margin-top: 5px; font-size: 6px; font-weight: 600; letter-spacing: .18em; }
.controls-toggle, .panel-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border-radius: 12px; }
.controls-toggle { border: 1px solid #ffffffdb; background: #f8fbfbe8; box-shadow: 0 3px 18px #28495014; backdrop-filter: blur(12px); }
.controls-toggle[aria-expanded=true] { color: #fff; background: #2d6670; border-color: #2d6670; }
.menu-toggle-icon { display: flex; flex-direction: column; gap: 6px; width: 18px; }
.menu-toggle-icon i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.panel-close { background: transparent; font-size: 25px; line-height: 1; font-weight: 400; color: #789096; }
.panel-close:hover { background: #eaf2f2; }

/* All actions live in this single nonmodal, independently scrollable panel. */
.controls-panel, .map-panel {
  position: fixed; z-index: 10; top: calc(var(--safe-top) + 56px); right: var(--safe-right);
  width: min(304px, calc(100vw - var(--safe-left) - var(--safe-right)));
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 56px);
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b5cbd0 transparent;
  padding: 10px 12px 12px; border: 1px solid #fff; border-radius: 16px; background: var(--surface);
  box-shadow: 0 12px 45px #1f454e24; backdrop-filter: blur(18px);
}
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 10px; }
.panel-heading h2 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
.menu-group { margin: 8px 0 0; padding: 9px 0 0; border-top: 1px solid var(--line); }
.menu-group h3 { margin: 0 10px 5px; color: #83999e; font-size: 10px; line-height: 1.6; font-weight: 500; }
.view-controls { display: block; }
.menu-row {
  display: flex; align-items: center; width: 100%; min-height: 44px; gap: 11px;
  padding: 10px; border-radius: 8px; background: transparent; text-align: left; font-size: 12px; line-height: 1.5;
}
.menu-row:hover { background: #edf4f4; }
.menu-row.active, .menu-row[aria-pressed=true] { background: #e5f0ee; color: #286972; }
.menu-row:focus-visible { outline-offset: -2px; }
.menu-symbol { flex: none; width: 18px; font-size: 18px; line-height: 1; text-align: center; color: #73929a; }
.menu-label { flex: 1; min-width: 0; }
.menu-label small { display: block; margin-top: 3px; color: #84999e; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.menu-detail, .menu-arrow { flex: none; font-size: 10px; color: #8a9fa4; }
.menu-arrow { font-size: 16px; }
.restore-row { color: #955744; }
.restore-row .menu-symbol, .restore-row .menu-detail { color: #ac8172; }

.posture-controls {
  position: fixed; z-index: 5; right: var(--safe-right); bottom: var(--safe-bottom);
  display: flex; gap: 4px; padding: 4px; border: 1px solid #fff; border-radius: 16px;
  background: #f7fbfbe8; box-shadow: 0 3px 15px #26495012; backdrop-filter: blur(10px);
}
.posture-controls button { min-width: 60px; min-height: 44px; padding: 0 10px; border-radius: 12px; background: transparent; font-size: 12px; }
.posture-controls button[aria-pressed=true] { color: #fff; background: #397b81; }
.safety-panel { position: fixed; z-index: 6; left: 50%; bottom: var(--safe-bottom); transform: translateX(-50%); width: min(350px,calc(100vw - 32px)); padding: 12px 14px; border: 1px solid #ffcfac; border-radius: 14px; background: #fff8eeef; color: #87462d; box-shadow: 0 3px 18px #56331920; }
.safety-panel strong,.safety-panel span { display: block; font-size: 12px; line-height: 1.6; }
.safety-panel span { font-size: 11px; }
.safety-panel button { margin-top: 7px; min-height: 36px; width: 100%; border-radius: 9px; background: #f1dcc5; color: #674833; font-size: 11px; }
body:has(.safety-panel:not(.hidden)) .view-label, body:has(.safety-panel:not(.hidden)) .posture-controls { display: none; }
body.entering .safety-panel,body:has(#tool-card:not(.hidden)) .safety-panel { display: none; }
.foup-actions { position: fixed; z-index: 5; bottom: calc(var(--safe-bottom) + 62px); right: var(--safe-right); display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #f7fbfbe8; border: 1px solid #fff; }
.foup-actions button { padding: 0 12px; border-radius: 10px; background: transparent; font-size: 11px; }
.oht-dismount { position: fixed; z-index: 5; right: var(--safe-right); bottom: var(--safe-bottom); padding: 0 20px; border-radius: 16px; color: white; background: #397b81; box-shadow: 0 3px 15px #26495022; }
.oht-dismount:disabled { background: #6d969c; }
body.entering .posture-controls, body:has(#tool-card:not(.hidden)) .posture-controls { display: none; }
.view-label {
  position: fixed; z-index: 4; left: var(--safe-left); bottom: var(--safe-bottom);
  display: flex; align-items: center; gap: 9px; max-width: min(330px, calc(100vw - var(--safe-left) - var(--safe-right) - 150px));
  padding: 10px 13px; border: 1px solid #ffffffbd; border-radius: 12px; background: #f7fbfbd9;
  box-shadow: 0 3px 15px #2649500a; backdrop-filter: blur(10px); pointer-events: none;
}
.view-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #59918e; }
.view-label > div { min-width: 0; }
.view-label strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; line-height: 1.5; }
.view-label div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; color: #81969b; font-size: 8px; line-height: 1.4; letter-spacing: .025em; }
.zone-toast { position: fixed; z-index: 11; top: calc(var(--safe-top) + 56px); left: 50%; max-width: min(460px, calc(100vw - 32px)); transform: translate(-50%, -5px); opacity: 0; padding: 10px 16px; border-radius: 12px; background: #f9fcfced; color: #53747b; box-shadow: 0 4px 20px #284c5512; font-size: 11px; line-height: 1.7; text-align: center; pointer-events: none; transition: opacity .2s, transform .2s; }
.zone-toast.visible { opacity: 1; transform: translate(-50%, 0); }

.map-panel { width: min(248px, calc(100vw - var(--safe-left) - var(--safe-right))); padding-bottom: 14px; }
.map-panel .panel-heading { padding-left: 6px; }
.map-panel h2 { font-size: 14px; }
#map-location { display: block; margin-top: 4px; color: #81999f; font-size: 10px; line-height: 1.4; }
.map-panel canvas { display: block; width: 100%; height: auto; margin: 8px 0 5px; }
.map-scale { display: flex; justify-content: space-between; gap: 12px; margin: 0 7px; padding-top: 10px; border-top: 1px solid var(--line); color: #8ba0a5; font-size: 10px; }

/* Requested information stays closeable without reserving a permanent HUD row. */
.tool-card, .help {
  position: fixed; z-index: 12; border: 1px solid #fff; border-radius: 16px; background: var(--surface);
  box-shadow: 0 12px 50px #20455026; backdrop-filter: blur(18px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #b5cbd0 transparent;
}
.tool-card { left: var(--safe-left); bottom: var(--safe-bottom); width: min(340px, calc(100vw - var(--safe-left) - var(--safe-right))); max-height: min(590px, 65dvh); padding: 24px 22px 20px; scroll-padding-top: 16px; }
#close-card, #help-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 10px; background: transparent; color: #80969d; font-size: 25px; line-height: 1; }
#close-card:hover, #help-close:hover { background: #eaf2f2; }
.tool-card .eyebrow { padding-right: 32px; line-height: 1.6; }
.tool-card #tool-name { margin: 12px 0 6px; font-size: 28px; line-height: 1.3; font-weight: 600; letter-spacing: .04em; color: #2b6873; font-variant-numeric: tabular-nums; }
.tool-card #tool-type { margin: 0 0 10px; font-size: 15px; line-height: 1.5; font-weight: 500; letter-spacing: -.025em; }
.tool-card #tool-location { font-size: 10px; color: #82999e; line-height: 1.7; }
.tool-card p { margin: 15px 0; font-size: 12px; line-height: 1.9; color: #718b91; }
.tool-code-breakdown { display: flex; gap: 5px; margin-top: 16px; }
.tool-code-breakdown > span { flex: 1; min-width: 0; border: 1px solid #dce9e9; background: #edf4f3; border-radius: 6px; padding: 7px 4px; text-align: center; }
.tool-code-breakdown b { display: block; font-size: 14px; color: #507780; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.tool-code-breakdown small { display: block; margin-top: 4px; color: #8aa0a4; font-size: 8px; }
.tool-card #tool-ports { margin-bottom: 13px; font-size: 10px; color: #849ba0; line-height: 1.7; overflow-wrap: anywhere; }
.tool-caption { display: block; padding-top: 12px; border-top: 1px solid var(--line); color: #97aaae; font-size: 9px; line-height: 1.7; }
.tool-emo-actions { display: grid; gap: 8px; margin: 16px 0 13px; }
#tool-emo { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid #e6c5bb; border-radius: 10px; background: #fff3ed; text-align: left; color: #8b4539; }
#tool-emo strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; }
#tool-emo small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.5; color: #b08576; }
.emo-cap { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 4px solid #e8c65b; border-radius: 50%; background: linear-gradient(#e3473d, #b32322); box-shadow: 0 3px 0 #8e3c31, inset 0 1px 3px #ff9c80; color: #fff; font-size: 8px; font-weight: 700; }
#tool-emo:active .emo-cap { transform: translateY(2px); box-shadow: 0 1px 0 #8e3c31; }
#tool-emo:disabled { opacity: .5; filter: grayscale(.5); }
#tool-repair { padding: 12px; border-radius: 8px; background: #2d6872; color: #fff; font-size: 12px; }
.help { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - var(--safe-left) - var(--safe-right))); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom)); padding: 30px 28px 24px; }
.help .eyebrow { padding-right: 28px; line-height: 1.7; }
.help h2 { margin: 16px 0 20px; font-size: 24px; line-height: 1.4; font-weight: 500; letter-spacing: -.045em; }
.help p { margin: 15px 0; font-size: 12px; line-height: 1.9; color: #718b91; }
.help b { color: #3d6872; font-weight: 600; margin-right: 6px; }
.help small { display: block; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); color: #91a5aa; font-size: 10px; line-height: 1.9; }
body:has(#tool-card:not(.hidden)) .view-label { visibility: hidden; }

.entry-overlay { position: fixed; inset: 0; z-index: 6; background: linear-gradient(0deg, rgba(235,244,245,.98), rgba(235,244,245,.82) 22%, transparent 43%); touch-action: none; }
.entry-skip { position: absolute; right: var(--safe-right); top: var(--safe-top); display: flex; align-items: center; gap: 14px; padding: 10px 15px; border: 1px solid #fff; border-radius: 22px; background: #f6fbfbe8; color: #597b82; font-size: 11px; }
.entry-skip span { font-size: 17px; }
.entry-skip { top: calc(var(--safe-top) + 54px); }
.entry-caption { position: absolute; bottom: max(36px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(500px, calc(100% - 36px)); text-align: center; pointer-events: none; }
.entry-caption .eyebrow { color: #6f9298; font-size: 8px; letter-spacing: .2em; }
.entry-caption h1 { margin: 12px 0 8px; font-size: 24px; line-height: 1.45; font-weight: 500; letter-spacing: -.05em; }
.entry-caption p { margin: 0; color: #7d989e; font-size: 11px; line-height: 1.8; }
.entry-progress { width: 280px; max-width: 90%; height: 2px; overflow: hidden; margin: 21px auto 12px; background: #aec6cc66; }
.entry-progress span { display: block; width: 100%; height: 100%; background: #478e94; transform: scaleX(0); transform-origin: left; }
.entry-steps { display: flex; justify-content: center; gap: 25px; color: #8fa6ab; font-size: 9px; letter-spacing: .025em; }
.entry-steps .active { color: #367e86; }
body.entering #controls-toggle, body.entering .controls-panel, body.entering .map-panel,
body.entering .view-label, body.entering .zone-toast { visibility: hidden; pointer-events: none; }
body.entering .brand { pointer-events: none; }

.loading { position: fixed; z-index: 30; inset: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #edf2f2; transition: opacity .6s; }
.loading-mark { font-size: 70px; letter-spacing: -.1em; color: #265964; }
.loading-mark span { color: #84b99c; }
.loading p { color: #6c8c92; font-size: 12px; }
.loading > span { margin-top: 12px; color: #9ab0b5; font-size: 8px; letter-spacing: .3em; }
.loading.done { opacity: 0; pointer-events: none; }
.error { position: fixed; z-index: 50; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); padding: 28px; border-radius: 14px; background: #fff; font-size: 14px; line-height: 1.8; box-shadow: 0 15px 60px #20455033; }

@media (max-width: 540px) {
  :root { --edge: 16px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand-icon { width: 32px; height: 32px; font-size: 23px; }
  .brand-sub { font-size: 5px; }
  .view-label { max-width: min(286px, calc(100vw - 32px)); padding: 9px 12px; }
  .view-label strong { font-size: 10px; }
  .view-label div > span { font-size: 7px; }
  .tool-card { width: calc(100vw - var(--safe-left) - var(--safe-right)); max-height: 50dvh; padding: 22px 20px 18px; }
  .tool-card #tool-name { font-size: 26px; }
  .tool-card #tool-type { font-size: 14px; }
  .help { padding: 28px 22px 22px; }
  .help h2 { font-size: 22px; }
  .entry-caption h1 { font-size: 21px; }
  .entry-caption p { font-size: 10px; }
  .entry-steps { gap: 20px; font-size: 8px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  :root { --edge: 12px; }
  .tool-card { max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 56px); }
  .entry-caption { bottom: 20px; }
  .entry-caption h1 { font-size: 19px; }
  .entry-caption .eyebrow, .entry-steps { display: none; }
  .entry-progress { margin: 13px auto 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}