/* ========================================
   PREVIEW PANEL
   미리보기 패널 및 컨텐츠 스타일
   ======================================== */

.preview-panel {
  background: transparent;
  border: none;
  /* 상단/하단 기본 여백, 좌우는 데스크톱에서는 0 유지 */
  padding: 32px 0;
  flex: 1;
  overflow-y: auto;
  max-width: 100%;
  transition: transform 0.3s ease;
  /* 내부 스크롤이 끝나도 문서나 브라우저 뷰포트로 체인이 가지 않도록 */
  overscroll-behavior: contain;
}

body.sidebar-open .preview-panel {
  /* Grid 재배치: 미리보기는 원위치 유지(오버레이), 패딩/변환 없음 */
  transform: none;
}

.preview-content {
  display: flex;
  flex-direction: column;
}

/* ========================================
   SYSTEM MESSAGE PREVIEW STYLES
   ======================================== */

.sys-message {
  --bg: #12141f;
  --border: #3d4267;
  --text: #c2c6de;
  --round: 4px;
  /* 시스템 메시지 애니메이션 공통 색 변수 (미리보기에서 JS로 덮어씀) */
  --anim1: var(--border);
  --anim1-rgb: 61, 66, 103;
  --anim2: #6366f1; /* status-panel의 --accent와 유사한 기본값 */
  --anim2-rgb: 99, 102, 241;

  width: fit-content;
  margin: 20px auto;
  border: 1px solid var(--border);
  border-radius: var(--round);
  background: var(--bg);
  font-size: 0.9rem;
  color: var(--text);
  position: relative;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
}

.sys-message span {
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  /* 줄간격 보정: line-height 증가에 비례해 상하 패딩을 유동적으로 줄임 */
  padding-top: clamp(4px, calc(10px - var(--sys-lh-trim, 0px)), 10px);
  padding-bottom: clamp(4px, calc(10px - var(--sys-lh-trim, 0px)), 10px);
  margin-right: -2px;
  line-height: var(--sys-line-height, normal);
}

/* ========================================
   STATUS PANEL PREVIEW STYLES
   ======================================== */

/* 줄간격 확인용 시스템 메시지: 폭 360px 이하로 고정 */
.sys-message.lh-check {
  max-width: 360px;
  width: 100%;
}

.status-panel {
  --bg: #12141f;
  --bg-sub: #1a1d2e;
  --border: #2d3150;
  --border-bright: #3d4267;
  --border-bright-rgb: 61, 66, 103;
  --text: #e4e6f0;
  --text-dim: #9ea2c4;
  --text-label: #b8bdd9;
  --accent: #6366f1;
  --accent-glow: #8b5cf6;
  --accent-rgb: 99, 102, 241;
  --accent-glow-rgb: 139, 92, 246;
  --exp: #a88e38;
  --hp: #a04f54;
  --mp: #52749d;
  --round: 4px;

  display: block;
  max-width: 740px;
  margin: 24px auto;
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--border-bright);
  border-radius: var(--round);
  font-size: 1rem;
  color: var(--text-dim);
  overflow: hidden;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
}

.status-panel * {
  font-family: inherit;
  font-weight: inherit;
}

.status-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}

.header-content {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.header-content .meta-info {
  font-size: 0.875em;
}

.meta-info {
  display: inline;
}

.meta-info::before {
  content: ' ';
}

.meta-info::after {
  content: ' ';
  white-space: normal;
  word-spacing: 1.5em;
  background-image: linear-gradient(
    to right,
    transparent calc(50% - 0.5px),
    var(--border-bright) 0,
    var(--border-bright) calc(50% + 0.5px),
    transparent 0
  );
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 80%;
}

.meta-info > .item {
  display: inline-flex;
  align-items: center;
  gap: 0 8px;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: top;
}

.meta-info > .item svg {
  width: 16px;
  height: 16px;
  opacity: 0.65;
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.status-label {
  color: var(--text-label);
  margin-right: 8px;
}

.label-gold {
  display: flex;
  align-items: center;
  margin-right: 0;
}

.label-gold::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 24 24'%3E%3Cpath fill='%23FADA5E' d='M17 3.34A10 10 0 1 1 2 12l.005-.324A10 10 0 0 1 17 3.34M12 6a1 1 0 0 0-1 1a3 3 0 1 0 0 6v2a1.02 1.02 0 0 1-.866-.398l-.068-.101a1 1 0 0 0-1.732.998a3 3 0 0 0 2.505 1.5H11a1 1 0 0 0 .883.994L12 18a1 1 0 0 0 1-1l.176-.005A3 3 0 0 0 13 11V9c.358-.012.671.14.866.398l.068.101a1 1 0 0 0 1.732-.998A3 3 0 0 0 13.161 7H13a1 1 0 0 0-1-1m1 7a1 1 0 0 1 0 2zm-2-4v2a1 1 0 0 1 0-2'/%3E%3C/svg%3E");
  opacity: 0.7;
}

.player-panel {
  position: relative;
  margin-bottom: 20px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--bg-sub) 0%, rgba(var(--accent-rgb), 0.05) 100%);
  border: 1px solid rgba(var(--border-bright-rgb), 0.65);
  border-radius: 0 var(--round-player, var(--round)) var(--round-player, var(--round)) 0;
  overflow: hidden;
}

.player-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-glow) 100%);
}

.player-panel.no-accent-bar::before {
  display: none;
}

/* 강조 바 숨김 시, 모서리 둥글기를 상하좌우 동일 적용 */
.player-panel.no-accent-bar {
  border-radius: var(--round-player, var(--round));
}

/* 강조 바 숨김 시, 내부 .player-info 좌측 패딩 제거 */
.player-panel.no-accent-bar .player-info {
  padding-left: 0;
}

.prof-toggle {
  position: absolute;
  /* 클릭 가능한 투명 오버레이로 전환: 라벨 우측 리본 영역을 덮습니다 */
  top: -1px;
  right: -1px;
  bottom: -1px;
  width: 128px; /* 텍스트 길이에 여유를 둔 클릭 범위 */
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}

.player-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-left: 4px;
  color: var(--text-label);
}

.line-level {
  display: inline-block;
}

.line-prof {
  display: none;
  font-size: 0.875em;
}

.line-level .meta-info > span {
  display: inline-block;
}

.prof-toggle:not(:checked) + .player-info {
  padding-right: 65px;
}

.prof-toggle:checked + .player-info {
  padding-right: 60px;
}

.prof-toggle:checked ~ .player-info .line-level {
  display: none;
}

.prof-toggle:checked ~ .player-info .line-prof {
  display: inline-block;
}

.mode-selector {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px 0 18px;
  background: linear-gradient(45deg, rgba(var(--accent-rgb), 0.65) 0%, rgba(var(--accent-glow-rgb), 0.65) 100%);
  color: var(--text-label);
  font-size: 0.875em;
  text-align: right;
  cursor: pointer;
  box-sizing: border-box;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
  /* 라벨은 비상호작용, 뒤의 투명 체크박스가 클릭을 처리 */
  pointer-events: none;
}

.mode-selector::before {
  content: '';
  width: 16px;
  height: 16px;
  margin-right: 4px;
  color: var(--text-dim);
  opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-arrow-left-right-icon lucide-arrow-left-right'%3E%3Cpath d='M8 3 4 7l4 4'/%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='m16 21 4-4-4-4'/%3E%3Cpath d='M20 17H4'/%3E%3C/svg%3E");
}

.badge-text-level {
  display: inline;
}

.badge-text-prof {
  display: none;
}

.prof-toggle:checked ~ .mode-selector .badge-text-level {
  display: none;
}

.prof-toggle:checked ~ .mode-selector .badge-text-prof {
  display: inline;
}

.gauge-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.gauge-label {
  width: 46px;
  color: var(--text-label);
}

.gauge-track {
  position: relative;
  flex: 1;
  height: 20px;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: var(--round-gauge, var(--round));
  overflow: hidden;
}

.gauge-fill {
  position: relative;
  height: 100%;
}

.gauge-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(255, 255, 255, 0.06) 4px, rgba(255, 255, 255, 0.06) 6px);
}

/* 상세 편집 모드에서 게이지 빗금 패턴 해제 옵션 */
.no-gauge-stripe .gauge-fill::after {
  content: none;
  background: none;
}

.gauge-bar .exp {
  background-color: var(--exp);
}

.gauge-bar .hp {
  background-color: var(--hp);
}

.gauge-bar .mp {
  background-color: var(--mp);
}

.gauge-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--text);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  opacity: 0.9;
}

.details {
  margin: 24px -24px -24px -24px;
  padding-top: 0;
  border-top: 1px solid var(--border);
}

.details[open] summary::after {
  content: 'CLOSE DETAILS';
}

.details:not([open]) summary::after {
  content: 'SHOW DETAILS';
}

.details summary {
  list-style: none;
  padding: 12px 24px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text-dim);
  text-align: center;
  font-size: 0.875em;
  letter-spacing: 0.4em;
  font-style: italic;
  cursor: pointer;
}

.details summary::-webkit-details-marker {
  display: none;
}

.player-details {
  display: flex;
  flex-direction: column;
  gap: 10px 0;
  padding: 20px 24px;
  font-size: 0.875em;
  border-top: 1px solid var(--border);
}

.detail-row {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--border-bright-rgb), 0.4);
  color: var(--text-dim);
}

.detail-row:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

.detail-label {
  color: var(--text-label);
  margin-right: 8px;
}

/* 시스템 기본 폰트 선택 시, 미리보기 영역만 시스템 폰트로 강제 표시 (출력 CSS에는 미포함) */
.preview-panel.system-font-mode .sys-message,
.preview-panel.system-font-mode .status-panel {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Malgun Gothic', sans-serif;
  font-weight: 400;
}

/* ========================================
   SYS MESSAGE ANIMATIONS (변수 기반)
   - 원본 _snippet_raw/style-demo.html의 0~16 항목을 정리
   - 색상은 --anim1/--anim2 (및 rgb) 변수로 통합
   ======================================== */

/* 단방향 글로우 (좌→우) */
.sys-message.glow-unidirectional::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--anim-intensity, 1);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--anim1-rgb), 0.30),
    transparent
  );
  animation: glowUnidirectional 2s linear infinite;
}
@keyframes glowUnidirectional {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 보더 펄스 */
.sys-message.border-pulse {
  animation: borderPulse 3s ease-in-out infinite;
}
@keyframes borderPulse {
  0%, 100% {
    border-color: var(--anim1);
    box-shadow: 0 0 0 rgba(var(--anim1-rgb), 0);
  }
  50% {
    border-color: var(--anim1);
    box-shadow:
      0 0 15px rgba(var(--anim1-rgb), var(--al-050, 0.5)),
      inset 0 0 10px rgba(var(--anim1-rgb), var(--al-020, 0.2));
  }
}

/* 하단 라인 스캔 (좌→우) */
.sys-message.line-scan-unidirectional::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  z-index: 0;
  pointer-events: none;
  opacity: var(--anim-intensity, 1);
  background: linear-gradient(90deg, transparent, var(--anim2) 50%, transparent);
  animation: lineScanUnidirectional 2.5s linear infinite;
}
@keyframes lineScanUnidirectional {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 대각선 스캔 (좌상→우하) */
.sys-message.diagonal-scan-unidirectional::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--anim-intensity, 1);
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(var(--anim1-rgb), 0.25) 50%,
    transparent 60%
  );
  animation: diagonalScanUnidirectional 3.5s linear infinite;
}
@keyframes diagonalScanUnidirectional {
  0% { transform: translate(-100%, -100%); }
  100% { transform: translate(50%, 50%); }
}

/* 내부 글로우 */
.sys-message.inner-glow-pulse {
  animation: innerGlowPulse 2.5s ease-in-out infinite;
}
@keyframes innerGlowPulse {
  0%, 100% { box-shadow: inset 0 0 0 rgba(var(--anim1-rgb), 0); }
  50% {
    box-shadow:
      inset 0 0 20px rgba(var(--anim1-rgb), var(--al-030, 0.3)),
      inset 0 0 40px rgba(var(--anim1-rgb), var(--al-010, 0.1));
  }
}

/* 쉬머 효과 */
.sys-message.shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 50%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--anim-intensity, 1);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--anim2-rgb), 0.15),
    rgba(var(--anim2-rgb), 0.25),
    rgba(var(--anim2-rgb), 0.15),
    transparent
  );
  animation: shimmerMove 3s ease-in-out infinite;
}
@keyframes shimmerMove { 0% { left: -150%; } 100% { left: 150%; } }

/* 네온 플리커 */
.sys-message.neon-flicker { animation: neonFlicker 2.5s linear infinite; }
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    border-color: var(--border);
    box-shadow: none;
  }
  20%, 24%, 55% {
    border-color: var(--anim2);
    box-shadow:
      0 0 5px rgba(var(--anim2-rgb), var(--al-050, 0.5)),
      0 0 10px rgba(var(--anim2-rgb), var(--al-030, 0.3)),
      inset 0 0 5px rgba(var(--anim2-rgb), var(--al-010, 0.1));
  }
}

/* 홀로그램 */
.sys-message.hologram::before,
.sys-message.hologram::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--round);
  z-index: 0;
  pointer-events: none;
}
.sys-message.hologram::before {
  opacity: var(--anim-intensity, 1);
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(var(--anim1-rgb), 0.12) 3px,
      rgba(var(--anim1-rgb), 0.12) 6px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      rgba(var(--anim1-rgb), 0.08) 3px,
      rgba(var(--anim1-rgb), 0.08) 6px
    );
  animation: hologramScan 8s linear infinite;
}
.sys-message.hologram::after {
  opacity: var(--anim-intensity, 1);
  background: linear-gradient(180deg, transparent 0%, rgba(var(--anim2-rgb), 0.08) 50%, transparent 100%);
  animation: hologramGlitch 3s steps(4) infinite;
}
@keyframes hologramScan { 0% { transform: translateY(0); } 100% { transform: translateY(20px); } }
@keyframes hologramGlitch { 0%, 90% { opacity: 1; } 91%, 96% { opacity: 0.5; } 97%, 100% { opacity: 1; } }

/* 리플 효과 */
.sys-message.ripple-effect { animation: rippleWave 3s ease-in-out infinite; }
@keyframes rippleWave {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--anim1-rgb), 0); }
  50% {
    box-shadow:
      0 0 0 3px rgba(var(--anim1-rgb), var(--al-020, 0.2)),
      0 0 0 6px rgba(var(--anim1-rgb), var(--al-010, 0.1)),
      0 0 0 9px rgba(var(--anim1-rgb), var(--al-005, 0.05));
  }
}

/* 브리딩 효과 (강도 상향 + 악센트 기반 색상) */
.sys-message.breathing { animation: breathing 4s ease-in-out infinite; }
@keyframes breathing {
  0%, 100% {
    box-shadow: inset 0 0 12px rgba(var(--anim2-rgb), 0);
    background: var(--bg);
  }
  50% {
    box-shadow: inset 0 0 26px rgba(var(--anim2-rgb), var(--al-022, 0.22));
    background: linear-gradient(var(--bg), rgba(var(--anim2-rgb), var(--al-007, 0.07)));
  }
}

/* 네온 플리커 2 (기존 글리치 변형) */
.sys-message.neon-flicker-2 { animation: neonFlicker2 2.6s linear infinite; }
@keyframes neonFlicker2 {
  0%, 88%, 90%, 92%, 100% { border-color: var(--border); box-shadow: none; filter: none; }
  89% { border-color: var(--anim2); box-shadow: 0 0 6px rgba(var(--anim2-rgb), var(--al-045, 0.45)), inset 0 0 4px rgba(var(--anim2-rgb), var(--al-012, 0.12)); filter: saturate(1.05); }
  91% { border-color: var(--border); box-shadow: none; filter: hue-rotate(-6deg) saturate(0.98); }
  93% { border-color: var(--anim2); box-shadow: 0 0 6px rgba(var(--anim2-rgb), var(--al-045, 0.45)), inset 0 0 4px rgba(var(--anim2-rgb), var(--al-012, 0.12)); filter: none; }
}

/* 데이터 스트림 */
.sys-message.data-stream::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--anim-intensity, 1);
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 5px,
    rgba(var(--anim1-rgb), 0.12) 5px,
    rgba(var(--anim1-rgb), 0.12) 10px
  );
  animation: dataFlow 1s linear infinite;
}
@keyframes dataFlow { 0% { transform: translateX(0); } 100% { transform: translateX(10px); } }

/* 위상 변이 */
.sys-message.phase-shift { animation: phaseShift 4s ease-in-out infinite; }
@keyframes phaseShift {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); border-color: var(--border); }
  25% { filter: hue-rotate(10deg) brightness(1.05); border-color: rgba(var(--anim1-rgb), 0.6); }
  50% { filter: hue-rotate(-10deg) brightness(1.1); border-color: rgba(var(--anim2-rgb), 0.6); }
  75% { filter: hue-rotate(5deg) brightness(1.05); border-color: rgba(var(--anim1-rgb), 0.6); }
}

/* 패턴 전용 (토글로 별도로 적용) */
.sys-message.pattern-only {
  background:
    radial-gradient(160% 140% at 50% 30%, rgba(0, 0, 0, 0.18) 0%, transparent 40%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.025) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, var(--bg), var(--bg));
  background-blend-mode: overlay, normal, normal, normal;
  box-shadow: inset 0 0 0 1px rgba(var(--anim1-rgb), 0.28);
  border-color: rgba(var(--anim1-rgb), 0.7);
}

/* 보더 글로우 전용 (외곽 번짐 최소화, 선명 테두리 강조) */
.sys-message.border-glow-only { animation: borderGlowPulse 2.8s ease-in-out infinite; }
@keyframes borderGlowPulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(var(--anim1-rgb), var(--al-045, 0.45));
    border-color: rgba(var(--anim1-rgb), 0.80);
  }
  50% {
    box-shadow:
      inset 0 0 0 2px rgba(var(--anim2-rgb), var(--al-075, 0.75)),
      0 0 6px 1px rgba(var(--anim2-rgb), var(--al-015, 0.15));
    border-color: rgba(var(--anim2-rgb), 0.95);
  }
}

/* 하드 엣지 광택 스윕 */
.sys-message.shine-hard-edge { --shine-alpha: 0.5; }
.sys-message.shine-hard-edge::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 40%; height: 100%;
  transform: skewX(-25deg);
  z-index: 0;
  pointer-events: none;
  opacity: var(--anim-intensity, 1);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, var(--shine-alpha)) 52%,
    rgba(255, 255, 255, var(--shine-alpha)) 72%,
    rgba(255, 255, 255, 0) 72%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shineSweep4s 4s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes shineSweep4s { 0% { left: -100%; } 20% { left: 150%; } 100% { left: 150%; } }

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .preview-panel {
    /* 모바일에서 좌우에 소폭 패딩을 부여하되 레이아웃 밀림 방지 */
    padding: 20px 12px;
    /* 플로팅 공지 버튼(FAB)과의 겹침 방지를 위한 추가 하단 여백
       - 버튼 지름(44) + 화면 하단 여백(20) + 여유(24) ≈ 88px
       - iOS 등 하단 안전영역을 함께 고려 */
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 540px) {
  .status-panel {
    padding: 16px;
  }

  .details {
    margin: 16px -16px -16px -16px;
  }

  .details summary {
    padding: 8px 16px;
  }

  .player-details {
    padding: 12px 16px;
  }

  .gauge-track {
    height: 16px;
  }

  .gauge-bar {
    margin-bottom: 8px;
  }

  .gauge-label {
    line-height: 1.2;
  }

  .info-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* 모바일/좁은 뷰포트에서 가로 스크롤 방지 및 단어 줄바꿈 보조 */
.sys-message,
.status-panel {
  overflow-wrap: break-word;
  word-break: break-word;
}