* {
  box-sizing: border-box;
}

html,
body {
  min-width: var(--sp-320);
  min-height: 100%;
  margin: 0;
  background: var(--bg-gradient, var(--bg));
  background-attachment: fixed;
  color: var(--text);
  font-family:
    Pretendard,
    "Noto Sans KR",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: var(--fs-body);
  line-height: 1.52;
  letter-spacing: -0.012em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

input[type="number"] {
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

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

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: var(--sp-3) solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: var(--sp-3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 버튼 부품 — 토큰 간접층(--btn-*)만 참조한다. 값 변경은 tokens.css에서 한다 */
.btn {
  display: inline-flex;
  min-height: var(--btn-h);
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--border2);
  border-radius: var(--btn-radius);
  background: var(--bg3);
  color: var(--text);
  font-size: var(--btn-font-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--btn-tracking);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--btn-fg);
}

/* shape — 기본이 pill. --pill은 기존 마크업 하위호환 alias, --square는 각진 변형 */
.btn--pill {
  border-radius: var(--btn-radius);
}

.btn--square {
  border-radius: var(--btn-radius-square);
}

.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text2);
}

.btn--danger {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
}

.btn--wide {
  width: 100%;
}

/* size 변형 — 본앱 .btn--sm/.btn--icon 구조 차용 */
.btn--lg {
  min-height: var(--btn-h-lg);
}

.btn--sm {
  min-height: var(--btn-h-sm);
  padding: 0 var(--btn-pad-x-sm);
  font-size: var(--btn-font-size-sm);
  font-weight: 740;
}

/* ★밀집 조작부 계약 — 이 규칙의 소유자는 여기 한 곳뿐이다(§9-6).
   표 위·카드 안처럼 "눌러야 하지만 컨텐츠를 덮으면 안 되는" 자리의 단일 수치.
   보이는 크기 32px·반경 10px(사장님 2026-07-28 확정) / 실제 터치영역 48px.
   ※ 2026-07-28 자기검수: 이 계약을 .btn--xs·.hist-fitlink·.sr-more·.hist-select--window
      네 곳에 손으로 복제해 두었었다(=늪). 하나만 고치면 나머지가 어긋나는 상태였다 → 여기로 통합.
      화면은 CSS를 다시 쓰지 않고 마크업에 .ui-dense를 입기만 한다. */
.ui-dense,
.btn--xs {
  position: relative;
  min-height: var(--btn-h-xs);
  padding: 0 var(--btn-pad-x-xs);
  border-radius: var(--btn-radius-xs);
  font-size: var(--btn-font-size-xs);
  font-weight: 740;
}

.ui-dense:not(select)::after,
.btn--xs::after {
  position: absolute;
  right: 0;
  left: 0;
  top: calc((var(--btn-h-xs) - var(--tap-main)) / 2);
  bottom: calc((var(--btn-h-xs) - var(--tap-main)) / 2);
  content: "";
}

/* 네이티브 select는 replaced element라 ::after 히트영역을 신뢰할 수 없다.
   48px 실제 label이 32px 시각 select를 감싸고, 상하 여백 탭도 select로 전달한다(A-08). */
.ui-dense-control {
  display: inline-flex;
  min-height: var(--tap-main);
  align-items: center;
}

.ui-dense-control > .ui-dense {
  min-height: var(--btn-h-xs);
  height: var(--btn-h-xs);
}

/* ★라벨은 잘리지 않는다 — §9-4가 이미 "'기간 검색'이 '기간 검…'으로 잘림"을 대표 위반으로 명시했다.
   조작부 라벨에 max-width+ellipsis를 걸어 폭을 버는 것은 금지다. 폭이 모자라면 컨트롤을 옮기거나 접는다. */
.ui-dense > svg,
.ui-dense > .app-icon {
  width: var(--btn-icon-size-sm);
  height: var(--btn-icon-size-sm);
}

.btn--icon {
  width: var(--btn-h-sm);
  height: var(--btn-h-sm);
  min-height: 0;
  gap: 0;
  padding: 0;
}

/* 버튼 내 아이콘 크기 — 누락 시 svg가 기본 크기로 비대해진다(본앱 src/index.css 규칙 차용) */
.btn > .app-icon,
.btn > svg {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  flex-shrink: 0;
}

.btn--sm > .app-icon,
.btn--sm > svg {
  width: var(--btn-icon-size-sm);
  height: var(--btn-icon-size-sm);
}

.btn--icon > .app-icon,
.btn--icon > svg {
  width: var(--btn-icon-size-only);
  height: var(--btn-icon-size-only);
}

.btn[disabled],
.btn:disabled {
  cursor: not-allowed;
  opacity: var(--btn-disabled-opacity);
}

.icon-button {
  display: inline-grid;
  width: var(--tap-icon);
  height: var(--tap-icon);
  flex: 0 0 var(--tap-icon);
  place-items: center;
  border: 0;
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-20);
  font-weight: 760;
}

.icon-button:active {
  background: var(--bg4);
}

.app-icon {
  display: block;
  width: var(--sp-22);
  height: var(--sp-22);
  flex: 0 0 auto;
  color: currentColor;
  pointer-events: none;
}

.app-icon--more {
  width: var(--space-6);
  height: var(--space-6);
}

/* 테마 리모컨 — 실루엣 아이콘은 본앱 Layout ThemeToggle과 같은 18px(§9-7 같은 역할 같은 수치). */
.icon-button--theme > .app-icon {
  width: var(--sp-18);
  height: var(--sp-18);
}

/* ★세로 스택은 자식이 컨테이너를 넘지 못하게 한다 — 이 규칙의 소유자는 여기 한 곳뿐이다.
   grid 아이템의 기본 min-width는 auto라서, 안에 긴 한 줄이 있으면 **스택 자체가 화면보다 넓어진다**.
   그러면 셸이 가로 스크롤로 흡수해 "문서는 안 넘쳤는데 화면 오른쪽이 잘려 보이는" 상태가 된다
   (320px 실측: 기록 카드 380px > 화면 305px). 화면마다 min-width:0을 뿌리는 대신 스택 부품이 소유한다. */
.page__stack,
.card,
.ui-card {
  grid-template-columns: minmax(0, 1fr);
}

/* ★카드 안 문단은 브라우저 기본 마진(1em)을 갖지 않는다 — 그 마진이 카드 gap 위에 겹쳐
   같은 카드가 화면마다 다른 높이를 갖게 만든다(§9-6 위반). 실측: 근력 리포트 세션 카드에서
   <p> 하나가 위아래 32px씩을 더해 카드가 377px까지 부풀어 있었다(사장님 2026-07-28 "높이가 과도").
   간격은 .card/.ui-card의 gap이 단독으로 소유한다(§10-1-a). */
.card > p,
.ui-card > p {
  margin: 0;
}

/* ★래퍼가 하나라도 끼면 위 직계 리셋(> p)이 닿지 않아 UA 마진이 되살아난다(§9-16 사각 — 2026-07-29
   근력 리포트 세션 카드 실측: 래퍼 도입만으로 183→186px 역행·동종 32건). :where() 로 특성도를 0으로
   낮춰 두면 작성자가 명시한 마진은 전부 살아남고 브라우저 기본값만 무력화된다 — 전 라우트 실측 회귀 0. */
.card :where(p),
.ui-card :where(p) {
  margin: 0;
}

/* 카드 박스 = 내부 리듬까지 부품이 소유한다(§9-6). 화면 co-class가 gap을 다시 정하지 않아도
   카드 안 형제 간격은 항상 --space-3(12) 단일이다(§10-1 간격 계약). */
.card {
  display: grid;
  gap: var(--space-3);
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg2);
}

.card--large {
  border-radius: var(--radius-14);
}

.badge {
  display: inline-flex;
  min-height: var(--space-6);
  align-items: center;
  padding: var(--sp-3) var(--sp-9);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-13);
  font-weight: 750;
  line-height: 1;
}

.badge--muted {
  background: var(--bg4);
  color: var(--text2);
}

/* 본문 셸 = 자체 스크롤 컨테이너. 앱바 아래에서 시작하므로 본문이 헤더 영역으로 올라올 수 없다
   (문서 전체 스크롤 → 본문이 고정 앱바 뒤를 지나가던 구조를 제거). 배경은 body의 고정 그라데이션이
   그대로 비친다. z-index는 두지 않는다 — 스택 컨텍스트가 생기면 앱바·시트·메뉴 층위가 갇힌다. */
.app-shell {
  position: fixed;
  top: calc(var(--safe-top) + var(--appbar-h));
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-right: var(--safe-right);
  padding-bottom: calc(var(--safe-bottom) + var(--tabbar-h));
  padding-left: var(--safe-left);
}

.app-shell--immersive {
  top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.app-shell--auth {
  padding-bottom: var(--safe-bottom);
}

/* 오버레이가 열려 있는 동안 뒤 본문 스크롤 잠금 — 문서 스크롤이 아니게 되면서
   body overflow 잠금이 무력해진 것을 구조로 대체한다(화면별 분기 없음). */
body:has(.sheet-layer.is-open) .app-shell,
body:has([data-v2-map-overlay]:not([hidden])) .app-shell {
  overflow: hidden;
}

.appbar {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  left: 0;
  height: calc(var(--safe-top) + var(--appbar-h));
  padding:
    var(--safe-top)
    calc(var(--safe-right) + var(--space-2))
    0
    calc(var(--safe-left) + var(--space-2));
  /* 배경 = 완전 투명. 본문 배경 그라데이션이 그대로 비친다.
     본문은 .app-shell 자체 스크롤 컨테이너 안에서만 움직여 구분선 위로 올라오지 못하므로
     불투명 배경·블러·페이드 같은 가리개가 필요 없다(구조로 해결 · §9-5-1). */
  background: transparent;
}

/* 헤더 구분선 — 좌우 var(--space-2) 안쪽. border-bottom 대신 부품 자체 ::after가 소유한다(§9-6).
   헤더 자체·내용물(로고·타이틀·액션)의 여백·위치는 건드리지 않는다. */
.appbar::after {
  position: absolute;
  right: var(--space-2);
  bottom: 0;
  left: var(--space-2);
  height: 1px;
  background: var(--appbar-line);
  content: "";
}

.appbar__inner {
  position: relative;
  display: grid;
  width: 100%;
  max-width: var(--content-max);
  height: var(--appbar-h);
  margin: 0 auto;
  /* ★칸을 1fr로 반씩 나누면 좌우 내용 폭이 다를 때 넓은 쪽이 칸을 넘어 **가운데를 침범한다**.
     320px 실측: 우측 아이콘 3개(132px)가 119px 칸을 넘어 왼쪽으로 삐져나와 타이틀과 겹쳤다.
     → 좌우는 **내용 폭(auto)**, 가운데는 **남는 폭 전부(minmax(0,1fr))**.
     이러면 어떤 폭에서도 겹칠 수 없다. 가운데가 완벽한 중앙이 아니게 되는 것은 감수한다(겹침이 더 큰 결함).
     가운데가 좁아지면 fitAppbar가 브랜드 글자 → AI 라벨 순으로 접어 자리를 되돌려준다. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.appbar__side {
  display: flex;
  min-width: 0;
  align-items: center;
}

.appbar__side--right {
  justify-content: flex-end;
}

.appbar__context-slot,
.appbar__global-slot {
  display: flex;
  min-width: 0;
  align-items: center;
}

.appbar__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-17);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ★가운데 칸은 무엇이 오든 중앙 정렬(주의점2 · 2026.07.29).
   정본 = 코치노트·설정 화면의 `.appbar__title`(text-align:center). 뷰 스위처만 칸 왼쪽에 붙어 있었다.
   정렬 규칙은 앱바(칸의 주인)가 소유한다 — 부품마다 제각각 정렬을 갖지 않는다.
   justify-self(칸 안에서 중앙)로 두는 이유: 버튼을 칸 폭만큼 늘리면 hover 알약이 상단 전체로 번진다. */
.appbar__inner > .appbar__view-switch {
  justify-self: center;
}

/* 앱바 내장 뷰 스위처 — 상단 풀폭 세그먼트 대체. 현재 뷰 이름+캐럿, 탭하면 바텀시트로 전환(깔끔·항상 노출) */
.appbar__view-switch {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
  min-height: var(--sp-36);
  padding: 0 var(--space-1h) 0 var(--space-2h);
  border-radius: var(--radius-pill);
  color: var(--text);
  background: transparent;
  transition: background .18s ease;
}
.appbar__view-switch:hover,
.appbar__view-switch:active { background: var(--bg3); }
.appbar__view-switch-label {
  overflow: hidden;
  font-size: var(--fs-17);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.appbar__view-switch-caret {
  display: inline-flex;
  color: var(--text3);
  transform: rotate(0deg);
}
.appbar__view-switch-caret svg { width: var(--sp-18); height: var(--sp-18); }

.appbar__action {
  display: inline-flex;
  min-width: var(--tap-icon);
  min-height: var(--tap-icon);
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-14);
  font-weight: 780;
}

/* AI에게 물어보기 — 앱바 우측 아이콘 버튼(§9-7 우측 액션은 모두 44px 아이콘 버튼 단일 역할).
   라벨은 aria-label·title이 갖는다(§9-4 폭 적응 · 테마 리모컨 합류로 텍스트가 겹치던 것을 구조로 해소). */
.appbar__action--ai {
  min-width: var(--tap-icon);
  padding: 0;
  gap: var(--btn-gap);
  white-space: nowrap;
}
.appbar__action--ai > svg {
  width: var(--sp-18);
  height: var(--sp-18);
}

/* ★[hidden]은 display가 따로 지정된 요소에서는 무력하다(display:flex가 이긴다).
   셸이 접기로 판단한 것은 실제로 자리에서 사라져야 한다 — 안 그러면 접어도 폭이 그대로다(320px 실측). */
.brand__type[hidden],
.appbar__action--ai span[hidden],
.appbar__context-action[hidden],
.menu-item[hidden],
.bar-chart__item[hidden],
.btn[hidden] {
  display: none;
}

/* 워드마크를 접어도 min-width가 남으면 접은 의미가 없다(320px 실측: 접고도 겹침).
   폭은 내용이 정한다 — 셸의 fitAppbar가 접힘을 결정하고, 최소폭은 grid 칸이 이미 갖고 있다. */
/* ★BI 정본 준수(주의점1 · 2026.07.29) — BI 진본은 본앱 `.bi`(src/index.css .topbar .brand .bi)다.
   목업이 자체로 잡았던 값(gap 4 · 900 굵기 · 자간 -0.07em · 워드마크 --text · PACELOG 본문폰트)은
   정본을 따르지 않은 것이라 정본 값으로 되돌린다: gap 0(0px 밀착) · DAllOG Pretendard 800 accent ·
   PACELOG Bebas Neue 자간 0.14em. 러너 38px·심볼 색(--accent)은 이미 정본과 같아 그대로 둔다. */
.brand {
  display: inline-flex;
  height: var(--tap-icon);
  align-items: center;
  gap: 0;
  border-radius: var(--radius-6);
  color: var(--text);
}

.brand__runner {
  display: block;
  width: var(--sp-38);
  height: var(--sp-38);
  flex: 0 0 var(--sp-38);
  overflow: visible;
  fill: var(--accent);
}

.brand__type {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 0.95;
}

.brand__name {
  color: var(--accent);
  font-size: var(--sp-22);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 0.95;
}

.brand__sub {
  margin-top: var(--sp-5);
  color: var(--text2);
  font-family: var(--font-display);
  font-size: var(--sp-9);
  font-weight: 400;
  letter-spacing: 0.14em;
}

.bottom-nav {
  position: fixed;
  z-index: 38;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding:
    0
    calc(var(--safe-right) + var(--space-2))
    var(--safe-bottom)
    calc(var(--safe-left) + var(--space-2));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg2) 96%, transparent);
  backdrop-filter: blur(var(--sp-18));
}

.bottom-nav__inner {
  display: grid;
  width: 100%;
  max-width: var(--tab-cluster-max);
  height: var(--tabbar-h);
  margin: 0 auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.tab-item {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: var(--tap-main);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--text3);
  font-size: var(--fs-11);
  font-weight: 740;
  line-height: 1;
}

.tab-item__icon {
  display: grid;
  width: var(--sp-26);
  height: var(--sp-26);
  place-items: center;
}

/* '내정보' 탭 아바타 — 본앱 src/index.css .lay-avatar 규칙 이식(26px 원형·사진 없으면 첫 글자 폴백).
   본앱은 .lay-tab .lay-avatar 26 / active 28을 쓰지만, 목업 탭 아이콘 칸이 26px 고정이라 26 단일로 둔다(§9-7). */
.lay-avatar {
  width: var(--sp-26);
  height: var(--sp-26);
  flex: none;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.lay-avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-12);
  font-weight: 800;
  line-height: 1;
}

.tab-item__icon .app-icon {
  width: var(--space-6);
  height: var(--space-6);
}

.tab-item.is-active {
  color: var(--accent);
}

.tab-item--start {
  overflow: visible;
  background: transparent;
}

.tab-item__start {
  display: grid;
  width: var(--sp-56);
  height: var(--sp-56);
  margin-top: -20px;
  place-items: center;
  border: var(--sp-5) solid var(--bg2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--btn-fg);
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1;
  box-shadow: var(--shadow-control);
}

.tab-item__start .app-icon {
  width: var(--space-6);
  height: var(--space-6);
}

.menu-item > .app-icon,
.field-trigger > .app-icon,
.sheet-option__meta .app-icon {
  width: var(--sp-18);
  height: var(--sp-18);
}

.sheet-option__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.tab-item--start span:last-child {
  margin-top: 1px;
}

.page {
  width: 100%;
  max-width: var(--content-max);
  min-height: calc(100dvh - var(--safe-top) - var(--appbar-h) - var(--tabbar-h) - var(--safe-bottom));
  margin: 0 auto;
  padding: var(--space-5) var(--page-gutter) var(--space-7);
}

.page--parts {
  padding-bottom: var(--sp-132);
}

.page--auth {
  display: flex;
  min-height: calc(100dvh - var(--safe-top) - var(--appbar-h) - var(--safe-bottom));
  align-items: center;
  justify-content: center;
}

.page--immersive {
  min-height: var(--viewport-h);
  padding-top: var(--space-4);
}

/* 섹션 사이 간격 = var(--space-6) 단일화(부품 간격 계약). --loose는 하위호환 alias(동일값) */
.page__stack {
  display: grid;
  min-width: 0;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

.page__stack > * {
  min-width: 0;
}

.page__stack--loose {
  gap: var(--space-6);
}

.eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--accent);
  font-size: var(--fs-13);
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-title {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 880;
  line-height: 1.24;
  letter-spacing: -0.035em;
}

.page-copy {
  max-width: var(--sp-620);
  margin: var(--space-2) 0 0;
  color: var(--text2);
  font-size: var(--fs-15);
  line-height: 1.5;
}

.stub-hero {
  display: grid;
  min-height: var(--sp-240);
  align-content: space-between;
  gap: var(--space-6);
}

.stub-hero__route {
  color: var(--text3);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--fs-13);
  overflow-wrap: anywhere;
}

.stub-actions {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-directory {
  display: grid;
  gap: var(--space-2);
}

.route-link {
  display: flex;
  min-height: var(--tap-main);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2h) var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--text2);
  font-size: var(--fs-body);
}

.route-link:last-child {
  border-bottom: 0;
}

.route-link__path {
  color: var(--text3);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--fs-12);
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.section-title {
  margin: 0;
  font-size: var(--fs-19);
  font-weight: 820;
  line-height: 1.25;
}

.section-copy {
  margin: var(--space-1) 0 0;
  color: var(--text3);
  font-size: var(--fs-15b);
}

/* COMPONENT_CONTRACT · reusable presentation hierarchy */
.ui-page-header {
  display: grid;
  gap: var(--space-1);
}

.ui-page-header__eyebrow {
  margin-bottom: var(--space-1);
  /* 자립화 — 아이브로 시각을 부품 클래스로 보유(공용 .eyebrow 무관) */
  color: var(--accent);
  font-size: var(--fs-13);
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-page-header__title {
  /* 자립화 — 페이지 타이틀 시각을 부품 클래스로 보유(공용 .page-title 무관) */
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 880;
  line-height: 1.24;
  letter-spacing: -0.035em;
}

.ui-page-header__copy {
  max-width: var(--form-max);
  margin: var(--space-1) 0 0;
  color: var(--text2);
  font-size: var(--fs-page-copy);
  line-height: 1.5;
}

.ui-section {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
}

.ui-section__head {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ui-section__heading {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: var(--space-2);
}

.ui-section__title {
  /* 자립화 — 섹션 타이틀 굵기를 부품 클래스로 보유(공용 .section-title 무관) */
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 820;
  line-height: 1.3;
}

.ui-section__copy {
  max-width: var(--form-max);
  margin: 0;
  color: var(--text2);
  font-size: var(--fs-14b);
  line-height: 1.5;
}

.ui-section__action {
  flex: 0 0 auto;
}

.ui-section__body,
.ui-card {
  min-width: 0;
}

/* 섹션 본문 — 형제 카드 간 간격을 부품이 소유한다(호출부 margin 금지) */
.ui-section__body {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

.ui-card {
  display: grid;
  gap: var(--space-3);
  /* 자립화 — 카드 박스(패딩·테두리·반경·배경)를 부품 클래스로 보유(공용 .card 무관) */
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg2);
}

.ui-card--large {
  padding: var(--space-5);
  border-radius: var(--radius-14);
}

/* ★밀도 수치의 단일 소유자(2026-07-29 코덱스 조건부PASS 반영) —
   같은 '밀집 카드' 밀도(간격 4 · 패딩 12)를 --dense-metric · --tight · 구형 .dense-metric 이
   각자 들고 있었다. 같은 역할이면 같은 수치 하나여야 한다(늪 §4 역할 중복 생산).
   → 공통 밀도는 여기 한 규칙이 소유하고, 아래 --dense-metric 은 자기 고유분(최소높이·수직정렬)만 갖는다. */
.ui-card--dense-metric,
.ui-card--tight,
.dense-metric {
  gap: var(--space-1);
  padding: var(--space-3);
}

/* dense-metric 고유분 — 터치 최소높이 확보와 수직 가운데 정렬(밀도와 별개 역할) */
.ui-card--dense-metric {
  min-height: var(--tap-main);
  align-content: center;
}

/* 구분선(border-top) 행으로 이뤄진 리스트 카드 — 행 사이 간격은 0이 정본 */
.ui-card--list {
  gap: 0;
}

/* 밀집 요약 지표 카드 — 라벨·값처럼 한 덩어리인 내용에 카드 형제 간격(12)을 그대로 먹이면
   문단마다 벌어져 높이가 과도해진다. 밀도만 바꾸는 수식자(.ui-card--list 와 같은 계열).
   ※ .ui-card--dense-metric 을 쓰지 않는 이유: Card 가 구형 타일 클래스 .dense-metric 을 함께 붙여
      카드 제목 타이포까지 13.2px/흰색 → 11.5px/회색으로 바뀐다(2026-07-29 실측). 밀도만 필요할 때 이걸 쓴다.
   ※ 밀도 수치 자체는 위 공통 규칙이 소유한다 — 여기서 다시 선언하지 않는다. */

.ui-card--danger {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
  background: var(--danger-soft);
}

.ui-card--interactive {
  min-height: var(--tap-icon);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.ui-card--summary {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.ui-badge {
  display: inline-flex;
  width: fit-content;
  min-height: var(--space-6);
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-13);
  font-weight: 750;
  line-height: 1;
}

.ui-badge--accent {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent2);
}

.ui-badge--muted {
  border-color: var(--border2);
  background: var(--bg4);
  color: var(--text2);
}

.ui-badge--danger {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
}

.ui-badge--success {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent2);
}

:root[data-theme="light"] .ui-badge--accent,
:root[data-theme="light"] .ui-badge--success {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg2));
  color: var(--accent2);
}

/* ─── 캡션·힌트 위계 (목업 신설 정본 · 본앱 차용 불가 영역) ─── */
.ui-caption {
  color: var(--text2);
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: 1.5;
}

.ui-caption--muted {
  color: var(--text3);
}

.ui-caption--micro {
  color: var(--text3);
  font-size: var(--fs-11);
  font-weight: 740;
  letter-spacing: 0.02em;
}

.ui-hint {
  color: var(--text3);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1.45;
}

/* 수치 표기 — 자릿수 정렬 */
.ui-num {
  font-variant-numeric: tabular-nums;
}

/* ─── 액션 행 — 카드 안에서 박스를 다시 만들지 않는다(§9-2 박스는 한 겹만) ─── */
.ui-action-row {
  display: grid;
  gap: var(--space-1h);
  padding: var(--space-3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ui-action-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-1h);
  font-size: var(--fs-13);
  font-weight: 780;
}

.ui-action-row__body {
  color: var(--text2);
  font-size: var(--fs-13);
  line-height: 1.55;
}

/* 단순 세로 스택 — 카드/섹션 안에서 형제 블록을 var(--space-3) 리듬으로 묶는다 */
.ui-stack {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}

/* ─── 형제 간 추가 간격 — 부품 기본 gap 위에 얹는 예외값. JS 인라인 style 대체재 ─── */
.ui-mt-2 {
  margin-top: var(--space-2);
}

.ui-mt-3 {
  margin-top: var(--space-3);
}

.ui-mt-4 {
  margin-top: var(--space-4);
}

:root[data-theme="light"] .ui-badge--danger {
  background: color-mix(in srgb, var(--danger) 9%, var(--bg2));
}

.ui-metric {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: var(--space-1);
}

.ui-metric__label,
.ui-metric__trend {
  color: var(--text2);
  font-size: var(--fs-12);
}

.ui-metric__value {
  min-width: 0;
  font-size: var(--fs-20);
  /* 자립화 — 지표 값 굵기를 부품 클래스로 보유(<strong> 태그 의존 제거) */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.ui-metric__value small {
  margin-left: var(--space-1);
  color: var(--text3);
  font-size: var(--fs-12);
  font-weight: 650;
}

.ui-metric--hero .ui-metric__value {
  font-size: var(--fs-48);
}

.ui-metric--compact .ui-metric__value {
  font-size: var(--fs-17);
}

.ui-stat-grid {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-stat-grid .ui-metric {
  min-height: var(--tap-main);
  padding: var(--space-3);
  border-radius: var(--radius-6);
  background: var(--bg3);
}

.ui-card--summary .ui-stat-grid .ui-metric {
  background: var(--bg2);
}

.ui-gauge,
.ui-coverage-row {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.ui-gauge:first-child,
.ui-coverage-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.ui-gauge__head,
.ui-coverage-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.ui-gauge__head > span,
.ui-coverage-row__head > strong {
  color: var(--text2);
  font-size: var(--fs-13);
  font-weight: 760;
  text-align: right;
}

.ui-gauge__track,
.ui-coverage-row__track {
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bg4);
}

.ui-gauge__track i,
.ui-coverage-row__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent2);
}

.ui-gauge--caution .ui-gauge__track i {
  background: var(--info);
}

.ui-gauge--warn .ui-gauge__track i {
  background: var(--danger);
}

.ui-gauge__note,
.ui-coverage-row > p {
  margin: 0;
  color: var(--text2);
  font-size: var(--fs-13);
  line-height: 1.5;
}

.ui-coverage-row > p {
  color: var(--text3);
  font-size: var(--fs-12);
}

.ui-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-timeline__item {
  display: grid;
  min-width: 0;
  grid-template-columns: var(--sp-60) var(--space-5) minmax(0, 1fr);
}

.ui-timeline__item > time {
  padding-top: var(--space-3);
  color: var(--text3);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}

.ui-timeline__rail {
  position: relative;
}

.ui-timeline__rail::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--border2);
  content: "";
  transform: translateX(-50%);
}

.ui-timeline__rail i {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent2);
  transform: translateX(-50%);
}

.ui-timeline__rail--info i {
  background: var(--info);
}

.ui-timeline__rail--danger i {
  background: var(--danger);
}

.ui-timeline__rail--muted i {
  background: var(--text3);
}

.ui-timeline__content {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-4);
}

.ui-timeline__content > header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.ui-timeline__content > header span {
  color: var(--text3);
  font-size: var(--fs-12);
  text-align: right;
}

.ui-timeline__content > p {
  margin: 0;
  color: var(--text2);
  font-size: var(--fs-13);
  line-height: 1.55;
}

.ui-timeline__content > ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-timeline__content > ul > li {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-6);
  background: var(--bg3);
}

.ui-timeline__content > ul span {
  color: var(--text2);
  font-size: var(--fs-12);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .ui-stat-grid {
    grid-template-columns: repeat(var(--ui-stat-columns, 2), minmax(0, 1fr));
  }
}

.parts-grid {
  display: grid;
  gap: var(--space-4);
}

.part-card {
  display: grid;
}

.part-demo {
  display: grid;
  gap: var(--space-3);
}

.segment {
  display: grid;
  min-height: var(--tap-main);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  background: var(--bg3);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* ★자립화(2026.07.25 §8): 정렬이 UA 기본(button=text-align:center)에만 의존해 <a>로 쓰면 좌측정렬로 깨지던 늪 —
   정렬·장식을 부품 자체 클래스로 완결. 기존 .screen-tabs 반창고와 동일 토큰이라 렌더 불변. */
.segment__item {
  display: grid;
  place-items: center;
  min-height: var(--tap-main);
  padding: var(--space-2) var(--space-2h);
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
}

.segment__item.is-selected {
  background: var(--accent);
  color: var(--btn-fg);
}

.field-trigger {
  display: flex;
  width: 100%;
  min-height: var(--tap-main);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2h) var(--space-3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-6);
  background: var(--bg3);
  text-align: left;
}

.field-trigger__label {
  color: var(--text3);
  font-size: var(--fs-13);
  font-weight: 720;
}

.field-trigger__value {
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 740;
}

.chip-row {
  display: flex;
  width: calc(100% + var(--page-gutter));
  gap: var(--space-2);
  padding-right: var(--page-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  min-height: var(--tap-main);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--sp-14);
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  background: var(--bg3);
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 740;
  scroll-snap-align: start;
}

.chip.is-selected {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* 자립화(§8-3 이행) — 공용 .chip-row/.chip 시각을 동일 토큰으로 복제. 이관 아님 → 회귀 0 */
.ui-chip-row {
  display: flex;
  max-width: 100%;
  min-width: 0;
  gap: var(--space-2);
  padding-right: var(--page-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.ui-chip-row::-webkit-scrollbar {
  display: none;
}

.ui-chip-row__chip {
  display: inline-flex;
  min-height: var(--tap-main);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--sp-14);
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  background: var(--bg3);
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 740;
  scroll-snap-align: start;
}

.ui-chip-row__chip.is-selected {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent2);
}

.ui-chip-row__divider {
  background: var(--border2);
}

/* ─── 선택 컨트롤 역할 부품 (§9-7 같은 역할 같은 수치 · D-01 taxonomy) ───────────
   R1 이진 스위치      = .setting-toggle-row (기존)
   R2 세그먼트         = .ui-segment / .ui-segment__opt — 트랙 한 겹 안에서 상호배타·선택은 솔리드
   R3 옵션 버튼        = .ui-option — 개별 테두리를 가진 상호배타 선택지(2~6개·부가설명 가능)
   R4 인터랙티브 칩    = .chip / .ui-chip-row__chip (기존) — 한 줄 레일의 필터·기간 선택
   R5 읽기 전용 태그   = .w4-pol-chip / .ex-tag — 상호작용 없음 → 위 넷과 통합 금지
   페이지네이션(.ui-pagebtn)·정보 타일(.st-track__tile)은 선택 컨트롤이 아니다(별 역할). */
.ui-segment {
  display: inline-flex;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg3);
}

.ui-segment__opt {
  min-height: var(--sp-36);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text2);
  font-size: var(--fs-12);
  font-weight: 700;
}

.ui-segment__opt.is-on {
  background: var(--accent);
  color: var(--btn-fg);
}

/* 변형 — 큰 모드 탭(4~5개 균등 분할·본문 폭 전체). 트랙은 한 겹 그대로 */
.ui-segment--block {
  display: grid;
  padding: var(--space-1);
  border-radius: var(--radius-14);
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-segment--block .ui-segment__opt {
  min-height: var(--tap-main);
  border-radius: var(--radius-11);
  font-size: var(--fs-14);
}

.ui-option {
  display: flex;
  min-height: var(--tap-main);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg3);
  color: var(--text2);
  font-size: var(--fs-13);
  font-weight: 700;
  text-align: center;
}

/* 변형 — 라벨 아래에 보조 설명이 붙는 옵션(세로 쌓기) */
.ui-option--stack {
  flex-direction: column;
  gap: var(--space-1);
}

.ui-option.is-on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.ui-option small {
  color: var(--text3);
  font-size: var(--fs-10);
  font-weight: 500;
}

/* 변형 — 알약 모양(가로로 짧은 2지선다) */
.ui-option--pill {
  border-radius: var(--radius-pill);
}

/* 변형 — 솔리드 선택(즉시 전환되는 조작부. 소프트 선택보다 현재 상태를 강하게 알린다) */
.ui-option--solid.is-on {
  border-color: transparent;
  background: var(--accent);
  color: var(--btn-fg);
}

/* R5 읽기 전용 상태 태그 — 선택 '결과'를 보여줄 뿐 누르지 않는다.
   인터랙티브 칩(.chip)과 같은 pill이라도 역할이 달라 통합하지 않는다(D-02).
   (마이크로 카테고리 라벨 .ex-tag는 또 다른 역할 — 인라인 라벨이라 여기 포함하지 않는다) */
.ui-tag {
  display: inline-flex;
  max-width: 100%;
  min-height: var(--tap-icon);
  align-items: center;
  padding: var(--sp-5) var(--space-3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  background: var(--bg3);
  color: var(--text2);
  font-size: var(--fs-13);
  font-weight: 740;
  line-height: 1.35;
}

.ui-tag--accent {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* 주의 톤 — 색은 부품이 소유하되, 자체 앰버 팔레트를 가진 화면은 --ui-tag-warn 한 줄만 덮어쓴다 */
.ui-tag--warn {
  --ui-tag-warn: #ef9f27;

  border-color: var(--ui-tag-warn);
  background: color-mix(in srgb, var(--ui-tag-warn) 12%, transparent);
  color: var(--ui-tag-warn);
}

/* ─── 안내 행 — 카드 안에서 박스를 다시 만들지 않는다(§9-2). .ui-action-row의 아이콘+본문 변형 ─── */
.ui-note-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--text2);
  font-size: var(--fs-13);
  line-height: 1.55;
}

.ui-note-row > svg {
  flex: 0 0 auto;
  margin-top: var(--sp-2);
  color: var(--text3);
}

/* ─── 폭 적응 필드 행 (§9-4 폭 적응 · §9-6 부품이 규칙 소유) ───────────────────
   호출부가 인라인 style="flex:…"로 폭을 들고 있으면 화면마다 값이 달라진다.
   기본은 균등 신축, 넓게/좁게가 필요한 필드만 변형 클래스로 지정한다. */
.ui-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.ui-field-row > * {
  min-width: 0;
  flex: 1 1 var(--sp-132);
}

.ui-field-row > .btn {
  flex: 0 0 auto;
}

.ui-field-row__field--wide {
  flex-grow: 2;
}

.ui-field-row__field--compact {
  flex-basis: var(--sp-96);
}

:root[data-theme="light"] .ui-chip-row__chip.is-selected {
  border-color: color-mix(in srgb, var(--accent2) 36%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg2));
  color: var(--accent2);
}

:root[data-theme="light"] .badge,
:root[data-theme="light"] .chip.is-selected,
:root[data-theme="light"] .hero-metric__foot strong,
:root[data-theme="light"] .analysis-facts span,
:root[data-theme="light"] .set-row__number,
:root[data-theme="light"] .review-guide strong,
:root[data-theme="light"] .review-state-link__capture strong {
  color: var(--accent2);
}

.stepper {
  display: grid;
  width: min(100%, var(--sp-320));
  min-height: var(--tap-main);
  grid-template-columns: var(--tap-main) minmax(var(--sp-96), 1fr) var(--tap-main);
  align-items: stretch;
}

.stepper__button {
  display: grid;
  width: var(--tap-main);
  height: var(--tap-main);
  place-items: center;
  border: 1px solid var(--border2);
  border-radius: var(--radius-6);
  background: var(--bg3);
  color: var(--text);
  font-size: var(--fs-24);
  line-height: 1;
}

.stepper__value {
  display: grid;
  min-width: 0;
  place-items: center;
  color: var(--text);
  font-size: var(--fs-20);
  font-variant-numeric: tabular-nums;
  font-weight: 820;
}

.stepper__unit {
  margin-left: var(--space-1);
  color: var(--text3);
  font-size: var(--fs-13);
  font-weight: 680;
}

.fixed-cta {
  position: fixed;
  z-index: 34;
  right: max(var(--page-gutter), calc((100vw - var(--form-max)) / 2));
  bottom: calc(var(--safe-bottom) + var(--tabbar-h) + var(--space-3));
  left: max(var(--page-gutter), calc((100vw - var(--form-max)) / 2));
}

.fixed-cta .btn {
  min-height: var(--sp-56);
  box-shadow: var(--shadow);
}

.sheet-layer {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  align-items: end;
  background: var(--overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.sheet-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sheet {
  width: min(100%, var(--sheet-max));
  max-height: min(86dvh, var(--sp-760));
  margin: 0 auto;
  padding: var(--space-2) var(--page-gutter) calc(var(--space-4) + var(--safe-bottom));
  overflow-y: auto;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-14) var(--radius-14) 0 0;
  background: var(--bg2);
  box-shadow: var(--shadow);
  transform: translateY(var(--space-6));
  transition: transform 220ms ease;
}

.sheet-layer.is-open .sheet {
  transform: translateY(0);
}

.sheet__handle {
  width: var(--sp-40);
  height: var(--space-1);
  margin: var(--sp-2) auto var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--border2);
}

.sheet__head {
  display: grid;
  min-height: var(--tap-main);
  grid-template-columns: var(--tap-icon) 1fr var(--tap-icon);
  align-items: center;
}

.sheet__title {
  margin: 0;
  font-size: var(--fs-19);
  font-weight: 840;
  text-align: center;
}

.sheet__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-4);
}

.sheet__actions {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
}

.sheet-option-list {
  display: grid;
}

.sheet-option {
  display: grid;
  width: 100%;
  min-height: var(--tap-main);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border);
  background: transparent;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
  text-align: left;
}

.sheet-option:last-child {
  border-bottom: 0;
}

.sheet-option__label {
  font-size: var(--fs-body);
  font-weight: 720;
}

.sheet-option__description {
  display: block;
  margin-top: var(--sp-2);
  color: var(--text3);
  font-size: var(--fs-13);
  font-weight: 560;
}

.sheet-option__meta {
  color: var(--text3);
  font-size: var(--fs-13);
}

.sheet-option.is-selected {
  color: var(--accent);
}

.search-input {
  width: 100%;
  min-height: var(--tap-main);
  padding: var(--space-2h) var(--space-3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-6);
  outline: none;
  background: var(--bg3);
  color: var(--text);
  font-size: var(--fs-body);
}

.search-input:focus {
  border-color: var(--accent);
}

.form-textarea {
  width: 100%;
  min-height: calc(var(--sp-96) * 2);
  padding: var(--space-4);
  resize: vertical;
  border: 1px solid var(--border2);
  border-radius: var(--radius-11);
  outline: 0;
  background: var(--bg2);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.form-textarea:focus {
  border-color: var(--accent);
}

.calendar {
  display: grid;
  gap: var(--space-3);
}

.calendar__quick {
  display: flex;
  gap: var(--space-2);
}

.calendar__month {
  display: grid;
  min-height: var(--tap-main);
  grid-template-columns: var(--tap-icon) 1fr var(--tap-icon);
  align-items: center;
}

.calendar__month-label {
  text-align: center;
  font-size: var(--fs-body);
  font-weight: 800;
}

.calendar__week,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar__weekday {
  display: grid;
  min-height: var(--space-7);
  place-items: center;
  color: var(--text3);
  font-size: var(--fs-12);
  font-weight: 760;
}

.calendar__day {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: var(--tap-main);
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: var(--text2);
  font-size: var(--fs-15b);
  font-variant-numeric: tabular-nums;
  isolation: isolate;
}

.calendar__day::before {
  position: absolute;
  z-index: -1;
  inset: var(--space-1h) 0;
  background: transparent;
  content: "";
}

.calendar__day.is-in-range::before {
  background: var(--accent-soft);
}

.calendar__day.is-start::before {
  left: 50%;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background: var(--accent-soft);
}

.calendar__day.is-end::before {
  right: 50%;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--accent-soft);
}

.calendar__day.is-start.is-end::before {
  right: 0;
  left: 0;
  border-radius: var(--radius-pill);
}

.calendar__day span {
  display: grid;
  width: var(--sp-36);
  height: var(--sp-36);
  place-items: center;
  border-radius: var(--radius-pill);
}

.calendar__day.is-start span,
.calendar__day.is-end span {
  background: var(--accent);
  color: var(--btn-fg);
  font-weight: 820;
}

.calendar__day.is-today span {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.calendar__day.is-outside {
  color: var(--text3);
  opacity: 0.42;
}

.calendar__selection {
  min-height: var(--tap-main);
  margin: 0;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-6);
  background: var(--bg3);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 760;
  text-align: center;
}

.direct-date {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-11);
  background: var(--bg3);
}

/* 필드(라벨+컨트롤) 간격 = --space-2 단일. w4-input-field·w4-textarea-field·running-memo-field와 같은 역할·같은 수치(§9-7) */
.direct-date__field {
  display: grid;
  gap: var(--space-2);
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 720;
}

.menu-layer {
  position: fixed;
  z-index: 70;
  top: calc(var(--safe-top) + var(--appbar-h) - var(--space-1));
  right: calc(var(--safe-right) + var(--space-3));
  display: none;
  width: min(var(--sp-240), calc(100vw - var(--space-7)));
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg2);
  box-shadow: var(--shadow);
}

.menu-layer.is-open {
  display: grid;
}

.menu-item {
  display: flex;
  min-height: var(--tap-main);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-body);
  text-align: left;
}

.menu-item:active {
  background: var(--bg4);
}

.menu-item--danger {
  color: var(--danger);
}

.toast {
  position: fixed;
  z-index: 110;
  right: var(--space-4);
  bottom: calc(var(--safe-bottom) + var(--tabbar-h) + var(--space-4));
  left: var(--space-4);
  max-width: var(--sp-420);
  min-height: var(--tap-main);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border2);
  border-radius: var(--radius-11);
  background: var(--bg4);
  color: var(--text);
  font-size: var(--fs-15b);
  font-weight: 680;
  box-shadow: var(--shadow);
  animation: toast-in 180ms ease both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

.auth-panel {
  display: grid;
  width: min(100%, var(--sp-420));
  gap: var(--space-6);
  padding: var(--space-6) 0;
  text-align: center;
}

.auth-brand {
  justify-self: center;
  transform: scale(1.22);
  transform-origin: center;
}

.auth-panel .page-copy {
  margin-right: auto;
  margin-left: auto;
}

.immersive-stub {
  position: relative;
  display: grid;
  min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--space-7));
  align-content: space-between;
  overflow: hidden;
  border-radius: var(--radius-14);
  background:
    radial-gradient(circle at 74% 18%, var(--accent-soft), transparent 34%),
    linear-gradient(145deg, var(--bg3), var(--bg));
}

.immersive-stub__top,
.immersive-stub__bottom {
  display: flex;
  padding: var(--space-4);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.immersive-stub__center {
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

.immersive-stub__metric {
  margin: var(--space-2) 0;
  color: var(--text);
  font-size: var(--fs-64);
  font-variant-numeric: tabular-nums;
  font-weight: 860;
  line-height: 1;
}

.immersive-stub__label {
  color: var(--text2);
  font-size: var(--fs-body);
}

.app-shell--detail {
  padding-bottom: var(--safe-bottom);
}

.w2-page {
  padding-bottom: var(--space-7);
}

.screen-tabs {
  position: sticky;
  z-index: 24;
  top: calc(var(--safe-top) + var(--appbar-h) + var(--space-2));
  width: min(100%, var(--sp-320));
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  border-color: var(--border2);
  background: var(--bg2);
  box-shadow: var(--shadow-sticky);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.screen-tabs::-webkit-scrollbar {
  display: none;
}

.screen-tabs .segment__item {
  display: grid;
  min-width: max-content;
  place-items: center;
  text-decoration: none;
}

.screen-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.period-trigger {
  display: inline-flex;
  min-height: var(--tap-main);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--sp-14);
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  background: var(--bg3);
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 760;
}

.hero-metric {
  display: grid;
  gap: var(--space-5);
  border-color: var(--accent-line);
  background:
    radial-gradient(circle at 92% 0%, var(--accent-soft), transparent 42%),
    var(--bg2);
}

.hero-metric__top,
.hero-metric__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hero-metric__status,
.hero-metric__foot {
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 690;
}

.hero-metric__value {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--fs-48);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.hero-metric__value span {
  margin-left: var(--space-1);
  color: var(--text2);
  font-size: var(--fs-17);
  font-weight: 720;
  letter-spacing: -0.02em;
}

.hero-metric__component {
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}

.hero-metric__component .ui-metric__label {
  color: var(--text2);
  font-size: var(--fs-13);
  font-weight: 720;
}

.hero-metric__component .ui-metric__value {
  letter-spacing: -0.05em;
}

.hero-metric__component .ui-metric__value small {
  font-size: var(--fs-17);
  letter-spacing: -0.02em;
}

.hero-metric h3,
.next-action h3 {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 840;
  line-height: 1.28;
}

.hero-metric p,
.next-action p {
  margin: var(--space-2) 0 0;
  color: var(--text2);
  font-size: var(--fs-body);
}

.simple-detail-message {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-11);
  background: var(--bg3);
}

.simple-detail-message .badge {
  width: max-content;
}

.simple-detail-message h3,
.simple-detail-message p {
  margin: 0;
}

.simple-detail-message p {
  color: var(--text2);
  font-size: var(--fs-body);
}

.simple-detail-card {
  display: grid;
  gap: var(--space-4);
}

.simple-detail-card > p {
  margin: 0;
}

.simple-detail-value {
  font-size: var(--fs-48);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
}

.simple-detail-facts {
  display: grid;
  margin: 0;
}

.simple-detail-facts > div {
  display: flex;
  min-height: var(--tap-main);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.simple-detail-facts dt,
.simple-detail-facts dd {
  margin: 0;
  font-size: var(--fs-14);
}

.simple-detail-facts dt {
  color: var(--text3);
}

.simple-detail-facts dd {
  color: var(--text);
  font-weight: 760;
  text-align: right;
}

.progress-line {
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bg4);
}

.progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.hero-metric__foot strong {
  color: var(--accent);
}

.kpi-scroll {
  display: flex;
  width: calc(100% + var(--page-gutter));
  gap: var(--space-2);
  padding: var(--space-3) var(--page-gutter) var(--space-1) 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.kpi-scroll::-webkit-scrollbar {
  display: none;
}

/* .mini-kpi 정의 3종 삭제(2026-07-27) — 자체 박스를 소유했으나 JS·HTML 사용처 0. C-06 dead CSS 정리 */
.stat-card em,
.result-grid em,
.pace-result em {
  margin-left: var(--space-1);
  color: var(--text3);
  font-size: var(--fs-13);
  font-style: normal;
  font-weight: 650;
}

.next-action {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.next-action .badge {
  margin-bottom: var(--space-2);
}

.next-action .ui-badge {
  margin-bottom: var(--space-2);
}

.analysis-card {
  display: grid;
  gap: var(--space-3);
}

.analysis-card .ui-section__body {
  display: grid;
  gap: var(--space-3);
}

.analysis-card__summary,
.analysis-card__detail p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text2);
  font-size: var(--fs-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.analysis-card.is-expanded .analysis-card__summary,
.analysis-card__detail p {
  display: block;
}

.analysis-card__detail {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.analysis-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.analysis-facts span {
  padding: var(--space-2) var(--sp-11);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-14);
  font-weight: 760;
}

.body-segment {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-card {
  display: grid;
  min-height: var(--sp-116);
  align-content: space-between;
  gap: var(--space-2);
}

.stat-card--hero {
  grid-column: 1 / -1;
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.stat-card span,
.stat-card small {
  color: var(--text3);
  font-size: var(--fs-14);
  font-weight: 680;
}

.stat-card strong {
  font-size: var(--fs-28);
  font-variant-numeric: tabular-nums;
  font-weight: 860;
  line-height: 1;
}

.stat-card strong.is-good {
  color: var(--accent);
}

.stat-card.is-good .ui-metric__value {
  color: var(--accent2);
}

.chart-card {
  display: grid;
  overflow: hidden;
}

.chart {
  min-height: var(--chart-h);
  color: var(--accent);
}

.chart__svg {
  display: block;
  width: 100%;
  height: var(--chart-h);
  overflow: visible;
}

.chart__grid {
  stroke: var(--border);
  stroke-width: 1;
}

.chart__area {
  fill: var(--accent-soft);
}

.chart__line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.chart__point {
  fill: var(--bg2);
  stroke: currentColor;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.chart__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -22px;
  padding: 0 var(--space-2);
  color: var(--text3);
  font-size: var(--fs-13);
}

.chart__legend strong {
  color: var(--accent);
}

.bar-chart {
  display: grid;
  height: var(--chart-h);
  gap: var(--space-2);
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--space-6), 1fr);
  align-items: end;
}

.bar-chart__item {
  display: grid;
  height: 100%;
  grid-template-rows: var(--space-6) 1fr var(--space-5);
  align-items: end;
  text-align: center;
}

/* 수치·월 라벨은 한 덩어리다 — 줄바꿈을 허용하면 폭이 모자랄 때 '열을 접는' 대신
   글자가 두 줄로 흘러 행 높이가 깨지고, 부품의 폭 적응(ui.fitBarCharts)이 부족을 감지하지 못한다
   (2026-07-29 실측: 10자리 값에서도 접힘 미발동). 잘라내는 게 아니라 넘침을 드러내는 설정이다. */
.bar-chart__value,
.bar-chart__label {
  color: var(--text3);
  font-size: var(--fs-11);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bar-chart__rail {
  display: flex;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-6);
  background: var(--bg3);
}

.bar-chart__rail span {
  display: block;
  width: 66%;
  min-height: var(--space-2);
  border-radius: var(--radius-6) var(--radius-6) 0 0;
  background: var(--accent);
}

.empty-goal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-style: dashed;
}

.target-progress-empty > div {
  display: grid;
  gap: var(--space-2);
}

.target-progress-empty .btn {
  flex: 0 0 auto;
}

.empty-goal > .ui-section {
  width: 100%;
}

.stat-grid--history {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sparse-fallback {
  display: grid;
  gap: var(--space-4);
  min-height: var(--sp-220);
  align-content: start;
}

.record-list {
  display: grid;
}

.record-row {
  display: grid;
  min-height: var(--sp-84);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.record-row:last-child {
  border-bottom: 0;
}

.record-row__body,
.record-row__metric {
  display: grid;
  min-width: 0;
  gap: var(--sp-2);
}

.record-row__date,
.record-row__body span,
.record-row__metric span {
  color: var(--text3);
  font-size: var(--fs-13);
}

.record-row__body strong,
.record-row__metric strong {
  overflow: hidden;
  font-size: var(--fs-body);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-row__metric {
  text-align: right;
}

.record-row--compact {
  min-height: var(--sp-64);
}

.record-row--compact .record-row__body > span:not(.record-row__date),
.record-row--compact .record-row__metric span {
  display: none;
}

.search-filter {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}

.search-field input {
  width: 100%;
  min-height: var(--tap-main);
  padding: var(--space-2h) var(--sp-14);
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  outline: none;
  background: var(--bg3);
  color: var(--text);
  font-size: var(--fs-body);
}

.search-field input:focus {
  border-color: var(--accent);
}

.record-list-card {
  display: grid;
  gap: var(--space-3);
}

.list-end {
  margin: var(--space-3) 0 0;
  color: var(--text3);
  font-size: var(--fs-14);
  text-align: center;
}

.empty-inline {
  display: grid;
  min-height: var(--sp-200);
  place-content: center;
  padding: var(--space-5);
  text-align: center;
}

.empty-inline h3,
.empty-inline p {
  margin: 0;
}

.empty-inline p {
  margin-top: var(--space-2);
  color: var(--text3);
  font-size: var(--fs-body);
}

.chip-row--contained {
  width: 100%;
  padding-right: 0;
}

.chip-row__divider {
  width: 1px;
  height: var(--space-6);
  flex: 0 0 1px;
  align-self: center;
  background: var(--border2);
}

.filter-section {
  display: grid;
  gap: var(--space-3);
}

.filter-section h3 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 800;
}

.detail-page {
  max-width: var(--sp-560);
  min-height: calc(100dvh - var(--safe-top) - var(--appbar-h) - var(--safe-bottom));
  padding-bottom: var(--space-6);
  overflow: hidden;
}

.detail-head {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.detail-head p,
.detail-head h2 {
  margin: 0;
}

.detail-head p {
  color: var(--text3);
  font-size: var(--fs-14);
}

.detail-head h2 {
  font-size: var(--fs-24);
  font-weight: 860;
}

.detail-head .badge {
  width: max-content;
}

.detail-head .ui-badge {
  width: max-content;
}

.page-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.page-dot {
  width: var(--tap-icon);
  height: var(--tap-icon);
  padding: var(--sp-18) var(--sp-14);
  border: 0;
  border-radius: var(--radius-6);
  background: transparent;
}

.page-dot::before {
  display: block;
  width: var(--space-4);
  height: var(--space-1h);
  border-radius: var(--radius-pill);
  background: var(--border2);
  content: "";
}

.page-dot.is-active::before {
  background: var(--accent);
}

.detail-swipe-hint {
  margin: -8px 0 0;
  color: var(--text3);
  font-size: var(--fs-13);
  text-align: center;
}

.date-summary {
  display: grid;
  min-height: var(--sp-260);
  align-content: center;
  text-align: center;
}

.date-summary strong {
  font-size: var(--fs-24);
  font-weight: 840;
}

.date-summary p {
  margin: 0;
  color: var(--text2);
  font-size: var(--fs-body);
}

.log-page {
  max-width: var(--form-max);
  padding-bottom: var(--sp-144);
}

.ai-entry {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-11);
  background: var(--bg2);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.ai-entry label {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.ai-entry__label {
  color: var(--accent);
  font-size: var(--fs-13);
  font-weight: 800;
}

.ai-entry textarea {
  width: 100%;
  min-height: var(--tap-main);
  max-height: var(--sp-160);
  padding: var(--space-2) 0;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.ai-entry__action {
  display: none;
}

.ai-entry.is-focused {
  border-color: var(--accent);
}

.ai-entry.is-focused textarea {
  min-height: var(--sp-96);
}

.ai-entry.is-focused .ai-entry__action {
  display: inline-flex;
}

body.has-keyboard.has-ai-focus .ai-entry.is-focused {
  position: fixed;
  z-index: 75;
  right: max(var(--page-gutter), calc((100vw - var(--form-max)) / 2 + var(--page-gutter)));
  bottom: calc(var(--keyboard-offset, 0px) + var(--space-3));
  left: max(var(--page-gutter), calc((100vw - var(--form-max)) / 2 + var(--page-gutter)));
  max-height: min(44dvh, var(--sp-240));
  box-shadow: var(--shadow);
}

body.has-ai-focus .fixed-cta--form {
  visibility: hidden;
  pointer-events: none;
}

.log-meta {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.question-stack,
.dual-metrics,
.details-content {
  display: grid;
  gap: var(--space-3);
}

.metric-input {
  display: grid;
  gap: var(--space-3);
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg2);
}

.metric-input__question {
  color: var(--text2);
  font-size: var(--fs-body);
  font-weight: 720;
}

.metric-input__control {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.metric-input__control input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-40);
  font-variant-numeric: tabular-nums;
  font-weight: 880;
  letter-spacing: -0.04em;
}

.metric-input__control > span {
  color: var(--text2);
  font-size: var(--fs-body);
  font-weight: 760;
}

.metric-input small {
  color: var(--text3);
  font-size: var(--fs-13);
}

.result-card {
  display: grid;
}

.result-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.result-grid > div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-6);
  background: var(--bg3);
}

.result-grid span {
  color: var(--text3);
  font-size: var(--fs-12);
}

.result-grid strong {
  font-size: var(--fs-20);
  font-variant-numeric: tabular-nums;
}

.pace-result {
  display: grid;
  gap: var(--space-2);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.pace-result > span {
  color: var(--text2);
  font-size: var(--fs-body);
  font-weight: 720;
}

.pace-result > strong {
  color: var(--accent);
  font-size: var(--fs-40);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
}

.pace-result p {
  margin: 0;
  color: var(--text2);
  font-size: var(--fs-body);
}

.details-block {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.details-toggle {
  display: flex;
  width: 100%;
  min-height: var(--sp-60);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.details-toggle > span:first-child {
  display: grid;
}

.details-toggle strong {
  font-size: var(--fs-body);
}

.details-toggle small {
  color: var(--text3);
  font-size: var(--fs-13);
}

.details-toggle__icon,
.field-trigger__action {
  display: inline-flex;
  align-items: center;
}

.details-toggle__icon {
  transition: transform 160ms ease;
}

.details-toggle__icon.is-open {
  transform: rotate(180deg);
}

.field-trigger__action {
  gap: var(--space-1);
  color: var(--text2);
  font-size: var(--fs-14);
}

.field-trigger__action .app-icon,
.details-toggle__icon .app-icon,
.period-trigger .app-icon {
  width: var(--sp-18);
  height: var(--sp-18);
}

.stepper__button .app-icon {
  width: var(--sp-22);
  height: var(--sp-22);
}

.details-content {
  padding: var(--space-3) 0 var(--space-4);
}

.fixed-cta--form {
  transition: bottom 160ms ease;
}

.has-keyboard .fixed-cta--form {
  bottom: calc(var(--keyboard-offset, 0px) + var(--space-3));
}

.field-trigger--plain {
  padding: 0;
  border: 0;
  background: transparent;
}

.exercise-name {
  color: var(--text);
  font-size: var(--fs-24);
  font-weight: 850;
}

.set-row__number {
  display: grid;
  width: var(--sp-28);
  height: var(--sp-28);
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-13);
  font-weight: 800;
}


.review-body {
  min-height: 100dvh;
  padding-bottom: var(--safe-bottom);
}

.review-header {
  position: sticky;
  z-index: 30;
  top: 0;
  padding:
    calc(var(--safe-top) + var(--space-3))
    calc(var(--safe-right) + var(--page-gutter))
    var(--space-3)
    calc(var(--safe-left) + var(--page-gutter));
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(var(--sp-18));
}

.review-header__inner {
  display: flex;
  width: 100%;
  max-width: var(--sp-1040);
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.review-header h1 {
  margin: 0;
  font-size: var(--fs-19);
  font-weight: 850;
}

.review-main {
  display: grid;
  width: 100%;
  max-width: var(--sp-1040);
  gap: var(--space-4);
  margin: 0 auto;
  padding: var(--space-5) var(--page-gutter) var(--space-7);
}

.review-summary {
  display: grid;
  gap: var(--space-3);
}

.review-guide {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-11);
  background: var(--accent-soft);
  color: var(--text2);
  font-size: var(--fs-14);
}

.review-guide strong {
  color: var(--accent);
}

.review-summary__stats {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-stat {
  padding: var(--space-3);
  border-radius: var(--radius-11);
  background: var(--bg3);
}

.review-stat strong {
  display: block;
  font-size: var(--fs-24);
  line-height: 1.1;
}

.review-stat span {
  color: var(--text3);
  font-size: var(--fs-12);
}

.review-nav {
  display: flex;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.review-nav::-webkit-scrollbar {
  display: none;
}

.review-zone {
  scroll-margin-top: var(--sp-92);
}

.review-zone__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.review-zone__head h2 {
  margin: 0;
  font-size: var(--fs-19);
}

.review-zone__head p {
  margin: var(--space-1) 0 0;
  color: var(--text3);
  font-size: var(--fs-15b);
}

.review-items {
  display: grid;
}

.review-item {
  display: grid;
  min-height: var(--tap-main);
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.review-item:last-child {
  border-bottom: 0;
}

.review-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.review-item__title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 720;
}

.review-item__states {
  display: grid;
  gap: var(--space-2);
}

.review-state-link {
  display: grid;
  min-height: var(--tap-main);
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg3);
}

.review-state-link:active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.review-state-link--manual {
  border-style: dashed;
  background: var(--bg4);
}

.review-state-link--manual .review-item__link {
  color: var(--text2);
  font-family: inherit;
}

.review-state-link__label {
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 800;
}

.review-item__link {
  display: block;
  color: var(--text3);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--fs-12);
  overflow-wrap: anywhere;
}

.review-state-link__capture {
  color: var(--text2);
  font-size: var(--fs-13);
}

.review-state-link__capture strong {
  color: var(--accent);
}

@media (min-width: 640px) {
  .parts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .part-card--wide {
    grid-column: 1 / -1;
  }

  .page {
    padding-top: var(--space-6);
  }

  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat-card--hero {
    grid-column: auto;
  }

  .dual-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  :root {
    --page-gutter: var(--space-6);
    --card-pad: var(--space-5);
  }

  .appbar {
    padding-right: calc(var(--safe-right) + var(--space-4));
    padding-left: calc(var(--safe-left) + var(--space-4));
  }

  .review-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-summary,
  .review-nav,
  .review-guide {
    grid-column: 1 / -1;
  }

  .review-summary__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .next-action {
    padding: var(--space-5);
  }

}

@media (max-width: 439px) {
  .screen-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .period-trigger {
    align-self: flex-start;
  }

  .next-action,
  .log-meta {
    grid-template-columns: 1fr;
  }

  .next-action .btn {
    width: 100%;
  }

  .body-segment .segment__item {
    padding-right: var(--space-1);
    padding-left: var(--space-1);
    font-size: var(--fs-13);
  }

  .result-grid {
    gap: var(--space-1);
  }

  .result-grid > div {
    padding: var(--space-2);
  }
}

/* W3 · Z5—Z8 */
.w3-page,
.w3-page * {
  min-width: 0;
}

.w3-page {
  overflow-x: hidden;
}

.plan-switch {
  display: grid;
  align-items: center;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) var(--tap-icon);
}

.plan-switch__segment {
  width: 100%;
}

.plan-switch__menu {
  border: 1px solid var(--border2);
  background: var(--bg3);
}

.plan-week {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-14);
  background: var(--bg2);
  outline: 0;
  touch-action: pan-y;
}

.plan-week__nav {
  display: grid;
  align-items: center;
  gap: var(--space-2);
  grid-template-columns: var(--tap-icon) minmax(0, 1fr) var(--tap-icon);
}

.plan-week__title {
  display: grid;
  min-height: var(--tap-main);
  place-content: center;
  background: transparent;
  color: var(--text);
  text-align: center;
}

.plan-week__title strong {
  font-size: var(--fs-17);
}

.plan-week__title span {
  color: var(--text3);
  font-size: var(--fs-12);
}

.plan-week-stack {
  display: grid;
  gap: var(--space-3);
}

/* .week-card 정의 3종 삭제(2026-07-27) — 자체 박스를 소유했으나 JS·HTML 사용처 0. C-06 dead CSS 정리 */
.week-days {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.week-day {
  display: grid;
  min-height: var(--sp-96);
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid transparent;
  border-radius: var(--radius-6);
  background: var(--bg2);
  color: var(--text2);
  overflow: hidden;
}

.week-day span {
  color: var(--text3);
  font-size: var(--fs-09);
  font-weight: 720;
}

.week-day strong {
  overflow: hidden;
  font-size: var(--fs-09);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-day .rp-cell__state {
  overflow: hidden;
  color: var(--text2);
  font-size: var(--fs-09);
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-day.rp-cell--actual {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.week-day.rp-cell--missed {
  background: var(--bg3);
  color: var(--text3);
}

.week-day.rp-cell--future {
  border-color: var(--accent-line);
  color: var(--text);
}

.week-day.rp-cell--empty {
  color: var(--text3);
}

.week-day.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 var(--sp-1) var(--accent);
}

.week-day.is-selected span {
  color: currentColor;
}

.plan-timeline {
  display: grid;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.plan-timeline li {
  display: grid;
  min-height: var(--sp-60);
  align-items: stretch;
  grid-template-columns: var(--sp-56) var(--space-5) minmax(0, 1fr);
}

.plan-timeline time {
  padding-top: var(--space-3);
  color: var(--text3);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}

.plan-timeline__dot {
  position: relative;
}

.plan-timeline__dot::before {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  content: "";
  transform: translateX(-50%);
}

.plan-timeline__dot::after {
  position: absolute;
  top: var(--space-6);
  bottom: 0;
  left: 50%;
  width: var(--sp-1);
  background: var(--border2);
  content: "";
}

.plan-timeline li:last-child .plan-timeline__dot::after {
  display: none;
}

.plan-timeline button {
  display: grid;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.plan-timeline button strong {
  font-size: var(--fs-body);
}

.plan-timeline button span {
  color: var(--text2);
  font-size: var(--fs-13);
}

.ai-support {
  display: grid;
  gap: var(--space-3);
}

.ai-support__summary,
.ai-support__detail {
  margin: 0;
  color: var(--text2);
}

.ai-support:not(.is-expanded) .ai-support__summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.coach-ai-entry {
  display: grid;
  align-items: center;
  gap: var(--space-4);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  grid-template-columns: minmax(0, 1fr) auto;
}

.coach-ai-entry > div,
.coach-note-list {
  display: grid;
  gap: var(--space-3);
}

.coach-ai-entry h3,
.coach-ai-entry p,
.coach-note h3,
.coach-note p {
  margin: 0;
}

.coach-note {
  display: grid;
  gap: var(--space-2);
}

.coach-note header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.coach-note time,
.coach-note p {
  color: var(--text2);
  font-size: var(--fs-14);
}

.coach-note--empty {
  border-style: dashed;
}

.coach-editor-page,
.settings-detail-page {
  padding-bottom: calc(var(--sp-96) + var(--safe-bottom));
}

.coach-editor-page > .page__stack,
.settings-detail-page > .page__stack {
  width: min(100%, var(--form-max));
  margin-right: auto;
  margin-left: auto;
}

.app-shell--detail .fixed-cta {
  bottom: calc(var(--safe-bottom) + var(--space-3));
}

.coach-editor-form {
  display: grid;
  gap: var(--space-3);
}

.coach-editor-body {
  display: grid;
  gap: var(--space-2);
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 720;
}

.settings-group {
  display: grid;
  gap: var(--space-2);
}

.settings-group > h3 {
  margin: 0;
  color: var(--text3);
  font-size: var(--fs-13);
  letter-spacing: 0.04em;
}

.settings-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg2);
}

/* §9-9 행 높이는 컨텐츠에 맞춘다 — 56px 터치 하한은 '실제 누르는 행'(링크·토글·액션·입력)만 갖는다 */
.settings-row,
.setting-toggle-row,
.settings-action,
.setting-number,
.setting-stepper {
  display: flex;
  width: 100%;
  min-height: var(--sp-56);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
}

/* 정적 정보 행 — 누르는 요소가 아니므로 터치 하한을 적용하지 않고 컨텐츠 높이만 갖는다(§9-9) */
.setting-static {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2h) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.setting-toggle-row--compact {
  min-height: var(--tap-main);
}

.settings-list > :last-child {
  border-bottom: 0;
}

.settings-row > span,
.setting-toggle-row > span:first-child,
.settings-action > span:first-child,
.setting-static > span:first-child,
.setting-number > span:first-child,
.setting-stepper > span:first-child {
  display: grid;
  gap: var(--space-1);
}

.settings-row strong,
.setting-toggle-row strong,
.settings-action strong,
.setting-static strong,
.setting-number strong,
.setting-stepper strong {
  font-size: var(--fs-body);
}

.settings-row small,
.setting-toggle-row small,
.settings-action small,
.setting-static small,
.setting-number small,
.setting-stepper small {
  color: var(--text3);
  font-size: var(--fs-12);
}

.settings-row > .app-icon,
.settings-action > .app-icon {
  width: var(--space-5);
  height: var(--space-5);
  flex: 0 0 var(--space-5);
  color: var(--text3);
}

.toggle-control {
  position: relative;
  width: var(--sp-44);
  height: var(--space-6);
  flex: 0 0 var(--sp-44);
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  background: var(--bg4);
}

.toggle-control span {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--text2);
  transition: transform 160ms ease;
}

.toggle-control.is-on {
  border-color: var(--accent);
  background: var(--accent);
}

.toggle-control.is-on span {
  background: var(--btn-fg);
  transform: translateX(var(--space-5));
}

.settings-group--danger .settings-list {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
}

.settings-action--danger {
  color: var(--danger);
}

.setting-static > span:last-child,
.settings-action > span:last-child {
  color: var(--text2);
  font-size: var(--fs-14);
}

.setting-number > span:last-child {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.setting-number input {
  width: var(--sp-60);
  min-height: var(--tap-main);
  padding: var(--space-2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-6);
  outline: 0;
  background: var(--bg3);
  color: var(--text);
  font-size: var(--fs-17);
  font-weight: 760;
  text-align: right;
}

.setting-number em {
  color: var(--text3);
  font-size: var(--fs-13);
  font-style: normal;
}

.setting-stepper {
  align-items: flex-start;
  flex-direction: column;
}

.setting-stepper .stepper {
  width: 100%;
}

.sheet-summary {
  display: grid;
  gap: var(--space-3);
}

.sheet-summary h3,
.sheet-summary p {
  margin: 0;
}

.sheet-summary p {
  color: var(--text2);
}

@media (min-width: 768px) {
  .coach-note-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 439px) {
  .coach-ai-entry {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .coach-ai-entry .btn {
    width: 100%;
  }
}

/* W6a · approved real fixture density restoration */
.body-segment {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.multi-chart,
.body-snapshot,
.goal-progress-card,
.density-session-list,
.strength-detail-list,
.coach-note-detail {
  display: grid;
  gap: var(--space-3);
}

.multi-chart__svg {
  display: block;
  width: 100%;
  height: var(--chart-h);
}

.multi-chart__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.multi-chart__line--weight {
  stroke: var(--accent);
}

.multi-chart__line--muscle {
  stroke: var(--info);
}

.multi-chart__line--fat {
  stroke: var(--danger);
}

.multi-chart__legend {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.multi-chart__legend-item {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.multi-chart__legend-item i {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
}

.multi-chart__legend-item--weight i {
  background: var(--accent);
}

.multi-chart__legend-item--muscle i {
  background: var(--info);
}

.multi-chart__legend-item--fat i {
  background: var(--danger);
}

.multi-chart__legend-item b {
  font-size: var(--fs-13);
}

.multi-chart__legend-item em {
  grid-column: 1 / -1;
  color: var(--text3);
  font-size: var(--fs-11);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.multi-chart__note,
.goal-progress-card__foot {
  margin: 0;
  color: var(--text3);
  font-size: var(--fs-12);
}

.dense-metric-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dense-metric {
  display: grid;
  min-height: var(--tap-main);
  align-content: center;
  /* 간격·패딩은 위 공통 밀도 규칙이 소유한다(중복 선언 제거 · 2026-07-29) */
  border-radius: var(--radius-6);
  background: var(--bg3);
}

.dense-metric.card {
  border-radius: var(--radius-11);
  background: var(--bg2);
}

.dense-metric span {
  color: var(--text3);
  font-size: var(--fs-12);
}

.dense-metric strong {
  font-size: var(--fs-17);
  font-variant-numeric: tabular-nums;
}

.goal-progress-card__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.goal-progress-card__foot strong {
  color: var(--text);
}

.chart-card .bar-chart {
  overflow-x: auto;
}

.density-session {
  display: grid;
  min-height: var(--tap-main);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  grid-template-columns: minmax(0, 1fr) auto;
}

.density-session > span {
  display: grid;
  gap: var(--space-1);
}

.density-session > span:last-child {
  text-align: right;
}

.density-session small {
  color: var(--text3);
  font-size: var(--fs-12);
}

.density-session b {
  color: var(--text2);
  font-size: var(--fs-13);
}

.strength-exercise-detail {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.strength-set-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.strength-set-grid > div {
  display: grid;
  min-height: var(--tap-main);
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-6);
  background: var(--bg3);
}

.strength-set-grid span {
  color: var(--text3);
  font-size: var(--fs-11);
}

.strength-set-grid strong {
  font-size: var(--fs-14);
}

.coach-note > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.coach-note__open {
  display: flex;
  min-height: var(--tap-main);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 760;
  text-align: left;
}

.coach-note-detail header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.coach-note-detail h3,
.coach-note-detail p {
  margin: 0;
}

.coach-note-detail time,
.coach-note-detail p {
  color: var(--text2);
}

.coach-note-detail p {
  white-space: pre-wrap;
}

@media (min-width: 768px) {
  .dense-metric-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .dense-metric-grid--overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* W4 · Z9~Z11 */
.w4-page,
.w4-page *,
.w4-form-shell,
.w4-form-shell * {
  min-width: 0;
}

.w4-form-shell {
  width: min(100%, var(--form-max));
  margin-right: auto;
  margin-left: auto;
}

.w4-form-page,
.w4-onboarding-page {
  padding-bottom: calc(var(--sp-96) + var(--safe-bottom));
}

.w4-onboarding-page {
  align-items: flex-start;
}

.w4-onboarding-shell {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-4);
}

.w4-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text2);
  font-size: var(--fs-14);
}

.w4-progress-head strong {
  color: var(--accent);
}

.w4-question {
  display: grid;
  gap: var(--space-2);
  text-align: center;
}

.w4-question .eyebrow,
.w4-question .page-title,
.w4-question .page-copy {
  margin: 0;
}

.w4-question .page-copy {
  margin-right: auto;
  margin-left: auto;
}

.w4-choice-grid {
  display: grid;
  gap: var(--space-3);
}

/* .w4-choice-card 정의 7종 삭제(2026-07-27) — 자체 박스를 소유했으나 JS·HTML 사용처 0. C-06 dead CSS 정리 */
.w4-onboarding-summary {
  display: grid;
  gap: var(--space-3);
}

.w4-onboarding-summary > div {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.w4-onboarding-summary > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.w4-onboarding-summary span {
  color: var(--text3);
  font-size: var(--fs-13);
}

.w4-onboarding-summary strong {
  font-size: var(--fs-body);
}

.app-shell--auth .w4-fixed-cta,
.app-shell--detail .w4-fixed-cta {
  bottom: calc(var(--safe-bottom) + var(--space-3));
}

.w4-support-page {
  max-width: var(--form-max);
}

.w4-support-form {
  display: grid;
}

.w4-textarea-field,
.w4-input-field {
  display: grid;
  gap: var(--space-2);
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 720;
  text-align: left;
}

.w4-input-field input:focus {
  border-color: var(--accent);
}

.w4-textarea-field small {
  color: var(--text3);
  font-size: var(--fs-13);
  font-weight: 620;
}

.w4-receipt-list {
  display: grid;
}

.w4-receipt-row {
  display: grid;
  min-height: var(--sp-96);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  grid-template-columns: minmax(0, 1fr) auto;
}

.w4-receipt-row:last-child {
  border-bottom: 0;
}

.w4-receipt-row > div {
  display: grid;
  gap: var(--space-1);
}

.w4-receipt-row span,
.w4-receipt-row small {
  color: var(--text3);
  font-size: var(--fs-13);
}

.w4-receipt-row strong {
  font-size: var(--fs-body);
}

.w4-auth-page {
  align-items: flex-start;
}

/* .w4-auth-page .auth-panel 삭제(2026-07-27) — §9-5 페이지 전용 예외 셀렉터.
   .auth-panel이 이미 padding: var(--space-6) 0 을 갖고 있어 값이 완전히 같은 무효 중복이었다. */

.w4-auth-form {
  display: grid;
  width: 100%;
  gap: var(--space-3);
}

.w4-input-field input {
  width: 100%;
  min-height: var(--tap-main);
  padding: var(--space-3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-6);
  outline: 0;
  background: var(--bg3);
  color: var(--text);
  font-size: var(--fs-body);
}

.w4-form-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-14);
  text-align: left;
}

.w4-auth-links {
  display: flex;
  min-height: var(--tap-main);
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 720;
}

.w4-auth-links a {
  display: inline-flex;
  min-height: var(--sp-44);
  align-items: center;
}

.w4-consent {
  display: grid;
  width: 100%;
  min-height: var(--sp-60);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-6);
  background: var(--bg3);
  color: var(--text);
  text-align: left;
  grid-template-columns: var(--sp-44) minmax(0, 1fr) var(--sp-44);
}

.w4-consent.is-selected {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.w4-consent__mark {
  display: grid;
  width: var(--sp-44);
  height: var(--sp-44);
  place-items: center;
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  color: transparent;
  font-size: var(--fs-11);
  font-weight: 820;
}

.w4-consent.is-selected .w4-consent__mark {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--btn-fg);
}

.w4-consent strong,
.w4-consent small {
  display: block;
}

.w4-consent small {
  margin-top: var(--space-1);
  color: var(--text2);
  font-size: var(--fs-13);
}

.w4-consent .app-icon {
  width: var(--space-5);
  height: var(--space-5);
  justify-self: center;
}

.w4-state-page {
  align-items: center;
}

.w4-state-card {
  display: grid;
  width: min(100%, var(--form-max));
  min-height: calc(var(--sp-96) * 4);
  align-content: center;
  justify-items: center;
  gap: var(--space-4);
  margin: auto;
  text-align: center;
}

.w4-state-card--empty {
  margin-top: var(--space-7);
}

.w4-state-brand {
  justify-self: center;
  transform: scale(1.22);
  transform-origin: center;
}

.w4-state-card .page-title,
.w4-state-card .page-copy {
  margin-right: auto;
  margin-left: auto;
}

.w4-asset-page {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--safe-top) - var(--appbar-h) - var(--tabbar-h) - var(--safe-bottom));
  overflow: hidden;
  background: var(--bg);
}

.app-shell--immersive .w4-asset-page {
  height: var(--viewport-h);
}

.w4-asset-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}




/* W6b — 실데이터 기능 깊이 복원 */
.sheet-option__label--config,
.config-field-value,
.config-row__identity {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.config-swatch {
  display: inline-block;
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 var(--space-4);
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  background: var(--config-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 38%, transparent);
}

.sheet-manage-link {
  display: flex;
  min-height: var(--tap-main);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-6);
  background: var(--bg3);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 760;
}

.w6b-page .screen-intro {
  align-items: end;
}

.config-summary {
  display: grid;
  gap: var(--space-3);
}

.config-summary > div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.config-summary span,
.config-summary p,
.config-row small,
.exercise-config-row small {
  color: var(--text2);
  font-size: var(--fs-13);
}

.config-summary strong {
  font-size: var(--fs-28);
  font-variant-numeric: tabular-nums;
}

.config-summary p {
  margin: 0;
}

.config-list,
.exercise-config-list {
  overflow: hidden;
}

.config-row,
.exercise-config-row {
  display: grid;
  width: 100%;
  min-height: var(--sp-60);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  text-align: left;
}

.config-row {
  grid-template-columns: minmax(0, 1fr) auto var(--sp-44);
}

.config-row:last-child,
.exercise-config-row:last-child {
  border-bottom: 0;
}

.config-row__identity > span,
.config-row__usage,
.exercise-config-row > span:first-child {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.config-row__identity strong,
.exercise-config-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-row__usage {
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.config-row .app-icon,
.exercise-config-row .app-icon {
  width: var(--space-5);
  height: var(--space-5);
  justify-self: center;
  color: var(--text3);
}

.w6b-text-field {
  display: grid;
  gap: var(--space-2);
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 720;
}

.w6b-text-field input {
  width: 100%;
  min-height: var(--tap-main);
  padding: 0 var(--space-3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-6);
  outline: 0;
  background: var(--bg3);
  color: var(--text);
}

.w6b-text-field input:focus,
.w6b-text-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--space-1) var(--accent-soft);
}

.form-textarea--compact {
  min-height: var(--sp-96);
}

.config-editor,
.exercise-config-editor,
.plan-editor {
  display: grid;
  gap: var(--space-5);
}

.config-palette {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.config-palette legend,
.exercise-config-editor h3 {
  margin: 0 0 var(--space-2);
  color: var(--text2);
  font-size: var(--fs-14);
  font-weight: 720;
}

.config-palette__grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.config-color-button {
  display: flex;
  min-height: var(--tap-main);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-6);
  background: var(--bg3);
  color: var(--text2);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}

.config-color-button.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent2);
}

.exercise-picker,
.plan-manager-list {
  display: grid;
  gap: var(--space-3);
}

.pace-result {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pace-result > div {
  display: grid;
  gap: var(--space-1);
}

.pace-result > div > span {
  color: var(--text2);
  font-size: var(--fs-13);
  font-weight: 720;
}

.pace-result > div > strong {
  color: var(--accent2);
  font-size: var(--fs-32);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
}

.pace-result p {
  grid-column: 1 / -1;
}

.running-sensor-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.running-sensor-grid .metric-input {
  min-height: calc(var(--sp-96) + var(--space-5));
}

.running-sensor-grid .metric-input__control input {
  font-size: var(--fs-28);
}

.config-field-value {
  color: var(--text);
  font-weight: 760;
}

.pace-result em {
  margin-left: var(--space-1);
  font-size: var(--fs-13);
  font-style: normal;
  font-weight: 720;
}

.plan-library {
  display: grid;
  gap: var(--space-4);
}

.plan-preset-list {
  display: grid;
  gap: var(--space-2);
}

.plan-preset {
  display: flex;
  width: 100%;
  min-height: var(--sp-60);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-6);
  background: var(--bg3);
  color: var(--text);
  text-align: left;
}

.plan-preset.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.plan-preset > span:first-child {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.plan-preset small {
  color: var(--text2);
  font-size: var(--fs-13);
}

.plan-goal-detail {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-11);
  background: var(--bg3);
}

.plan-goal-detail h3,
.plan-goal-detail p {
  margin: 0;
}

.plan-goal-detail p {
  color: var(--text2);
}

.strength-timer-page {
  position: relative;
  display: grid;
  width: min(100%, var(--content-max));
  min-height: var(--viewport-h);
  align-content: start;
  gap: var(--space-4);
  margin: 0 auto;
  padding: var(--space-3) var(--page-gutter) var(--space-7);
  background:
    radial-gradient(circle at 50% 10%, var(--accent-soft), transparent 38%),
    var(--bg);
}

.strength-timer__top {
  display: grid;
  min-height: var(--sp-56);
  align-items: center;
  grid-template-columns: var(--sp-44) minmax(0, 1fr) var(--sp-44);
}

.strength-timer__top > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.timer-mode-row {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.timer-mode-row button {
  min-height: var(--tap-main);
  padding: var(--space-1);
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--text2);
  font-size: var(--fs-12);
  font-weight: 760;
}

.timer-mode-row button.is-selected {
  background: var(--accent);
  color: var(--btn-fg);
}

.strength-timer__clock {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  text-align: center;
}

.strength-timer__clock > span {
  color: var(--text2);
  font-size: var(--fs-13);
}

.strength-timer__clock > strong {
  font-size: var(--fs-64);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

.strength-timer__clock p {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 820;
}

.timer-progress {
  width: 100%;
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bg4);
}

.timer-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.timer-set-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border2);
  border-radius: var(--radius-14);
  background: var(--bg2);
  box-shadow: var(--shadow);
}

.timer-round-copy {
  display: block;
  margin-top: var(--space-1);
  color: var(--text2);
  font-size: var(--fs-12);
}

.timer-previous {
  display: flex;
  min-height: var(--tap-main);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-6);
  background: var(--bg3);
}

.timer-previous span {
  color: var(--text2);
  font-size: var(--fs-13);
}

.timer-stepper-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timer-stepper {
  display: grid;
  gap: var(--space-2);
}

.timer-stepper > span {
  color: var(--text2);
  font-size: var(--fs-13);
  font-weight: 720;
  text-align: center;
}

/* §9-7 같은 역할이면 같은 규칙 — 값칸 하한은 공용 .stepper 와 동일 토큰(minmax 0 이 320px 잘림의 원인이었다).
   버튼 트랙도 버튼 실폭과 같은 --tap-main 으로 맞춘다(--sp-48 은 같은 48이지만 역할 토큰이 아니다). */
.timer-stepper > div {
  display: grid;
  align-items: center;
  grid-template-columns: var(--tap-main) minmax(var(--sp-96), 1fr) var(--tap-main);
}

.timer-stepper button {
  display: grid;
  width: var(--tap-main);
  height: var(--tap-main);
  place-items: center;
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  background: var(--bg3);
  color: var(--text);
}

.timer-stepper strong {
  display: grid;
  justify-items: center;
  font-size: var(--fs-28);
  font-variant-numeric: tabular-nums;
}

.timer-stepper em {
  color: var(--text2);
  font-size: var(--fs-12);
  font-style: normal;
}

.timer-complete-button {
  min-height: var(--sp-60);
  border-radius: var(--radius-11);
  background: var(--accent);
  color: var(--btn-fg);
  font-size: var(--fs-17);
  font-weight: 850;
}

.timer-rest {
  position: absolute;
  z-index: 20;
  inset: var(--space-7) var(--page-gutter) auto;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-14);
  background: color-mix(in srgb, var(--bg2) 96%, transparent);
  box-shadow: var(--shadow);
  text-align: center;
  backdrop-filter: blur(var(--space-3));
}

.timer-rest > div {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
}

.timer-rest span,
.timer-rest p {
  color: var(--text2);
}

.timer-rest strong {
  color: var(--accent2);
  font-size: var(--fs-64);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.timer-rest em {
  font-style: normal;
}

.timer-rest p {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.timer-rest p b {
  color: var(--text);
}

.timer-rest p span {
  color: var(--text2);
  font-size: var(--fs-13);
}

.record-calendar {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-14);
  background: var(--bg2);
}

.record-calendar__nav,
.run-plan-nav {
  display: grid;
  grid-template-columns: var(--sp-44) minmax(0, 1fr) var(--sp-44);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.record-calendar__month,
.run-plan-nav__title {
  min-height: var(--sp-48);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 820;
}

.record-calendar__grid,
.run-plan-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.record-calendar__dow {
  padding: var(--space-2) 0;
  color: var(--text2);
  font-size: var(--fs-12);
  font-weight: 760;
  text-align: center;
}

.record-calendar__dow.is-sun {
  color: var(--danger);
}

.record-calendar__dow.is-sat {
  color: var(--info);
}

.record-calendar__blank,
.record-calendar__cell {
  min-height: calc(var(--sp-60) + var(--space-4));
  border: 0;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
}

/* 좌우 패딩 0 — 셀 폭이 44px대라 4px씩 빼면 메인 수치가 11px에서도 잘린다(§9-4 폭 적응).
   내용은 justify-items:center로 가운데 정렬되므로 좌우 패딩 없이도 여백감은 유지된다. */
.record-calendar__cell {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  color: var(--text2);
  font: inherit;
}

.record-calendar__cell:nth-child(7n),
.record-calendar__blank:nth-child(7n) {
  border-right: 0;
}

.record-calendar__cell.has-records {
  background: var(--bg3);
  color: var(--text);
}

.record-calendar__cell.is-today {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.record-calendar__date {
  font-size: var(--fs-13);
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

/* 메인 수치 — 부품이 셀마다 --cal-num-fs를 11~14px 범위에서 정한다(ui.fitCalendarNumbers).
   JS가 돌기 전/실패 시에도 최소치는 보장된다. */
.record-calendar__cell strong {
  overflow: hidden;
  width: 100%;
  color: var(--text2);
  font-size: var(--cal-num-fs, var(--cal-num-fs-min));
  font-weight: 720;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-calendar__dots {
  display: flex;
  min-height: var(--space-2);
  align-items: center;
  gap: var(--space-1);
}

.calendar-record-dot {
  display: inline-block;
  width: var(--space-2);
  height: var(--space-2);
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
}

.calendar-record-dot--run {
  background: var(--accent);
}

.calendar-record-dot--strength {
  background: var(--info);
}

.calendar-record-dot--body {
  background: var(--danger);
}

.calendar-legend,
.run-plan-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--text2);
  font-size: var(--fs-13);
}

.calendar-legend span,
.run-plan-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.calendar-legend > strong {
  flex-basis: 100%;
  color: var(--text2);
  font-size: var(--fs-13);
  font-weight: 650;
}

.ui-calendar-month__legend {
  padding: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Batch 1 body/strength RecordCard variants. Running V2 remains a frozen direct render. */
.v2-detail--single .card-viewport {
  overflow-x: hidden;
}

.v2-detail .rdc--body .rdc__media {
  height: 56%;
}

.v2-detail .rdc--strength .rdc__media {
  height: 52%;
}

.v2-detail .rdc--body .rdc__bg {
  background:
    radial-gradient(circle at 22% 22%, color-mix(in srgb, var(--accent) 34%, transparent) 0 8%, transparent 34%),
    radial-gradient(circle at 78% 34%, color-mix(in srgb, var(--accent2) 26%, transparent) 0 10%, transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--bg3) 82%, var(--accent)), var(--bg));
  filter: none;
}

.v2-detail .rdc--strength .rdc__bg {
  background:
    linear-gradient(126deg, transparent 0 36%, color-mix(in srgb, var(--accent) 20%, transparent) 36% 48%, transparent 48%),
    radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--text2) 24%, transparent) 0 12%, transparent 38%),
    linear-gradient(150deg, var(--bg3), var(--bg));
  filter: none;
}

.calendar-day-sheet {
  display: grid;
  gap: var(--space-3);
}

.calendar-day-total {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-11);
  background: var(--accent-soft);
}

.calendar-day-item {
  display: flex;
  min-height: var(--sp-60);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg3);
  color: var(--text);
  text-decoration: none;
}

.calendar-day-item > span {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
}

.calendar-day-item strong,
.calendar-day-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-day-item small {
  grid-column: 2;
  color: var(--text2);
}

.run-plan-library,
.run-plan-pc-note,
.run-plan-goal {
  display: grid;
  gap: var(--space-4);
}

.run-plan-presets {
  display: grid;
  gap: var(--space-2);
}

.run-plan-preset {
  display: flex;
  min-height: var(--sp-60);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg3);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.run-plan-preset.is-selected {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.run-plan-preset > span:first-child {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.run-plan-preset small,
.run-plan-goal p,
.run-plan-pc-note p {
  margin: 0;
  color: var(--text2);
  font-size: var(--fs-13);
  line-height: 1.45;
}

.run-plan-goal {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.run-plan-board {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-14);
  background: var(--bg2);
}

.run-plan-nav__title {
  display: grid;
  align-content: center;
  gap: var(--space-1);
}

.run-plan-nav__title span {
  color: var(--text2);
  font-size: var(--fs-12);
  font-weight: 620;
}

.run-plan-cell {
  display: grid;
  min-width: 0;
  min-height: var(--sp-96);
  align-content: center;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font: inherit;
  text-align: center;
}

.run-plan-cell:last-child {
  border-right: 0;
}

.run-plan-cell__date,
.run-plan-cell__state {
  font-size: var(--fs-10);
  font-weight: 720;
  white-space: nowrap;
}

.run-plan-cell > strong {
  font-size: var(--fs-15);
  font-variant-numeric: tabular-nums;
}

.run-plan-cell > strong small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-09);
}

.run-plan-cell.is-actual {
  background: var(--accent-soft);
  color: var(--accent);
}

.run-plan-cell.is-actual > strong {
  font-weight: 880;
}

.run-plan-cell.is-missed {
  background: var(--bg3);
  color: var(--text3);
}

.rp-cell--missed > strong,
.rp-cell--missed > strong s {
  text-decoration-color: currentColor;
  text-decoration-line: line-through;
  text-decoration-thickness: var(--sp-1);
}

.run-plan-cell.is-future {
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--text);
}

.run-plan-cell.is-empty {
  color: var(--text3);
}

.run-plan-cell.is-today {
  box-shadow: inset 0 calc(var(--sp-1) * -1) 0 var(--accent);
}

.run-plan-cell.is-future.is-today {
  box-shadow: inset 0 0 0 1px var(--accent-line), inset 0 calc(var(--sp-1) * -1) 0 var(--accent);
}

.run-plan-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.run-plan-totals .card {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
  padding: var(--space-3);
}

.run-plan-totals span,
.run-plan-totals small {
  color: var(--text2);
  font-size: var(--fs-11);
}

.run-plan-totals strong {
  font-size: var(--fs-17);
  font-variant-numeric: tabular-nums;
}

.run-plan-legend i {
  width: var(--space-3);
  height: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
}

.run-plan-legend i.is-actual {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.run-plan-legend i.is-missed {
  background: var(--bg3);
}

.run-plan-legend i.is-future {
  border-color: var(--accent-line);
}

.run-plan-pc-note {
  grid-template-columns: minmax(0, 1fr);
}

.run-plan-pc-note .btn {
  min-height: var(--sp-48);
}

.run-plan-detail,
.run-plan-detail__records {
  display: grid;
  gap: var(--space-3);
}

.run-plan-detail__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.run-plan-detail__metrics article,
.run-plan-detail__state {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg3);
}

.run-plan-detail__metrics span,
.run-plan-detail__state p,
.run-plan-detail__lock {
  margin: 0;
  color: var(--text2);
  font-size: var(--fs-12);
  line-height: 1.4;
}

.run-plan-detail__metrics strong {
  font-size: var(--fs-15);
  font-variant-numeric: tabular-nums;
}

.run-plan-detail__record {
  display: flex;
  min-height: var(--sp-60);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-11);
  background: var(--bg3);
  color: var(--text);
  text-decoration: none;
}

.run-plan-detail__record > span {
  display: grid;
  gap: var(--space-1);
}

.run-plan-detail__record small,
.run-plan-detail__empty {
  margin: 0;
  color: var(--text2);
}

@media (min-width: 768px) {
  .bottom-nav__inner {
    width: 100%;
    max-width: var(--tab-cluster-max);
    margin-right: auto;
    margin-left: auto;
  }

  .page,
  .appbar__inner {
    max-width: var(--content-max);
  }

  .chart,
  .chart__svg,
  .bar-chart {
    max-height: var(--chart-h);
  }

  /* .w4-auth-page .auth-panel 제거(§9-5) — 인증 화면의 패널은 항상 .w4-form-shell을 함께 갖는다(w4.js 650·695·712·740) */
  .w4-form-shell,
  .w4-support-page {
    width: min(100%, var(--form-max));
    max-width: var(--form-max);
    margin-right: auto;
    margin-left: auto;
  }

  .w4-asset-page--entry,
  .w4-asset-page--editor {
    max-width: var(--content-max);
    margin-right: auto;
    margin-left: auto;
  }

  .config-palette__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 439px) {
  .w4-receipt-row {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ═══ 공용 부품 base — 페이지 blanket 뒤에 와야 하는 것들 ═══════════════════════
   ★이 절의 위치는 장식이 아니라 계약이다. 페이지 전역 blanket(`.w3-page *`·`.w4-page *`가
   min-width를 0으로 눌러 두는 규칙)과 특성도가 같아(0,1,0) **선언 순서가 승패를 가른다.**
   부품 절(위쪽)에 두면 화면 blanket이 부품 규칙을 조용히 덮어 부품이 화면마다 달라진다
   (§9-6 위반 · 실측: 설정 페이지에서 min-width 44 → 0, 폭 44px → 23.4px).
   blanket 자체를 고치는 것은 이번 범위 밖이므로(다른 화면 회귀면이 크다) base를 뒤로 둔다. */

/* 페이지 이동 버튼 base (§9-7 같은 역할 같은 수치 · 2026-07-29 R1-06) —
   목록의 '위치를 옮기는' 조작부다. 선택 컨트롤(§9-12 R1~R5)이 아니며 그쪽과 통합하지 않는다.
   기록보기 .hist-pagebtn 과 설정 .st-pagebtn 이 같은 값을 각자 들고 있었다(화면이 규칙 소유).
   ★값은 기존 두 선언과 동일 토큰·동일 값(computed 회귀 0). 상태(.is-on)·변형(--ellipsis)·
   레일 축소 금지(flex)는 화면 클래스가 계속 소유한다. */
.ui-pagebtn {
  display: inline-flex;
  min-width: var(--tap-icon);
  min-height: var(--tap-icon);
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  background: var(--bg2);
  color: var(--text2);
  font-size: var(--fs-12);
  font-weight: 700;
}

/* 활성 상태도 base 가 소유한다(R3-2 — 화면 두 벌 정리 2026-07-30). 값 = 종전 두 화면 동일값. */
.ui-pagebtn.is-on {
  border-color: var(--accent);
  color: var(--accent);
}