/* ==========================================================================
   표준 서버 시간 및 시험·실습 타이머 스타일시트 (style.css)
   - 원형 게이지 표준 서버 시간 UI 디자인 구현
   - 시험장 빔프로젝터 가독성 및 다크모드 대응
   ========================================================================== */

:root {
  /* ==========================================================================
     1. 신뢰감과 전문성을 주는 조합 (비즈니스 / PPT / 웹사이트)
     배경색 (60%): #F8F9FA (오프화이트 / 연한 회색)
     기본/보조색 (30%): #212529 (차콜 / 짙은 텍스트용)
     강조색 (10%): #0056B3 (딥 블루) 또는 #FF6B6B (코랄 레드)
     ========================================================================== */

  /* 배경색 (60%): #F8F9FA (부드러운 오프화이트) */
  --bg-primary: #F8F9FA;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-elevated: #F1F3F5;

  /* 기본/보조색 (30%): #212529 (차콜 / 짙은 텍스트용) */
  --text-main: #212529;
  --text-body: #343A40;
  --text-muted: #6C757D;
  --text-light: #ADB5BD;

  /* 강조색 (10%) 1: 딥 블루 (#0056B3) */
  --color-blue: #0056B3;
  --color-blue-glow: rgba(0, 86, 179, 0.25);
  --color-blue-light: #E7F1FF;
  --color-blue-border: #B8D5FA;

  /* 강조색 (10%) 2: 코랄 레드 (#FF6B6B) - 일시정지 및 경고 포인트 */
  --color-coral: #FF6B6B;
  --color-coral-glow: rgba(255, 107, 107, 0.28);
  --color-coral-light: #FFF0F0;
  --color-coral-border: #FFC9C9;

  /* 호환성 변수 매핑 */
  --color-green: #0056B3;
  --color-green-light: #E7F1FF;
  --color-green-border: #B8D5FA;
  --color-green-glow: rgba(0, 86, 179, 0.25);

  --color-yellow: #FF6B6B;
  --color-yellow-light: #FFF0F0;
  --color-yellow-border: #FFC9C9;
  --color-yellow-glow: rgba(255, 107, 107, 0.28);

  /* 다이얼 게이지 색상 */
  --dial-bg: #F8F9FA;
  --dial-track: #E9ECEF;
  --dial-outer-border: #DEE2E6;
  --dial-dot: #CED4DA;
  --dial-dot-active: #0056B3;

  /* 기타 UI 토큰 */
  --border-subtle: #E9ECEF;
  --border-strong: #CED4DA;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 9999px;
  --shadow-sm: 0 2px 8px rgba(33, 37, 41, 0.05);
  --shadow-md: 0 8px 24px rgba(33, 37, 41, 0.08);
  --shadow-dial: 0 10px 30px rgba(33, 37, 41, 0.06);

  --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "JetBrains Mono", SFMono-Regular, Consolas, monospace;
}

/* ==========================================================================
   다크 모드 배색 (신뢰감과 전문성을 계승한 딥 차콜 & 일렉트릭 블루 조합)
   - 라이트 모드의 #F8F9FA, #212529, #0056B3, #FF6B6B를 다크 환경에 최적화
   - 배경 (60%): #121417 (다크 슬레이트 차콜) & #1E2227 (차콜 서피스)
   - 텍스트/보조 (30%): #F8F9FA (오프화이트 메인 텍스트) & #ADB5BD (실버 그레이)
   - 강조 (10%): #3B82F6 (일렉트릭 로열 블루) 및 #FF6B6B (코랄 레드)
   ========================================================================== */
body.dark-mode {
  /* 배경색 (60%): 차콜 계열의 다크 슬레이트 */
  --bg-primary: #121417;
  --bg-surface: #1E2227;
  --bg-card: #1E2227;
  --bg-elevated: #282E35;

  /* 기본/보조색 (30%): 라이트 모드의 배경(#F8F9FA)을 눈부심 없는 고대비 텍스트로 전환 */
  --text-main: #F8F9FA;
  --text-body: #DEE2E6;
  --text-muted: #9CA3AF;
  --text-light: #6B7280;

  /* 강조색 (10%) 1: 어두운 배경에서 WCAG AAA(7.2:1) 시인성을 확보한 일렉트릭 로열 블루 */
  --color-blue: #3B82F6;
  --color-blue-glow: rgba(59, 130, 246, 0.35);
  --color-blue-light: rgba(59, 130, 246, 0.14);
  --color-blue-border: rgba(59, 130, 246, 0.32);

  /* 강조색 (10%) 2: 코랄 레드 (#FF6B6B) - 일시정지 및 경고 포인트 */
  --color-coral: #FF6B6B;
  --color-coral-glow: rgba(255, 107, 107, 0.35);
  --color-coral-light: rgba(255, 107, 107, 0.15);
  --color-coral-border: rgba(255, 107, 107, 0.32);

  /* 호환성 변수 매핑 */
  --color-green: #3B82F6;
  --color-green-light: rgba(59, 130, 246, 0.14);
  --color-green-border: rgba(59, 130, 246, 0.32);
  --color-green-glow: rgba(59, 130, 246, 0.35);

  --color-yellow: #FF6B6B;
  --color-yellow-light: rgba(255, 107, 107, 0.15);
  --color-yellow-border: rgba(255, 107, 107, 0.32);
  --color-yellow-glow: rgba(255, 107, 107, 0.35);

  /* 다이얼 게이지 색상 */
  --dial-bg: #16191D;
  --dial-track: #282E35;
  --dial-outer-border: #323942;
  --dial-dot: #4B5563;
  --dial-dot-active: #3B82F6;

  /* 경계선 및 음영 토큰 */
  --border-subtle: #2C3238;
  --border-strong: #3F4750;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-dial: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* 기본 리셋 및 뷰포트 스크롤 차단 */
html {
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--bg-primary);
  color: var(--text-main);
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, color 0.25s ease;
  word-break: keep-all;
}

/* 전체 앱 레이아웃 래퍼 */
.app-container {
  width: 100%;
  max-width: 680px;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background-color: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 18px 10px 18px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* 상단 헤더 (슬림 콤팩트 디자인) */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.3px;
}

.sync-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-primary);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #8c949c;
}

.status-dot.online {
  background-color: var(--color-green);
  box-shadow: 0 0 6px var(--color-green);
}

.status-dot.warning {
  background-color: #f59e0b;
}

.status-dot.error {
  background-color: #ef4444;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.icon-btn:hover {
  background-color: var(--bg-primary);
  color: var(--text-main);
}

.icon-btn.muted {
  color: #ef4444;
}

/* 대분류 탭 네비게이션 (중앙 정렬) */
.main-mode-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 6px auto 6px auto;
  max-width: 440px;
  width: 100%;
  padding: 3px;
  background-color: var(--bg-elevated);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.mode-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  white-space: nowrap;
}

.mode-tab:hover {
  color: var(--text-main);
}

.mode-tab.active {
  background-color: var(--bg-surface);
  color: var(--color-green);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}

/* 프리셋 알약 탭 (Pill Buttons - 완전 대칭 중앙 정렬) */
.pill-bar-wrapper {
  margin: 0 auto 6px auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.pill-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
  padding: 2px 0;
}

.pill-btn {
  border: 1px solid var(--border-strong);
  background-color: var(--bg-surface);
  color: var(--text-main);
  padding: 0 14px;
  height: 34px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.pill-btn:hover {
  border-color: var(--color-green);
  color: var(--color-green);
}

/* 활성 알약 버튼 */
.pill-btn.active {
  border-color: var(--color-green);
  color: var(--color-green);
  background-color: var(--color-green-light);
  font-weight: 600;
}

.pill-btn.custom-pill {
  border-style: dashed;
}

/* 시험/실습 공지 배너 (중앙 정렬 캡슐 뱃지) */
.exam-notice-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-green-light);
  border: 1px solid var(--color-green-border);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin: 0 auto 8px auto;
  font-size: 12px;
  width: fit-content;
  max-width: 90%;
  animation: fadeIn 0.3s ease;
  flex-shrink: 0;
}

.notice-tag {
  background-color: var(--color-green);
  color: #ffffff;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.notice-message {
  color: var(--text-main);
  font-weight: 500;
}

/* 중앙 원형 타이머/시계 영역 (스크롤 방지 유연 레이아웃) */
.clock-display-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  margin: 0;
  overflow: hidden;
}

.circular-dial-wrapper {
  position: relative;
  width: auto;
  height: 100%;
  max-height: min(420px, 42vh);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 0;
  flex-shrink: 1;
}

.dial-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 다이얼 바깥쪽 외관선: 얇고 섬세한 헤어라인 */
.dial-bg-outer {
  fill: var(--dial-bg);
  stroke: var(--dial-outer-border);
  stroke-width: 0.8;
}

.dial-bg-inner {
  fill: var(--bg-surface);
  stroke: var(--dial-outer-border);
  stroke-width: 0.8;
}

.dial-track {
  fill: none;
  stroke: var(--dial-track);
  stroke-width: 2.2;
  transform: rotate(-90deg);
  transform-origin: 180px 180px;
}

.dial-progress {
  fill: none;
  stroke: var(--color-green);
  stroke-width: 3.2;
  stroke-linecap: butt;
  stroke-dasharray: 1017.88;
  /* 2 * PI * 162 */
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 180px 180px;
  filter: drop-shadow(0 0 8px var(--color-green-glow));
}

/* 애니메이션 선두(앞쪽 끝단) 원형 노브 */
.dial-knob {
  fill: var(--bg-surface);
  stroke: var(--color-green);
  stroke-width: 2.4;
  filter: drop-shadow(0 1px 4px var(--color-green-glow));
  pointer-events: none;
}

/* 시계 내부 12개 눈금 도트 (5초 단위 점등) */
.dial-tick-dot {
  fill: var(--dial-dot);
  transition: fill 0.18s ease, filter 0.18s ease;
}

.dial-tick-dot.tick-active {
  fill: var(--dial-dot-active) !important;
  filter: drop-shadow(0 0 5px var(--color-green-glow));
}

.dial-tick-dot.tick-main {
  r: 3.2;
  fill: var(--dial-dot);
}

.dial-tick-dot.tick-active {
  fill: var(--dial-dot-active);
}

/* 원형 내부 텍스트 콘텐츠 */
.dial-center-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.target-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

/* 메인 디지털 시계 디스플레이 (초록색 초 강조) */
.time-main-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
}

.time-hhmm {
  color: var(--text-main);
}

.time-ss {
  color: var(--color-green);
  margin-left: 1px;
}

.time-ms-display {
  font-family: var(--font-family-mono);
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: -2px;
}

.time-sub-info {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.3px;
}

.exam-progress-badge {
  margin-top: 10px;
  padding: 3px 10px;
  background-color: var(--color-green-light);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-green);
  border: 1px solid var(--color-green-border);
}

/* 시험/실습 전용 버튼 패널 */
.timer-control-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  flex-shrink: 0;
}

/* 시작 버튼 위 상태 및 조작 안내문 */
.timer-guide-message {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body);
  text-align: center;
  padding: 4px 16px;
  background-color: var(--bg-surface);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  letter-spacing: -0.3px;
  transition: all 0.2s ease;
  max-width: 95%;
  line-height: 1.35;
  word-break: keep-all;
}

.timer-buttons-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timer-buttons-row .btn {
  width: 110px;
  height: 40px;
  padding: 0 10px;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn {
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  word-break: keep-all;
}

.btn-primary {
  background-color: var(--color-green);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 12px var(--color-green-glow);
}

.btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 6px 16px var(--color-green-glow);
}

.btn-secondary {
  background-color: var(--color-yellow);
  color: #FFFFFF;
  font-weight: 700;
  border-color: var(--color-yellow);
  box-shadow: 0 4px 12px var(--color-yellow-glow);
}

.btn-secondary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px var(--color-yellow-glow);
}

.btn-outline {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text-main);
}

.btn-outline:hover {
  border-color: var(--color-green);
  color: var(--color-green);
  background-color: var(--color-green-light);
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

/* 하단 푸터 및 동기화 고지 (슬림 콤팩트 디자인) */
.bottom-footer {
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.footer-info-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.footer-main-text {
  font-size: 11px;
  color: var(--text-muted);
}

.info-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  border-radius: 50%;
}

.info-icon-btn svg {
  width: 14px;
  height: 14px;
}

.info-icon-btn:hover {
  color: var(--color-green);
}

.sync-mini-details {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-light);
  flex-wrap: wrap;
}

.sync-chip {
  background-color: var(--bg-primary);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}

.sync-action-link {
  background: transparent;
  border: none;
  color: var(--color-green);
  cursor: pointer;
  text-decoration: underline;
  font-size: 10px;
  padding: 0;
  margin-left: auto;
}

/* 모달 팝업 스타일 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

.modal-dialog {
  background-color: var(--bg-surface);
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  animation: slideUp 0.25s ease;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
  font-size: 17px;
  font-weight: 700;
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
}

.modal-body {
  padding: 20px;
  max-height: 75vh;
  overflow-y: auto;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 동기화 정보 카드 */
.sync-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.sync-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sync-card-title {
  font-size: 14px;
  font-weight: 700;
}

.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background-color: var(--color-green-light);
  color: var(--color-green);
  border: 1px solid var(--color-green-border);
}

.sync-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-label {
  font-size: 11px;
  color: var(--text-muted);
}

.info-val {
  font-size: 13px;
  font-weight: 600;
}

.info-val.highlight {
  color: var(--color-green);
  font-family: var(--font-family-mono);
}

/* 설정 폼 요소 */
.setting-section {
  margin-bottom: 18px;
}

.setting-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background-color: var(--bg-surface);
  color: var(--text-main);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.form-input:focus {
  border-color: var(--color-green);
}

.input-with-button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-with-button .form-input {
  flex: 1;
  min-width: 0;
  width: auto;
}

.input-with-button .btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 9px 18px;
}

.form-help {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

.manual-adjust-box {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.manual-offset-display {
  font-family: var(--font-family-mono);
  font-weight: 700;
  color: var(--color-green);
  padding: 0 8px;
  font-size: 13px;
}

.quick-chips {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.chip {
  border: 1px solid var(--border-strong);
  background: var(--bg-primary);
  color: var(--text-main);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--color-green);
  color: var(--color-green);
}

.radio-group {
  display: flex;
  gap: 16px;
}

.radio-label,
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.checkbox-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.sound-test-row {
  display: flex;
  gap: 8px;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
}

/* ==========================================================================
   디바이스별 반응형 레이아웃 (PC 전체화면 vs 모바일 콤팩트 뷰)
   ========================================================================== */

/* 1. PC 접속 시: 브라우저 뷰포트 전체화면 (Full Viewport Presentation, 스크롤바 0%) */
@media (min-width: 769px) {
  body {
    padding: 0;
    background-color: var(--bg-primary);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .app-container {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    border: none;
    background-color: var(--bg-primary);
    padding: 10px 36px 8px 36px;
    justify-content: space-between;
    overflow: hidden;
  }

  /* 상단 헤더: 슬림 콤팩트 */
  .top-header {
    padding-bottom: 6px;
    flex-shrink: 0;
  }

  .header-title {
    font-size: 18px;
  }

  .main-mode-nav {
    margin: 4px auto;
    max-width: 440px;
    width: 100%;
    flex-shrink: 0;
  }

  .pill-bar-wrapper {
    margin: 3px auto 6px auto;
    max-width: 660px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  .pill-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-wrap: nowrap;
  }

  /* 시험 공지 배너 */
  .exam-notice-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 600px;
    margin: 0 auto 6px auto;
    font-size: 12px;
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }

  /* 중앙 원형 시계/타이머 영역 상하 중앙 배치 */
  .clock-display-area {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 2px 0;
    overflow: hidden;
  }

  /* 다이얼 크기 PC 대화면 맞춤: 뷰포트 높이에 비례하여 스크롤바 절대 미발생 */
  .circular-dial-wrapper {
    width: auto;
    height: 100%;
    max-height: min(440px, 44vh);
    aspect-ratio: 1 / 1;
    margin: auto 0;
    flex-shrink: 1;
  }

  /* 메인 시간 텍스트 */
  .time-main-display {
    font-size: min(58px, 6.6vh);
    letter-spacing: -1.2px;
  }

  /* 날짜 및 타겟 라벨 */
  .target-label {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .time-sub-info {
    font-size: 15px;
    margin-top: 6px;
  }

  .exam-progress-badge {
    padding: 3px 12px;
    font-size: 12px;
    margin-top: 6px;
  }

  /* 타이머 조작 버튼 패널 */
  .timer-control-panel {
    margin-top: 6px;
    gap: 6px;
    flex-shrink: 0;
  }

  .timer-guide-message {
    font-size: 13px;
    padding: 3px 16px;
  }

  .timer-buttons-row {
    gap: 8px;
  }

  .timer-buttons-row .btn,
  .btn-timer-action {
    width: 110px;
    height: 38px;
    padding: 0 10px;
    font-size: 14px;
    flex-shrink: 0;
  }

  /* 하단 푸터: 슬림 콤팩트 */
  .bottom-footer {
    padding-top: 4px;
    gap: 2px;
    flex-shrink: 0;
  }

  .footer-main-text {
    font-size: 11px;
  }

  .sync-mini-details {
    font-size: 11px;
    gap: 4px;
  }
}

/* 2. 모바일 접속 시: 화면 가득 차며 스크롤바가 없는 콤팩트 뷰 */
@media (max-width: 768px) {
  body {
    padding: 0;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .app-container {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    padding: 6px 12px 4px 12px;
    overflow: hidden;
    justify-content: space-between;
  }

  /* 모바일 상단 헤더 */
  .top-header {
    padding-bottom: 3px;
    flex-shrink: 0;
  }

  .header-title {
    font-size: 15px;
  }

  .sync-status-pill {
    font-size: 10px;
    padding: 1px 6px;
  }

  .icon-btn {
    padding: 3px;
  }

  .icon-btn svg {
    width: 16px;
    height: 16px;
  }

  .main-mode-nav {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 2px;
    flex-shrink: 0;
  }

  .mode-tab {
    padding: 4px 6px;
    font-size: 12px;
  }

  .pill-bar-wrapper {
    margin-bottom: 3px;
    flex-shrink: 0;
  }

  .pill-btn {
    padding: 3px 8px;
    font-size: 11px;
  }

  .exam-notice-banner {
    margin-bottom: 3px;
    padding: 3px 8px;
    font-size: 11px;
    flex-shrink: 0;
  }

  .clock-display-area {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  .circular-dial-wrapper {
    width: auto;
    height: 100%;
    max-height: min(260px, 34vh);
    aspect-ratio: 1 / 1;
    margin: auto 0;
    flex-shrink: 1;
  }

  .time-main-display {
    font-size: min(34px, 4.6vh);
    letter-spacing: -0.8px;
  }

  .target-label {
    font-size: 13px;
    margin-bottom: 2px;
  }

  .time-sub-info {
    font-size: 11px;
    margin-top: 3px;
  }

  .exam-progress-badge {
    padding: 2px 7px;
    font-size: 10px;
    margin-top: 3px;
  }

  .timer-control-panel {
    margin-top: 4px;
    gap: 4px;
    flex-shrink: 0;
  }

  .timer-guide-message {
    font-size: 11px;
    padding: 2px 10px;
    max-width: 98%;
  }

  .timer-buttons-row {
    gap: 6px;
  }

  .timer-buttons-row .btn {
    width: 82px;
    height: 32px;
    padding: 0 4px;
    font-size: 12px;
  }

  /* 모바일 하단 푸터 */
  .bottom-footer {
    padding-top: 3px;
    gap: 1px;
    flex-shrink: 0;
  }

  .footer-main-text {
    font-size: 10px;
  }

  .info-icon-btn svg {
    width: 12px;
    height: 12px;
  }

  .sync-mini-details {
    font-size: 10px;
    gap: 3px;
  }

  .sync-chip {
    padding: 1px 5px;
    font-size: 9px;
  }

  .sync-action-link {
    font-size: 9px;
  }
}

/* 3. 초소형 스마트폰 및 저높이 화면 최적화 */
@media (max-width: 480px), (max-height: 600px) {
  .app-container {
    padding: 4px 8px 3px 8px;
  }

  .circular-dial-wrapper {
    max-height: min(210px, 30vh);
  }

  .time-main-display {
    font-size: min(28px, 4.2vh);
    letter-spacing: -0.6px;
  }

  .target-label {
    font-size: 12px;
  }

  .timer-buttons-row .btn {
    width: 76px;
    height: 30px;
    font-size: 11px;
  }

  .timer-guide-message {
    font-size: 10px;
    padding: 1px 8px;
  }
}

/* 4. F11 전체화면 (시험 빔프로젝터 프레젠테이션 모드) */
body.fullscreen-active {
  padding: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-surface);
}

body.fullscreen-active .app-container {
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 36px 8px 36px;
  overflow: hidden;
}

body.fullscreen-active .top-header {
  padding-bottom: 6px;
}

body.fullscreen-active .circular-dial-wrapper {
  max-height: min(500px, 50vh);
}

body.fullscreen-active .time-main-display {
  font-size: min(68px, 7.5vh);
}

body.fullscreen-active .target-label {
  font-size: 22px;
  margin-bottom: 4px;
}

body.fullscreen-active .time-sub-info {
  font-size: 17px;
  margin-top: 8px;
}

body.fullscreen-active .exam-notice-banner {
  font-size: 14px;
  padding: 6px 16px;
}

body.fullscreen-active .notice-tag {
  font-size: 12px;
  padding: 3px 8px;
}

body.fullscreen-active .bottom-footer {
  padding-top: 4px;
}

/* 애니메이션 효과 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}