@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');

/* ── 기본 ──────────────────────────────────────────────── */
:root {
  --primary:      #6C3CE1;
  --primary-2:    #A855F7;
  --accent:       #F97316;
  --accent-2:     #EF4444;
  --bg:           #F5F3FF;
  --surface:      #FFFFFF;
  --text:         #1C0F4A;
  --text-muted:   #6B7FA3;
  --text-light:   #A8B4C8;
  --border:       #E5E0F8;
  --primary-tint: #F0EBFF;
}

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

body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  color: var(--text);
}

/* ── 카드 진입 애니메이션 ──────────────────────────────── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes progressShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.container {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

/* ── 로그인 페이지 ─────────────────────────────────────── */
.login-page .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: 0;
}

.logo-wrap { text-align: center; margin-bottom: 32px; }
.logo-icon { font-size: 56px; margin-bottom: 8px; }
.logo-text  { font-size: 32px; font-weight: 900; color: var(--primary); letter-spacing: 3px; }
.logo-sub   { font-size: 14px; font-weight: 600; color: var(--primary-2); margin-top: 4px; }

/* ── 카드 ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(108,60,225,0.10), 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid rgba(108,60,225,0.08);
  width: 100%;
  animation: cardIn 0.4s ease both;
  margin-bottom: 16px;
}
.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.10s; }
.card:nth-child(4) { animation-delay: 0.15s; }
.card:nth-child(5) { animation-delay: 0.20s; }

.card-title { font-size: 22px; font-weight: 800; color: var(--primary); text-align: center; margin-bottom: 8px; }
.card-desc  { font-size: 14px; color: var(--text-muted); text-align: center; line-height: 1.6; margin-bottom: 24px; }

/* ── 입력 ──────────────────────────────────────────────── */
.input-wrap { margin-bottom: 16px; }

.code-input {
  width: 100%;
  padding: 16px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  border: 2px solid var(--border);
  border-radius: 14px;
  outline: none;
  text-transform: uppercase;
  transition: border-color 0.2s;
  background: var(--surface);
}
.code-input:focus { border-color: var(--primary); }

/* ── 버튼 ──────────────────────────────────────────────── */
.btn-primary {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(249,115,22,0.35);
  transition: transform 0.15s, box-shadow 0.2s;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249,115,22,0.45);
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { background: #C4B5FD; box-shadow: none; cursor: not-allowed; }

.btn-secondary {
  width: 100%;
  padding: 14px;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  border: 2px solid var(--primary);
  border-radius: 14px;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.2s;
}
.btn-secondary:hover { background: #E9E1FF; }

/* ── 에러 ──────────────────────────────────────────────── */
.error-box {
  background: #fff0f0;
  color: #c0392b;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  text-align: center;
  border: 1px solid #fdd;
}

.footer-text {
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
  margin-top: 24px;
}

/* ── 업로드 헤더 ───────────────────────────────────────── */
.upload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.greeting { display: flex; align-items: center; gap: 12px; }
.greeting-emoji  { font-size: 36px; }
.greeting-name   { font-size: 19px; font-weight: 800; color: var(--primary); }
.greeting-sub    { font-size: 13px; color: var(--text-muted); }

.logout-btn {
  font-size: 12px;
  color: var(--text-light);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: color 0.2s, border-color 0.2s;
}
.logout-btn:hover { color: var(--primary); border-color: var(--primary); }

/* ── 사진 버튼 ─────────────────────────────────────────── */
.photo-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.photo-btn {
  display: block; padding: 14px 8px; border-radius: 14px;
  font-size: 15px; font-weight: 700; text-align: center; cursor: pointer;
}
.photo-btn-camera {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(108,60,225,0.30);
}
.photo-btn-gallery {
  background: var(--surface);
  color: var(--primary);
  border: 2px solid #C4B5FD;
}

/* ── 사진 미리보기 ─────────────────────────────────────── */
.photo-preview-wrap {
  min-height: 180px;
  background: linear-gradient(145deg, var(--primary-tint), #FDF4FF);
  border-radius: 20px;
  border: 2px dashed #C4B5FD;
  margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.photo-preview-wrap:hover { border-color: var(--primary); }
.photo-preview-img { width: 100%; border-radius: 18px; display: block; }

.photo-placeholder { text-align: center; padding: 32px 20px; }
.camera-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.photo-placeholder p { font-size: 15px; font-weight: 700; color: var(--primary); }
.photo-hint  { font-size: 13px; color: var(--text-light); margin-top: 6px; }

.photo-reselect {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 12px; padding: 4px 10px; border-radius: 99px; cursor: pointer;
}

/* ── 필드 ──────────────────────────────────────────────── */
.field-wrap  { margin-bottom: 20px; }
.field-label { font-size: 14px; font-weight: 700; color: var(--text-muted); display: block; margin-bottom: 10px; }
.optional    { font-weight: 400; color: var(--text-light); }

/* ── 식사·훈련 선택 ────────────────────────────────────── */
.meal-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.meal-opt-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.meal-opt, .meal-opt-3 label { }
.meal-opt input, .meal-opt-3 input { display: none; }

.meal-opt span, .meal-opt-3 label span {
  display: block;
  text-align: center;
  padding: 10px 4px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.meal-opt input:checked + span,
.meal-opt.selected span {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── 메모 ──────────────────────────────────────────────── */
.memo-input {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  outline: none;
  resize: none;
  line-height: 1.5;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.2s;
  background: var(--surface);
}
.memo-input:focus { border-color: var(--primary); }

/* ── 성공 박스 ─────────────────────────────────────────── */
.success-box {
  background: linear-gradient(145deg, var(--primary-tint), #FDF4FF);
  border: 1.5px solid #C4B5FD;
  border-radius: 24px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(108,60,225,0.12);
  animation: cardIn 0.4s ease both;
}
.success-icon  { font-size: 64px; margin-bottom: 16px; }
.success-title { font-size: 24px; font-weight: 900; color: var(--primary); margin-bottom: 12px; }
.success-desc  { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; }

/* ── 진행 바 ────────────────────────────────────────────── */
.progress-wrap { margin-top: 14px; text-align: center; }
.progress-bar {
  width: 100%; height: 6px; background: #E5E0F8;
  border-radius: 99px; overflow: hidden; margin-bottom: 8px;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent));
  background-size: 200% 100%;
  border-radius: 99px;
  transition: width 0.3s ease;
  animation: progressShimmer 1.5s linear infinite;
}
.progress-label { font-size: 13px; color: var(--text-muted); }

/* ── 결과 페이지 ───────────────────────────────────────── */
.result-page .container { padding-bottom: 80px; }

.summary-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 60%, #EC4899 100%);
  color: #fff;
  display: flex; align-items: center; gap: 16px;
}
.summary-content { flex: 1; }
.summary-top  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.summary-date { font-size: 13px; opacity: 0.8; }
.summary-score {
  font-size: 13px; font-weight: 800; padding: 4px 12px;
  border-radius: 20px; background: rgba(255,255,255,0.25);
}
.summary-msg { font-size: 16px; font-weight: 600; line-height: 1.75; opacity: 0.95; }

/* 주간 목표 링 */
.ring-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.ring-svg  { width: 100%; height: 100%; }
.ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-pct { font-size: 16px; font-weight: 900; color: #fff; }
.ring-sub { font-size: 9px; color: rgba(255,255,255,0.7); font-weight: 600; }
.ring-fill { transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1); }

.score-green  { background: #D1FAE5; color: #065F46; font-weight: 800; }
.score-yellow { background: #FEF3C7; color: #92400E; font-weight: 800; }
.score-red    { background: #FEE2E2; color: #991B1B; font-weight: 800; }

.section-title { font-size: 17px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.section-sub   { font-size: 13px; color: var(--primary-2); font-weight: 600; margin-bottom: 16px; }

/* ── 식사 타임라인 ─────────────────────────────────────── */
.meal-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--primary-tint);
}
.meal-row:last-child { border-bottom: none; }
.meal-time-badge {
  min-width: 42px; text-align: center; padding: 5px 6px;
  background: var(--primary-tint); border-radius: 8px;
  font-size: 12px; font-weight: 800; color: var(--primary);
}
.meal-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.meal-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.tag-good { background: #eafaf1; color: #1e8449; }
.tag-warn { background: #fef9e7; color: #b7770d; }
.tag-bad  { background: #fdf2f8; color: #c0392b; }

/* ── 레이더 차트 ───────────────────────────────────────── */
.chart-wrap { max-width: 300px; margin: 0 auto; padding: 8px 0; }

/* ── 식품군 바 ─────────────────────────────────────────── */
.group-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--primary-tint);
}
.group-row:last-child { border-bottom: none; }
.group-left  { display: flex; align-items: center; gap: 6px; min-width: 90px; }
.group-emoji { font-size: 18px; }
.group-name  { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.group-bar-wrap { flex: 1; display: flex; align-items: center; gap: 8px; }
.group-bar  { flex: 1; height: 10px; background: var(--primary-tint); border-radius: 5px; overflow: hidden; }
.group-bar-fill { height: 100%; border-radius: 5px; transition: width 1s cubic-bezier(0.4,0,0.2,1); }
.group-val  { font-size: 13px; font-weight: 800; color: var(--primary); min-width: 28px; text-align: right; }

/* ── 영양사 코멘트 ─────────────────────────────────────── */
.comment-card {
  background: linear-gradient(145deg, #FAF8FF, var(--primary-tint));
  border: 1.5px solid #C4B5FD;
  border-left: 4px solid var(--primary);
  box-shadow: 0 4px 20px rgba(108,60,225,0.12);
}
.comment-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.comment-avatar { font-size: 44px; }
.comment-from   { font-size: 11px; color: var(--primary); font-weight: 700; }
.comment-name   { font-size: 15px; font-weight: 700; color: var(--text); }
.comment-text   { font-size: 15px; color: #4a4060; line-height: 1.85; }

/* ── 개인화 배지 ────────────────────────────────────────── */
.profile-badge-wrap { text-align: center; margin: 0 0 12px; }
.profile-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-tint); color: var(--primary);
  font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 99px;
  border: 1px solid #C4B5FD;
}
.profile-badge-edit { color: var(--primary-2); font-size: 12px; margin-left: 4px; text-decoration: none; }

/* ── 하단 내비 ─────────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface); display: flex;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(108,60,225,0.08);
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 10px 0; gap: 3px; text-decoration: none;
  font-size: 11px; font-weight: 600; color: var(--text-light);
  position: relative;
}
.nav-btn span:first-child { font-size: 20px; }
.nav-active { color: var(--primary); }
.nav-active::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 3px;
  background: var(--primary); border-radius: 0 0 3px 3px;
}

/* ── 프로필 페이지 ──────────────────────────────────────── */
.profile-card { padding: 24px 20px; }
.profile-intro {
  font-size: 14px; color: var(--text-muted); line-height: 1.7;
  text-align: center; margin-bottom: 28px;
}
.profile-intro strong { color: var(--primary); }

/* 성별 / 2-3 선택 */
.choice-row { display: flex; gap: 10px; }
.choice-opt {
  flex: 1; padding: 13px 8px; border: 2px solid var(--border);
  border-radius: 12px; text-align: center; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative; overflow: hidden;
}
.choice-opt input { display: none; }
.choice-opt::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(108,60,225,0.15) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.choice-opt.selected, .choice-opt:has(input:checked) {
  border-color: var(--primary); background: var(--primary-tint); color: var(--primary);
  box-shadow: 0 4px 16px rgba(108,60,225,0.20); transform: translateY(-1px);
}
.choice-opt.selected::after { opacity: 1; }

/* 기본 정보 3칸 */
.body-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.body-field { position: relative; }
.body-input {
  width: 100%; padding: 12px 32px 12px 12px;
  border: 2px solid var(--border); border-radius: 12px;
  font-size: 16px; color: var(--text); text-align: center;
  background: var(--surface); outline: none; transition: border-color 0.2s;
}
.body-input:focus { border-color: var(--primary); }
.body-unit {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--text-light);
}

/* 목표 2x2 */
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.goal-opt {
  padding: 16px 12px; border: 2px solid var(--border); border-radius: 16px;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center; background: var(--surface);
}
.goal-opt input { display: none; }
.goal-opt.selected, .goal-opt:has(input:checked) {
  border-color: var(--primary); background: var(--primary-tint);
  box-shadow: 0 4px 16px rgba(108,60,225,0.22); transform: translateY(-2px);
}
.goal-label { display: block; font-size: 14px; font-weight: 800; color: var(--primary); margin-bottom: 5px; }
.goal-desc  { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* 종목 카테고리 */
.sport-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.sport-cat-opt {
  padding: 14px 8px; border: 2px solid var(--border); border-radius: 14px;
  cursor: pointer; text-align: center;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); background: var(--surface);
}
.sport-cat-opt input { display: none; }
.sport-cat-opt.selected, .sport-cat-opt:has(input:checked) {
  border-color: var(--primary); background: var(--primary-tint);
  box-shadow: 0 4px 16px rgba(108,60,225,0.22); transform: translateY(-2px);
}
.sport-cat-icon { display: block; font-size: 28px; margin-bottom: 6px;
  transition: transform 0.2s ease; }
.sport-cat-opt.selected .sport-cat-icon { transform: scale(1.15); }
.sport-cat-name { font-size: 13px; font-weight: 700; color: var(--primary); }

/* 세부 종목 */
.sport-detail-wrap { background: var(--primary-tint); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.sport-detail-title { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
.sport-detail-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.sport-detail-opt {
  padding: 7px 14px; border: 2px solid #C4B5FD; border-radius: 99px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary);
  background: var(--surface); transition: all 0.15s; white-space: nowrap;
}
.sport-detail-opt input { display: none; }
.sport-detail-opt.selected, .sport-detail-opt:has(input:checked) {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 2px 10px rgba(108,60,225,0.30);
}

/* 훈련 강도 세로 스택 */
.intensity-stack { display: flex; flex-direction: column; gap: 8px; }
.intensity-opt {
  padding: 14px 16px; border: 2px solid var(--border); border-radius: 14px;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: var(--surface); display: flex; align-items: flex-start; gap: 12px;
}
.intensity-opt input { display: none; }
.intensity-opt.selected, .intensity-opt:has(input:checked) {
  border-color: var(--primary); background: var(--primary-tint);
  box-shadow: 0 4px 14px rgba(108,60,225,0.18);
}
.intensity-badge {
  min-width: 44px; padding: 4px 8px; border-radius: 8px;
  font-size: 12px; font-weight: 800; text-align: center;
  background: var(--primary-tint); color: var(--primary); flex-shrink: 0;
}
.intensity-opt.selected .intensity-badge { background: var(--primary); color: #fff; }
.intensity-info {}
.intensity-label { font-size: 14px; font-weight: 800; color: var(--text); }
.intensity-desc  { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 3px; }

/* 주간 횟수 pill */
.freq-row { display: flex; gap: 6px; flex-wrap: wrap; }
.freq-opt {
  padding: 10px 14px; border: 2px solid var(--border); border-radius: 99px;
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text-muted);
  transition: all 0.15s; min-width: 52px; text-align: center;
}
.freq-opt input { display: none; }
.freq-opt.selected, .freq-opt:has(input:checked) {
  background: var(--primary); border-color: var(--primary);
  color: #fff; box-shadow: 0 2px 12px rgba(108,60,225,0.35);
}

/* 세션 시간 */
.duration-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.duration-opt {
  padding: 11px 6px; border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; text-align: center; font-size: 12px; font-weight: 700;
  color: var(--text-muted); transition: all 0.15s; background: var(--surface);
}
.duration-opt input { display: none; }
.duration-opt.selected, .duration-opt:has(input:checked) {
  border-color: var(--primary); background: var(--primary-tint); color: var(--primary);
}

/* 필수 뱃지 */
.field-required {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 99px;
  background: var(--primary-tint); color: var(--primary);
  vertical-align: middle; margin-left: 4px;
}

/* 성별 선택 */
.gender-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gender-opt {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border: 1.5px solid var(--border); border-radius: 14px;
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text-muted);
  background: var(--surface); transition: all 0.2s;
}
.gender-opt input { display: none; }
.gender-opt.selected, .gender-opt:has(input:checked) {
  border-color: var(--primary); background: var(--primary-tint); color: var(--primary);
}
.gender-symbol { font-size: 18px; font-weight: 300; opacity: 0.6; }
.gender-opt.selected .gender-symbol,
.gender-opt:has(input:checked) .gender-symbol { opacity: 1; }

/* 영양 목표 */
.body-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.body-goal-opt {
  padding: 12px 12px 12px 14px;
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--goal-color, var(--border));
  border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  transition: all 0.18s; background: var(--surface);
}
.body-goal-opt input { display: none; }
.body-goal-opt.selected, .body-goal-opt:has(input:checked) {
  background: color-mix(in srgb, var(--goal-color, var(--primary)) 8%, white);
  border-left-width: 4px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08); transform: translateY(-1px);
}
.body-goal-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--goal-color, var(--primary));
  margin-bottom: 4px; display: none;
}
.body-goal-label {
  font-size: 13px; font-weight: 800; color: var(--text);
  transition: color 0.18s;
}
.body-goal-opt.selected .body-goal-label { color: var(--goal-color, var(--primary)); }
.body-goal-desc  { font-size: 11px; color: var(--text-light); line-height: 1.4; }

/* 선택 섹션 */
.optional-section {
  border-top: 1px dashed #C4B5FD; padding-top: 20px; margin-top: 8px;
}
.optional-section-title {
  font-size: 13px; font-weight: 700; color: var(--primary-2);
  text-align: center; margin-bottom: 16px;
}

/* 체크박스 chip */
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt {
  padding: 7px 14px; border: 2px solid var(--border); border-radius: 99px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: var(--surface); transition: all 0.15s;
}
.chip-opt input { display: none; }
.chip-opt.selected, .chip-opt:has(input:checked) {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

.btn-skip {
  display: block; text-align: center; margin-top: 12px;
  font-size: 13px; color: var(--text-light); text-decoration: none; padding: 8px;
}

/* ── 수면 · 회복 섹션 (브라이언) ──────────────────────── */
.sq-section-label {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.4px;
}
.sq-grid { display: flex; flex-direction: column; gap: 6px; }
.sq-opt {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--sq-color, var(--border));
  border-radius: 12px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: var(--surface); transition: all 0.18s;
}
.sq-opt input { display: none; }
.sq-opt.selected, .sq-opt:has(input:checked) {
  background: color-mix(in srgb, var(--sq-color, var(--primary)) 8%, white);
  border-left-width: 4px;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* 훈련 시간대 pill */
.tt-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-pill {
  flex: 1; min-width: 58px;
  padding: 9px 6px; border: 1.5px solid var(--border); border-radius: 99px;
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-muted);
  background: var(--surface); text-align: center; transition: all 0.18s;
}
.tt-pill input { display: none; }
.tt-pill.selected, .tt-pill:has(input:checked) {
  border-color: var(--primary); background: var(--primary-tint); color: var(--primary);
}

/* 수면 부채 경고 */
.sleep-debt-hint {
  background: #FEF3C7; border: 1px solid #F59E0B; border-radius: 10px;
  padding: 9px 13px; font-size: 12px; font-weight: 600; color: #92400E;
  line-height: 1.5;
}

/* NEAT 설명 배너 */
.neat-banner {
  background: #F5F3FF; border-left: 4px solid var(--primary);
  border-radius: 10px; padding: 10px 13px;
  font-size: 12px; color: #4B3B8C; line-height: 1.6; margin-bottom: 12px;
}

/* 체지방률 모르겠어요 버튼 */
.bfp-unknown-btn {
  display: block; width: 100%; margin-top: 10px;
  padding: 11px 16px; border-radius: 99px;
  border: 1.5px solid var(--primary); background: transparent;
  color: var(--primary); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: center; transition: all 0.15s ease;
}
.bfp-unknown-btn.selected {
  background: var(--primary); color: #fff;
}

/* ── rMEQ 크로노타입 ───────────────────────────────────── */
.rmeq-progress-wrap { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.rmeq-progress-bar { flex:1; height:4px; background:#E5E7EB; border-radius:99px; overflow:hidden; }
.rmeq-progress-fill { height:100%; background:var(--primary); border-radius:99px; transition:width 0.3s ease; }
.rmeq-step-label { font-size:12px; color:var(--text-muted); font-weight:600; white-space:nowrap; }

.rmeq-q-card { animation: cardIn 0.2s ease; }
.rmeq-q-text { font-size:14px; font-weight:700; color:#1C0F4A; margin-bottom:12px; line-height:1.5; }
.rmeq-opt {
  display:block; width:100%; text-align:left;
  padding:12px 14px; margin-bottom:8px; border-radius:12px;
  border:1.5px solid #E5E7EB; background:#fff;
  font-size:13px; font-weight:600; color:#374151; cursor:pointer;
  transition:all 0.15s ease;
}
.rmeq-opt:hover { border-color:var(--primary); color:var(--primary); background:#F5F3FF; }
.rmeq-opt.selected { background:var(--primary); color:#fff; border-color:var(--primary); }

.rmeq-result-card {
  background:#F5F3FF; border:1.5px solid var(--primary);
  border-radius:14px; padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.rmeq-result-type { font-size:15px; font-weight:800; color:var(--primary); }
.rmeq-result-tip { font-size:12px; color:#4B3B8C; line-height:1.6; }
.rmeq-redo-btn {
  align-self:flex-start; margin-top:4px;
  padding:6px 14px; border-radius:99px;
  border:1.5px solid var(--primary); background:transparent;
  color:var(--primary); font-size:12px; font-weight:600; cursor:pointer;
}

/* ── 바텀 내비게이션 ───────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #EDE9FE;
  display: flex; justify-content: space-around; align-items: center;
  padding: 18px 0 max(18px, env(safe-area-inset-bottom));
  z-index: 100;
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: #9CA3AF; font-size: 11px; font-weight: 700;
  flex: 1; transition: color 0.15s;
}
.bottom-nav a.active { color: #1b4332; font-weight: 900; }
.bottom-nav a svg { width: 24px; height: 24px; stroke-width: 2; }
.has-bottom-nav { padding-bottom: 100px; }

/* ── 홈 화면 ────────────────────────────────────────────── */
.home-card { margin-bottom: 14px; padding: 16px; }
.home-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.home-card-title { font-size:14px; font-weight:800; color:#1C0F4A; }
.home-card-action { font-size:12px; color:#6C3CE1; font-weight:600; text-decoration:none; }

.home-meal-row { display:flex; gap:8px; }
.home-meal-slot { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 4px; border-radius:12px; border:1.5px solid #E5E7EB; background:#fff; }
.home-meal-slot.done { border-color:#6C3CE1; background:#F5F3FF; }
.meal-icon { font-size:20px; }
.meal-label { font-size:10px; font-weight:600; color:#6B7FA3; }
.home-meal-slot.done .meal-label { color:#6C3CE1; }

.home-radar-mini { display:flex; flex-direction:column; gap:7px; }
.home-radar-row { display:flex; align-items:center; gap:8px; }
.home-radar-label { font-size:11px; color:#6B7FA3; font-weight:600; width:34px; flex-shrink:0; }
.home-radar-bar-bg { flex:1; height:8px; background:#EDE9FE; border-radius:99px; overflow:hidden; }
.home-radar-bar-fill { height:100%; background:#6C3CE1; border-radius:99px; transition:width 0.4s ease; }
.home-radar-val { font-size:11px; font-weight:700; color:#6C3CE1; width:24px; text-align:right; }

.home-week-row { display:flex; justify-content:space-between; gap:4px; }
.home-week-day { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; }
.week-day-label { font-size:11px; font-weight:600; color:#9CA3AF; }
.week-day-dot {
  width:32px; height:32px; border-radius:99px;
  border:2px solid #E5E7EB; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.week-day-dot svg { width:14px; height:14px; stroke:#9CA3AF; display:none; }
.home-week-day.done .week-day-dot { border-color:#6C3CE1; background:#6C3CE1; }
.home-week-day.done .week-day-dot svg { display:block; stroke:#fff; }
.home-week-day.today .week-day-label { color:#6C3CE1; font-weight:800; }
.home-week-day.today .week-day-dot { border-color:#6C3CE1; border-width:2px; }
.home-week-summary { font-size:12px; color:#6B7FA3; margin-top:8px; text-align:center; }
.home-week-summary strong { color:#6C3CE1; }

.home-checkin-done { display:flex; align-items:center; gap:10px; }
.home-checkin-badge { background:#D1FAE5; color:#065F46; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:99px; }
.home-checkin-info { font-size:12px; color:#6B7FA3; }
.home-checkin-empty { font-size:12px; color:#9CA3AF; margin:4px 0; }

/* ── 어드민 레이아웃 ───────────────────────────────────── */
.admin-page { background: var(--bg); }
.admin-wrap { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px; background: var(--primary); color: #fff;
  display: flex; flex-direction: column;
  padding: 24px 0; position: fixed; height: 100vh; flex-shrink: 0;
}
.sb-logo { display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 900; padding: 0 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.15); }
.sb-logo span:first-child { font-size: 24px; }
.sb-nav { flex: 1; padding: 16px 0; }
.sb-link { display: block; padding: 12px 20px; font-size: 14px;
  font-weight: 600; color: rgba(255,255,255,0.7);
  text-decoration: none; transition: all 0.15s; }
.sb-link:hover, .sb-link.active {
  background: rgba(255,255,255,0.12); color: #fff; }
.sb-bottom { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.sb-date   { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.sb-logout { font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none; }

.admin-main   { margin-left: 220px; flex: 1; padding: 28px 32px; max-width: 1100px; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.admin-title  { font-size: 24px; font-weight: 900; color: var(--primary); }
.refresh-btn  { padding: 8px 18px; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer; color: var(--primary); }

.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--surface); border-radius: 18px; padding: 20px;
  box-shadow: 0 4px 16px rgba(108,60,225,0.08); cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid rgba(108,60,225,0.06);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(108,60,225,0.15); }
.stat-card-empty { opacity: 0.6; cursor: default; }
.stat-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.stat-emoji { font-size: 32px; }
.stat-name  { font-size: 18px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.stat-last  { font-size: 12px; color: var(--text-light); margin-bottom: 14px; }
.stat-hint  { font-size: 12px; color: var(--primary-2); font-weight: 700; }
.stat-nums  { display: flex; border-top: 1px solid var(--primary-tint); padding-top: 12px; }
.stat-num   { flex: 1; text-align: center; }
.num-val    { display: block; font-size: 18px; font-weight: 900; color: var(--primary); }
.num-label  { display: block; font-size: 10px; color: var(--text-light); margin-top: 2px; }

.stat-badge   { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 20px; }
.badge-green  { background: #D1FAE5; color: #065F46; }
.badge-yellow { background: #FEF3C7; color: #92400E; }
.badge-red    { background: #FEE2E2; color: #991B1B; }
.badge-gray   { background: var(--primary-tint); color: var(--text-muted); }

.section-card {
  background: var(--surface); border-radius: 18px; padding: 24px;
  box-shadow: 0 4px 16px rgba(108,60,225,0.08); margin-bottom: 20px;
  border: 1px solid rgba(108,60,225,0.06);
}
.section-head  { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.section-sub   { font-size: 12px; color: var(--text-light); margin-left: auto; }
.radar-wrap    { max-width: 380px; margin: 0 auto; }

.nutrient-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 20px; }
.nutrient-item { text-align: center; padding: 12px 8px; background: var(--primary-tint); border-radius: 12px; }
.warn-item     { background: #fff8f0; }
.nutrient-val  { display: block; font-size: 17px; font-weight: 900; color: var(--primary); }
.nutrient-label { display: block; font-size: 10px; color: var(--text-muted); margin-top: 4px; }

.group-bars  { margin-bottom: 16px; }
.group-label { min-width: 90px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.group-val   { font-size: 13px; font-weight: 800; color: var(--primary); min-width: 28px; text-align: right; }

.feedback-box  {
  background: var(--primary-tint); border-radius: 12px; padding: 14px 16px;
  border-left: 3px solid var(--primary);
}
.feedback-label { font-size: 11px; font-weight: 800; color: var(--primary); margin-bottom: 6px; }
.feedback-text  { font-size: 13px; color: #4a4060; line-height: 1.6; }

.feed-list { display: flex; flex-direction: column; gap: 16px; }
.feed-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--primary-tint); }
.feed-item:last-child { border-bottom: none; }
.feed-img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.feed-img-placeholder {
  width: 72px; height: 72px; border-radius: 12px;
  background: var(--primary-tint); display: flex; align-items: center;
  justify-content: center; font-size: 28px; flex-shrink: 0;
}
.feed-info   { flex: 1; min-width: 0; }
.feed-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.feed-name   { font-size: 14px; font-weight: 800; color: var(--primary); }
.feed-time   { font-size: 11px; color: var(--text-light); margin-left: auto; }
.feed-input  { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
.feed-feedback { font-size: 12px; color: var(--text-light); line-height: 1.5; margin-top: 6px; }

@media(max-width:768px){
  .sidebar { display: none; }
  .admin-main { margin-left: 0; padding: 16px; }
  .stat-grid { grid-template-columns: 1fr; }
  .nutrient-grid { grid-template-columns: repeat(3,1fr); }
}

/* ── 슬라이더 (나이/키/체중) ─────────────────────────────── */
.slider-stack { display: flex; flex-direction: column; gap: 16px; }

.slider-item {
  background: var(--primary-tint);
  border-radius: 16px;
  padding: 16px 18px;
}
.slider-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.slider-label { font-size: 13px; font-weight: 600; color: var(--text-muted); flex: 1; letter-spacing: 0.01em; }
.slider-value {
  font-size: 22px; font-weight: 900; color: var(--primary);
  min-width: 76px; text-align: right; letter-spacing: -0.5px;
}

/* 스트레스 슬라이더 전용 */
.stress-slider {
  background: linear-gradient(to right, #10B981 0%, #6B7FA3 25%, #F97316 75%, #EF4444 100%);
}
.slider-stress-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-light); margin-top: 6px; font-weight: 600;
}

.range-slider {
  -webkit-appearance: none;
  width: 100%; height: 6px;
  border-radius: 99px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--primary) 0%, var(--primary) 0%, #D8D1F5 0%, #D8D1F5 100%);
  transition: background 0.15s;
}
/* 스트레스는 전체 트랙이 스펙트럼, JS가 덮어쓰지 않도록 !important */
.stress-slider {
  background: linear-gradient(to right,
    #10B981 0%, #10B981 20%,
    #6EE7B7 20%, #6B7FA3 50%,
    #F97316 75%, #EF4444 100%) !important;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  background: var(--surface);
  border: 3px solid var(--primary);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(108,60,225,0.32);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.range-slider:active::-webkit-slider-thumb {
  transform: scale(1.22);
  box-shadow: 0 4px 18px rgba(108,60,225,0.48);
}
.range-slider::-moz-range-thumb {
  width: 28px; height: 28px;
  background: var(--surface);
  border: 3px solid var(--primary);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(108,60,225,0.32);
  cursor: pointer;
}
.slider-track-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-light); margin-top: 6px;
}

/* ── VAS 슬라이더 (HRV4Training 스타일, 빨강→초록 그라디언트) ── */
.vas-item { margin-bottom: 20px; }
.vas-question { font-size: 14px; font-weight: 600; color: #1C0F4A; margin: 0 0 10px; }
.vas-wrap { display: flex; align-items: center; gap: 10px; }
.vas-lo { font-size: 11px; color: #e74c3c; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.vas-hi { font-size: 11px; color: #27ae60; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.vas-slider { --vc: #f39c12; -webkit-appearance: none; appearance: none; flex: 1; height: 8px; border-radius: 99px; outline: none; cursor: pointer; background: linear-gradient(to right, #e74c3c 0%, #f39c12 50%, #27ae60 100%); }
.vas-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; background: #fff; border: 3px solid var(--vc); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.18); cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, border-color 0.15s; }
.vas-slider:active::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.vas-slider::-moz-range-thumb { width: 26px; height: 26px; background: #fff; border: 3px solid var(--vc); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.18); cursor: pointer; }
/* 근육통 부위 칩 */
.soreness-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.soreness-chip { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 20px; background: #f5f3ff; font-size: 13px; color: #555; cursor: pointer; border: 1.5px solid #e0d9f8; transition: background 0.15s, color 0.15s; user-select: none; }
.soreness-chip input[type=checkbox] { display: none; }
.soreness-chip.active { background: #6C3CE1; color: #fff; border-color: #6C3CE1; }

/* ── 월경 주기 섹션 ───────────────────────────────────────── */
:root {
  --cycle-surface:    #FFF8FA;
  --cycle-border:     #F3D4E3;
  --phase-mens:       #E8556A;
  --phase-mens-tint:  #FDEEF0;
  --phase-foll:       #F97AB8;
  --phase-foll-tint:  #FEF0F7;
  --phase-ovul:       #A78BFA;
  --phase-ovul-tint:  #F3EFFF;
  --phase-lute:       #C084FC;
  --phase-lute-tint:  #F9F0FF;
}

.cycle-section {
  background: var(--cycle-surface);
  border: 1.5px solid var(--cycle-border);
  border-radius: 20px;
  padding: 18px 16px;
  margin-bottom: 20px;
}
.cycle-header {
  display: flex; align-items: center; justify-content: space-between;
}
.cycle-header-left { display: flex; align-items: center; gap: 10px; }
.cycle-header-icon { font-size: 26px; }
.cycle-header-sub  { font-size: 12px; color: var(--phase-lute); font-weight: 600; margin-top: 2px; }

/* 토글 */
.cycle-toggle-wrap { cursor: pointer; }
.cycle-toggle-wrap input { display: none; }
.cycle-toggle-track {
  display: block; width: 48px; height: 26px;
  background: #E5E0F8; border-radius: 99px;
  position: relative; transition: background 0.25s;
}
.cycle-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cycle-toggle-wrap input:checked + .cycle-toggle-track {
  background: linear-gradient(135deg, #F97AB8, #E8556A);
}
.cycle-toggle-wrap input:checked + .cycle-toggle-track .cycle-toggle-thumb {
  transform: translateX(22px);
}

.cycle-content {
  margin-top: 20px;
  border-top: 1px dashed var(--cycle-border);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 20px;
  animation: cardIn 0.3s ease both;
}
.cycle-field { display: flex; flex-direction: column; gap: 8px; }
.cycle-field-label { font-size: 14px; font-weight: 700; color: #4a2060; }
.cycle-field-hint  { font-size: 12px; color: #B09CC0; margin-top: -4px; line-height: 1.5; }

/* X일 전 날짜 선택 */
.relative-date-picker {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 7px;
}
.rdp-opt {
  padding: 10px 4px; border: 2px solid var(--cycle-border);
  border-radius: 12px; text-align: center; cursor: pointer;
  font-size: 12px; font-weight: 700; color: #B09CC0;
  background: var(--surface); transition: all 0.18s;
}
.rdp-opt input { display: none; }
.rdp-opt.selected, .rdp-opt:has(input:checked) {
  background: var(--phase-mens); border-color: var(--phase-mens); color: #fff;
  box-shadow: 0 3px 10px rgba(232,85,106,0.30); transform: translateY(-1px);
}
.rdp-custom-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--cycle-border);
  border-radius: 12px; padding: 10px 14px; margin-top: 4px;
}
.rdp-custom-label { font-size: 12px; font-weight: 700; color: #B09CC0; white-space: nowrap; }
.rdp-custom-input {
  width: 56px; border: none; border-bottom: 2px solid var(--cycle-border);
  outline: none; font-size: 16px; font-weight: 800; color: var(--phase-mens);
  text-align: center; background: transparent; padding: 0 4px;
}
.rdp-custom-input:focus { border-bottom-color: var(--phase-mens); }
.rdp-custom-unit { font-size: 13px; color: #B09CC0; font-weight: 600; }

/* 주기 길이 */
.cycle-length-opts {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 6px;
}
.cycle-len-opt {
  padding: 12px 4px; border: 2px solid var(--cycle-border);
  border-radius: 12px; text-align: center; cursor: pointer;
  background: var(--surface); transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cycle-len-opt input { display: none; }
.cycle-len-days { font-size: 15px; font-weight: 800; color: var(--primary); }
.cycle-len-sub  { font-size: 10px; color: #B09CC0; font-weight: 600; }
.cycle-len-opt.selected, .cycle-len-opt:has(input:checked) {
  background: var(--primary-tint); border-color: var(--primary);
  box-shadow: 0 3px 12px rgba(108,60,225,0.20); transform: translateY(-2px);
}

/* 출혈량 */
.flow-opts { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.flow-opt {
  padding: 13px 10px; border: 2px solid var(--cycle-border);
  border-radius: 14px; cursor: pointer; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
.flow-opt input { display: none; }
.flow-drops { display: flex; gap: 3px; }
.drop { font-size: 13px; }
.drop-filled { color: var(--phase-mens); }
.drop-empty  { color: #E5D5DC; }
.flow-label  { font-size: 13px; font-weight: 800; color: #4a2060; }
.flow-desc   { font-size: 11px; color: #B09CC0; text-align: center; line-height: 1.4; }
.flow-opt.selected, .flow-opt:has(input:checked) {
  background: var(--phase-mens-tint); border-color: var(--phase-mens);
  box-shadow: 0 3px 12px rgba(232,85,106,0.18); transform: translateY(-1px);
}
.flow-opt.selected .flow-label { color: var(--phase-mens); }

/* 달력 미리보기 */
.cycle-calendar-preview {
  background: var(--surface); border: 1.5px solid var(--cycle-border);
  border-radius: 18px; padding: 16px; overflow: hidden;
}
.cal-preview-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.cal-preview-title { font-size: 14px; font-weight: 800; color: #4a2060; }
.cal-preview-month { font-size: 13px; color: #B09CC0; font-weight: 600; }
.cal-legend { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #B09CC0; font-weight: 600; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cal-strip-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; margin: 0 -16px; padding: 0 16px;
}
.cal-strip-wrap::-webkit-scrollbar { display: none; }
.cal-strip { display: flex; gap: 5px; width: max-content; padding-bottom: 4px; }
.cal-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 40px; padding: 8px 4px; border-radius: 12px;
}
.cal-day-label { font-size: 10px; font-weight: 700; color: #C4B0D0; }
.cal-day-num {
  width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%;
  font-size: 14px; font-weight: 700; color: #4a2060;
}
.cal-day-marker { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.cal-day--today .cal-day-num {
  background: var(--primary); color: #fff;
  box-shadow: 0 2px 8px rgba(108,60,225,0.35);
}
.cal-day--period { background: var(--phase-mens-tint); }
.cal-day--period .cal-day-num { color: var(--phase-mens); font-weight: 900; }
.cal-day--period .cal-day-marker { background: var(--phase-mens); }
.cal-day--period-start .cal-day-num {
  background: var(--phase-mens); color: #fff;
  box-shadow: 0 2px 8px rgba(232,85,106,0.30);
}
.cal-day--ovulation { background: var(--phase-ovul-tint); }
.cal-day--ovulation .cal-day-num { color: var(--primary); }
.cal-day--ovulation .cal-day-marker { background: var(--phase-ovul); }
.cal-day--fertile { background: var(--phase-lute-tint); }
.cal-day--fertile .cal-day-marker { background: var(--phase-lute); }
.cal-day--ovulation-peak .cal-day-num {
  background: var(--phase-ovul); color: #fff;
  box-shadow: 0 2px 8px rgba(167,139,250,0.35);
}
.cal-phase-banner {
  margin-top: 12px; border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.cal-phase-icon { font-size: 22px; flex-shrink: 0; }
.cal-phase-name { font-size: 14px; font-weight: 800; }
.cal-phase-tip  { font-size: 12px; line-height: 1.5; margin-top: 3px; color: #6B5070; }

/* 삼징후 스크리닝 */
.triad-screen {
  background: var(--surface); border: 1.5px solid var(--cycle-border);
  border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.triad-checkin-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px dashed var(--cycle-border);
}
.triad-checkin-icon  { font-size: 22px; }
.triad-checkin-title { font-size: 14px; font-weight: 800; color: #4a2060; }
.triad-checkin-sub   { font-size: 12px; color: #B09CC0; margin-top: 2px; }
.triad-q-text {
  font-size: 13px; font-weight: 600; color: #5a3070; line-height: 1.55; margin-bottom: 8px;
}
.triad-yn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.triad-yn-opt {
  padding: 11px 8px; border: 2px solid var(--cycle-border);
  border-radius: 12px; text-align: center; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #B09CC0;
  background: var(--surface); transition: all 0.18s;
}
.triad-yn-opt input { display: none; }
.triad-yn-opt:has(input:checked) {
  background: var(--primary-tint); border-color: var(--primary); color: var(--primary);
}
.triad-yn-concern:has(input:checked) {
  background: #F9F0FF; border-color: #9333EA; color: #7E22CE;
}
.triad-concern-card {
  background: linear-gradient(135deg, #F9F0FF, #FEF0F7);
  border: 1.5px solid #D4C7FC; border-left: 4px solid #9333EA;
  border-radius: 14px; padding: 16px;
  display: flex; gap: 12px; align-items: flex-start;
  animation: cardIn 0.35s ease both;
}
.triad-concern-icon  { font-size: 26px; flex-shrink: 0; }
.triad-concern-title { font-size: 14px; font-weight: 800; color: #6B21A8; margin-bottom: 6px; }
.triad-concern-text  { font-size: 13px; color: #5a3070; line-height: 1.65; }
.triad-concern-text strong { color: #7E22CE; }
.triad-concern-link {
  display: inline-block; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: #7C3AED;
  text-decoration: none; border-bottom: 1px solid #C4B5FD; padding-bottom: 1px;
}

/* 업로드 화면 사이클 배너 */
.cycle-upload-banner {
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 16px; padding: 12px 14px; margin-bottom: 12px;
  border: 1.5px solid transparent;
  position: relative; overflow: hidden;
  animation: cardIn 0.4s ease both;
}
.cycle-upload-banner::before {
  content: ''; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: bannerShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bannerShimmer { 0%{left:-60%} 100%{left:120%} }
.cup-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cup-phase-icon { font-size: 28px; flex-shrink: 0; }
.cup-phase-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cup-phase-name { font-size: 13px; font-weight: 800; white-space: nowrap; }
.cup-phase-sub  { font-size: 12px; font-weight: 500; line-height: 1.45; opacity: 0.85; }
.cup-edit-btn {
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 99px;
  text-decoration: none; background: rgba(255,255,255,0.40); margin-left: 8px;
  flex-shrink: 0; backdrop-filter: blur(4px);
}
.cycle-upload-banner--mens { background: linear-gradient(135deg,#FDEEF0,#F7D0D7); border-color: #F0B8C3; }
.cycle-upload-banner--mens .cup-phase-name { color: #C73B55; }
.cycle-upload-banner--mens .cup-phase-sub  { color: #7A3040; }
.cycle-upload-banner--foll { background: linear-gradient(135deg,#FEF0F7,#FAD5EC); border-color: #F0B8DC; }
.cycle-upload-banner--foll .cup-phase-name { color: #C0417A; }
.cycle-upload-banner--ovul { background: linear-gradient(135deg,#F3EFFF,#DDD0FC); border-color: #C4B0F8; }
.cycle-upload-banner--ovul .cup-phase-name { color: #5B21B6; }
.cycle-upload-banner--lute { background: linear-gradient(135deg,#F9F0FF,#EDD8FC); border-color: #D4B8F0; }
.cycle-upload-banner--lute .cup-phase-name { color: #7E22CE; }
.cycle-upload-banner--lute .cup-phase-sub  { color: #4B1080; }

/* ── 더블 세션 카드 ──────────────────────────────────────── */
.session-card {
  border-radius: 16px;
  padding: 16px;
  animation: cardIn 0.3s ease both;
}
.session-card--am {
  background: linear-gradient(135deg, #FFFBF0, #FEF3E2);
  border: 1.5px solid #FCD34D;
}
.session-card--pm {
  background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
  border: 1.5px solid #A78BFA;
}
.session-card-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.session-card-icon { font-size: 22px; flex-shrink: 0; }
.session-card-titles { display: flex; flex-direction: column; gap: 2px; }
.session-card-title { font-size: 14px; font-weight: 800; color: var(--text); line-height: 1.2; }
.session-card-hint  { font-size: 11px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.02em; }

/* 세션 타입 2×2 그리드 */
.session-type-row {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 8px;
}
.session-type-opt {
  padding: 12px 8px; border: 1.5px solid var(--border); border-radius: 12px;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 5px; transition: all 0.18s; background: var(--surface);
}
.session-type-opt input { display: none; }
.sto-icon { font-size: 20px; line-height: 1; }
.sto-name { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.session-type-opt.selected, .session-type-opt:has(input:checked) {
  background: var(--primary-tint); border-color: var(--primary);
}
.session-type-opt.selected .sto-name,
.session-type-opt:has(input:checked) .sto-name { color: var(--primary); }

/* 세션 하단 (시간 + 강도) */
.session-bottom-row {
  display: flex; gap: 12px; margin-top: 14px;
}
.session-dur-wrap {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.session-int-wrap {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.session-sub-label {
  font-size: 11px; font-weight: 700; color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* 강도 3단계 */
.session-intensity-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 2px;
}
.session-intensity-opt {
  padding: 9px 4px; border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 2px; transition: all 0.18s;
}
.session-intensity-opt input { display: none; }
.si-badge { font-size: 10px; font-weight: 800; color: var(--text-light); }
.si-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }

.session-intensity-opt--am.selected, .session-intensity-opt--am:has(input:checked) {
  background: #FEF3E2; border-color: #F59E0B;
}
.session-intensity-opt--am.selected .si-badge,
.session-intensity-opt--am:has(input:checked) .si-badge { color: #D97706; }
.session-intensity-opt--am.selected .si-label,
.session-intensity-opt--am:has(input:checked) .si-label { color: #92400E; }

.session-intensity-opt--pm.selected, .session-intensity-opt--pm:has(input:checked) {
  background: #EDE9FE; border-color: #7C3AED;
}
.session-intensity-opt--pm.selected .si-badge,
.session-intensity-opt--pm:has(input:checked) .si-badge { color: #7C3AED; }
.session-intensity-opt--pm.selected .si-label,
.session-intensity-opt--pm:has(input:checked) .si-label { color: #4C1D95; }

.double-session-tip {
  display: flex; gap: 10px; align-items: flex-start;
  background: linear-gradient(135deg, #F0EBFF, #F0FDF4);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 12px; color: var(--text-muted); line-height: 1.6;
}
.double-session-tip strong { color: var(--primary); }

/* AM 슬라이더 색상 오버라이드 */
.am-slider::-webkit-slider-thumb { background: #F59E0B; }
.am-slider::-moz-range-thumb      { background: #F59E0B; }
.pm-slider::-webkit-slider-thumb  { background: #7C3AED; }
.pm-slider::-moz-range-thumb      { background: #7C3AED; }

/* ── 일일 기록 ─────────────────────────────────────────── */
.daily-progress-wrap { display:flex; align-items:center; gap:10px; margin:0 0 16px; }
.daily-progress-bar { flex:1; height:5px; background:#EDE9FE; border-radius:99px; overflow:hidden; }
.daily-progress-fill { height:100%; background:var(--primary); border-radius:99px; transition:width 0.3s ease; }
.daily-progress-label { font-size:11px; font-weight:700; color:var(--primary); white-space:nowrap; }
.daily-section { background:#fff; border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:0 1px 4px rgba(108,60,225,0.07); }
.daily-section-header { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.daily-section-icon { font-size:18px; }
.daily-section-title { font-size:15px; font-weight:800; color:#1C0F4A; flex:1; }
.daily-section-badge { font-size:10px; color:#9CA3AF; font-weight:600; }
.time-row { display:flex; align-items:center; gap:8px; }
.time-field { display:flex; flex-direction:column; gap:4px; flex:1; }
.time-label { font-size:11px; color:var(--text-muted); font-weight:600; }
.time-input { padding:10px 12px; border:1.5px solid #E5E7EB; border-radius:10px; font-size:16px; font-weight:700; color:#1C0F4A; width:100%; box-sizing:border-box; }
.time-input:focus { border-color:var(--primary); outline:none; }
.time-sep { color:#9CA3AF; font-size:16px; }
.time-result { font-size:14px; font-weight:800; color:var(--primary); white-space:nowrap; }
.star-row { display:flex; gap:6px; }
.star-btn { font-size:28px; background:none; border:none; cursor:pointer; color:#E5E7EB; transition:color 0.1s; padding:0; line-height:1; }
.star-btn.active { color:#F59E0B; }
.emoji-row { display:flex; gap:8px; }
.emoji-opt { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:12px; border:1.5px solid #E5E7EB; cursor:pointer; transition:all 0.15s; }
.emoji-opt.selected { border-color:var(--primary); background:#F5F3FF; }
.emoji-face { font-size:24px; }
.emoji-label { font-size:10px; font-weight:600; color:#6B7FA3; }
.emoji-opt.selected .emoji-label { color:var(--primary); }
.emoji-opt input { display:none; }
.did-exercise-row { display:flex; gap:8px; }
.did-opt { flex:1; padding:12px; border-radius:12px; border:1.5px solid #E5E7EB; text-align:center; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.15s; }
.did-opt.selected { border-color:var(--primary); background:#F5F3FF; color:var(--primary); }
.did-opt input { display:none; }
.ex-type-row { display:flex; gap:8px; }
.ex-type-opt { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px; border-radius:10px; border:1.5px solid #E5E7EB; cursor:pointer; transition:all 0.15s; }
.ex-type-opt.selected { border-color:var(--primary); background:#F5F3FF; }
.ex-type-icon { font-size:20px; }
.ex-type-name { font-size:10px; font-weight:600; color:#6B7FA3; }
.ex-type-opt.selected .ex-type-name { color:var(--primary); }
.ex-type-opt input { display:none; }
.ex-meta-row { display:flex; gap:14px; }
.ex-meta-item { flex:1; display:flex; flex-direction:column; gap:4px; }
.fatigue-grid { display:flex; flex-wrap:wrap; gap:6px; }
.fatigue-opt { padding:7px 12px; border-radius:99px; border:1.5px solid #E5E7EB; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.15s; }
.fatigue-opt.selected { border-color:var(--primary); background:#F5F3FF; color:var(--primary); }
.fatigue-opt input { display:none; }
.water-counter { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.water-btn { width:36px; height:36px; border-radius:99px; border:2px solid var(--primary); background:transparent; color:var(--primary); font-size:20px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.water-cups { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.water-cup { font-size:20px; cursor:pointer; opacity:0.2; transition:opacity 0.1s; }
.water-cup.filled { opacity:1; }
.water-label { font-size:12px; color:#6B7FA3; font-weight:600; }

/* ── 데일리 배너 ── */
.daily-banner { background: var(--card-bg); border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(108,60,225,0.08); }
.daily-banner-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.daily-banner-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.daily-banner-count { font-size: 13px; color: var(--primary); font-weight: 700; }
.daily-banner-bar { height: 6px; background: #EEE8FF; border-radius: 3px; margin-bottom: 14px; }
.daily-banner-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.4s ease; }
.dbi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dbi { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 10px; border-radius: 12px; background: #F5F3FF; cursor: pointer; transition: background 0.15s; user-select: none; }
.dbi:active { background: #EDE8FF; transform: scale(0.97); }
.dbi-icon { font-size: 22px; }
.dbi-label { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.dbi-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #C8BFF0; display: flex; align-items: center; justify-content: center; }
.dbi-check svg { display: none; }
.dbi.done .dbi-check { background: var(--primary); border-color: var(--primary); }
.dbi.done .dbi-check svg { display: block; }
.dbi.done .dbi-label { color: var(--primary); font-weight: 600; }

/* ── 바텀시트 ── */
.bs-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.bs-backdrop.active { opacity: 1; pointer-events: auto; }
.bottom-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; background: var(--card-bg); border-radius: 20px 20px 0 0; z-index: 201; padding: 0 20px 40px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32,0.72,0,1); -webkit-overflow-scrolling: touch; }
.bottom-sheet.active { transform: translateY(0); }
.bs-handle { width: 36px; height: 4px; background: #DDD; border-radius: 2px; margin: 12px auto 16px; }
.bs-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 0 0 20px; }
.bs-save-btn { width: 100%; padding: 14px; background: var(--primary); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; margin-top: 16px; cursor: pointer; }
.bs-save-btn:active { opacity: 0.85; }
.daily-desc-label { font-size: 12px; color: var(--primary); font-weight: 600; }

/* ── 인라인 아코디언 ── */
.dbi-row-3 { grid-template-columns: repeat(3, 1fr); }
.daily-expand { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.daily-expand.open { max-height: 800px; }
.expand-form { padding: 16px 0 4px; border-top: 1px solid #EEE8FF; margin-top: 12px; }
.dbi-active { background: var(--primary) !important; }
.dbi-active .dbi-icon { filter: grayscale(0); }
.dbi-active .dbi-label { color: #fff !important; font-weight: 700; }
.dbi-active .dbi-check { border-color: rgba(255,255,255,0.6); }

/* ── 3/3 완료 상태 ── */
.daily-banner.all-done { background: linear-gradient(135deg, #6C3CE1 0%, #9B6FF5 100%); }
.daily-banner.all-done .daily-banner-title,
.daily-banner.all-done .daily-banner-count { color: #fff; }
.daily-banner.all-done .daily-banner-bar { background: rgba(255,255,255,0.25); }
.daily-banner.all-done .daily-banner-fill { background: #fff; }
.daily-banner.all-done .dbi { background: rgba(255,255,255,0.18); }
.daily-banner.all-done .dbi-label { color: rgba(255,255,255,0.85); }
.daily-banner.all-done .dbi.done .dbi-label { color: #fff; font-weight: 700; }
.daily-banner.all-done .dbi-check { border-color: rgba(255,255,255,0.5); }
.daily-banner.all-done .expand-form { border-top-color: rgba(255,255,255,0.2); }
.done-message { display: flex; align-items: center; gap: 12px; padding: 4px 0 16px; }
.done-emoji { font-size: 30px; }
.done-title { font-size: 16px; font-weight: 700; color: #fff; }
.done-sub { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 2px; }

/* ── 식사 슬롯 탭 가능 ── */
.home-meal-slot { cursor: pointer; transition: transform 0.12s; position: relative; }
.home-meal-slot:active { transform: scale(0.94); }
.meal-done-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; }

/* ── 식사 textarea ── */
.meal-textarea { width: 100%; min-height: 100px; padding: 12px; border: 1.5px solid #E0D8FF; border-radius: 12px; font-size: 14px; color: var(--text-primary); background: #F9F7FF; resize: none; box-sizing: border-box; font-family: inherit; }
.meal-textarea:focus { outline: none; border-color: var(--primary); }

/* ── 식사 인라인 아코디언 ── */
.meal-expand { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.meal-expand.open { max-height: 900px; }
.home-meal-slot.meal-active { background: var(--primary); border-radius: 12px; }
.home-meal-slot.meal-active .meal-label { color: #fff; font-weight: 600; }
.home-meal-slot.meal-active .meal-icon { filter: grayscale(0) brightness(10); }
.daily-desc-label { font-size: 12px; color: var(--text-secondary); margin: 0 0 6px 2px; }

/* ── 운동 부하 카드 ── */
.wl-top-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.wl-stat { flex: 1; min-width: 80px; }
.wl-stat-val { display: block; font-size: 28px; font-weight: 800; color: var(--primary); line-height: 1.1; }
.wl-stat-label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; display: block; }
.wl-unit { font-size: 11px; font-weight: 400; color: var(--text-secondary); }
.wl-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.wl-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wl-badge-green  { background: #eafaf1; color: #1e8449; }
.wl-badge-yellow { background: #fef9e7; color: #b7950b; }
.wl-badge-red    { background: #fdecea; color: #c0392b; }
.wl-badge-blue   { background: #eaf4fd; color: #1a5276; }
.wl-badge-gray   { background: #f2f3f4; color: #717d7e; }
.wl-readiness { font-size: 13px; color: var(--text-primary); margin: 6px 0 12px; padding: 10px 12px; background: #F9F7FF; border-radius: 10px; border-left: 3px solid var(--primary); }

/* ── 어드민 훈련 부하 섹션 ── */
.wl-client-block { padding: 20px 0; border-bottom: 1px solid #eee; }
.wl-client-block:last-child { border-bottom: none; }
.wl-client-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wl-client-name { font-size: 16px; font-weight: 700; color: #1C0F4A; }
.wl-admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.wl-admin-item { background: #f9f7ff; border-radius: 10px; padding: 10px 12px; }
.wl-admin-item.wl-warn { background: #fef9e7; }
.wl-admin-item.wl-danger { background: #fdecea; }
.wl-admin-val { display: block; font-size: 22px; font-weight: 800; color: #1C0F4A; }
.wl-admin-label { font-size: 11px; color: #888; margin-top: 2px; display: block; }
.wl-hint { font-size: 10px; color: #aaa; display: block; }
.wl-rpe-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.wl-rpe-title { font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px; }
.wl-rpe-item { display: flex; align-items: center; gap: 8px; }
.wl-rpe-label { font-size: 12px; color: #555; width: 90px; flex-shrink: 0; }
.wl-rpe-bar-wrap { flex: 1; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.wl-rpe-bar { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.4s; }
.wl-rpe-cnt { font-size: 12px; color: #888; width: 24px; text-align: right; flex-shrink: 0; }
.wl-alert { margin-top: 12px; padding: 10px 14px; background: #fdecea; border-left: 4px solid #c0392b; border-radius: 8px; font-size: 13px; color: #c0392b; font-weight: 600; }

/* 훈련 부하 섹션 4 - 상태 배너 */
.wl-status-banner { border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.wl-status-banner.wl-status-gray   { background: #f2f2f4; }
.wl-status-banner.wl-status-blue   { background: #eaf3ff; }
.wl-status-banner.wl-status-green  { background: #eafaf1; }
.wl-status-banner.wl-status-yellow { background: #fef9e7; }
.wl-status-banner.wl-status-red    { background: #fdecea; }
.wl-status-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.wl-status-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; color: #fff; }
.wl-status-gray   .wl-status-badge  { background: #999; }
.wl-status-blue   .wl-status-badge  { background: #2980b9; }
.wl-status-green  .wl-status-badge  { background: #27ae60; }
.wl-status-yellow .wl-status-badge  { background: #e67e22; }
.wl-status-red    .wl-status-badge  { background: #e74c3c; }
.wl-status-acwr { font-size: 12px; color: #666; font-weight: 600; }
.wl-status-msg { font-size: 13px; color: #444; line-height: 1.5; margin: 0; }

/* 7일 CSS 바 차트 */
.wl-bar-chart { display: flex; align-items: stretch; gap: 6px; height: 120px; margin-bottom: 16px; }
.wl-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.wl-bar-au { font-size: 9px; color: #888; margin-bottom: 2px; height: 12px; line-height: 12px; }
.wl-bar-track { flex: 1; width: 100%; background: #f0edf9; border-radius: 4px 4px 0 0; display: flex; align-items: flex-end; overflow: hidden; }
.wl-bar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.4s ease; min-height: 0; }
.wl-bar-low  { background: #27ae60; }
.wl-bar-mid  { background: #e67e22; }
.wl-bar-high { background: #e74c3c; }
.wl-bar-empty { background: transparent; }
.wl-bar-day { font-size: 10px; color: #888; margin-top: 3px; }

/* 단조로움/스트레인 메타 */
.wl-meta-row { display: flex; flex-direction: column; gap: 8px; }
.wl-meta-item { display: flex; align-items: flex-start; gap: 10px; background: #f9f7ff; border-radius: 10px; padding: 10px 12px; }
.wl-meta-item.wl-meta-warn { background: #fef9e7; }
.wl-meta-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.wl-meta-item strong { font-size: 13px; font-weight: 700; color: #1C0F4A; display: block; margin-bottom: 2px; }
.wl-meta-item p { font-size: 12px; color: #666; margin: 0; line-height: 1.5; }

/* RPE 분포 섹션 5 */
.rpe-zone-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.rpe-zone-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.rpe-zone-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rpe-dot-low  { background: #27ae60; }
.rpe-dot-mid  { background: #e67e22; }
.rpe-dot-high { background: #e74c3c; }
.rpe-zone-name { font-size: 13px; color: #444; font-weight: 600; flex: 1; }
.rpe-zone-stat { font-size: 12px; color: #888; }
.rpe-bar-track { height: 10px; background: #eee; border-radius: 5px; overflow: hidden; }
.rpe-bar-fill { height: 100%; border-radius: 5px; transition: width 0.4s ease; }
.rpe-fill-low  { background: #27ae60; }
.rpe-fill-mid  { background: #e67e22; }
.rpe-fill-high { background: #e74c3c; }

/* RPE 80/20 피드백 박스 */
.rpe-feedback { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; margin-top: 4px; }
.rpe-fb-good   { background: #eafaf1; }
.rpe-fb-warn   { background: #fef9e7; }
.rpe-fb-danger { background: #fdecea; }
.rpe-fb-info   { background: #eaf3ff; }
.rpe-fb-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.rpe-feedback strong { font-size: 13px; font-weight: 700; color: #1C0F4A; display: block; margin-bottom: 3px; }
.rpe-feedback p { font-size: 12px; color: #555; margin: 0; line-height: 1.5; }
.wl-no-data { font-size: 13px; color: #aaa; text-align: center; padding: 20px 0; margin: 0; }

/* ── 식품군 2열 그리드 ── */
.fg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fg-card { background: #F9F7FF; border-radius: 14px; padding: 12px 14px; }
.fg-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fg-emoji { font-size: 18px; line-height: 1; }
.fg-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.fg-bar-wrap { height: 6px; background: #E5E0F5; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.fg-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.fg-bar-ok   { background: var(--primary); }
.fg-bar-low  { background: #bdc3c7; }
.fg-bar-high { background: #e67e22; }
.fg-amounts { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.fg-real { font-size: 20px; font-weight: 800; color: var(--primary); line-height: 1; }
.fg-unit { font-size: 12px; font-weight: 500; margin-left: 1px; }
.fg-pct { font-size: 11px; color: #aaa; }
.fg-pct-ok   { color: var(--primary); }
.fg-pct-low  { color: #95a5a6; }
.fg-pct-high { color: #e67e22; }
.fg-sentence { font-size: 11px; color: var(--text-secondary); line-height: 1.4; margin: 0; }
.fg-sentence { font-size: 11px; color: var(--text-muted); }

/* ── 회복 페이지 ── */
.rc-night-warning { background: #1C0F4A; color: #fff; border-radius: 14px; padding: 12px 16px; font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.rc-summary-card { background: linear-gradient(135deg, #6C3CE1 0%, #9B6FF5 100%); color: #fff; }
.rc-summary-row { display: flex; align-items: center; gap: 16px; }
.rc-ring-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.rc-ring-wrap .ring-svg { width: 80px; height: 80px; }
.rc-ring-wrap .ring-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.rc-ring-wrap .ring-pct { font-size: 16px; font-weight: 800; color: #fff; display: block; }
.rc-ring-wrap .ring-sub { font-size: 10px; color: rgba(255,255,255,0.8); display: block; }
.rc-summary-right { flex: 1; }
.rc-acwr-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.rc-acwr-val { font-size: 28px; font-weight: 800; color: #fff; }
.rc-acwr-label { font-size: 11px; color: rgba(255,255,255,0.75); }
.rc-summary-card .wl-readiness { background: rgba(255,255,255,0.15); border-left-color: rgba(255,255,255,0.5); color: #fff; font-size: 12px; padding: 8px 10px; }
.rc-summary-card .wl-badge { background: rgba(255,255,255,0.2); color: #fff; }

/* 회복 점수 분해 */
.rc-breakdown-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rc-bd-label { font-size: 12px; color: var(--text-secondary); width: 64px; flex-shrink: 0; }
.rc-bd-bar-wrap { flex: 1; height: 8px; background: #EEE8FF; border-radius: 4px; overflow: hidden; }
.rc-bd-bar { height: 100%; border-radius: 4px; transition: width 0.4s; }
.rc-bd-val { font-size: 13px; font-weight: 700; color: var(--primary); width: 36px; text-align: right; flex-shrink: 0; }
.rc-bd-max { font-size: 10px; font-weight: 400; color: #aaa; }

/* 수면 탭 */
.rc-tab-row { display: flex; gap: 6px; margin-bottom: 12px; }
.rc-tab { flex: 1; padding: 6px 0; border: 1.5px solid #D8D1F5; border-radius: 20px; background: #fff; font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
.rc-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.rc-sleep-hint { font-size: 11px; color: #aaa; margin-top: 6px; text-align: center; }

/* 탄수화물 급원 테이블 토글 */
details summary { outline: none; }
details[open] .cho-table-arrow { transform: rotate(90deg); }