/* ════════════════════════════════════════════════════════════════
 * 11. 모바일 전용 요소 (기본: 숨김 — 데스크톱)
 *     실제 표시는 아래 @media (max-width:480px) 에서 정의
 * ════════════════════════════════════════════════════════════════ */
#hamburger-btn, #sidebar-overlay, #mobile-info-btn, #mobile-graph-btn { display: none; }

/* ════════════════════════════════════════════════════════════════
 * 12. 모바일 레이아웃 (≤ 480px)
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* 사이드바: 슬라이드 오버레이 방식 */
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 220px; z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.32,0.72,0,1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    flex-direction: column; align-items: center;
    padding: 56px 0 12px 0;
  }
  #sidebar.mobile-open { transform: translateX(0); }
  .sidebar-item { width: 180px; height: 48px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 16px; }
  .s-label { font-size: 13px; }

  /* 사이드바 배경 딤 */
  #sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 199;
    background: rgba(0,0,0,0.32);
  }
  #sidebar-overlay.visible { display: block; }

  /* 햄버거 버튼 */
  #hamburger-btn {
    display: flex; position: fixed; top: 10px; left: 10px; z-index: 201;
    width: 40px; height: 40px; border-radius: var(--radius-lg);
    background: var(--bg-glass); border: 1px solid var(--border-base);
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; cursor: pointer; backdrop-filter: blur(8px); box-shadow: var(--shadow-panel);
  }
  #hamburger-btn span { display: block; width: 20px; height: 2px; background: var(--text-accent); border-radius: 1px; transition: all 0.2s; }

  /* 하단 바: mode-bar(맨 아래 가운데) / undo-bar(그 위 두 줄) — 서로 겹치지 않게 높이를 벌린다.
   *   (예전에는 undo-bar 가 폭 300px 로 두 줄이 되면서 그 위의 mode-bar 를 침범했다) */
  #mode-bar { bottom: 10px; left: 50%; padding: 4px 6px; gap: 2px; max-width: calc(100% - 16px); }
  .mode-btn { padding: 6px 10px; font-size: 11px; white-space: nowrap; }
  #undo-bar {
    position: absolute; left: 8px; right: 8px; bottom: 62px; width: auto;
    gap: 4px; row-gap: 6px; justify-content: flex-start;
  }
  /* 시작 카드·도움말·상태 알림 */
  #start-guide { top: 40%; padding: 14px 16px 12px; }
  #help-panel { right: 8px; left: 8px; width: auto; top: 8px; max-height: 78dvh; }
  #status-chip { top: 8px; font-size: 11px; }

  /* 속성 패널: 하단 슬라이드업 시트 */
  #prop-panel {
    bottom: 0; right: 0; width: 100%; left: 0;
    border-radius: 18px 18px 0 0;
    transform: translateY(110%);
    transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
    display: block !important;
    max-height: 75dvh; overflow-y: auto;
    padding: 16px 18px 24px; z-index: 180;
  }
  #prop-panel.visible { transform: translateY(0); }
  #prop-panel::before {
    content: ''; display: block; width: 40px; height: 4px;
    background: var(--border-base); border-radius: 2px; margin: -6px auto 12px;
  }
  .pp-title { font-size: 13px; }
  .pp-key, .pp-val, #prop-content { font-size: 13px; }

  /* 모바일 전용 버튼: 기본 숨김(JS가 flex로 표시) */
  #mobile-info-btn, #mobile-graph-btn { display: none; }
  #mobile-info-btn {
    position: fixed; top: 58px; left: 10px; z-index: 201;
    width: 40px; height: 40px; border-radius: var(--radius-lg);
    background: var(--sel-bg); border: 1.5px solid var(--border-active);
    align-items: center; justify-content: center;
    color: var(--text-accent); font-size: 18px; font-weight: 700;
    cursor: pointer; box-shadow: var(--shadow-panel); pointer-events: auto;
  }
  #mobile-graph-btn {
    position: fixed; top: 106px; left: 10px; z-index: 201;
    width: 40px; height: 40px; border-radius: var(--radius-lg);
    background: var(--bg-glass); border: 1.5px solid var(--border-base);
    align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer;
    box-shadow: var(--shadow-panel); pointer-events: auto;
  }
  #mobile-graph-btn.graph-active {
    background: var(--sel-bg); border-color: var(--border-active);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
  }

  /* 그래프 패널: 하단 시트 */
  #transient-panel {
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100%; max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 14px 12px 20px; z-index: 185;
  }

  /* 비유 모드 컨트롤(시작/특성값 버튼): 우하단에 두되 중앙 하단 mode-bar
   *   (bottom:58px, 높이~40px → 상단 ~98px) 위쪽으로 올려 겹치지 않게 한다.
   *   우상단 HUD 와도 세로로 충분히 떨어진다. 인라인 스타일을 덮기 위해 !important. */
  #analogy-ctrl {
    bottom: 108px !important; top: auto !important;
    left: auto !important; right: 8px !important;
    padding: 8px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
 * 13. 데스크톱 전용 (≥ 481px)
 *     모바일 버튼을 !important로 강제 숨김 (JS inline style 무력화)
 * ════════════════════════════════════════════════════════════════ */
@media (min-width: 481px) {
  #hamburger-btn, #sidebar-overlay { display: none; }
  #mobile-info-btn, #mobile-graph-btn { display: none !important; }
  .sidebar-clear { width: var(--item-size); height: var(--item-size); }
}