/* E.D.I.T.H. 스타일 */
  :root {
    --bg: #05070a;
    --bg2: #0a0f16;
    --ink: #dfeaf2;
    --dim: #5c7688;
    --accent: #4fd8ff;
    --accent-dim: #1c4a5c;
    --danger: #ff6b6b;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bg:#05070a; --ink:#dfeaf2; }
  }
  :root[data-theme="dark"] { --bg:#05070a; --ink:#dfeaf2; }

  * { box-sizing: border-box; }
  html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
    overflow: hidden;
  }
  body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    flex-direction: column;
  }
  #stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
    z-index: 3;
  }
  canvas { display: block; }
  #orb { transition: opacity 1.4s ease; }
  #stage.dormant #orb { opacity: 0.06; }
  #stage.dormant .hudCorner,
  #stage.dormant #hudClock,
  #stage.dormant #hudStatus,
  #stage.dormant .status { opacity: 0.25; transition: opacity 1.4s ease; }
  #orb.booting { animation: orbBoot 1.6s cubic-bezier(.2,.8,.2,1); }
  @keyframes orbBoot {
    0% { opacity: 0; transform: scale(0.25); filter: brightness(2.6); }
    55% { opacity: 1; transform: scale(1.1); filter: brightness(1.6); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
  }

  /* ====== HUD 장식 (기능 없음, 분위기용) ====== */
  .hudCorner {
    position: fixed;
    width: 22px; height: 22px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 5;
  }
  .hudCorner.tl { top: calc(2.4% + env(safe-area-inset-top, 0px)); left: 3.5%; border-top: 1.5px solid var(--accent-dim); border-left: 1.5px solid var(--accent-dim); }
  .hudCorner.tr { top: calc(2.4% + env(safe-area-inset-top, 0px)); right: 3.5%; border-top: 1.5px solid var(--accent-dim); border-right: 1.5px solid var(--accent-dim); }
  .hudCorner.bl { bottom: calc(2.4% + env(safe-area-inset-bottom, 0px)); left: 3.5%; border-bottom: 1.5px solid var(--accent-dim); border-left: 1.5px solid var(--accent-dim); }
  .hudCorner.br { bottom: calc(2.4% + env(safe-area-inset-bottom, 0px)); right: 3.5%; border-bottom: 1.5px solid var(--accent-dim); border-right: 1.5px solid var(--accent-dim); }
  #hudClock {
    position: fixed;
    top: calc(3.2% + env(safe-area-inset-top, 0px));
    left: 7.5%;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--dim);
    z-index: 5;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  #hudStatus {
    position: fixed;
    bottom: calc(18% + env(safe-area-inset-bottom, 0px));
    left: 7.5%;
    right: 7.5%;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--dim);
    z-index: 5;
    pointer-events: none;
  }

  /* ====== 스캔 이펙트 (명령 처리 중) ====== */
  .scanBox {
    position: absolute;
    top: 50%; left: 50%;
    width: min(68vw, 68vh);
    height: min(68vw, 68vh);
    transform: translate(-50%, -50%);
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    border-radius: 50%;
    transition: opacity 0.25s ease;
  }
  .scanBox.on { opacity: 1; }
  .scanLine {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 14px 2px var(--accent);
    animation: scanSweep 1.3s linear infinite;
  }
  @keyframes scanSweep {
    0% { top: -5%; }
    100% { top: 105%; }
  }

  /* ====== 전력 경고 ====== */
  #powerWarn {
    position: fixed;
    top: calc(7% + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: #ffb24f;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  #powerWarn.on { opacity: 1; animation: powerWarnBlink 1.6s ease-in-out infinite; }
  @keyframes powerWarnBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* ====== 코드 레드 (긴급 모드) ====== */
  #codeRedOverlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    box-shadow: inset 0 0 0 0 rgba(255,40,40,0);
    transition: opacity 0.3s ease;
  }
  #codeRedOverlay.on {
    opacity: 1;
    animation: codeRedFlash 1.1s ease-in-out infinite;
  }
  @keyframes codeRedFlash {
    0%, 100% { box-shadow: inset 0 0 70px 10px rgba(255,30,30,0.55); background: rgba(255,0,0,0.04); }
    50% { box-shadow: inset 0 0 130px 30px rgba(255,30,30,0.85); background: rgba(255,0,0,0.1); }
  }
  #codeRedTag {
    position: fixed;
    top: calc(3.2% + env(safe-area-inset-top, 0px));
    right: 7.5%;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #ff4d4d;
    z-index: 31;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #codeRedTag.on { opacity: 1; animation: powerWarnBlink 0.9s ease-in-out infinite; }

  /* ====== 비전 스캔 (사진 설명) ====== */
  .visionBox {
    position: absolute;
    top: 50%; left: 50%;
    width: min(70vw, 70vh);
    height: min(70vw, 70vh);
    transform: translate(-50%, -50%) scale(0.9);
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.35s ease;
  }
  .visionBox.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .visionBox::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid #ffb24f;
    border-radius: 50%;
    opacity: 0.22;
  }
  .visionBox .reticleLine {
    position: absolute;
    left: 6%; right: 6%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffb24f, transparent);
    box-shadow: 0 0 14px 2px #ffb24f;
    animation: scanSweep 0.9s ease-in-out infinite alternate;
  }
  .visionBox .reticleCross {
    position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 22px;
    transform: translate(-50%, -50%);
    opacity: 0.85;
  }
  .visionBox .reticleCross::before, .visionBox .reticleCross::after {
    content: '';
    position: absolute;
    background: #ffb24f;
    box-shadow: 0 0 6px 1px #ffb24f;
  }
  .visionBox .reticleCross::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
  .visionBox .reticleCross::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
  .visionCorner {
    position: absolute;
    width: 11%; height: 11%;
    border: 2px solid #ffb24f;
    filter: drop-shadow(0 0 4px rgba(255,178,79,0.7));
    animation: visionCornerPulse 1.4s ease-in-out infinite;
  }
  .visionCorner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
  .visionCorner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
  .visionCorner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
  .visionCorner.br { bottom: 0; right: 0; border-left: none; border-top: none; }
  @keyframes visionCornerPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
  }
  .visionLabel {
    position: absolute;
    bottom: -8%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 0.15em;
    color: #ffb24f;
    white-space: nowrap;
    animation: powerWarnBlink 1.2s ease-in-out infinite;
  }

  .status {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--dim);
    text-align: center;
  }
  .status b { color: var(--accent); font-weight: 600; }

  .caption {
    position: absolute;
    bottom: 14%;
    left: 6%;
    right: 6%;
    text-align: center;
    min-height: 3.4em;
  }
  .caption .en {
    font-size: 17px;
    color: var(--ink);
    font-weight: 500;
  }
  .caption .ko {
    font-size: 13px;
    color: var(--dim);
    margin-top: 4px;
  }

  .actionLink {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    border: 1px solid var(--accent-dim);
    border-radius: 999px;
    background: rgba(79,216,255,0.08);
    color: var(--accent);
    font-size: 13px;
    text-decoration: none;
    position: relative;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
  }
  .actionLink[hidden] { display: none; }

  .controls {
    position: absolute;
    bottom: calc(9% + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    align-items: center;
    /* left:50%라 쓸 수 있는 폭이 화면 절반뿐이어서 안내 문구가 세로로 찌그러지던 문제 → 내용만큼 넓게 */
    width: max-content;
    max-width: calc(100vw - 32px);
    z-index: 999999;
  }
  .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--dim);
    transition: background .2s, box-shadow .2s;
  }
  .dot.live { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
  .hint {
    font-size: 11px;
    color: var(--dim);
    white-space: nowrap;
  }
  /* 폰 화면에선 버튼이 한 줄에 들어가도록 안내 문구 숨김 (부르는 법은 위쪽 상태 줄에 이미 있음) */
  @media (max-width: 480px) { .hint { display: none; } }

  button#micBtn {
    appearance: none;
    border: 1px solid var(--accent-dim);
    background: rgba(79,216,255,0.06);
    color: var(--accent);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    -webkit-tap-highlight-color: transparent;
  }
  button#micBtn:focus-visible { outline: 2px solid var(--accent); }

  button#gearBtn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--dim);
    font-size: 16px;
    padding: 6px 8px;
  }
  button#camBtn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--dim);
    font-size: 16px;
    padding: 6px 8px;
  }
  button#camBtn.active { color: var(--accent); }
  button#lensBtn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--dim);
    font-size: 17px;
    padding: 6px 8px;
  }
  button#heartBtn { appearance: none; border: none; background: transparent; color: var(--dim); font-size: 17px; padding: 6px 8px; }
  button#heartBtn:active, button#heartBtn.active { color: #ff5a6e; text-shadow: 0 0 8px rgba(255,90,110,0.7); }
  button#lensBtn.active { color: #ffb24f; text-shadow: 0 0 8px rgba(255,178,79,0.7); }
  button#typeBtn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--dim);
    font-size: 16px;
    padding: 6px 8px;
  }
  #typeSheet {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: flex-end;
    z-index: 999999;
  }
  #typeSheet[hidden] { display: none; }
  .typeBar {
    width: 100%;
    display: flex;
    gap: 10px;
    background: var(--bg2);
    border-top: 1px solid var(--accent-dim);
    border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  #typeInput {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--accent-dim);
    color: var(--ink);
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
  }
  #typeSendBtn, #typeCloseBtn {
    appearance: none;
    border: 1px solid var(--accent-dim);
    background: rgba(79,216,255,0.06);
    color: var(--accent);
    border-radius: 10px;
    padding: 0 16px;
    font-size: 14px;
  }
  #typeCloseBtn { color: var(--dim); background: transparent; }
  #handCanvas {
    display: none;
  }
  #powerOverlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 99999999;
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
  }
  #powerOverlay.on { display: flex; }
  #powerOverlay .powerDot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent-dim);
    animation: powerPulse 2.4s ease-in-out infinite;
  }
  @keyframes powerPulse {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.4); }
  }
  #handCanvas.on {
    display: block;
    position: fixed;
    top: calc(9% + env(safe-area-inset-top, 0px));
    left: 4%;
    right: 4%;
    bottom: calc(13% + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: auto;
    background: rgba(10, 15, 22, 0.4);
    border: 1px solid var(--accent-dim);
    border-radius: 18px;
    z-index: 15;
  }
  #engineTag {
    position: absolute;
    top: 3%;
    right: 5%;
    font-size: 10px;
    color: var(--dim);
    letter-spacing: 0.03em;
  }

  #settingsSheet {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: flex-end;
    z-index: 999999;
  }
  #settingsSheet[hidden] { display: none; }
  .sheetCard {
    width: 100%;
    background: var(--bg2);
    border-top: 1px solid var(--accent-dim);
    border-radius: 18px 18px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .sheetCard h2 { font-size: 16px; margin: 0 0 8px; color: var(--ink); }
  .sheetCard p { font-size: 13px; color: var(--dim); line-height: 1.5; margin: 0 0 10px; }
  .sheetCard a { color: var(--accent); font-size: 13px; display: inline-block; margin-bottom: 14px; }
  #keyInput, #accessCodeInput {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--accent-dim);
    color: var(--ink);
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    margin-bottom: 12px;
  }
  .sheetBtns { display: flex; gap: 10px; }
  .sheetBtns button {
    flex: 1;
    appearance: none;
    border: 1px solid var(--accent-dim);
    background: rgba(79,216,255,0.06);
    color: var(--accent);
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
  }
  #closeSheetBtn { color: var(--dim); background: transparent; }
  .engineStatus { margin-top: 10px !important; font-size: 12px !important; }
  #startOverlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 20;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
  }
  #startOverlay.hidden { display: none; }
  #startOverlay .orbIcon { font-size: 40px; }
  #startOverlay p { color: var(--dim); font-size: 14px; }
  #startOverlay b { color: var(--accent); }

  /* ====== 렌즈 화면 (HUD + 타겟 락) — 이디스 안경 미리보기 ====== */
  #lens { position: fixed; inset: 0; z-index: 40; background: #000; overflow: hidden; }
  #lens[hidden] { display: none; }
  #lensVideo, #lensCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  #lensVideo { object-fit: cover; }
  #lensCanvas { pointer-events: none; }
  #lens::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,10,20,0.55) 100%);
  }
  .lensTop {
    position: absolute; z-index: 2;
    top: calc(env(safe-area-inset-top, 0px) + 12px); left: 16px; right: 16px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    font: 600 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em;
    color: var(--accent); text-shadow: 0 0 6px rgba(79,216,255,0.6), 0 1px 2px #000;
    font-variant-numeric: tabular-nums;
  }
  #lensMode { color: #ffb24f; text-shadow: 0 0 6px rgba(255,178,79,0.6), 0 1px 2px #000; }
  #lensHeading { cursor: pointer; }
  .lensInfo {
    position: absolute; z-index: 2;
    left: 16px; top: calc(env(safe-area-inset-top, 0px) + 44px);
    max-width: min(60vw, 320px);
    display: grid; gap: 8px; padding: 10px 12px;
    font-size: 13px; line-height: 1.4; color: var(--ink);
    background: rgba(5,10,16,0.5); border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .lensInfo .k { display: block; font: 600 10px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 2px; }
  .lensInfo .v { overflow-wrap: anywhere; }
  .lensInfo { transition: opacity 0.3s ease; }
  #lens.targeting .lensInfo { opacity: 0.35; } /* 타겟 락 중엔 이름표가 가려지지 않게 흐리게 */
  .lensBtns {
    position: absolute; z-index: 2;
    right: 16px; top: calc(env(safe-area-inset-top, 0px) + 44px);
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  }
  .lensBtns button {
    appearance: none; border: 1px solid var(--accent-dim); background: rgba(5,10,16,0.6);
    color: var(--accent); border-radius: 999px; padding: 8px 14px;
    font: 600 12px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.06em;
    -webkit-tap-highlight-color: transparent;
  }
  .lensBtns button:focus-visible { outline: 2px solid var(--accent); }
  #lensTargetBtn.on { color: #031018; background: #ffb24f; border-color: #ffb24f; }
  #lensCap {
    position: absolute; z-index: 2;
    left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 9% + 64px); /* 아래 버튼 줄 위에 */
    text-align: center; font-size: 15px; line-height: 1.45; color: #fff;
    text-shadow: 0 1px 4px #000, 0 0 12px rgba(0,0,0,0.8);
  }

  /* ====== 경계 모드 (스파이더 센스) ====== */
  #sentry { position: fixed; inset: 0; z-index: 45; overflow-y: auto;
    background: radial-gradient(ellipse at 50% 0%, #2a0a12 0%, #0a0306 55%, #030102 100%); color: var(--ink); }
  #sentry[hidden] { display: none; }
  .sWrap { max-width: 520px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 120px); display: grid; gap: 12px; }
  #sentry .sBar { display: flex; justify-content: space-between; align-items: center; }
  .sKicker { font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.18em; color: #ff5a6e; text-shadow: 0 0 8px rgba(255,90,110,0.6); }
  #sentry button { appearance: none; -webkit-tap-highlight-color: transparent; font-family: inherit; }
  #sentryCloseBtn, #sentryMotionBtn, #sentrySirenBtn, #sentrySilentBtn, #sentryDimBtn, #sentryClearBtn {
    border: 1px solid rgba(255,90,110,0.45); background: rgba(20,4,8,0.6); color: #ff8a98; border-radius: 999px; padding: 8px 12px; font-size: 12px; }
  #sentryMotionBtn { justify-self: start; border-color: #ffb24f; color: #ffcf8a; animation: powerWarnBlink 1.4s ease-in-out infinite; }
  #sentryMotionBtn[hidden] { display: none; }
  #sentryState { font: 700 15px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 0.08em; color: #ffcf8a; text-wrap: balance; }
  #sentryState.armed { color: #ff5a6e; text-shadow: 0 0 12px rgba(255,90,110,0.7); animation: powerWarnBlink 2s ease-in-out infinite; }
  #sentrySensors { display: grid; gap: 8px; }
  .sCard { display: grid; gap: 6px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,90,110,0.3); background: rgba(30,6,12,0.55); color: var(--ink); }
  .sCard.off { opacity: 0.45; }
  .sName { font-size: 15px; font-weight: 600; }
  .sName em { font-style: normal; font-size: 11px; color: #ffb24f; border: 1px solid rgba(255,178,79,0.5); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
  .sCard .sBar { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
  .sCard .sBar::after { content: ''; position: absolute; top: 0; bottom: 0; left: 70%; width: 2px; background: rgba(255,178,79,0.8); } /* 경보 기준선 */
  .sCard .sBar i { display: block; height: 100%; width: 0; background: #4fd8ff; transition: width 0.12s linear; }
  .sCard .sBar i.hot { background: #ff5a6e; box-shadow: 0 0 8px #ff5a6e; }
  .sNote { font-size: 12px; color: #c99aa3; }
  .sRow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  #sentrySens { display: flex; padding: 3px; gap: 3px; border: 1px solid rgba(255,90,110,0.35); border-radius: 10px; }
  #sentrySens button { border: none; background: transparent; color: #c99aa3; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
  #sentrySens button.on { background: rgba(255,90,110,0.18); color: #ffb3bd; }
  #sentrySirenBtn.on { background: rgba(255,90,110,0.25); color: #fff; }
  #sentrySilentBtn.on { background: rgba(160,160,180,0.22); color: #fff; }
  .sLogHead { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #c99aa3; margin-top: 4px; }
  #sentryLog { display: grid; gap: 4px; }
  .sLogRow { display: flex; gap: 10px; font-size: 14px; padding: 6px 10px; border-left: 2px solid #ff5a6e; background: rgba(30,6,12,0.45); border-radius: 0 8px 8px 0; }
  .sLogRow.sound { border-color: #ffb24f; } .sLogRow.shake { border-color: #4fd8ff; }
  .sLogTime { font-family: ui-monospace, Menlo, monospace; color: #c99aa3; font-variant-numeric: tabular-nums; }
  #sentryRemote { display: grid; gap: 6px; }
  #sentryRemoteBtn { justify-self: start; font: inherit; font-size: 14px; color: #9fe8ff; background: rgba(40,120,160,0.15); border: 1px solid rgba(120,220,255,0.45); border-radius: 999px; padding: 8px 14px; }
  #sentryRemoteBtn.on { background: rgba(40,140,190,0.4); color: #fff; }
  #sentryRemoteInfo { font-size: 13px; color: #9fc8d8; }
  #sentryRemoteInfo b { font: 800 22px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 0.18em; color: #fff; text-shadow: 0 0 10px rgba(120,220,255,0.8); }
  #remoteCodeInput { flex: 1; min-width: 0; font: 700 18px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(120,220,255,0.4); border-radius: 12px; padding: 10px 12px; }
  #remoteBadge { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + 40px); left: 50%; transform: translateX(-50%); white-space: nowrap;
    font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.05em; color: #9fe8ff; background: rgba(4,20,30,0.75); border: 1px solid rgba(120,220,255,0.4); border-radius: 999px; padding: 4px 10px; }
  #remoteBadge[hidden] { display: none; }
  #remoteBadge.armed { color: #ff8a9a; border-color: rgba(255,90,110,0.6); }
  #remoteBadge.lost { color: #ffcf8a; border-color: rgba(255,178,79,0.6); animation: powerWarnBlink 1.4s ease-in-out infinite; }
  #remoteAlert { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; text-align: center; gap: 8px; pointer-events: none;
    background: rgba(120,0,15,0.35); box-shadow: inset 0 0 120px 30px rgba(255,30,50,0.75); }
  #remoteAlert[hidden] { display: none; }
  #remoteAlert.flash { animation: sentryGlitch 0.5s steps(2) 6; }
  #sentryEar { font-size: 13px; color: #9fe8ff; border: 1px solid rgba(120,220,255,0.45); border-radius: 8px; padding: 6px 10px; background: rgba(40,120,160,0.15); }
  #sentryEar[hidden] { display: none; }
  .sMuted { font-size: 13px; color: #8a6870; }
  #sentryAlert { position: fixed; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; gap: 8px; pointer-events: none;
    background: rgba(120,0,15,0.35); box-shadow: inset 0 0 120px 30px rgba(255,30,50,0.75); }
  #sentryAlert[hidden] { display: none; }
  #sentryAlert.flash { animation: sentryGlitch 0.5s steps(2) 6; }
  @keyframes sentryGlitch { 0% { transform: translateX(0); filter: hue-rotate(0); } 50% { transform: translateX(-6px); filter: hue-rotate(-20deg) brightness(1.4); } 100% { transform: translateX(4px); } }
  .sAlertTitle { font: 800 26px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 0.12em; color: #fff; text-shadow: 0 0 16px #ff1e3c, 3px 0 #4fd8ff; }
  .sAlertType { font-size: 20px; font-weight: 700; color: #ffd0d6; }
  .sAlertTime { font: 600 14px/1 ui-monospace, Menlo, monospace; color: #ffb3bd; }
  #sentryDimCover { display: none; position: fixed; inset: 0; z-index: 1; background: #000; place-content: center; }
  #sentry.dim #sentryDimCover { display: grid; }
  #sentryDimCover span { font: 600 12px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.1em; color: rgba(255,90,110,0.45); animation: powerWarnBlink 3s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { #sentryAlert.flash { animation: none; } }

  /* ====== 홀로그램 모드 ====== */
  #holo { position: fixed; inset: 0; z-index: 44; background: radial-gradient(ellipse at 50% 45%, #0b2533 0%, #02070b 72%); overflow: hidden; }
  #holo[hidden] { display: none; }
  #holoCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
  .hTop { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 16px; right: 16px; display: grid; gap: 8px; max-width: 560px; margin: 0 auto; }
  .hBar { display: flex; justify-content: space-between; align-items: center; }
  .hKicker { font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.18em; color: var(--accent); text-shadow: 0 0 8px rgba(79,216,255,0.6); }
  #holo button { appearance: none; -webkit-tap-highlight-color: transparent; font-family: inherit; }
  #holoCloseBtn, #holoHandBtn { border: 1px solid var(--accent-dim); background: rgba(5,10,16,0.6); color: var(--accent); border-radius: 999px; padding: 7px 12px; font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.06em; }
  #holoModeSwitch { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px; border: 1px solid var(--accent-dim); border-radius: 12px; background: rgba(5,10,16,0.55); }
  #holoModeSwitch button { border: none; background: transparent; color: var(--dim); padding: 9px 6px; border-radius: 9px; font-size: 13px; font-weight: 600; }
  #holoModeSwitch button.on { background: rgba(79,216,255,0.16); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(79,216,255,0.45); }
  #holoChips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  #holoChips::-webkit-scrollbar { display: none; }
  #holoChips button { flex: none; border: 1px solid rgba(79,216,255,0.3); background: rgba(5,10,16,0.5); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
  #holoChips button.on { border-color: #ffb24f; color: #ffcf8a; background: rgba(255,178,79,0.12); }
  #holoSearch[hidden] { display: none; }
  .hSearchRow { display: flex; gap: 6px; }
  #holoSearchInput { flex: 1; min-width: 0; background: rgba(5,10,16,0.6); border: 1px solid var(--accent-dim); color: var(--ink); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
  .hSearchRow button { border: 1px solid var(--accent-dim); background: rgba(79,216,255,0.1); color: var(--accent); border-radius: 10px; padding: 0 14px; font-size: 13px; }
  .hBottom { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 9% + 56px); display: grid; gap: 8px; max-width: 560px; margin: 0 auto; }
  .hHandRow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
  #holoPreview { width: 64px; height: 48px; border: 1px solid var(--accent-dim); border-radius: 6px; background: rgba(5,10,16,0.5); flex: none; }
  #holoHand { flex: 1; min-width: 0; }
  #holoHand.live { color: var(--accent); }
  #holoHand.locked { color: #ffb24f; }
  .hCard { padding: 10px 14px; border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0; background: rgba(5,10,16,0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  #holoTitle { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
  #holoInfo { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: #a9c3d1; }
  #holoInfo div { overflow-wrap: anywhere; }
  .hZoom { position: absolute; z-index: 2; right: 16px; top: 48%; transform: translateY(-50%); display: grid; gap: 8px; }
  .hZoom button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent-dim); background: rgba(5,10,16,0.6); color: var(--accent); font-size: 22px; line-height: 1; }
  .hZoom button:active { background: rgba(79,216,255,0.2); }
  button#holoBtn { appearance: none; border: none; background: transparent; color: var(--dim); font-size: 18px; padding: 6px 8px; }
  button#holoBtn.active { color: var(--accent); text-shadow: 0 0 8px rgba(79,216,255,0.8); }

  /* ====== 비행 HUD ====== */
  #flight { position: fixed; inset: 0; z-index: 44;
    background:
      linear-gradient(rgba(79,216,255,0.05) 1px, transparent 1px) 0 0 / 100% 32px,
      linear-gradient(90deg, rgba(79,216,255,0.05) 1px, transparent 1px) 0 0 / 32px 100%,
      radial-gradient(ellipse at 50% 45%, #0a2230 0%, #02070b 75%); }
  #flight[hidden] { display: none; }
  /* 후면 카메라 화면 위에 HUD (카메라가 켜지면 cam 클래스) — 글씨가 잘 보이게 살짝 어둡게 */
  #flightVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; filter: brightness(0.62) contrast(1.1) saturate(0.85); }
  #flight.cam { background: #000; }
  #flight.cam #flightVideo { display: block; }
  #flight::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.6) 100%); }
  #flightCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .flTop { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 16px; right: 16px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.16em; color: #ffb24f; }
  .flTop span { margin-right: auto; text-shadow: 0 0 8px rgba(255,178,79,0.6); }
  .flTop button { appearance: none; border: 1px solid var(--accent-dim); background: rgba(5,10,16,0.6); color: var(--accent);
    border-radius: 999px; padding: 8px 12px; font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.06em; }
  .flTop button[hidden] { display: none; }
  #flightSensorBtn, #flightCamBtn { color: #ffb24f; border-color: #ffb24f; animation: powerWarnBlink 1.4s ease-in-out infinite; }
  #flightStats { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 9% + 64px);
    text-align: center; font: 600 12px/1.5 ui-monospace, Menlo, monospace; letter-spacing: 0.06em; color: var(--accent);
    text-shadow: 0 0 6px rgba(79,216,255,0.5); font-variant-numeric: tabular-nums; }

  /* ====== 미션 브리핑 ====== */
  #mission { position: fixed; inset: 0; z-index: 44; overflow-y: auto; opacity: 0; transition: opacity 0.45s ease;
    background: radial-gradient(ellipse at 50% 0%, rgba(14,48,66,0.96) 0%, rgba(3,8,12,0.97) 60%); }
  #mission.on { opacity: 1; }
  #mission[hidden] { display: none; }
  .msnWrap { max-width: 520px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 22px) 16px calc(env(safe-area-inset-bottom, 0px) + 120px); display: grid; gap: 14px; }
  .msnHead { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--accent-dim); }
  .msnTop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    font: 700 11px/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.16em; color: var(--accent); }
  #msnDate { color: var(--dim); letter-spacing: 0.06em; font-weight: 600; }
  #msnName { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: balance; text-shadow: 0 0 14px rgba(79,216,255,0.35); }
  .msnThreat { font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.14em; }
  .msnThreat.low { color: #6dffb0; } .msnThreat.mid { color: #ffb24f; } .msnThreat.high { color: #ff6b6b; }
  #msnCards { display: grid; gap: 10px; }
  .msnCard { position: relative; padding: 12px 14px; border: 1px solid rgba(79,216,255,0.28); border-radius: 12px;
    background: linear-gradient(180deg, rgba(79,216,255,0.08), rgba(79,216,255,0.02));
    opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 0.45s ease, transform 0.5s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
  .msnCard.in { opacity: 1; transform: none; }
  .msnCard::after { content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(79,216,255,0.18), transparent); }
  .msnCard.in::after { animation: msnSweep 0.9s ease-out 1; }
  @keyframes msnSweep { from { top: -40%; } to { top: 110%; } }
  .msnK { font: 700 10px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 8px; }
  .msnWx { display: flex; align-items: center; gap: 14px; }
  .msnTemp { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
  .msnWxSide { display: grid; gap: 2px; font-size: 15px; min-width: 0; }
  .msnMuted { color: var(--dim); font-size: 13px; line-height: 1.45; margin-top: 4px; }
  .msnChips { display: flex; flex-wrap: wrap; gap: 6px; }
  .msnChip { font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid #ffb24f; color: #ffcf8a; background: rgba(255,178,79,0.08); }
  .msnChip.ok { border-color: #6dffb0; color: #a8ffd2; background: rgba(109,255,176,0.06); }
  .msnList { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.4; }
  .msnList li { overflow-wrap: anywhere; }
  .msnList li::marker { color: var(--accent); }
  .msnSrc { color: var(--dim); font-size: 12px; }
  @media (prefers-reduced-motion: reduce) { .msnCard { transition: none; } .msnCard.in::after { animation: none; } }

  /* ====== 연출: 터미널(진단·권한 이전) ====== */
  #fxTerm { position: fixed; inset: 0; z-index: 45; background: rgba(2,6,10,0.93); color: #7fe7ff;
    font: 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.02em; }
  #fxTerm[hidden] { display: none; }
  #fxTerm.warn { color: #ffcf8a; }
  #fxTermBody { position: absolute; inset: 0; overflow-y: auto; padding: calc(env(safe-area-inset-top, 0px) + 24px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px); }
  #fxTerm .termTitle { font-weight: 700; letter-spacing: 0.16em; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid currentColor; opacity: 0.9; }
  #fxTerm .termLine { white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 0 0 6px currentColor; }
  #fxTerm .termLine.ok { color: #6dffb0; }
  #fxTerm .termLine.err { color: #ff6b6b; }
  #fxTerm .termLine.big { font-size: 22px; font-weight: 700; letter-spacing: 0.12em; margin-top: 14px; }

  /* ====== 연출: 드론 레이더 ====== */
  #fxRadar { position: fixed; inset: 0; z-index: 45; background: radial-gradient(circle at 50% 45%, #061826 0%, #020509 75%); }
  #fxRadar[hidden] { display: none; }
  #fxRadarCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  #fxRadarText { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 22%);
    text-align: center; font: 700 15px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 0.14em; color: #4fd8ff; text-shadow: 0 0 10px currentColor; }
  #fxRadarText.strike { color: #ff5040; animation: powerWarnBlink 0.6s ease-in-out infinite; }

  /* ====== 연출: 얼굴 스캔 ====== */
  #faceScan { position: fixed; inset: 0; z-index: 46; background: #000; }
  #faceScan[hidden] { display: none; }
  #faceVideo, #faceCanvas { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1); }
  #faceVideo { object-fit: cover; filter: saturate(0.4) brightness(0.8); }
  #faceStatus { position: absolute; left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 28px); text-align: center;
    font: 700 14px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 0.14em; color: #4fd8ff; text-shadow: 0 0 8px currentColor; }
  #faceStatus.ok { color: #6dffb0; }
  .faceBarTrack { position: absolute; left: 20%; right: 20%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16%); height: 3px; background: rgba(79,216,255,0.2); }
  #faceVitals { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16% + 18px);
    max-width: 360px; margin: 0 auto; padding: 10px 14px; border-left: 2px solid #ff5a6e; border-radius: 0 10px 10px 0;
    background: rgba(5,10,16,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #ff8a98; }
  #faceVitals[hidden] { display: none; }
  #faceVitals .fvLabel { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; }
  #faceVitals .fvLabel span { opacity: 0.6; }
  #faceVitals .fvRow { display: flex; align-items: baseline; gap: 6px; }
  #faceBpm { font-size: 34px; font-weight: 700; color: #ff5a6e; text-shadow: 0 0 10px rgba(255,90,110,0.7); font-variant-numeric: tabular-nums; }
  #faceVitals .fvUnit { font-size: 12px; letter-spacing: 0.1em; }
  #faceWave { display: block; width: 100%; height: 48px; margin-top: 4px; }
  #faceBar { height: 100%; width: 0; background: #4fd8ff; box-shadow: 0 0 10px #4fd8ff; transition: width 0.15s linear; }

  /* ====== 연출: 홀로그램 지구본 ====== */
  #globeBox { position: absolute; top: 50%; left: 50%; width: min(64vw, 300px); transform: translate(-50%, -55%) scale(0.85);
    z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.8,.2,1); }
  #globeBox.on { opacity: 1; transform: translate(-50%, -55%) scale(1); }
  #globeBox[hidden] { display: none; }
  #globeCanvas { display: block; width: 100%; aspect-ratio: 1; max-width: 100%; }
  #globeLabel { text-align: center; margin-top: 6px; font: 600 11px/1.3 ui-monospace, Menlo, monospace; letter-spacing: 0.12em; color: var(--accent); }
  #orb { transition: opacity 0.6s ease; }
  #stage.globeOn #orb { opacity: 0.12; }