:root {
  --bg: #071018;
  --panel: rgba(8, 20, 29, .88);
  --line: rgba(139, 211, 229, .18);
  --cyan: #63e5ff;
  --green: #55efbd;
  --amber: #ffc65a;
  --red: #ff526b;
  --text: #ecf8fb;
  --muted: #a9c0c7;
  --shadow: 0 18px 60px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif; }
button { font: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.hidden { display: none !important; }
.glass { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(14px); }

#app { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 55% 35%, #142b37, #071018 65%); }
#world { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

.topbar { position: absolute; z-index: 40; top: max(14px, env(safe-area-inset-top)); left: 18px; right: 18px; height: 66px; border-radius: 12px; display: flex; align-items: center; padding: 0 16px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--cyan); color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: -1px; box-shadow: inset 0 0 18px rgba(99, 229, 255, .12); }
.brand strong { display: block; font-size: 15px; letter-spacing: 2px; }
.brand small { display: block; color: var(--muted); font-size: 12px; letter-spacing: 1.35px; margin-top: 3px; }
.stats { flex: 1; display: flex; justify-content: center; gap: clamp(18px, 5vw, 70px); }
.stats > div { display: grid; gap: 3px; min-width: 70px; }
.stats span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.stats b { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 15px; letter-spacing: 1px; }
.stage-stat > div { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.stage-stat #stage { color: var(--cyan); }
.stage-stat small { color: #d5e7eb; font-size: 12px; font-weight: 800; letter-spacing: .15px; }
.strike-stat b { color: var(--red); letter-spacing: 4px; }
.icon-button, .close-button { border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.035); cursor: pointer; }
.icon-button { width: 38px; height: 38px; border-radius: 9px; }
.icon-button.active { color: var(--cyan); border-color: rgba(99,229,255,.5); }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.hud-action { height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; color: #d9e9ed; background: rgba(255,255,255,.035); font-size: 12px; font-weight: 800; cursor: pointer; }
.hud-action:hover { color: var(--cyan); border-color: rgba(99,229,255,.45); background: rgba(99,229,255,.07); }
.hud-action:disabled { opacity: .38; cursor: default; }
.hud-action.saving { color: var(--amber); border-color: rgba(255,198,90,.45); }

.task-panel { position: absolute; z-index: 9; top: 94px; left: 18px; width: min(370px, calc(100vw - 36px)); max-height: calc(100vh - 190px); border-radius: 12px; overflow: hidden; transition: width .2s; }
.task-panel.tablet-linked { width: min(430px, calc(100vw - 36px)); }
.task-heading { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.task-heading > div { flex: 1; }
.task-heading small { display: block; color: var(--muted); font-size: 12px; letter-spacing: 1.2px; }
.task-heading strong { display: block; color: var(--red); font: 800 13px ui-monospace, monospace; margin-top: 3px; }
.task-heading button { width: 28px; height: 28px; border: 0; border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.05); cursor: pointer; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.82); } }
#task-body { padding: 14px; overflow: auto; max-height: calc(100vh - 252px); }
#task-body h1 { font-size: 17px; line-height: 1.45; margin: 0 0 14px; }
#task-body dl { display: grid; grid-template-columns: 78px 1fr; gap: 8px 10px; margin: 0 0 12px; }
#task-body dt { color: #bfd1d6; font-size: 12px; font-weight: 500; }
#task-body dt.primary-field { color: #f3fbfd; font-weight: 900; }
#task-body dd { margin: 0; color: #e2ecef; font: 500 13px ui-monospace, monospace; text-align: right; overflow-wrap: anywhere; }
#task-body dd.endpoint-field { display: grid; gap: 3px; align-content: start; }
#task-body dd.endpoint-field span { color: #eef7f9; font: 600 12px/1.25 ui-monospace,monospace; }
#task-body dd.endpoint-field small { display: flex; justify-content: flex-end; align-items: center; gap: 6px; color: #91a8ae; font: 500 11px/1.2 ui-monospace,monospace; }
#task-body dd.deadline-field { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
#task-body dd.deadline-field span { color: #a9bec4; }
#task-body dd.deadline-field b { color: var(--amber); font: 900 13px ui-monospace,monospace; }
#task-body dd.deadline-field.urgent b { color: var(--red); animation: pulse 1s infinite; }
#task-body dd.deadline-field.unlimited b { color: #a9bec4; font-weight: 500; }
.tablet-nms-detail { margin: 12px 0; }
.tablet-nms-card { overflow: hidden; border: 1px solid rgba(99,229,255,.28); border-radius: 8px; background: rgba(99,229,255,.045); }
.tablet-nms-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid rgba(99,229,255,.16); }
.tablet-nms-head span { color: var(--cyan); font: 800 11px ui-monospace,monospace; letter-spacing: .8px; }
.tablet-nms-head b { color: var(--green); font-size: 11px; }
.tablet-nms-card > dl { display: grid; grid-template-columns: 72px 1fr; gap: 6px 8px; margin: 0; padding: 10px; }
.tablet-endpoints { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: rgba(99,229,255,.12); }
.tablet-endpoint { min-width: 0; padding: 9px 10px; background: #101f23; }
.tablet-endpoint h4 { margin: 0 0 7px; color: #f2fbfd; font-size: 11px; }
.tablet-endpoint dl { display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 5px 6px; margin: 0; }
.tablet-nms-card dt, .tablet-endpoint dt { color: #8fa8ae; font-size: 10px; }
.tablet-nms-card dd, .tablet-endpoint dd { min-width: 0; margin: 0; font: 600 10px/1.25 ui-monospace,monospace; text-align: right; overflow-wrap: anywhere; }
.ticket-list, .nms-ticket-strip { display: grid; gap: 6px; margin: 0 0 12px; }
.ticket-chip { display: flex; align-items: center; justify-content: space-between; gap: 9px; width: 100%; padding: 8px 10px; color: #b9cbd0; background: rgba(255,255,255,.035); border: 1px solid rgba(139,211,229,.17); border-radius: 7px; cursor: pointer; text-align: left; }
.ticket-chip span { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-chip b { color: var(--amber); font: 900 12px ui-monospace,monospace; }
.ticket-chip.active { color: white; background: rgba(99,229,255,.11); border-color: rgba(99,229,255,.55); box-shadow: inset 3px 0 var(--cyan); }
.ticket-chip.urgent b { color: var(--red); animation: pulse 1s infinite; }
.pending-alarm-card { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 11px; border: 1px solid rgba(255,82,107,.2); border-radius: 10px; background: rgba(255,255,255,.025); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.pending-alarm-card::before { content: ''; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 11px var(--red); }
.pending-alarm-card span { min-width: 0; flex: 1; }
.pending-alarm-card small { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 1.1px; }
.pending-alarm-card b { display: block; margin-top: 3px; color: #fff; font-size: 12px; }
.pending-alarm-card i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; color: #77919a; background: rgba(255,255,255,.05); font-style: normal; font-size: 15px; }
.nms-ticket-strip { grid-template-columns: repeat(auto-fit,minmax(175px,1fr)); }
.nms-empty { display: grid; place-items: center; min-height: 180px; gap: 6px; color: var(--muted); }
.nms-empty b { color: var(--green); font-size: 18px; }
.nms-alarm-list { display: grid; gap: 8px; }
.nms-alarm-item { overflow: hidden; border: 1px solid rgba(139,211,229,.2); border-radius: 9px; background: rgba(0,0,0,.17); }
.nms-alarm-line { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 9px 12px; border: 0; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.nms-alarm-line:hover { background: rgba(99,229,255,.055); }
.nms-alarm-line i { color: var(--cyan); font: 900 24px/1 ui-monospace,monospace; transition: transform .18s; }
.nms-alarm-line[aria-expanded="true"] i { transform: rotate(90deg); }
.nms-alarm-line strong { overflow: hidden; color: #ff9bad; font: 800 12px ui-monospace,monospace; text-overflow: ellipsis; white-space: nowrap; }
.nms-alarm-item.needs-check .nms-alarm-line strong { color: #d8e7ea; }
.nms-alarm-line time { color: var(--amber); font: 900 12px ui-monospace,monospace; }
.nms-alarm-details { padding: 0 12px 12px 42px; }
.endpoint-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.endpoint-card { padding: 12px; border: 1px solid rgba(99,229,255,.16); border-radius: 7px; background: rgba(99,229,255,.035); }
.endpoint-card h3 { margin: 0 0 9px; color: var(--cyan); font-size: 12px; }
.endpoint-card dl { display: grid; grid-template-columns: 70px 1fr; gap: 6px 10px; margin: 0; }
.endpoint-card dt { color: var(--muted); font-size: 12px; }
.endpoint-card dd { margin: 0; font: 500 12px ui-monospace,monospace; text-align: right; overflow-wrap: anywhere; }
.alarm-box { padding: 10px; background: rgba(255, 82, 107, .07); border-left: 2px solid var(--red); }
.alarm-box span { display: block; color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: 1.3px; }
.alarm-box code { display: block; color: #ffc0c8; font-size: 12px; font-weight: 800; margin-top: 4px; white-space: normal; }
.checklist { margin: 13px 0 0; padding-left: 21px; color: #c0d1d6; font-size: 12px; line-height: 1.75; }
.checklist li.done { color: var(--green); text-decoration: line-through; }
.task-panel.collapsed { width: 210px; }
.task-panel.collapsed #task-body { display: none; }
.task-panel.collapsed .task-heading { border-bottom: 0; }

.bag { position: absolute; z-index: 8; right: 18px; top: 94px; width: 270px; border-radius: 12px; padding: 15px; }
.bag-title { display: flex; justify-content: space-between; color: #d4e5e9; font-size: 14px; font-weight: 900; letter-spacing: 1.1px; }
.bag-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; min-height: 25px; }
.bag-items em { color: #a9c0c7; font-size: 12px; }
.bag-chip { max-width: 100%; padding: 8px 10px; background: rgba(99, 229, 255, .09); border: 1px solid rgba(99, 229, 255, .3); color: #e2fbff; font: 800 12px/1.35 ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bag-chip.equipped { border-color: rgba(255,200,87,.42); color: #ffe1a0; background: rgba(255,200,87,.09); }
.recovery-title { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); color: #ffe1a7; font-size: 13px; font-weight: 900; letter-spacing: .9px; }
.recovery-items { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; max-height: 64px; overflow: auto; }
.recovery-items em { color: #a9bec4; font-size: 12px; }
.recovery-chip { max-width: 100%; padding: 7px 9px; border: 1px solid rgba(255,198,90,.4); color: #ffe6b8; background: rgba(255,198,90,.09); font: 800 12px/1.35 ui-monospace,monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recovery-chip.faulty { border-color: rgba(255,82,107,.28); color: #ff9dac; background: rgba(255,82,107,.06); }
.recovered-action { border-color: rgba(88,218,238,.45); color: #8eeafb; }

.dev-panel { position: absolute; z-index: 12; right: 18px; bottom: 18px; width: 220px; padding: 13px; border-color: rgba(255,198,90,.42); border-radius: 12px; }
.dev-panel > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.dev-panel strong { color: var(--amber); font: 900 13px ui-monospace,monospace; letter-spacing: 1.2px; }
.dev-panel span { color: #d3e2e6; font: 800 12px ui-monospace,monospace; }
.dev-panel button { width: 100%; margin-top: 6px; padding: 9px 10px; color: #eef8fa; border: 1px solid rgba(255,198,90,.26); border-radius: 7px; background: rgba(255,198,90,.07); font-size: 12px; font-weight: 800; cursor: pointer; }
.dev-panel button:hover { color: #071018; background: var(--amber); border-color: var(--amber); }

.location-pill { position: absolute; z-index: 7; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 9px 14px; border-radius: 999px; color: #bfd2d7; font-size: 12px; letter-spacing: .4px; }
.interaction-prompt { position: absolute; z-index: 8; bottom: 63px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 9px; background: rgba(4, 12, 17, .9); border: 1px solid rgba(99,229,255,.28); box-shadow: 0 8px 28px rgba(0,0,0,.4); font-size: 11px; }
kbd { min-width: 24px; padding: 4px 6px; text-align: center; color: #051016; background: var(--cyan); border-radius: 5px; font: 900 11px ui-monospace, monospace; }

.control-coach { position: absolute; z-index: 39; left: 22px; bottom: 22px; width: min(300px,calc(100vw - 44px)); padding: 13px 15px 14px; color: #dff5f8; border: 1px solid rgba(99,229,255,.38); border-left: 4px solid var(--cyan); background: rgba(4,14,20,.94); box-shadow: 0 14px 38px rgba(0,0,0,.48), 0 0 28px rgba(99,229,255,.08); pointer-events: none; animation: control-coach-in .32s ease-out both; }
.control-coach.leaving { animation: control-coach-out .45s ease-in both; }
.control-coach > strong { display: block; margin-bottom: 10px; color: var(--cyan); font: 900 11px ui-monospace,monospace; letter-spacing: 1.4px; }
.control-coach-row { display: flex; align-items: center; gap: 17px; }
.move-keys, .interact-key { display: flex; align-items: center; gap: 8px; }
.move-keys { padding-right: 17px; border-right: 1px solid rgba(139,211,229,.2); }
.control-coach kbd { display: grid; place-items: center; min-width: 25px; height: 23px; padding: 0 5px; color: #edfafd; border: 1px solid #6e858c; border-bottom-width: 3px; border-radius: 4px; background: #1a2930; font: 900 10px ui-monospace,monospace; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.key-stack { display: grid; justify-items: center; gap: 2px; }
.key-stack > span { display: flex; gap: 2px; }
.move-keys b, .interact-key b { color: #c9dce0; font-size: 11px; white-space: nowrap; }
.interact-key > kbd { min-width: 35px; height: 35px; color: #071018; border-color: #a9f2ff; background: var(--cyan); font-size: 14px; }
@keyframes control-coach-in { from { opacity: 0; transform: translate(-14px,8px); } }
@keyframes control-coach-out { to { opacity: 0; transform: translate(-10px,5px); } }

.toast-region { position: absolute; z-index: 40; top: 94px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(420px, calc(100vw - 30px)); pointer-events: none; }
.toast { padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(99,229,255,.3); background: rgba(4,15,22,.94); box-shadow: var(--shadow); font-size: 12px; animation: toast-in .22s ease-out; }
.toast.warn { border-color: rgba(255,198,90,.55); color: #ffe0a3; }
.toast.danger { border-color: rgba(255,82,107,.7); color: #ffafba; }
.toast.good { border-color: rgba(85,239,189,.5); color: #aef7dc; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

.modal-backdrop { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: 88px 18px 18px; background: rgba(1, 6, 10, .66); backdrop-filter: blur(6px); }
.modal-backdrop.non-dimming { place-items: center end; padding-left: 410px; background: transparent; backdrop-filter: none; }
.modal-backdrop.non-dimming .modal-card { width: min(920px, calc(100vw - 430px)); }
.modal-bag { display: none; position: absolute; z-index: 2; top: 96px; right: calc(min(920px, calc(100vw - 430px)) + 28px); width: clamp(210px, 16vw, 300px); max-height: calc(100vh - 116px); padding: 16px; overflow: auto; border-radius: 12px; }
.modal-bag-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #e7f7fa; font-size: 14px; font-weight: 900; letter-spacing: 1.2px; }
.modal-bag-title b { color: var(--cyan); font: 900 13px ui-monospace,monospace; }
.modal-bag-title.recovery { margin-top: 18px; padding-top: 14px; color: #ffe0a3; border-top: 1px solid var(--line); }
.modal-bag-items { display: grid; gap: 7px; margin-top: 11px; }
.modal-bag-items em { color: #b4c8ce; font-size: 12px; font-style: normal; }
.modal-bag-chip { min-width: 0; padding: 10px; text-align: left; color: #effbfe; border: 1px solid rgba(99,229,255,.3); border-radius: 7px; background: rgba(99,229,255,.08); cursor: pointer; }
.modal-bag-chip strong { display: block; font: 900 12px/1.4 ui-monospace,monospace; overflow-wrap: anywhere; }
.modal-bag-chip span { display: block; margin-top: 5px; color: #b9ccd1; font-size: 12px; line-height: 1.4; }
.modal-bag-chip.returnable:hover { border-color: var(--green); background: rgba(85,239,189,.1); }
.modal-bag-chip.blocked { opacity: .42; cursor: not-allowed; }
.modal-bag-chip.recovered { border-color: rgba(255,198,90,.42); background: rgba(255,198,90,.08); }
@media (min-width: 1580px) {
  .modal-backdrop.with-modal-bag .modal-bag { display: block; }
}
.modal-card { width: min(920px, 96vw); max-height: calc(100vh - 110px); border-radius: 14px; overflow: hidden; }
.modal-head { display: flex; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.modal-head > div { flex: 1; }
.modal-head small { color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: 1.5px; }
.modal-head h2 { margin: 3px 0 0; font-size: 18px; }
.close-button { width: 35px; height: 35px; border-radius: 8px; font-size: 23px; }
.modal-content { padding: 18px; max-height: calc(100vh - 182px); overflow: auto; }
.section-label { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; color: #bfd2d7; font-size: 12px; font-weight: 900; letter-spacing: 1px; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.item-card, .device-card { position: relative; padding: 11px; min-height: 78px; text-align: left; color: var(--text); background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.item-card:hover, .device-card:hover { border-color: rgba(99,229,255,.52); background: rgba(99,229,255,.055); }
.item-card strong, .device-card strong { display: block; font: 800 13px/1.35 ui-monospace, monospace; overflow-wrap: anywhere; }
.item-card span, .device-card span { display: block; margin-top: 7px; color: #b8cbd0; font-size: 12px; line-height: 1.45; }
.item-card .swatch { position: absolute; top: 12px; right: 10px; width: 6px; height: 26px; border-radius: 2px; }
.item-card.disabled { opacity: .38; cursor: not-allowed; }
.carried-count { position: absolute; right: 20px; bottom: 8px; padding: 3px 7px; color: #071116; background: var(--cyan); border-radius: 8px; font: 900 11px ui-monospace,monospace; font-style: normal; }
.cable-length-guide { margin: 10px 0 15px; color: var(--amber); font-size: 12px; line-height: 1.55; }
.cable-length-guide p { margin: 1px 0; }
.cable-length-guide strong { font-size: 13px; }
.cable-length-guide span { color: #ffd98b; }
.cable-length-guide b { color: #ffe2a1; font: 900 12px ui-monospace,monospace; }
.item-card.tutorial-answer { border-color: var(--amber); background: rgba(255,198,90,.1); box-shadow: inset 3px 0 var(--amber); }
.tutorial-answer-label { display: block; margin-bottom: 6px; color: var(--amber); font: 900 10px ui-monospace,monospace; font-style: normal; letter-spacing: .06em; }
.shop-balance { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 14px 16px; border: 1px solid rgba(99,229,255,.35); background: rgba(99,229,255,.06); }
.shop-balance span { color: var(--muted); font-size: 12px; }
.shop-balance strong { color: var(--cyan); font: 900 20px ui-monospace,monospace; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 9px; }
.shop-card { position: relative; min-height: 132px; padding: 13px; text-align: left; color: var(--text); border: 1px solid #31464e; border-radius: 8px; background: linear-gradient(145deg,rgba(99,229,255,.06),rgba(255,255,255,.018)); cursor: pointer; }
.shop-card:hover { border-color: rgba(99,229,255,.65); }
.shop-card.disabled { opacity: .42; cursor: not-allowed; }
.shop-card.purchased { border-color: rgba(85,239,189,.4); background: rgba(85,239,189,.055); }
.shop-kind { color: var(--cyan); font: 800 11px ui-monospace,monospace; letter-spacing: .12em; }
.shop-card strong { display: block; margin-top: 8px; font-size: 13px; }
.shop-card p { min-height: 32px; margin: 7px 0 12px; color: #bfd0d5; font-size: 12px; line-height: 1.5; }
.shop-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-card footer b { color: #ffe09a; font: 900 13px ui-monospace,monospace; }
.shop-card footer i { color: var(--green); font-size: 12px; font-style: normal; }
.shop-color { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.46); border-radius: 6px; background: var(--shop-color); box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.wardrobe-section { margin-top: 18px; }
.wardrobe-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 8px; }
.wardrobe-item { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); cursor: pointer; }
.wardrobe-item.equipped { border-color: var(--cyan); background: rgba(99,229,255,.09); box-shadow: inset 3px 0 var(--cyan); }
.wardrobe-item strong { font-size: 12px; text-align: left; }
.cosmetic-swatch { flex: 0 0 auto; width: 30px; height: 30px; border: 2px solid rgba(255,255,255,.34); border-radius: 6px; background: var(--swatch); }
.cosmetic-swatch.none { background: linear-gradient(135deg,transparent 45%,#ff667c 47% 53%,transparent 55%); }
.rack-elevation { display: grid; gap: 3px; padding: 10px; background: #111719; border: 5px solid #596265; box-shadow: inset 0 0 0 2px #252e31; }
.rack-device { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 12px; min-height: 48px; border-radius: 2px; background: linear-gradient(90deg,#293438,#111719); }
.rack-device b { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 58px; min-height: 27px; padding: 0 8px; color: #f2fbfc; background: #0a1216; border: 1px solid #52686f; border-radius: 4px; font: 900 14px/1 ui-monospace,monospace; letter-spacing: .02em; text-shadow: 0 1px 3px #000; }
.rack-device strong { margin: 0; font-size: 13px; }
.rack-device span { margin: 0; color: #d0e0e4; font-size: 12px; }
.rack-device.has-alarm { border-color: #d9a143; box-shadow: inset 4px 0 #d9a143; }
.inventory-tabs, .panel-tabs { display: flex; gap: 6px; margin-bottom: 13px; }
.tab-button { padding: 9px 12px; color: #bfd0d5; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 12px; }
.tab-button.active { color: #061119; background: var(--cyan); border-color: var(--cyan); font-weight: 800; }

.faceplate { padding: 13px; border-radius: 8px; background: linear-gradient(#b7bdc2, #7d858c 48%, #5d666d 52%, #9fa8ae); border: 2px solid #343c42; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), 0 12px 24px rgba(0,0,0,.3); }
.faceplate-brand { display: flex; justify-content: space-between; color: #11191e; font: 900 11px ui-monospace, monospace; margin-bottom: 8px; }
.port-bank { margin-top: 8px; padding: 8px; overflow-x: auto; background: rgba(21,28,31,.32); border: 1px solid rgba(24,31,34,.28); }
.port-bank-label { margin-bottom: 7px; color: #172126; font: 800 11px ui-monospace, monospace; letter-spacing: .35px; }
.ports { display: grid; grid-template-columns: repeat(18, minmax(20px, 1fr)); gap: 8px 4px; }
.fixed-qsfp .ports { grid-template-columns: repeat(18, minmax(30px, 1fr)); min-width: 610px; }
.faceplate.fixed-mixed { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 8px; }
.fixed-mixed .faceplate-brand { grid-column: 1 / -1; }
.fixed-mixed .port-bank { margin-top: 0; }
.fixed-mixed .port-bank:nth-of-type(2) .ports { grid-template-columns: repeat(24, minmax(17px, 1fr)); }
.fixed-mixed .port-bank:last-child .ports { grid-template-columns: repeat(3, minmax(42px, 1fr)); }
.ports.chassis { grid-template-columns: repeat(20, minmax(24px, 1fr)); min-width: 610px; }
.equipment-reference { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.18); }
.equipment-reference summary { color: #bfd0d5; font-size: 12px; font-weight: 800; cursor: pointer; }
.equipment-reference img { display: block; width: 100%; max-height: 440px; margin-top: 9px; object-fit: contain; background: white; }
.port { position: relative; height: 30px; padding: 0; background: #172127; border: 2px solid #424d53; border-radius: 2px; color: #e2ecef; font: 800 11px ui-monospace, monospace; cursor: pointer; box-shadow: inset 0 0 8px #000; }
.port-sfp { height: 23px; }
.port span { pointer-events: none; }
.port::before { content: ''; position: absolute; width: 4px; height: 4px; top: -6px; right: 2px; border-radius: 50%; background: #4cf4ab; box-shadow: 0 0 5px #4cf4ab; }
.port.led-green::before { background: #4cf4ab; box-shadow: 0 0 5px #4cf4ab; }
.port.led-amber::before { background: #edaa3a; box-shadow: 0 0 5px #edaa3a; }
.port.led-off::before { background: #252c2e; box-shadow: none; border: 1px solid #111719; }
.port.selected { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(99,229,255,.35), inset 0 0 8px #000; }
.device-inspector { margin-top: 14px; display: grid; grid-template-columns: minmax(210px, .7fr) 1.3fr; gap: 12px; }
.diagnostics, .actions { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.18); }
.diag-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.045); font-size: 12px; }
.diag-row span { color: var(--muted); }
.diag-row b { font: 800 12px ui-monospace, monospace; text-align: right; }
.status-up { color: var(--green); }
.status-down { color: var(--red); }
.laser-on { color: #8eeac7; text-shadow: 0 0 7px rgba(85,239,189,.45); }
.meter-locked b { color: #f0c574; }
.meter-action { border-color: rgba(240,197,116,.5); color: #ffe0a1; background: rgba(240,197,116,.08); }
.led-indicator { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
.led-indicator.led-green { background: #4cf4ab; box-shadow: 0 0 6px #4cf4ab; }
.led-indicator.led-amber { background: #edaa3a; box-shadow: 0 0 6px #edaa3a; }
.led-indicator.led-off { background: #293033; border: 1px solid #14191b; }
.cable-label { margin-top: 10px; padding: 9px; color: #202326; background: #d7cfad; border-left: 5px solid #a8914e; transform: rotate(-.3deg); }
.cable-label span { display: block; font-size: 12px; letter-spacing: .8px; }
.cable-label b { display: block; margin-top: 4px; font: 800 12px ui-monospace,monospace; overflow-wrap: anywhere; }
.panel-note, .action-guidance { color: #b9cbd0; font-size: 12px; line-height: 1.7; }
.action-guidance { margin: 0 0 11px; }
.tool-shelf { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.key-cabinet-launch { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; align-items: center; width: 100%; margin-top: 14px; padding: 14px 16px; color: var(--text); text-align: left; border: 1px solid rgba(99,229,255,.38); border-radius: 9px; background: linear-gradient(135deg,rgba(99,229,255,.09),rgba(255,255,255,.02)); cursor: pointer; }
.key-cabinet-launch:hover { border-color: var(--cyan); background: rgba(99,229,255,.12); }
.key-cabinet-launch span { grid-column: 1; color: var(--cyan); font: 800 10px ui-monospace,monospace; letter-spacing: .13em; }
.key-cabinet-launch strong { grid-column: 1; margin-top: 4px; font-size: 17px; }
.key-cabinet-launch em { grid-column: 1; margin-top: 5px; color: #b9cbd0; font-size: 12px; font-style: normal; }
.key-cabinet-launch b { grid-column: 2; grid-row: 1 / 4; color: #dffbff; font-size: 13px; }
.key-cabinet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.key-cabinet-toolbar .tab-button { margin: 0; }
.key-cabinet-toolbar span { color: #c6d9dd; font-size: 12px; }
.key-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.key-card { min-height: 72px; }
.key-card.return-item { padding-right: 62px; border: 2px solid #55efbd; background: linear-gradient(135deg,rgba(85,239,189,.16),rgba(85,239,189,.055)); box-shadow: 0 0 0 2px rgba(85,239,189,.08), inset 4px 0 #55efbd; }
.key-card.return-item:hover { border-color: #9fffdc; background: rgba(85,239,189,.22); box-shadow: 0 0 14px rgba(85,239,189,.18), inset 4px 0 #9fffdc; }
.key-card.return-item span { color: #d8fff1; font-weight: 800; }
.key-card.return-item::after { content: '반납'; position: absolute; top: 10px; right: 10px; padding: 4px 7px; color: #071611; background: #55efbd; border-radius: 10px; font: 900 11px ui-monospace,monospace; }
.key-cabinet-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.tool-placeholder { padding: 14px; border: 1px dashed var(--line); border-radius: 8px; background: rgba(255,255,255,.018); opacity: .55; }
.tool-placeholder strong, .tool-placeholder span { display: block; font-size: 12px; }
.tool-placeholder span { margin-top: 7px; color: var(--muted); font-size: 12px; }
.stock-divider { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.return-stock-label { margin-top: 0; color: var(--green); }
.return-stock { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.stock-return-area:not(:empty) { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(85,239,189,.22); }
.stock-return-area .return-stock { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.return-stock .return-item { min-height: 66px; border-color: rgba(85,239,189,.35); background: rgba(85,239,189,.06); }
.recovery-return { border-color: rgba(255,198,90,.36); background: rgba(255,198,90,.055); }
.recovery-return.faulty { border-color: rgba(255,82,107,.45); background: rgba(255,82,107,.065); }
.empty-storage { grid-column: 1 / -1; padding: 28px; color: #93aab1; border: 1px dashed var(--line); text-align: center; font-size: 12px; }
.adapter-stock .item-card:first-child { border-color: rgba(99,229,255,.5); background: rgba(99,229,255,.07); }
.action-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.action-button { padding: 10px 12px; color: var(--text); background: rgba(99,229,255,.07); border: 1px solid rgba(99,229,255,.25); border-radius: 7px; cursor: pointer; font-size: 12px; }
.action-button:hover { background: rgba(99,229,255,.14); }
.action-button.danger { border-color: rgba(255,82,107,.35); color: #ffb5bf; background: rgba(255,82,107,.07); }
.action-button:disabled { opacity: .3; cursor: not-allowed; }
.power-panel { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 10px; padding: 18px; border: 1px solid var(--line); background: #0a1014; }
.psu { padding: 13px; border: 1px solid #3c4c53; background: repeating-linear-gradient(90deg, #151f24 0 3px, #0d1418 3px 6px); }
.psu strong { font: 800 12px ui-monospace, monospace; }
.psu > small { display: block; margin: 4px 0 10px; color: #a9bec4; font-size: 12px; letter-spacing: .06em; }
.part-type-badge { display: inline-block; margin-right: 8px; padding: 3px 6px; border: 1px solid rgba(99,229,255,.5); color: #8beeff; background: rgba(99,229,255,.1); font: 900 11px ui-monospace,monospace; letter-spacing: .07em; vertical-align: 1px; }
.part-type-badge.cable { border-color: rgba(255,198,90,.56); color: #ffd37b; background: rgba(255,198,90,.1); }
.part-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.part-heading .part-type-badge { margin-right: 0; }
.power-cable-card { border-color: rgba(255,198,90,.42); background: #111517; }
.power-cable-graphic { display: grid; grid-template-columns: 18px 1fr 18px; align-items: center; margin: 10px 0; }
.power-cable-graphic i { width: 18px; height: 15px; border: 2px solid #ffd06e; background: #2e291d; box-shadow: 0 0 8px rgba(255,198,90,.24); }
.power-cable-graphic i:first-child { border-radius: 3px 0 0 3px; }
.power-cable-graphic i:last-child { border-radius: 0 3px 3px 0; }
.power-cable-graphic b { height: 5px; background: repeating-linear-gradient(90deg,#d59f39 0 7px,#f2ca70 7px 11px); box-shadow: 0 0 7px rgba(255,198,90,.22); }
.power-cable-graphic.disconnected b { background: linear-gradient(90deg,#d59f39 0 42%,transparent 42% 58%,#d59f39 58%); box-shadow: none; }
.power-cable-graphic.disconnected i:last-child { transform: translateX(6px); opacity: .55; }
.power-state { margin: 10px 0; font: 800 12px ui-monospace, monospace; }
.power-cord { display: inline-block; width: 13px; height: 13px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); vertical-align: -2px; }
.power-cord.off { background: #3b454a; box-shadow: none; }
.module-stock-label { margin-top: 16px; }
.module-stock-label:first-child { margin-top: 0; }
.module-stock { margin-bottom: 8px; }
.module-bay { margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); background: #080f13; }
.module-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 8px; }
.hardware-module { min-width: 0; padding: 11px; border: 1px solid #34464d; background: repeating-linear-gradient(90deg, #152127 0 4px, #0e171b 4px 8px); }
.hardware-module header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.hardware-module header strong, .hardware-module header span { font: 800 12px ui-monospace,monospace; }
.hardware-module header span { color: var(--green); }
.hardware-module header i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }
.hardware-module small { display: block; min-height: 34px; margin: 8px 0; color: #c3d3d7; font: 12px/1.45 ui-monospace,monospace; overflow-wrap: anywhere; }
.hardware-module.faulty { border-color: rgba(255,82,107,.7); background: rgba(255,82,107,.07); }
.hardware-module.faulty header span { color: #ff8193; }
.hardware-module.faulty header i { background: #ff526b; box-shadow: 0 0 9px #ff526b; }
.hardware-module.empty { border-style: dashed; opacity: .82; }
.hardware-module.empty header span { color: var(--muted); }
.hardware-module.empty header i { background: #58666b; box-shadow: none; }
.hardware-module .action-button { width: 100%; }
.hardware-module.removing { border-color: rgba(255,198,90,.62); animation: module-working .7s ease-in-out infinite alternate; }
.power-feed-button { min-height: 46px; margin-bottom: 7px; touch-action: manipulation; font-weight: 800; }
.power-cable-card .power-feed-button { width: 100%; margin-bottom: 0; }
.module-removal-progress { position: relative; isolation: isolate; overflow: hidden; opacity: 1 !important; color: #ffe5ad; border-color: rgba(255,198,90,.72); }
.module-removal-progress i { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg,rgba(208,143,35,.62),rgba(255,198,90,.34)); transition: width .1s linear; }
.module-removal-progress span { position: relative; z-index: 1; }
@keyframes module-working { from { box-shadow: inset 0 0 0 rgba(255,198,90,0); } to { box-shadow: inset 0 0 18px rgba(255,198,90,.12); } }
.rear-power-label { margin-top: 20px; }
#cold-reboot-status { position: sticky; top: -18px; z-index: 8; margin: -18px -18px 14px; padding: 12px 18px; border-bottom: 1px solid currentColor; background: rgba(7,18,24,.96); box-shadow: 0 8px 20px rgba(0,0,0,.3); font-weight: 800; }

.result-card { text-align: center; padding: 10px 4px 4px; }
.result-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 13px; border: 1px solid rgba(85,239,189,.5); color: var(--green); border-radius: 50%; font-size: 28px; box-shadow: 0 0 30px rgba(85,239,189,.12); }
.result-card h3 { font-size: 22px; margin: 0; }
.result-card p { color: var(--muted); font-size: 12px; }
.resolution-cause { max-width: 580px; margin: 18px auto 0; padding: 13px 16px; text-align: left; background: rgba(85,239,189,.07); border-left: 3px solid var(--green); }
.resolution-cause span { display: block; color: var(--green); font: 900 12px ui-monospace,monospace; letter-spacing: 1.2px; }
.resolution-cause strong { display: block; margin-top: 5px; color: #dffbf1; font-size: 13px; line-height: 1.55; }
.diagnostic-result { max-width: 580px; margin: 10px auto 0; padding: 14px 16px; text-align: left; border: 1px solid rgba(99,229,255,.28); background: rgba(99,229,255,.055); }
.diagnostic-result span { display: block; color: var(--cyan); font: 900 12px ui-monospace,monospace; letter-spacing: 1px; }
.diagnostic-result p { margin: 7px 0 0; color: #d9e9ed; font-size: 13px; line-height: 1.7; }
.efficiency-result { max-width: 580px; margin: 10px auto 0; padding: 13px 16px; text-align: left; border: 1px solid rgba(255,198,90,.24); background: rgba(255,198,90,.055); }
.result-stars { margin-bottom: 7px; color: var(--amber); font-size: 24px; letter-spacing: 4px; text-shadow: 0 0 12px rgba(255,198,90,.25); }
.efficiency-result > b { color: #fff1cc; font-size: 12px; }
.efficiency-result p { margin: 6px 0; color: #d6e3e6; font: 12px/1.65 ui-monospace,monospace; }
.efficiency-result .length-penalty { padding: 6px 8px; color: #ffd27a; border-left: 2px solid var(--amber); background: rgba(255,198,90,.08); }
.efficiency-result > span { color: var(--amber); font-size: 12px; font-weight: 800; }
.result-numbers { display: flex; justify-content: center; gap: 40px; margin: 22px 0; }
.result-numbers span { display: block; color: var(--muted); font-size: 12px; }
.result-numbers b { display: block; margin-top: 5px; font: 900 18px ui-monospace, monospace; }
.primary-button { min-width: 220px; padding: 13px 18px; border: 0; color: #061017; background: var(--cyan); font-weight: 900; letter-spacing: .5px; cursor: pointer; box-shadow: 0 12px 35px rgba(99,229,255,.18); }
.primary-button b { margin-left: 24px; }
.continue-button { background: var(--green); box-shadow: 0 12px 35px rgba(76,244,171,.2); }
.pause-screen { position: absolute; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,8,12,.72); backdrop-filter: blur(5px); }
.pause-card { width: min(420px,100%); padding: 34px; border-radius: 14px; text-align: center; }
.pause-card > small { color: var(--cyan); font: 900 11px ui-monospace,monospace; letter-spacing: 2px; }
.pause-card h2 { margin: 10px 0 8px; font-size: 32px; }
.pause-card p { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
.stage-brief { max-width: 620px; margin: auto; padding: 12px 12px 4px; text-align: center; }
.stage-number { color: var(--cyan); font: 900 clamp(64px,10vw,112px)/.9 ui-monospace,monospace; letter-spacing: -6px; text-shadow: 0 0 30px rgba(99,229,255,.16); }
.stage-brief h3 { margin: 16px 0 8px; font-size: 23px; }
.stage-brief > p { color: #b0c6cc; font-size: 13px; line-height: 1.7; }
.stage-brief ol { max-width: 420px; margin: 18px auto; padding: 14px 18px 14px 42px; color: #d7e8ec; background: rgba(255,255,255,.025); border: 1px solid var(--line); text-align: left; font-size: 12px; line-height: 1.9; }
.brief-warning { margin: 18px 0; padding: 12px; color: #ffe3aa; background: rgba(255,198,90,.07); border-left: 3px solid var(--amber); font-size: 12px; line-height: 1.65; }
.stage-event-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.stage-event-list span { display: flex; gap: 10px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--event-color), transparent 55%); background: color-mix(in srgb, var(--event-color), transparent 91%); color: #dce8e9; }
.stage-event-list b { color: var(--event-color); }
.environment-block { padding: 28px; text-align: center; border: 1px solid rgba(216,192,138,.35); background: rgba(216,192,138,.06); }
.environment-block h3 { margin: 8px 0; font-size: 22px; }
.environment-block p { margin: 8px auto 18px; max-width: 560px; color: #aebfc4; line-height: 1.6; }
.environment-icon { color: #e4c88e; font-size: 42px; }
.dust-modal-timer { margin: 15px auto; color: #fff0bd; font: 900 42px/1 ui-monospace,monospace; text-shadow: 0 0 18px rgba(255,198,90,.34); }
.dust-modal-timer.urgent { color: #ffad68; animation: dust-pulse .8s ease-in-out infinite alternate; }
.dust-modal-timer.critical { color: #ff526b; animation: dust-pulse .32s ease-in-out infinite alternate; }
@keyframes dust-pulse { to { opacity: .58; transform: scale(1.035); } }
.cleaning-progress { height: 10px; margin: 20px auto 12px; max-width: 520px; overflow: hidden; border: 1px solid #52666c; background: #111b1f; }
.cleaning-progress i { display: block; height: 100%; background: linear-gradient(90deg,#d8c08a,#63e5ff); animation: cleaning-fill 6s linear forwards; }
@keyframes cleaning-fill { from { width: 0; } to { width: 100%; } }
.rack-door-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(255,143,112,.42); background: rgba(255,143,112,.08); color: #ffc0ae; }

.cover-screen { position: absolute; z-index: 60; inset: 0; overflow: hidden; display: grid; align-items: center; padding: 8vw; background: linear-gradient(100deg, rgba(3,10,15,.98) 0 47%, rgba(3,10,15,.55)), radial-gradient(circle at 75% 40%, #214656, #071018 65%); }
.cover-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(99,229,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(99,229,255,.16) 1px, transparent 1px); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg) scale(1.5) translateY(30%); }
.cover-copy { position: relative; z-index: 2; max-width: 570px; }
.eyebrow { color: var(--cyan); font: 800 12px ui-monospace, monospace; letter-spacing: 3px; }
.cover-copy h1 { margin: 12px 0 20px; font-size: clamp(60px, 10vw, 128px); line-height: .82; letter-spacing: -7px; }
.cover-copy h1 span { color: var(--cyan); }
.cover-copy p { margin: 0 0 24px; color: #aac2c9; font-size: clamp(15px, 2vw, 21px); line-height: 1.65; }
.cover-features { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 32px; }
.cover-features span { padding: 7px 9px; border: 1px solid rgba(99,229,255,.22); color: #bed2d7; font-size: 12px; letter-spacing: .35px; }
.current-player { display: flex; align-items: center; gap: 7px; width: min(430px,100%); margin: -8px 0 18px; color: #8fa6ad; font-size: 12px; }
.current-player strong { color: #e3f3f6; }
.current-player span { margin-left: auto; padding-left: 10px; color: var(--cyan); border-left: 1px solid rgba(99,229,255,.2); font-size: 11px; }
.cover-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 9px; }
.secondary-button { min-width: 150px; padding: 12px 16px; color: #dff9fd; border: 1px solid rgba(99,229,255,.42); background: rgba(99,229,255,.07); font-weight: 800; cursor: pointer; }
.secondary-button:hover { color: #071018; background: var(--cyan); }
.settings-button { min-width: 74px; }
.control-hint { display: block; margin-top: 13px; color: #a9c0c7; font-size: 12px; }
.cover-art { position: absolute; right: 6vw; top: 17%; width: 42vw; height: 68%; opacity: .76; transform: skewY(-4deg); }
.rack-art { position: absolute; width: 30%; height: 78%; bottom: 0; background: repeating-linear-gradient(0deg, #121e25 0 14px, #42606b 15px, #17242b 17px); border: 4px solid #607783; box-shadow: 22px 22px 60px #000; }
.rack-art::after { content: ''; position: absolute; inset: 5%; background: radial-gradient(circle, #58f0bc 0 2px, transparent 3px); background-size: 20px 17px; opacity: .6; }
.rack-art.r1 { left: 14%; }
.rack-art.r2 { right: 10%; height: 92%; }
.optic-art { position: absolute; left: 28%; top: 30%; width: 48%; height: 17%; background: linear-gradient(#9ba9ad, #3d4b51); border: 3px solid #bac5c7; transform: rotate(-14deg); box-shadow: 12px 25px 30px rgba(0,0,0,.6); }
.optic-art::before { content: ''; position: absolute; right: -18%; top: 25%; width: 20%; height: 50%; background: #38464c; border: 2px solid #96a4a7; }
.optic-art::after { content: '100G'; position: absolute; left: 14%; top: 30%; color: #65eeff; font: 900 16px ui-monospace, monospace; letter-spacing: 3px; }

.gameover { align-items: start; padding: clamp(28px,5vw,72px); overflow-y: auto; background: radial-gradient(circle at 75% 45%, rgba(134,13,32,.3), #080b10 65%); }
.gameover .cover-copy { width: min(720px, 92vw); max-width: none; }
.eyebrow.danger { color: var(--red); }
.gameover .cover-copy h1 { margin: 10px 0 15px; font-size: clamp(58px,9vw,98px); line-height: .92; letter-spacing: -6px; white-space: nowrap; }
.gameover .cover-copy h1 span { color: var(--red); }
.gameover .cover-copy > p { max-width: 680px; margin-bottom: 18px; font-size: clamp(14px,1.7vw,18px); line-height: 1.55; }
.death-line { position: absolute; left: 58%; top: -10%; width: 2px; height: 130%; background: var(--red); box-shadow: 0 0 34px var(--red); transform: rotate(24deg); }
.death-stats { margin: 22px 0; font: 700 12px ui-monospace, monospace; color: #ff94a3; }
.death-stat-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.death-stat-row span { padding: 11px 12px; border: 1px solid rgba(255,82,107,.22); background: rgba(255,82,107,.055); text-align: center; }
.career-mistakes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-width: 720px; margin: 0 0 12px; padding: 0; list-style: none; }
.career-mistakes::before { content: '중대 실수 기록'; grid-column: 1 / -1; color: #ffb7c2; font: 900 12px ui-monospace,monospace; letter-spacing: 1px; }
.career-mistakes li { display: grid; gap: 6px; min-width: 0; padding: 11px 13px; border: 1px solid rgba(255,82,107,.26); border-left: 3px solid var(--red); background: rgba(255,82,107,.09); }
.career-mistakes b { color: #ffd5dc; }
.career-mistakes span { color: #ff9aaa; line-height: 1.45; overflow-wrap: anywhere; }
.gameover .cover-actions { margin-top: 18px; }
.danger-button { color: white; background: var(--red); box-shadow: 0 12px 35px rgba(255,82,107,.2); }
.danger-secondary { color: #ffc2cb; border-color: rgba(255,82,107,.42); background: rgba(255,82,107,.07); }
.danger-secondary:hover { color: white; background: var(--red); }

.leaderboard-screen { position: absolute; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,8,12,.82); backdrop-filter: blur(10px); }
.leaderboard-card { width: min(920px,100%); max-height: min(780px,calc(100vh - 40px)); overflow: hidden; border-radius: 14px; }
.leaderboard-card > header { display: flex; align-items: center; gap: 14px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.leaderboard-card > header > div { flex: 1; }
.leaderboard-card > header small { color: var(--cyan); font: 900 11px ui-monospace,monospace; letter-spacing: 1.7px; }
.leaderboard-card > header h2 { margin: 3px 0 0; font-size: 20px; }
.leaderboard-card .close-button { width: 36px; height: 36px; border-radius: 8px; font-size: 22px; }
.leaderboard-body { min-height: 270px; max-height: calc(100vh - 145px); padding: 14px 18px; overflow: auto; }
.leaderboard-loading, .leaderboard-empty, .leaderboard-error { display: grid; place-items: center; min-height: 230px; color: var(--muted); text-align: center; }
.leaderboard-error { color: #ffabb8; }
.leaderboard-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 12px; }
.leaderboard-table th { padding: 0 11px 5px; color: #8fa8af; font-size: 10px; letter-spacing: .8px; text-align: left; }
.leaderboard-table th:not(:nth-child(2)), .leaderboard-table td:not(:nth-child(2)) { text-align: right; }
.leaderboard-table td { padding: 12px 11px; color: #dcecef; background: rgba(255,255,255,.035); border-top: 1px solid rgba(139,211,229,.12); border-bottom: 1px solid rgba(139,211,229,.12); }
.leaderboard-table td:first-child { width: 54px; color: var(--amber); border-left: 2px solid transparent; border-radius: 7px 0 0 7px; font: 900 14px ui-monospace,monospace; }
.leaderboard-table td:last-child { border-radius: 0 7px 7px 0; }
.leaderboard-table tr.current td { background: rgba(99,229,255,.09); border-color: rgba(99,229,255,.32); }
.leaderboard-table tr.current td:first-child { border-left-color: var(--cyan); }
.leaderboard-name { color: white; font-weight: 800; }
.leaderboard-player { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.leaderboard-player > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-avatar { display: inline-grid; flex: 0 0 34px; width: 34px; height: 48px; place-items: center; border: 1px solid rgba(99,229,255,.18); border-radius: 7px; background: rgba(2,10,14,.45); }
.leaderboard-avatar svg { display: block; width: 30px; height: 45px; }
.leaderboard-score { color: var(--cyan); font: 900 13px ui-monospace,monospace; }
.leaderboard-delete { padding: 5px 8px; color: #ff9dac; border: 1px solid rgba(255,82,107,.3); border-radius: 5px; background: rgba(255,82,107,.06); cursor: pointer; }
.profile-action { padding: 8px 10px; color: #cde8ed; border: 1px solid rgba(139,211,229,.24); border-radius: 6px; background: rgba(255,255,255,.035); font-size: 11px; font-weight: 800; cursor: pointer; }
.profile-action:hover { border-color: var(--cyan); }

.settings-screen { position: absolute; z-index: 85; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,8,12,.82); backdrop-filter: blur(10px); }
.settings-card { width: min(700px,100%); max-height: min(760px,calc(100vh - 40px)); overflow: hidden; border-radius: 14px; }
.settings-card > header { display: flex; align-items: center; gap: 14px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.settings-card > header > div { flex: 1; }
.settings-card > header small, .settings-section-head small { color: var(--cyan); font: 900 10px ui-monospace,monospace; letter-spacing: 1.4px; }
.settings-card > header h2 { margin: 3px 0 0; font-size: 20px; }
.settings-body { display: grid; gap: 12px; max-height: calc(100vh - 118px); padding: 16px; overflow: auto; }
.settings-section { padding: 16px; border: 1px solid rgba(139,211,229,.18); background: rgba(255,255,255,.025); }
.settings-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.settings-section-head h3 { margin: 3px 0 0; font-size: 16px; }
#settings-account-state { padding: 5px 8px; color: #99adb3; border: 1px solid rgba(139,211,229,.16); font-size: 10px; }
#settings-account-state.connected { color: var(--green); border-color: rgba(85,239,189,.35); }
.settings-account-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: end; gap: 9px; }
.settings-account-form label { display: grid; gap: 6px; color: #b8ccd1; font-size: 11px; }
.settings-account-form input { min-width: 0; height: 39px; padding: 0 11px; color: #effcff; border: 1px solid rgba(139,211,229,.28); border-radius: 6px; outline: none; background: rgba(0,0,0,.3); font: 700 13px ui-monospace,monospace; }
.settings-account-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(99,229,255,.1); }
.settings-account-form .profile-action { height: 39px; }
.settings-help { margin: 10px 0 0; color: #8fa6ad; font-size: 11px; line-height: 1.5; }
.settings-help.error { color: #ff9dac; }
.settings-account-connected { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid rgba(85,239,189,.22); background: rgba(85,239,189,.05); }
.settings-account-connected strong { flex: 1; color: #e8f9f4; }
.mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mode-option { display: grid; gap: 7px; padding: 13px; color: #dcebee; border: 1px solid rgba(139,211,229,.18); background: rgba(0,0,0,.2); text-align: left; cursor: pointer; }
.mode-option b { font-size: 13px; }
.mode-option span { color: #8fa7ad; font-size: 11px; line-height: 1.45; }
.mode-option.selected { border-color: var(--cyan); background: rgba(99,229,255,.08); box-shadow: inset 3px 0 var(--cyan); }
.mode-option.selected b { color: var(--cyan); }

.joystick, .touch-interact { display: none; }

@media (max-width: 820px) {
  .gameover .cover-copy h1 { white-space: normal; }
  .career-mistakes { grid-template-columns: 1fr; }
  .topbar { left: 8px; right: 8px; top: max(7px, env(safe-area-inset-top)); height: 53px; padding: 0 9px; }
  .brand { min-width: 100px; }
  .brand-mark { width: 31px; height: 31px; font-size: 11px; }
  .brand strong { font-size: 13px; }
  .brand small { display: none; }
  .stats { gap: 10px; }
  .stats > div { min-width: auto; }
  .stats span { font-size: 11px; }
  .stats b { font-size: 13px; }
  .stage-stat > div { gap: 5px; }
  .stage-stat small { font-size: 11px; }
  .stats > div:nth-child(3) { display: none; }
  .icon-button { width: 31px; height: 31px; }
  .topbar-actions { gap: 4px; }
  .hud-action { width: 31px; height: 31px; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
  #save-button::after { content: '↥'; color: #d9e9ed; font-size: 16px; }
  #pause-button::after { content: 'Ⅱ'; color: #d9e9ed; font-size: 12px; font-weight: 900; }
  .task-panel { top: 68px; left: 8px; width: min(270px, calc(100vw - 16px)); max-height: 48vh; }
  .task-panel:not(.collapsed) { width: calc(100vw - 16px); }
  .task-panel.collapsed { width: 185px; }
  .bag { top: 68px; right: 8px; width: 170px; padding: 10px; }
  .dev-panel { right: 8px; bottom: 122px; width: 180px; }
  .bag-items { max-height: 55px; overflow: hidden; }
  .bag-chip { font-size: 12px; }
  .location-pill { bottom: calc(10px + env(safe-area-inset-bottom)); font-size: 12px; }
  .interaction-prompt { display: none; }
  .control-coach { left: 14px; bottom: calc(148px + env(safe-area-inset-bottom)); width: min(300px,calc(100vw - 28px)); }
  .joystick { display: block; position: absolute; z-index: 15; left: 22px; bottom: calc(25px + env(safe-area-inset-bottom)); width: 112px; height: 112px; touch-action: none; }
  .joy-ring { position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(99,229,255,.27); background: rgba(5,16,22,.58); }
  .joy-knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(99,229,255,.5); background: rgba(99,229,255,.18); box-shadow: 0 0 20px rgba(99,229,255,.12); }
  .touch-interact { display: grid; place-items: center; position: absolute; z-index: 15; right: 27px; bottom: calc(37px + env(safe-area-inset-bottom)); width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(99,229,255,.45); color: var(--cyan); background: rgba(5,16,22,.74); touch-action: manipulation; }
  .touch-interact span { display: block; font: 900 20px ui-monospace, monospace; line-height: 1; }
  .touch-interact small { display: block; color: var(--muted); font-size: 11px; }
  .modal-backdrop { padding: 65px 7px 7px; }
  .modal-backdrop.non-dimming { place-items: center; padding: 65px 7px 7px; }
  .modal-backdrop.non-dimming .modal-card { width: 100%; }
  .modal-card { width: 100%; max-height: calc(100vh - 72px); }
  .modal-content { padding: 12px; max-height: calc(100vh - 135px); }
  .ports { grid-template-columns: repeat(9, minmax(22px, 1fr)); }
  .faceplate.fixed-mixed { grid-template-columns: 1fr; }
  .fixed-mixed .faceplate-brand { grid-column: 1; }
  .fixed-mixed .port-bank:nth-of-type(2) .ports { grid-template-columns: repeat(24, minmax(18px, 1fr)); min-width: 520px; }
  .fixed-mixed .port-bank:last-child .ports { grid-template-columns: repeat(3, minmax(42px, 1fr)); min-width: 150px; }
  .rack-device { grid-template-columns: 88px 1fr; }
  .rack-device span { grid-column: 2; }
  .device-inspector { grid-template-columns: 1fr; }
  .endpoint-grid { grid-template-columns: 1fr; }
  .nms-alarm-details { padding-left: 12px; }
  .cover-screen { padding: 11vw 8vw; }
  .cover-art { right: -12vw; opacity: .24; width: 70vw; }
  .cover-copy h1 { letter-spacing: -4px; }
  .cover-features { max-width: 280px; }
  .leaderboard-screen { padding: 7px; }
  .leaderboard-card { max-height: calc(100vh - 14px); }
  .leaderboard-body { max-height: calc(100vh - 86px); padding: 8px; }
  .leaderboard-table th:nth-child(5), .leaderboard-table td:nth-child(5) { display: none; }
  .leaderboard-table td { padding: 10px 7px; }
  .settings-screen { padding: 7px; }
  .settings-card { max-height: calc(100vh - 14px); }
  .settings-account-form, .mode-options { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .stats > div:nth-child(2) { display: none; }
  .bag { top: 68px; width: 145px; }
  .task-panel.collapsed { width: 166px; }
  .task-heading { min-height: 48px; padding: 8px 9px; }
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-card { min-height: 84px; padding: 9px; }
  .ports { grid-template-columns: repeat(6, minmax(24px, 1fr)); }
  .fixed-mixed .port-bank:nth-of-type(2) .ports { grid-template-columns: repeat(24, minmax(18px, 1fr)); }
  .fixed-mixed .port-bank:last-child .ports { grid-template-columns: repeat(3, minmax(42px, 1fr)); }
  .result-numbers { gap: 20px; }
  .cover-actions { display: grid; width: min(320px,100%); }
  .control-coach { padding: 11px 12px 12px; }
  .control-coach-row { gap: 10px; }
  .move-keys { gap: 5px; padding-right: 10px; }
  .control-coach kbd { min-width: 22px; height: 21px; padding: 0 4px; }
  .cover-actions button { width: 100%; min-width: 0; }
  .leaderboard-table th:nth-child(4), .leaderboard-table td:nth-child(4) { display: none; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .topbar { height: 46px; }
  .task-panel, .bag { top: 60px; }
  .task-panel { max-height: 55vh; }
  .task-heading { min-height: 44px; }
  #task-body { max-height: 42vh; }
  .joystick { width: 90px; height: 90px; bottom: 8px; }
  .touch-interact { width: 64px; height: 64px; bottom: 18px; }
  .cover-copy h1 { font-size: 58px; }
  .cover-copy p { font-size: 13px; margin-bottom: 12px; }
  .cover-features { margin-bottom: 14px; }
}