/* SPLITS — docs/06-design-system.md 의 토큰을 그대로 옮긴 것.
   색을 여기서 한 번 정하고, 아래로는 이름으로만 쓴다. */

:root {
  --bg:             #FCFCFC;
  --surface:        #FFFFFF;
  --surface-sunken: #F4F4F2;
  --border:         #E4E4E1;
  --border-strong:  #CFCFCA;
  --text:           #1C1C1A;
  --text-secondary: #6B6B66;
  --text-muted:     #8A8A84;   /* 장식 전용. 본문 금지 (대비 3.3:1) */
  --accent:         #2E7D6F;
  --accent-ink:     #FFFFFF;
  --accent-weak:    #E6F0EE;
  --success:        #3A7D44;
  --warn:           #A8720F;
  --danger:         #B03A2E;
  --shadow-fab:     0 4px 14px rgba(28, 28, 26, .18);
  --shadow-sheet:   0 -6px 24px rgba(28, 28, 26, .14);
  --scrim:          rgba(28, 28, 26, .32);

  /* 넓은 화면 주간 그리드의 카드 높이 */
  --card-h:         152px;
  --card-h-empty:   60px;

  /* 상자 안쪽 여백. **여기서만 정한다** — 예전엔 12 · 12/14 · 14/16 · 16 · 20 ·
     12/16/16 여섯 가지가 화면마다 흩어져 있었다. 값 자체보다 흩어진 게 문제였다. */
  --pad-card:       16px;
  --pad-panel:      14px 16px;
  /* 주간 뷰 7열 안에서만 쓰는 좁은 여백. 한 칸이 150px 뿐이라 좌우 32px 를
     여백으로 쓰면 내용이 118px 로 줄어 훈련 이름이 다시 세로로 깨진다.
     **예외는 여기 하나이고, 이유는 칸이 좁다는 것 하나다.** */
  --pad-card-tight: 12px;
}

/* 다크는 같은 이름을 다시 정의만 한다. 아래 컴포넌트 CSS는 테마를 모른다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             #16171A;
    --surface:        #1E1F23;
    --surface-sunken: #131418;
    --border:         #2C2E33;
    --border-strong:  #3E4149;
    --text:           #EDEDEA;
    --text-secondary: #A5A6A2;
    --text-muted:     #74756F;
    --accent:         #5FB8A6;
    --accent-ink:     #16171A;
    --accent-weak:    #1E3B37;
    --success:        #6BBF7A;
    --warn:           #D9A441;
    --danger:         #E1705F;
    --shadow-fab:     0 4px 14px rgba(0, 0, 0, .45);
    --shadow-sheet:   0 -6px 24px rgba(0, 0, 0, .5);
    --scrim:          rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --bg:             #16171A;
  --surface:        #1E1F23;
  --surface-sunken: #131418;
  --border:         #2C2E33;
  --border-strong:  #3E4149;
  --text:           #EDEDEA;
  --text-secondary: #A5A6A2;
  --text-muted:     #74756F;
  --accent:         #5FB8A6;
  --accent-ink:     #16171A;
  --accent-weak:    #1E3B37;
  --success:        #6BBF7A;
  --warn:           #D9A441;
  --danger:         #E1705F;
  --shadow-fab:     0 4px 14px rgba(0, 0, 0, .45);
  --shadow-sheet:   0 -6px 24px rgba(0, 0, 0, .5);
  --scrim:          rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

/* HTML 의 hidden 속성은 UA 스타일시트의 display:none 이라
   .chips{display:flex} 같은 저자 규칙에 진다. 전역에서 못 박는다. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* 숫자 고정폭. 예외 없이 전역에 건다 — 자릿수가 흔들리면 주간 뷰를 훑어볼 수 없다. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ⚠ .app 은 **세로 flex 컨테이너**다. 그래서 직계 자식에 `max-width` 와
   좌우 `auto` 마진을 주면 **가운데 정렬은 되는데 폭이 안 나온다** —
   flexbox 는 교차축 마진이 auto 면 stretch 를 끄고 내용 폭으로 줄인다.

   `width: 100%` 를 반드시 같이 준다. 안 주면 조용히 좁아진다:
     .settings  560px 인 줄 알았는데 210px
     .gate      380px 인 줄 알았는데 285px
   둘 다 "왜 이렇게 좁지" 로 발견했다. 콘솔에 아무 말도 안 나온다.
   (position:fixed 인 .sheet 는 흐름 밖이라 해당 없음) */
.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; position: relative; }
@media (min-width: 900px) { .app { max-width: 1200px; } }

/* ---------------------------------------------------------------- 헤더 */

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px; gap: 8px; }
.weeknav { display: flex; align-items: center; gap: 4px; }
.weeknav__label { font-size: 20px; font-weight: 600; padding: 0 8px; }

.iconbtn {
  width: 48px; height: 48px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); background: none; border: 0; border-radius: 10px;
  cursor: pointer;
}
.iconbtn:hover { background: var(--surface-sunken); }

/* ---------------------------------------------------------------- 주간 요약 */

.summary {
  margin: 0 16px 8px; padding: var(--pad-panel); border-radius: 10px;
  background: var(--surface-sunken); display: flex; flex-direction: column; gap: 8px;
}
.summary__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.summary__km { font-size: 32px; line-height: 36px; font-weight: 600; }
.summary__rest { font-size: 13px; color: var(--text-secondary); }
.summary__compare { font-size: 13px; color: var(--text-secondary); display: flex; gap: 8px; flex-wrap: wrap; }
.summary__delta { font-weight: 500; color: var(--warn); }
.summary__caveat { font-size: 13px; color: var(--text-secondary); }
/* 주간 수행률. 거리 옆에 나란히 놓지 않는다 — 둘 다 큰 숫자면 무엇이 주인지 안 보인다. */
.summary__plan { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.summary__pct { font-size: 15px; font-weight: 600; color: var(--text); }

.unit { font-size: 11px; font-weight: 500; color: var(--text-secondary); }

/* ---------------------------------------------------------------- 날짜 행 */

.days { display: flex; flex-direction: column; }

.day { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); min-height: 56px; }
.day:last-child { border-bottom: 1px solid var(--border); }
.day--today { border-left: 3px solid var(--accent); padding-left: 13px; background: var(--surface); }
.day--empty { align-items: center; }
.day__date { width: 44px; flex: 0 0 auto; font-size: 13px; color: var(--text-secondary); padding-top: 2px; }
.day--today .day__date { color: var(--accent); font-weight: 600; }
.day__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* '—'(안 적음)은 의미 있는 정보다. text-muted(3.3:1)가 아니라 text-secondary(5.2:1)를 쓴다. */
.nothing { color: var(--text-secondary); }
.rest { display: flex; align-items: baseline; gap: 8px; }
.rest__label { color: var(--text-secondary); }
.rest__note { font-size: 13px; color: var(--text-muted); }

.session { display: flex; flex-direction: column; gap: 2px; color: inherit; }

/* 계획 — 아직 한 것이 아니다. 흐리고, 점선 테두리로 '미확정'을 알린다. */
.plan { display: flex; flex-direction: column; gap: 2px; color: var(--text-secondary); }
.plan__tag {
  font-size: 11px; font-weight: 500; color: var(--accent);
  border: 1px dashed var(--accent); border-radius: 6px; padding: 1px 6px;
  white-space: nowrap;
}
/* 안 한 계획 — 지우지 않는다. 안 한 것도 기록이다. */
.plan--skipped { opacity: .65; }
.plan__tag--skip { color: var(--warn); border-color: var(--warn); }
/* 계획에서 나온 훈련의 수행률 — 실선이다. 이건 확정된 사실이다. */
.plan__tag--done { border-style: solid; }
.session__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
/* flex-wrap 이 핵심이다. 태그는 white-space:nowrap 이라 안 줄어드는데,
   7열 그리드의 한 칸(약 150px)에 '미완료 · 부상·통증' 같은 긴 태그가 붙으면
   유형 이름이 남은 20px 까지 눌려 **한 글자씩 세로로 흐른다.**
   줄바꿈을 허용하면 태그가 아랫줄로 내려가고 이름이 제 폭을 갖는다.
   row-gap 을 따로 주는 이유: 줄이 나뉘었을 때만 세로 간격이 필요하다. */
.session__type { display: flex; flex-wrap: wrap; align-items: baseline;
                 column-gap: 8px; row-gap: 4px; min-width: 0; }
/* 이름은 줄지 않는다 — 줄여야 할 것은 태그가 아니라 줄 수다 */
.session__type > span:first-child { flex: 0 1 auto; min-width: 0; }
.session__tod { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.session__meta { font-size: 13px; color: var(--text-secondary); }
/* 폰에서는 한 줄이라 가운뎃점으로 잇는다 */
.session__rpe::before { content: " · "; }
.session__bar { display: none; }   /* 폰에서는 안 쓴다 — 줄에 이미 말이 들어가 있다 */
.session__note {
  font-size: 13px; color: var(--text-secondary); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------------------------------------------------------------- FAB */

.fab {
  position: fixed; right: 20px; bottom: 28px; width: 56px; height: 56px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  border: 0; box-shadow: var(--shadow-fab); cursor: pointer;
}
@media (min-width: 600px) { .fab { right: calc(50% - 280px + 20px); } }
@media (min-width: 900px) { .fab { right: calc(50% - 600px + 20px); } }

/* ---------------------------------------------------------------- 폼 */

.form { display: flex; flex-direction: column; gap: 24px; padding: 4px 16px 16px; flex: 1 1 auto; }
.form > * { flex-shrink: 0; }   /* 세로 공간이 모자라도 눌리지 않는다 */

/* 넓은 화면에서 두 칸이 될 묶음. **폰에서는 아무 일도 안 한다** —
   폼과 같은 세로 flex 에 같은 gap 이라 감싸기 전과 픽셀이 같다.
   display:contents 를 안 쓴 이유: 사파리에서 접근성 트리에서 사라진 전례가 있고,
   그럴 필요도 없다. */
.form__col { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }

.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label { padding: 14px 0; text-align: center; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; border-left: 1px solid var(--border); }
.segmented label:first-of-type { border-left: 0; }
.segmented input:checked + label { background: var(--accent-weak); color: var(--accent); }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.segmented--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmented--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 쉰 날 표시. 고르는 칸이 아니라 상태 표시다 — 누를 수 없어 보여야 한다. */
.restmark {
  display: flex; align-items: center; gap: 8px;
  padding: var(--pad-panel); border-radius: 10px;
  background: var(--surface-sunken); color: var(--text-secondary);
  font-size: 14px; font-weight: 500;
}

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label {
  padding: 12px 16px; border-radius: 6px; border: 1px solid var(--border);
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  background: var(--surface); cursor: pointer; min-height: 48px; display: flex; align-items: center;
}
.chips input:checked + label { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
.chips input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 유형을 고르는 칩이 아니라 목록을 여닫는 동작이다 */
.chip-more {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px; min-height: 48px; border-radius: 6px;
  border: 1px dashed var(--border-strong); background: transparent;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer;
}
.chip-more svg { transition: transform .15s ease; }
.chip-more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* 펼쳐져 있거나, 그 안의 유형을 골랐을 때 — 둘 다 '지금 여기'라는 표시 */
.chip-more[aria-expanded="true"],
.chip-more[data-picked="1"] {
  border-style: solid; border-color: var(--accent); color: var(--accent);
}
/* 골라둔 상태는 선택된 칩과 같아 보여야 한다. 화살표만 남아 여닫이임을 알린다. */
.chip-more[data-picked="1"] { background: var(--accent-weak); }

/* 펼친 목록은 한 덩어리로 보이게 묶는다 */
/* 배경과 테두리를 둘 다 갖고 있던 유일한 상자였다. 패널로 맞춘다. */
.chips-all { display: flex; flex-direction: column; gap: 12px; padding: var(--pad-panel);
             border-radius: 10px; background: var(--surface-sunken); }
.chips-all__group { display: flex; flex-direction: column; gap: 8px; }
.chips-all__title { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--text-muted); }

.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); min-height: 56px; }
.row:last-child { border-bottom: 0; }
.row__label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.row__value { display: flex; align-items: baseline; gap: 6px; }
.row__derived { font-size: 16px; color: var(--text-secondary); }

/* 16px 미만이면 iOS가 입력 시 화면을 확대한다. 20px로 여유를 둔다. */
.numinput {
  width: 120px; text-align: right; font: inherit; font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text); background: transparent; border: 0; padding: 4px 0;
}
.numinput::placeholder { color: var(--text-muted); font-weight: 400; }
/* 못 고치는 값. 입력칸처럼 생겼는데 안 먹으면 고장으로 보이므로 색으로 알린다. */
.numinput[readonly] { color: var(--text-secondary); }

.rpe__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rpe__value { font-size: 13px; font-weight: 500; }
.rpe__track { display: flex; align-items: center; gap: 12px; }
.rpe__end { font-size: 11px; font-weight: 500; color: var(--text-muted); }

/* 미입력 상태는 손잡이가 비어 있다. 이 구분이 무너지면 저장 정책이 무의미해진다. */
input[type="range"].rpe { flex: 1 1 auto; -webkit-appearance: none; appearance: none; background: transparent; height: 24px; margin: 0; }
input[type="range"].rpe::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--border); }
input[type="range"].rpe::-moz-range-track { height: 4px; border-radius: 999px; background: var(--border); }
/* 손잡이는 항상 채워져 있다. 빈 손잡이(미입력)는 없어졌다 (결정 81).
   [data-touched] 로 채우던 규칙도 같이 지웠다 — 죽은 CSS 는 남으면 언젠가 이긴다. */
input[type="range"].rpe::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 999px;
  background: var(--accent); border: 2px solid var(--accent); cursor: pointer;
}
input[type="range"].rpe::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--accent); border: 2px solid var(--accent); cursor: pointer;
}

.memo {
  width: 100%; min-height: 140px; resize: vertical; font: inherit; font-size: 16px; line-height: 1.5;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px;
}
.memo::placeholder { color: var(--text-muted); }
/* 한 줄만 받는 칸. 계획 미완료의 덧붙이기와 같은 높이다. */
.memo--short { min-height: 56px; }

/* ---------------------------------------------------------------- 버튼 */

.savebar { position: sticky; bottom: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--bg); }

/* 세 가지뿐이다. 넷째를 만들지 않는다 — btn--link 를 하나 만들어뒀더니
   앱 전체에서 한 곳에서만 쓰이는 채로 남아 '여긴 왜 다르지' 가 됐다.

   | primary | 이 덩어리에서 하려던 일   | **덩어리마다 하나** |
   | danger  | 지우는 일                 | 테두리 없음 — 눈에 먼저 안 띄어야 한다 |
   | ghost   | 나머지 전부 (취소·이동·보조) |

   **'덩어리' 는 화면이 아니라 사용자가 한 번에 보는 결정 단위다** — 화면 하나,
   목록의 카드 하나, 펼친 패널 하나. 처음엔 '화면당 하나' 로 적었다가
   프로그램 고르기 화면의 실행 버튼까지 회색이 됐다 — 그 화면이 있는 이유가
   그 버튼인데. 카드가 곧 결정이면 카드마다 하나다.

   근거: docs/06-design-system.md */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); font-weight: 500; }
.btn--danger { background: transparent; color: var(--danger); border-color: transparent; font-weight: 500; }

/* ---------------------------------------------------------------- 첫 화면

   .empty(가운데 정렬 · 큰 그림 · 버튼 하나)를 **지우고** 이걸로 바꿨다.
   남겨두면 죽은 규칙이 남아서 이긴다 — 이미 세 번 겪었다.

   선택지 셋을 나란히 놓는다. 가운데 정렬을 버린 이유는 셋을 견주려면
   왼쪽 끝이 맞아야 하기 때문이다. 하나를 크게 만들지도 않는다 —
   무엇이 첫걸음인지는 그 사람의 손에 지금 무엇이 있느냐로 갈린다. */

.start { display: flex; flex-direction: column; gap: 8px; padding: 24px 16px 32px; }
.start__title { font-size: 22px; font-weight: 600; margin: 0; }
.start__body { color: var(--text-secondary); margin: 0 0 16px; text-wrap: pretty; }
.start__opts { display: flex; flex-direction: column; gap: 12px; }
.start__opt {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--pad-card); border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: inherit;
}
.start__opt:hover { border-color: var(--border-strong); }
.start__what { font-size: 16px; font-weight: 600; color: var(--accent); }
.start__why { font-size: 14px; color: var(--text-secondary); text-wrap: pretty; }

/* ---------------------------------------------------------------- 저장 후 시트 */

.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 10; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11;
  background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-sheet);
  padding: 12px 24px calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  max-width: 560px; margin: 0 auto;
}
.sheet__grip { width: 40px; height: 4px; border-radius: 999px; background: var(--border); }
.sheet__mark { width: 48px; height: 48px; border-radius: 999px; background: var(--accent-weak); color: var(--success); display: flex; align-items: center; justify-content: center; }
.sheet__title { font-size: 20px; font-weight: 600; }
.sheet__rule { width: 100%; height: 1px; background: var(--border); }
.sheet__stats { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.sheet__stat { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.sheet__stat-label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.sheet__big { font-size: 32px; line-height: 36px; font-weight: 600; }
.sheet__sub { font-size: 20px; font-weight: 600; color: var(--text-secondary); }
/* 판단하지 않는다. 사실만 적는다. */
.sheet__verdict { text-align: center; padding-top: 4px; }
.sheet__verdict b { color: var(--warn); }
.sheet__actions { display: flex; gap: 12px; width: 100%; }

/* 폼 하단의 나란한 두 버튼(보조 · 주). 저장 후 시트의 .sheet__actions 를
   빌려 쓰다가 넓은 화면에서 이 줄만 화면 끝까지 늘어났다 — 시트는 하단에
   깔리는 판이라 반씩 나눠 갖는 게 맞지만, 폼은 왼쪽 정렬 열이다. */
.formactions { display: flex; gap: 12px; width: 100%; }

/* ---------------------------------------------------------------- 설정 */

.settings { padding: 0 16px 32px; display: flex; flex-direction: column; gap: 24px; }
.settings__group { display: flex; flex-direction: column; gap: 4px; }
.settings__title { font-size: 14px; font-weight: 500; color: var(--text-secondary); padding: 8px 0; }
.settings__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); min-height: 56px; color: inherit; }
.settings__value { color: var(--text-secondary); }
.settings__foot { font-size: 13px; color: var(--text-secondary); padding-top: 8px; }

.conflict { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 24px; text-align: center; }
.conflict__mark { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--warn); }
.conflict__title { font-size: 20px; font-weight: 600; margin: 8px 0 0; text-wrap: balance; }
.conflict__body { margin: 0 0 16px; color: var(--text-secondary); text-wrap: pretty; }
.conflict__actions { width: 100%; }

/* 완료된 훈련 위에 붙는 계획 원문. 읽기 전용이다 — 계획은 계획 화면에서 고친다. */
.planref { display: flex; flex-direction: column; gap: 8px; padding: var(--pad-panel);
           border-radius: 10px; background: var(--surface-sunken); }
.planref__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.planref__what { font-size: 14px; font-weight: 500; }
.planref__rates { display: flex; gap: 16px; font-size: 13px; color: var(--text-secondary); }
.planref__rates b { color: var(--text); font-weight: 600; }
/* 계획 내용은 여러 줄이다 — 줄바꿈을 살린다 */
.planref__note { font-size: 14px; line-height: 1.5; color: var(--text-secondary); white-space: pre-line; }

.notice { padding: var(--pad-panel); border-radius: 10px; background: var(--surface-sunken); font-size: 14px; color: var(--text-secondary); }
.notice--warn { color: var(--warn); }

/* 좁은 화면 기본값: 머리글 줄과 하단 메모는 쓰지 않는다.
   반드시 아래 @media 앞에 둔다 — 뒤에 두면 나중 규칙이 이겨 넓은 화면에서도 숨는다. */
.weekhead, .notes { display: none; }

/* ---------------------------------------------------------------- 넓은 화면

   같은 데이터, 다른 레이아웃 (docs/04-screens.md).
   폰은 세로 카드, 넓은 화면은 7열 그리드 — 지금 쓰는 시트와 형태가 가까워
   갈아타는 거부감이 낮다. 여기서도 읽기 전용이다.                        */

@media (min-width: 900px) {

  /* 요약: 세로 블록 → 가로 한 줄 */
  .summary { flex-direction: row; align-items: center; gap: 24px; padding: var(--pad-panel); margin: 0 24px 8px; flex-wrap: wrap; }
  .summary__top { gap: 6px; }
  .summary__rest { display: flex; align-items: baseline; gap: 24px; }
  .summary__rest::before { content: ""; }
  .summary__compare { margin-left: auto; }

  .topbar { padding: 24px; }

  /* 요일 머리글 줄 — 그리드와 같은 7열로 맞춘다 */
  .weekhead {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px;
    padding: 16px 24px 0;
  }
  .weekhead__cell {
    font-size: 14px; font-weight: 500; color: var(--text-secondary);
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
  }
  .weekhead__cell--today { color: var(--accent); font-weight: 600; border-bottom: 2px solid var(--accent); }

  .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; padding: 16px 24px 0; align-items: start; }

  /* 날짜 칸 자체는 카드가 아니다. 카드는 그 안의 세션이다. */
  .day {
    flex-direction: column; gap: 8px; padding: 0; min-height: 0;
    border: 0; background: none;
  }
  .day:last-child { border-bottom: 0; }
  .day--today { border-left: 0; padding-left: 0; }
  .day__date { display: none; }          /* 머리글 줄로 옮겼다 */
  .day__body { gap: 8px; }

  /* 카드 높이를 맞춘다. RPE 가 없으면 한 줄이 비어 카드가 짧아지는데,
     그러면 7열이 들쭉날쭉해져 한 주를 훑기 어렵다. 값은 여기 한 곳만 고치면 된다. */
  .session {
    padding: var(--pad-card-tight); border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border);
    gap: 4px; min-height: var(--card-h);
    justify-content: flex-start;
  }
  .day--today .session { border-color: var(--accent); }
  .session__head { flex-direction: column; align-items: stretch; gap: 4px; }
  .session__type { justify-content: space-between; }
  .session__head > span:last-child { font-size: 20px; font-weight: 600; }
  .session__note { display: none; }      /* 하단 메모 목록으로 옮긴다 */

  /* 카드에서는 시간·페이스 한 줄, RPE 한 줄. 셋을 한 줄에 넣으면 좁아서 넘친다. */
  .session__meta { display: flex; flex-direction: column; gap: 2px; }
  .session__rpe::before { content: none; }

  /* 길이만으로 강도를 읽는다. 색을 10단계로 나누지 않는다 —
     순서가 있는 값이고, 높은 강도가 '나쁨'도 아니라 경고색이 아니다. */
  .session__bar {
    display: block; height: 6px; margin-top: 6px;
    border-radius: 999px; background: var(--border); overflow: hidden;
  }
  .plan {
    padding: var(--pad-card-tight); border-radius: 10px; min-height: var(--card-h-empty);
    border: 1px dashed var(--border-strong); background: transparent;
  }

  .session__bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }


  /* 휴식과 빈 날은 담을 게 없다. 훈련 카드와 같은 높이로 키우면 빈 상자만 커진다. */
  /* 휴식은 누를 수 있지만 **패널**이다. 기준은 '누르는가' 가 아니라 '담긴 무게' 다 —
     쉰 날을 훈련 카드와 같은 무게로 그리면 한 주를 훑을 때 뛴 날처럼 보인다. */
  .rest { padding: var(--pad-card-tight); border-radius: 10px; background: var(--surface-sunken); flex-direction: column; align-items: flex-start; gap: 4px; min-height: var(--card-h-empty); }
  .nothing { display: flex; align-items: center; justify-content: center; min-height: var(--card-h-empty); }

  /* 폰에서는 세션을 탭해야 보이는 긴 메모를, 넓은 화면에서는 펼친다 */
  .notes { display: block; margin: 32px 24px 0; padding-top: 20px; border-top: 1px solid var(--border); }
  .notes__title { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: 10px; }
  .notes__item { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; color: inherit; }
  .notes__when { font-size: 13px; font-weight: 500; color: var(--accent); white-space: nowrap; }
  .notes__text { text-wrap: pretty; }

  .fab { right: calc(50% - 600px + 20px); }
}

/* ---------------------------------------------------------------- 로그인 · 계정 */

/* 로그인·가입은 앱 안이 아니라 앱 앞이다. 상단바도 주간 이동도 없이 가운데에만 둔다. */
.gate {
  display: flex; flex-direction: column; gap: 16px; padding: 64px 24px 32px;
  /* width:100% 없이는 380px 이 안 나온다 — 아래 .app 주석 참고. 실제로 285px 였다. */
  width: 100%; max-width: 380px; margin: 0 auto;
}
.gate__mark { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.gate__sub { margin: -8px 0 8px; color: var(--text-secondary); font-size: 15px; }
.gate__form { display: flex; flex-direction: column; gap: 8px; }
/* 최소 탭 크기 44px 를 여기서도 지킨다 — 땀 묻은 손으로 누른다 */
.gate__input { min-height: 48px; padding: 12px 14px; font-size: 16px; }
.gate__form .btn { margin-top: 8px; }
.gate__form .field__label { margin-top: 8px; }

.admin__user { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.admin__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin__meta { font-size: 13px; color: var(--text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.admin__acts { display: flex; flex-direction: column; gap: 8px; }
.admin__inline { display: flex; gap: 8px; align-items: stretch; }
.admin__inline .gate__input { flex: 1; min-width: 0; }
.admin__inline .btn { width: auto; white-space: nowrap; }
.plan__tag--off { color: var(--text-muted); border-color: var(--border); border-style: solid; }
.hint { font-weight: 400; color: var(--text-muted); }

/* ---------------------------------------------------------------- 훈련 템플릿 */

/* 계획이 없는 주에만 나오는 시작 블록 */
.planstart { display: flex; flex-direction: column; gap: 12px; margin: 0 16px 8px; }
.planstart__label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.planstart__pick { display: flex; flex-direction: column; gap: 8px; }

/* 프로그램 한 장. 폰에서 프로그램 하나가 화면 하나를 넘어가는데, 경계가 없으면
   스크롤하다 다음 프로그램이 그냥 이어져 나와 어디까지가 무엇인지 안 보인다. */
.prog {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--pad-card); border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
}
/* 카드가 이미 테두리를 갖고 있으니 마지막 요일의 밑줄은 겹친다 */
.prog .tpl__days > .tpl__day:last-child { border-bottom: 0; }
/* 목록에서 카드 자체가 링크가 되는 자리가 있다 (관리자 훈련 목록) */
a.prog { color: inherit; }
a.prog:hover { border-color: var(--border-strong); }

/* 관찰 화면의 한 줄. 라벨은 왼쪽, 값은 오른쪽 — 사람이 바뀌어도 눈이 같은 자리를 본다. */
.usage__row { display: flex; align-items: baseline; justify-content: space-between;
              gap: 12px; padding: 6px 0; font-size: 14px; }
.usage__label { color: var(--text-secondary); white-space: nowrap; }
.usage__val { text-align: right; }

.tpl__head { display: flex; align-items: baseline; gap: 8px; padding: 8px 0 4px; }
.tpl__name { font-size: 15px; font-weight: 600; }
.tpl__desc { font-size: 13px; color: var(--text-secondary); padding-bottom: 8px; }
.tpl__days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* 한 줄짜리 요약은 .tpl__row 가 격자로 잡는다.
   여기에 격자를 두면 펼친 본문이 첫 칸(20px)에 갇혀 한 글자씩 세로로 흐른다 — 실제로 그랬다. */
.tpl__day { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.tpl__wd { color: var(--text-muted); }
.tpl__type { color: var(--text-secondary); }
/* 시간은 자릿수가 흔들리면 읽기 어렵다 */
.tpl__dur { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.tpl__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 템플릿 하루 — 접어두고 펼쳐 본다. 찍기 전에 내용을 확인할 수 있어야 한다. */
.tpl__day > details > summary { list-style: none; cursor: pointer; }
.tpl__day > details > summary::-webkit-details-marker { display: none; }
.tpl__row { display: grid; grid-template-columns: 20px 72px 64px 1fr; gap: 8px;
            align-items: baseline; }
/* 펼쳤을 때 어느 줄이 열려 있는지 보이게 */
.tpl__day > details[open] > summary .tpl__title { white-space: normal; }
.tpl__body { white-space: pre-line; font-size: 13px; line-height: 1.55;
             color: var(--text-secondary); padding: 8px 0 4px 28px; }
/* summary 에 display 를 주지 않는다. flex/block 으로 바꾸면 사파리에서
   펼침 동작 자체가 깨진다 — 실제로 '수정이 안 된다' 로 나타났다.
   높이는 padding 으로 확보한다 (탭 대상 44px). */
.tpl__edit > summary { cursor: pointer; font-size: 14px; color: var(--text-secondary);
                       padding: 12px 0; }
.tplname { display: flex; flex-direction: column; gap: 4px; padding-top: 8px;
           border-top: 1px solid var(--border); margin-top: 8px; }

/* 템플릿 하루 편집 — 펼친 자리에서 바로 고친다 */
.tplform { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px 28px; }
/* 28px 들여쓰기는 요일 줄 아래 붙을 때의 것이다. '프로그램 수정' 패널 안에서는
   나란히 놓인 다른 폼들과 왼쪽 끝이 어긋난다. */
.tpl__edit > .tplform { padding-left: 0; }
.tpl__edit > .settings__title { padding-top: 16px; }
.tplform__line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tplform__sel { min-height: 44px; padding: 8px 10px; font-size: 15px;
                border: 1px solid var(--border); border-radius: 8px;
                background: var(--surface); color: var(--text); }
.tplform__sel--wide { flex: 1; min-width: 120px; }
.tplform__unit { display: flex; align-items: center; gap: 6px;
                 font-size: 14px; color: var(--text-secondary); }
.tplform__unit .numinput { width: 76px; min-height: 44px; text-align: right; }
.tplform__note { min-height: 132px; }

/* ---------------------------------------------------------------- 넓은 화면: 폼 폭
   .app 은 900px 부터 1200px 가 된다 — **주간 7열 그리드 때문이다.**
   그런데 설정·템플릿·입력 폼까지 그 폭을 물려받아, 한 줄 입력과 버튼이
   1200px 로 늘어나 있었다. 폼은 넓다고 좋아지지 않는다.

   이 블록은 파일 맨 뒤에 둔다. 앞에 두면 위쪽 규칙이 나중에 와서 이긴다 —
   같은 실수를 이미 두 번 했다(.weekhead, .tpl__day). */
@media (min-width: 900px) {
  /* width:100% 를 빼면 안 된다. flex 자식은 **교차축 마진이 auto 면 stretch 가 꺼져**
     내용 폭으로 쪼그라든다 — .form 은 메모 textarea 가 커서 560px 에 닿았지만
     .settings 는 210px 로 줄어 있었다. max-width 만 걸어두고 넓어졌다고 믿고 있었다. */
  .settings, .conflict, .start {
    width: 100%; max-width: 560px; margin-left: auto; margin-right: auto;
  }

  /* -- 폼은 두 칸이다 (결정 80) ---------------------------------------

     560px 한 칸으로 두니 **가로 720px 를 놀리면서 세로로 900px 넘게** 길었다.
     주간 뷰는 1200px 를 쓰는데 폼만 560px 라 화면을 옮길 때 폭이 절반으로 줄었다.
     밀도만 낮춘 것으로는 '폰 폼을 상자에 넣은 것' 을 못 벗어났다 (결정 73).

     왼쪽은 고르고 적는 것(날짜·시간대·유형·거리·시간·RPE),
     오른쪽은 긴 글(메모·내용·사유). 저장바는 아래 전체 폭.
     **HTML 순서를 안 바꾸므로 폰은 그대로다.** */
  .form {
    width: 100%; max-width: 880px; margin-left: auto; margin-right: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px; row-gap: 18px; align-content: start;
  }
  .form__col { gap: 18px; }
  /* 안내·계획 원문·저장바는 어느 한쪽에 딸린 것이 아니다 */
  .form > .notice, .form > .planref, .form > .savebar { grid-column: 1 / -1; }

  /* 두 칸이 되면 한 칸이 424px 다. 세그먼트가 그 폭을 다 쓸 이유는 없다 —
     오전/오후 두 칸짜리 토글이 212px 씩 되면 여전히 거대하다. */
  .segmented { max-width: 360px; }

  /* 상단바도 본문 열에 맞춘다. 상단바만 1200px 를 쓰면 뒤로 버튼이 화면
     맨 왼쪽에 혼자 떨어져, 무엇으로 돌아가는 버튼인지 안 보인다.
     주간 뷰(week)만 뺀다 — 거기만 본문이 실제로 7열 그리드로 넓다. */
  .topbar--narrow {
    width: 100%; max-width: 560px; margin-left: auto; margin-right: auto;
    padding-left: 8px; padding-right: 8px;   /* 아이콘 상자(40px)의 여백만큼 당긴다 */
  }

  /* 폼 화면만 880px 다 (폼이 두 칸이라). 560px 로 두면 닫기 버튼이 폼 왼쪽 끝보다
     안쪽에 들어와 어긋난다 — topbar--narrow 를 만든 이유와 같은 문제다.

     **반드시 topbar--narrow 뒤에 둔다.** 특정도가 같아서 순서가 승패를 가른다 —
     앞에 뒀다가 narrow 한테 져서 안 먹혔다. 이 파일에서 네 번째 같은 실수다. */
  .topbar--form { max-width: 880px; }

  /* 버튼은 손가락이 아니라 마우스로 누르는 폭이면 된다 */
  .settings .btn, .form .btn, .admin__acts .btn, .admin__inline .btn, .tplform .btn {
    width: auto; min-width: 132px; align-self: flex-start;
    min-height: 44px; padding: 0 20px; font-size: 15px;
  }
  /* 저장 후 시트는 화면 하단에 깔린 판이라 두 버튼이 절반씩 나눠 갖는다 */
  .sheet__actions .btn { flex: 1; align-self: auto; }

  /* 폼의 동작 줄은 다르다. 다른 버튼들이 132px 왼쪽 정렬인데 이 줄만
     526px 로 늘어나 있었다. 같은 폭으로 맞춰 왼쪽에 붙인다. */
  .formactions { justify-content: flex-start; }
  .formactions .btn { flex: 0 0 auto; align-self: auto; }

  /* 삭제는 테두리도 배경도 없는데 min-width 132px 상자 **가운데**에 글자가
     놓여 있었다 — 어느 것과도 왼쪽 끝이 안 맞아 혼자 떠 보였다.
     상자를 글자에 맞춰 없앤다. */
  .form .btn--danger, .settings .btn--danger, .prog .btn--danger {
    min-width: 0; padding: 0; justify-content: flex-start;
  }

  /* 주간 뷰 위의 '지난주 가져오기 · 템플릿에서 만들기'.
     주간 그리드는 넓어야 하지만 이 버튼들이 따라 넓어질 이유는 없다.
     넓은 화면에서는 가로로 놓아 세로 공간도 아낀다 — 아래 요일 머리글과
     칸이 한 화면에 같이 보여야 주간 뷰다. */
  .planstart { flex-direction: row; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
  .planstart .btn { width: auto; min-width: 180px; min-height: 44px;
                    padding: 0 20px; font-size: 15px; }
  .planstart__pick { flex-direction: row; align-items: flex-start; }

  /* 한 줄 입력이 화면 끝까지 갈 이유가 없다 */
  .gate__input { max-width: 420px; min-height: 44px; padding: 10px 12px; }
  .tplform__note { max-width: 520px; min-height: 120px; }
  .memo { max-width: 100%; }
  .tplform__sel { min-height: 40px; padding: 6px 10px; font-size: 14px; }
  .tplform__sel--wide { max-width: 200px; }
  .tplform__unit .numinput { min-height: 40px; }

  /* -- 손가락 크기를 마우스 크기로 -------------------------------------

     폰의 48~56px 는 **땀 묻은 손가락**을 위한 치수다. 마우스 커서는 1px 를
     찍는다. 그 치수를 PC 에 그대로 두면 폼이 세로로 길어져 한 화면에 안 들어오고,
     스크롤해야 저장 버튼이 보인다 — 폰에서 30초를 지키려고 넣은 것이
     PC 에서는 오히려 손을 늘린다.

     낮추되 32px 아래로는 안 내린다. 노트북 트랙패드는 마우스보다 부정확하고,
     PC 라고 전부 마우스인 것도 아니다. */

  .form { gap: 18px; padding-bottom: 8px; }

  .chips label, .chip-more { min-height: 36px; padding: 6px 12px; }

  /* 날짜 칸이 열을 다 쓰면 달력 아이콘이 저 멀리 오른쪽에 떨어져 짝이 안 맞아 보인다.
     인라인 style="width:auto" 는 못 이기므로 stretch 를 끄는 쪽으로 좁힌다. */
  .field > input[type="date"] { align-self: flex-start; }
  .segmented label { padding: 9px 0; }
  .settings__row { min-height: 44px; padding: 10px 0; }
  .iconbtn { width: 40px; height: 40px; }

  /* 거리·시간·페이스를 한 줄로. 폰에서 세 줄인 것은 폭이 없어서지 셋이
     따로여서가 아니다 — 페이스는 위 둘에서 나온 값이라 같이 보여야 읽힌다. */
  .rows { flex-direction: row; gap: 24px; border-bottom: 1px solid var(--border); }
  .row {
    flex: 1 1 0; flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 2px;
    min-height: 0; padding: 8px 0 12px; border-bottom: 0;
  }
  /* 값이 라벨 아래로 내려오므로 오른쪽 정렬이 의미를 잃는다 */
  .row .numinput { width: 84px; text-align: left; }

  /* 저장 버튼을 화면 하단에 붙일 이유가 없다. 폰에서 붙인 것은
     소프트 키보드가 버튼을 가리기 때문인데, PC 에는 그 키보드가 없다. */
  .savebar { position: static; padding: 4px 0 0; border-top: 0; background: none; }
}