/* ui-redesign.css — 새 화면(가독성·동선 개선)
   모든 규칙은 body.ui2 아래에서 작동한다(ui-redesign.js가 항상 붙인다). */

/* 1. 너무 작은 글씨(7~11px)를 12.5px 이상으로 */
body.ui2 :is(.dash-kpi-copy > span, .dash-kpi-copy small,
  .dash-move-title small, .dash-move-meta span, .dash-move-meta b,
  .dash-ib-score span, .dash-ib-score small, .dash-ib-metrics > div > span,
  .dash-calendar-head span, .dash-day,
  .dash-cardio-title span, .dash-cardio-stats span, .dash-cardio-compare,
  .dash-session-date span, .dash-session-copy span, .dash-session-open,
  .dash-ex-kpis span, .dash-ex-kpis small, .dash-ex-axis,
  .dash-section-head > div > span, .dash-panel-head > div > span, .dash-section-head p, .dash-panel-help,
  .dash-section-guide, .dash-live,
  .wt-hero-stats span, .wt-hero-stats small, .wt-result-count,
  .wt-pick-index, .wt-pick-tags i, .wt-pick-main > small, .wt-pick-score > small,
  .wt-status, .wt-card-top > span, .wt-card-genres, .wt-card-ai > span, .wt-card-point,
  .wt-gap-item span, .wt-gap-item b, .wt-list-ai span, .wt-list-ai small, .wt-list-main > p, .wt-list-main > small) {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}
body.ui2 :is(.dash-session-copy strong, .wt-card-title, .wt-pick-main > strong, .wt-list-main > strong, .wt-gap-item strong) {
  font-size: 15px !important;
  font-weight: 850 !important;
}
body.ui2 :is(.set-detail-table, .analysis-table) { font-size: 14.5px !important; }
body.ui2 :is(.set-detail-table, .analysis-table, .dash-move-card, .dash-ib-metrics, .dash-hero-grid) { font-variant-numeric: tabular-nums; }

/* 2. 증감 표시를 배경이 있는 알약 모양으로 (글자색만 바뀌던 것) */
body.ui2 :is(span, b).up, body.ui2 :is(span, b).down, body.ui2 .dash-delta.up, body.ui2 .dash-delta.down {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
  font-weight: 800 !important; font-variant-numeric: tabular-nums;
}
body.ui2 :is(span, b).up, body.ui2 .dash-delta.up { background: #d1fae5 !important; color: #047857 !important; }
body.ui2 :is(span, b).down, body.ui2 .dash-delta.down { background: #ffe4e6 !important; color: #be123c !important; }
/* 인바디 수치는 '오르면 좋다'가 아니므로(체지방↑는 나쁨) 원래처럼 중립색 유지 */
body.ui2 .dash-ib-metrics .dash-delta.up { background: #e8eefc !important; color: #3561d8 !important; }
body.ui2 .dash-ib-metrics .dash-delta.down { background: #efeafc !important; color: #7658df !important; }

/* 3. PC·태블릿: 화면 전환 메뉴를 위쪽 머리글 한 줄로 합침 (휴대폰은 아래쪽 그대로) */
@media (min-width: 721px) {
  body.ui2 .app-header .header-inner {
    width: min(1320px, 100%); display: flex !important; flex-wrap: nowrap; align-items: center;
    gap: 16px; padding: 10px 22px !important;
  }
  body.ui2 .app-header #areaBar { flex: 0 0 auto; width: auto !important; margin: 0 !important; }
  body.ui2 .app-header #tabBar {
    position: static !important; transform: none !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important; margin-left: auto; padding: 4px !important; border-radius: 12px !important;
    box-shadow: none !important; background: #f1f5f9 !important; border: 1px solid #dfe7f1;
  }
  body.ui2 .app-header #tabBar button {
    flex: 0 0 auto; display: inline-flex !important; flex-direction: row; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 14px;
  }
  body.ui2 .app-header #tabBar button i { font-size: 14px; }
  body.ui2 { padding-bottom: 40px !important; }
}

/* 4. 꾸밈용 'SYSTEM 현재 기록 구조' 패널 숨김 */
body.ui2 .dash-system-panel { display: none !important; }

/* 5. 달력·최근 세션(왼쪽) + 상세 기록 비교(오른쪽) 나란히 */
body.ui2 .ui2-body-full { grid-template-columns: 1fr !important; }
@media (min-width: 1100px) {
  body.ui2 .ui2-master-detail {
    display: grid; grid-template-columns: minmax(340px, 0.8fr) minmax(0, 1.4fr); gap: 18px; align-items: start; margin: 0 0 22px;
  }
  body.ui2 .ui2-master { display: grid; gap: 18px; min-width: 0; }
  body.ui2 .ui2-master > .dash-panel { margin: 0; }
  body.ui2 .ui2-detail { min-width: 0; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; border-radius: 24px; }
  body.ui2 .ui2-detail > .dash-record-panel { margin: 0 !important; }
}
@media (max-width: 1099.98px) {
  body.ui2 .ui2-master-detail, body.ui2 .ui2-master { display: grid; gap: 18px; margin-bottom: 22px; }
}

/* 6. 넓은 화면: 기록 입력 칸(왼쪽) + 해석 결과(오른쪽) */
@media (min-width: 1024px) {
  body.ui2 .dash-composer.composer:not([hidden]) {
    display: grid !important; grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.25fr); gap: 18px; align-items: start;
  }
  body.ui2 .dash-composer .dash-input-grid { grid-template-columns: 1fr !important; }
  body.ui2 .dash-composer .preview-shell { margin-top: 0 !important; }
}
body.ui2 .ui2-autoparse-note { margin-left: 8px; color: #047857; font-weight: 700; }