/* ==========================================================
   styles.css — Precision Cycling Design System
   콘셉트: "정밀한 데이터, 정제된 인터페이스"
   모든 모서리 직선(sharp edge), 체계적 엘리베이션, 정교한 컬러
   ========================================================== */

/* ===== Design Tokens (CSS Custom Properties) ===== */
:root {
  /* --- 컬러 팔레트 --- */
  --color-primary:        #D55E00;   /* 메인 브랜드 Strava 오렌지 */
  --color-primary-hover:  #CC3C08;   /* 프라이머리 호버 */
  --color-primary-light:  #FFF0E8;   /* 프라이머리 서브틀 배경 */
  --color-primary-muted:  #F5DDD0;   /* 프라이머리 뮤트 */

  --color-bg:             #F7F7F8;   /* 페이지 배경 */
  --color-surface:        #FFFFFF;   /* 카드/패널 배경 */
  --color-surface-alt:    #FAFAFA;   /* 엘리베이티드 영역 */
  --color-surface-hover:  #F5F5F7;   /* 호버 배경 */

  --color-text-primary:   #1A1A1F;   /* 메인 텍스트 */
  --color-text-secondary: #6B6B76;   /* 보조 텍스트 */
  --color-text-tertiary:  #9C9CA8;   /* 힌트/비활성 텍스트 */
  --color-text-disabled:  #C4C4CC;   /* 비활성 텍스트 */

  --color-border:         #E2E2E8;   /* 기본 보더 */
  --color-border-light:   #EDEDF0;   /* 연한 보더 */
  --color-border-strong:  #C8C8D0;   /* 강한 보더 */

  --color-red:            #DC3545;   /* 에러/삭제 */
  --color-red-hover:      #C82333;   /* 에러 호버 */
  --color-red-bg:         #FEF2F2;   /* 에러 배경 */
  --color-green:          #22A352;   /* 성공 */
  --color-green-bg:       #F0FDF4;   /* 성공 배경 */
  --color-blue:           #2563EB;   /* 링크/정보 */
  --color-yellow:         #F59E0B;   /* 경고 */

  /* --- 스포츠 타입 컬러 fallback -------------------------------------------
   * ★ 실제 값은 config.js SPORT_COLOR_MAP 에서 CSS 변수로 자동 주입됩니다.
   *   이 fallback은 JS 비활성화 환경 전용입니다. 색상 변경은 config.js에서만.
   * ──────────────────────────────────────────────────────────────────────── */
  --sport-color-ride:     #D55E00;   /* Ride    — Strava Orange  18° */
  --sport-color-run:      #0072B2;   /* Run     — Cyan 600      189° */
  --sport-color-walk:     #009E73;   /* Walk    — Green 600     142° */
  --sport-color-hike:     #7B2D8E;   /* Hike    — Violet 600    263° */
  --sport-color-squat:    #E69F00;   /* Squat   — Yellow 600     46° */
  --sport-color-circuit:  #B22068;   /* Circuit — Pink 600      330° */

  /* --- 그라디언트 --- */
  --gradient-accent:      linear-gradient(90deg, #D55E00, #E8450A);

  /* --- 엘리베이션 (3단계 그림자) --- */
  --shadow-1:  0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);    /* Raised */
  --shadow-2:  0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);  /* Floating */
  --shadow-3:  0 8px 24px rgba(0,0,0,0.12), 0 16px 48px rgba(0,0,0,0.08); /* Overlay */

  /* --- 타이포그래피 --- */
  --font-primary:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  --font-display:  var(--font-primary);

  --text-display:  700 28px/1.2 var(--font-primary);  /* 페이지 타이틀 */
  --text-heading:  700 20px/1.3 var(--font-primary);  /* 섹션 타이틀 */
  --text-title:    600 16px/1.4 var(--font-primary);  /* 카드 타이틀 */
  --text-body:     400 14px/1.5 var(--font-primary);  /* 본문 */
  --text-caption:  500 12px/1.4 var(--font-primary);  /* 레이블 */
  --text-micro:    600 11px/1.3 var(--font-primary);  /* 배지/태그 */

  --tracking-tight:  -0.02em;  /* 타이틀 자간 */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;  /* 배지 자간 */

  /* --- 간격 시스템 (4px 베이스) --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* --- 트랜지션 --- */
  --transition-fast:   0.12s ease;
  --transition-normal: 0.2s ease;
  --transition-slow:   0.3s ease;

  /* --- 레이아웃 --- */
  --max-width:   1400px;
  --header-h:    56px;
  --touch-min:   44px;  /* 터치 타겟 최소 크기 */

  /* ── font-size 단축 토큰 ─────────────────────────────────────────────
     training-calendar.css 등에서 var(--font-heading) 형태로 사용.
     --text-* 토큰은 font 단축 속성용(weight + size + family 통합)이며
     font-size 단독 사용을 위한 별도 픽셀 토큰이 필요하여 추가함.
     ─────────────────────────────────────────────────────────────────── */
  --font-heading:   20px;   /* ≈ --text-heading: 700 20px/1.3 */
  --font-title:     16px;   /* ≈ --text-title:   600 16px/1.4 */
  --font-body:      14px;   /* ≈ --text-body:    400 14px/1.5 */
  --font-caption:   12px;   /* ≈ --text-caption: 500 12px/1.4 */
  --font-micro:     11px;   /* ≈ --text-micro:   600 11px/1.3 */
  --font-small:     13px;   /* 소형 보조 텍스트             */

  /* ── 직선 처리 반경 토큰 ── */
  --radius-sm:       0;     /* 직선 처리 보완 (sharp edge)  */
}

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

/* Boathouse @font-face 제거: Strava CDN이 로컬 오리진 CORS를 차단함
   --font-display 는 Inter(--font-primary) 로 대체 */

body {
  font-family: var(--font-display);
  background: var(--color-bg);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;     /* 폰트 렌더링 개선 */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;  /* 모바일 더블탭 줌 방지 */
}

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ===== Header Accent Line ===== */
/* 헤더 상단 브랜드 액센트 라인 */
.header-accent {
  height: 3px;
  background: var(--gradient-accent);
}

/* ===== Left Section ===== */
.nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 100%;
}

/* 로고 — FitLink 이미지 */
.logo {
  display: flex;
  align-items: center;
  margin-right: var(--space-2);
  text-decoration: none;
}

.logo-img {
  height: 30px;
  width: auto;
  display: block;
}

.logo:hover {
  opacity: 0.85;
}

/* 검색 버튼 */
.search-btn {
  color: var(--color-text-secondary);
}

.search-btn:hover {
  color: var(--color-text-primary);
}

/* 내비게이션 구분선 */
.nav-divider {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  margin: 0 var(--space-2);
}

/* ===== Navigation Links ===== */
.nav-links {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
}

.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* 내비게이션 링크 */
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-4);
  height: 100%;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--color-text-primary);
}

.nav-link.active {
  color: var(--color-text-primary);
}

/* 활성 탭 하단 인디케이터 바 */
.nav-item:has(.nav-link.active)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  background: var(--color-primary);
  /* 직선 처리 — border-radius 제거 */
}

/* ===== Dropdown ===== */
.dropdown-arrow {
  width: 10px;
  height: 10px;
  opacity: 0.5;
  transition: transform var(--transition-normal);
}

.dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* 드롭다운 메뉴 패널 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--color-surface);
  border-radius: 0;                           /* 직선 처리 */
  border: 1px solid var(--color-border-light); /* 보더로 경계감 보강 */
  box-shadow: var(--shadow-2);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition-fast);
  z-index: 100;
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu-right {
  left: auto;
  right: 0;
}

/* 드롭다운 메뉴 아이템 */
.dropdown-item {
  display: block;
  padding: 10px var(--space-5);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-primary);
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.dropdown-item:hover {
  background: var(--color-surface-hover);
}

/* 드롭다운 구분선 */
.dropdown-divider {
  height: 1px;
  background: var(--color-border-light);
  margin: var(--space-1) 0;
}

/* ===== Right Section ===== */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
}

/* 구독 버튼 */
.subscribe-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0;              /* 직선 처리 */
  transition: background var(--transition-fast);
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
}

.subscribe-btn:hover {
  background: var(--color-primary-hover);
}

/* 아이콘 버튼 (검색, 알림) */
.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;             /* 원형 유지 */
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  position: relative;
}

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

/* 알림 뱃지 */
.notification-btn {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 0px;
  min-width: 18px;
  height: 18px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;             /* 알림 뱃지 원형 유지 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  line-height: 1;
  border: 2px solid var(--color-surface);
}

/* 프로필 드롭다운 — 130% 확대 (레이아웃 기반, scale 미사용) */
.profile-dropdown {
  height: auto;
}

.profile-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: 0;               /* 직선 처리 */
  transition: background var(--transition-fast);
}

.profile-btn:hover {
  background: var(--color-surface-hover);
}

.profile-btn .dropdown-arrow {
  color: var(--color-text-secondary);
}

/* 아바타 — 원형 유지, 130% 확대 (32px → 42px) */
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-border);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 액티비티 추가 버튼 — 80% 축소 */
.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  background: var(--color-primary);
  border-radius: 50%;              /* 원형 유지 */
  transition: background var(--transition-fast);
}

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

.add-btn:hover {
  background: var(--color-primary-hover);
}

/* ===== 게스트 로그인 버튼 ===== */
.guest-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0;              /* 직선 처리 — 기존 20px(pill) → sharp edge */
  text-decoration: none;
  transition: background var(--transition-fast);
  white-space: nowrap;
}
.guest-login-btn:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

/* ===== Search Overlay ===== */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* 검색 컨테이너 */
.search-container {
  width: 100%;
  max-width: 600px;
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  box-shadow: var(--shadow-3);
  padding: var(--space-4) var(--space-5);
  height: fit-content;
  transform: translateY(-10px);
  transition: transform var(--transition-normal);
}

.search-overlay.active .search-container {
  transform: translateY(0);
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.search-input-wrapper svg {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* 검색 입력 필드 */
.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text-primary);
  padding: var(--space-1) 0;
}

.search-input::placeholder {
  color: var(--color-text-tertiary);
}

/* 검색 닫기 버튼 */
.search-close {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  border-radius: 0;                /* 직선 처리 */
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* 검색 결과 */
.search-results:not(:empty) {
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
  padding-top: 8px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  text-decoration: none;
  color: var(--color-text-primary);
  border-radius: 8px;
  transition: background var(--transition-fast);
}

.search-result-item:hover {
  background: var(--color-surface-hover);
}

.search-result-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 26px;
  text-align: center;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.search-hint {
  padding: 16px 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ===== Main Content ===== */
.main-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
}

/* 콘텐츠 플레이스홀더 */
.content-placeholder {
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  padding: 60px;
  text-align: center;
  color: var(--color-text-tertiary);
  box-shadow: var(--shadow-1);
}

.content-placeholder h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.content-placeholder p {
  font-size: 14px;
}

/* ===== Analysis Section ===== */
.analysis-section {
  max-width: 700px;
  animation: fadeIn var(--transition-slow);
}

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

/* 액티비티 카드 — Precision 스타일 */
.activity-card {
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  box-shadow: var(--shadow-1);
  overflow: hidden;
  border-left: 3px solid var(--color-primary); /* 왼쪽 액센트 라인 */
}

/* 액티비티 헤더 */
.activity-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5) 0;
}

.activity-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* 액티비티 아바타 — 원형 유지 */
.activity-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.activity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.activity-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* 분석 닫기 버튼 — 원형 유지 */
.analysis-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-text-secondary);
  border-radius: 50%;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.analysis-close:hover {
  background: var(--color-bg);
  color: var(--color-text-primary);
}

/* 타이틀 행 */
.activity-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) 0;
}

.activity-icon {
  flex-shrink: 0;
}

/* ── 피드 카드 메타 아이콘 (일지·사진·조회수·댓글) ── */

/* 아이콘 그룹: 제목 우측으로 자동 밀기 */
.atm-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* 개별 아이콘 + 카운트 묶음 */
.atm-icon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
  line-height: 1;
}

.atm-icon svg { flex-shrink: 0; }

/* 일지 — 보라 */
.atm-icon--journal svg { color: #8B5CF6; }

/* 사진 — 하늘 */
.atm-icon--photo svg { color: #0EA5E9; }

/* 조회수·댓글은 .atm-icon 기본 회색 그대로 */

.activity-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

/* 스탯 행 — Distance | Elev Gain | Time */
.activity-stats {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-4) var(--space-5);
}

.activity-stat {
  flex: 1;
}

.activity-stat-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.activity-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* 스탯 구분선 */
.activity-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--color-border);
  margin: 0 var(--space-4);
  align-self: center;
}

/* ── 피드 카드 IF/TSS 훈련 뱃지 ── */
.feed-badge-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-3);
}

.feed-training-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.3px;
}

.feed-training-badge .badge-label {
  font-weight: 400;
  opacity: 0.9;
}

.feed-training-badge .badge-value {
  font-weight: 700;
}

.feed-training-badge {
  cursor: pointer;
  transition: opacity 0.15s;
}
.feed-training-badge:hover {
  opacity: 0.85;
}

/* 뱃지 클릭 미니 팝업 */
.feed-badge-tooltip {
  position: absolute;
  left: 0;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #E0E0E0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 12px 16px;
  max-width: 280px;
  z-index: 100;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-primary, #1A1A1F);
  animation: fadeIn 0.15s ease;
}

.feed-badge-tooltip-grade {
  font-weight: 700;
  margin-bottom: 4px;
}

.feed-badge-tooltip-desc {
  color: var(--color-text-secondary, #6B6B76);
  font-size: 12px;
}

.feed-badge-tooltip-sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--color-text-secondary, #6B6B76);
  border-top: 1px solid var(--color-border, #e5e5ea);
  padding-top: 5px;
}

/* PR (개인 기록) 배지 — 별표 + 테두리 강조 */
.feed-training-badge[data-pr="true"] {
  box-shadow: 0 0 0 2px #FFD700, 0 0 8px rgba(255, 215, 0, 0.4);
  position: relative;
}
.feed-training-badge[data-pr="true"]::after {
  content: '\2605';
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 11px;
  color: #FFD700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  line-height: 1;
}

/* PR 팝업 헤더 */
.feed-badge-tooltip-pr {
  font-weight: 700;
  font-size: 12px;
  color: #DAA520;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid #FFD70040;
}

/* 스파크라인 트렌드 */
.feed-badge-tooltip-spark {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border, #e5e5ea);
}
.feed-badge-spark-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-text-secondary, #6B6B76);
  margin-bottom: 4px;
}
.feed-badge-sparkline {
  display: block;
  width: 100%;
  height: 40px;
}

/* 스파크라인 토글 버튼 행 */
.feed-badge-spark-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.feed-badge-spark-toggle button {
  flex: 1;
  padding: 2px 0;
  font-size: 10px;
  line-height: 1.4;
  border: 1px solid var(--color-border, #E0E0E0);
  background: transparent;
  color: var(--color-text-secondary, #6B6B76);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.feed-badge-spark-toggle button.active {
  background: var(--color-accent, #1476f2);
  color: #fff;
  border-color: var(--color-accent, #1476f2);
}
.feed-badge-spark-toggle button:disabled {
  opacity: 0.35;
  cursor: default;
}
.feed-badge-spark-toggle button:not(:disabled):not(.active):hover {
  background: var(--color-border, #E0E0E0);
}

/* 스파크라인 SVG 본문 영역 */
.feed-badge-spark-body {
  min-height: 40px;
}

/* 지도 (카드 하단 풀폭) */
.activity-map {
  width: 100%;
  height: 360px;
  background: var(--color-border);
}

/* 상세 분석 토글 버튼 */
.detail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  padding: 14px;
  margin-top: var(--space-3);
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  box-shadow: var(--shadow-1);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
  border-left: 3px solid var(--color-primary); /* 액센트 라인 */
}

.detail-toggle:hover {
  background: var(--color-primary-light);
}

.detail-toggle-arrow {
  transition: transform var(--transition-normal);
}

.detail-toggle.open .detail-toggle-arrow {
  transform: rotate(180deg);
}

/* 상세 분석 섹션 */
.detail-section {
  margin-top: var(--space-3);
  animation: fadeIn var(--transition-slow);
}

/* 요약 카드 그리드 (상세 내) */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* 스탯 카드 */
.stat-card {
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-1);
  border-top: 2px solid var(--color-border); /* 상단 미묘한 경계선 */
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* 분석 카드 */
.analysis-card {
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-3);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

/* 차트 컨테이너 */
.chart-container {
  width: 100%;
  height: 280px;
  position: relative;
}

/* ===== HR 존 레이아웃 — 테이블 스타일 ===== */
.hr-zone-content {
  display: block;
}

.hr-zone-table {
  width: 100%;
}

.strava-hr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.strava-hr-row td {
  padding: 14px 10px;
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
}

.strava-hr-row:last-child td {
  border-bottom: 1px solid var(--color-border);
}

.strava-hr-zone {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  width: 36px;
  text-align: center;
}

.strava-hr-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  width: 100px;
}

.strava-hr-range {
  font-size: 13px;
  color: var(--color-text-secondary);
  width: 90px;
  text-align: center;
}

.strava-hr-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  width: 64px;
  text-align: center;
}

.strava-hr-pct {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  width: 56px;
  text-align: center;
}

.strava-hr-bar-cell {
  width: 40%;
  padding-right: 16px !important;
}

/* HR 존 바 — 직선 처리 */
.strava-hr-bar {
  height: 20px;
  border-radius: 0;                /* 직선 처리 */
  transition: width 0.6s ease;
  min-width: 2px;
}

/* HR 존 푸터 */
.strava-hr-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-1) 0;
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.strava-hr-footer a {
  color: var(--color-primary);
  text-decoration: none;
}

.strava-hr-footer a:hover {
  text-decoration: underline;
}

/* ===== 로딩 오버레이 ===== */
.analysis-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px var(--space-5);
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  box-shadow: var(--shadow-1);
}

/* 스피너 — 원형 유지 */
.analysis-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-bottom: var(--space-4);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.analysis-loading p {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* HR 데이터 없음 메시지 */
.no-data-msg {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* ===== Activity Feed ===== */
.feed-section {
  max-width: 700px;
  margin-top: var(--space-6);
}
/* 모바일: feed-section 너비를 사이드바와 동일하게 100% 확장 */
@media (max-width: 1023px) {
  .feed-section { max-width: 100%; }
}

/* 빈 상태 */
.feed-empty-state {
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  padding: 60px var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-1);
}

.feed-empty-state svg {
  margin-bottom: var(--space-4);
}

.feed-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.feed-empty-desc {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.feed-empty-desc strong {
  color: var(--color-primary);
}

/* ── 피드 필터바 ── */
.feed-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  flex-wrap: wrap;
}
.feed-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feed-filter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.feed-filter-select-wrap {
  position: relative;
}
.feed-filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 30px 7px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  min-width: 130px;
  transition: border-color var(--transition-fast);
}
.feed-filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
}
.feed-filter-chevron {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-secondary);
}
.feed-filter-custom {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.feed-filter-date-input {
  padding: 7px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-primary);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.feed-filter-date-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.feed-filter-date-sep {
  font-size: 13px;
  color: var(--color-text-tertiary);
  line-height: 34px;
  flex-shrink: 0;
}
.feed-filter-apply-btn {
  padding: 7px 16px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.5;
  transition: opacity var(--transition-fast);
}
.feed-filter-apply-btn:hover { opacity: 0.85; }

/* 피드 카드 */
.feed-card {
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  box-shadow: var(--shadow-1);
  overflow: hidden;
  margin-bottom: var(--space-4);
  animation: fadeIn var(--transition-slow);
  border-left: 3px solid var(--color-primary); /* 왼쪽 액센트 라인 */
}

.feed-card--ride  { border-left-color: var(--sport-color-ride,  #D55E00); }
.feed-card--run   { border-left-color: var(--sport-color-run,   #0072B2); }
.feed-card--walk  { border-left-color: var(--sport-color-walk,  #009E73); }
.feed-card--hike  { border-left-color: var(--sport-color-hike,  #7B2D8E); }
.feed-card--squat   { border-left-color: var(--sport-color-squat, #E69F00); }
.feed-card--plank   { border-left-color: var(--sport-color-plank, #56B4E9); }
.feed-card--circuit { border-left-color: var(--sport-color-circuit, #B22068); }

.feed-card .activity-map {
  height: 280px;
  cursor: pointer;
}
.feed-card .activity-map .gm-style,
.feed-card .activity-map .gm-style * {
  cursor: pointer !important;
}

.feed-card .detail-section {
  padding: 0 var(--space-4) var(--space-4);
  margin-top: 0;
}

.feed-card .detail-toggle {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--color-border-light);
  border-left: none;               /* 피드 카드 내부이므로 중복 방지 */
}

/* 더 보기 버튼 */
.feed-load-more {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;                /* 직선 처리 */
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  margin-top: var(--space-1);
}

.feed-load-more:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* ===== 저장 상태 토스트 ===== */
.save-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--color-text-primary);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: 0;                /* 직선 처리 */
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transition: all var(--transition-slow);
  z-index: 3000;
  pointer-events: none;
}

.save-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== Activity Detail Page (ad-*) ===== */

/* 뒤로가기 버튼 */
.ad-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: 0;                /* 직선 처리 */
  transition: all var(--transition-fast);
  margin-bottom: var(--space-4);
  min-height: var(--touch-min);    /* 터치 타겟 최소 크기 */
}

.ad-back-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-border);
}

/* 헤더 섹션 */
.ad-header-section {
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--color-primary); /* 액센트 라인 — 스포츠 클래스로 덮어씌워짐 */
}
/* 스포츠별 좌측 액센트 컬러 (feed-card--* 와 동일 컬러 토큰 사용) */
.ad-header-section--ride  { border-left-color: var(--sport-color-ride,  #D55E00); }
.ad-header-section--run   { border-left-color: var(--sport-color-run,   #0072B2); }
.ad-header-section--walk  { border-left-color: var(--sport-color-walk,  #009E73); }
.ad-header-section--hike  { border-left-color: var(--sport-color-hike,  #7B2D8E); }
.ad-header-section--squat   { border-left-color: var(--sport-color-squat, #E69F00); }
.ad-header-section--crunch  { border-left-color: var(--sport-color-crunch, #CC79A7); }
.ad-header-section--plank   { border-left-color: var(--sport-color-plank,  #56B4E9); }
.ad-header-section--circuit { border-left-color: var(--sport-color-circuit, #B22068); }

/* 스포츠 뱃지 */
.ad-sport-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 10px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;                /* 직선 처리 */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}

.ad-sport-badge-icon {
  flex-shrink: 0;
}

.ad-title {
  font: var(--text-display);
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-1);
  letter-spacing: var(--tracking-tight);
}

.ad-date {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

/* 자전거 + 파워소스 메타 정보 */
.ad-bike-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--color-text-secondary);
}

.ad-bike-meta-icon {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

.ad-bike-meta-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.ad-bike-meta-type {
  color: var(--color-text-secondary);
}

.ad-bike-meta-sep {
  color: var(--color-text-disabled);
  margin: 0 2px;
}

.ad-bike-meta .power-source-badge {
  font-size: 11px;
  margin-left: 2px;
}

/* 설명 */
.ad-description {
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  white-space: pre-wrap;
}

/* 지도 */
.ad-map {
  width: 100%;
  height: 400px;
  background: var(--color-border);
  border-radius: 0;                /* 직선 처리 */
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

/* ===== 지도 + 고도 연동 래퍼 (Strava 스타일) ===== */
.ad-sync-wrap {
  position: relative;
  margin-bottom: var(--space-4);
}

.ad-sync-wrap .ad-map {
  margin-bottom: 0;
}

/* 고도 차트 (지도 바로 아래 연결) */
.ad-sync-elev {
  width: 100%;
  height: 120px;
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  cursor: crosshair;
  position: relative;
}

/* 호버 정보 툴팁 */
.ad-sync-tooltip {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  gap: 16px;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.ad-sync-tooltip-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ad-sync-tooltip-item::before {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}

#ttDist::before  { content: 'Dist'; }
#ttElev::before  { content: 'Elev'; }
#ttGrade::before { content: 'Grade'; }
#ttSpeed::before { content: 'Speed'; }

/* 통계 섹션 */
.ad-stats-section {
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-4);
  padding: var(--space-5) var(--space-6);
}

.ad-stats-primary {
  display: flex;
  gap: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.ad-primary-item {
  min-width: 0;
}

.ad-primary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.1;
  white-space: nowrap;
}

.ad-primary-unit {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-left: 2px;
}

.ad-primary-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.ad-stats-detail-wrap {
  padding-top: var(--space-3);
  position: relative;
}

.ad-stats-detail {
  overflow: hidden;
  transition: max-height 0.25s ease, opacity var(--transition-normal);
}

/* 상세 통계 테이블 */
.ad-detail-table {
  width: 100%;
  border-collapse: collapse;
}

.ad-detail-table th {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: left;
  padding: var(--space-1) var(--space-4) var(--space-2) 0;
}

.ad-detail-table th:first-child {
  width: 30%;
}

.ad-detail-table td {
  font-size: 15px;
  color: var(--color-text-primary);
  padding: var(--space-1) var(--space-4) var(--space-1) 0;
  border-top: 1px solid var(--color-border-light);
}

.ad-detail-label {
  font-weight: 500;
  color: var(--color-text-secondary) !important;
  font-size: 14px !important;
}

/* ── 등산 지표 Info 모달 ── */
.ad-metric-info-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}
.ad-metric-info-modal {
  background: var(--color-surface, #FFFFFF);
  border-radius: 12px;
  width: 440px;
  max-width: 95%;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.ad-metric-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border, #E2E2E8);
  position: sticky;
  top: 0;
  background: var(--color-surface, #FFFFFF);
  z-index: 1;
}
.ad-metric-info-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1F);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}
.ad-metric-info-close {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--color-text-secondary, #6B6B76);
  border-radius: 6px;
  transition: all 0.12s ease;
}
.ad-metric-info-close:hover {
  background: var(--color-bg, #F7F7F8);
  color: var(--color-text-primary, #1A1A1F);
}
.ad-metric-info-body {
  padding: 20px;
}
.ad-metric-info-desc {
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: keep-all;
  color: var(--color-text-secondary, #6B6B76);
  margin-bottom: 16px;
}
.ad-metric-info-gauge {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: visible;
  margin-bottom: 20px;
  position: relative;
}
.ad-metric-info-gauge-seg {
  height: 100%;
  border-radius: 0;
}
.ad-metric-info-gauge-seg:first-child { border-radius: 5px 0 0 5px; }
.ad-metric-info-gauge-seg:last-child { border-radius: 0 5px 5px 0; }
.ad-metric-info-gauge-marker {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.ad-metric-info-gauge-marker-line {
  width: 3px;
  height: 22px;
  background: var(--color-text-primary, #1A1A1F);
  border-radius: 2px;
}
.ad-metric-info-gauge-marker-label {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  white-space: nowrap;
}
.ad-metric-info-scale {
  display: flex;
  font-size: 11px;
  color: var(--color-text-secondary, #999);
  margin-bottom: 16px;
}
.ad-metric-info-scale span {
  flex: 1;
  text-align: center;
}
.ad-metric-info-result {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  background: var(--color-bg, #F7F7F8);
  line-height: 1.5;
}
.ad-metric-info-result-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
}
.ad-metric-info-result-grade {
  font-size: 14px;
  font-weight: 600;
}
.ad-metric-info-result-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
  margin-top: 2px;
}
.ad-metric-info-tip {
  background: var(--color-bg, #F7F7F8);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary, #6B6B76);
}
.ad-metric-info-tip strong {
  color: var(--color-text-primary, #1A1A1F);
}
.ad-metric-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-style: normal;
  color: var(--color-text-secondary, #999);
  border: 1px solid var(--color-border, #ddd);
  border-radius: 50%;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  transition: all 0.12s ease;
}
.ad-metric-info-icon:hover {
  color: var(--color-primary, #D55E00);
  border-color: var(--color-primary, #D55E00);
}

/* ── 칼로리 보정 Breakdown 카드 ── */
.ad-cal-breakdown {
  margin: 4px 0 8px;
  padding: 10px 14px;
  background: var(--color-bg-secondary, #f8f8f8);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 0;
  font-size: 12px;
  line-height: 1.8;
}
.ad-cal-breakdown-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}
.ad-cal-breakdown-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
}
.ad-cal-bk-label {
  color: var(--color-text-secondary, #666);
}
.ad-cal-bk-value {
  font-weight: 500;
  color: var(--color-text-primary, #333);
  text-align: right;
}
.ad-cal-bk-tip {
  font-size: 10px;
  color: var(--color-text-secondary, #999);
  font-weight: 400;
  margin-left: 4px;
}
.ad-cal-breakdown-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 2px solid var(--color-text-primary, #333);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-primary, #D55E00);
}

@media (max-width: 480px) {
  .ad-metric-info-overlay {
    align-items: flex-end;
    justify-content: flex-start;
    width: 100vw;
    overflow-x: hidden;
  }
  .ad-metric-info-modal {
    width: 100vw;
    max-width: 100vw;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
    margin: 0;
  }
}

/* 토글 버튼 */
.ad-toggle-btn {
  position: absolute;
  top: var(--space-3);
  right: 0;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;                /* 직선 처리 */
  padding: var(--space-1) 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.ad-toggle-btn:hover {
  background: var(--color-surface-hover);
}

.ad-stats-detail.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* 차트 카드 */
.ad-chart-card {
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-4);
}

/* 데이터 없음 안내 메시지 (graceful degradation) */
.ad-no-data-msg {
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 13px;
  padding: 24px 0;
  margin: 0;
}

/* 로딩 */
.ad-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px var(--space-5);
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  box-shadow: var(--shadow-1);
}

.ad-loading p {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* 에러 */
.ad-error {
  background: var(--color-surface);
  border-radius: 0;                /* 직선 처리 */
  padding: 60px var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-1);
}

.ad-error p {
  font-size: 16px;
  color: var(--color-text-secondary);
}

.ad-content {
  max-width: 800px;
  animation: fadeIn var(--transition-slow);
}

/* 피드 카드 타이틀 링크 스타일 */
.feed-title-link {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.feed-title-link:hover {
  color: var(--color-primary);
}

/* ===== Responsive — 태블릿 (768px) ===== */
@media (max-width: 768px) {
  .nav {
    padding: 0 var(--space-3);
  }

  .subscribe-btn {
    display: none;
  }

  .main-content {
    padding: var(--space-5) var(--space-4);
  }

  .activity-stats {
    gap: 0;
  }

  .activity-stat-value {
    font-size: 16px;
  }

  .activity-stat-divider {
    margin: 0 var(--space-2);
  }

  .activity-map {
    height: 260px;
  }

  .summary-cards {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .hr-zone-content {
    flex-direction: column;
  }

  .hr-zone-chart-wrap {
    width: 160px;
    height: 160px;
  }

  .feed-card .activity-map {
    height: 200px;
  }

  .feed-empty-state {
    padding: var(--space-10) var(--space-4);
  }

  /* Activity Detail 반응형 */
  .ad-title {
    font-size: 22px;
  }

  .ad-map {
    height: 280px;
  }

  .ad-sync-elev {
    height: 80px;
  }

  .ad-sync-tooltip {
    font-size: 11px;
    gap: 8px;
    padding: 4px 10px;
  }

  .ad-stats-primary {
    gap: var(--space-5);
  }

  .ad-primary-value {
    font-size: 22px;
  }

  .ad-header-section {
    padding: var(--space-5) var(--space-4);
  }

  .ad-stats-section {
    padding: var(--space-4);
  }
}

/* ===== Responsive — 모바일 (480px) ===== */
@media (max-width: 480px) {
  .main-content {
    padding: var(--space-4) var(--space-3);
  }

  .activity-header {
    padding: var(--space-3) var(--space-4) 0;
  }

  .activity-title-row {
    padding: var(--space-3) var(--space-4) 0;
  }

  .activity-stats {
    padding: var(--space-3) var(--space-4);
  }

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

  .activity-stat-value {
    font-size: 15px;
  }

  .summary-cards {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2);
  }

  .stat-card {
    padding: var(--space-3);
  }

  .stat-value {
    font-size: 16px;
  }

  .analysis-card {
    padding: var(--space-4);
  }

  .ad-stats-primary {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .ad-primary-value {
    font-size: 20px;
  }

  /* 터치 타겟 최소 크기 보장 */
  .detail-toggle,
  .feed-load-more {
    min-height: var(--touch-min);
  }
}

/* ===== Responsive — 소형 모바일 (360px) ===== */
@media (max-width: 360px) {
  .main-content {
    padding: var(--space-3) var(--space-2);
  }
}
/* 기존 360px .nav-links 숨김은 이제 768px 햄버거 메뉴로 대체됨 */

/* ═══════════════════════════════════════════════════════════
   모바일 햄버거 메뉴 + 슬라이드 사이드바 시스템
   768px 이하에서 활성화. 데스크탑은 기존 nav-links 유지.
   ═══════════════════════════════════════════════════════════ */

/* ── 햄버거 버튼 (데스크탑: 숨김) ── */
.hamburger-btn {
  display: none;               /* 데스크탑에서 숨김 */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
/* 햄버거 3줄 아이콘 (CSS only) */
.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 1px;
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}
.hamburger-icon {
  position: relative;
}
.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
}
.hamburger-icon::before { top: -6px; }
.hamburger-icon::after  { top:  6px; }
/* 열림 상태: X 모양으로 전환 */
.hamburger-btn.active .hamburger-icon {
  background: transparent;
}
.hamburger-btn.active .hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.hamburger-btn.active .hamburger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ── 모바일 메뉴 오버레이 (배경 딤) ── */
.mobile-menu-overlay {
  display: none;               /* JS로 활성화 */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

/* ── 모바일 슬라이드 메뉴 패널 ── */
.mobile-menu {
  display: none;               /* 데스크탑에서 숨김 */
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh;              /* 모바일 주소창 고려 */
  background: var(--color-surface);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-3);
  flex-direction: column;
}
.mobile-menu.open {
  transform: translateX(0);
}

/* 메뉴 헤더: 프로필 영역 */
.mobile-menu-header {
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.mobile-menu-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.mobile-menu-user-info {
  flex: 1;
  min-width: 0;
}
.mobile-menu-user-name {
  font: var(--text-title);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-menu-user-email {
  font: var(--text-caption);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 메뉴 본문: 네비게이션 링크 */
.mobile-menu-nav {
  padding: var(--space-3) 0;
  flex: 1;
}
.mobile-menu-section {
  padding: var(--space-2) var(--space-5);
  font: var(--text-micro);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font: var(--text-body);
  color: var(--color-text-primary);
  text-decoration: none;
  min-height: var(--touch-min);
  transition: background var(--transition-fast);
}
.mobile-menu-link:hover,
.mobile-menu-link:active {
  background: var(--color-surface-hover);
}
.mobile-menu-link.active {
  color: var(--color-primary);
  font-weight: 600;
}
.mobile-menu-link svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.mobile-menu-link.active svg {
  color: var(--color-primary);
}
.mobile-menu-divider {
  height: 1px;
  background: var(--color-border-light);
  margin: var(--space-2) var(--space-5);
}

/* 메뉴 푸터: 로그아웃 등 */
.mobile-menu-footer {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border-light);
  margin-top: auto;
}

/* ── 모바일 검색 버튼 (데스크탑: 숨김) ── */
.mobile-search-btn {
  display: none;               /* 데스크탑에서 숨김 */
}

/* ── 모바일 FAB(+) 버튼: 우하단 고정 ── */
.mobile-fab {
  display: none;               /* 데스크탑에서 숨김 */
}

/* ── 768px 이하: Strava 패턴 [≡ 좌] [FitLink 중앙] [🔍 우] ── */
@media (max-width: 768px) {
  /* nav: flex 유지, 좌우 정렬 */
  .nav {
    padding: 0 var(--space-3);
    position: relative;          /* 로고 absolute 기준 */
  }

  /* ── 좌측: 햄버거만 표시 ── */
  .hamburger-btn {
    display: flex;
    order: -1;                   /* 로고보다 앞 */
  }
  /* 좌측의 검색·구분선·네비 모두 숨김 */
  .nav-left .search-btn,
  .nav-links,
  .nav-divider {
    display: none !important;
  }

  /* ── 중앙: 로고를 헤더 정중앙에 고정 ── */
  .nav-left .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 1;                  /* 다른 요소 위에 표시 */
    pointer-events: auto;
  }

  /* ── 우측: 검색만 표시, 나머지 모바일 메뉴로 이동 ── */
  .nav-right {
    gap: var(--space-1);
  }
  .nav-right .notification-btn,
  .nav-right .profile-dropdown,
  .nav-right .add-btn--squat,
  .nav-right .subscribe-btn,
  .nav-right .guest-login-btn,
  .nav-right .add-btn {
    display: none !important;
  }
  /* 모바일 검색 버튼 표시 */
  .nav-right .mobile-search-btn {
    display: flex;
  }
  .mobile-fab {
    display: flex;
    position: fixed;
    bottom: 24px;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2);
    z-index: 900;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }
  .mobile-fab:active {
    transform: scale(0.92);
    background: var(--color-primary-hover);
  }

  /* 모바일 메뉴 패널 표시 가능 상태 */
  .mobile-menu {
    display: flex;
  }
}

/* ── 480px 이하: 추가 모바일 최적화 ── */
@media (max-width: 480px) {
  /* 피드 카드 통계 영역 줄바꿈 허용 */
  .activity-stats {
    flex-wrap: wrap;
  }
  .activity-stat-divider {
    display: none;
  }
  .activity-stat {
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-2);
  }

  /* 요약 카드 2열 전환 */
  .summary-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 피드 카드 지도 높이 축소 */
  .feed-card .activity-map {
    height: 180px;
  }

  /* FAB 위치 조정 */
  .mobile-fab {
    bottom: 16px;
    right: 12px;
    width: 48px;
    height: 48px;
  }
}

/* ── 가로 넘침 방지 안전장치 ── */
html, body {
  overflow-x: hidden;
}

/* ===== 파워 표시 스타일 ===== */

/* 파워 소스 뱃지 (추정/실측) */
.power-source-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 0;                /* 직선 처리 */
  font-size: 11px;
  font-weight: 600;
  margin-left: var(--space-2);
  vertical-align: middle;
}

.power-source-estimated {
  background: #FFF3E0;
  color: var(--color-primary);
}

.power-source-device {
  background: var(--color-green-bg);
  color: #2E7D32;
}

/* 파워 프로필 푸터 */
.ad-power-footer {
  padding: var(--space-3) 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-3);
}

.ad-power-footer a {
  color: var(--color-primary);
  text-decoration: none;
}

.ad-power-footer a:hover {
  text-decoration: underline;
}

/* ===== HR Zone 인사이트 (훈련 분석 & 코칭) ===== */

/* 토글 버튼 */
.ad-zone-insight-toggle {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  border: none;
  border-top: 1px solid var(--color-border-light);
  background: transparent;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}

.ad-zone-insight-toggle:hover {
  background: var(--color-primary-light);
}

/* 인사이트 컨테이너 */
.ad-zone-insight {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-light);
  animation: adInsightFadeIn 0.25s ease;
}

@keyframes adInsightFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 섹션 간격 */
.ad-zone-insight-section {
  margin-bottom: var(--space-5);
}

.ad-zone-insight-section:last-child {
  margin-bottom: 0;
}

/* 섹션 제목 */
.ad-zone-insight-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-3);
  margin-right: 5px;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

/* 훈련 분류 배지 */
.ad-zone-insight-badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 0;
  margin-bottom: var(--space-2);
}

/* 분류 설명 텍스트 */
.ad-zone-insight-desc {
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.65;
  margin: var(--space-2) 0 0;
}

/* Zone별 해석 목록 */
.ad-zone-insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ad-zone-insight-list li {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-primary);
}

.ad-zone-insight-list li:last-child {
  margin-bottom: 0;
}

/* "주요 Zone" 태그 */
.ad-zone-dominant-tag {
  display: inline-block;
  padding: 1px 8px;
  margin-left: 6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 0;
  vertical-align: middle;
}

/* Zone 해석 상세/효과 텍스트 */
.ad-zone-insight-detail {
  color: var(--color-text-secondary);
  font-size: 12.5px;
}

.ad-zone-insight-effect {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
}

/* 코칭 조언 목록 */
.ad-zone-coaching-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ad-zone-coaching-list li {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-light);
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-primary);
}

.ad-zone-coaching-list li:last-child {
  margin-bottom: 0;
}

/* Max HR 경고 */
.ad-zone-insight-warn {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--color-red);
  background: #FFF5F5;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-red);
  font-weight: 500;
}

/* 반응형: 모바일 480px */
@media (max-width: 480px) {
  .ad-zone-insight {
    padding: var(--space-3) var(--space-3);
  }
  .ad-zone-insight-badge {
    font-size: 12px;
    padding: 5px 10px;
  }
  .ad-zone-insight-desc {
    font-size: 13px;
  }
  .ad-zone-insight-list li,
  .ad-zone-coaching-list li {
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
  }
  .ad-zone-insight-title {
    font-size: 12px;
  }
}

/* ── 구간 비교 카드 ─────────────────────────── */
/* 서브타이틀 + 토글 버튼을 한 줄에 flex 배치 */
#adSegmentHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
#adSegmentHeader .ad-seg-subtitle {
  margin: 0; /* flex 배치로 하단 마진 제거 */
}

.ad-seg-subtitle {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

/* 자전거 필터 토글 칩 */
.ad-seg-bike-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ad-seg-bike-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ad-seg-bike-toggle.active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

/* 같은 자전거 0개일 때 빈 결과 메시지 */
.ad-seg-empty {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  padding: 16px 0;
  text-align: center;
}

/* PR(개인 최고기록) 메달 배지 — 셀 값 뒤에 인라인 표시 */
.ad-seg-pr {
  font-size: 0.85em;
  cursor: default;
  margin-left: 2px;
  vertical-align: middle;
}
.ad-seg-scroll {
  overflow-x: auto;
}
.ad-seg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.ad-seg-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.ad-seg-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.ad-seg-current td {
  background: var(--color-primary-light);
  font-weight: 600;
}
.ad-seg-now {
  font-size: 0.72rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}
.ad-seg-link {
  color: var(--color-primary);
  text-decoration: none;
}
.ad-seg-link:hover {
  text-decoration: underline;
}

/* ===== 파워 존 분석 (Coggan 7-Zone) ===== */

/* 파워 존 테이블 (.strava-pwr-* — HR 테이블 미러링) */
.strava-pwr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.strava-pwr-row td {
  padding: 12px 10px;
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
}

.strava-pwr-row:last-child td {
  border-bottom: 1px solid var(--color-border);
}

.strava-pwr-zone {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  width: 36px;
  text-align: center;
}

.strava-pwr-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  width: 120px;
}

.strava-pwr-range {
  font-size: 13px;
  color: var(--color-text-secondary);
  width: 110px;
  text-align: center;
}

.strava-pwr-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  width: 64px;
  text-align: center;
}

.strava-pwr-pct {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  width: 56px;
  text-align: center;
}

.strava-pwr-bar-cell {
  width: 35%;
  padding-right: 16px !important;
}

.strava-pwr-bar {
  height: 18px;
  border-radius: 0;
  transition: width 0.6s ease;
  min-width: 2px;
}

/* 파워 존 푸터 */
.strava-pwr-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-1) 0;
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.strava-pwr-footer a {
  color: var(--color-primary);
  text-decoration: none;
}

.strava-pwr-footer a:hover {
  text-decoration: underline;
}

/* IF/TSS/NP/FTP 메트릭 행 */
.ad-power-zone-metrics {
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.ad-power-zone-sep {
  color: var(--color-text-tertiary);
  margin: 0 2px;
}

/* 파워 전용 훈련 분류 배지 (보라색 — HR 오렌지와 시각 구분) */
.ad-power-zone-insight-badge {
  display: inline-block;
  padding: 6px 14px;
  background: #7950f2;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 0;
  margin-bottom: var(--space-2);
}

/* 반응형: 모바일 480px (파워 존) */
@media (max-width: 480px) {
  .ad-power-zone-metrics {
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
  }
  .strava-pwr-name {
    width: 90px;
    font-size: 12px;
  }
  .strava-pwr-range {
    width: 80px;
    font-size: 12px;
  }
  .strava-pwr-row td {
    padding: 10px 6px;
  }
  .ad-power-zone-insight-badge {
    font-size: 12px;
    padding: 5px 10px;
  }
}

/* ==========================================================
   등산(Hike) 전용 스타일
   ========================================================== */

/* ── 난이도 배지 ── */
.ad-difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;
  margin-left: 8px;
  letter-spacing: 0.3px;
  vertical-align: middle;
}
.difficulty-easy       { background: #E8F5E9; color: #2E7D32; }
.difficulty-moderate   { background: #FFF3E0; color: #E65100; }
.difficulty-hard       { background: #FBE9E7; color: #D84315; }
.difficulty-very-hard  { background: #FCE4EC; color: #C62828; }
.difficulty-extreme    { background: #F3E5F5; color: #6A1B9A; }

/* ── HDI (종합 난이도) 카드 ── */
.hdi-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.hdi-score-box {
  text-align: center;
  min-width: 72px;
}
.hdi-score-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.hdi-score-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.hdi-gauge-area {
  flex: 1;
}
.hdi-grade-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 6px;
}
.hdi-stars {
  font-size: 14px;
  letter-spacing: 1px;
}
.hdi-grade-name {
  font-size: 14px;
  font-weight: 600;
}
.hdi-gauge-bar {
  height: 10px;
  background: var(--color-surface-alt);
  border-radius: 5px;
  overflow: hidden;
}
.hdi-gauge-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.6s ease;
}
/* HDI 3요소 분해 */
.hdi-components {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}
.hdi-comp-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hdi-comp-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  min-width: 80px;
  flex-shrink: 0;
}
.hdi-comp-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--color-surface-alt);
  border-radius: 3px;
  overflow: hidden;
}
.hdi-comp-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.hdi-comp-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 32px;
  text-align: right;
}
/* HDI 분석 코멘트 */
.hdi-insight {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ── 경사도 분포 바 차트 ── */
.grade-dist-content {
  padding: 0 var(--space-3);
}
.grade-dist-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: var(--space-3) 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.grade-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.grade-dist-label {
  width: 70px;
  font-size: 12px;
  text-align: right;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.grade-dist-bar-wrap {
  flex: 1;
  height: 18px;
  background: var(--color-surface-alt);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
.grade-dist-bar {
  height: 100%;
  border-radius: 0;
  transition: width 0.4s ease;
  min-width: 2px;
}
.grade-dist-value {
  width: 90px;
  font-size: 11px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  text-align: left;
}

/* 경사도별 색상 — 오르막 */
.grade-bar-flat       { background: #66BB6A; }
.grade-bar-gentle     { background: #8BC34A; }
.grade-bar-moderate   { background: #FFC107; }
.grade-bar-steep      { background: #FF9800; }
.grade-bar-very-steep { background: #FF5722; }
.grade-bar-extreme    { background: #D32F2F; }

/* 경사도별 색상 — 내리막 */
.grade-bar-d-flat       { background: #81D4FA; }
.grade-bar-d-gentle     { background: #42A5F5; }
.grade-bar-d-moderate   { background: #1E88E5; }
.grade-bar-d-steep      { background: #1565C0; }
.grade-bar-d-very-steep { background: #0D47A1; }
.grade-bar-d-extreme    { background: #1A237E; }

/* ── 구간 분석 테이블 ── */
.section-content {
  padding: 0 var(--space-3);
}
.section-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.section-table th {
  text-align: left;
  padding: 8px 6px;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.section-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
}
.section-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.section-type-climb   { color: #D32F2F; }
.section-type-descent { color: #1565C0; }
.section-type-flat    { color: #757575; }

/* 구간 페이스 강조 */
.section-pace {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .grade-dist-label { width: 55px; font-size: 11px; }
  .grade-dist-value { width: 70px; font-size: 10px; }

  .section-table { font-size: 12px; }
  .section-table th,
  .section-table td { padding: 6px 4px; }
}

/* ==========================================================
   GPX 업로드 확인 모달
   ========================================================== */

.upload-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.upload-modal {
  background: var(--color-surface, #FFFFFF);
  border-radius: 0;
  width: 520px;
  max-width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-3, 0 8px 30px rgba(0,0,0,0.12));
}

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

.upload-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  margin: 0;
}

.upload-modal-close {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary, #6B6B76);
  transition: all 0.12s ease;
  min-width: 44px;
  min-height: 44px;
}

.upload-modal-close:hover {
  background: var(--color-bg, #F7F7F8);
  color: var(--color-text-primary, #1A1A1F);
}

/* 분석 결과 미리보기 */
.upload-stats {
  display: flex;
  gap: 0;
  padding: 0;
  background: var(--color-surface-alt, #FAFAFA);
  border-bottom: 1px solid var(--color-border, #E2E2E8);
}

.upload-stat {
  flex: 1;
  padding: 14px 16px;
  text-align: center;
  border-right: 1px solid var(--color-border, #E2E2E8);
}

.upload-stat:last-child {
  border-right: none;
}

.upload-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary, #9C9CA8);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.upload-stat-value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  font-variant-numeric: tabular-nums;
}

/* 입력 폼 */
.upload-form {
  padding: 20px 24px;
}

.upload-field {
  margin-bottom: 16px;
}

.upload-field:last-child {
  margin-bottom: 0;
}

.upload-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #6B6B76);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.upload-input,
.upload-select,
.upload-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-primary, #1A1A1F);
  border: 1px solid var(--color-border, #E2E2E8);
  border-radius: 0;
  outline: none;
  transition: border-color 0.12s ease;
  box-sizing: border-box;
  min-height: 44px;
}

.upload-input:focus,
.upload-select:focus,
.upload-textarea:focus {
  border-color: var(--color-primary, #D55E00);
  box-shadow: 0 2px 0 0 var(--color-primary, #D55E00);
}

.upload-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B76' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.upload-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}

.upload-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
  line-height: 1.4;
}

.upload-hint a {
  color: var(--color-primary, #D55E00);
  text-decoration: none;
  font-weight: 500;
}

.upload-hint a:hover {
  text-decoration: underline;
}

/* 푸터 */
.upload-modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--color-border, #E2E2E8);
}

.upload-cancel {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary, #6B6B76);
  background: var(--color-bg, #F7F7F8);
  border: none;
  cursor: pointer;
  transition: background 0.12s ease;
  min-height: 44px;
}

.upload-cancel:hover {
  background: var(--color-border, #E2E2E8);
}

.upload-save {
  padding: 10px 32px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary, #D55E00);
  border: none;
  cursor: pointer;
  transition: background 0.12s ease;
  min-height: 44px;
}

.upload-save:hover {
  background: var(--color-primary-hover, #CC3C08);
}

.upload-save:disabled {
  background: var(--color-text-disabled, #C4C4CC);
  cursor: not-allowed;
}

/* 모바일 하단 시트 */
@media (max-width: 480px) {
  .upload-overlay {
    align-items: flex-end;
  }
  .upload-modal {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    border-top: 3px solid var(--color-primary, #D55E00);
  }
  .upload-stats {
    flex-wrap: wrap;
  }
  .upload-stat {
    flex: 1 1 45%;
    padding: 10px 12px;
  }
}

/* ══════════════════════════════════════════════════
   FTP 자동 추정 — activity-detail 배너
   ══════════════════════════════════════════════════ */

/* 파워 존 카드 내 추정 배너 */
.ad-ftp-estimate-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 4px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #6ee7b7;
  border-radius: 10px;
  font-size: 13px;
  color: #065f46;
  flex-wrap: wrap;
}

.ad-ftp-estimate-banner .ftp-est-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.ad-ftp-estimate-banner .ftp-est-text {
  flex: 1;
  min-width: 180px;
  line-height: 1.5;
}

.ad-ftp-estimate-banner .ftp-est-label {
  font-weight: 600;
  font-size: 14px;
  color: #047857;
}

.ad-ftp-estimate-banner .ftp-est-delta {
  font-size: 12px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 20px;
  font-weight: 600;
}

.ad-ftp-estimate-banner .ftp-est-delta.positive {
  background: #d1fae5;
  color: #065f46;
}

.ad-ftp-estimate-banner .ftp-est-delta.negative {
  background: #fee2e2;
  color: #991b1b;
}

.ad-ftp-estimate-banner .ftp-est-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* "설정에 저장" 버튼 */
.ad-ftp-estimate-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
}

.ad-ftp-estimate-btn:hover {
  background: #059669;
}

.ad-ftp-estimate-btn:active {
  transform: scale(0.97);
}

.ad-ftp-estimate-btn.saved {
  background: #6b7280;
  cursor: default;
}

/* ══════════════════════════════════════════════════
   FTP 자동 추정 — settings 페이지 패널
   ══════════════════════════════════════════════════ */

.ftp-auto-panel {
  margin-bottom: 20px;
}

/* 자동 추정 실행 버튼 */
.ftp-auto-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: #f0fdf4;
  color: #047857;
  border: 1.5px solid #6ee7b7;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ftp-auto-btn:hover {
  background: #dcfce7;
  border-color: #34d399;
}

.ftp-auto-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 추정 결과 패널 */
.ftp-auto-result {
  margin-top: 14px;
  padding: 16px 18px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.ftp-auto-result-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 10px;
}

.ftp-auto-result-value {
  font-size: 28px;
  font-weight: 700;
  color: #10b981;
  margin: 0 0 4px;
}

.ftp-auto-result-value span {
  font-size: 15px;
  color: #6b7280;
  font-weight: 400;
}

.ftp-auto-result-basis {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 14px;
  line-height: 1.5;
}

.ftp-auto-result-basis strong {
  color: #374151;
}

/* 자동 추정 "추가" 버튼 */
.ftp-auto-add-btn {
  padding: 8px 18px;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.ftp-auto-add-btn:hover {
  background: #059669;
}

.ftp-auto-add-btn:disabled {
  background: #6b7280;
  cursor: default;
}

.ftp-auto-empty {
  font-size: 13px;
  color: #9ca3af;
  padding: 12px 0 0;
}

/* ══════════════════════════════════════════════════
   Critical Power (CP) 모델 카드
   ══════════════════════════════════════════════════ */

/* 카드 제목 옆 뱃지 */
.cp-model-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(88, 86, 214, 0.10);
  color: #5856d6;
  border: 1px solid rgba(88, 86, 214, 0.30);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

/* CP / W' / R² 3개 지표 행 */
.cp-metrics-row {
  display: flex;
  gap: 0;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--color-border-light, #f0f0f4);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cp-metric-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 24px 0 0;
  position: relative;
}

/* 세로 구분선 (마지막 제외) */
.cp-metric-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--color-border-light, #f0f0f4);
}

.cp-metric-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary, #1a1a1f);
  line-height: 1.1;
}

.cp-metric-unit {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary, #6b7280);
  margin-left: 3px;
  vertical-align: super;
}

.cp-metric-label {
  font-size: 11px;
  color: var(--color-text-tertiary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 3px;
}

/* CP vs FTP 비교 배너 */
.cp-ftp-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.cp-ftp-text {
  font-size: 13px;
  color: #374151;
}

/* GPS 추정 파워 경고 */
.cp-est-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
}

.cp-est-warning-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* 인사이트 텍스트 영역 */
.cp-insight {
  margin-top: 14px;
  padding: 0 2px;
}

.cp-insight p {
  font-size: 13px;
  color: #374151;
  line-height: 1.65;
  margin: 0 0 5px;
  padding-left: 14px;
  position: relative;
}

.cp-insight p::before {
  content: '•';
  position: absolute;
  left: 2px;
  color: #9ca3af;
}

/* 반응형: 작은 화면에서 CP 지표 줄바꿈 */
@media (max-width: 480px) {
  .cp-metrics-row {
    gap: 14px;
  }
  .cp-metric-item {
    padding: 0;
  }
  .cp-metric-item:not(:last-child)::after {
    display: none;
  }
  .cp-metric-value {
    font-size: 24px;
  }
}

/* ════════════════════════════════════════════
   Run (런닝) 전용 스타일
   ════════════════════════════════════════════ */

/* ── 스포츠 배지 Run 색상 (activity-detail 헤더) */
.ad-sport-badge.ad-sport-run {
  background: #e8f5e9;
  color: #2e7d32;
}

/* ── Run: 페이스 프로필 카드 인사이트 */
#adRunPaceInsight {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-surface);
  border-left: 3px solid #2e7d32;
  border-radius: 0 4px 4px 0;
}
#adRunPaceInsight p { margin: 4px 0; }

/* ── Run: km 스플릿 배지 (Positive / Negative Split) */
.run-split-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.run-split-badge.negative { background: #e8f5e9; color: #2e7d32; } /* 네거티브 스플릿 = 후반 빠름 */
.run-split-badge.positive { background: #fff3cd; color: #856404; } /* 포지티브 스플릿 = 후반 느림 */
.run-split-badge.even     { background: #e3f2fd; color: #1565c0; } /* 균등 스플릿 */

/* ── Run: km 스플릿 테이블 */
.run-splits-table-wrap {
  margin-top: 14px;
  overflow-x: auto;
}
.run-splits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.run-splits-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border);
}
.run-splits-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
.run-splits-table tr:last-child td { border-bottom: none; }
.run-splits-table .split-pace-cell { font-weight: 600; font-variant-numeric: tabular-nums; }
.run-splits-table .split-elev-up   { color: #c0392b; }
.run-splits-table .split-elev-down { color: #2e7d32; }
.run-splits-table .split-elev-flat { color: var(--color-text-secondary); }
.run-splits-table .split-best      { background: #fffde7; } /* 최고 스플릿 하이라이트 */
/* 걷기 정지 시간 셀 — 주의 환기용 주황색 */
.walk-split-stop {
  color: #EF6C00;
  font-weight: 600;
  font-size: 12px;
}

/* ── Run: 페이스 존 카드 (파워 존과 동일 패턴) */
.run-pace-zone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.run-pace-zone-label {
  width: 90px;
  font-weight: 500;
  color: var(--color-text-primary);
  flex-shrink: 0;
}
.run-pace-zone-bar-wrap {
  flex: 1;
  background: var(--color-border);
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
}
.run-pace-zone-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.run-pace-zone-time {
  width: 54px;
  text-align: right;
  color: var(--color-text-secondary);
  font-size: 12px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.run-pace-zone-pct {
  width: 38px;
  text-align: right;
  color: var(--color-text-secondary);
  font-size: 12px;
  flex-shrink: 0;
}
/* 페이스 존 색상 (심박 존과 유사한 팔레트) */
.rpz-1 { background: #b2b2b2; }
.rpz-2 { background: #7ec8e3; }
.rpz-3 { background: #4bc47c; }
.rpz-4 { background: #f5a623; }
.rpz-5 { background: #e14b4b; }

/* 페이스 존 임계 페이스 표시 */
.run-tp-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
  padding: 6px 10px;
  background: var(--color-surface);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.run-tp-label strong { color: var(--color-text-primary); }

/* ── Run: 에어로빅 이격 지수 카드 */
.run-decoupling-info {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-left: 6px;
  letter-spacing: 0.3px;
}

.run-decoupling-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.run-dc-half {
  background: var(--color-surface);
  border-radius: 6px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
}
.run-dc-half-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.run-dc-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
}
.run-dc-row-label { color: var(--color-text-secondary); }
.run-dc-row-value { font-weight: 600; font-variant-numeric: tabular-nums; }

.run-decoupling-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.run-decoupling-result.dc-excellent { background: #e8f5e9; border-left: 4px solid #2e7d32; }
.run-decoupling-result.dc-good      { background: #e8f5e9; border-left: 4px solid #66bb6a; }
.run-decoupling-result.dc-fair      { background: #fffde7; border-left: 4px solid #fdd835; }
.run-decoupling-result.dc-poor      { background: #ffebee; border-left: 4px solid #e53935; }

.run-dc-pct-value {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.run-dc-pct-value.dc-excellent,
.run-dc-pct-value.dc-good      { color: #2e7d32; }
.run-dc-pct-value.dc-fair      { color: #856404; }
.run-dc-pct-value.dc-poor      { color: #c62828; }

.run-dc-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 4px;
}
.run-dc-badge.dc-excellent { background: #c8e6c9; color: #1b5e20; }
.run-dc-badge.dc-good      { background: #c8e6c9; color: #2e7d32; }
.run-dc-badge.dc-fair      { background: #fff9c4; color: #f57f17; }
.run-dc-badge.dc-poor      { background: #ffcdd2; color: #b71c1c; }

.run-dc-insight {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.run-dc-insight p { margin: 6px 0; }
.run-dc-insight p::before { content: '• '; color: #2e7d32; font-weight: bold; }

/* 반응형 */
@media (max-width: 480px) {
  .run-decoupling-grid { grid-template-columns: 1fr; }
  .run-dc-pct-value { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════
   Run: 건강 효과 요약 카드 (Health Impact Card)
   ══════════════════════════════════════════════════════ */

/* 상단: 강도 뱃지 + 칼로리 */
.run-health-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* 강도 뱃지 */
.run-health-intensity-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.rhi-recovery  { background: #f0f0f0; color: #616161; }
.rhi-fatburn   { background: #e3f2fd; color: #1565c0; }   /* 지방 연소: 파랑 */
.rhi-aerobic   { background: #e8f5e9; color: #2e7d32; }   /* 유산소: 녹색 */
.rhi-hiintensity { background: #fff3e0; color: #e65100; } /* 고강도: 주황 */
.rhi-maxeffort { background: #ffebee; color: #b71c1c; }   /* 전력: 빨강 */

/* 칼로리 블록 */
.run-health-cal-block {
  text-align: right;
  flex-shrink: 0;
}
.run-health-cal-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.run-health-cal-unit {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-left: 3px;
}
.run-health-fat-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* 건강 효과 체크리스트 */
.run-health-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-bottom: 14px;
}
.run-health-check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-primary);
}
.run-health-check-item .rhc-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.run-health-check-item.rhc-inactive {
  color: var(--color-text-secondary);
  opacity: 0.55;
}

/* 다음 달리기 제안 */
.run-health-next {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid #2e7d32;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.5;
}
.run-health-next::before {
  content: '💡 다음 달리기: ';
  font-weight: 600;
  color: #2e7d32;
}

/* ── 케이던스 등급 뱃지 (stats 테이블 인라인) */
.ad-cad-grade {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  color: #fff;
  line-height: 1.6;
}

/* ── 오늘의 코칭 요약 카드 */
.run-coach-card {
  background: var(--color-card-bg, #fff);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.run-coach-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-text-primary);
}
.run-coach-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-primary);
}
.run-coach-item:last-child { border-bottom: none; }
.run-coach-item-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.run-coach-item-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 56px;
  flex-shrink: 0;
  padding-top: 2px;
}
.run-coach-item-text { flex: 1; }

/* ── 코스 비교 추세 판정 */
.run-seg-trend {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════════════════
   Run: 달리기 상세 분석 (Myotest) — 삼성헬스 부가 데이터
   ═══════════════════════════════════════════════════════ */

/* 각 지표 섹션 구분 */
.myo-metric-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
}
.myo-metric-section:last-child { border-bottom: none; }

/* 헤더: 지표명 + overall 배지 */
.myo-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.myo-metric-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text, #1a1a2e);
}
.myo-metric-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.myo-overall-label {
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
}
.myo-overall-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0;
}
.myo-score-excellent { background: #dcfce7; color: #166534; }
.myo-score-good      { background: #cffafe; color: #155e75; }
.myo-score-poor      { background: #ffedd5; color: #9a3412; }

/* score_ratio 범례 */
.myo-legend {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.myo-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-secondary, #6B6B76);
}
.myo-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 0;
}

/* 차트 영역 */
.myo-chart-wrap {
  position: relative;
  height: 180px;
  margin-bottom: 6px;
}

/* 평균값 표시 */
.myo-avg {
  text-align: right;
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
  font-weight: 500;
}

/* 소개 텍스트 (접이식) */
.myo-intro {
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  padding-bottom: 12px;
}
.myo-intro-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent, #D55E00);
  padding: 4px 0;
}
.myo-intro-toggle-icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}
.myo-intro-body {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-secondary, #6B6B76);
}
.myo-intro-body p { margin: 0 0 8px; }
.myo-intro-body h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #1a1a2e);
  margin: 12px 0 4px;
}
.myo-intro-note {
  font-size: 11px;
  color: var(--color-text-muted, #9CA3AF);
  font-style: italic;
}

/* 지표별 설명 + 기준 범위 */
.myo-metric-desc {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-secondary, #6B6B76);
}
.myo-metric-desc p { margin: 0 0 8px; }

/* 기준 범위 표시 */
.myo-ranges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.myo-range-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
}
.myo-range-label {
  font-weight: 600;
}
.myo-range-value {
  color: var(--color-text-secondary, #6B6B76);
}
.myo-range-excellent { background: #dcfce7; color: #166534; }
.myo-range-good      { background: #cffafe; color: #155e75; }
.myo-range-poor      { background: #ffedd5; color: #9a3412; }
.myo-range-excellent .myo-range-value { color: #166534; }
.myo-range-good .myo-range-value      { color: #155e75; }
.myo-range-poor .myo-range-value      { color: #9a3412; }

/* 드릴 프로그램 추천 (overall_score === 0 일 때) */
.myo-drill-section {
  margin-top: 10px;
  border-left: 3px solid var(--color-primary, #D55E00);
  background: var(--color-primary-light, #FFF0E8);
  padding: 12px 14px;
}
.myo-drill-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary, #D55E00);
  margin-bottom: 10px;
}
.myo-drill-icon-header {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.myo-drill-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.myo-drill-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.myo-drill-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary, #D55E00);
  margin-top: 1px;
}
.myo-drill-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.myo-drill-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1F);
}
.myo-drill-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
  line-height: 1.4;
}

/* 추세 분석 (Myotest 복수 세션 시계열 비교) */
.myo-trend-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
  margin: 0 0 12px;
  line-height: 1.5;
}
.myo-trend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.myo-trend-item {
  min-width: 0;  /* grid overflow 방지 */
}
.myo-trend-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #1a1a2e);
  margin-bottom: 6px;
}
.myo-trend-chart-wrap {
  position: relative;
  height: 120px;
}

/* 반응형 */
@media (max-width: 480px) {
  .myo-chart-wrap { height: 150px; }
  .myo-metric-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .myo-legend { gap: 8px; }
  .myo-ranges { flex-direction: column; gap: 4px; }
  .myo-trend-grid { grid-template-columns: 1fr; }
  .myo-trend-chart-wrap { height: 100px; }
}

/* ===== Walk 전용 스타일 ===== */

/* ── 스포츠 배지 Walk 색상 (activity-detail 헤더) */
.ad-sport-badge.ad-sport-walk {
  background: #e0f2f1;
  color: #00796B;
}

/* ===== Squat 전용 스타일 ===== */

/* ── 스쿼트 activity-detail 카드 내부 요소 ── */
/* 원칙: border-radius: 0 (직선 처리). pill 진행 바·원형 도트·뱃지만 예외 */

/* Card 1: 히어로 배너 */
.sq-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 0;                /* 직선 처리 */
  border-left: 4px solid var(--sport-color-squat, #E69F00);
  color: #fff;
}
.sq-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sq-hero-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.sq-hero-sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}

/* Card 1: 메트릭 그리드 */
.sq-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-border-light, #EDEDF0);
}
.sq-metric {
  text-align: center;
  padding: 12px 6px;
  border-bottom: 1px solid var(--color-border-light, #EDEDF0);
  border-right: 1px solid var(--color-border-light, #EDEDF0);
}
.sq-metric:nth-child(3n) { border-right: none; }
.sq-metric:nth-child(n+4) { border-bottom: none; }
.sq-metric-label {
  font-size: 11px;
  color: var(--color-text-secondary, #6B6B76);
  margin-bottom: 4px;
}
.sq-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  font-variant-numeric: tabular-nums;
}
.sq-metric-value.accent {
  font-size: 22px;
}

/* Card 3: 심박 구간 스택 바 */
.sq-zone-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;             /* pill — walk 패턴 */
  overflow: hidden;
  margin-bottom: 16px;
}
.sq-zone-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

/* Card 3: Zone 아이템 리스트 */
.sq-zone-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-light, #EDEDF0);
}
.sq-zone-item:last-child { border-bottom: none; }
.sq-zone-item.muted { opacity: 0.35; }
.sq-zone-item.primary {
  background: var(--color-surface-alt, #FAFAFA);
  margin: 0 -16px;               /* ad-chart-card padding 반전 → full-bleed */
  padding: 10px 16px;
}
.sq-zone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.sq-zone-name {
  font-weight: 700;
  font-size: 13px;
}
.sq-zone-range {
  font-size: 11px;
  color: var(--color-text-secondary, #888);
}
.sq-zone-badge {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;           /* pill 뱃지 — 예외 허용 */
}
.sq-zone-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
  margin-top: 3px;
}
.sq-zone-stat {
  text-align: right;
  flex-shrink: 0;
}
.sq-zone-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  font-variant-numeric: tabular-nums;
}
.sq-zone-time {
  font-size: 11px;
  color: var(--color-text-secondary, #888);
}

/* Card 4: 강도 헤더 (게이지 + 레벨) */
.sq-eval-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-light, #EDEDF0);
  margin-bottom: 14px;
}
.sq-eval-pct {
  font-size: 18px;
  font-weight: 900;
}
.sq-eval-level {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 3px;
}
.sq-eval-level-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
  line-height: 1.4;
}

/* Card 4: 섹션 (볼륨·코칭) */
.sq-eval-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light, #EDEDF0);
}
.sq-eval-section:last-child { border-bottom: none; }
.sq-eval-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  margin-bottom: 8px;
}
.sq-eval-vol-label {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;           /* pill 뱃지 */
}
.sq-eval-vol-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-primary, #1A1A1F);
  margin-bottom: 4px;
}
.sq-eval-text {
  font-size: 13px;
  color: var(--color-text-primary, #333);
  line-height: 1.65;
}

/* Card 4: AT/ANT 역치 분석 */
.sq-eval-accent {
  border-left: 4px solid var(--sport-color-squat, #E69F00);
  border-radius: 0;               /* 직선 처리 */
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 12px;
  color: var(--color-text-primary, #444);
  line-height: 1.6;
}
.sq-eval-accent-title {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 5px;
}

/* Card 4: 동기부여 마무리 */
.sq-eval-closing {
  text-align: center;
  padding: 14px 10px;
  border-radius: 0;               /* 직선 처리 */
  border-top: 1px solid var(--color-border-light, #EDEDF0);
  margin-top: 4px;
}
.sq-eval-closing-emoji {
  font-size: 22px;
  margin-bottom: 4px;
}
.sq-eval-closing-msg {
  font-size: 13px;
  color: var(--color-text-primary, #444);
  line-height: 1.55;
  font-weight: 500;
}

/* ── 서킷 루틴 카드 ── */
.sq-routine-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sq-routine-table td { padding: 8px 6px; border-bottom: 1px solid var(--color-border-light, #eee); vertical-align: top; }
.sq-routine-idx { width: 24px; color: var(--color-text-secondary, #888); font-weight: 700; text-align: center; }
.sq-routine-muscle { display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 600; color: #fff; }
.sq-routine-en { font-size: 11px; color: var(--color-text-tertiary, #aaa); margin-top: 2px; }
.sq-routine-equip {
  display: inline-block; font-size: 10px; padding: 1px 5px;
  background: var(--color-bg-secondary, #F0F0F5);
  color: var(--color-text-secondary, #6d6d78);
  margin-right: 4px; vertical-align: middle;
}
.sq-routine-reps { min-width: 80px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; }
.sq-routine-footer { padding: 10px 6px; font-size: 12px; color: var(--color-text-secondary, #666); border-top: 2px solid var(--color-border, #ddd); }
.sq-routine-empty { text-align: center; padding: 24px 16px; color: var(--color-text-secondary, #888); }

/* ── 스쿼트 피드 요약 카드 (지도 대체) — 좌측 SVG + 우측 지표 ── */
.sq-feed-summary {
  display: flex;
  min-height: 180px;
  border-radius: 0;
  overflow: hidden;
  margin: 8px 0 4px;
  border: 1px solid var(--color-border-light, #EDEDF0);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sq-feed-summary:hover {
  box-shadow: 0 4px 16px rgba(198, 40, 40, 0.10);
  transform: translateY(-1px);
}
.sq-feed-visual {
  width: 33%;
  background: linear-gradient(160deg, #ffcdd2 0%, #ffebee 60%, #fff5f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 20px;
  position: relative;
}
.sq-feed-icon {
  width: 150px;
  height: 150px;
}
.sq-feed-info {
  flex: 1;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--color-border-light, #EDEDF0);
}
.sq-feed-headline {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-light, #EDEDF0);
}
.sq-feed-reps {
  font-size: 34px;
  font-weight: 800;
  color: var(--sport-color-squat, #E69F00);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.sq-feed-reps-sub {
  font-size: 13px;
  color: var(--color-text-secondary, #6B6B76);
  margin-top: 4px;
  letter-spacing: 0.2px;
}
.sq-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
}
.sq-feed-grid-label {
  font-size: 11px;
  color: var(--color-text-secondary, #6B6B76);
  margin-bottom: 2px;
}
.sq-feed-grid-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  font-variant-numeric: tabular-nums;
}

/* ── 스포츠 배지 Squat 색상 (activity-detail 헤더) */
.ad-sport-badge.ad-sport-squat {
  background: #ffebee;
  color: var(--sport-color-squat, #E69F00);
}
/* ── 스포츠 배지 Crunch 색상 (activity-detail 헤더) */
.ad-sport-badge.ad-sport-crunch {
  background: #EFEBE9;
  color: var(--sport-color-crunch, #CC79A7);
}
/* ── 스포츠 배지 Plank 색상 (activity-detail 헤더) */
.ad-sport-badge.ad-sport-plank {
  background: #E0F2F1;
  color: var(--sport-color-plank, #56B4E9);
}
/* ── 스포츠 배지 Circuit 색상 (activity-detail 헤더) */
.ad-sport-badge.ad-sport-circuit {
  background: #fff3e0;
  color: var(--sport-color-circuit, #B22068);
}

/* ── 스쿼트 세션 피커 모달 ─────────────────────────────── */
.squat-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.squat-picker-modal {
  background: var(--color-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  width: min(480px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.squat-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--color-border, #E2E2E8);
  flex-shrink: 0;
}
.squat-picker-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, #1a1a2e);
}
.squat-picker-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-secondary, #6b6b76);
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s;
}
.squat-picker-close:hover { background: var(--color-surface-alt, #f5f5f8); }

/* 빈 상태 (폴더 미선택) */
.squat-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 24px;
  text-align: center;
  color: var(--color-text-secondary, #6b6b76);
  font-size: 14px;
}
.squat-picker-empty-icon {
  font-size: 40px;
  line-height: 1;
}
.squat-picker-folder-btn {
  background: var(--sport-color-squat, #E69F00);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.squat-picker-folder-btn:hover { background: #c62828; }
.squat-picker-hint {
  font-size: 12px;
  color: var(--color-text-muted, #9b9baa);
  margin: 0;
}

/* 스캔 중 스피너 */
#squatPickerScanning {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
  color: var(--color-text-secondary, #6b6b76);
  font-size: 14px;
}
.squat-picker-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--color-border, #E2E2E8);
  border-top-color: var(--sport-color-squat, #E69F00);
  border-radius: 50%;
  animation: squatSpin .7s linear infinite;
}
@keyframes squatSpin { to { transform: rotate(360deg); } }

/* 세션 목록 패널 */
#squatPickerLoaded {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#squatPickerFound {
  padding: 12px 20px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #6b6b76);
  flex-shrink: 0;
}
.squat-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 8px;
}
.squat-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  gap: 12px;
}
.squat-session-row:hover,
.squat-session-row:focus {
  background: #ffebee;
  outline: none;
}
.squat-session-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #1a1a2e);
}
.squat-session-time {
  font-size: 13px;
  color: var(--color-text-secondary, #6b6b76);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: auto;
  padding-right: 6px;
}
.squat-session-arrow {
  font-size: 18px;
  color: var(--color-text-muted, #9b9baa);
  flex-shrink: 0;
}
.squat-picker-no-sessions {
  text-align: center;
  color: var(--color-text-secondary, #6b6b76);
  font-size: 14px;
  padding: 24px 16px;
  line-height: 1.6;
  margin: 0;
}
.squat-picker-footer {
  padding: 10px 20px 16px;
  border-top: 1px solid var(--color-border, #E2E2E8);
  flex-shrink: 0;
}
.squat-picker-footer button {
  background: none;
  border: 1px solid var(--color-border, #E2E2E8);
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text, #1a1a2e);
  transition: background .15s;
  width: 100%;
}
.squat-picker-footer button:hover { background: var(--color-surface-alt, #f5f5f8); }

/* 걸음 수 블록 (adWalkSteps) */
.walk-steps-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 14px;
  padding: 10px 14px;
  background: var(--color-surface-alt, #FAFAFA);
  border-radius: 6px;
  border: 1px solid var(--color-border, #E2E2E8);
}
.walk-steps-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary, #D55E00);
  font-variant-numeric: tabular-nums;
}
.walk-steps-label {
  font-size: 14px;
  color: var(--color-text-secondary, #6b6b76);
}
.walk-steps-goal {
  font-size: 12px;
  color: var(--color-text-secondary, #6b6b76);
  margin-left: 6px;
}
/* 10,000보 달성 시 초록색 강조 */
.walk-steps-goal.achieved {
  color: #2e7d32;
  font-weight: 600;
}

/* 걷기 강도 요약 메트릭 행 */
.walk-intensity-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--color-text-primary, #1A1A1F);
}
.walk-intensity-metrics .wim-label {
  color: var(--color-text-secondary, #6b6b76);
  margin-right: 4px;
}
.walk-intensity-metrics .wim-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 걷기 강도 존 막대 */
.walk-zone-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.walk-zone-bar-label {
  width: 80px;
  font-size: 11px;
  color: var(--color-text-secondary, #6b6b76);
  flex-shrink: 0;
  white-space: nowrap;
}
.walk-zone-bar-track {
  flex: 1;
  height: 14px;
  background: var(--color-border-light, #EDEDF0);
  border-radius: 7px;
  overflow: hidden;
}
.walk-zone-bar-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.5s ease;
}
/* 존별 색상 */
.wz-1 { background: #80D8FF; }   /* 산책 — 연파랑 */
.wz-2 { background: #69F0AE; }   /* 가벼운 걷기 — 연초록 */
.wz-3 { background: #FF9800; }   /* 빠른 걷기(WHO) — 주황 ⭐ */
.wz-4 { background: #F44336; }   /* 파워워킹 — 빨강 */
.wz-5 { background: #7B1FA2; }   /* 경보 — 보라 */
/* WHO 권고 구간 강조 */
.wz-3-highlight { outline: 2px solid #FF9800; }
.walk-zone-bar-time {
  width: 46px;
  font-size: 11px;
  color: var(--color-text-secondary, #6b6b76);
  text-align: right;
  flex-shrink: 0;
}

/* 걷기 강도 인사이트 (WHO 목표 달성 여부) */
.walk-intensity-insight {
  font-size: 13px;
  color: var(--color-text-primary, #1A1A1F);
  margin-top: 14px;
  line-height: 1.6;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--color-surface-alt, #FAFAFA);
  border: 1px solid var(--color-border, #E2E2E8);
}

/* 다음 걷기 제안 (Walk 버전) */
.walk-health-next-advice {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E2E2E8);
  border-left: 4px solid var(--color-primary, #D55E00);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--color-text-primary, #1A1A1F);
  line-height: 1.5;
  margin-top: 12px;
}
.walk-health-next-advice::before {
  content: '💡 다음 걷기: ';
  font-weight: 600;
  color: var(--color-primary, #D55E00);
}

/* ── 10,000보 진행률 바 */
.walk-steps-progress-wrap {
  margin: -6px 0 14px;   /* walk-steps-block 바로 아래 붙임 */
  padding: 0 2px;
}
.walk-steps-progress-track {
  height: 8px;
  background: var(--color-border-light, #EDEDF0);
  border-radius: 4px;
  overflow: hidden;
}
.walk-steps-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00BCD4, #00796B);
  border-radius: 4px;
  transition: width 0.6s ease;
  min-width: 4px;
}
.walk-steps-progress-fill.achieved {
  background: linear-gradient(90deg, #43A047, #2e7d32);
}

/* ── HR Zone 빈 행 (0% 존) 흐리게 표시 */
.strava-hr-row--empty td {
  opacity: 0.35;
}

/* ── Walk Zone 퍼센트 레이블 (시간 옆) */
.walk-zone-bar-pct {
  font-size: 10px;
  color: var(--color-text-secondary, #6b6b76);
  margin-left: 3px;
  font-variant-numeric: tabular-nums;
}

/* 반응형 */
@media (max-width: 480px) {
  .run-health-top { flex-direction: column; align-items: flex-start; }
  .run-health-cal-block { text-align: left; }
  .run-health-checklist { grid-template-columns: 1fr; }
  .walk-steps-block { flex-wrap: wrap; }
  .walk-intensity-metrics { gap: 8px 16px; }
}

/* ═══════════════════════════════════════════════════════
   대시보드 2컬럼 레이아웃 (Strava 스타일 사이드바)
   ═══════════════════════════════════════════════════════ */

/* ── 외부 래퍼: flex 2컬럼 ── */
.dashboard-layout {
  display: flex;
  gap: var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
  align-items: flex-start;
}

/* ── 사이드바: 280px 고정 + Sticky ── */
.dashboard-sidebar {
  width: 280px;
  flex-shrink: 0;
  align-self: flex-start;       /* 메인 콘텐츠 높이에 맞춰 늘어나지 않음 */
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  max-height: calc(100vh - var(--header-h) - var(--space-8));
  overflow-y: auto;
  scrollbar-width: thin;        /* Firefox: 얇은 스크롤바 표시 */
  scrollbar-color: #ccc transparent;
}
.dashboard-sidebar::-webkit-scrollbar { width: 3px; }
.dashboard-sidebar::-webkit-scrollbar-thumb { background: #ccc; }
.dashboard-sidebar::-webkit-scrollbar-track { background: transparent; }

/* ── 메인 영역: flex 자식으로 centering 위임 ── */
.dashboard-layout .main-content {
  flex: 1;
  min-width: 0;
  max-width: 700px;
  margin: 0;
  margin-top: -50px;
  padding: var(--space-10) 0;
}

/* ── 사이드바 프로필 카드 ── */
.sidebar-profile-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  border-left: 3px solid var(--color-primary);
}
.sidebar-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface-alt);
}
.sidebar-profile-info {
  min-width: 0;
}
.sidebar-profile-name {
  display: block;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 위젯 카드 공통 ── */
.sidebar-widget {
  background: var(--color-surface);
  border-radius: 0;
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--color-primary);
}
.sidebar-widget-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* ── 공통 info 아이콘 버튼 (위젯 타이틀 우측) ── */
.info-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-tertiary, #aaa);
  padding: 0;
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}
.info-icon-btn:hover { color: var(--color-text-primary); }

/* ── 공통 info 모달 오버레이 ── */
.info-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: infoModalFadeIn 0.15s ease;
}
@keyframes infoModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.info-modal {
  background: var(--color-surface, #fff);
  max-width: 420px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.info-modal-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.info-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
}
.info-modal-close:hover { color: var(--color-text-primary); }
.info-modal-body { font-size: 13px; line-height: 1.7; color: var(--color-text-secondary); }
.info-modal-body h4 { font-size: 13px; font-weight: 700; color: var(--color-text-primary); margin: 14px 0 6px; }
.info-modal-body table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.info-modal-body th,
.info-modal-body td { text-align: left; padding: 4px 8px; font-size: 12px; border-bottom: 1px solid var(--color-border, #eee); }
.info-modal-body th { font-weight: 600; color: var(--color-text-primary); }

/* ── 주간 네비게이션 버튼 (◀ ▶) ── */
.week-nav-btn {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 9px;
  padding: 1px 5px;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.week-nav-btn:hover:not(:disabled) {
  background: var(--color-surface-alt);
  color: var(--color-primary);
}
.week-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
#weekNavLabel,
#monthNavLabel {
  text-transform: none;  /* 날짜 범위는 uppercase 불필요 */
}
.sidebar-loading {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
  padding: var(--space-4) 0;
}

/* ── Widget 1: 이번 주 요약 (2×2 grid) ── */
.weekly-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.weekly-stat-box {
  background: var(--color-surface-alt);
  padding: var(--space-2) var(--space-3);
}
.weekly-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: 2px;
}
.weekly-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}
.weekly-stat-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-left: 2px;
}

/* ── Widget 1/4: 스쿼트 별도 행 (2줄 계층 구조: 주지표 + 부지표) ── */
.weekly-squat-row {
  margin-top: 8px;
  padding: 7px 10px;
  background: var(--color-surface-alt);
  border-left: 3px solid var(--sport-color-squat, #E69F00);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
}
.weekly-squat-main {
  display: flex;
  align-items: center;
  gap: 6px;
}
.weekly-squat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  /* display:none 제거 — 컬러 도트로 통일 (SVG 아이콘 대체) */
}
.weekly-squat-icon {
  display: none; /* buildSportIcon SVG는 더 이상 사용하지 않음 */
}
.weekly-squat-label {
  font-weight: 600;
  color: var(--sport-color-squat, #E69F00);
  white-space: nowrap;
}
.weekly-squat-primary {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-text);
  font-size: 12px;
  white-space: nowrap;
}
.weekly-squat-sub {
  margin-top: 3px;
  padding-left: 13px; /* dot(7px) + gap(6px) = 13px 들여쓰기 */
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

/* ── Widget 3: 유산소/근력 섹션 구분선 (라벨 포함) ── */
.sport-section-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 5px;
}
.sport-section-divider::before,
.sport-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.sport-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  opacity: 0.65;
}

/* ── Widget 3: 스쿼트 칩(Badge) 레이아웃 ── */
.squat-chips-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 5px;
}
.squat-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(198, 40, 40, 0.09);
  color: var(--sport-color-squat, #E69F00);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(198, 40, 40, 0.15);
}

/* ── Widget 3: 구 구분선 (하위 호환 유지) ── */
.sport-row-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

/* ── Widget 2: 활동 스트릭 ── */
.streak-dots-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-3);
}
.streak-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.streak-dot-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}
.streak-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-border-light);
  border: 2px solid var(--color-border);
}
.streak-dot.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.streak-dot.today-empty {
  border-color: var(--color-primary);
  background: var(--color-border-light);
}
.streak-dot.future { opacity: 0.3; }
.streak-count-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.streak-count-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}
.streak-count-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ── 스트릭 알림 배너 ── */
.streak-alert {
  padding: 10px 14px;
  margin-bottom: var(--space-4);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  background: #FFF3E0;
  border-left: 4px solid #ff7a00;
  color: #e65100;
}
.streak-alert.hidden { display: none; }

/* ── 밸런스 경고 배너 ── */
.balance-alert {
  padding: 10px 14px;
  margin-bottom: var(--space-4);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  background: #FFEBEE;
  border-left: 4px solid #e84040;
  color: #b71c1c;
}
.balance-alert.hidden { display: none; }
.balance-alert a {
  color: #b71c1c;
  text-decoration: underline;
}

/* ── Scroll-to-Top FAB (전 페이지 공통) ── */
.scroll-top-fab {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-text-primary, #1a1a2e);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.scroll-top-fab.visible {
  opacity: 0.85;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.scroll-top-fab:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.scroll-top-fab:active {
  transform: translateY(0) scale(0.95);
}
@media (max-width: 768px) {
  .scroll-top-fab { bottom: 24px; right: 20px; width: 40px; height: 40px; }
}

/* ── 스트릭 목표 ── */
.streak-goal-bar     { height: 6px; background: #eee; overflow: hidden; margin: 6px 0 4px; }
.streak-goal-fill    { height: 100%; transition: width 0.5s; }

/* ── Widget 3: 스포츠별 현황 ── */
.sports-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sport-row { display: flex; flex-direction: column; gap: 4px; }
.sport-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sport-row-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sport-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sport-row-dist {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.sport-bar-track {
  height: 4px;
  background: var(--color-border-light);
  border-radius: 2px;
  overflow: hidden;
}
.sport-bar-fill {
  height: 100%;
  border-radius: 2px;
  min-width: 4px;
  transition: width 0.5s ease;
}
.sports-breakdown-empty {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
  padding: var(--space-3) 0;
}

/* ── 반응형: 1024px 미만 → 사이드바를 피드 상단에 수평 스택 ── */
@media (max-width: 1023px) {
  .dashboard-layout {
    display: flex;
    flex-direction: column;        /* 세로 스택: 사이드바 → 메인 */
    padding: 0;
  }

  .dashboard-sidebar {
    width: 100%;
    position: static;              /* sticky 해제 */
    max-height: none;
    overflow: visible;
    padding: var(--space-4) var(--space-6) 0;
  }

  /* 프로필 카드: 모바일에서 숨김 (상단 nav에 이미 표시) */
  .dashboard-sidebar .sidebar-profile-card { display: none; }

  /* 핵심 위젯(이번 주 요약 + 스트릭)은 2컬럼 그리드로 배치 */
  .dashboard-sidebar #widget-weekly,
  .dashboard-sidebar #widget-streak {
    display: block;
  }

  /* 2차 위젯: 접기 가능하도록 기본 숨김 (토글 버튼으로 열기) */
  .dashboard-sidebar #widget-sports,
  .dashboard-sidebar #widget-monthly,
  .dashboard-sidebar #widget-visitors {
    display: none;
  }
  /* 토글 열림 상태 */
  .dashboard-sidebar.sb-expanded #widget-sports,
  .dashboard-sidebar.sb-expanded #widget-monthly,
  .dashboard-sidebar.sb-expanded #widget-visitors {
    display: block;
  }

  .dashboard-layout .main-content {
    width: 100%;                     /* column 방향에서 전체 너비 확보 */
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-6) var(--space-6);
  }
}

/* ── 모바일 사이드바 토글 버튼 (1024px 미만에서만 표시) ── */
.sb-toggle-btn {
  display: none;                   /* 데스크탑: 숨김 */
}
@media (max-width: 1023px) {
  .sb-toggle-btn {
    display: block;
    width: 100%;
    padding: var(--space-2) 0;
    margin-top: var(--space-1);
    background: none;
    border: 1px dashed var(--color-border);
    color: var(--color-text-tertiary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }
  .sb-toggle-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
}

@media (max-width: 768px) {
  .dashboard-sidebar {
    padding: var(--space-3) var(--space-4) 0;
  }
  .dashboard-layout .main-content {
    padding: var(--space-5) var(--space-4);
  }
}
@media (max-width: 480px) {
  .dashboard-sidebar {
    padding: var(--space-2) var(--space-3) 0;
  }
  .dashboard-layout .main-content {
    padding: var(--space-4) var(--space-3);
  }
}

/* ── 사이드바 타이틀 뱃지 (이번 주 횟수 등 동적 주입용) ── */
.sidebar-title-badge {
  text-transform: none;          /* .sidebar-widget-title의 uppercase 상속 차단 */
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  letter-spacing: 0;
}

/* ── Widget 0: 오늘의 컨디션 ── */
#widget-condition.sidebar-widget {
  border-left-color: #43A047; /* JS에서 동적 변경 */
}

/* 컨디션 위젯 메인 레이아웃 */
.condition-main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* SVG 도넛 게이지 */
.condition-gauge {
  flex: 0 0 80px;
  position: relative;
  width: 80px;
  height: 80px;
}
.condition-gauge svg {
  transform: rotate(-90deg);
}
.condition-score-wrap {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.condition-score-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.condition-score-label {
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}

/* 우측 요인 + 코칭 영역 */
.condition-detail {
  flex: 1;
  min-width: 0;
}

/* 3요인 미니 바 */
.condition-factor {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
}
.condition-factor-label {
  flex: 0 0 70px;
  font-weight: 600;
  color: var(--color-text-secondary);
  line-height: 1.3;
}
/* 약어 아래 부가 설명 (일반인 친화) */
.condition-factor-sub {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  letter-spacing: 0;
}
.condition-factor-bar {
  flex: 1;
  height: 6px;
  background: var(--color-border, #e5e5ea);
  position: relative;
  overflow: hidden;
}
.condition-factor-fill {
  height: 100%;
  transition: width 0.3s ease;
}
.condition-factor-val {
  flex: 0 0 auto;
  min-width: 28px;
  text-align: right;
  font-size: 10px;
  font-weight: 600;
}
/* 추세 delta 표시 (요인 점수 옆) */
.condition-trend {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  margin-left: 2px;
}

/* 코칭 한마디 */
.condition-advice {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* 점수 산출 기준 (접이식) */
.condition-how {
  margin-top: 6px;
  font-size: 10px;
  color: var(--color-text-tertiary);
}
.condition-how summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-secondary);
  user-select: none;
}
.condition-how summary:hover {
  color: var(--color-text-primary);
}
.condition-how p {
  margin: 3px 0;
  line-height: 1.5;
}
.condition-how strong {
  color: var(--color-text-secondary);
}

/* ── Widget: 부위별 밸런스 도넛 ── */
#widget-balance.sidebar-widget {
  border-left-color: #7B1FA2;  /* 보라 — 밸런스/근력 계열 */
}
/* ── 사이드바 밸런스 미니 바 차트 ── */
.bal-widget-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bal-widget-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bal-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.bal-widget-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.bal-widget-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
}
.bal-widget-pct {
  font-weight: 700;
  font-size: 13px;
}
.bal-widget-track {
  position: relative;
  height: 14px;
  background: var(--color-bg-secondary, #f0f0f5);
  overflow: visible;
}
.bal-widget-fill {
  height: 100%;
  transition: width 0.4s ease;
}
.bal-widget-ideal {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 18px;
  background: var(--color-text-primary);
  opacity: 0.35;
}
.bal-widget-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin-top: 1px;
}
.bal-widget-grade {
  font-size: 10px;
  font-weight: 600;
  padding: 0 5px;
}
/* ── 사이드바 밸런스 상태 요약 ── */
.bal-widget-status {
  margin-top: var(--space-2);
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.5;
  background: var(--color-bg-secondary, #f8f8fa);
  color: var(--color-text-secondary);
}
.bal-widget-status strong {
  color: var(--color-text-primary);
}

/* 스포츠별 현황 뷰 토글 — 칼로리/볼륨 전환 */
.sports-view-toggle {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
  gap: 0;
}
.sports-view-btn {
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  border: 1px solid var(--color-border-light, #e0e0e0);
  background: transparent;
  color: var(--color-text-tertiary, #aaa);
  cursor: pointer;
}
.sports-view-btn:first-child { border-right: none; }
.sports-view-btn.active {
  background: var(--color-text-primary, #333);
  color: #fff;
  border-color: var(--color-text-primary, #333);
}

/* 위젯 기준 라벨 — "볼륨 기준", "칼로리 기준" 등 */
.widget-basis {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-tertiary, #aaa);
  margin-left: 4px;
}
/* 균형 위젯 출처 매핑 — "← 서킷, 스쿼트" */
.bal-widget-source {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-tertiary, #aaa);
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  display: inline-block;
  vertical-align: middle;
}
/* 균형 위젯 유산소 제외 안내 */
.bal-widget-note {
  margin-top: var(--space-1);
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--color-text-tertiary, #aaa);
}

/* ── Widget 4: 이번 달 요약 — 파란 계열 좌측 테두리로 구분 ── */
#widget-monthly.sidebar-widget {
  border-left-color: #1565C0;
}
#widget-monthly .sidebar-widget-title {
  color: var(--color-text-primary);
}

/* ── Widget 5: 방문자 ── */
.visitor-widget.sidebar-widget {
  border-left-color: #546E7A;  /* blue-grey — 데이터/분석 계열 */
}
.visitor-sparkline {
  display: block;
  width: 100%;
  height: auto;           /* viewBox 비율 유지 — 마커 원형 보장 */
  aspect-ratio: 236 / 52; /* viewBox와 동일 비율 */
  margin-top: var(--space-2);
}
.visitor-day-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.visitor-day-labels span {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.visitor-today {
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  letter-spacing: -0.01em;
}

/* ── 스포츠별 현황: 거리+횟수 텍스트 줄바꿈 방지 ── */
.sport-row-dist {
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   Maps 페이지 — 전체화면 지도 + 필터 패널
   ════════════════════════════════════════════════════════════ */

/* Maps 페이지 header: fixed 전환
   - Google Maps가 position:fixed + z-index:1000002 내부 요소를 생성하여
     sticky header의 stacking context를 뚫고 드롭다운 메뉴를 가림
   - header를 fixed로 전환하면 동일 stacking 레벨에서 z-index:1000이 우선 */
body:has(#mapsWrapper) .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* 지도 레이아웃 wrapper: position:fixed 담당
   (Google Maps 초기화 시 mapsContainer에 position:relative를 강제 설정하므로 분리) */
#mapsWrapper {
  position: fixed;
  top: calc(var(--header-h) + 52px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

/* 지도 컨테이너: wrapper 내부 전체 채움 */
#mapsContainer {
  width: 100%;
  height: 100%;
}

/* ── 필터 패널 ── */
.maps-filter-bar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);   /* 기존 --space-5(20px) → --space-6(24px): TL·main-content 기준으로 통일 */
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
  overflow-x: auto;
  scrollbar-width: none;
}
.maps-filter-bar::-webkit-scrollbar { display: none; }

.maps-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.maps-filter-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  flex-shrink: 0;
  margin: 0 var(--space-1);
}

/* ── 공통 필터 버튼 SSOT — 직선 처리 (Maps·Training Log 공유, border-radius:0 강제) ──
   .sport-filter-btn : 종목 토글 버튼 공유 클래스 (training-log 등 신규 페이지 사용)
   .maps-sport-btn   : Maps 페이지 기존 클래스 (하위 호환 유지)
   .period-filter-btn: 기간 버튼 공유 클래스
   .maps-period-btn  : Maps 페이지 기존 클래스
   ──────────────────────────────────────────────────────────────────── */
.sport-filter-btn,
.maps-sport-btn,
.period-filter-btn,
.maps-period-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 0;                          /* 직선 처리 */
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  color: var(--color-text-tertiary);
  line-height: 1.6;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.sport-filter-btn:hover,
.maps-sport-btn:hover,
.period-filter-btn:hover,
.maps-period-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

/* ── 스포츠 버튼 색상: config.js에서 SPORT_COLOR_MAP 기반 동적 CSS 자동 생성 ──
   비활성(테두리+텍스트), hover(6% 배경), 활성(단색+흰 텍스트)
   ★ 종목 추가 시 config.js SPORT_COLOR_MAP에만 등록하면 자동 적용됩니다. */

/* ── buildSportIcon() 동적 삽입 아이콘 정렬
      .sport-filter-btn / .maps-sport-btn 내부 아이콘 클래스
      fill="currentColor" 방식으로 주입되므로 버튼 CSS color 상속으로 색상 결정:
        inactive → color: var(--sport-color-*) → 종목색 아이콘
        active   → color: #fff                 → 흰색 아이콘 ── */
.sport-btn-icon {
  display: block;
  flex-shrink: 0;
  opacity: 0.9;                /* inactive: 살짝 소프트 */
}
/* active 상태: 흰 배경 위 완전 불투명 */
.sport-filter-btn.active .sport-btn-icon,
.maps-sport-btn.active .sport-btn-icon {
  opacity: 1;
}

/* 기간 버튼 활성: 브랜드 오렌지 */
.period-filter-btn.active,
.maps-period-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ── 경로 수 요약 텍스트 ── */
.maps-route-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ── 로딩 오버레이 ── */
.maps-loading-overlay {
  position: fixed;
  top: calc(var(--header-h) + 52px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 200;
  gap: var(--space-3);
}
.maps-loading-overlay.hidden { display: none; }

.maps-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.maps-loading-text {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── 빈 상태 오버레이 ── */
.maps-empty-state {
  position: fixed;
  top: calc(var(--header-h) + 52px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 150;
  pointer-events: none;
}
.maps-empty-state.hidden { display: none; }
.maps-empty-state p {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.maps-empty-sub {
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  font-weight: 400 !important;
}

/* ── Google Maps InfoWindow 커스텀 스타일 ── */
/* Google Maps 기본 팝업 컨테이너 border-radius 제거 */
.gm-style .gm-style-iw-c {
  border-radius: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  padding: 0 !important;
}
.gm-style .gm-style-iw-d {
  overflow: hidden !important;
  padding: 0 !important;
}
.gm-style .gm-style-iw-t::after {
  display: none;   /* 말풍선 꼬리 제거 */
}

.maps-info-window {
  font-family: inherit;
  min-width: 200px;
  padding: 12px 14px 10px;
  border-left: 3px solid currentColor;  /* 종목색 왼쪽 강조선 */
}
.maps-iw-sport {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 5px;
  opacity: 0.85;
}
.maps-iw-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text-primary, #1A1A1F);
  margin-bottom: 4px;
  line-height: 1.3;
}
.maps-iw-meta {
  font-size: 11px;
  color: var(--color-text-secondary, #6B6B76);
  margin-bottom: 2px;
}
.maps-iw-dist {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  margin-bottom: 10px;
}
.maps-iw-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary, #D55E00);
  text-decoration: none;
  letter-spacing: 0.2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.1s;
}
.maps-iw-link:hover {
  border-bottom-color: var(--color-primary, #D55E00);
  text-decoration: none;
}

/* ── 반응형: 모바일 필터바 ── */
@media (max-width: 767px) {
  .maps-filter-bar {
    gap: var(--space-1);
    padding: 0 var(--space-3);
  }
  .sport-filter-btn,
  .maps-sport-btn,
  .period-filter-btn,
  .maps-period-btn {
    padding: 3px 10px;
    font-size: 11px;
  }
}

/* ── Run splits: GAP 토글 버튼 ── */
.run-splits-gap-toggle {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 0;                           /* 직선 처리 */
  border: 1px solid var(--color-border, #e0e0e0);
  background: var(--color-surface, #fff);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary, #6d6d78);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.run-splits-gap-toggle:hover {
  background: var(--color-bg, #f5f5f5);
  color: var(--color-text, #1a1a1a);
}

/* ── Run pace zone: 우세 존 요약 한 줄 ── */
.run-zone-quick-summary {
  margin: 8px 0 4px;
  font-size: 13px;
  color: var(--color-text-secondary, #6d6d78);
  line-height: 1.5;
}
.run-zone-quick-summary strong {
  color: var(--color-text, #1a1a1a);
}

/* ==========================================================
   삼성 헬스 걷기 전용: VO2max 카드
   ========================================================== */

/* VO2max 개념 설명 영역 */
.vo2-explain {
  font-size: 13px;
  color: var(--color-text-secondary, #6d6d78);
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--color-card-bg, #f5f5f7);
}
.vo2-explain p {
  margin: 0 0 6px;
}
.vo2-explain p:last-child {
  margin-bottom: 0;
}

/* VO2max 영웅 영역 (큰 숫자) */
.vo2-hero {
  text-align: center;
  margin: 8px 0 6px;
}
.vo2-value {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  line-height: 1.1;
}
.vo2-unit {
  font-size: 13px;
  color: var(--color-text-secondary, #6d6d78);
  margin-top: 2px;
}

/* 등급 배지 */
.vo2-rating {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  margin: 8px 0 4px;
}
.vo2-rating-desc {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary, #6d6d78);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* 수평 바 (등급 스펙트럼) */
.vo2-bar-track {
  display: flex;
  height: 12px;
  overflow: visible;
  position: relative;
  margin: 12px 0 20px;
}
.vo2-bar-seg {
  min-width: 0;
}
.vo2-bar-marker {
  position: absolute;
  top: -4px;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  background: var(--color-text, #333);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  z-index: 2;
  /* 로드 시 좌→우 슬라이드 애니메이션 */
  animation: vo2MarkerSlide 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes vo2MarkerSlide {
  from { left: 0%; opacity: 0; }
  20%  { opacity: 1; }
}

/* 연령대 등급표 */
.vo2-age-header {
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 8px;
  color: var(--color-text, #1a1a1a);
}
.vo2-age-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vo2-age-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.vo2-age-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.vo2-age-label {
  min-width: 70px;
  color: var(--color-text, #1a1a1a);
}
.vo2-age-range {
  flex: 1;
  text-align: right;
  color: var(--color-text-secondary, #6d6d78);
  border-bottom: 1px dotted var(--color-border, #e0e0e0);
  padding-bottom: 2px;
}
.vo2-source {
  text-align: right;
  font-size: 11px;
  color: #999;
  margin-top: 8px;
}

/* VO2max 히스토그램 (연령대 분포) */
.vo2-hist-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #e0e0e0);
}
.vo2-hist-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 8px;
}

/* VO2max 맞춤 훈련 프로그램 */
.vo2-tip-section {
  margin-top: 20px;
  padding: 16px;
  border-left: 3px solid var(--color-primary, #D55E00);
  background: var(--color-primary-light, #FFF7F3);
}
.vo2-tip-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary, #D55E00);
  margin-bottom: 10px;
}
.vo2-tip-header-icon {
  width: 18px;
  height: 18px;
}
.vo2-tip-summary {
  font-size: 13px;
  color: var(--color-text, #1a1a1a);
  line-height: 1.5;
  margin-bottom: 14px;
  font-weight: 500;
}
.vo2-tip-program {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.vo2-tip-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.vo2-tip-day {
  flex-shrink: 0;
  min-width: 90px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
  display: flex;
  align-items: center;
  gap: 4px;
}
.vo2-tip-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #6d6d78);
  line-height: 1.5;
}
.vo2-tip-next {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(252, 76, 2, 0.06);
  border: 1px dashed var(--color-primary, #D55E00);
}
.vo2-tip-next-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary, #D55E00);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.vo2-tip-next-desc {
  font-size: 12px;
  color: var(--color-text, #1a1a1a);
  line-height: 1.6;
}

/* VO2max% 카드 */
.vo2-pct-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #6d6d78);
  line-height: 1.5;
  margin-bottom: 12px;
}
.vo2-pct-avg {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0 12px;
  color: var(--color-text, #1a1a1a);
}
.vo2-pct-guide {
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-text-secondary, #6d6d78);
  line-height: 1.6;
}
.vo2-pct-guide-title {
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  margin: 10px 0 4px;
}
.vo2-pct-guide-row {
  padding: 2px 0;
}

/* ==========================================================
   삼성 헬스 걷기 전용: 발한량 / 수분 보충 카드
   ========================================================== */
.sweat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.sweat-item {
  text-align: center;
  padding: 12px 8px;
  background: var(--color-card-bg, #f9f9f9);
}
.sweat-icon {
  margin-bottom: 6px;
}
.sweat-label {
  font-size: 12px;
  color: var(--color-text-secondary, #6d6d78);
  margin-bottom: 4px;
}
.sweat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  line-height: 1.2;
}
.sweat-recommend {
  font-size: 11px;
  color: var(--color-text-secondary, #6d6d78);
  margin-top: 6px;
  line-height: 1.4;
}

/* ==========================================================
   정지 중 HR 회복율 분석 카드
   ========================================================== */
/* 정지 패턴 요약 (4칸 그리드) */
.stop-summary {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
}
.stop-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
}
.stop-summary-item {
  padding: 8px 4px;
  background: var(--color-card-bg, #f9f9f9);
}
.stop-summary-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  line-height: 1.2;
}
.stop-summary-unit {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary, #6d6d78);
}
.stop-summary-label {
  font-size: 11px;
  color: var(--color-text-secondary, #6d6d78);
  margin-top: 2px;
}
@media (max-width: 480px) {
  .stop-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 정지 유형별 분류 태그 */
.stop-type-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.stop-type-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border: 1.5px solid;
  background: transparent;
}

.hr-recov-summary {
  text-align: center;
  margin-bottom: 16px;
}
.hr-recov-grade {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}
.hr-recov-grade-value {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}
.hr-recov-grade-unit {
  font-size: 14px;
  font-weight: 500;
}
.hr-recov-grade-badge {
  display: inline-block;
  padding: 2px 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.hr-recov-grade-desc {
  font-size: 12px;
  color: var(--color-text-secondary, #6d6d78);
  line-height: 1.5;
}
.hr-recov-table-wrap {
  margin-top: 14px;
}
.hr-recov-ref {
  margin-top: 10px;
  font-size: 11px;
  color: #999;
  text-align: right;
}