@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── 색상 토큰 ─────────────────────────── */
  --bg:       #06121c;
  --surface:  #0f2a44;
  --surface2: #0a2032;
  --border:   #173f5c;
  --text:     #e8f4f8;
  --muted:    #90c4d4;

  /* 액센트 (2색) */
  --accent-primary:   #00b4d8;
  --accent-secondary: #48cae4;
  --blue: var(--accent-primary);
  --cyan: var(--accent-secondary);

  /* 성취 액센트 — PB·신기록·랭킹 전용 (v2.8) */
  --energy:      #ff6a3d;
  --energy-soft: rgba(255,106,61,.14);
  --aqua:        #2ff0c4;   /* display 텍스트 그라데이션 보조 */

  /* 상태색 (기능 표시 전용) */
  --status-success: #4ade80;
  --status-warning: #f59e0b;
  --status-danger:  #f87171;
  --green:  var(--status-success);
  --amber:  var(--status-warning);
  --red:    var(--status-danger);
  --purple: var(--accent-secondary);

  /* ── 폰트 토큰 ─────────────────────────── */
  --font-base: 'Pretendard', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;

  --fs-caption:  12px;
  --fs-body:     14px;
  --fs-body-lg:  16px;
  --fs-title:    20px;
  --fs-heading:  28px;
  --fs-display:  36px;
  --fs-display-xl: clamp(56px, 14vw, 104px);  /* 스코어보드 빅 넘버 (v2.8) */

  /* ── 반경 토큰 ─────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ── 간격 토큰 ─────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

html[data-theme="light"] {
  --bg:       #f0f4f8;
  --surface:  #ffffff;
  --card:     #ffffff;
  --surface2: #e8eef5;
  --border:   #c5d6e8;
  --text:     #1a2332;
  --muted:    #64748b;
  --accent-primary:   #0096b4;
  --accent-secondary: #0891b2;
  --blue:   var(--accent-primary);
  --cyan:   var(--accent-secondary);
  --energy:      #ea580c;
  --energy-soft: rgba(234,88,12,.10);
  --aqua:        #0891b2;
  --status-success: #16a34a;
  --status-warning: #d97706;
  --status-danger:  #dc2626;
  --green:  var(--status-success);
  --amber:  var(--status-warning);
  --red:    var(--status-danger);
  --purple: var(--accent-secondary);
}

html[data-theme="light"] .strength-item   { background: #f0faf4; }
html[data-theme="light"] .improvement-item{ background: #fff7ed; }
html[data-theme="light"] .feedback-body   { color: #334155; }
html[data-theme="light"] .drill-list li   { color: #334155; }

/* 라이트 모드 — body/카드/버튼 */
body.light-mode { background: var(--bg) !important; }
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] .header { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .post-card,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .session-card { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .notif-dropdown,
html[data-theme="light"] .modal-box { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .msg-row.bot .msg-bubble { background: var(--surface2); color: var(--text); }
html[data-theme="light"] .chat-sidebar { background: var(--surface); }
html[data-theme="light"] .chat-item:hover { background: var(--surface2); }
html[data-theme="light"] .btn-new { background: var(--blue); color: #fff; }
html[data-theme="light"] .sample-card { background: var(--surface); border-color: var(--border); color: var(--text); }

/* ── 테마 토글 버튼 ─────────────────────────── */
.theme-btn {
  background: none;
  border: 0.5px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  font-size: var(--fs-body-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
}
.theme-btn:hover { border-color: var(--blue); background: rgba(0,180,216,.08); }

body { background: radial-gradient(1200px 620px at 88% -10%, rgba(0,198,221,.10), transparent 60%), radial-gradient(900px 520px at -8% 4%, rgba(255,106,61,.05), transparent 55%), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font-base); font-size: var(--fs-body); min-height: 100vh; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { min-width: 0; }

/* ── 공통 유틸리티 ───────────────────────── */
.back-btn {
  background: none;
  border: 0.5px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: var(--fs-caption);
  font-family: var(--font-base);
  cursor: pointer;
  transition: border-color .2s, color .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.back-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* ── 헤더 ─────────────────────────────────── */
.header { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 0.5px solid var(--border); background: var(--surface); }
.logo { font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; color: var(--blue); letter-spacing: -0.04em; line-height: 1; }
.logo-img { height: 42px; width: auto; display: block; }
.logo-sub { margin-left: 12px; font-size: var(--fs-body); color: var(--muted); font-weight: 600; }
.header-left, .header-right { min-width: 0; }
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.status-dot.ready  { background: var(--blue); }
.status-dot.running{ background: var(--green); animation: pulse 1s ease-in-out infinite; }
.status-dot.done   { background: var(--purple); }
.status-label { font-size: var(--fs-caption); color: var(--muted); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── 공통 앱 헤더 ──────────────────────────── */
:root {
  --global-app-header-height: 70px;
  --global-app-header-visible-height: 70px;
  --global-content-max-width: 1280px;
}
.global-app-header {
  position: relative;
  top: auto;
  z-index: 9400;
  display: flex;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: var(--global-app-header-height);
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 20px;
  border-bottom: .5px solid var(--border, rgba(148,163,184,.2));
  background: color-mix(in srgb, var(--surface, #102f4a) 94%, transparent);
  box-shadow: 0 8px 26px rgba(0,0,0,.12);
  backdrop-filter: blur(18px);
}
.global-app-header-left,
.global-app-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.global-app-home {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 5px;
  border: .5px solid transparent;
  border-radius: 12px;
  color: var(--blue, #00b4d8);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.035em;
  text-decoration: none;
  white-space: nowrap;
}
.global-app-home:hover { border-color: rgba(72,202,228,.3); background: rgba(72,202,228,.08); }
.global-app-home img { width: 38px; height: 38px; flex: 0 0 38px; }
.global-app-context {
  overflow: hidden;
  padding-left: 10px;
  border-left: .5px solid var(--border, rgba(148,163,184,.2));
  color: var(--muted, #8fb4c5);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-app-header-actions { flex: 0 0 auto; justify-content: flex-end; }
.global-app-action {
  display: inline-flex;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: .5px solid var(--border, rgba(148,163,184,.2));
  border-radius: 11px;
  background: transparent;
  color: var(--muted, #8fb4c5);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.global-app-action:hover { border-color: var(--blue, #00b4d8); color: var(--cyan, #48cae4); background: rgba(0,180,216,.08); }
.global-app-action:disabled { opacity: .55; cursor: wait; }
.global-app-action[hidden] { display: none !important; }
.global-app-theme { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; }

/* 페이지마다 따로 존재하던 홈·로고·로그아웃 헤더는 공통 헤더로 대체한다. */
body.global-app-header-enabled .header:not(.global-app-header),
body.global-app-header-enabled > .home-header,
body.global-app-header-enabled > .onboarding-header,
body.global-app-header-enabled > .navbar { display: none !important; }
body.global-app-header-enabled .club-header > a[href="/landing"],
body.global-app-header-enabled .profile-topbar > a[href="/landing"] { display: none !important; }
body.global-app-header-enabled .club-header,
body.global-app-header-enabled .workout-header { position: relative; top: auto; }

@media (min-width: 1101px) {
  body.global-app-header-enabled.global-service-nav-enabled > .global-app-header {
    width: calc(100% + var(--global-service-nav-width));
    max-width: none;
    margin-left: calc(-1 * var(--global-service-nav-width));
  }
}

@media (max-width: 700px) {
  .global-app-header { gap: 8px; padding: 8px 10px; }
  .global-app-context { display: none; }
  .global-app-header-left { gap: 5px; }
  .global-app-home { padding-right: 7px; font-size: 15px; }
  .global-app-home img { width: 34px; height: 34px; flex-basis: 34px; }
  .global-app-header-actions { gap: 5px; }
  .global-app-action { width: 42px; min-height: 42px; padding: 0; }
  .global-app-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .global-app-theme { width: 42px; height: 42px; min-height: 42px; }
}

@media (max-width: 390px) {
  .global-app-home span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
}

/* ── 레이아웃 ─────────────────────────────── */
.layout { display: grid; grid-template-columns: 1fr 280px; gap: 0; height: calc(100dvh - var(--global-app-header-height, 70px)); }
.main-col { display: flex; flex-direction: column; border-right: 0.5px solid var(--border); overflow: hidden; }
.side-col { display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow-y: auto; background: var(--surface); }

/* ── 드롭존 ───────────────────────────────── */
.dropzone { flex: 1; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--border); margin: 20px; border-radius: var(--radius-md); cursor: pointer; transition: border-color .2s; }
.dropzone:hover { border-color: var(--blue); }
.dropzone.drag-over { border-color: var(--blue); background: rgba(59,130,246,.06); }
.drop-inner { text-align: center; padding: 40px; pointer-events: none; }
.drop-icon { font-size: var(--fs-display); color: var(--border); margin-bottom: 12px; }
.drop-title { font-size: var(--fs-body-lg); color: var(--text); margin-bottom: 6px; }
.drop-sub { font-size: var(--fs-caption); color: var(--muted); }

/* ── 플레이어 ─────────────────────────────── */
.player-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.video-container { position: relative; flex: 1; background: #000; overflow: hidden; }
#video { width: 100%; height: 100%; object-fit: contain; display: block; }
#overlay-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── 실시간 오버레이 패널 ──────────────────── */
.live-overlay { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.75);
  border: 0.5px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: 8px 12px;
  min-width: 148px; display: flex; flex-direction: column; gap: 5px; }
.ov-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.ov-label { font-size: var(--fs-caption); color: #888; }
.ov-val { font-size: var(--fs-body); font-weight: 500; color: #fff; }
.ov-val.good { color: var(--green); }
.ov-val.warn { color: var(--amber); }
.ov-val.bad  { color: var(--red);   }

/* ── KICK 뱃지 ────────────────────────────── */
.kick-badge { position: absolute; top: 12px; right: 12px; background: rgba(6,182,212,.2);
  border: 1px solid var(--cyan); border-radius: var(--radius-sm); padding: 5px 14px;
  color: var(--cyan); font-size: var(--fs-body); font-weight: 700; letter-spacing: 1px;
  opacity: 0; transition: opacity .1s; pointer-events: none; }
.kick-badge.show { opacity: 1; }

/* ── 영법 뱃지 ────────────────────────────── */
.stroke-badge { position: absolute; bottom: 12px; left: 12px;
  background: rgba(99,102,241,.25); border: 0.5px solid #818cf8;
  border-radius: var(--radius-sm); padding: 4px 12px; color: #c7d2fe; font-size: var(--fs-caption); }

/* ── 진행바 ───────────────────────────────── */
.progress-bar { height: 4px; background: var(--border); cursor: pointer; flex-shrink: 0; }
.progress-fill { height: 100%; background: var(--blue); width: 0%; transition: width .15s linear; }

/* ── 컨트롤바 ─────────────────────────────── */
.controls { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--surface); border-top: 0.5px solid var(--border); flex-shrink: 0; }
.ctrl-btn { background: none; border: none; color: var(--text); cursor: pointer;
  font-size: var(--fs-title); width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex;
  align-items: center; justify-content: center; }
.ctrl-btn:hover { background: var(--surface2); }
.time-display { font-size: var(--fs-caption); color: var(--muted); font-variant-numeric: tabular-nums; }
.ctrl-spacer { flex: 1; }
.analyze-btn { background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 7px 16px; font-size: var(--fs-body); font-weight: 500; cursor: pointer; }
.analyze-btn:hover { background: #0096c7; }
.analyze-btn:disabled { background: var(--surface2); color: var(--muted); cursor: not-allowed; }
.analyze-btn.running { background: #059669; }
.reset-btn { background: none; border: 0.5px solid var(--border); color: var(--muted);
  border-radius: var(--radius-sm); width: 32px; height: 32px; cursor: pointer; font-size: var(--fs-body-lg); }
.reset-btn:hover { color: var(--text); border-color: var(--text); }

/* ── 사이드 패널 카드들 ────────────────────── */
.score-card { background: var(--surface2); border: 0.5px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px; text-align: center; }
.score-label { font-size: var(--fs-caption); color: var(--muted); margin-bottom: 4px; }
.score-val { font-size: var(--fs-display); font-weight: 600; color: var(--blue); }
.score-sub { font-size: var(--fs-caption); color: var(--muted); margin-bottom: 10px; }
.score-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; }
.score-bar-fill { height: 100%; background: var(--blue); border-radius: 2px; width: 0%; transition: width .5s; }

.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric-card { background: var(--surface2); border: 0.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; }
.metric-label { font-size: var(--fs-caption); color: var(--muted); margin-bottom: 4px; }
.metric-val { font-size: var(--fs-title); font-weight: 500; }
.metric-bar-wrap { height: 3px; background: var(--border); border-radius: 2px; margin-top: 6px; }
.metric-bar { height: 100%; border-radius: 2px; width: 0%; transition: width .4s; }
.sym-bar  { background: var(--green); }
.kick-bar { background: var(--amber); }
.freq-bar { background: var(--cyan); }
.head-bar { background: var(--purple); }

.progress-card { background: var(--surface2); border: 0.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; }
.progress-label { font-size: var(--fs-caption); color: var(--muted); margin-bottom: 6px; }
.analysis-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; }
.analysis-bar-fill { height: 100%; background: var(--green); border-radius: 2px; width: 0%; transition: width .2s; }
.progress-pct { font-size: var(--fs-caption); color: var(--muted); margin-top: 4px; text-align: right; }

.feedback-card { background: rgba(245,158,11,.08); border: 0.5px solid rgba(245,158,11,.3);
  border-radius: var(--radius-sm); padding: 12px 14px; }
.feedback-title { font-size: var(--fs-caption); font-weight: 500; color: var(--amber); margin-bottom: 8px; }
.feedback-body { font-size: var(--fs-caption); color: #bbb; line-height: 1.7; white-space: pre-line; }

.drill-card { background: rgba(72,202,228,.08); border: 0.5px solid rgba(72,202,228,.3);
  border-radius: var(--radius-sm); padding: 12px 14px; }
.drill-title { font-size: var(--fs-caption); font-weight: 500; color: var(--purple); margin-bottom: 8px; }
.drill-list { padding-left: 16px; display: flex; flex-direction: column; gap: 6px; }
.drill-list li { font-size: var(--fs-caption); color: #bbb; line-height: 1.5; }

/* ── 메타 선택 패널 ───────────────────────────── */
.meta-panel { padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; }
.meta-title { font-size: var(--fs-body-lg); font-weight: 500; color: var(--text); margin-bottom: 4px; }
.meta-row { display: flex; flex-direction: column; gap: 16px; }
.meta-group { display: flex; flex-direction: column; gap: 8px; }
.meta-label { font-size: var(--fs-caption); color: var(--muted); }
.required { color: var(--red); }
.meta-options { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-btn {
  background: var(--surface2); border: 0.5px solid var(--border);
  color: var(--muted); border-radius: var(--radius-sm); padding: 8px 16px;
  font-size: var(--fs-body); cursor: pointer; transition: all .15s;
}
.meta-btn:hover { border-color: var(--blue); color: var(--text); }
.meta-btn.selected {
  background: rgba(59,130,246,.15); border-color: var(--blue);
  color: var(--blue); font-weight: 500;
}
.meta-next-wrap { display: flex; justify-content: flex-end; margin-top: 4px; }
.meta-next-btn {
  background: var(--surface2); border: 0.5px solid var(--border);
  color: var(--muted); border-radius: var(--radius-sm); padding: 10px 20px;
  font-size: var(--fs-body); cursor: not-allowed; transition: all .2s;
}
.meta-next-btn:not(:disabled) {
  background: var(--blue); border-color: var(--blue);
  color: #fff; cursor: pointer;
}
.meta-next-btn:not(:disabled):hover { background: #0096c7; }

/* ── 사이드 메타 정보 ─────────────────────────── */
.meta-info-card {
  background: var(--surface2); border: 0.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.meta-info-item { font-size: var(--fs-caption); color: var(--muted); }
.meta-info-item span { color: var(--text); font-weight: 500; margin-left: 4px; }

/* ── 파일 선택 버튼 ───────────────────────────── */
.file-btn-wrap { display: flex; gap: 10px; margin-top: 16px; justify-content: center; flex-wrap: wrap; }
.file-select-btn {
  background: var(--blue); color: #fff;
  border: none; border-radius: var(--radius-sm);
  padding: 10px 24px; font-size: var(--fs-body); font-weight: 500;
  cursor: pointer; transition: all .2s;
}
.file-select-btn:hover { background: #0096c7; transform: translateY(-1px); }
.file-select-btn-outline {
  background: var(--surface2); color: var(--text);
  border: 0.5px solid var(--border);
}
.file-select-btn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--surface2); }

.selected-file {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 16px;
  background: rgba(59,130,246,.08); border: 0.5px solid rgba(59,130,246,.3);
  border-radius: var(--radius-sm); font-size: var(--fs-body);
}
.file-icon { font-size: var(--fs-title); }
.file-name { color: var(--text); font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { color: var(--muted); font-size: var(--fs-caption); white-space: nowrap; }

/* ── 강점/개선점 피드백 카드 ────────────────────── */
.feedback-section-title {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.5px;
  padding: 6px 0; margin: 10px 0 6px;
  border-bottom: 0.5px solid var(--border);
}
.feedback-section-title.strength   { color: #4ade80; }
.feedback-section-title.improvement{ color: #fb923c; }

.feedback-item {
  background: var(--surface2); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px;
  border: 0.5px solid var(--border);
}
.strength-item   { border-left: 2px solid #4ade80; background: #0d3b4a; }
.improvement-item{ border-left: 2px solid #fb923c; background: #2a1f00; }

.fb-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 5px; flex-wrap: wrap;
}
.fb-item-name { font-size: var(--fs-body); font-weight: 500; color: var(--text); }
.fb-value     { font-size: var(--fs-body); font-weight: 600; font-family: var(--font-mono, monospace); }
.fb-value.good{ color: #4ade80; }
.fb-value.warn{ color: #fb923c; }
.fb-ideal     { font-size: var(--fs-caption); color: var(--muted); }

.fb-comment {
  font-size: var(--fs-caption); color: var(--text); line-height: 1.6; margin-bottom: 4px;
}
.fb-moment {
  font-size: var(--fs-caption); color: var(--cyan, #06b6d4);
  margin-top: 4px; padding: 4px 8px;
  background: rgba(6,182,212,.08); border-radius: var(--radius-sm);
}
.fb-reason {
  font-size: var(--fs-caption); color: var(--muted);
  margin-top: 6px; line-height: 1.6;
  padding: 6px 8px;
  background: rgba(255,255,255,.03); border-radius: var(--radius-sm);
  border-left: 2px solid var(--border);
}

/* ── 영법 선택으로 돌아가기 버튼 ────────────────── */
.back-to-meta-btn {
  position: absolute; top: 14px; left: 16px;
  background: none; border: 0.5px solid var(--border);
  color: var(--muted); border-radius: var(--radius-sm);
  padding: 5px 12px; font-size: var(--fs-caption); cursor: pointer;
  transition: all .2s; z-index: 10;
}
.back-to-meta-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ── 영상 제거 버튼 (우측 상단 ✕) ───────────────── */
.remove-video-btn {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  background: rgba(0,0,0,0.6); border: 0.5px solid rgba(255,255,255,0.2);
  color: #fff; border-radius: 50%;
  font-size: var(--fs-body); cursor: pointer; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.remove-video-btn:hover { background: rgba(239,68,68,0.8); border-color: #ef4444; }

/* ── 모바일 PWA 최적화 ────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

/* 터치 친화적 버튼 — 최소 44×44px 터치 영역 */
button, .btn, .meta-btn, .file-select-btn, .choice-btn,
.analyze-btn, .ctrl-btn, .tab-btn, .sort-btn, .cat-tab,
.plan-btn, .week-sel-btn, .page-btn, .back-btn,
.btn-submit, .btn-cancel { min-height: 44px; }

/* 더블탭 지연 제거 (iOS) */
button, a, .choice-card, .post-card, .pool-item,
.pool-custom-pin, .day-drop-zone, .tag-chip,
.cat-tab, .sort-btn, .tab-btn { touch-action: manipulation; }

/* 드래그앤드롭 대상 — 스크롤과 충돌 방지 */
.pool-item[draggable="true"],
.pool-custom-pin[draggable="true"] { touch-action: none; }

/* 하단 safe area (iPhone 노치/홈바 대응) */
body { padding-bottom: env(safe-area-inset-bottom); }

/* ── 768px 이하 (태블릿/대형 폰) ─────────────── */
@media (max-width: 768px) {
  /* 사이드바 숨김 */
  .side-col { display: none; }
  .layout { grid-template-columns: 1fr; }
  .main-col { border-right: none; }

  /* 카드 1열 배치 */
  .metrics-grid { grid-template-columns: 1fr; }
  .choice-grid  { grid-template-columns: 1fr; }

  /* 버튼 전체 너비 */
  .choice-btn, .file-select-btn { width: 100%; }

  /* 헤더 압축 */
  .logo-sub { display: none; }
  .header { padding: 10px 16px; }

  /* 홈 화면 패딩 축소 */
  .home-wrap { padding: 20px 16px; }

  /* 업로드/메타 페이지 패딩 */
  .meta-page, .upload-page { padding: 16px; }

  /* 드롭존 최소 높이 */
  .dropzone { min-height: 200px; margin: 12px; }

  /* 대시보드 패딩 축소 */
  .dash-page { padding: 16px 12px; }

  /* 플랜 페이지 */
  .plan-page { padding: 16px 12px; }
  .plan-card-header { padding: 16px 16px 12px; }
  .week-panels { padding: 16px; }
  .sessions-grid { grid-template-columns: 1fr; }
  .plan-card-footer { padding: 12px 16px; gap: 8px; }
  .plan-topbar { gap: 10px; }

  /* 커뮤니티 모달 — 화면 전체 활용 */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 20px 16px;
    -webkit-overflow-scrolling: touch;
  }
  .modal-close { top: 14px; right: 14px; min-height: 44px; min-width: 44px; }

  /* 커뮤니티 게시글 카드 */
  .comm-wrap { padding: 16px 12px 80px; }
  .post-title { font-size: var(--fs-body); }
  .post-card { padding: 12px 14px; }

  /* 탭/카테고리 가로 스크롤 */
  .cat-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .cat-tab  { flex-shrink: 0; }
  .tab-bar  { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 폰트 크기 모바일 최적화 */
  .plan-title { font-size: var(--fs-body-lg); }
  .choice-title { font-size: var(--fs-body-lg); }
  .metric-val { font-size: var(--fs-title); }
  .score-val  { font-size: var(--fs-display); }
}

/* ── 480px 이하 (소형 스마트폰) ──────────────── */
@media (max-width: 480px) {
  /* 헤더 로고 크기 축소 */
  .logo { font-size: 22px; }
  .logo-img { height: 34px; }

  /* 바디 기본 폰트 축소 */
  body { font-size: var(--fs-body); }

  /* 홈 카드 1열, 패딩 최소화 */
  .home-wrap { padding: 14px 10px; }
  .choice-card { padding: 22px 16px; gap: 10px; }
  .choice-icon { font-size: 38px; }
  .choice-title { font-size: var(--fs-body-lg); }
  .choice-desc { font-size: var(--fs-caption); }

  /* 플랜 주간 선택 스크롤 */
  .week-selector { padding: 10px 12px; gap: 6px; }
  .week-sel-btn { padding: 6px 12px; font-size: var(--fs-caption); }

  /* 커뮤니티 */
  .comm-topbar { gap: 8px; }
  .comm-search input { font-size: var(--fs-body); }
  .sort-row { flex-wrap: wrap; }

  /* 모달 풀스크린 근접 */
  .modal-box { max-height: 96dvh; padding: 16px 12px; }
  .write-form textarea { min-height: 140px; }

  /* 버튼 폰트 */
  .plan-btn { padding: 8px 14px; font-size: var(--fs-caption); }
  .btn-create-plan { padding: 9px 14px; font-size: var(--fs-caption); }

  /* 훈련 일지 */
  .log-page, .log-wrap { padding: 14px 10px; }

  /* 스코어 카드 */
  .score-val { font-size: 26px; }
  .metric-val { font-size: var(--fs-body-lg); }

  /* 컨트롤바 압축 */
  .controls { gap: 6px; padding: 8px 10px; }
  .ctrl-btn { width: 36px; height: 36px; min-height: 36px; }

  /* 사이드패널 카드 패딩 */
  .score-card, .metric-card, .feedback-card { padding: 10px 12px; }
}

/* ── SVG 아이콘 유틸리티 ───────────────────── */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  vertical-align: middle;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }

/* ════════════════════════════════════════════════════════════
   v2.8 — Hydro Velocity 유틸 레이어
   A(딥오션 몰입) + C(스포티 에너지) 공통 모션·디스플레이
   각 페이지 인라인 CSS 없이 클래스만 붙여 재사용
   ════════════════════════════════════════════════════════════ */

/* ── 디스플레이 타이포 (이탤릭 헤비 + 그라데이션) ── */
.display-italic {
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.92;
  background: linear-gradient(120deg, var(--text) 10%, var(--accent-primary) 68%, var(--aqua));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 스코어보드 빅 넘버 */
.num-score {
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.04em;
  font-size: var(--fs-display-xl);
  line-height: 0.86;
  background: linear-gradient(120deg, #ffffff 8%, var(--accent-primary) 58%, var(--aqua));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.num-score small { font-size: 0.32em; -webkit-text-fill-color: var(--aqua); }

/* ── 성취 포인트 필 (PB·신기록·랭킹 전용) ── */
.pill-energy {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .3px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--energy-soft); color: var(--energy);
  border: 1px solid rgba(255,106,61,.32);
  white-space: nowrap;
}

/* ── 카드 hover lift + glow ── */
.st-lift { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.st-lift:hover {
  transform: translateY(-5px);
  border-color: var(--accent-secondary);
  box-shadow: 0 16px 34px rgba(0,150,180,.26);
}

/* ── 등장 스태거 (자식 순차 페이드업) ── */
@keyframes st-rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }
.st-stagger > * { animation: st-rise .55s cubic-bezier(.2,.8,.2,1) backwards; }
.st-stagger > *:nth-child(1){animation-delay:.04s}
.st-stagger > *:nth-child(2){animation-delay:.09s}
.st-stagger > *:nth-child(3){animation-delay:.14s}
.st-stagger > *:nth-child(4){animation-delay:.19s}
.st-stagger > *:nth-child(5){animation-delay:.24s}
.st-stagger > *:nth-child(6){animation-delay:.29s}
.st-stagger > *:nth-child(7){animation-delay:.34s}
.st-stagger > *:nth-child(n+8){animation-delay:.38s}

/* ── 채우기 바 (정확도/속도 등) ── */
@keyframes st-fill-bar { from { width: 0; } }
.st-fill { animation: st-fill-bar 1.5s cubic-bezier(.2,.85,.2,1) .3s backwards; }

/* ── 모션 최소화 선호 시 전부 정지 ── */
@media (prefers-reduced-motion: reduce) {
  .st-stagger > *, .st-lift, .st-fill { animation: none !important; transition: none !important; }
}

/* ── 공통 레이아웃 안전망 ──
   좁은 그리드·flex 자식이 콘텐츠의 기본 최소 폭 때문에 부모를 밀어내거나,
   한국어 문구가 한 글자씩 세로로 눌리는 현상을 모든 기능 화면에서 방지한다. */
:where(main, section, article, aside, nav, header, footer, .app) { min-width: 0; max-width: 100%; }
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption) {
  max-width: 100%;
  overflow-wrap: anywhere;
}
:where(h1, h2, h3, h4, h5, h6, button, [role="button"], label, summary) {
  word-break: keep-all;
}
:where([class$="-value"], [class$="-number"], [class$="-count"], [class$="-rate"], [class$="-distance"], [class$="-time"]) {
  font-variant-numeric: tabular-nums;
}
:where(.card, [class$="-card"], [class$="-panel"], [class$="-section"], [class$="-grid"], [class$="-row"]) {
  min-width: 0;
}

@supports (text-wrap: balance) {
  :where(h1, h2, h3) { text-wrap: balance; }
}

@supports (text-wrap: pretty) {
  :where(p, li, figcaption) { text-wrap: pretty; }
}

/* ════════════════════════════════════════════════════════════
   공통 서비스 사이드바 — 랜딩 외 주요 기능 페이지
   ════════════════════════════════════════════════════════════ */
:root { --global-service-nav-width: clamp(232px, 17vw, 268px); }
body.global-service-nav-enabled {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-left: var(--global-service-nav-width) !important;
}
body.global-service-nav-enabled > *:not(.global-service-nav):not(.global-service-nav-backdrop):not(.global-service-nav-toggle) {
  min-width: 0;
}
.global-service-nav {
  position: fixed;
  inset: var(--global-app-header-visible-height, var(--global-app-header-height, 70px)) auto 0 0;
  z-index: 9200;
  display: flex;
  width: var(--global-service-nav-width);
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-right: .5px solid var(--border, rgba(148,163,184,.2));
  background: color-mix(in srgb, var(--bg, #06121c) 96%, transparent);
  box-shadow: 12px 0 32px rgba(0,0,0,.14);
  color: var(--text, #edfaff);
  backdrop-filter: blur(18px);
}
.global-service-nav-top {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: .5px solid var(--border, rgba(148,163,184,.2));
}
.global-service-nav-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.global-service-nav-brand img { width: 42px; height: 42px; object-fit: contain; }
.global-service-nav-brand span { min-width: 0; }
.global-service-nav-brand strong {
  display: block;
  overflow: hidden;
  color: var(--blue, #00b4d8);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-service-nav-brand small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted, #8fb4c5);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-service-nav-close {
  display: none;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: .5px solid var(--border, rgba(148,163,184,.2));
  border-radius: 12px;
  background: transparent;
  color: var(--text, #edfaff);
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.global-service-nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 13px 9px;
  padding: 12px;
  border: .5px solid rgba(72,202,228,.2);
  border-radius: var(--radius-md, 14px);
  background: rgba(0,180,216,.07);
}
.global-service-nav-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--blue, #00b4d8), var(--cyan, #48cae4));
  color: #06121c;
  font-size: 16px;
  font-weight: 900;
}
.global-service-nav-user > div:last-child { min-width: 0; }
.global-service-nav-user strong,
.global-service-nav-user span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-service-nav-user strong { color: var(--text, #edfaff); font-size: 13px; }
.global-service-nav-user span { margin-top: 3px; color: var(--muted, #8fb4c5); font-size: 11px; }
.global-service-nav-scroll {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5px 12px 24px;
  scrollbar-width: thin;
}
.global-service-nav-group { margin: 0 0 17px; }
.global-service-nav-group-title {
  margin: 0 8px 6px;
  color: var(--muted, #8fb4c5);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.global-service-nav-links { display: grid; gap: 3px; }
.global-service-nav-link {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: .5px solid transparent;
  border-radius: 11px;
  color: var(--muted, #8fb4c5);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.global-service-nav-link:hover {
  border-color: rgba(72,202,228,.22);
  background: rgba(72,202,228,.07);
  color: var(--text, #edfaff);
  transform: translateX(2px);
}
.global-service-nav-link.active {
  border-color: rgba(0,180,216,.38);
  background: linear-gradient(100deg, rgba(0,180,216,.2), rgba(72,202,228,.07));
  color: var(--cyan, #48cae4);
  box-shadow: inset 3px 0 0 var(--blue, #00b4d8);
}
.global-service-nav-icon {
  display: inline-grid;
  width: 24px;
  flex: 0 0 24px;
  place-items: center;
  font-size: 16px;
}
.global-service-nav-footer {
  display: grid;
  gap: 3px;
  margin-top: 3px;
  padding-top: 12px;
  border-top: .5px solid var(--border, rgba(148,163,184,.2));
}
.global-service-nav-link[hidden] { display: none !important; }
.global-service-nav-toggle {
  display: none;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 11px;
  border: .5px solid var(--border, rgba(148,163,184,.24));
  border-radius: var(--radius-sm, 10px);
  background: rgba(0,180,216,.1);
  color: var(--cyan, #48cae4);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.global-service-nav-backdrop { display: none; }

/* 데이터·운영 화면은 사이드바 오른쪽 작업 영역에서 같은 1,280px 기준선에 맞춘다. */
body.global-app-header-enabled .global-content-frame {
  width: 100%;
  max-width: var(--global-content-max-width);
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 1100px) {
  body.global-service-nav-enabled { padding-left: 0 !important; }
  body.global-service-nav-open { overflow: hidden !important; }
  .global-service-nav {
    width: min(304px, 88vw);
    box-shadow: 18px 0 48px rgba(0,0,0,.4);
    transform: translateX(-105%);
    transition: transform .22s ease;
  }
  .global-service-nav.open { transform: translateX(0); }
  .global-service-nav-close { display: inline-grid; place-items: center; }
  .global-service-nav-toggle { display: inline-flex; flex: 0 0 auto; }
  .global-service-nav-toggle-floating {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9300;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
  }
  .global-service-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: block;
    background: rgba(0,8,14,.64);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .global-service-nav-backdrop.open { opacity: 1; pointer-events: auto; }
  .club-header > .global-service-nav-toggle,
  .workout-header > .global-service-nav-toggle,
  .navbar > .global-service-nav-toggle { order: -1; }
}

@media (max-width: 520px) {
  .global-service-nav-toggle-label { display: none; }
  .global-service-nav-toggle { width: 42px; padding-inline: 0; }
  .global-service-nav-brand strong { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .global-service-nav,
  .global-service-nav-backdrop,
  .global-service-nav-link { transition: none !important; }
}
/* ════════════════════════════════════════════════════════════
   P32 clarity UI — 핵심 행동 우선, 보조 기능 점진적 공개
   ════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
body.swimmate-clarity-ui {
  --ux-content-reading-width: 70ch;
  --ux-section-gap: clamp(16px, 2vw, 24px);
}
body.swimmate-clarity-ui :where(h1, h2, h3) { line-height: 1.24; letter-spacing: -.025em; }
body.swimmate-clarity-ui :where(p, [class$="-desc"], [class$="-description"], [class$="-subtitle"]) {
  max-width: var(--ux-content-reading-width);
  line-height: 1.58;
}
body.swimmate-clarity-ui :where(button, a, summary) { -webkit-tap-highlight-color: transparent; }
body.swimmate-clarity-ui :where(.card, [class$="-card"], [class$="-panel"], [class$="-section"]) {
  scroll-margin-top: 18px;
}

/* 사이드바에는 먼저 써야 하는 네 가지 행동만 고정 노출한다. */
.global-service-nav-user {
  margin: 10px 12px 8px;
  padding: 9px 10px;
  border-color: rgba(72,202,228,.14);
  background: rgba(0,180,216,.045);
}
.global-service-nav-avatar { width: 32px; height: 32px; font-size: 14px; }
.global-service-nav-record {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 12px 9px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #03202b;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}
.global-service-nav-search {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  margin: 0 12px 10px;
  padding: 0 10px;
  border: .5px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface2) 82%, transparent);
  color: var(--muted);
}
.global-service-nav-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,180,216,.08); }
.global-service-nav-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.global-service-nav-search input::placeholder { color: var(--muted); opacity: .86; }
.global-service-nav-scroll { padding-top: 0; }
.global-service-nav-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.global-service-nav-primary .global-service-nav-link {
  min-height: 52px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 6px;
  border-color: rgba(148,163,184,.12);
  background: rgba(255,255,255,.018);
  font-size: 11px;
  text-align: center;
}
.global-service-nav-primary .global-service-nav-icon { width: auto; flex-basis: auto; font-size: 18px; line-height: 1; }
.global-service-nav-group {
  margin: 0 0 6px;
  border: .5px solid transparent;
  border-radius: 12px;
}
.global-service-nav-group.open { border-color: rgba(148,163,184,.12); background: rgba(255,255,255,.018); }
.global-service-nav-group-title {
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 24px minmax(0,1fr) 18px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}
.global-service-nav-group-title:hover { background: rgba(72,202,228,.06); color: var(--text); }
.global-service-nav-group-icon { display: grid; place-items: center; color: var(--cyan); font-size: 15px; }
.global-service-nav-chevron { transition: transform .18s ease; text-align: center; }
.global-service-nav-group.open .global-service-nav-chevron { transform: rotate(180deg); }
.global-service-nav-group .global-service-nav-links { display: none; padding: 0 5px 6px; }
.global-service-nav-group.open .global-service-nav-links { display: grid; }
.global-service-nav-group .global-service-nav-link { min-height: 38px; padding-block: 6px; font-size: 12px; }
.global-service-nav-link.search-hidden,
.global-service-nav-group.search-hidden { display: none !important; }
.global-service-nav-empty {
  display: none;
  padding: 24px 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.global-service-nav.search-empty .global-service-nav-empty { display: block; }
.global-service-nav-footer { margin-top: 10px; }
.global-service-nav-footer .global-service-nav-link { min-height: 38px; font-size: 12px; }

/* 작은 화면은 다섯 개의 하단 목적지로 일상 동선을 끝내고 전체 메뉴는 더보기로 연다. */
.global-mobile-nav { display: none; }
@media (max-width: 700px) {
  body.global-service-nav-enabled { padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  .global-mobile-nav {
    position: fixed;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    z-index: 9050;
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    min-height: 58px;
    padding: 5px;
    border: .5px solid rgba(72,202,228,.26);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 14px 38px rgba(0,0,0,.38);
    backdrop-filter: blur(18px);
  }
  .global-mobile-nav .global-service-nav-link,
  .global-mobile-nav-more {
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
  }
  .global-mobile-nav .global-service-nav-link.active { background: rgba(0,180,216,.13); color: var(--cyan); box-shadow: none; }
  .global-mobile-nav .global-service-nav-icon,
  .global-mobile-nav-more > span:first-child { width: auto; flex: 0 0 auto; font-size: 18px; line-height: 1; }
  .global-service-nav { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .global-service-nav-chevron { transition: none; }
}