/* ═══════════════════════════════════════════════════════════════════════════
 * css/styles.css  —  전체 스타일시트
 *
 * 구조:
 *   1. 디자인 시스템 (CSS Variables / Design Tokens)
 *   2. 공통 Reset & Base
 *   3. 레이아웃 & 화면 시스템
 *   4. 공통 컴포넌트 (카드, 버튼, 폼, 배지)
 *   5. 볼륨 설정 컴포넌트
 *   6. Trial 화면 컴포넌트 (공, 아레나, 타이머 바)
 *   7. 피드백 오버레이
 *   8. 휴식 화면
 *   9. 결과 화면
 *  10. 로그인 화면 전용 (index.html)
 *  11. 애니메이션 & 키프레임
 *  12. 반응형
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 디자인 시스템 — Material Design 3 (Material You) ──────────────────
 *  Google 공식 추천 컬러 체계. Seed(소스) 컬러 = 브랜드 teal #06d6a0
 *  (HCT  H169 · C60 · T76).  스킴 = MD3 TonalSpot · Light.
 *  아래 --md-sys-color-* 값은 Google 공식 Material Color Utilities 로 생성.
 *  레거시 의미 변수(--accent 등)는 MD3 역할에 alias 하여 컴포넌트 호환 유지.
 * ──────────────────────────────────────────────────────────────────────── */
:root {
  /* MD3 표준 색상 역할 — Light 스킴 (seed #06d6a0) */
  --md-sys-color-primary:                  #1c6b50;
  --md-sys-color-on-primary:               #ffffff;
  --md-sys-color-primary-container:        #a7f2d1;
  --md-sys-color-on-primary-container:     #00513b;
  --md-sys-color-secondary:                #4c6358;
  --md-sys-color-on-secondary:             #ffffff;
  --md-sys-color-secondary-container:      #cfe9da;
  --md-sys-color-on-secondary-container:   #354b41;
  --md-sys-color-tertiary:                 #3e6374;
  --md-sys-color-on-tertiary:              #ffffff;
  --md-sys-color-tertiary-container:       #c2e8fc;
  --md-sys-color-on-tertiary-container:    #254b5c;
  --md-sys-color-error:                    #ba1a1a;
  --md-sys-color-on-error:                 #ffffff;
  --md-sys-color-error-container:          #ffdad6;
  --md-sys-color-on-error-container:       #93000a;
  --md-sys-color-background:               #f5fbf5;
  --md-sys-color-on-background:            #171d1a;
  --md-sys-color-surface:                  #f5fbf5;
  --md-sys-color-on-surface:               #171d1a;
  --md-sys-color-surface-variant:          #dbe5de;
  --md-sys-color-on-surface-variant:       #404944;
  --md-sys-color-surface-dim:              #d6dbd6;
  --md-sys-color-surface-bright:           #f5fbf5;
  --md-sys-color-surface-container-lowest:  #ffffff;
  --md-sys-color-surface-container-low:     #eff5f0;
  --md-sys-color-surface-container:         #eaefea;
  --md-sys-color-surface-container-high:    #e4eae4;
  --md-sys-color-surface-container-highest: #dee4df;
  --md-sys-color-outline:                  #707974;
  --md-sys-color-outline-variant:          #bfc9c2;
  --md-sys-color-inverse-surface:          #2c322e;
  --md-sys-color-inverse-on-surface:       #ecf2ed;
  --md-sys-color-inverse-primary:          #8bd6b5;
  --md-sys-color-shadow:                   #000000;
  --md-sys-color-scrim:                    #000000;

  /* MD3 확장 — 표준 스킴에 없는 '경고/주의' 역할 (amber, MD3 톤 구조) */
  --md-ext-warn:               #825500;
  --md-ext-on-warn:            #ffffff;
  --md-ext-warn-container:     #ffddb1;
  --md-ext-on-warn-container:  #2a1800;

  /* ── 레거시 의미 변수 → MD3 역할 alias (컴포넌트 CSS 호환) ── */
  /* 배경/표면 — Light 에서는 elevation 이 surface-container 톤으로 표현됨 */
  --bg:       var(--md-sys-color-background);                /* 페이지 배경 */
  --surface:  var(--md-sys-color-surface-container-lowest);  /* 카드(흰색, 그림자 elevation) */
  --surface2: var(--md-sys-color-surface-container);         /* 입력필드 / inset 블록 */
  --surface3: var(--md-sys-color-surface-container-highest); /* 진행바 트랙 / 도트 */

  /* 강조색 */
  --accent:  var(--md-sys-color-primary);    /* 주 강조 (primary) */
  --blue:    var(--md-sys-color-tertiary);   /* 보조 강조 (tertiary) */
  --warn:    var(--md-ext-warn);             /* 경고 / 점수 (amber) */
  --danger:  var(--md-sys-color-error);      /* 오류 / 오답 (error) */

  /* 공 색상 — 기능적 게임 요소(브랜드와 무관). 유지. */
  --ball-y:  #fbbf24;   /* 노란 공 */
  --ball-r:  #f87171;   /* 빨간 공 */
  --ball-b:  #60a5fa;   /* 파란 공 */

  /* 텍스트 */
  --text:    var(--md-sys-color-on-surface);          /* 본문 */
  --dim:     var(--md-sys-color-on-surface-variant);  /* 보조 텍스트 / 라벨 */
  --muted:   var(--md-sys-color-outline);             /* placeholder / 3차 */

  /* 기타 */
  --border:  var(--md-sys-color-outline-variant);
  --shadow:  0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);

  /* 공 glow 색상 — Light 배경에선 약간 진하게 */
  --gy: rgba(251, 191, 36,  0.45);
  --gr: rgba(248, 113, 113, 0.45);
  --gb: rgba(96,  165, 250, 0.45);

  /* ── 파생 토큰 — color-mix 로 현재 테마 토큰에서 자동 계산 ──
   *  (data-theme 전환 시 primary/error/surface 가 바뀌면 함께 따라감) */
  --tint-weak:      color-mix(in srgb, var(--md-sys-color-primary)  6%, var(--md-sys-color-surface)); /* 약한 강조 면 */
  --tint-soft:      color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);                 /* 선택/강조 배경 */
  --tint-border:    color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);                 /* 강조 테두리 */
  --state-hover:    color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent);                 /* hover 테두리 */
  --primary-hover:  color-mix(in srgb, var(--md-sys-color-primary), #000 16%);                        /* primary 버튼 hover */
  --primary-shadow: color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);                 /* primary 버튼 그림자 */
  --glow-correct:   color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent);                 /* 정답 공 glow */
  --glow-wrong:     color-mix(in srgb, var(--md-sys-color-error)   45%, transparent);                 /* 오답 공 glow */
  --fb-ok-bg:       color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--md-sys-color-surface)); /* 정답 팝업 배경 */
  --fb-fail-bg:     color-mix(in srgb, var(--md-sys-color-error)   16%, var(--md-sys-color-surface)); /* 오답 팝업 배경 */
  --bg-tint-1:      color-mix(in srgb, var(--md-sys-color-primary)  7%, transparent);                 /* body 배경 radial 1 */
  --bg-tint-2:      color-mix(in srgb, var(--md-sys-color-tertiary) 7%, transparent);                 /* body 배경 radial 2 */
  --header-bg:      color-mix(in srgb, var(--md-sys-color-surface) 86%, transparent);                 /* 앱 헤더 글래스 */
}

/* ═══ 디자인 템플릿 (data-theme) — :root(기본=Material 3) 위에 토큰만 오버라이드 ═══
 *  레거시 alias·파생 토큰은 :root 에서 var() 로 참조하므로 자동 반영.
 *  값은 Google Material Color Utilities 로 생성 (접근성 고려).
 * ──────────────────────────────────────────────────────────────────────── */

/* ② 차분하고 밝은 — soft steel-blue, 저채도·밝은 면 (TonalSpot seed #7BA7CC) */
[data-theme="calm"] {
  --md-sys-color-primary:                  #2a638a;
  --md-sys-color-on-primary:               #ffffff;
  --md-sys-color-primary-container:        #cbe6ff;
  --md-sys-color-on-primary-container:     #024b71;
  --md-sys-color-secondary:                #50606f;
  --md-sys-color-on-secondary:             #ffffff;
  --md-sys-color-secondary-container:      #d4e4f6;
  --md-sys-color-on-secondary-container:   #394856;
  --md-sys-color-tertiary:                 #66587b;
  --md-sys-color-on-tertiary:              #ffffff;
  --md-sys-color-tertiary-container:       #ecdcff;
  --md-sys-color-on-tertiary-container:    #4d4162;
  --md-sys-color-error:                    #ba1a1a;
  --md-sys-color-on-error:                 #ffffff;
  --md-sys-color-error-container:          #ffdad6;
  --md-sys-color-on-error-container:       #93000a;
  --md-sys-color-background:               #f7f9ff;
  --md-sys-color-on-background:            #181c20;
  --md-sys-color-surface:                  #f7f9ff;
  --md-sys-color-on-surface:               #181c20;
  --md-sys-color-surface-variant:          #dee3ea;
  --md-sys-color-on-surface-variant:       #41474d;
  --md-sys-color-surface-dim:              #d7dadf;
  --md-sys-color-surface-bright:           #f7f9ff;
  --md-sys-color-surface-container-lowest:  #ffffff;
  --md-sys-color-surface-container-low:     #f1f4f9;
  --md-sys-color-surface-container:         #ebeef3;
  --md-sys-color-surface-container-high:    #e5e8ed;
  --md-sys-color-surface-container-highest: #e0e3e8;
  --md-sys-color-outline:                  #72787e;
  --md-sys-color-outline-variant:          #c1c7ce;
  --md-sys-color-inverse-surface:          #2d3135;
  --md-sys-color-inverse-on-surface:       #eef1f6;
  --md-sys-color-inverse-primary:          #97ccf9;
}

/* ③ 큰 글씨·고령 친화 — 최대 대비(contrast 1.0)·순수 검정 본문·진한 보더, 글자 18px
 *    (TonalSpot seed #06d6a0, 브랜드 틸 유지) */
[data-theme="elder"] {
  font-size: 18px;   /* rem 기반 사이즈 전체 ↑ (기본 16px) */
  --md-sys-color-primary:                  #00513b;
  --md-sys-color-on-primary:               #ffffff;
  --md-sys-color-primary-container:        #00543d;
  --md-sys-color-on-primary-container:     #ffffff;
  --md-sys-color-secondary:                #1a3027;
  --md-sys-color-on-secondary:             #ffffff;
  --md-sys-color-secondary-container:      #374e43;
  --md-sys-color-on-secondary-container:   #ffffff;
  --md-sys-color-tertiary:                 #033040;
  --md-sys-color-on-tertiary:              #ffffff;
  --md-sys-color-tertiary-container:       #284e5e;
  --md-sys-color-on-tertiary-container:    #ffffff;
  --md-sys-color-error:                    #8c0009;
  --md-sys-color-on-error:                 #ffffff;
  --md-sys-color-error-container:          #98000a;
  --md-sys-color-on-error-container:       #ffffff;
  --md-sys-color-background:               #f5fbf5;
  --md-sys-color-on-background:            #000000;
  --md-sys-color-surface:                  #f5fbf5;
  --md-sys-color-on-surface:               #000000;
  --md-sys-color-surface-variant:          #dbe5de;
  --md-sys-color-on-surface-variant:       #000000;
  --md-sys-color-surface-dim:              #b4bab5;
  --md-sys-color-surface-bright:           #f5fbf5;
  --md-sys-color-surface-container-lowest:  #ffffff;
  --md-sys-color-surface-container-low:     #ecf2ed;
  --md-sys-color-surface-container:         #dee4df;
  --md-sys-color-surface-container-high:    #d0d6d1;
  --md-sys-color-surface-container-highest: #c2c8c3;
  --md-sys-color-outline:                  #252e2a;
  --md-sys-color-outline-variant:          #424b46;
  --md-sys-color-inverse-surface:          #2c322e;
  --md-sys-color-inverse-on-surface:       #ffffff;
  --md-sys-color-inverse-primary:          #8bd6b5;
}

/* ④ 색각 이상·저시력 — 고대비 + 색맹 안전: 정답=파랑(primary)/오답=주황(error)
 *    (TonalSpot seed #0072B2 contrast 1.0, error 는 Okabe-Ito 주황 계열로 교체) 글자 17px */
[data-theme="vivid"] {
  font-size: 17px;
  --md-sys-color-primary:                  #00497a;
  --md-sys-color-on-primary:               #ffffff;
  --md-sys-color-primary-container:        #134c75;
  --md-sys-color-on-primary-container:     #ffffff;
  --md-sys-color-secondary:                #1f2d3b;
  --md-sys-color-on-secondary:             #ffffff;
  --md-sys-color-secondary-container:      #3c4b59;
  --md-sys-color-on-secondary-container:   #ffffff;
  --md-sys-color-tertiary:                 #342645;
  --md-sys-color-on-tertiary:              #ffffff;
  --md-sys-color-tertiary-container:       #524363;
  --md-sys-color-on-tertiary-container:    #ffffff;
  --md-sys-color-error:                    #8a3b00;   /* 주황(vermillion) — 색맹 안전 */
  --md-sys-color-on-error:                 #ffffff;
  --md-sys-color-error-container:          #ffdcc2;
  --md-sys-color-on-error-container:       #2c1600;
  --md-sys-color-background:               #f7f9ff;
  --md-sys-color-on-background:            #000000;
  --md-sys-color-surface:                  #f7f9ff;
  --md-sys-color-on-surface:               #000000;
  --md-sys-color-surface-variant:          #dee3eb;
  --md-sys-color-on-surface-variant:       #000000;
  --md-sys-color-surface-dim:              #b6b9be;
  --md-sys-color-surface-bright:           #f7f9ff;
  --md-sys-color-surface-container-lowest:  #ffffff;
  --md-sys-color-surface-container-low:     #eff1f6;
  --md-sys-color-surface-container:         #e0e2e8;
  --md-sys-color-surface-container-high:    #d2d4da;
  --md-sys-color-surface-container-highest: #c4c6cc;
  --md-sys-color-outline:                  #272d33;
  --md-sys-color-outline-variant:          #444a50;
  --md-sys-color-inverse-surface:          #2d3135;
  --md-sys-color-inverse-on-surface:       #ffffff;
  --md-sys-color-inverse-primary:          #9bcbfb;
  /* 경고/주의(amber) — 주황 error 와 구분되도록 황금빛으로 */
  --md-ext-warn:               #6e5800;
  --md-ext-on-warn:            #ffffff;
  --md-ext-warn-container:     #ffe08a;
  --md-ext-on-warn-container:  #221b00;
}

/* 고대비 테마 — 보더 두께 강화(저시력 가독성) */
:is([data-theme="elder"], [data-theme="vivid"]) :is(.card, .form-ctrl, .radio-opt, .btn-secondary, .info-note) {
  border-width: 2px;
}

/* ── 2. Reset & Base ────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Noto Sans KR', sans-serif;
  background: var(--bg);
  /* 배경 그라데이션: 두 개의 미묘한 radial gradient 오버레이 */
  background-image:
    radial-gradient(ellipse at 15% 60%, var(--bg-tint-1) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, var(--bg-tint-2) 0%, transparent 50%);
  color: var(--text);
  /* 100vh 는 iOS Safari 주소창 때문에 잘림/점프 발생 → 100dvh fallback */
  min-height: 100vh;
  min-height: 100dvh;
  /* iPhone 노치 / Android 시스템 UI 대응 */
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  /* 시스템 폰트 크기 확대 시 깨짐 방지 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
strong { font-weight: 700; }

/* ── 3. 화면 시스템 (Screen System) ────────────────────────────────────── */
/* 기본: 모든 화면 숨김 */
.screen {
  display: none;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding: 28px 20px;
  min-height: 100vh;
  min-height: 100dvh;   /* 동적 viewport — 모바일 주소창 표시/숨김 대응 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 활성 화면만 표시 */
.screen.active { display: flex; }

/* ── 4. 공통 컴포넌트 ───────────────────────────────────────────────────── */

/* 카드 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
  width: 100%;
  box-shadow: var(--shadow);
}

/* 헤더 구분선 */
.divider { height: 1px; background: var(--border); margin: 24px 0; }

/* 제목 */
/* [통일] SS 패턴 — 모바일 대응 clamp() 반응형 */
h1 { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; }
h2 { font-size: clamp(1.15rem, 3.5vw, 1.4rem); font-weight: 700; }
.sub { color: var(--dim); font-size: 0.9rem; margin-top: 6px; }

/* 배지 */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent);
}
.badge-blue  { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent); }
.badge-warn  { background: var(--md-ext-warn-container); color: var(--md-ext-on-warn-container); border-color: color-mix(in srgb, var(--md-ext-on-warn-container) 24%, transparent); }

/* 폼 컨트롤 */
.form-group   { margin-bottom: 22px; }
.form-label   {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dim);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.form-ctrl {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.form-ctrl:focus { border-color: var(--accent); }
.form-ctrl::placeholder { color: var(--muted); }

/* Radio 그룹 */
.radio-group { display: flex; gap: 10px; }
.radio-opt {
  flex: 1;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.6;
  user-select: none;
}
/* hover 효과 — 마우스 포인터 환경에서만 적용 (터치 sticky 방지) */
@media (hover: hover) and (pointer: fine) {
  .radio-opt:hover { border-color: var(--state-hover); }
}
.radio-opt.sel      { border-color: var(--accent); background: var(--tint-soft); color: var(--accent); }
.radio-opt-icon     { font-size: 1.2rem; display: block; margin-bottom: 4px; }

/* 에러 메시지 */
.form-error { color: var(--danger); font-size: 0.82rem; margin-top: 6px; display: none; }
.form-error.show { display: block; }

/* 버튼 */
/* 인터랙티브 요소 공통 — 모바일 더블탭 줌 차단 + 글자 선택 방지 */
.btn, .ball, .play-btn, .radio-opt, .blk-dot {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
          user-select: none;
}

.btn {
  /* [통일] SS 패턴 — padding 14px 24px (기존 32px 보다 좁게) */
  padding: 14px 24px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
  user-select: none;
}
.btn-lg      { padding: 16px 32px; font-size: 1.05rem; border-radius: 16px; }
.btn-primary { background: var(--accent); color: var(--md-sys-color-on-primary); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary      { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-danger         { background: var(--danger); color: #fff; }
.btn:disabled       { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* hover 효과 — 마우스 포인터 환경에서만 (터치 sticky 방지) */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover   { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 8px 24px var(--primary-shadow); }
  .btn-secondary:hover { background: var(--surface3); }
}

/* 인트로 목록 */
.intro-list       { text-align: left; color: var(--dim); font-size: 0.93rem; line-height: 2.1; padding: 0 4px; }
.intro-list li    { list-style: none; padding: 2px 0; }
.intro-list li::before { content: '• '; color: var(--accent); font-weight: 700; }

/* 안내 노트 박스 (volume 화면 등) — 약한 primary 틴트, 테마 따라감 */
.info-note {
  background: var(--tint-weak);
  border: 1px solid var(--tint-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  color: var(--dim);
  line-height: 1.7;
}

/* ── 5. 볼륨 설정 ───────────────────────────────────────────────────────── */
.vol-num {
  /* [통일] SS 사이즈 — 2.6rem (기존 4.5rem 보다 작게) */
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  text-align: center;
}

.vol-slider {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface2);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  margin-bottom: 24px;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.vol-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

/* 재생 버튼 */
.play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.2s;
}
.play-btn.paused { background: var(--accent); color: var(--md-sys-color-on-primary); }
.play-btn.playing { background: var(--danger); animation: pulse 1.5s infinite; }

/* 파형 애니메이션 */
.wave-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  margin: 12px 0;
}
.wbar {
  width: 5px;
  background: var(--accent);
  border-radius: 3px;
  height: 8px;
  animation: wv 1.2s ease-in-out infinite paused;
}
.wave-wrap.on .wbar { animation-play-state: running; }
.wbar:nth-child(1) { animation-delay: 0s; }
.wbar:nth-child(2) { animation-delay: 0.12s; }
.wbar:nth-child(3) { animation-delay: 0.24s; }
.wbar:nth-child(4) { animation-delay: 0.36s; }
.wbar:nth-child(5) { animation-delay: 0.24s; }
.wbar:nth-child(6) { animation-delay: 0.12s; }
.wbar:nth-child(7) { animation-delay: 0s; }

/* ── 6. Trial 화면 ──────────────────────────────────────────────────────── */
/* ── Trial 화면 — SS-Client 패턴으로 통일 (STY-UNIFY-02) ─────────────── */
.trial-wrap {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trial-progress {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 540px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  color: var(--dim);
}
.trial-progress strong { color: var(--text); }
.trial-bar {
  width: 100%;
  max-width: 540px;
  height: 6px;
  background: var(--surface3);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 28px;
}
.trial-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  transition: width 0.3s ease;
  border-radius: 100px;
}
.trial-instruction {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 32px;
  max-width: 600px;
  text-align: center;
  line-height: 1.8;
  font-size: 0.95rem;
}
.trial-instruction strong { color: var(--accent); }
.balls-arena {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 8vw, 60px);
  padding: 30px 0 20px;
  min-height: 200px;
}
/* SS 패턴 .ball 기본 — clamp 반응형 */
.ball {
  width: clamp(70px, 18vw, 110px);
  height: clamp(70px, 18vw, 110px);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: transform 0.2s, box-shadow 0.3s;
  position: relative;
}
.ball.y { background: radial-gradient(circle at 30% 30%, #fde68a, var(--ball-y) 60%, #b45309); }
.ball.r { background: radial-gradient(circle at 30% 30%, #fecaca, var(--ball-r) 60%, #b91c1c); }
.ball.b { background: radial-gradient(circle at 30% 30%, #bfdbfe, var(--ball-b) 60%, #1e40af); }
.ball:disabled { cursor: not-allowed; opacity: 0.65; }
@media (hover: hover) and (pointer: fine) {
  .ball:not(:disabled):hover { transform: scale(1.05); }
}
.ball.lit {
  transform: scale(1.18);
  animation: ballPulse 0.5s ease-out;
}
.ball.y.lit { box-shadow: 0 0 60px 18px var(--gy); }
.ball.r.lit { box-shadow: 0 0 60px 18px var(--gr); }
.ball.b.lit { box-shadow: 0 0 60px 18px var(--gb); }
/* [FS-M02] 공 비활성화(소리 종료) 시 부드럽게 원래 크기로 — SS 패턴 */
.ball:not(.lit):not(.correct):not(.wrong) {
  transition:
    transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1),
    box-shadow 0.4s ease;
}
.ball.correct { box-shadow: 0 0 0 8px var(--accent), 0 0 60px 16px var(--glow-correct); }
.ball.wrong   { box-shadow: 0 0 0 8px var(--danger), 0 0 60px 16px var(--glow-wrong); opacity: 0.6; }
@keyframes ballPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.22); }
  100% { transform: scale(1.18); }
}
.response-bar {
  width: 100%;
  max-width: 540px;
  height: 4px;
  background: var(--surface3);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 28px;
  opacity: 0;
  transition: opacity 0.2s;
}
.response-bar.active { opacity: 1; }
.response-bar-fill {
  height: 100%;
  background: var(--warn);
  width: 100%;
  transform-origin: left;
}
.trial-status {
  margin-top: 12px;
  color: var(--dim);
  font-size: 0.88rem;
  min-height: 1.4em;
}

/* (구) trial-hdr / score-box / blk-prog 클래스 — 새 HTML 미사용. preview / 호환 보존. */
.trial-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 14px;
}

.score-box {
  background: var(--md-ext-warn-container);
  border: 1px solid color-mix(in srgb, var(--md-ext-on-warn-container) 24%, transparent);
  border-radius: 12px;
  padding: 8px 18px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--warn);
}

.trial-instr {
  font-size: 0.88rem;
  color: var(--dim);
  line-height: 1.8;
  padding: 14px 20px;
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  margin-bottom: 28px;
}

.trial-ct {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 10px;
}

/* [통일] 구 패턴(.arena/.ball-wrap/.ball-num/.ball::after/.ball-y/.r/.b/.ball.active/.clickable/.selected)
 *        모두 제거. SS 패턴(.balls-arena/.ball.y/.r/.b/.ball.lit/.correct/.wrong)만 사용. */

/* 타이머 바 */
.timer-wrap { width: 100%; margin: 20px 0; }
.timer-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.timer-bg   { width: 100%; height: 12px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  border-radius: 6px;
  transition: width 0.08s linear;
  width: 100%;
}
/* 25% 이하: 긴박한 색상으로 변경 */
.timer-fill.urgent { background: linear-gradient(90deg, var(--warn), var(--danger)); }

/* 블록 진행 도트 */
.blk-prog-wrap  { text-align: center; margin-bottom: 12px; }
.blk-dots       { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.blk-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface3);
  border: 2px solid var(--border);
  transition: all 0.3s;
}
.blk-dot.done    { background: var(--accent); border-color: var(--accent); }
.blk-dot.current { background: var(--warn);   border-color: var(--warn); }

/* ── 7. 피드백 오버레이 ─────────────────────────────────────────────────── */
.fb-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.fb-overlay.on { opacity: 1; }

.fb-popup {
  background: var(--surface);
  border: 2px solid;
  border-radius: 24px;
  padding: 32px 52px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  transform: scale(0.75);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fb-overlay.on .fb-popup { transform: scale(1); }

.fb-popup.ok   { border-color: var(--accent); background: linear-gradient(135deg, var(--fb-ok-bg), var(--surface)); }
.fb-popup.fail { border-color: var(--danger); background: linear-gradient(135deg, var(--fb-fail-bg), var(--surface)); }

.fb-ico   { font-size: 3rem; margin-bottom: 8px; }
.fb-txt   { font-size: 1.6rem; font-weight: 900; }
.fb-popup.ok   .fb-txt { color: var(--accent); }
.fb-popup.fail .fb-txt { color: var(--danger); }
.fb-score { font-size: 1.2rem; font-weight: 700; color: var(--warn); margin-top: 6px; }
.fb-speed { font-size: 0.82rem; color: var(--dim); margin-top: 4px; }

/* ── 8. 휴식 화면 (SS-Client 패턴으로 통일 — STY-UNIFY-01) ─────────────── */
.rest-card { text-align: center; padding: 48px 32px; }
.rest-icon { font-size: 3.5rem; margin-bottom: 16px; }
.rest-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 12px; }
.rest-msg {
  background: var(--surface2);
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--dim);
  margin: 22px auto;
  max-width: 480px;
}
.rest-msg strong { color: var(--accent); }
.rest-timer {
  font-size: 3rem;
  font-weight: 900;
  color: var(--accent);
  margin: 16px 0;
  font-variant-numeric: tabular-nums;
}

/* 이전 패턴 클래스 (.rest-num/.rest-bar/.rest-bar-fill) — dead. 다른 곳 미사용. */
.rest-num {
  font-size: 5.5rem;
  font-weight: 900;
  color: var(--accent);
  text-align: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rest-bar      { width: 100%; height: 10px; background: var(--surface2); border-radius: 5px; overflow: hidden; margin: 16px 0; }
.rest-bar-fill { height: 100%; background: var(--accent); border-radius: 5px; transition: width 1s linear; }
.motivation {
  font-size: 1.05rem;
  color: var(--dim);
  line-height: 1.9;
  text-align: center;
  padding: 20px;
  background: var(--tint-weak);
  border: 1px solid var(--tint-border);
  border-radius: 14px;
  margin: 16px 0;
}

/* ── 9. JND 결과 & 완료 화면 ────────────────────────────────────────────── */
.jnd-big {
  font-size: 5.5rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.jnd-unit { font-size: 1.4rem; color: var(--dim); }

.res-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0;
}
.res-card    { background: var(--surface2); border-radius: 16px; padding: 20px; text-align: center; }
.res-val     { font-size: 2rem; font-weight: 900; color: var(--accent); }
.res-lbl     { font-size: 0.78rem; color: var(--dim); margin-top: 4px; }

.hist-table  { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; }
.hist-table th {
  background: var(--surface2);
  padding: 10px 14px;
  text-align: left;
  color: var(--dim);
  font-weight: 600;
}
.hist-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.hist-table tr:last-child td { border-bottom: none; }
.acc-good { color: var(--accent); font-weight: 700; }
.acc-mid  { color: var(--warn);   font-weight: 700; }
.acc-low  { color: var(--danger); font-weight: 700; }

/* ── 9-b. 안내(setup) 화면 카드 ────────────────────────────────────────── */
.info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.info-cell {
  background: var(--surface2);
  border-radius: 14px;
  padding: 16px 18px;
}
.info-label {
  font-size: 0.78rem;
  color: var(--dim);
}
.info-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}

.info-day-card {
  margin-top: 16px;
  padding: 26px 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface)), color-mix(in srgb, var(--md-sys-color-tertiary) 8%, var(--md-sys-color-surface)));
  border: 1px solid var(--tint-border);
  border-radius: 18px;
  text-align: center;
}
.info-day-label {
  font-size: 0.85rem;
  color: var(--dim);
  letter-spacing: .02em;
}
.info-day-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  font-weight: 900;
  line-height: 1;
}
.info-day-value > #info-day {
  font-size: 3.6rem;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.info-day-value > #info-period {
  font-size: 1.4rem;
  color: var(--text);
}
.info-day-sep,
.info-day-unit {
  font-size: 1.2rem;
  color: var(--dim);
  font-weight: 700;
}

@media (max-width: 480px) {
  .info-row { grid-template-columns: 1fr; }
  .info-day-value > #info-day { font-size: 2.8rem; }

  /* 헤더 침범 방지는 별도 미디어쿼리(라인 1000~ body padding-top:60px)에서 처리.
     여기서는 좌우 패딩만 좁혀 모바일에 맞추고, 카드는 중앙 정렬 유지. */
  .screen { padding: 28px 14px; }

  /* 볼륨 화면 — 모바일 세로 공간 압축으로 스크롤 제거 */
  #scr-volume .card                 { padding: 18px; }
  #scr-volume .card > div:first-child { margin-bottom: 10px !important; }
  #scr-volume h2                    { font-size: 1.1rem; margin: 0; }
  #scr-volume .sub                  { margin-top: 2px; }
  #scr-volume .wave-wrap            { height: 56px; gap: 4px; margin: 6px 0; }
  #scr-volume .wbar                 { width: 5px; }
  #scr-volume .vol-num              { font-size: 2rem; margin-top: 6px; }
  #scr-volume input[type="range"]   { margin: 8px 0; }
  #scr-volume .play-btn             { width: 64px; height: 64px; font-size: 1.6rem; }
  #scr-volume .divider              { margin: 10px 0; }
  #scr-volume .card > .info-note { padding: 10px 14px; font-size: 0.78rem; line-height: 1.5; margin-bottom: 12px; }
}

/* ── 10. 로그인 화면 (index.html) ──────────────────────────────────────── */
.login-container {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
}

.login-logo-title {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.login-logo-inst {
  font-size: 0.8rem;
  color: var(--dim);
  margin-top: 4px;
}

/* 앱 헤더 (app.html 상단) — iPhone 노치 / Android 상단 시스템바 대응 */
.app-header {
  /* 우측 상단 고정. 콘텐츠가 침범하지 않도록 약한 배경+blur 처리. */
  position: fixed;
  top:   max(0px, env(safe-area-inset-top));
  right: max(0px, env(safe-area-inset-right));
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-left-radius: 12px;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.header-user {
  font-size: 0.82rem;
  color: var(--dim);
}
.btn-sm {
  /* [통일] SS 패턴 — padding 8px 14px, font-size 0.82rem */
  padding: 8px 14px;
  font-size: 0.82rem;
  border-radius: 10px;
}

/* ── 11. 애니메이션 & 키프레임 ─────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0   var(--glow-wrong); }
  50%       { box-shadow: 0 0 0 14px transparent; }
}

@keyframes wv {
  0%, 100% { height: 6px; }
  50%       { height: 28px; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen.active .card { animation: fadeIn 0.3s ease; }

/* ── 12. 반응형 ─────────────────────────────────────────────────────────── *
 *
 *  Breakpoints (mobile-first):
 *    ≤ 360px : 초소형 폰 (iPhone SE 1세대 320 / Galaxy Fold 280 등)
 *    ≤ 600px : 일반 폰  (375 / 414)
 *    601~1023px : 태블릿 (iPad 768 / Galaxy Tab 800)
 *    ≥ 1024px : 데스크탑 / 큰 태블릿 가로
 *  추가:
 *    @media (orientation: landscape) and (max-height: 480px) — 폰 가로 모드
 *    @media (prefers-reduced-motion: reduce) — 모션 최소화 환경
 * ─────────────────────────────────────────────────────────────────────── */

/* 태블릿 (601~1023px) — 데스크탑 스타일에 약간의 조정 */
@media (min-width: 601px) and (max-width: 1023px) {
  .card { max-width: 600px; padding: 36px; }
  /* .arena 구 패턴 제거됨 (SS .balls-arena 사용) */
}

/* 일반 폰 (≤ 600px) */
@media (max-width: 600px) {
  body            { padding: 12px; }
  .card           { padding: 24px; }
  h1              { font-size: 1.6rem; }
  h2              { font-size: 1.3rem; }
  /* [통일] .ball 사이즈는 SS clamp(70px, 18vw, 110px) 자동 조정 — 강제 변경 제거 */
  /* [통일] .arena/.trial-instr/.trial-hdr 구 패턴 제거 — HTML 미사용 */
  .res-grid       { grid-template-columns: 1fr; }
  .jnd-big        { font-size: 4rem; }
  .radio-group    { flex-direction: column; }
  .fb-popup       { padding: 24px 32px; }
  .vol-num        { font-size: 3rem; }
  .rest-num       { font-size: 4.2rem; }
  /* 헤더가 컨텐츠 위로 넘치지 않도록 상단 여백 */
  body            { padding-top: 60px; }
}

/* 초소형 폰 (≤ 360px) — iPhone SE 1세대 320, Galaxy Fold 접힘 280 등 */
@media (max-width: 360px) {
  .card           { padding: 18px; border-radius: 18px; }
  h1              { font-size: 1.4rem; }
  /* [통일] .ball 사이즈는 SS clamp() 자동 조정 — 강제 변경 제거 */
  .jnd-big        { font-size: 3.2rem; }
  .btn            { padding: 12px 22px; font-size: 0.9rem; }
  .btn-lg         { padding: 14px 28px; font-size: 1rem; }
  .info-day-value > #info-day { font-size: 2.4rem; }
}

/* 폰 가로 모드 (height 가 매우 작을 때) — 공 + 타이머가 한 화면에 맞도록 */
@media (orientation: landscape) and (max-height: 480px) {
  body          { align-items: flex-start; }
  .card         { margin: 8px 0; }
  /* [통일] .ball/.arena 강제 변경 제거 — SS clamp() 자동 대응 */
}

/* 모션 민감 사용자 — 애니메이션 최소화 (운영체제 설정 자동 인식) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}

/* 키보드 포커스 표시 — 모든 인터랙티브 요소에 일관된 outline */
.btn:focus-visible,
.form-ctrl:focus-visible,
.radio-opt:focus-visible,
.play-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
/* .ball:focus-visible 제거 (SS 패턴 통일) */

/* ═══════════════════════════════════════════════════════════════════════════
 * 13. 모바일 강화 (Fluid Scaling · No-Scroll · No-Wrap)
 *
 * 목표:
 *   ① 스크롤 없는 '꽉 찬' 화면 (≤ 768px)
 *   ② 화면 사이즈에 따른 자연스러운 폰트 / 여백 (clamp 기반)
 *   ③ 짧은 라벨 / 숫자의 불필요한 줄바꿈 방지
 *
 * 설계:
 *   - clamp(min, vw-기반, max) 로 단계 점프 없이 매끄럽게 축소
 *   - ≤ 768px 에서 body 가 dvh 로 정확히 차고 overflow 차단
 *   - 콘텐츠가 길면 .card / scr-trial 내부에서만 스크롤
 *   - text-wrap: balance/pretty + white-space: nowrap 로 줄바꿈 제어
 *
 * 참고:
 *   §12 의 @media 일부 규칙(.vol-num:3rem 등)은 본 clamp() 가 cascade 상
 *   덮어쓰지만, 레이아웃 변경 규칙(.res-grid:1fr, .radio-group:column,
 *   .trial-hdr:wrap, .fb-popup:padding)은 그대로 유효함.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. 타이포그래피 fluid — [통일] SS 사이즈로 정렬 ─────────────────── */
h1   { font-size: clamp(1.5rem,  5vw,   2rem);   text-wrap: balance; }
h2   { font-size: clamp(1.15rem, 3.5vw, 1.4rem); text-wrap: balance; }
.sub { font-size: clamp(0.9rem,  2.4vw, 0.95rem); text-wrap: pretty; }

/* 큰 디스플레이 숫자 — viewport 비례 축소 */
/* [통일] SS 사이즈로 통일 — vol-num clamp 상한도 2.6rem 으로 (모바일에서도 동일) */
.vol-num                     { font-size: 2.6rem; line-height: 1; }
.rest-num                    { font-size: clamp(3.2rem, 14vw, 5.5rem); line-height: 1; }
.jnd-big                     { font-size: clamp(2.8rem, 13vw, 5.5rem); line-height: 1; }
.info-day-value > #info-day  { font-size: clamp(2.2rem, 10vw, 3.6rem); }
.res-val                     { font-size: clamp(1.5rem,  5vw, 2.1rem); }

/* 본문 / 안내문 / 동기부여 — 고연령 가독성 위한 큰 본문 폰트 */
.intro-list  { font-size: clamp(1.05rem, 3vw,   1.2rem);  line-height: 1.9;  text-wrap: pretty; }
.trial-instr { font-size: clamp(0.98rem, 2.8vw, 1.1rem);  line-height: 1.7;  text-wrap: pretty; }
.motivation  { font-size: clamp(1.1rem,  3.2vw, 1.25rem); line-height: 1.8;  text-wrap: pretty; }

/* 카드 / 버튼 fluid 패딩 — .btn-sm 은 제외 (헤더 로그아웃 등이 키워지지 않도록) */
.card                       { padding: clamp(18px, 4vw,   40px); }
.btn:not(.btn-sm):not(.btn-lg) { padding: clamp(14px, 2.8vw, 16px) clamp(24px, 5vw, 34px); font-size: clamp(1rem,    2.6vw, 1.1rem);  }
.btn-lg                     { padding: clamp(16px, 3.2vw, 20px) clamp(30px, 6vw, 50px); font-size: clamp(1.1rem,  3vw,   1.25rem); }

/* 폼 컨트롤 — 고연령층 입력 가독성 위해 폰트 상향 */
.form-ctrl  { font-size: clamp(1.05rem, 3vw,   1.2rem); padding: clamp(14px, 3.2vw, 18px) clamp(16px, 4vw, 20px); }
.form-label { font-size: clamp(0.92rem, 2.4vw, 1.05rem); }

/* 정보 라벨 / 값 — scr-setup 카드 */
.info-label     { font-size: clamp(0.92rem, 2.4vw, 1rem); }
.info-value     { font-size: clamp(1.15rem, 3.2vw, 1.3rem); }
.info-day-label { font-size: clamp(1rem,    2.6vw, 1.1rem); }

/* 배지 — 너무 작은 0.72rem 에서 상향 */
.badge { font-size: clamp(0.82rem, 2vw, 0.92rem); padding: 6px 16px; }

/* ── B. 공 아레나 — SS 패턴(.ball / .balls-arena) 그대로 사용. 별도 override 없음. */

/* ── C. 줄바꿈 방지 — 짧은 라벨 / 숫자 / 단위 ───────────────────────────── */
.badge,
.score-box,
.timer-meta > span,
.jnd-unit,
.info-day-label,
.info-day-unit,
.info-day-sep,
.res-val,
.res-lbl,
.header-user,
.btn-sm {
  white-space: nowrap;
}
/* .ball-num 제거 — SS 패턴 통일로 ball-wrap/number 요소 없음 */
/* 안전망: 모바일 fluid .btn 규칙이 .btn-sm 까지 키우는 cascade 방지 — SS 크기 강제 */
.btn-sm {
  padding: 8px 14px !important;
  font-size: 0.82rem !important;
  border-radius: 10px;
}
/* 안전망: 컨테이너가 좁아질 때 강제 줄임 대신 폰트가 줄어들도록 */
.info-value,
.info-day-label { text-wrap: balance; }

/* ── D. ≤ 768px 또는 짧은 높이(가로 폰) : 꽉 찬 viewport ────────────────── *
 *   width OR height 가 작을 때 모두 적용 — iPhone landscape(812×375) 포함
 * ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px), (max-height: 600px) {
  html, body { height: 100dvh; }
  body {
    overflow: hidden;
    padding: 12px;
    /* 안전영역(노치) + 우상단 fixed 헤더 (~56px) 공간 확보 */
    padding-top: calc(env(safe-area-inset-top, 0px) + 60px);
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  .screen.active {
    height: 100%;
    min-height: 0;
    padding: 0;
  }
  /* 콘텐츠가 viewport 보다 긴 경우 카드 내부에서만 스크롤 */
  .screen > .card,
  #scr-trial > div {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* 카드 안 마진/간격 압축 */
  .divider { margin: clamp(14px, 3vw, 24px) 0; }
}

/* ── E. 폰 가로 모드 — 공 + 안내문 압축 (height 우선) ───────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  body { padding-top: calc(env(safe-area-inset-top, 0px) + 48px); }
  /* [통일] .ball 사이즈는 SS clamp(70px, 18vw, 110px) 그대로 사용 — 강제 제거 */
  .balls-arena { min-height: 0; padding: 12px 8px; gap: clamp(16px, 4vh, 32px); }
  .trial-instruction { display: none; }   /* 가로 모드는 공간 협소 — 안내문 숨김 */
  .divider     { margin: 10px 0; }
  .info-day-card { padding: 14px 16px; margin-top: 10px; }
}