/* AlphaX Console — mobile responsive shell styles (CONSOLE_MOBILE_P0). Phone-first; same system as PC. */
.mb-body { margin: 0; background: #0b1220; color: #e6edf6; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.mb-banner { background: #12203a; color: #cfe0ff; font-size: 12px; padding: 8px 12px; text-align: center; border-bottom: 1px solid #23324f; }
.mb-shell { max-width: 480px; margin: 0 auto; padding-bottom: 68px; min-height: 100vh; }

.mb-appbar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #1c2942; position: sticky; top: 0; background: #0b1220; }
.mb-home { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; }
.mb-logo { height: 25px; width: auto; display: block; }
.mb-neg { color: #f99; }
.mb-mode { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #244; color: #7fe; }
.mb-mode[data-mode="LIVE"] { background: #522; color: #f99; }   /* LIVE 는 오늘 사용 안 함 */
.mb-safe { font-size: 11px; color: #9fb4d6; }
.mb-prelive { font-size: 11px; color: #ffd9a8; background: #2a2113; padding: 7px 12px; border-bottom: 1px solid #3a2e18; }

.mb-main { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.mb-card { background: #101a2e; border: 1px solid #1e2c48; border-radius: 12px; padding: 12px; }
.mb-k { font-size: 12px; color: #9fb4d6; margin-bottom: 8px; font-weight: 600; }
.mb-metric { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; border-top: 1px solid #17233c; }
.mb-metric:first-of-type { border-top: 0; }
.mb-metric b { color: #eaf2ff; }
.mb-sub { font-size: 11px; color: #7f93b3; margin-top: 6px; }

/* large hero metric card (phone dashboard style — not a shrunken PC table) */
.mb-hero { background: linear-gradient(135deg, #12233f, #0d1a30); border-color: #294066; }
.mb-hero-k { font-size: 12px; color: #9fb4d6; }
.mb-hero-v { font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: #eaf3ff; margin: 4px 0; }
.mb-hero-sub { font-size: 11px; color: #8fa6c9; }

/* phone-readable logs (compact list, never a wide desktop panel/table) */
.mb-loglist { list-style: none; margin: 0; padding: 0; }
.mb-logline { font-size: 12px; color: #c3d3ec; padding: 5px 0; border-top: 1px solid #17233c; word-break: break-word; white-space: normal; }
.mb-logline:first-child { border-top: 0; }
.mb-logempty { color: #7f93b3; }

.mb-snap[data-state="FRESH"] { border-color: #2c6; }
.mb-snap[data-state="STALE"], .mb-snap[data-state="EXPIRED"] { border-color: #c84; }
.mb-snap[data-state="NO_DATA"], .mb-snap[data-state="INVALID"] { border-color: #556; }
.mb-snaptext { font-size: 15px; margin: 2px 0; }
.mb-refresh, .mb-config, .mb-start, .mb-stop { margin-top: 8px; padding: 9px 12px; border-radius: 9px; border: 1px solid #2b3c5e; background: #16253f; color: #dbe7fb; font-size: 13px; font-weight: 600; }
.mb-opbtns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── mobile config: phone-native VERTICAL field cards (no label/input overlap, no desktop inline rows) ── */
.mb-cfg-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mb-cfg-field { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border: 1px solid #24344f; border-radius: 11px; background: #12203a; }
.mb-cfg-label { font-size: 12px; font-weight: 700; color: #9db7e6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2px; }
.mb-cfg-ko { font-size: 14px; font-weight: 600; color: #eaf1fd; }
.mb-cfg-help { font-size: 12px; line-height: 1.45; color: #8fa4c6; }
.mb-cfg-note { font-size: 11px; line-height: 1.4; color: #e7b96b; background: #241d0f; border: 1px solid #4a3a1a; border-radius: 7px; padding: 4px 7px; margin-top: 2px; }
.mb-cfg-in { width: 100%; box-sizing: border-box; margin-top: 5px; padding: 11px 12px; border-radius: 9px; border: 1px solid #2b3c5e; background: #0d1a30; color: #eaf1fd; font-size: 15px; }
.mb-cfg-in:focus { outline: none; border-color: #4f7fd6; }
.mb-cfg-select { appearance: none; -webkit-appearance: none; }
.mb-cfg-memo { min-height: 68px; resize: vertical; font-family: inherit; line-height: 1.4; }
.mb-cfg-btns { margin-top: 14px; }
.mb-cfg-btn { flex: 1 1 30%; min-width: 96px; min-height: 46px; font-size: 14px; }
#mb-cfg-save { background: #163a2a; border-color: #2b6b4a; color: #cdeddc; }
#mb-cfg-prepare { background: #1a2c4d; border-color: #35507e; color: #dbe7fb; }

.mb-start { background: #133a24; border-color: #245; color: #9f7; }
.mb-stop { background: #3a1a1a; border-color: #533; color: #f99; }
.mb-start[disabled], .mb-stop[disabled] { opacity: .45; }
.mb-opnote, .mb-runstate { font-size: 11px; color: #9fb4d6; margin-top: 8px; }

.mb-locks { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-locks span { font-size: 10px; color: #9fb4d6; background: #12203a; border: 1px solid #23324f; border-radius: 6px; padding: 3px 7px; }
.mb-branchlist { margin: 0; padding-left: 18px; font-size: 12px; color: #c3d3ec; line-height: 1.7; }

.mb-tabbar { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; display: flex; background: #0d1728; border-top: 1px solid #1e2c48; }
.mb-tab { flex: 1; background: none; border: 0; color: #8ba0c2; padding: 12px 4px; font-size: 12px; }
.mb-tab--active { color: #7fe; font-weight: 700; }
.mb-tab__label { display: block; }

/* modal (shared markup from authUi.renderStartModal) — compact for phone.
   SCOPED under #mobile-root so these do NOT override the desktop console's .md-* modals (styles.css). */
#mobile-root .md-overlay { position: fixed; inset: 0; background: rgba(2,6,14,.7); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
#mobile-root .md-card { background: #101a2e; border: 1px solid #2b3c5e; border-radius: 14px; padding: 16px; max-width: 360px; width: 100%; }
#mobile-root .md-title { font-weight: 700; margin-bottom: 6px; }
#mobile-root .md-warn { color: #f99; font-size: 12px; } #mobile-root .md-safe { color: #9f7; font-size: 12px; margin: 4px 0; }
#mobile-root .md-note, #mobile-root .md-hint { font-size: 11px; color: #9fb4d6; }
#mobile-root .md-in { width: 100%; margin-top: 4px; padding: 8px; border-radius: 8px; border: 1px solid #2b3c5e; background: #0b1220; color: #e6edf6; }
#mobile-root .md-actions { display: flex; gap: 8px; margin-top: 12px; }
#mobile-root .md-cancel, #mobile-root .md-confirm { flex: 1; padding: 9px; border-radius: 8px; border: 1px solid #2b3c5e; background: #16253f; color: #dbe7fb; font-weight: 600; }
#mobile-root .md-confirm { background: #133a24; color: #9f7; }

/* On wide screens, hint that the full PC console lives at main.html (one system, two responsive UIs). */
@media (min-width: 900px) {
  .mb-shell { max-width: 720px; }
  .mb-prelive::after { content: " · 넓은 화면은 PC 콘솔(main.html) 권장"; }
}