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

   차례
     1. 토큰      색(밝음 · 어둠) · 여백 · 카드 높이 · 페이지 폭
     2. 바탕      초기화 · 글자 · 공용 작은 것(.hint .unit .code .badge .dot)
     3. 껍데기    .app · 머리줄(.topbar) · 위 막대(.topnav) · 폰 메뉴(.mtop .ctabs .mtab .msheet) ·
                  소셜 본문(.social) · 콘솔 본문(.cmain) · 공간 머리(.chead .ctabs) · 관리자 공간(.adm)
     4. 부품      버튼 · 입력 · 카드 · 훈련 카드 · 태그 · 표 · 쪽 넘김 · 찾는 칸 · ⋯ 메뉴 ·
                  클럽 아이콘 · 아바타 · 브랜드 · 저장 후 시트
     5. 화면      주간 · 첫 화면 · 설정 · 훈련 입력 · 계획 · 월간 · 대회 · 프로그램(템플릿 · 표 · 편집) ·
                  클럽 홈(두 기둥 .sgrid · 허브) · 회원 · 초대 · 클럽 설정 · 내 공간 · 로그인 · 관리자 · 안내 ·
                  넓은 화면의 설정형 화면 폭 · 버튼
     6. 관리 화면의 버튼   5 의 화면별 .btn 규칙을 덮는다 — 그래서 뒤에 있다
     7. 모달      6 을 다시 덮는다 — 그래서 맨 뒤에 있다

   규칙
   - 넓은 화면(900px~) 규칙은 그 부품 바로 아래 @media 에 둔다. 파일 끝에 덧대지 않는다.
   - 같은 선택자를 두 번 정의하지 않는다 — 뒤에 덧댄 규칙이 앞의 것을 조용히 덮어
     접어둔 패널이 펼쳐지고, 태그 글자가 하얗게 사라지고, 커버가 아이콘을 가렸다.
   - 특정도가 같은 규칙끼리는 순서가 승패를 가른다. 6 · 7 절이 뒤에 있는 이유가 그것이다. */

/* ================================================================ 1. 토큰 */

:root {
  /* 연한 단계 (결정 134) — 훈련 카드의 막대 · 태그. 태그 글자(--accent-text · --warn-ink)는
     (--accent-ink 는 이미 「초록 바탕 위 글자」(흰색)로 쓰이고 있었다 — 같은 이름을 다시 정의해 덮여서 태그 글자가 하얗게 사라졌다) 옅은 바탕 위 4.5:1 이상 */
  --accent-soft:    #EEF4F2;
  --accent-mid:     #86BBAE;
  --accent-text:    #276B5F;
  --warn-soft:      #F6EEDF;
  --warn-ink:       #8A5D0B;
  --track:          #EEEEEC;
  --neutral-bar:    #A5A6A2;
  --bg:             #F4F4F2;   /* 결정 146 — 테두리 없이 흰 면이 보이려면 바탕이 조금 어두워야 한다 */
  --surface:        #FFFFFF;
  --surface-sunken: #ECECE9;
  --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-bar:     0 2px 10px rgba(28, 28, 26, .06);   /* 고정 막대 아래 — 지나가는 내용과 갈라 보이게 */
  --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;
}

/* 데스크탑 페이지 폭 — 모두 1280px (mw 2026-10-07)
   화면마다 상한이 달랐다(설정 560 · 안내 720 · 클럽 화면 760 · 폼 880 · 달력 980 · 클럽 1080 · 편집기 1150 · 주간 1200 ·
   관리자 무제한) — 메뉴를 오갈 때 폭이 들쭉날쭉했다. **페이지는 한 폭(--page)**, 바꿀 때는 이 숫자 하나만.
   그대로 두는 것: 입력칸(최대 420px) · 로그인 상자(380px) · 아래에서 올라오는 시트(560px) — 늘어나면 오히려 쓰기 불편하다. */
@media (min-width: 900px) { :root { --page: 1280px; } }

/* 다크는 같은 이름을 다시 정의만 한다. 아래 컴포넌트 CSS는 테마를 모른다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-soft:    #1E3B37;
    --accent-mid:     #4E9A8A;
    --accent-text:    #8FD0C1;
    --warn-soft:      #3A2F1C;
    --warn-ink:       #E2B866;
    --track:          #2C2E33;
    --neutral-bar:    #74756F;
    --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-bar:     0 2px 10px rgba(0, 0, 0, .5);
    --shadow-sheet:   0 -6px 24px rgba(0, 0, 0, .5);
    --scrim:          rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --accent-soft:    #1E3B37;
  --accent-mid:     #4E9A8A;
  --accent-text:    #8FD0C1;
  --warn-soft:      #3A2F1C;
  --warn-ink:       #E2B866;
  --track:          #2C2E33;
  --neutral-bar:    #74756F;
  --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-bar:     0 2px 10px rgba(0, 0, 0, .5);
  --shadow-sheet:   0 -6px 24px rgba(0, 0, 0, .5);
  --scrim:          rgba(0, 0, 0, .5);
}

/* ================================================================ 2. 바탕 */

* { box-sizing: border-box; }

/* HTML 의 hidden 속성은 UA 스타일시트의 display:none 이라
   .chips{display:flex} 같은 저자 규칙에 진다. 전역에서 못 박는다.
   (!important 라 어떤 display 규칙도 이긴다 — 부품마다 [hidden] 규칙을 따로 둘 필요가 없다) */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Pretendard (mw 2026-10-07) — 우리 서버에 둔다(static/fonts, SIL OFL). 잘게 나눈 파일이라 화면에 나온 글자 조각만 받는다.
     못 받으면 기기 글꼴로 — 글자가 안 보이는 일은 없다(font-display: swap). */
  font-family: "Pretendard Variable", Pretendard, 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;
}
/* 위 막대의 배경을 화면 끝까지 그리는 ::before 가 가로 스크롤을 만들지 않게 */
@media (min-width: 900px) { body { overflow-x: clip; } }
body.noscroll { overflow: hidden; }

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; } }
input, select, textarea, button { font-family: inherit; }

.hint { font-weight: 400; color: var(--text-muted); }
.unit { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.ok { color: var(--success); font-weight: 600; } .bad { color: var(--danger); font-weight: 600; } .unknown { color: var(--text-secondary); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; line-height: 1; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--danger); flex: none; }

/* ================================================================ 3. 껍데기 */

/* ---------------------------------------------------------------- .app

   ⚠ .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; }
/* 관리 콘솔은 화면 전체 폭을 쓴다 (mw) — 표가 넓을수록 한눈에 보인다 */
.app.app--wide { max-width: none; }
@media (min-width: 900px) { .app, .app.app--wide { max-width: var(--page); } }
/* 관리자 공간은 **진짜 화면 전체** (2026-10-08 mw) — 사이드바 + 표가 창을 다 쓴다. 본문 폭(--page)은 앱 · 클럽의 것 */
@media (min-width: 900px) { .app.app--admin { max-width: none; } }

/* ---------------------------------------------------------------- 머리줄 */

.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; white-space: nowrap; }
/* 달력에서 들어온 주간의 뒤로 ← (결정 127) — 이전 주 ‹ 와 떨어뜨린다 */
.backlink { margin-right: 4px; width: auto; padding: 0 10px 0 6px; gap: 2px; font-size: 14px; font-weight: 600; color: var(--text); }   /* 「← 10월」 — 글자가 붙는다 */

.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); }

/* 폰 머리줄은 한 줄이다. 두 자리 달(10/12 – 10/18)에 ← 까지 붙으면 375px 를 넘어
   날짜가 두 줄로 꺾였다 — 아이콘은 터치 최소(44px)로, 날짜 글자와 여백을 조금 줄인다 */
@media (max-width: 599px) {
  .topbar { padding: 12px 8px; gap: 4px; }
  .weeknav { gap: 0; }
  .topbar .iconbtn { width: 44px; height: 44px; }
  .topbar .backlink { width: auto; white-space: nowrap; }   /* 「← 10월」 — 44px 로 좁히면 글자가 두 줄로 꺾인다 */
  .weeknav__label { font-size: 17px; padding: 0 4px; }
}
@media (min-width: 900px) {
  .topbar { padding: 24px; }
  /* 상단바도 본문 열에 맞춘다. 상단바만 넓으면 뒤로 버튼이 화면 맨 왼쪽에 혼자 떨어져,
     무엇으로 돌아가는 버튼인지 안 보인다. 폭은 페이지 폭(--page)을 따른다.
     (.topbar--form · --doc 은 폭이 페이지 폭 하나로 모이면서 할 일이 없어져 지웠다) */
  .topbar--narrow {
    width: 100%; margin-left: auto; margin-right: auto;
    padding-left: 8px; padding-right: 8px;   /* 아이콘 상자(40px)의 여백만큼 당긴다 */
  }
  .iconbtn { width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------- 위 막대 (PC)

   상단 헤더 — 스트라바처럼 (2026-10-07 mw 「추천안으로」): **배경 · 아래 선은 화면 끝까지, 내용은 본문 폭(1280)에 맞춘다.**
   헤더 칸은 .app(1280) 안에 그대로 두고 좌우 여백을 본문(.social)과 같은 24px 로 — 로고 왼쪽 끝 · 아바타 오른쪽 끝이
   본문 양 끝과 같은 세로선에 선다. 배경과 선만 ::before 로 화면 폭까지 그린다(100vw 로 칸을 늘리면 스크롤바 폭만큼 어긋난다).
   페이스북식(양 끝 고정 + 가운데 메뉴)은 목적지가 4~5 개일 때 맞다 — 우리는 내 기록 · 클럽 둘이다. */
.topnav { display: none; }
/* 하위 화면의 「← 제목」 이 로고 자리에 (2026-10-08). 본문 맨 위의 같은 줄은 PC 에서 숨긴다 */
.topnav__bar .topbar { padding: 0; gap: 2px; margin: 0; width: auto; }
.topnav__bar .iconbtn { width: 36px; height: 36px; }
.topnav__bar .weeknav__label { font-size: 16px; font-weight: 600; padding: 0 4px; }
.topnav__bar .topbar__tools { display: none; }
@media (min-width: 900px) { .social--page > .topbar { display: none; } }
/* 내 기록 ▾ · 클럽 ▾ 드롭다운 (2026-10-08) — 🔔 판과 같은 생김새 */
.tnav { position: relative; }
.tnav > summary { list-style: none; cursor: pointer; }
.tnav > summary::-webkit-details-marker { display: none; }
.tnav__chev { opacity: .7; margin-left: -2px; }
.tnav__menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 200px; z-index: 40; padding: 6px; display: flex; flex-direction: column;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-fab); }
.tnav__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--text); white-space: nowrap; }
.tnav__item:hover { background: var(--surface-sunken); }
.tnav__item[aria-current="page"] { color: var(--accent); font-weight: 600; background: var(--accent-weak); }
.tnav__item--dim { color: var(--text-secondary); font-size: 13px; }
.tnav__sep { height: 1px; background: var(--border); margin: 6px 4px; }
/* 상단 관리자 아이콘 */
.topnav__icon { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.topnav__icon:hover { background: var(--surface-sunken); color: var(--text); }
@media (min-width: 900px) {
  .topnav { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 24px; background: none;
    border-bottom: 0; position: sticky; top: 0; z-index: 30; isolation: isolate; }
  .topnav::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
    background: var(--surface); border-bottom: 1px solid var(--border); z-index: -1; }
  .topnav__logo { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--text); text-decoration: none; }
  .topnav__links { display: flex; gap: 4px; margin-left: 8px; }
  .topnav__link { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; color: var(--text-secondary); text-decoration: none; }
  .topnav__link[aria-current="page"] { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
  .topnav__gap { margin-left: auto; }
  .topnav__search { margin-left: auto; height: 38px; width: 280px; border-radius: 999px; background: var(--surface-sunken);
    display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--text-secondary); }
  .topnav__search input { border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); outline: none; flex: 1; min-width: 0; }
  .topnav__cta { width: 36px; height: 36px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-fab); }
  .topnav__cta:hover { filter: brightness(1.08); }
  .topnav__me { list-style: none; cursor: pointer; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--border-strong); }
  .topnav__me::-webkit-details-marker { display: none; }
  .tnav__menu--right { left: auto; right: 0; }
  .tnav__who { display: flex; flex-direction: column; padding: 8px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 14px; }
  .tnav__who small { font-size: 12px; color: var(--text-secondary); }
  .tnav__form { margin: 0; display: contents; }
  .tnav__item--btn { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
  .topnav__me { width: 36px; height: 36px; border-radius: 999px; background-color: var(--accent); color: #fff;   /* 색은 avatar--* 가 덮는다(그 사람 색) */
    display: flex; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; }
}

/* ---------------------------------------------------------------- 🔔 알림 (결정 139, 2026-10-08)
   <details> 하나 — PC 위 막대에서는 단추 아래로 펼쳐지는 판, 폰 위 막대에서는 막대 아래 가로로 꽉 찬 판.
   PC 단추는 .topnav__icon(36px) · 폰 단추는 .mtop__icon--round(40px) 와 같은 생김새. */
.bell { position: relative; }
.bell__btn { list-style: none; cursor: pointer; position: relative; width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.bell__btn::-webkit-details-marker { display: none; }
.bell__btn:hover, .bell[open] .bell__btn { background: var(--surface-sunken); color: var(--text); }
.bell__badge { position: absolute; top: -1px; right: -3px; min-width: 12px; height: 16px; padding: 0 3px; font-size: 10px;
  border: 2px solid var(--surface); }
.bell__panel { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: calc(100vw - 24px); z-index: 40;
  padding: 6px 0; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-fab); }
.bell__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 6px 16px; }
.bell__head b { font-size: 15px; }
.bell__head small { font-size: 12px; color: var(--text-secondary); margin-left: 6px; }
.bell__all { margin: 0; }
.bell__allbtn { border: 0; background: none; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; padding: 6px 4px; border-radius: 8px; }
.bell__allbtn:hover { background: var(--surface-sunken); }
.bell__list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.bell__list form { margin: 0; }
/* 항목은 단추(누르면 읽음 처리 뒤 이동) — 링크처럼 보이게 */
.bell__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; color: var(--text); font: inherit; font-size: 14px; line-height: 1.4;
  text-align: left; background: none; border: 0; cursor: pointer; }
.bell__item:hover { background: var(--surface-sunken); }
.bell__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex: none; }
.bell__item--invite .bell__dot, .bell__item--asked .bell__dot { background: var(--danger); }
.bell__item--missed .bell__dot { background: var(--warn); }
.bell__text { flex: 1; min-width: 0; }
.bell__item small { font-size: 12px; color: var(--text-secondary); flex: none; }
.bell__empty { margin: 0; padding: 14px 16px 18px; font-size: 14px; color: var(--text-secondary); }
.bell--phone .bell__btn { width: 40px; height: 40px; background: var(--surface-sunken); color: var(--text); }
.bell--phone .bell__panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; }

/* ---------------------------------------------------------------- 폰 메뉴 (결정 128 · 129 · 2026-10-08 상단 고정형)
   위 막대(.mtop, 고정) · 공간 탭(.ctabs, 위 막대 아래 sticky) · 아래 탭 바(.mtab, 고정) · 그 탭의 주요 행동 FAB.
   PC(900px~)에서는 .mtop · .mtab 을 감추고 위 막대(.topnav)를 쓴다.
   시트 목록은 _menu_sheet.html 의 club_rows 가 만든다(__club · __name · __meta …). */
.msheet { position: fixed; inset: 0; z-index: 50; }
.msheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.msheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto;
  background: var(--surface); border-radius: 16px 16px 0 0; padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,.2); }
.msheet__q { margin: 8px 16px 4px; width: calc(100% - 32px); }
.msheet__title { font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 14px 20px 6px; }
.msheet__name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msheet__meta { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-secondary); font-weight: 400; }
.msheet__sep { height: 1px; background: var(--border); margin: 6px 0; }
.msheet__empty { padding: 8px 20px; color: var(--text-secondary); font-size: 14px; }
/* 메뉴 구성 (2026-10-08) — 머리에 나(→설정), 묶음마다 작은 머리말 + 칩 줄, 내 클럽은 줄 목록(다섯 넘으면 접음), 맨 아래 계정 */
.msheet__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px 20px; }
.msheet__who { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.msheet__who b { font-size: 16px; }
.msheet__av { width: 32px !important; height: 32px !important; font-size: 14px !important; background-color: var(--accent) !important; color: var(--accent-ink) !important; }   /* 축약형 !important 는 올린 사진(인라인 background-image)을 지운다 */
.msheet__row { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 20px 10px; }
.msheet__chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; text-decoration: none; }
.msheet__chip--on { border-color: var(--accent-mid); background: var(--accent-soft); color: var(--accent-text); }
.msheet__chip--dim { color: var(--text-secondary); }
.msheet__row--acct { padding-top: 8px; }
.msheet__group { font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 8px 28px 2px; }
.msheet__group[hidden] { display: none; }
.msheet__club { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 20px 0 28px;
  color: var(--text); text-decoration: none; font-size: 15px; }
.msheet__club[aria-current="page"] { color: var(--accent); font-weight: 600; }
.msheet__club[hidden] { display: none; }
.msheet__more { display: block; width: 100%; text-align: left; padding: 8px 28px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--accent-text); cursor: pointer; }
/* 위 막대 — 고정. 스트라바 메인처럼 로고 가운데 · 양끝 동그란 아이콘(왼쪽 찾기(클럽) · 오른쪽 ≡ 메뉴) */
.mtop { position: fixed; top: 0; left: 0; right: 0; z-index: 35; display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 10px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-bar); }   /* 지나가는 내용과 갈라 보이게 — 스트라바처럼 옅은 그림자 (mw 캡처: 숫자가 막대 밑에 붙어 한 덩어리로 보였다) */
.mtop__logo { display: inline-flex; }
.mtop__pick { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 0; padding: 0 4px;
  background: none; border: 0; color: var(--text); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.mtop__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtop__title--plain { font-size: 17px; font-weight: 700; }
.mtop__gap { flex: 1; }
.mtop__icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); border: 0; background: none; cursor: pointer; padding: 0; }
.mtop__icon--round { border-radius: 999px; background: var(--surface-sunken); }
/* 공간 탭(.ctabs)은 PC 전용 — 폰은 아래 탭 바가 맡는다 */
.social--mobile .ctabs { display: flex; }   /* 결정 146 B: 아래 막대가 어디서나 같은 다섯이라 클럽 안 탭은 머리 아래에 */
/* 아래 탭 바 — 떠 있는 알약 (스트라바). 켜진 탭은 연한 초록 알약, 가운데 「기록」 은 큰 초록 원 */
.mtab { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 35; display: flex; align-items: stretch;
  height: 64px; padding: 6px; border-radius: 999px;
  /* 알약 상자는 반투명 유리 (2026-10-08 mw: 「완전 투명 말고 투명도를」) — 지나가는 내용이 비치되 글자는 읽힌다 */
  background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.mtab__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--text-secondary); text-decoration: none; }
.mtab__item[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); font-weight: 700; }
.mtab__item .badge { font-style: normal; vertical-align: 1px; }
.mtab__me { width: 24px; height: 24px; border-radius: 999px; background: var(--surface-sunken); color: var(--text); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.mtab__item--center { color: var(--text); }
.mtab__big { width: 40px; height: 40px; margin-top: -14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-fab); }
/* 이번 주 카드 (활동 탭 맨 위, 스트라바 Weekly Snapshot) — 폰에서만; PC 는 머리에 같은 숫자가 있다 */
.snap { display: none; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 0; }
.snap__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.snap__head b { font-size: 15px; }
.snap__head a { font-size: 13px; }
.snap__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.snap__row small { display: block; font-size: 12px; color: var(--text-secondary); }
.snap__row b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.snap__row i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
@media (min-width: 900px) {
  .mtop, .mtab, .msheet { display: none !important; }
  .social--mobile .ctabs { display: flex; }
}
/* 하위 화면(설정 · 입력 · 계획 …)의 제목줄(.topbar)이 폰에서는 **곧 위 막대** — ← 제목 … 🔔 ≡ 한 줄 (2026-10-08 mw: "헤더는 모두 포함").
   두 줄로 쌓지 않는다(112px). 제목은 ← 옆에 왼쪽 정렬 — 오른쪽 도구 둘 때문에 가운데 맞춤이 어긋나 보였다 */
.topbar__tools { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
@media (max-width: 899px) {
  .social--page > .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 35; height: 56px; box-sizing: border-box; padding: 0 8px; gap: 4px;
    background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-bar); }
  .social--page > .topbar .iconbtn { width: 44px; height: 44px; }
  .social--page > .topbar .weeknav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 17px; padding: 0 4px; }
}
@media (min-width: 900px) {
  .topbar__tools { width: 48px; }   /* PC 는 빈 자리 — 제목이 가운데 */
  .topbar__tools > * { display: none !important; }
}
/* 활동 탭의 「N월 요약」 — 상자 없이(훈련 카드와 헷갈렸다, mw) 아래 선 하나. 위는 이번 달 숫자, 아래는 최근 8주 막대(PC 왼쪽 카드처럼) */
.snap--flat { background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 2px 4px 14px; }
.snap--flat .snap__head b { font-size: 16px; }
.snap .pbars { margin-top: 12px; }
@media (max-width: 899px) { .snap { display: block; } }
/* 폰은 좌우 꽉 (결정 146) — 면이 곧 화면 폭, 모서리 없음, 면 사이는 바탕색 띠. 안쪽 여백은 16 */
@media (max-width: 899px) {
  .social { padding-left: 0; padding-right: 0; gap: 8px; }
  .social .card, .social .panel, .social .snap, .social .ccard { border-radius: 0; border-left: 0; border-right: 0; }
  .social > .card, .social .card.sett__card, .social .card.pcard, .social .card.prof__card, .social .card.feed__post, .social .card.inv__card,
  .social .body__site { padding-left: 16px; padding-right: 16px; }
  .social .sett--me, .social .body, .social .cardpage, .social .prof { padding-left: 0; padding-right: 0; }
  .social .snap--flat { padding-left: 16px; padding-right: 16px; }
  .social .pempty { border-radius: 0; }
}

/* ---------------------------------------------------------------- 소셜 본문 (결정 133, PC 기준)
   위 막대 · 가운데 본문(페이지 폭) · 카드. 왼쪽 관리 메뉴는 없다 — 클럽 목록은 클럽 홈의 카드가 맡는다.
   폰은 위 막대(.mtop) · 시트 · 아래 탭 바(.mtab) · 한 줄로 쌓인 카드. */
.social { width: 100%; box-sizing: border-box; padding: 0 12px 96px; display: flex; flex-direction: column; gap: 14px; }
/* 폰: 고정된 위 막대(56px)와 떠 있는 탭 바 뒤에 내용이 숨지 않게 위 · 아래를 띄운다.
   **반드시 위 .social 뒤에** — 위 규칙의 padding 축약형이 top · bottom 을 0 으로 되돌린다. 앞 절에 두었다가 덮여서
   첫 내용이 막대 밑에 들어갔다(2026-10-08 mw 캡처 「상단 활동 목록이 헤더에 가림」). */
.social--mobile { padding-top: 68px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }   /* 56 막대 + 12 숨 — 첫 카드가 막대에 붙어 있었다(mw) */
.social__title { font-size: 22px; font-weight: 700; margin: 8px 4px 0; }
.social__title:empty { display: none; }
.social__main { padding: 0 !important; }
/* 하위 화면(설정 · 입력 · 읽기) — 위 막대 아래 본문. 폰은 지금 그대로 */
.social.social--page { padding: 0; gap: 0; }
/* 폰: 제목줄이 고정 막대가 됐다(2026-10-08) — 내용을 그만큼 내린다. **반드시 위 축약형 뒤에**(앞 절에 뒀더니 덮여 첫 줄이 막대 밑에 숨었다) */
.social.social--page { padding-top: 68px; }   /* 56 막대 + 12 숨 (mw: 「헤더 아래 마진」) */
@media (min-width: 900px) {
  .social { max-width: var(--page); margin: 0 auto; padding: 16px 24px 48px; }   /* 위 막대 아래 숨 (2026-10-08 mw: 「주간 달력 대회 상단 마진」) */
  .social__title { margin: 24px 0 0; font-size: 26px; }
  .social.social--page { padding: 8px 24px 48px; }
}

/* ---------------------------------------------------------------- 콘솔 본문 (결정 126)
   같은 주소 · 같은 HTML — 화면을 둘로 만들지 않는다(결정 60 · 87). 색은 앱 토큰 그대로. */
.console { display: flex; flex-direction: column; min-height: 100vh; width: 100%; }
.cmain { padding: 16px 16px 40px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cstack { display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
@media (max-width: 899px) {
  .cmain { padding: 4px 0 96px; gap: 8px; }   /* 좌우 꽉 (결정 146) · FAB 가 마지막 줄을 가리지 않게 */
  .cmain .card, .cmain .panel, .cmain .ccard { border-radius: 0; border-left: 0; border-right: 0; }
  .cmain > .card, .cmain .card.inv__card, .cmain .sgrid > .card, .cmain .sgrid__main > .card, .cmain .sgrid__side > .card { padding-left: 16px; padding-right: 16px; }
  .cmain .hub, .cmain .ctools, .cmain .cstack > *, .cmain .feed__top, .cmain .sgrid__main > .pager { padding-left: 16px; padding-right: 16px; }
  .cmain .cards, .cmain .mem { border-radius: 0; }
  .cmain .cards { padding: 0 16px; }
}
@media (min-width: 900px) {
  .console { flex-direction: row; }
  .cmain { flex: 1; padding: 24px 32px 48px; }
  .cstack { max-width: none; }
}

/* ---------------------------------------------------------------- 공간 머리 (클럽 · 내 공간, 결정 133)
   커버는 클럽 아이콘 색을 옅게. 다크 모드에서도 맞게 투명도로.
   PC 는 홈 · 프로그램 · 사람 · 초대 모두 같은 큰 머리(탭 줄이 제자리). 폰은 좁아서 홈만 크게, 나머지 탭(.chead--tab)은
   커버 · 얼굴 · 큰 버튼을 감추고 아이콘 · 이름 · 한 줄만 — 내용이 먼저 보이게. 설정 톱니는 남긴다. */
.chead { border: 1px solid var(--border); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--surface); overflow: hidden; }
/* 탭은 머리 바로 아래 형제 — 머리의 아래 모서리 · 테두리를 이어받아 한 카드처럼 보인다.
   .social 이 자식마다 14px 띄우므로(gap) 그만큼 당겨 붙인다 — 안 그러면 머리와 탭 사이에 틈이 생긴다 */
.ctabs { background: var(--surface); border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 0 0 18px 18px; margin-top: -14px; }
.chead__cover { height: 96px; position: relative; overflow: hidden; }
/* 커버가 position 을 가지면 뒤에 오는 아이콘 · 이름보다 위에 칠해진다 — 반투명 색 커버에선 비쳐 몰랐고,
   회색(불투명) 커버에서 아이콘이 잘렸다(운영, 2026-10-07). 몸통을 커버 위로 올린다 */
.chead__body { padding: 0 18px 18px; margin-top: -32px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.chead__icon { text-decoration: none; }
.chead__icon .clubicon { border: 4px solid var(--surface); box-sizing: content-box; }
.chead__icon .clubicon--xl { border-width: 6px; }
.chead__text { display: flex; flex-direction: column; gap: 4px; }
.chead__name { font-size: 22px; font-weight: 700; }
.chead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--text-secondary); }
.chead__acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* 클럽 머리의 할 일 — 폰에서도 한 줄(넘치면 줄바꿈), 같은 크기 */
.chead__acts .btn { width: auto; min-height: 40px; padding: 0 16px; flex: 0 0 auto !important; }
/* 클럽 설정의 미리보기 표시 */
.chead__preview { display: inline-block; align-self: flex-start; width: fit-content; margin-top: 2px; font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink); }
/* 클럽 커버 — 최근 프로그램 7일을 가로 막대로. 막대 색은 클럽 아이콘 색을 옅게.
   오른쪽에서 왼쪽으로 — 아이콘이 커버 왼쪽 아래에 걸리므로 막대는 오른쪽에 둔다 */
.cover__bars { position: absolute; right: 0; width: 52%; top: 12px; bottom: 12px; display: flex; flex-direction: column;
  justify-content: space-between; }
.cover__bars i { display: block; height: 8px; border-radius: 4px 0 0 4px; margin-left: auto; background: currentColor; opacity: .32; }
.clubcover--green  { background: rgba(46,125,111,.16); color: #2E7D6F; }
.clubcover--teal   { background: rgba(42,140,156,.16); color: #2A8C9C; }
.clubcover--blue   { background: rgba(59,111,212,.16); color: #3B6FD4; }
.clubcover--purple { background: rgba(122,85,199,.16); color: #7A55C7; }
.clubcover--pink   { background: rgba(194,76,136,.16); color: #C24C88; }
.clubcover--red    { background: rgba(200,70,60,.16);  color: #C8463C; }
.clubcover--orange { background: rgba(208,122,31,.18); color: #D07A1F; }
.clubcover--gray   { background: var(--surface-sunken); color: #6B6E73; }

.ctabs { display: flex; gap: 4px; padding: 0 12px; overflow-x: auto; }
.ctabs__tab { flex: 1 0 auto; text-align: center; padding: 12px 12px; font-size: 15px; color: var(--text-secondary);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 4px;
  align-items: center; justify-content: center; }
.ctabs__tab[aria-current="page"] { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }

/* 폰 홈의 소개 한 줄 · 둥근 버튼 줄 — 기본은 숨김(PC 는 소개 카드 · 머리 버튼 · 탭). **아래 폰 규칙보다 앞에** — 뒤에 뒀다가 폰 규칙을 덮어 줄이 안 보였다 */
.chead__desc, .cround { display: none; }
@media (max-width: 899px) {
  /* 위 막대에 바로 붙는다. overflow: hidden 을 풀어야 안의 탭이 sticky 로 붙는다(커버 모서리는 커버 자신이 자른다) */
  .social--mobile .chead { border-radius: 0; border-top: 0; border-left: 0; border-right: 0; margin: 0; }
  .social--mobile .ctabs { border-radius: 0; border-left: 0; border-right: 0; margin: 0; }
  .chead .clubicon--xl { width: 72px; height: 72px; font-size: 32px; border-radius: 18px; }
  .chead--tab .chead__cover, .chead--tab .chead__faces, .chead--tab .chead__big, .chead--tab .pline { display: none; }
  .chead--tab .chead__body { margin-top: 0; padding: 14px 16px 10px; flex-direction: row; align-items: center; gap: 12px; }
  .chead--tab .clubicon--xl { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; border-width: 0; }
  .chead--tab .chead__text { flex: 1; min-width: 0; }
  .chead--tab .chead__name { font-size: 18px; }
  .chead--tab .chead__acts { flex-wrap: nowrap; }
  /* 폰 클럽 홈 — 작은 머리(아이콘 · 이름 · 메타 · 소개) + 둥근 동작 버튼 가로 줄 (2026-10-08 mw, 스트라바 클럽 참조). 커버 · 얼굴 · 큰 버튼은 숨긴다 */
  .chead--home .chead__cover, .chead--home .chead__faces, .chead--home .chead__acts { display: none; }
  .chead--home .chead__body { margin-top: 0; padding: 14px 16px 4px; flex-direction: row; align-items: flex-start; gap: 12px; }
  .chead--home .clubicon--xl { width: 56px; height: 56px; font-size: 26px; border-radius: 14px; border-width: 0; }
  .chead--home .chead__text { flex: 1; min-width: 0; }
  .chead--home .chead__name { font-size: 20px; }
  .chead__desc { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 2px; white-space: pre-line; }
  .cround { display: flex; gap: 12px; overflow-x: auto; padding: 10px 16px 14px; scrollbar-width: none; }
  .cround::-webkit-scrollbar { display: none; }
  .cround form { display: contents; }
  .cround__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; width: 64px; font: inherit; font-size: 12px;
    color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
  .cround__ic { width: 56px; height: 56px; border-radius: 999px; background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; }
  .cround__btn--primary .cround__ic { background: var(--accent); color: var(--accent-ink); }
}
@media (min-width: 900px) {
  /* 넓은 커버 + 큰 아이콘. 위 막대 아래 16px 띄운 뒤로는(2026-10-08) 머리가 **한 카드**다 — 위 모서리 둥글게 · 테두리.
     아래는 탭 줄(.ctabs)이 이어받아 한 덩어리(아래 모서리는 탭 줄의 것). 전엔 머리 아래가 둥글고 그 밑에 탭 카드가 또 있어 두 조각으로 보였다(mw) */
  .chead { border-top: 1px solid var(--border); border-radius: 18px 18px 0 0; }
  .chead__cover { height: 190px; }
  .chead__body { flex-direction: row; align-items: flex-end; margin-top: -56px; padding: 0 28px 4px; gap: 20px; }
  .chead__text { flex: 1; padding-bottom: 4px; }
  .chead__name { font-size: 30px; }
  .chead__acts { flex-wrap: nowrap; padding-bottom: 4px; }
  .chead__acts .btn { display: inline-flex; align-items: center; gap: 6px; }
  .cover__bars { width: 46%; top: 22px; bottom: 22px; }
  .cover__bars i { height: 14px; border-radius: 7px 0 0 7px; }
  .ctabs { padding: 0 20px; justify-content: flex-start; }
  .ctabs__tab { flex: 0 0 auto; padding: 12px 16px; }
  .ctabs__tab[aria-current="page"] { border-bottom-width: 3px; }
}

/* ---------------------------------------------------------------- 관리자 공간 (결정 133)
   앱 · 클럽과 **다른 껍데기** — 어두운 사이드바(PC) · 어두운 머리 + 가로 탭(폰). 라이트 · 다크 모드 어느 쪽이든
   사이드바는 어둡다(운영 화면이라는 표시). 본문은 앱 토큰 그대로. */
.adm { --adm-bg: #1C1C1A; --adm-ink: #EDEDEA; --adm-dim: #A5A6A2; --adm-tag: #D9A441;
  display: flex; flex-direction: column; min-height: 100dvh; width: 100%; }
.adm__tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--adm-tag); color: #1C1C1A; }
.adm__top { display: flex; align-items: center; gap: 8px; padding: 8px 8px 0; background: var(--adm-bg); color: var(--adm-ink); }
.adm__top .iconbtn { color: var(--adm-ink); }
/* 폰 머리의 관리자 아바타 — 누르면 내 정보 수정 */
.adm__meavatar { margin-left: auto; width: 34px; height: 34px; margin-right: 6px; border-radius: 999px; background: #2E7D6F;
  color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.adm__avatar { width: 38px; height: 38px; border-radius: 999px; background: #2E7D6F; color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.adm__tabs { display: flex; gap: 2px; overflow-x: auto; background: var(--adm-bg); padding: 0 8px; }
.adm__tab { padding: 12px 10px; font-size: 14px; color: var(--adm-dim); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 4px; }
.adm__tab[aria-current="page"] { color: #fff; font-weight: 600; border-bottom-color: var(--adm-tag); }
.adm__side { display: none; }
.adm__main { padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 16px; min-width: 0; background: var(--bg); flex: 1; }
.adm__title { font-size: 22px; font-weight: 700; margin: 0; }
.adm__new { font-size: 11px; color: var(--adm-tag); margin-left: auto; }
@media (min-width: 900px) {
  .adm { flex-direction: row; }
  .adm__top, .adm__tabs { display: none; }
  .adm__side { display: flex; flex-direction: column; gap: 2px; flex: 0 0 240px; background: var(--adm-bg); color: var(--adm-ink);
    padding: 20px 12px; position: sticky; top: 0; align-self: flex-start; min-height: 100dvh; box-sizing: border-box; }
  .adm__brand { display: flex; align-items: center; gap: 8px; padding: 4px 12px 16px; font-size: 16px; }
  .adm__me { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 14px; border-radius: 12px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--adm-ink); text-decoration: none; }
  .adm__me[aria-current="page"] { border-color: var(--adm-tag); }
  .adm__who { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 14px; }
  .adm__who span { font-size: 12px; color: var(--adm-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .adm__edit { font-size: 12px; color: var(--adm-tag); }
  .adm__menu { display: flex; flex-direction: column; gap: 2px; }
  .adm__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--adm-dim);
    text-decoration: none; font-size: 14px; }
  .adm__item:hover { background: rgba(255,255,255,.06); color: var(--adm-ink); }
  .adm__item[aria-current="page"] { background: rgba(255,255,255,.10); color: #fff; font-weight: 600; }
  .adm__item--sub { font-size: 13px; padding: 9px 12px; }
  .adm__foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.10); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
  .adm__main { padding: 28px 40px 48px; }
  .adm__main > * { max-width: 1400px; }   /* 글줄 · 폼은 너무 넓어지지 않게, 표는 1400 안에서 */
}

/* ================================================================ 4. 부품 */

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

   세 가지뿐이다. 넷째를 만들지 않는다 — 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; }
/* 클럽 · 관리 화면의 크기 · 색 변형 */
.btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; width: auto; }   /* !important 를 뺐다 — 뒤의 .sett--me · 관리 화면 크기 조정을 다 죽이고 있었다(리뷰 B11) */
.btn--weak { background: var(--accent-weak); color: var(--accent); border-color: transparent; font-weight: 600; }
.btn--soft { background: var(--surface-sunken); color: var(--text); border-color: transparent; font-weight: 500; }
.btn--icon { padding: 0 !important; width: 40px !important; }
/* 복사됨 — 잠깐 초록으로 */
.is-copied { color: var(--accent-text) !important; border-color: var(--accent-mid) !important; }

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

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

.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 (max-width: 899px) { .fab { display: none; } }   /* 폰은 아래 탭 바 가운데 「기록」 이 같은 일 — 「나」 탭 위에 겹쳤다(리뷰 A7) */
@media (min-width: 600px) { .fab { right: calc(50% - 280px + 20px); } }
@media (min-width: 900px) { .fab { right: calc(50% - 600px + 20px); } }

@media (min-width: 900px) {
  /* 저장 버튼을 화면 하단에 붙일 이유가 없다. 폰에서 붙인 것은
     소프트 키보드가 버튼을 가리기 때문인데, PC 에는 그 키보드가 없다. */
  .savebar { position: static; padding: 4px 0 0; border-top: 0; background: none; }
  /* 폼의 동작 줄은 다르다. 다른 버튼들이 132px 왼쪽 정렬인데 이 줄만
     526px 로 늘어나 있었다. 같은 폭으로 맞춰 왼쪽에 붙인다. */
  .formactions { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- 입력 · 폼 */

.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가 입력 시 화면을 확대한다. 18px 로 여유를 둔다. */
.numinput {
  width: 120px; text-align: right; font: inherit; font-size: 18px; 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); }
/* 시간은 시 + 분 + 초 세 칸 (결정 116). 한 줄에 들어가게 좁힌다. */
.numinput.numinput--hr { width: 28px; }
.numinput.numinput--min { width: 36px; }
.numinput.numinput--sec { width: 36px; }

.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;
}

/* 입력칸 크기 (mw 2026-10-07: "input box 를 줄여줘, 사이트 모두")
   폰: 높이 · 여백만 줄인다 — **글자는 16px 를 지킨다**(그보다 작으면 아이폰이 입력할 때 화면을 확대한다).
   PC: 높이 · 글자 모두 줄인다. 손가락 최소(40px)는 폰에서 지킨다.
   .gate__input 은 .memo 보다 앞에 둔다 — 둘을 함께 단 칸(memo gate__input)에서 .memo 의 여백이 이긴다. */
/* 최소 탭 크기 44px 를 여기서도 지킨다 — 땀 묻은 손으로 누른다 */
.gate__input { min-height: 42px; padding: 8px 12px; font-size: 16px; border-radius: 9px; }
.memo {
  width: 100%; min-height: 112px; 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: 9px; padding: 10px 12px;
}
.memo::placeholder { color: var(--text-muted); }
/* 한 줄만 받는 칸. 계획 미완료의 덧붙이기와 같은 높이다. */
.memo--short { min-height: 44px; }
.memo.gate__input { min-height: 42px; }
/* 초대 코드 (결정 121) — 사람이 보고 옮겨 적는다. 글자가 섞이지 않게 고정폭으로 띄운다.
   .memo 뒤에 둔다 — 코드 칸(memo gate__input code)에서 .memo 의 font: inherit 를 이겨야 한다. */
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }

/* 작은 입력칸 — 프로그램 편집에서 시작해 검색 · 시트 · 관리 표 어디서나 쓴다.
   16px 미만이면 iOS 가 입력할 때 화면을 확대한다. 찾는 칸(.combo__btn)보다 앞에 둔다 — 그 화살표 배경을 덮지 않게 */
.wk__in { font: inherit; font-size: 16px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 10px; min-height: 40px; min-width: 0; box-sizing: border-box; }

/* 가져오기의 '내용 맞추기' 체크 (결정 103). 되돌리기 어려운 선택이라
   글씨를 작게 숨기지 않는다 — 눌러야 일어나는 일은 보여야 한다. */
.chk { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: 14px; }
.chk input { width: 20px; height: 20px; accent-color: var(--accent); }

/* 날씨 한 줄 (결정 102). 폼 맨 위에 조용히 앉는다 — 입력칸이 아니라 알림이라
   테두리를 주지 않는다. 못 가져오면 [hidden] 이라 자리도 안 차지한다. */
.wx { font-size: 13px; color: var(--text-secondary); padding: 2px 4px 10px; }

.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 (min-width: 900px) {
  /* -- 폼은 두 칸이다 (결정 80) ---------------------------------------

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

     왼쪽은 고르고 적는 것(날짜·시간대·유형·거리·시간·RPE),
     오른쪽은 긴 글(메모·내용·사유). 저장바는 아래 전체 폭.
     **HTML 순서를 안 바꾸므로 폰은 그대로다.**

     width:100% 를 빼면 안 된다 — 위 .app 주석 참고. */
  .form {
    width: 100%; margin-left: auto; margin-right: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px; align-content: start; padding-bottom: 8px;
  }
  .form__col { gap: 18px; }
  /* 안내·계획 원문·저장바는 어느 한쪽에 딸린 것이 아니다 */
  .form > .notice, .form > .planref, .form > .savebar, .form > .wx { grid-column: 1 / -1; }   /* 날씨 줄도 — 보이면 첫 칸을 차지해 두 기둥이 한 칸씩 밀렸다 */

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

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

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

     낮추되 32px 아래로는 안 내린다. 노트북 트랙패드는 마우스보다 부정확하고,
     PC 라고 전부 마우스인 것도 아니다. */
  .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; }

  /* 거리·시간·페이스를 한 줄로. 폰에서 세 줄인 것은 폭이 없어서지 셋이
     따로여서가 아니다 — 페이스는 위 둘에서 나온 값이라 같이 보여야 읽힌다. */
  .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; }
  /* 시·분·초 세 칸 (결정 116). 84px 를 물려받으면 `1      시` 처럼 숫자가 단위에서
     떨어져 빈칸 셋이 한 줄에 흩어져 보였다. 칸을 숫자 폭으로 좁히고 **오른쪽 정렬로
     숫자를 단위에 붙인다** — `1시 23분 18초` 가 시계 표시처럼 한 덩어리로 읽힌다.
     덩어리 사이는 단위 뒤에 여백을 둬서 가른다. */
  .row .numinput.numinput--hr { width: 24px; text-align: right; }
  .row .numinput.numinput--min { width: 36px; text-align: right; }
  .row .numinput.numinput--sec { width: 28px; text-align: right; }
  .row .unit + .numinput { margin-left: 6px; }

  /* 한 줄 입력이 화면 끝까지 갈 이유가 없다 */
  .gate__input, .memo.gate__input { min-height: 36px; padding: 6px 11px; font-size: 14px; max-width: 420px; }
  .memo { max-width: 100%; font-size: 15px; min-height: 100px; }
  .memo.gate__input.coach__line { max-width: none; }   /* 코치 한 줄은 카드 폭만큼 (2026-10-12 mw) */
  .wk__in { min-height: 34px; padding: 5px 9px; font-size: 14px; }
}

/* ---------------------------------------------------------------- 카드 */

/* 폰 · PC 같은 카드 — 주간에서는 7열 그리드에 놓일 뿐이다. 클럽 · 내 공간의 상자도 이것이다. */
/* 결정 146 (2026-10-09): 카드는 **면** — 테두리 없음(투명. 오늘 · 고른 날의 색 테두리는 그대로 산다). 주간 7열 안(.day)에서만 연한 테두리 */
.card { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid transparent; background: var(--surface); color: var(--text); text-decoration: none; min-width: 0; }
@media (min-width: 900px) { .day .card { border-color: var(--border); } }   /* 7열 격자(PC)에서만 — 폰의 한 줄 카드는 피드처럼 면 */
.card__title { font-size: 15px; font-weight: 700; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; }
.card__text { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-line; }
/* 카드 안의 회색 보조 글은 본문(14px)보다 작게 — 크기를 안 주면 16px 을 물려받아 본문보다 커 보였다 */
.card .hint { font-size: 13px; }

/* 훈련 카드 (결정 134)
   상태는 셋으로만: **막대**(찬 만큼 했다) · **태그 하나**(특별한 날) · **회색 바탕**(휴식).
   테두리는 모두 옅은 회색 — 예외는 오늘(옅은 초록). 취소선 · 흐림 · 점선 · 검정 테두리는 쓰지 않는다.
   색의 뜻은 앱 전체에서 하나: 초록 = 오늘 · 했다, 주황 = 확인 필요. 대회는 메달 + 큰 숫자.
   .session · .plan · .rest 는 늘 .card 와 함께 달린다 — 모양은 여기서만 정한다. */
.plan.card { color: var(--text-secondary); background: var(--surface-sunken); border-color: transparent; }   /* 아직 — 연한 면 + 「계획」 칩 (2026-10-12 mw: 기록과 안 갈렸다). 글자는 text-secondary(5.2:1) */
.plan.card .sbar__track { background: var(--border); }      /* 연한 면 위에서 빈 막대가 보이게 */
.plan__chip { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--text-secondary); white-space: nowrap; }   /* 「계획」 — 상태 태그가 아니라 종류 표시 */
/* 달력에서 고른 날 (결정 125) — 테두리 색 하나만 바꾼다. 오늘(아래)이 이긴다 */
@media (min-width: 900px) {
  .day--picked .session, .day--picked .plan { border-color: var(--accent); }
}
.day--today .card, .card--today { border-color: var(--accent-mid); }
.card--opt_rest, .rest.card { background: var(--surface-sunken); border-color: transparent; }
.card__medal { flex: none; color: var(--text); margin-right: 2px; vertical-align: -2px; }
.card__big { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text); }
.plan.card .card__big { color: var(--text-secondary); }
.sbar { display: flex; align-items: center; gap: 6px; padding-top: 6px; margin-top: auto; }
.sbar__track { flex: 1; height: 6px; border-radius: 0 3px 3px 0; background: var(--track); overflow: hidden; display: block; }
.sbar__fill { display: block; height: 100%; }
.sbar__fill--plan { background: var(--accent-mid); }
.sbar__fill--neutral { background: var(--neutral-bar); }
.session.card .sbar__track { background: var(--accent-soft); }
.card--today .sbar__track { background: var(--accent-soft); }
.card--check .sbar__track { background: var(--warn-soft); }
.sbar__pct { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 900px) {
  /* 카드 높이를 맞춘다. RPE 가 없으면 한 줄이 비어 카드가 짧아지는데,
     그러면 7열이 들쭉날쭉해져 한 주를 훑기 어렵다. 값은 토큰 한 곳만 고치면 된다. */
  /* **주간 격자(.day) 안의 카드만** — 모든 .card 에 걸었더니 다른 화면마다 min-height: 0 !important 로 되돌려야 했다(리뷰 B12) */
  .day .card { padding: var(--pad-card-tight); min-height: var(--card-h); }
  .day .plan.card { min-height: var(--card-h); border-style: solid; }
  .day .rest.card { min-height: var(--card-h-empty); }
  .card__big { font-size: 24px; }
}

/* ---------------------------------------------------------------- 태그 */

.tag { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-sunken); color: var(--text-secondary); border: 0; }
.tag--accent { background: var(--accent-soft); color: var(--accent-text); }
.tag--warn { background: var(--warn-soft); color: var(--warn-ink); }
/* 오늘은 앱에서 하나뿐인 진한 칩 — 연한 초록은 흰 카드 위에서 안 보였다 */
.tag--today { background: var(--accent); color: var(--surface); }
/* 코치 평가 칩 (결정 164) — 호박색. ⭐ 는 금색 */
.tag--coach { background: var(--warn-soft); color: var(--warn-ink); }
.tag--star { background: #FFF1C2; color: #7A5200; }
.tag--score { background: var(--accent-soft); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.chip2--score b { font-size: 14px; margin-right: 2px; }
.chip2--score small { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.creview__row { display: flex; align-items: center; gap: 12px; }
.creview__avg b { font-size: 22px; font-weight: 800; }
.creview__avg small { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }
.feed__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feed__foot .cheer { margin: 0; padding: 0; border: 0; }
.feed__foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.coach__form { gap: 8px; }
/* 코치 평가 고르기 (결정 165, 2026-10-12 mw) — 상자 없는 알약. 점수 다섯은 한 줄에 똑같이 나눠, 태그는 흐르는 알약. 고른 것은 진하게 */
.pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick__label { font-size: 12px; color: var(--text-secondary); font-weight: 700; margin-top: 2px; }
.pick__label span { font-weight: 400; margin-left: 4px; }
/* 점수 = 이어진 눈금 하나 (고른 칸만 초록) — 태그와 다른 물건으로 보이게 (2026-10-12 mw: 「점수와 태그가 너무 똑같은데」) */
.pick--score { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.pick--score .pick__opt { border: 0; border-radius: 0; border-left: 1px solid var(--border); background: transparent; }
.pick--score .pick__opt:first-child { border-left: 0; }
.pick--score .pick__opt:has(input:checked) { background: var(--accent); color: #fff; font-weight: 700; }
/* 태그 = 떨어진 알약, 바탕은 연한 면, 고르면 호박색(화면 곳곳의 코치 칩과 같은 색) */
.pick--tags .pick__opt { background: var(--surface-sunken); border-color: transparent; }
.pick--tags .pick__opt:has(input:checked) { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn); font-weight: 600; }
.pick__opt { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px; cursor: pointer; user-select: none; }
.pick__opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.pick__opt span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pick__opt b { font-size: 14px; }
.pick--score .pick__opt { padding: 0 4px; font-size: 12px; }
.pick__opt:has(input:disabled) { opacity: .45; cursor: default; }
.pick__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick--tags .pick__opt--star:has(input:checked) { background: #FFF1C2; border-color: #C99A1E; color: #7A5200; }
.coach__line { width: 100%; }
.coach__acts { display: flex; justify-content: flex-end; }
.coach__acts .btn { width: auto; }
@media (max-width: 599px) { .pick--score .pick__opt b { display: block; } .pick--score .pick__opt span { flex-direction: column; gap: 0; line-height: 1.15; padding: 4px 0; } }
.chip2--star { font-weight: 700; }
.creview { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.creview__head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); }
.creview__head b { color: var(--text); font-size: 13px; }
.creview__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.creview__chips b { margin-left: 2px; }
.cstats__review { white-space: normal !important; }
.cstats__review .tag { margin: 1px 0; }

/* 다른 화면의 옛 태그(plan__tag)도 같은 모양 — 점선 테두리 대신 옅은 바탕.
   --rest(선택 계획을 쉰 것, 결정 113) · --off 는 기본(회색) 그대로다 — 경고가 아니라 계획대로다. */
.plan__tag { font-size: 12px; font-weight: 600; color: var(--text-secondary); border: 0; border-radius: 999px;
  padding: 1px 8px; white-space: nowrap; background: var(--surface-sunken); }
/* 안 한 계획 — 지우지 않는다. 안 한 것도 기록이다. */
.plan__tag--skip { background: var(--warn-soft); color: var(--warn-ink); }
/* 계획에서 나온 훈련의 수행률 — 확정된 사실이다. */
.plan__tag--done { background: var(--accent-soft); color: var(--accent-text); }

/* ---------------------------------------------------------------- 상자 (.prog · .panel)

   프로그램 한 장. 폰에서 프로그램 하나가 화면 하나를 넘어가는데, 경계가 없으면
   스크롤하다 다음 프로그램이 그냥 이어져 나와 어디까지가 무엇인지 안 보인다. */
.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); }

.panel { background: var(--surface); border: 0; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.panel__title { font-size: 14px; font-weight: 600; }
.panel__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; border-top: 1px solid var(--border); }
.panels { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) {
  .panels { flex-direction: row; align-items: stretch; }
  .panels > .panel { flex: 1; }
  .panels > .panel--wide { flex: 2; }
}

/* ---------------------------------------------------------------- 표 (.ctable, 결정 126)
   PC: 표. 폰: 줄마다 카드(칸 이름은 data-label). */
.ctools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ctools__q { width: 100%; max-width: 320px; }

.ctable { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ctable a { color: inherit; }
.ctable thead { display: none; }
.ctable tr { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ctable td { display: flex; gap: 10px; align-items: baseline; }
.ctable td[data-label]::before { content: attr(data-label); flex: 0 0 88px; color: var(--text-secondary); font-size: 13px; }
.ctable__off { opacity: .55; }
.ctable__acts { flex-wrap: wrap; gap: 6px !important; padding-top: 6px; }
.ctable__acts form { margin: 0; }
.ctable .btn { min-height: 36px; padding: 6px 12px; font-size: 13px; width: auto; }
.cpop > summary { list-style: none; cursor: pointer; }
.cpop > summary::-webkit-details-marker { display: none; }
.cpop__body { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 6px; }

@media (min-width: 900px) {
  .ctable thead { display: table-header-group; }
  .ctable tr { display: table-row; padding: 0; }
  .ctable td, .ctable th { display: table-cell; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border);
    text-align: left; vertical-align: middle; }
  .ctable th { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
  .ctable th[data-sort] { cursor: pointer; }
  .ctable th[data-sort]::after { content: ' ↕'; color: var(--text-muted); font-size: 11px; }
  .ctable th[aria-sort="ascending"]::after { content: ' ▲'; color: var(--accent); }   /* console.js 가 aria-sort 를 단다 */
  .ctable th[aria-sort="descending"]::after { content: ' ▼'; color: var(--accent); }
  .ctools--chips { gap: 8px; align-items: center; }
  .ctools__count { margin-left: auto; }
  .ctable th[aria-sort="ascending"]::after { content: " ▲"; }
  .ctable th[aria-sort="descending"]::after { content: " ▼"; }
  .ctable td[data-label]::before { content: none; }
  .ctable__num { text-align: right !important; }
  .ctable__acts { display: table-cell !important; white-space: nowrap; }
  .cstats tfoot tr { display: table-row; border-top: 0; padding: 0; }
  .cstats tfoot td { display: table-cell; border-top: 2px solid var(--border-strong); padding-top: 10px; }
  .cstats tfoot td[data-label]::before { content: none; }
  .cstats tfoot td:empty { display: table-cell; }
  .ctable__acts > * { display: inline-block; vertical-align: middle; margin-right: 4px; }
  /* 창은 단추 바로 아래, 한 번에 하나만(app.js 가 닫는다). 표 위에 떠야 하니 z 를 넉넉히, 폭은 입력칸이 안 접히게 */
  .cpop__body { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 280px; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); flex-wrap: nowrap; }
  .cpop__body .wk__in { flex: 1; min-width: 0; }
  .cpop { position: relative; }
}

/* ---------------------------------------------------------------- 쪽 넘김 (결정 105)
   가운데 글자가 '지금 어디인가' 를 말하고 양쪽이 문이다.
   마지막 쪽에서 '다음' 을 감추지 않고 흐리게 둔다 — 버튼이 사라지면 자리가
   밀려서 누르려던 곳이 어긋난다. */
.pager { display: flex; align-items: center; justify-content: space-between;
         gap: 8px; margin: 8px 0 4px; }
.pager .btn { width: auto; min-width: 92px; }
.pager__at { font-size: 13px; color: var(--text-secondary); text-align: center; }
.pager__off { opacity: .35; pointer-events: none; }

/* ---------------------------------------------------------------- 찾는 칸

   검색 · 칩 — 클럽 허브(.hub__search) · 프로그램 찾기(.psearch) 가 같은 모양 */
.psearch { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--text-secondary); min-width: 0; }
.psearch__in { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); outline: none; }
.psearch__in::-webkit-search-cancel-button { display: none; }
.psearch__x { color: var(--text-secondary); text-decoration: none; font-size: 13px; padding: 4px; }
/* 누르면 창이 열리는 단추(입력칸처럼 보인다) */
.psearch--btn { text-decoration: none; cursor: text; }
.psearch--btn span { font-size: 14px; color: var(--text-muted); }
.pfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pfilter .ptools__count { margin-left: auto; }
.chips2 { display: flex; gap: 6px; flex-wrap: wrap; }
.chip2 { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); display: inline-flex; align-items: center; font-size: 13px; text-decoration: none; }
/* 활동 공개 셋 (결정 160) — 줄마다 라디오 + 제목 + 한 줄 */
.vispick { display: flex; flex-direction: column; gap: 6px; }
.vispick__opt { display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px; align-items: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; }
.vispick__opt input { margin: 3px 0 0; grid-row: span 2; accent-color: var(--accent); }
.vispick__opt b { font-size: 15px; }
.vispick__opt span { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.vispick__opt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.themepick .chip2 { cursor: pointer; }
.themepick .chip2 input { position: absolute; opacity: 0; width: 0; height: 0; }
.themepick .chip2.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip2[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }

/* 찾는 선택 칸 — select2 처럼 (static/combo.js, 2026-10-07) */
.combo { position: relative; flex: 1 1 240px; max-width: 420px; min-width: 0; }
.combo__native { display: none; }
.combo__btn { width: 100%; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 32px !important;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.combo__pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.combo__q { height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 16px; color: var(--text); }
.combo__q::-webkit-search-cancel-button { display: none; }
.combo__list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.combo__group { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.combo__opt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.combo__opt small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.combo__opt.is-active, .combo__opt:hover { background: var(--accent-soft); }
.combo__opt[aria-selected="true"], .combo__opt.is-active > span { color: var(--accent-text); }
.combo__opt[aria-disabled="true"] { color: var(--text-muted); cursor: default; background: none; }
.combo__none { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--text-secondary); }
@media (min-width: 900px) { .combo__q { font-size: 14px; } }

/* ---------------------------------------------------------------- ⋯ 메뉴
   summary 에 display 를 주지 않는다(사파리) */
.pmenu { position: relative; }
.pmenu > summary { list-style: none; cursor: pointer; padding: 4px 10px; border-radius: 8px; font-size: 18px; line-height: 1; color: var(--text-secondary); }
.pmenu > summary::-webkit-details-marker { display: none; }
.pmenu > summary:hover, .pmenu[open] > summary { background: var(--surface-sunken); }
.pmenu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; display: flex; flex-direction: column;
  padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.pmenu__list a, .pmenu__list button { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: 14px; color: var(--text); text-decoration: none; cursor: pointer; }
.pmenu__list a:hover, .pmenu__list button:hover { background: var(--surface-sunken); }
.pmenu__list form { margin: 0; }
.pmenu__list .pmenu__danger { color: var(--danger); }

/* ---------------------------------------------------------------- 클럽 아이콘 (결정 130)
   이모지 + 배경색 8가지. 이모지가 없으면 이름 첫 글자를 흰 글씨로 */
.clubicon { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 8px;
  color: #fff; font-weight: 600; line-height: 1; }
.clubicon--sm { width: 22px; height: 22px; font-size: 13px; border-radius: 6px; }
.clubicon--md { width: 32px; height: 32px; font-size: 17px; }   /* club_icon(c, 'md') — 클래스 이름이 템플릿에서 조립되어 grep 에 안 잡힌다. 죽은 규칙이 아니다 */
.clubicon--xl { width: 112px; height: 112px; font-size: 52px; border-radius: 28px; }
.clubicon--green  { background: #2E7D6F; } .clubicon--teal   { background: #2A8C9C; }
.clubicon--blue   { background: #3B6FD4; } .clubicon--purple { background: #7A55C7; }
.clubicon--pink   { background: #C24C88; } .clubicon--red    { background: #C8463C; }
.clubicon--orange { background: #D07A1F; } .clubicon--gray   { background: #6B6E73; }
.clubcell { display: inline-flex; align-items: center; gap: 8px; }

/* 설정 화면의 고르는 칸 */
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.picks__emoji { width: 40px; height: 40px; font-size: 22px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; }
/* 이모지 고르기 — 고른 것은 초록 테두리, ⊖ 빼기 = 이름 첫 글자 (2026-10-07) */
.picks__emoji.is-on { border: 2px solid var(--accent); background: var(--accent-soft); }
.picks__none { display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.picks__none.is-on { color: var(--accent-text); }
.picks__color { position: relative; }
.picks__color input { position: absolute; opacity: 0; }
.picks__color span { display: block; width: 32px; height: 32px; border-radius: 999px; border: 3px solid transparent; }
.picks__color input:checked + span { border-color: var(--text); }
.picks__color input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- 아바타 · 사람 */
/* 올린 사진 (결정 143) — 자리의 배경으로 깔고 글자(이니셜 · 이모지)는 투명하게. 자리는 그대로라 호출하는 쪽을 안 바꾼다 */
/* 사진은 **덮고 가운데** — !important 인 이유: 뒤의 .avatar · .clubicon 같은 자리 규칙이 background 축약형을 쓰면 size · position 이
   auto · 0 0 으로 되돌아가 256px 원본의 왼쪽 위 모서리만 보였다(2026-10-10 mw: 「회원 사진 깨짐」 — 프로필(80px)은 멀쩡하고 목록(32px)만 깨졌다) */
[data-pic] { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
  color: transparent !important; text-shadow: none !important; }

.avatar { width: 32px; height: 32px; border-radius: 999px; background-color: var(--surface-sunken); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: none; }
.avatars { display: inline-flex; }
.avatars .avatar { width: 30px; height: 30px; border: 2px solid var(--surface); color: #fff; font-size: 12px; }
.avatars .avatar + .avatar { margin-left: -8px; }
/* 사람의 색 — 클럽 아이콘과 같은 여덟 색, 아이디로(calc.avatar_color). 색은 background-color 로 — 축약형 !important 는 올린 사진(인라인 background-image, 결정 143)까지 지웠다 */
.avatar--green  { background-color: #2E7D6F !important; color: #fff; } .avatar--teal   { background-color: #2A8C9C !important; color: #fff; }
.avatar--blue   { background-color: #3B6FD4 !important; color: #fff; } .avatar--purple { background-color: #7A55C7 !important; color: #fff; }
.avatar--pink   { background-color: #C24C88 !important; color: #fff; } .avatar--red    { background-color: #C8463C !important; color: #fff; }
.avatar--orange { background-color: #D07A1F !important; color: #fff; } .avatar--gray   { background-color: #6B6E73 !important; color: #fff; }
.avatar--more { background-color: var(--surface-sunken) !important; color: var(--text-secondary) !important; font-size: 10px !important; }
.avatar--lg { width: 44px; height: 44px; font-size: 16px; color: #fff; }
.person { display: flex; align-items: center; gap: 10px; }
.person__name { flex: 1; min-width: 0; font-size: 14px; }
.person form { margin: 0; }

/* ---------------------------------------------------------------- 브랜드 (결정 135)
   로고 = 막대 마크 + SPLITS(굵게 · 넓은 자간). 모티프 = 스플릿 막대 — 주간 요약 · 클럽 커버 · 빈 화면. */
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.brand__mark { flex: none; display: block; }
.brand__word { font-weight: 800; letter-spacing: .06em; line-height: 1; }
.brand--onDark { color: #EDEDEA; }
.gate__mark .brand { justify-content: center; }
.topnav .brand.topnav__logo { font-size: inherit; }

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

.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%; }

/* ================================================================ 5. 화면 */

/* ---------------------------------------------------------------- 주간 — 요약
   흰 바탕 · 이름표 위 큰 숫자 (2026-10-08 mw: 「회색 배경이 최선임?」). 회색 상자는 휴식 카드 · 안내문의 뜻과 섞였다.
   폰 「이번 주」 카드(.snap)와 같은 꼴. 오른쪽(PC) · 아래(폰)에 요일 동그라미(.wdays) */
.summary { margin: 0 16px 8px; padding: 4px 0 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.summary__stats { display: flex; gap: 20px; flex-wrap: wrap; }
.summary__stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 56px; }
.summary__stats small { font-size: 12px; color: var(--text-secondary); }
.summary__stats b { font-size: 22px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.summary__stats i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.summary__notes { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--text-secondary); }
.summary__notes:empty { display: none; }
.summary__delta { font-weight: 500; color: var(--warn); }
/* 오른쪽(PC) · 아래(폰) 이번 주 상태 — 요일 동그라미 + 목표 고리. 베이스는 여기, PC 는 아래 @media (순서 — 결정 137) */
.summary__side { display: flex; flex-direction: column; gap: 8px; }
.summary__goal { margin: 0; }
/* 달력 위 12개월 막대 (결정 145) — pbars 와 같은 꼴, 열두 칸 */
.ybars { display: flex; flex-direction: column; gap: 6px; }
.ybars__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 44px; }
.ybars__b { display: block; border-radius: 3px 3px 0 0; background: var(--accent-mid); }
.ybars__b.is-now { background: var(--accent); }
.ybars__foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); }
/* 코치의 표 (결정 145) — 점 하나: 다 함 · 일부 · 안 함 · 계획 없이 뜀 · 없음 */
.cboard__t td { vertical-align: middle; }
.cdot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; vertical-align: middle; box-sizing: border-box; border: 2px solid var(--border); }
.cdot--all { background: var(--accent); border-color: var(--accent); }
.cdot--some { background: var(--warn); border-color: var(--warn); }
.cdot--none { background: var(--danger); border-color: var(--danger); }
.cdot--ran { border-color: var(--accent); }
.cboard__dots .cdot { margin-right: 4px; }
/* 클럽 통계 표 (결정 156) */
.cstats__who { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.cstats__who .avatar { width: 28px; height: 28px; font-size: 12px; }
.cstats th a { color: inherit; text-decoration: none; }
.cstats th[aria-sort] a { color: var(--accent); }
.cstats tfoot tr { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 0; border-top: 2px solid var(--border-strong); }
.cstats tfoot td { display: flex; gap: 10px; align-items: baseline; }
.cstats tfoot td[data-label]::before { content: attr(data-label); flex: 0 0 88px; color: var(--text-secondary); font-size: 13px; }
.cstats tfoot td:empty { display: none; }
/* 요일 동그라미 — 채움 뛴 날 · 회색 휴식 · 주황 테두리 확인 · 초록 테두리 계획 · 빈 원 없음 */
.wdays { display: flex; gap: 8px; }
.wdays__d { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 26px; }
.wdays__d small { font-size: 11px; color: var(--text-secondary); }
.wdays__d i { display: block; width: 18px; height: 18px; border-radius: 999px; box-sizing: border-box; border: 1.5px solid var(--border); }
.wdays__d--done i { background: var(--accent); border-color: var(--accent); }
.wdays__d--rest i { background: var(--track); border-color: var(--track); }
.wdays__d--check i { background: var(--warn-soft); border-color: var(--warn); }
.wdays__d--plan i { border-color: var(--accent-mid); }
.wdays__d--today small { color: var(--accent); font-weight: 700; }
.wdays__d--today i { box-shadow: 0 0 0 2px var(--accent-soft); }
/* 빈 화면의 막대 하나 (empty.html) */
.wbars--empty { position: static; height: 40px; margin: 0 auto 12px; display: flex; justify-content: center; }
.wbars--empty .wbars__b { display: block; width: 56px; border-radius: 0 3px 3px 0; height: 8px !important; background: var(--track); }

/* ---------------------------------------------------------------- 주간 — 날짜 행 */

.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; }
/* 달력에서 고른 날 (결정 125) — '오늘'(왼쪽 초록 선)과 다르게 배경으로. 주소의 #d-날짜 로 그 자리에 온다 */
.day--picked { background: var(--accent-weak); scroll-margin-top: 80px; }
.day--picked .day__date { color: var(--accent); font-weight: 600; }

/* '—'(안 적음)은 의미 있는 정보다. text-muted(3.3:1)가 아니라 text-secondary(5.2:1)를 쓴다. */
.nothing { color: var(--text-secondary); }
/* 앞날의 「＋ 계획」도 카드 상자로 — 글자만 떠 있으면 다른 날의 카드와 줄이 안 맞았다(mw, 2026-10-07).
   실선 · 흰 바탕 · 옅은 회색 테두리(결정 134 — 점선 없음). 담긴 게 없으니 낮게(카드 빈 높이). */
.nothing--future { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; }
.nothing--future:hover, .nothing--future:focus-visible { border-color: var(--accent-mid); color: var(--accent-text); }
.rest { align-items: baseline; }
.rest__label { color: var(--text-secondary); }
.rest__note { font-size: 13px; color: var(--text-muted); }

.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: center;
                 column-gap: 8px; row-gap: 4px; min-width: 0; }
/* 이름은 줄지 않는다 — 줄여야 할 것은 태그가 아니라 줄 수다 */
.session__type > span:first-child { flex: 0 1 auto; min-width: 0; }
/* 계획과 다른 유형으로 한 훈련의 원래 계획 (결정 114) */
.session__was { color: var(--text-secondary); font-weight: 400; }
.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__note {
  font-size: 13px; color: var(--text-secondary); margin-top: 4px; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

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

/* ---------------------------------------------------------------- 주간 — 넓은 화면

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

@media (min-width: 900px) {

  /* 요약: 왼쪽 숫자 + 그 아래 설명 한 줄, 오른쪽은 이번 주 상태(요일 동그라미 위 · 목표 고리 아래) 한 덩어리 (2026-10-09 mw) */
  .summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stats side" "notes notes"; align-items: center; column-gap: 28px; row-gap: 8px; margin: 0 24px 8px; padding: 8px 0 12px; }
  .summary__stats { grid-area: stats; gap: 28px; }
  .summary__stats b { font-size: 26px; }
  /* 오른쪽은 한 줄 — 고리 · 요일 동그라미. 숫자 줄과 세로 중심을 맞추고, 동그라미는 숫자 크기에 맞춰 조금 키운다 (2026-10-09 mw: 깔끔함 · 정렬) */
  .summary__side { grid-area: side; flex-direction: row; align-items: center; gap: 28px; align-self: center; }
  .summary__goal { order: -1; }
  .summary__notes { grid-area: notes; }
  .wdays { gap: 12px; }
  .wdays__d { width: 24px; gap: 6px; }
  .wdays__d i { width: 22px; height: 22px; }

  /* 요일 머리글 줄 — 그리드와 같은 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); }
  .weekhead__cell--picked { color: var(--accent); font-weight: 600; background: var(--accent-weak);
    border-radius: 6px 6px 0 0; padding-left: 6px; }

  .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; }
  .day--picked { background: none; }

  .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; }

  /* 휴식과 빈 날은 담을 게 없다. 훈련 카드와 같은 높이로 키우면 빈 상자만 커진다.
     휴식은 누를 수 있지만 **패널**이다. 기준은 '누르는가' 가 아니라 '담긴 무게' 다 —
     쉰 날을 훈련 카드와 같은 무게로 그리면 한 주를 훑을 때 뛴 날처럼 보인다. */
  .rest { align-items: flex-start; }
  .nothing { display: flex; align-items: center; justify-content: center; min-height: var(--card-h-empty); }
  .nothing--future { 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; }
}

/* ---------------------------------------------------------------- 주간 — 계획 시작 블록
   계획이 없는 주에만 나온다 */
.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; }
/* '더보기' 는 프로그램 선택지가 아니라 **다른 화면으로 가는 문**이다 (결정 104).
   같은 모양이면 프로그램 이름 중 하나로 읽힌다 — 유형 칩에서 이미 겪었다. */
.planstart__more { border-style: dashed; }
@media (min-width: 900px) {
  /* 주간 뷰 위의 '지난주 가져오기 · 템플릿에서 만들기'.
     주간 그리드는 넓어야 하지만 이 버튼들이 따라 넓어질 이유는 없다.
     넓은 화면에서는 가로로 놓아 세로 공간도 아낀다 — 아래 요일 머리글과
     칸이 한 화면에 같이 보여야 주간 뷰다. */
  .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; }
}

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

   .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; }

/* ---------------------------------------------------------------- 설정 · 충돌 */

.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; }
@media (min-width: 900px) { .settings__row { min-height: 44px; padding: 10px 0; } }

.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%; }
/* 확인 이유 목록 (결정 139) — 한 화면에 모아 한 번만 묻는다 */
.conflict__list { list-style: none; margin: 0 0 8px; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.conflict__list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-sunken); }
.conflict__list b { font-size: 15px; }
.conflict__list span { font-size: 13px; color: var(--text-secondary); }

/* ---------------------------------------------------------------- 훈련 입력 · 계획 */

/* 완료된 훈련 위에 붙는 계획 원문. 읽기 전용이다 — 계획은 계획 화면에서 고친다. */
.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; }
/* 계획 내용은 여러 줄이다 — 줄바꿈을 살린다. 코치의 페이스 표는 칸을 빈칸으로 맞춘다 —
   pre-line 은 빈칸을 하나로 접어 표가 무너졌다 */
.planref__note { font-size: 14px; line-height: 1.5; color: var(--text-secondary); white-space: pre-wrap; }

/* 계획 화면 — 두 칸의 높이를 맞춘다 (2026-10-07 mw: "왼쪽 하단 여백이 부자연스럽다").
   오른쪽 내용 칸은 왼쪽 칸 높이까지 늘어나고(그보다 길면 내용만큼), 왼쪽 맨 아래에는 출처 카드가 붙는다.
   거리 · 시간 · 반복은 숫자를 단위에 붙인다 — 「0.0 ······ km」 처럼 떨어져 보였다. */
.planfrom { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-sunken); font-size: 13px; color: var(--text-secondary); }
.planfrom svg { flex: none; }
.planfrom b { color: var(--text); font-weight: 600; }
.plan__note { field-sizing: content; min-height: 112px; }   /* 폰도 설명만큼 — 세 줄에 갇히지 않게 */
/* 훈련 계획(읽기) 단추 줄 — 수정 · 휴식 · 완료 */
.plan__acts > form { display: contents; }

/* 계획 화면 아래 단추 줄 (2026-10-07 mw: "버튼이 떨어진다") — PC 는 두 칸 아래 한 줄,
   삭제는 왼쪽 끝, 저장 · 휴식 · 완료는 오른쪽. 폰은 지금처럼 화면 아래에 붙고 삭제는 내용 아래 */
.plan__del--bar { display: none; }
@media (min-width: 900px) {
  .form--plan { align-items: stretch; }
  .form--plan .planfrom { margin-top: auto; }
  .form--plan .form__col--note { display: flex; flex-direction: column; }
  .form--plan .form__col--note > .field:first-child { flex: 1; display: flex; flex-direction: column; }
  .form--plan .plan__note { flex: 1; min-height: 290px; field-sizing: content; resize: vertical; line-height: 1.6; }   /* 왼쪽 높이까지 채우되, 설명이 더 길면 내용만큼 — 페이스 표 마지막 줄이 잘렸다 */
  .form--plan .row .numinput { field-sizing: content; width: auto; min-width: 2ch; max-width: 6em; }

  .savebar.savebar--plan { display: flex; align-items: center; gap: 12px; padding: 8px 0 0; margin-top: 4px; border-top: 0; }   /* 선은 뺐다(mw) — 여백만으로 묶는다 */
  .savebar--plan .formactions { width: auto; margin-left: auto; }
  .savebar--plan > .btn--primary { margin-left: auto; }
  .plan__del--bar { display: inline-flex; }
  .plan__del--col { display: none; }
}

/* ---------------------------------------------------------------- 월간 캘린더 (결정 125 · 134)
   월~일 7칸 + 주 합계 1칸. 폰에서 칸이 좁다(약 40px) — 숫자 하나와 점만 둔다.
   월간 칸 = 훈련 카드의 말 (2026-10-07). 점선 없음 — 계획은 회색 고리 점.
   오늘 = 진한 초록 동그라미 숫자(주간의 진한 「오늘」 칩) · 고른 날 = 연한 바탕 + 테두리라 겹치지 않는다.
   휴식 = 회색 바탕(부상은 주황 글자) · 아직 오지 않은 날 = 숫자 · 점만 흐리게. */
.mon { padding: 0 8px 32px; display: flex; flex-direction: column; gap: 2px; }
.mon__head, .mon__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(44px, 1.1fr); gap: 2px; }
.mon__head { font-size: 12px; color: var(--text-secondary); text-align: center; padding: 4px 0; }
.mon__cell, .mon__sum { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 60px; padding: 4px 2px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.mon__sum { background: var(--surface-sunken); justify-content: center; padding-left: 6px; }
.mon__cell--out { opacity: .4; }
.mon__cell--today { border-color: var(--accent-mid); border-width: 1.5px; }
.mon__cell--today .mon__d { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 4px; margin-left: 1px; border-radius: 999px; background: var(--accent); color: var(--surface); font-weight: 700; }
.mon__cell--rest { background: var(--surface-sunken); border-color: transparent; }
.mon__cell--future .mon__d, .mon__cell--future .mon__dots, .mon__cell--future .mon__rest { opacity: .6; }
.mon__d { font-size: 11px; color: var(--text-secondary); padding-left: 2px; }
.mon__km { font-size: 14px; font-weight: 600; padding-left: 2px; }
.mon__rest { font-size: 11px; font-weight: 600; color: var(--text-secondary); padding-left: 2px; }
.mon__rest--injury { color: var(--warn-ink); }
.mon__plan { font-size: 11px; color: var(--text-secondary); }
.mon__dots { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; font-size: 10px; padding-left: 2px; }
/* 점도 카드와 같은 뜻으로 (결정 134) — 했다 = 부드러운 초록 · 대회 = 진한 점(칸이 작아 메달 대신) ·
   확인 필요(미완료) = 주황 고리(빨강은 지우기 색이라 쓰지 않는다) · 기타 = 회색 */
.mon__dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; }
.mon__dot--run { background: var(--accent-mid); }
.mon__dot--race { background: var(--text); }
.mon__dot--other { background: var(--neutral-bar); }
.mon__dot--pain { background: var(--danger); }   /* 통증 칸이 있는 날 (결정 145 보완) */
.mon__dot--miss { background: transparent; box-shadow: inset 0 0 0 1.5px var(--warn); }
.mon__dot--plan { background: transparent; box-shadow: inset 0 0 0 1.5px var(--neutral-bar); }
.mon__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-secondary); padding: 10px 4px 0; }
.mon__legend span { display: inline-flex; align-items: center; gap: 5px; }

/* 그날 미리보기 (PC 떠 있는 창 · 폰 아래 목록) */
.mon__cell[aria-current="date"] { background: var(--accent-weak); border-color: var(--accent); }
.mon__panel { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.mon__panel:empty { display: none; }
/* fixed 다 — absolute 면 가운데 정렬된 .app(position: relative)을 기준으로 놓여 그 여백만큼 오른쪽으로 밀렸다 */
.mon__pop { position: fixed; z-index: 20; width: 280px; padding: 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 8px 28px rgba(0,0,0,.14); pointer-events: none; }
.mon__pop .mev__go { display: none; }      /* PC 는 칸을 클릭하면 간다 */
.mev__head { font-weight: 600; font-size: 14px; padding-bottom: 6px; }
.mev { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 14px; border-top: 1px solid var(--border); }
.mev .mon__dot, .mev .mev__body { min-width: 0; }
.mev__line { font-variant-numeric: tabular-nums; }
.mev__note { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mev__status { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }
.mev__status--miss { color: var(--warn-ink); }
.mev--rest, .mev--empty { color: var(--text-secondary); }
.mev__go { display: block; text-align: right; padding-top: 8px; font-size: 14px; color: var(--accent); }

@media (min-width: 900px) {
  .mon { width: 100%; margin-left: auto; margin-right: auto; gap: 4px; }
  .mon__head, .mon__week { gap: 4px; }
  .mon__cell, .mon__sum { min-height: 84px; padding: 6px; }
  .mon__km { font-size: 18px; }
  .mon__dot { width: 8px; height: 8px; }
}

/* ---------------------------------------------------------------- 대회 기록 (결정 115)
   한 대회 = 한 줄: 날짜 · 기록 · 페이스, 아래에 메모 첫 줄. */
.race__pb { margin-left: auto; font-size: 13px; color: var(--text-secondary); }
.race__pb b { color: var(--accent); font-variant-numeric: tabular-nums; }
.race__row { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: baseline;
             padding: 10px 0; border-top: 1px solid var(--border); color: inherit; }
.race__date { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.race__time { font-size: 16px; font-variant-numeric: tabular-nums; }
.race__meta { font-size: 13px; color: var(--text-secondary); text-align: right; }
.race__note { grid-column: 1 / -1; font-size: 13px; color: var(--text-secondary); }

/* ---------------------------------------------------------------- 훈련 템플릿 (요일 목록) */

.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; }

/* 템플릿 하루 — 접어두고 펼쳐 본다. 찍기 전에 내용을 확인할 수 있어야 한다.
   summary 에 display 를 주지 않는다. flex/block 으로 바꾸면 사파리에서
   펼침 동작 자체가 깨진다 — 실제로 '수정이 안 된다' 로 나타났다. */
.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; }

/* ---------------------------------------------------------------- 클럽 프로그램 — 표 (2026-10-07, mw: "깔끔한 테이블 형태")
   폰(기본): 프로그램마다 카드 하나, 안에 `요일 · 유형 · 양` 일곱 줄 — 가로 스크롤 없이 한 주가 다 보인다.
   PC(900px~): 한 표. 줄(.prow)은 subgrid 라 열이 위아래로 맞는다 — 1주차와 2주차를 세로로 비교.
   휴식 칸은 회색 글자 「휴식」. 점선 없음(결정 134). */
.progs { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; min-width: 0; }
.progs .settings__group { margin: 0; }
.ptools { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.ptools__count { font-size: 13px; color: var(--text-secondary); }

.ptable { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ptable__head { display: none; }
.prow { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 12px 14px; min-width: 0; }
.prow--hidden { background: var(--surface-sunken); }
.prow__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-bottom: 6px; font-size: 15px; min-width: 0; }
.prow__desc { flex-basis: 100%; font-size: 12px; color: var(--text-secondary); }
.pday { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 8px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 14px; }
.pday__wd { font-size: 13px; color: var(--text-secondary); }
.pday__it { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.pday__type { font-weight: 600; }
.pday__opt { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); }
.pday__amt { font-variant-numeric: tabular-nums; }
.pday__note { flex-basis: 100%; font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pday__none { color: var(--text-muted); font-size: 13px; }
/* 요일 마우스 오버 — 그날 상세 (2026-10-12 mw). PC(마우스) 만, 폰은 상세 보기 화면으로 */
.pday { position: relative; }
.ppop { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .ppop { position: absolute; top: calc(100% - 6px); left: 0; z-index: 30; width: 320px; max-height: 60vh; overflow: auto;
    padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14); font-size: 13px; line-height: 1.55; color: var(--text); }
  .pday:nth-child(n+6) .ppop { left: auto; right: 0; }
  .pday:hover .ppop, .pday:focus-within .ppop { display: block; }
  .ppop > b { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 12px; }
  .ppop__it + .ppop__it { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
  .ppop__note { white-space: pre-line; color: var(--text-secondary); margin-top: 2px; }
}
.prow__link { color: inherit; text-decoration: none; }
.prow__link:hover b { color: var(--accent); }
/* 프로그램 상세 보기 */
.pview { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 860px; margin: 0 auto; padding-bottom: 32px; }
.pview__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pview__head h1 { font-size: 22px; margin: 0; }
.pview__desc { margin: 6px 0 2px; color: var(--text-secondary); font-size: 14px; }
.pview__acts { display: flex; gap: 8px; }
.pview__acts .btn { width: auto; }
.pview__days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pview__day { flex-direction: row; gap: 14px; align-items: flex-start; }
.pview__day--rest { background: var(--surface-sunken); }
.pview__wd { flex: none; width: 22px; font-size: 15px; }
.pview__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pview__line { font-size: 15px; }
.pview__note { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.pday--rest { padding: 4px 0; }   /* 폰 — 쉬는 날 줄은 낮게. 훈련이 있는 날이 먼저 보이게 */
.prow__sum { display: grid; grid-template-columns: 28px auto auto 1fr; gap: 8px; align-items: baseline; padding: 8px 0 2px;
  border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.prow__sum span:not(.pday__wd) { font-size: 13px; color: var(--text-secondary); }
.prow__acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-top: 8px; }
/* 응원 (결정 160) — 카드 아래 한 줄: 엄지 단추 + 누가 */
.feed__link { display: block; color: inherit; text-decoration: none; }
.feed__link:hover .feed__title b { color: var(--accent); }
.cheer { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); }
.cheer__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cheer__btn.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.cheer__who { font-size: 12px; color: var(--text-secondary); }
.detail__social { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; }
.detail__social .cheer { margin: 0; padding: 0; border: 0; }
.detail__comments { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 0; }
.comment { display: flex; gap: 10px; align-items: flex-start; }
.comment .avatar { width: 28px; height: 28px; font-size: 12px; flex: none; }
.comment__body { flex: 1; min-width: 0; font-size: 14px; }
.comment__body p { margin: 2px 0 0; line-height: 1.5; white-space: pre-wrap; }
.comment__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comment__head small { color: var(--text-secondary); font-size: 12px; }
.comment__del { margin-left: auto; }
.comment__del button { border: 0; background: none; font: inherit; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.comment--coach .comment__body { background: var(--accent-soft); border-radius: 10px; padding: 8px 10px; }
.comment__form { display: flex; flex-direction: column; gap: 8px; }
.comment__kind .chip2, .comment__grade .chip2 { cursor: pointer; }
.comment__kind input, .comment__grade input { accent-color: var(--accent); }
/* 프로그램별 수행률 (결정 150) — 합계 아래 한 줄. 코치는 펼치면 회원별 */
.prow__uptake { flex-basis: 100%; padding-top: 2px; }
.uptake { font-size: 13px; color: var(--text-secondary); }
.uptake b { color: var(--accent); font-variant-numeric: tabular-nums; }
.uptake--none { color: var(--text-muted); }
.uptake summary { cursor: pointer; list-style: none; }
.uptake summary::-webkit-details-marker { display: none; }
.uptake summary::after { content: " ›"; color: var(--text-muted); }
.uptake[open] summary::after { content: " ⌄"; }
.uptake__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
.uptake__list li { display: flex; justify-content: space-between; gap: 8px; }
.uptake__list a { color: var(--text); font-weight: 600; }
.post__uptake { margin-top: 2px; }
.pempty { display: flex; flex-direction: column; gap: 4px; padding: 16px; font-size: 14px; }
.pempty span { color: var(--text-secondary); font-size: 13px; }

@media (min-width: 900px) {
  .ptable { display: grid; grid-template-columns: minmax(170px, 1.5fr) repeat(7, minmax(0, 1fr)) 92px 132px; gap: 0;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: visible; }
  .ptable__head { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
  .ptable__head > span { padding: 10px 10px; font-size: 12px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
  .prow { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; border: 0; border-radius: 0; padding: 0; background: none; }
  .prow + .prow { border-top: 1px solid var(--border); }
  .prow--hidden > * { background: var(--surface-sunken); }
  .prow > * { padding: 12px 10px; min-width: 0; }
  .prow__name { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 4px; font-size: 14px; }
  .prow__desc { flex-basis: auto; }
  .pday { display: flex; flex-direction: column; gap: 8px; border-top: 0; border-left: 1px solid var(--border); font-size: 13px; }
  .pday--rest { background: color-mix(in srgb, var(--surface-sunken) 55%, transparent); padding-top: 12px; }
  .pday__wd { display: none; }
  .pday__it { flex-direction: column; align-items: flex-start; gap: 1px; }
  .pday__amt { font-size: 14px; font-weight: 700; }
  /* 세로 flex 안에서 flex-basis: 100% 는 높이가 된다 — 폰용 값을 풀어야 메모가 칸 안에서 줄바꿈한다 */
  .pday__it > * { max-width: 100%; }
  .pday__note { flex-basis: auto; width: 100%; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .prow__sum { display: flex; flex-direction: column; gap: 2px; border-top: 0; border-left: 1px solid var(--border); }
  .prow__acts { flex-direction: row; align-items: flex-start; justify-content: flex-end; padding-top: 10px; }
}

/* ---------------------------------------------------------------- 프로그램 편집 (결정 124 · 2026-10-07 쉽게)
   요일마다: 유형 칩 줄 → 「양」 · 메모 · ⋯ · ✕. 빈 날은 「휴식 · ＋ 훈련」 한 줄.
   하루씩 (mw: "여전히 어렵다") — 요일 목록(짧게) + 고른 날 하나(크게). 폰: 목록 ↔ 그 날 화면을 바꿔 보인다
   (← 로 목록, ‹ › 로 이웃 날). PC: 왼쪽 목록 · 오른쪽 그 날. JS 가 없으면(.wk--js 없음) 일곱 날이 다 펼쳐진다.
   화면을 둘로 만들지 않는다(결정 60 · 87). */
.wk { padding: 0 16px 32px; display: flex; flex-direction: column; gap: 12px; }
.wk__meta { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) {   /* 이름은 짧게, 한 줄 요약은 줄 끝까지 (2026-10-12 mw) */
  .wk__meta { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); }
  .wk__meta .gate__input { max-width: none; }
}
.wk__how { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.wk__how code { font: inherit; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 6px; background: var(--surface-sunken); color: var(--text); }

.wk__split { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wk__list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.wk__pick { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 10px; align-items: start; padding: 12px 14px; border: 0;
  border-top: 1px solid var(--border); background: none; font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; }
.wk__pick:first-child { border-top: 0; }
.wk__pick:hover { background: var(--surface-sunken); }
.wk__pick[aria-current="true"] { background: var(--accent-soft); }
.wk__pick[aria-current="true"] > b { color: var(--accent-text); }
.wk__pick--bad { box-shadow: inset 3px 0 0 var(--warn); }
.wk__sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk__sum > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk__sum i { font-style: normal; color: var(--text-secondary); }
.wk__pick--rest .wk__sum { color: var(--text-muted); }
.wk__chev { color: var(--text-muted); }

.wk__panel { min-width: 0; }
.wk__day { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); }
.wk__dayhead { display: flex; align-items: center; gap: 8px; }
.wk__wd { font-weight: 700; padding-top: 6px; }
.wk__day--rest .wk__wd { color: var(--text-secondary); font-weight: 600; }
.wk__dayhead .wk__wd { font-size: 17px; font-weight: 700; padding: 0; flex: 1; }
.wk__go { border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-secondary); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.wk__go:hover { background: var(--surface-sunken); }
.wk__step { display: none; gap: 2px; }
.wk__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wk__rows { display: flex; flex-direction: column; gap: 8px; }
.wk__rows:empty { display: none; }
.wk__row { display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: left; padding: 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-width: 0; }
.wk__row--bad { border-color: var(--warn); background: var(--warn-soft); }
.wk__types { display: flex; flex-wrap: wrap; gap: 6px; }
.wk__chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.wk__chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.wk__other { height: 32px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 13px; color: var(--text-secondary); max-width: 140px; }
.wk__other.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.wk__line { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
.wk__note { flex: none; width: 100%; min-height: 96px; resize: vertical; line-height: 1.55; overflow: hidden; order: 0; }
.wk__more { position: relative; }
.wk__more > summary { list-style: none; cursor: pointer; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.wk__more > summary::-webkit-details-marker { display: none; }
.wk__more[open] > summary, .wk__more > summary:hover { background: var(--surface-sunken); }
.wk__morebox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 2px 0; }
.wk__del { border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-secondary); padding: 8px 10px; border-radius: 8px; cursor: pointer; margin-left: auto; }
.wk__del:hover { background: var(--surface-sunken); color: var(--danger); }
.wk__foot { display: flex; align-items: center; gap: 10px; }
.wk__rest { display: none; font-size: 14px; color: var(--text-secondary); }
.wk__day--rest .wk__rest { display: inline; }
.wk__add { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; height: 32px; padding: 0 12px;
  font: inherit; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.wk__add:hover { border-color: var(--accent-mid); color: var(--accent-text); }
.wk__snips { display: flex; flex-wrap: wrap; gap: 6px; }
.wk__snip { height: 28px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--surface-sunken);
  font: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.wk__snip:hover { color: var(--accent-text); background: var(--accent-soft); }
.wk__save { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; }

/* 양 = 태그 셋 (2026-10-07). 넣은 것은 「거리 [8] km ✕」 태그, 안 넣은 것은 「＋ 거리」 */
.wk__amts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.wk__tag { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 4px 0 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 600; }
.wk__tagin { width: 64px; height: 28px; padding: 0 8px; border: 1px solid var(--accent-mid); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 16px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.wk__tag[data-k="time"] .wk__tagin { width: 84px; }
.wk__unit { font-weight: 500; }
.wk__tagx { border: 0; background: none; color: var(--accent-text); font-size: 12px; width: 28px; height: 28px; border-radius: 999px; cursor: pointer; }
.wk__tagx:hover { background: color-mix(in srgb, var(--accent-mid) 30%, transparent); }
.wk__tagadd { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.wk__tagadd:hover { border-color: var(--accent-mid); color: var(--accent-text); }

/* JS 가 있으면 하루씩 */
.wk--js .wk__day { display: none; border-top: 0; padding-top: 0; }
.wk--js .wk__day.is-open { display: flex; }
.wk--js .wk__step { display: flex; }
/* 폰 — 목록 ↔ 그 날 */
@media (max-width: 899px) {
  .wk--js.wk--day .wk__list, .wk--js.wk--day .wk__meta, .wk--js.wk--day .wk__how { display: none; }
  .wk--js .wk__panel { display: none; }
  .wk--js.wk--day .wk__panel { display: block; }
}
@media (min-width: 900px) {
  .wk { width: 100%; margin-left: auto; margin-right: auto; }
  .wk__meta { flex-direction: row; }
  .wk__meta input:first-child { flex: 1; } .wk__meta input:last-child { flex: 2; }
  .wk__split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
  .wk__list { position: sticky; top: 12px; }
  .wk__row { padding: 12px 14px; }
  .wk__note { min-height: 160px; }
  .wk__more { flex: none; }
  .wk__morebox { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.10); white-space: nowrap; }
  .wk__tagin { font-size: 14px; }
}

/* 새 프로그램 — 시작하기 (2026-10-07, 목록의 만들기 패널을 옮겼다). 편집 폼(.wk)과 같은 폭.
   어떻게 시작할까 — 타일 셋. 고른 것은 초록 테두리 · 연한 초록 바탕. 폰은 위아래, PC 는 셋 나란히 */
.wkstart { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 12px; }
.wkstart--io { padding-top: 8px; padding-bottom: 32px; }
.wkstart__title { font-size: 15px; font-weight: 700; }
.wkpick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.wkpick__tile { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); text-decoration: none; min-width: 0; }
.wkpick__tile > svg { grid-row: span 2; color: var(--text-secondary); align-self: start; margin-top: 1px; }
.wkpick__tile > b { font-size: 14px; }
.wkpick__tile > span, .wkpick__tile > .combo { grid-column: 2; font-size: 12px; color: var(--text-secondary); }
a.wkpick__tile:hover { border-color: var(--accent-mid); }
.wkpick__tile.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.wkpick__tile.is-on > svg, .wkpick__tile.is-on > b { color: var(--accent-text); }
.wkpick__tile.is-off { color: var(--text-muted); }
.wkpick__tile.is-off > b { color: var(--text-secondary); }
.wkpick__tile .combo { max-width: none; flex: none; margin-top: 6px; }
.wkpick__combo { min-height: 36px !important; font-size: 14px !important; }

/* 가져오기 · 내보내기 카드 둘 (2026-10-07) — 폰은 위아래, PC 는 나란히 */
.wkio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.card.wkio__card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; min-width: 0; margin: 0; }   /* 훈련 카드의 PC 최소 높이를 물려받지 않게 */
.wkio__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; }
.wkio__head a { font-size: 13px; }
.wkio__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wkio__hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.wkimp__pick { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
.wkimp__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.wkimp__chk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.wkimp__chk input { width: 14px; height: 14px; margin: 0; }

@media (min-width: 900px) {
  .wkstart { width: 100%; box-sizing: border-box; }   /* 편집 폼(.wk)처럼 페이지 폭(1280) 그대로 — 가운데로 몰면 아래와 줄이 어긋났다 */
  .wkpick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wkio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 클럽 홈 — 두 기둥 · 허브
   .sgrid 의 넓은 화면 규칙은 .hub 뒤에 둔다 — 허브가 왼쪽 기둥(sgrid__main hub)이라
   폰에서는 .hub 의 flex · 16px 이, PC 에서는 기둥의 14px 이 이겨야 한다. */
.sgrid { display: flex; flex-direction: column; gap: 14px; }
/* 두 기둥 — 폰에서는 기둥을 풀어 한 줄로(가입 요청이 맨 위), PC 에서는 기둥마다 위에서부터 쌓는다 */
.sgrid__main, .sgrid__side, .sgrid__pre { display: contents; }
.snap__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 6px; }
.sgrid__first { order: -1; }

.hub { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hub__search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 6px 0 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); }
.hub__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); outline: none; }
.hub__clear { white-space: nowrap; padding-right: 10px; }
.hub__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.hub__title { font-size: 22px; font-weight: 700; margin: 8px auto 0 4px; }
.hub__h { font-size: 16px; font-weight: 700; padding: 0 2px 8px; }
/* 클럽 만들기 — 평소엔 접어 두고 「+ 클럽 만들기」(#create)를 누르면 검색 아래에 편다. 오류가 나면 펼친 채로 */
/* .card(display: flex)를 함께 건다 — .card 가 뒤에 와서 덮여 늘 펼쳐져 있었다 */
.card.hub__create { display: none; }
.card.hub__create:target, .card.hub__create--open { display: flex; }
.cards { display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; padding: 0 16px; }   /* 행 목록 (결정 146 B) */
.ccard { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; min-width: 0; }
.ccard:first-child { border-top: 0; }
.ccard__cover { display: none; }   /* 행에는 커버 띠가 없다 — 클럽 홈 머리에만 */
.ccard__icon { flex: none; display: inline-flex; }
.ccard__name { font-size: 15px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.ccard__last { color: var(--accent); }
.ccard__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ccard__body .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard form { margin: 0; }
@media (min-width: 900px) {
  /* 두 칸 — 왼쪽 본문 · 오른쪽 카드(340px) */
  .sgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
  .sgrid--3 { grid-template-columns: 260px minmax(0, 1fr) 320px; }   /* 회원 탭 — 요약 · 활동 · 목록 (2026-10-12 mw) */
  .sgrid__main, .sgrid__side, .sgrid__pre { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .sgrid__first { order: 0; }
  .hub__search { height: 40px; }
  .hub__search input { font-size: 14px; }
  .hub__title { font-size: 26px; margin: 16px auto 0 0; }
  .hub__top .btn { margin-top: 16px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 클럽 홈 — 카드 안 */

.post__head { display: flex; align-items: center; gap: 10px; }
.post__head .avatar { color: #fff; }
.post__who { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14px; }
.post__title { font-size: 18px; font-weight: 700; }
.act { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.act:first-of-type { border-top: 0; }
/* 최근 활동의 그림 — 일의 종류 셋, 같은 크기 · 같은 선 아이콘. 색은 뜻: 새 프로그램(강조) · 들어옴(중립) · 요청(할 일) */
.act__icon { width: 32px; height: 32px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.act__icon--program { background: var(--accent-weak); color: var(--accent); }
.act__icon--joined { background: var(--surface-sunken); color: var(--text-secondary); }
.act__icon--asked { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.act__icon--session { background: var(--accent-soft); color: var(--accent); }
.act__icon--review { background: var(--warn-soft); color: var(--warn-ink); }
.act--link { color: inherit; text-decoration: none; }
.act--link:hover b { color: var(--accent); }
.act__body .tag { font-size: 11px; vertical-align: 1px; }
.act__body { display: flex; flex-direction: column; gap: 1px; font-size: 14px; min-width: 0; }
.faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.faces__one { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; color: inherit; text-decoration: none; }
a.faces__one:hover .faces__name { color: var(--accent); }
.faces__name { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 이번 주 프로그램 7일 */
.week7 { display: flex; flex-direction: column; }
.week7__day { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border);
  font-size: 14px; align-items: baseline; }
.week7__wd { color: var(--text-secondary); }
.week7__amt { font-variant-numeric: tabular-nums; text-align: right; }
.week7__day--rest .week7__type, .week7__day--rest .week7__amt { color: var(--text-secondary); }
@media (min-width: 900px) {
  .week7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .week7__day { display: flex; flex-direction: column; gap: 4px; border: 1px dashed var(--border-strong); border-radius: 10px;
    padding: 10px; min-height: 92px; }
  .week7__wd { font-size: 12px; }
  .week7__type { font-weight: 600; }
  .week7__amt { text-align: left; font-size: 16px; font-weight: 700; }
}

/* ---------------------------------------------------------------- 회원 (2026-10-07)
   운영진 · 회원 두 묶음의 카드. PC 3열, 폰 한 줄씩 */
.mem__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mem { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border-radius: 12px; padding: 10px 16px 4px; }   /* 면 — 행 목록을 담는다 (결정 146 B) */
.mem__title { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.mem__title span { font-weight: 500; margin-left: 2px; }
.mem__grid { display: flex; flex-direction: column; }
.mem__card { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.mem__card:first-child { border-top: 0; }
.mem__card .avatar { flex: none; }
.mem__who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.mem__who > b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mem__me { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); }
.mem__since { flex-basis: 100%; font-size: 12px; color: var(--text-secondary); }
.mem__leave { display: flex; justify-content: center; padding-top: 8px; }
.mem__leave button { border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
.mem__leave button:hover { color: var(--danger); }

/* ---------------------------------------------------------------- 초대 (2026-10-07)
   가입 요청(카드) · 초대하기 두 카드(PC 나란히, 높이를 맞춘다 — mw) · 발급한 코드(줄) */
#invite { scroll-margin-top: 16px; }
.inv__two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.card.inv__card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin: 0; min-width: 0; }
.inv__head { display: flex; flex-direction: column; gap: 2px; }
.inv__head b { font-size: 15px; }
.inv__head span { font-size: 12px; color: var(--text-secondary); }
/* 카드 안의 검색바 — 카드 안에서 납작하게 눌렸다(flex 세로 묶음이 높이를 줄였다). 입력칸 높이(40)에 맞춘다 */
.inv__card .psearch { max-width: none; flex: none; height: 40px; }
.inv__card .psearch--btn { height: 40px; flex: none; }
.inv__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inv__line form { margin: 0; }
.inv__list { display: flex; flex-direction: column; }
.card.inv__card.inv__list { gap: 0; padding: 4px 16px; }
.inv__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.inv__list > .inv__row:first-child { border-top: 0; }
.inv__row.is-off { opacity: .55; }
.inv__row .avatar { flex: none; width: 32px; height: 32px; font-size: 13px; color: #fff; }
.inv__name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 14px; }
.inv__name small { flex-basis: 100%; font-size: 12px; color: var(--text-secondary); }
.inv__acts { display: flex; gap: 6px; flex: none; }
.inv__acts form { margin: 0; }
.inv__empty { margin: 0; padding: 8px 0; font-size: 13px; color: var(--text-secondary); }
.inv__code { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--accent-soft); }
.inv__code .inv__codeval { font-size: 24px; letter-spacing: .12em; color: var(--accent-text); }
/* API 토큰 (설정, 결정 122) — 초대 코드와 같은 상자에 원문, 목록은 줄 · 만들기는 한 줄 */
.tokval { font-size: 15px !important; letter-spacing: 0 !important; word-break: break-all; }
.tokrow { gap: 10px; }
.tokrow.is-off { opacity: .55; }
.tokrow__name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.tokrow__name small { flex-basis: 100%; font-size: 12px; color: var(--text-secondary); }
.tokform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; }
.tokform .gate__input { flex: 1 1 220px; max-width: 320px; }
.tokform .wk__in { min-height: 36px; padding: 4px 8px; font-size: 14px; }
.inv__code small { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.inv__codeval { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; min-width: 92px; }
/* 거두기 — 휴지통 아이콘 (2026-10-07 mw) */
.inv__trash { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px;
  background: none; color: var(--text-secondary); cursor: pointer; }
.inv__trash:hover { background: var(--surface-sunken); color: var(--danger); }
.inv__done { flex: none; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.inv__done--warn { color: var(--warn-ink); }
@media (min-width: 900px) { .inv__two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }

/* ---------------------------------------------------------------- 클럽 설정 (2026-10-07) · 회원 설정 (결정 139)
   기본 정보 · 아이콘 두 카드, 미리보기는 위 클럽 머리. 회원 설정(.sett--me)도 같은 카드 — PC 두 기둥 · 폰 한 줄 */
.sett { display: flex; flex-direction: column; gap: 12px; }
.sett__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* 회원 설정의 두 기둥(settings.html) — 기둥 안에서 카드가 위에서부터 쌓인다. 폰은 기둥이 세로로 이어진다 */
.sett__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card.sett__card { display: flex; flex-direction: column; gap: 14px; padding: 16px; margin: 0; min-width: 0; }
.sett__field { display: flex; flex-direction: column; gap: 6px; }
.sett__field > span { font-size: 13px; font-weight: 600; color: var(--text); }
.sett__field small { font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
.sett__field .gate__input, .sett__field .memo { width: 100%; max-width: none; box-sizing: border-box; }
.card.sett__danger { padding: 12px 16px; margin: 8px 0 0; }
.sett__danger > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--danger); }
.sett__danger[open] { display: flex; flex-direction: column; gap: 10px; }
.sett__danger .hint { margin: 0; }
.sett__del { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sett__del .gate__input { flex: 1 1 240px; max-width: 360px; }
.sett__head { display: flex; flex-direction: column; gap: 2px; }
.sett__head b { font-size: 15px; }
.sett__head span { font-size: 12px; color: var(--text-secondary); }
.sett__line { display: flex; gap: 8px; align-items: center; }
.sett__line > :is(.gate__input, .memo) { flex: 1 1 160px; min-width: 0; width: auto; }
.sett__hint { margin: 0; font-size: 13px; line-height: 1.5; }
/* 카드 안 목록 — 옛 설정 화면의 줄(.settings__row)을 카드에 맞게 낮췄다 */
.sett__rows { display: flex; flex-direction: column; }
.sett__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; min-height: 48px;
  border-top: 1px solid var(--border); color: inherit; font-size: 15px; }
.sett__row:first-child { border-top: 0; padding-top: 4px; }
.sett__value { color: var(--text-secondary); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.sett__rowform { margin: 0; }
.sett__row--btn { width: 100%; background: none; border: 0; border-top: 1px solid var(--border); font: inherit; cursor: pointer; text-align: left; color: inherit; }
.msheet__form { display: contents; }
.sett--me { padding: 0 16px 32px; }
/* 회원 설정의 버튼 — 관리 화면(6 절)과 같이 글자 크기로. 폰 입력 화면의 폭 100% 버튼이 카드마다 한 줄씩 차지했다 */
.sett--me .btn { display: inline-flex; width: auto; min-height: 40px; padding: 0 14px; font-size: 14px; flex: 0 0 auto; align-self: flex-start; min-width: 0; }
.sett--me .btn--sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.sett--me .tokform { padding: 0; }
.sett--me .sett__bye { margin-top: 12px; }
.sett__pic { display: flex; align-items: center; gap: 14px; }
.sett__pic .clubicon--xl { width: 72px; height: 72px; font-size: 32px; border-radius: 18px; flex: none; }
.sett__picbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.sett__picbody .sett__line { flex-wrap: wrap; }
.sett__file { position: relative; overflow: hidden; cursor: pointer; }
.sett__file input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.sett__byehead { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--text); }
.sett__byelist { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.sett__byelist b { color: var(--text); }
.sett__agree { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.sett__agree input { width: 16px; height: 16px; margin: 0; }
.sett--me .tokrow > form { margin: 0; flex: 0 0 auto; }
@media (min-width: 900px) {
  .sett__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }   /* 카드는 제 높이만큼만 — 늘리면 빈 공간이 컸다(mw) */
  .sett--me { padding: 0; }
}

/* ---------------------------------------------------------------- 내 공간(프로필) — 클럽 머리와 같은 틀 (결정 132 1단계, 2026-10-07) */
.pstats { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pstats b { color: var(--text); font-variant-numeric: tabular-nums; }
.pline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pline .tag { text-decoration: none; }
.pclub { color: var(--text-secondary); }
.pclub:hover { color: var(--text); }
/* 내 공간 — 탭 안의 주 · 달 넘기기 줄은 낮게(머리 · 탭 아래라 큰 머리줄이 필요 없다) */
.pmain .ptoolbar { position: static; min-height: 0; padding: 0 0 4px; border: 0; background: none; }

/* 머리(히어로) 없음 (2026-10-08 mw). 활동 탭(PC) = 3단 280 · 1fr · 280 — 스트라바 대시보드. 옆 기둥은 스크롤해도 따라온다.
   주간 · 달력 · 대회 = 혼자 선 탭 줄 + 전체 폭. 폰은 옆 기둥 없이 한 줄 */
.dash { display: contents; }
.dash__side { display: none; }
@media (min-width: 900px) {
  .dash { display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
  .dash--single { display: contents; }
  .dash__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }   /* 위 막대 60 + 16 */
}
.card.pcard { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin: 0; min-width: 0; }
.pcard__top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 2px; text-align: center; }
.pcard__name { font-size: 20px; font-weight: 700; }
.pcard__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: 12px; color: var(--text-secondary);
  padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pcard__stats small { display: block; font-size: 12px; }
.pcard__stats b { display: block; font-size: 18px; }
.pcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.pcard__row b { color: var(--text); }
.pcard__row a { color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 최근 8주 — 막대(거리) 한 줄 + 점(계획 수행) 한 줄. 점: 초록 다 함 · 노랑 일부 · 회색 안 함 · 빈 원 계획 없음 */
.pbars { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.pbars__head, .pbars__foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); }
.pbars__head b { color: var(--text); font-size: 13px; }
.pbars__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; align-items: end; height: 64px; }
.pbars__row i { display: block; border-radius: 4px 4px 0 0; background: var(--accent-mid); }
.pbars__row i.is-now { background: var(--accent); }
.pbars__dots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; justify-items: center; }
.pbars__dots i { width: 8px; height: 8px; border-radius: 999px; box-sizing: border-box; border: 1.5px solid var(--border); }
.pbars__dots .d-all { background: var(--accent); border-color: var(--accent); }
.pbars__dots .d-some { background: var(--warn); border-color: var(--warn); }
.pbars__dots .d-zero { background: var(--neutral-bar); border-color: var(--neutral-bar); }
/* 「나」 프로필 (2026-10-08 mw, 스트라바 You). 폰은 한 줄 카드, PC 로 열면 가운데 680px */
.prof { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 680px; margin: 0 auto; }
.card.prof__card { display: flex; flex-direction: column; gap: 12px; padding: 16px; margin: 0; min-width: 0; }
.prof__top { display: flex; align-items: center; gap: 14px; }
.prof__top .clubicon--xl { width: 64px; height: 64px; font-size: 28px; border-radius: 18px; }
.prof__top .hint { display: block; font-size: 13px; }
.prof__name { display: block; font-size: 20px; font-weight: 700; }
.prof__streak { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--text); }
.prof__streak b { font-size: 18px; }
.prof__streak svg { color: var(--warn); }
.prof__acts { display: flex; gap: 8px; }
.prof__acts .btn { flex: 1; min-height: 40px; width: auto; }
.prof__card .snap__head { margin-bottom: 0; }
.prof__card .pbars { margin-top: 4px; }
/* 페이스 추이 (2026-10-11, 장부 3) — 유형 · 스파크라인 · 이전 → 최근 · 변화 */
.trend { display: flex; flex-direction: column; margin-top: 4px; }
.trend__row { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto 58px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
.trend__row:first-child { border-top: 0; }
.trend__type { display: flex; flex-direction: column; line-height: 1.3; font-weight: 600; min-width: 0; }
.trend__type small { font-weight: 500; font-size: 12px; color: var(--text-secondary); }
.trend__spark { overflow: visible; display: block; }
.trend__spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trend__pace { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-variant-numeric: tabular-nums; }
.trend__pace small { font-size: 12px; color: var(--text-secondary); }
.trend__pace b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.trend__delta { font-size: 13px; font-weight: 700; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.trend__delta.is-fast { color: var(--accent); }
.trend__delta.is-slow { color: var(--warn); }
.trend__foot { margin: 8px 0 0; }
/* 주간 거리와 통증 (2026-10-11, 장부 4) — 12주 막대 + 통증 점 */
.body__surge .snap__head { margin-bottom: 8px; }
.surge__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; height: 92px; }
.surge__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.surge__bar { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent-mid); }
.surge__bar.is-now { background: var(--accent); }
.surge__bar.is-surge { background: var(--warn); }
.surge__pain { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.surge__pain.is-on { background: var(--danger); }
.surge__sum { font-size: 13px; margin: 8px 0 0; line-height: 1.5; }
.surge__key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent-mid); }
.surge__key--surge { background: var(--warn); }
.surge__key--now { background: var(--accent); }
.surge__key--pain { border-radius: 999px; background: var(--danger); }
/* 남의 프로필(/runners) — PC 는 내 활동 탭과 같은 3단. 폰도 내 활동 탭과 같은 구성(mw): 맨 위 띠(N월 요약 + 8주, .snap) → 피드 → 「활동 중인 클럽」 카드.
   왼쪽 큰 카드는 폰에서 숨긴다(이름은 위 막대에). .social--page 는 gap 이 0 이라 카드 사이 숨을 여기서 준다 */
.dash--runner { display: flex; flex-direction: column; gap: 14px; padding: 0 12px 24px; }
@media (max-width: 899px) {
  .dash--runner .dash__left { display: none; }
  .dash--runner .dash__right { display: flex; flex-direction: column; gap: 14px; }
}
@media (min-width: 900px) { .dash--runner { display: grid; padding: 0; } }
.mem__link { color: inherit; }
a.avatar { text-decoration: none; }
.mem__link:hover b { color: var(--accent); text-decoration: underline; }
.pclubrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--text); font-size: 14px; }
.pclubrow span:not(.clubicon) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pclubrow small { font-size: 12px; color: var(--text-secondary); }
.pcard__more { font-size: 13px; }
/* 활동 피드 (결정 132) — 카드 한 장이 훈련 하나. 폭은 본문 가운데 680px(읽기 좋은 피드 폭) */
.feed { display: flex; flex-direction: column; gap: 12px; max-width: 680px; width: 100%; margin: 0 auto; }
.card.feed__post { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin: 0;
  color: var(--text); text-decoration: none; }
.card.feed__post:hover { border-color: var(--border-strong); }
.feed__head { display: flex; align-items: center; gap: 10px; }
.feed__who { display: flex; flex-direction: column; line-height: 1.3; }
.feed__who b { font-size: 14px; }
.feed__who small { font-size: 12px; color: var(--text-secondary); }
.feed__type { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 3px; }
.feed__peer { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }   /* 머리 = 프로필로 */
.feed__peer:hover b { color: var(--accent); }
.feed__title { font-size: 15px; line-height: 1.45; }
.feed__title b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* 긴 메모는 두 줄에서 — 전부는 읽기 화면에 */
.feed__stats { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-top: 4px; }   /* 왼쪽에 모은다 — 1fr 셋으로 펼치면 PC 에서 흩어진다 */
.feed__stats div { display: flex; flex-direction: column; gap: 2px; min-width: 72px; }
/* 클럽의 피드 머리 — 카드 밖에 제목 한 줄 · 오른쪽에 건수 · 더 보기 */
.feed__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: -2px; }
.feed__top b { font-size: 15px; }
.feed__top span { font-size: 12px; color: var(--text-secondary); }
.feed__top + .feed { margin-top: 10px; }
.sgrid__main .feed { max-width: none; }
.sgrid__main .pager { margin-top: 12px; }
.feed__stats small { font-size: 12px; color: var(--text-secondary); }
.feed__stats b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.feed__stats i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.feed__av { width: 32px !important; height: 32px !important; font-size: 14px !important; border-radius: 999px !important; flex: none; }

/* 주간 목표 고리 · 강도 분포 (결정 145) — pbars 와 같은 자리에서 쓴다 */
.goal { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.goal__ring { flex: none; transform: rotate(-90deg); }
.goal__bg, .goal__fg { fill: none; stroke-width: 5; stroke-linecap: round; }
.goal__bg { stroke: var(--border); }
.goal__fg { stroke: var(--accent); transition: stroke-dasharray .4s ease; }
.goal--over .goal__fg { stroke: var(--accent-strong, var(--accent)); }
.goal__text { display: flex; flex-direction: column; line-height: 1.15; }
.goal__text b { font-size: 15px; font-variant-numeric: tabular-nums; }
.goal__text small { font-size: 11px; color: var(--text-secondary); }
.goal--none { font-size: 12px; color: var(--text-secondary); }
.snap__goal { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.snap__share { font-size: 13px; white-space: nowrap; }
/* 이번 주 한 줄 (결정 148) — 활동 맨 위, 할 일 하나 */
.nudge { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--accent-weak); color: var(--text); font-size: 14px; text-decoration: none; }
.nudge b { color: var(--accent); white-space: nowrap; font-weight: 600; }
.pcard__row--goal { align-items: center; }
.pcard__row--views a { color: var(--accent); font-weight: 600; }
.weeknav__who { color: var(--text-secondary); font-weight: 600; }   /* 남의 주간 · 달력 — 누구 것인지 (2026-10-12) */
.inten { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; border-top: 1px solid var(--border); }
.inten__head, .inten__foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); }
.inten__head b { color: var(--text); font-size: 13px; }
.inten__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--border); }
.inten__bar i { display: block; min-width: 0; }
.inten__easy { background: var(--accent-mid); }
.inten__hard { background: var(--accent); }
.goalform { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 8px; }
.goalform__opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.goalform .input--sm { width: 72px; padding: 4px 8px; }
/* 주간 공유 카드 화면 (결정 145) */
.cardpage { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 32px; max-width: 580px; }
.cardpage__img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.cardpage__acts { display: flex; flex-direction: column; gap: 8px; }
.summary__card { margin-left: auto; font-size: 13px; }
.summary__card--2 { margin-left: 0; }
/* 주간 일지 (결정 161) — 시트 그 표. 폰: 요일 세로 · 칸마다 이름. PC: 7열 + 왼쪽 행 이름 열(subgrid 로 행 높이를 맞춘다) */
.wpage { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 0 auto; padding: 0 0 24px; }   /* 폭은 틀(--page 1280)을 다 쓴다 (2026-10-12 mw) */
.wpage--public { padding: 12px 16px 48px; }
.wpage__kicker { margin: 0; font-size: 13px; color: var(--accent); font-weight: 600; }
.wpage__foot { margin: 4px 0 0; }
.wsheet__head { display: flex; flex-direction: column; gap: 10px; }
.wsheet__title { display: flex; align-items: center; gap: 10px; }
.wsheet__title > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wsheet__title b { font-size: 18px; }
.wsheet__title small { font-size: 13px; color: var(--text-secondary); }
.wsheet__sum { padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 넷이 한 줄 (2026-10-12 mw) */
.wsheet__pain b { color: var(--danger); }
.wsheet__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.wsheet__acts .btn { width: auto; }
.wsheet { display: flex; flex-direction: column; gap: 10px; }
.wsheet__labels { display: none; }
.wsheet__day { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wsheet__day.is-today { border-color: var(--accent); }
.wsheet__day.is-empty { opacity: .72; }
.wsheet__date { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.wsheet__date b { font-size: 15px; }
.wsheet__date span { color: var(--text-secondary); }
.wsheet__date em { font-style: normal; font-size: 11px; color: var(--accent); font-weight: 700; margin-left: auto; }
.wsheet__cell { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; min-width: 0; }
.wsheet__cell::before { content: attr(data-label); flex: 0 0 34px; font-size: 12px; color: var(--text-secondary); padding-top: 2px; }
.wsheet__cell.is-blank { display: none; }
.wsheet__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wsheet__item { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.wsheet__item small { flex-basis: 100%; font-size: 12px; color: var(--text-secondary); }
.wsheet__item .tag { font-size: 11px; }
.wsheet__plan--done b { color: var(--accent); }
.wsheet__plan--skipped { color: var(--text-secondary); }
.wsheet__rest b { color: var(--warn); }
.wsheet__cell--note p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.wsheet__none { color: var(--text-muted); }
.wshare__new { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.wshare__new input { flex: 1; min-width: 0; font-size: 13px; }
.wshare__make { margin: 6px 0 8px; }
.wshare .btn--sm { width: auto; }
.wshare .lrow form { margin: 0; }
@media (min-width: 900px) {
  .wsheet { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .wsheet__labels { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 5); }
  .wsheet__lab { font-size: 12px; color: var(--text-secondary); padding-top: 10px; }
  .wsheet__day { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 5); gap: 0; padding: 0; overflow: hidden; }
  .wsheet__date { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .wsheet__cell { padding: 8px 12px; border-top: 1px solid var(--border); font-size: 13px; }
  .wsheet__cell::before { content: none; }
  .wsheet__cell.is-blank { display: flex; }
  .wsheet__cell--note p { display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; }
}
/* 읽기 화면 — 훈련 · 계획 (결정 146 B): 머리(유형 · 날짜 · 큰 숫자 셋) → 행들 → 메모 → 동작. 면 셋이 바탕색 띠로 나뉜다 */
.detail { display: flex; flex-direction: column; gap: 8px; padding: 0 0 32px; }
.detail__head, .detail__rows, .detail__note { background: var(--surface); padding: 16px; }
.detail__type { display: flex; align-items: center; gap: 8px; font-size: 22px; }
.detail__type b { font-weight: 700; }
.detail__type small { font-size: 14px; color: var(--text-secondary); }
.detail__date { font-size: 14px; color: var(--text-secondary); margin-top: 2px; }
.detail__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.detail__stats small { display: block; font-size: 12px; color: var(--text-secondary); }
.detail__stats b { font-size: 26px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.detail__stats i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.detail__rows { display: flex; flex-direction: column; padding-top: 4px; padding-bottom: 4px; }
.detail__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14px; }
.detail__row:first-child { border-top: 0; }
.detail__row > span:first-child { flex: 0 0 88px; color: var(--text-secondary); }
.detail__val { flex: 1; text-align: right; min-width: 0; }
.detail__sub { display: block; font-size: 13px; color: var(--text-secondary); white-space: pre-line; }
.detail__planref { font-size: 13px; line-height: 1.6; color: var(--text-secondary); white-space: pre-line; padding: 0 0 12px 88px; margin-top: -6px; }   /* 계획 설명 — 행 이름 칸만큼 들여 왼쪽 정렬 */
@media (max-width: 599px) { .detail__planref { padding-left: 0; } }
.detail__go { display: block; font-size: 13px; margin-top: 2px; }
.detail__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.detail__text { font-size: 15px; line-height: 1.6; white-space: pre-line; }
.detail__acts { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 16px 0; }
.detail__owner { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: inherit; font-size: 14px; }
.detail__owner .avatar { width: 24px; height: 24px; font-size: 11px; }
/* 동작 줄의 단추는 글자 폭 — .btn 기본 폭 100% 가 셋을 한 줄에 100% 씩 두어 「계획 수정 · 휴식」 이 화면 왼쪽 밖으로 밀려났다(2026-10-09 mw).
   폰에서는 주 단추(훈련 완료)만 남은 폭을 갖는다 */
.detail__acts .btn { width: auto; flex: 0 0 auto; min-height: 44px; padding: 0 16px; font-size: 15px; }
.detail__acts .btn--primary { flex: 1 1 auto; }
.detail__acts form { margin: 0; display: contents; }
/* 행 목록 (결정 146 B) — 면 안의 목록은 이것으로: 왼쪽 이름표 · 오른쪽 값, 또는 아바타 · 이름 · 꺾쇠. 테두리 상자를 겹치지 않는다 */
.lrows { display: flex; flex-direction: column; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; min-width: 0; color: inherit; text-decoration: none; }
.lrow:first-child { border-top: 0; }
.lrow > span:first-child:not(.avatar):not(.lrow__main) { flex: 0 0 72px; color: var(--text-secondary); }
.lrow__val { flex: 1; text-align: right; min-width: 0; }
.lrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lrow__main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow__main small { font-size: 12px; color: var(--text-secondary); }
.lrow__chev { color: var(--text-muted); font-size: 18px; }
.lrow__dim { font-weight: 500; color: var(--text-secondary); }
.lrow .avatar { width: 32px; height: 32px; font-size: 13px; flex: none; }
.lrow--link:hover b { color: var(--accent); }
@media (min-width: 900px) {
  .detail { max-width: 680px; margin: 0 auto; width: 100%; gap: 12px; }
  .detail__head, .detail__rows, .detail__note { border-radius: 12px; padding: 20px; }
  .detail__acts { padding: 0; }
  .detail__social, .detail__comments { padding-left: 0; padding-right: 0; }
}

/* 통증 · 부상 칸 (결정 145 보완) — 접힌 <details>, 펴면 부위 · 정도 칩 + 한 줄 */
.painbox > summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.painbox > summary::-webkit-details-marker { display: none; }
.painbox > summary::before { content: "▸"; font-size: 12px; color: var(--text-secondary); }
.painbox[open] > summary::before { content: "▾"; }
.painbox__body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.chips--level label { min-width: 64px; text-align: center; }

/* 부상 타임라인 — 부위별 (2026-10-09 mw: 카드 안 여백 · 띠의 뜻) */
.body { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 24px; }
.body__head { display: flex; align-items: baseline; gap: 10px; }
.body__head h1 { font-size: 20px; margin: 0; }
.body__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-secondary); }
.body__legend span { display: inline-flex; align-items: center; gap: 6px; }
.body__legend .body__sdot { position: static; margin: 0; }
.body__site { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.body__site--active { border-color: var(--warn); }
.body__sitehead { display: flex; justify-content: space-between; align-items: center; }
.body__sitehead b { font-size: 17px; }
.body__strip { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 8px; border-radius: 10px; background: var(--track); }
.body__shead { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.body__shead b { font-size: 13px; }
.body__axis { position: relative; height: 26px; margin: 4px 6px 0; border-bottom: 2px solid var(--border); }
.body__tick { position: absolute; bottom: -2px; width: 1px; height: 8px; background: var(--text-muted); }
.body__sdot { position: absolute; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 999px; background: var(--accent); box-sizing: border-box; border: 2px solid var(--surface); }
.body__sdot--l2 { background: var(--warn); }
.body__sdot--l3 { background: var(--danger); }
.body__sdot--text { background: var(--text-muted); }
.body__sdot--rest { background: var(--surface); border-color: var(--text-muted); }
.body__ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin: 0 6px; }
.body__ep > summary { list-style: none; cursor: pointer; }
.body__ep > summary::-webkit-details-marker { display: none; }
.body__ep:not([open]) { opacity: .72; }
.body__eprow { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.body__tl { list-style: none; margin: 0; padding: 0 0 0 8px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.body__pt { display: grid; grid-template-columns: 14px 44px minmax(0, 1fr) auto; gap: 6px; align-items: start; position: relative; }
.body__pt i { width: 10px; height: 10px; border-radius: 999px; margin-top: 5px; margin-left: -14px; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--accent); }
.body__pt--l2 i { background: var(--warn); box-shadow: 0 0 0 1.5px var(--warn); }
.body__pt--l3 i { background: var(--danger); box-shadow: 0 0 0 1.5px var(--danger); }
.body__pt--text i { background: var(--text-muted); box-shadow: 0 0 0 1.5px var(--text-muted); }
.body__pt--rest i { background: var(--surface); box-shadow: 0 0 0 1.5px var(--text-muted); }
.body__date { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.body__what { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 14px; }
.body__what small { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }
.body__what em { font-style: normal; }
.body__note { font-size: 14px; color: var(--text); }
.body__go { color: var(--text-secondary); text-decoration: none; padding: 0 4px; }
.body__foot { padding: 0 4px; }
@media (min-width: 900px) { .body { padding: 0 24px 32px; max-width: 760px; } }

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

   로그인·가입은 앱 안이 아니라 앱 앞이다. 상단바도 주간 이동도 없이 가운데에만 둔다. */
.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; }
.gate__form .btn { margin-top: 8px; }
.gate__form .field__label { margin-top: 8px; }
/* 문 앞 화면(로그인·가입) 아래 안내 링크.
   14px 에 위 여백 8px 로 뒀더니 **만들라고 한 사람도 못 봤다.**
   버튼 바로 밑에 붙어 있어 폼의 일부처럼 읽힌 것이다 —
   떼어놓고, 키우고, 밑줄을 준다. */
.gate__foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
              font-size: 15px; color: var(--text-secondary); text-align: center; }
.gate__foot a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- 관리자 화면 */

.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; }

/* 관찰 화면의 한 줄. 라벨은 왼쪽, 값은 오른쪽 — 사람이 바뀌어도 눈이 같은 자리를 본다. */
.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; }

/* 대시보드 */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi__label { font-size: 13px; color: var(--text-secondary); }
.kpi__value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: 12px; color: var(--text-secondary); }
.kpi__sub--up { color: var(--success); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.bars__bar { width: 100%; border-radius: 5px 5px 0 0; background: var(--accent-weak); min-height: 2px; }
.bars__col--now .bars__bar { background: var(--accent); }
.bars__n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bars__wk { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.logbox { margin: 0; max-height: 420px; overflow: auto; padding: 12px; border-radius: 10px; background: var(--surface-sunken);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- API 문서 (관리자, 2026-10-08) — swagger 대신 우리 표 */
.apidoc__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.apidoc__steps { margin: 6px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.apidoc__pre { margin: 6px 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-sunken); font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.apidoc__group { gap: 0; padding: 12px 18px; }
.apidoc__group .card__head { padding-bottom: 6px; }
.apidoc__op { border-top: 1px solid var(--border); }
.apidoc__op > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 0; min-height: 40px; }
.apidoc__op > summary::-webkit-details-marker { display: none; }
.apidoc__m { flex: none; width: 60px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 0; border-radius: 6px; color: #fff; background: var(--neutral-bar); }
.apidoc__m--get { background: #2E7D6F; } .apidoc__m--post { background: #3B6FD4; } .apidoc__m--patch { background: #D07A1F; } .apidoc__m--put { background: #D07A1F; } .apidoc__m--delete { background: #C8463C; }
.apidoc__path { font-size: 13px; flex: none; }
.apidoc__sum { flex: 1; min-width: 0; font-size: 14px; color: var(--text-secondary); }
.apidoc__body { padding: 4px 0 14px 70px; display: flex; flex-direction: column; gap: 8px; }
.apidoc__t { width: auto; min-width: 420px; border-collapse: collapse; font-size: 13px; }
.apidoc__t th { text-align: left; font-weight: 500; color: var(--text-secondary); padding: 4px 14px 4px 0; border-bottom: 1px solid var(--border); }
.apidoc__t td { padding: 5px 14px 5px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
@media (min-width: 900px) { .apidoc__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 899px) { .apidoc__op > summary { flex-wrap: wrap; } .apidoc__body { padding-left: 0; } .apidoc__t { min-width: 0; width: 100%; } }

/* ---------------------------------------------------------------- 안내 페이지

   글을 읽는 화면이다. 앱 화면과 달리 문단과 목록이 있고, 그 둘은 지금까지
   토큰이 없었다. 상자는 새로 만들지 않는다 — 카드는 .prog 를 그대로 쓴다
   (디자인 시스템: 상자는 셋뿐이다). */

.doc { display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 48px; }
.doc__title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 0; }
.doc__lead { font-size: 17px; line-height: 1.6; color: var(--text-secondary);
             margin: 0 0 8px; text-wrap: pretty; }
.doc h2 { font-size: 16px; font-weight: 600; margin: 20px 0 0; }
.doc p { margin: 0; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.doc ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.doc li { line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.doc li b, .doc p b { color: var(--text); font-weight: 600; }
.doc .hint { display: block; font-size: 13px; }
.doc h3.doc__h3 { font-size: 15px; font-weight: 600; margin: 14px 0 0; }
.doc ol.doc__steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc ol.doc__steps li { line-height: 1.6; color: var(--text-secondary); }
.doc code { font-size: 13px; padding: 1px 5px; border-radius: 5px; background: var(--surface-sunken); color: var(--text); word-break: break-all; }
.doc__pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-sunken); font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-all; }
/* 카드 안에서는 제목 아래 한 문단뿐이라 위 여백이 필요 없다 */
.doc .prog p { margin-top: 2px; font-size: 14px; }
/* 사용법의 화면 그림. 실제 폰 화면을 그대로 찍은 것이라 세로로 길다 —
   폭을 묶어두지 않으면 넓은 화면에서 한 장이 화면을 다 먹는다. */
.shot { margin: 4px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.shot img { display: block; width: 100%; max-width: 320px; height: auto;
            border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.shot figcaption { font-size: 13px; line-height: 1.55; color: var(--text-secondary);
                   max-width: 480px; text-wrap: pretty; }

.doc__cards { display: flex; flex-direction: column; gap: 12px; margin: 8px 0; }
.doc__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
/* 출처 표기 (결정 102). 라이선스 의무라 지우면 안 되지만 주인공은 아니다. */
.doc__credit { margin-top: 24px; font-size: 12px; color: var(--text-secondary); }
.doc__credit a { color: inherit; }
/* 안드로이드 앱 받기 (결정 110). 이미 앱·홈 화면 아이콘으로 연 사람에겐 필요 없다. */
.doc__apk { display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
            padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
            background: var(--surface); }
@media (display-mode: standalone) { .doc__apk { display: none; } }
@media (min-width: 900px) {
  /* 읽는 글은 한 줄이 길면 눈이 다음 줄을 못 찾는다 */
  .doc__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .doc__actions { flex-direction: row; }
  .doc__actions .btn { width: auto; min-width: 132px; }
}

/* ---------------------------------------------------------------- 넓은 화면: 설정형 화면의 폭 · 버튼
   .app 은 900px 부터 넓어진다 — **주간 7열 그리드 때문이다.** 폼 · 설정 · 안내는 페이지 폭(--page)을 따른다.
   width:100% 를 빼면 안 된다. flex 자식은 **교차축 마진이 auto 면 stretch 가 꺼져**
   내용 폭으로 쪼그라든다 — .settings 는 210px 로 줄어 있었다. */
@media (min-width: 900px) {
  .settings, .conflict, .start, .doc { width: 100%; margin-left: auto; margin-right: auto; }
  .conflict { max-width: 560px; }   /* 확인 화면(결정 139) — 버튼이 본문 폭 1200px 을 다 먹었다 */

  /* 버튼은 손가락이 아니라 마우스로 누르는 폭이면 된다 */
  .settings .btn, .form .btn, .admin__acts .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; }
  .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;
  }
}

/* ================================================================ 6. 관리 화면의 버튼 (클럽 · 관리자 공간)

   .btn 의 기본은 **폰 입력 화면용**이다(폭 100% · 52px) — 기록 · 계획을 엄지로 누르는 곳. 관리 화면에서는 그대로 쓰면
   버튼이 크고, 버튼마다 감싼 <form> 이 한 줄씩 차지해 위아래로 쌓이고, 표의 작업 칸이 넘쳤다 (mw 2026-10-07).
   여기서는 **글자 크기 버튼이 한 줄에 나란히**, 넘치면 다음 줄로. 손가락 최소 높이(40px)는 지킨다.
   **5 절보다 뒤에 둔다** — .settings .btn · .admin__acts .btn(넓은 화면)과 특정도가 같아 뒤에 와야 이긴다. */
:is(.cmain, .adm__main) .btn {
  display: inline-flex; width: auto; min-height: 40px; padding: 0 14px; font-size: 14px; gap: 6px;
  white-space: nowrap; flex: 0 0 auto; align-self: auto; min-width: 0;
}
:is(.cmain, .adm__main) .btn--sm { min-height: 32px; padding: 0 10px; font-size: 13px; }
:is(.cmain, .adm__main) .btn--danger { padding: 0 10px; }
/* 버튼 묶음은 가로로, 넘치면 줄바꿈. 버튼 하나씩 감싼 form 은 자리만 차지하지 않게 */
:is(.cmain, .adm__main) :is(.admin__acts, .formactions, .chead__acts, .ctools) {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
}
:is(.cmain, .adm__main) :is(.admin__acts, .formactions, .chead__acts, .ctable__acts, .person, .ctools) > form {
  display: inline-flex; margin: 0; flex: 0 0 auto;
}
/* 입력칸 + 버튼 한 줄: 입력칸이 남는 폭을 쓰고, 좁으면 버튼이 아래로 */
:is(.cmain, .adm__main) .admin__acts > :is(input.gate__input, .memo) { flex: 1 1 220px; min-width: 0; width: auto; }
:is(.cmain, .adm__main) .admin__acts > .chk { flex: 1 1 100%; }
/* 표의 작업 칸 — 줄바꿈을 허락해 표 밖으로 넘치지 않게 */
:is(.cmain, .adm__main) .ctable__acts { white-space: normal !important; }
:is(.cmain, .adm__main) .ctable__acts > * { display: inline-flex; vertical-align: middle; margin: 2px 4px 2px 0; }
/* 패널 안 단독 버튼은 왼쪽에 제 크기로 */
:is(.cmain, .adm__main) .panel > .btn, :is(.cmain, .adm__main) .panel > form > .btn,
:is(.cmain, .adm__main) .settings__group > .btn { align-self: flex-start; }
/* 프로그램 편집 저장 줄 — 위 규칙을 다시 이긴다. PC 에서 저장이 줄을 다 먹고 취소가 화면 밖으로 밀렸다 */
@media (min-width: 900px) { .wk__save .btn { flex: 0 0 auto; width: auto; min-width: 140px; } }
/* 계획 수정 — 저장만 오른쪽 끝(PC) */
@media (min-width: 900px) { .savebar--plan .savebar__save { margin-left: auto; width: auto; min-width: 140px; } }

/* ================================================================ 7. 모달 (2026-10-07 mw: 모든 모달의 레이아웃을 같게, 브랜드 일관성)

   머리: 소제목(작게) + 제목, 오른쪽 위 ✕ · 본문 · 발: 오른쪽 정렬 작은 단추(보조 → 주). 폰은 아래에서 올라오는 판, PC 는 가운데 창.
   휴식 · 회원 초대 · 초대 코드가 같이 쓴다. 새 모달도 이 틀로.
   .sheet(저장 후 시트)는 늘 떠 있는 판이라 따로 둔다(dialog 가 닫혀도 보이게 된다).
   **6 절보다 뒤에 둔다** — 관리 화면 안에서 열리는 창이라 6 절의 버튼 규칙을 다시 이겨야 한다. */
.rsheet { border: 0; padding: 0; background: var(--surface); color: var(--text); width: 100%; max-width: 520px;
  margin: auto auto 0; border-radius: 20px 20px 0 0; box-shadow: var(--shadow-sheet);
  /* 폰에서 판이 화면을 넘치지 않게 (2026-10-10 mw: 「모달이 차거나 넘친다」) — 높이는 화면의 86% 까지, 안쪽(.rsheet__body)이 스크롤.
     dvh: 아이폰의 주소줄이 접히고 펴져도 맞는다. 열렸을 때만 flex — dialog 는 닫히면 display:none 이어야 한다 */
  max-height: min(86dvh, calc(100% - 24px)); overflow: hidden; }
.rsheet[open] { display: flex; flex-direction: column; }
.rsheet::backdrop { background: var(--scrim); }
.rsheet__body { display: flex; flex-direction: column; gap: 12px; padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rsheet__grip { align-self: center; width: 40px; height: 4px; border-radius: 999px; background: var(--border); }
.rsheet .memo { min-height: 44px; height: 44px; }
/* 휴식 창 단추 — PC 에서 .formactions .btn 규칙이 「취소」 를 한 줄 다 먹게 했다. 둘이 반씩 */
.rsheet .formactions { display: flex; gap: 10px; width: 100%; }
.rsheet .formactions .btn { flex: 1 1 0; width: auto; min-width: 0; align-self: stretch; }
@media (min-width: 900px) { .rsheet { margin: auto; border-radius: 16px; } .rsheet__grip { display: none; } }
/* 사진 자르기 창 (결정 143 보완) — 틀 280px, 밖은 어둡게, 동그라미(아바타) · 네모(클럽 아이콘) */
.cropsheet { max-width: 360px; }
.crop__stage { position: relative; width: 280px; height: 280px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: var(--surface-sunken); touch-action: none; }
.crop__stage canvas { display: block; cursor: grab; }
.crop__stage canvas:active { cursor: grabbing; }
.crop__mask { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 400px rgba(0, 0, 0, .45); }
.crop__mask--round { border-radius: 50%; }
.crop__mask--square { border-radius: 14px; inset: 4px; }
.cropsheet input[type=range] { width: 280px; margin: 0 auto; }

.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal__head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modal__sub { font-size: 12px; color: var(--text-secondary); }
.modal__title { font-size: 17px; font-weight: 700; color: var(--text); }
.modal__x { flex: none; width: 32px; height: 32px; margin: -4px -6px 0 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none; color: var(--text-secondary); cursor: pointer; }
.modal__x:hover { background: var(--surface-sunken); color: var(--text); }
/* 창을 열면 첫 단추(✕)에 초점이 간다 — 굵은 초록 테두리 대신 옅은 바탕으로 (키보드로 옮기면 그대로 보인다) */
.modal__x:focus-visible { outline: none; background: var(--surface-sunken); color: var(--text); }
.modal__hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.modal__foot .btn { flex: none !important; width: auto !important; min-width: 72px; }
.modal__link { margin-right: auto; font-size: 13px; }
/* 클럽 설정 카드도 이 발을 빌려 쓴다(modal__foot sett__foot) — 위 여백만 뺀다 */
.sett__foot { padding-top: 0; }

/* 회원 초대 창 — 휴식 창(.rsheet) 부품에 찾기 · 결과 */
.invsheet__q { max-width: none; height: 40px; flex: none; }
.invsheet__found { max-height: 38dvh; overflow-y: auto; }   /* 판 전체(86dvh) 안에서 머리 · 찾기 칸이 남게 */
.invsheet__found:empty { display: none; }   /* 찾기 전엔 자리를 잡지 않는다 — 아래가 휑하게 비었다(mw) */
.invsheet__done { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px; border-radius: 12px; background: var(--accent-soft); }
.invsheet__done .inv__row { border-top-color: color-mix(in srgb, var(--accent-mid) 40%, transparent); padding: 8px 0; }
.invsheet__sub { font-size: 13px; font-weight: 700; color: var(--accent-text); padding-top: 4px; }

/* ---------------------------------------------------------------- 폰의 입력칸은 16px 이상 (2026-10-10)
   아이폰 Safari 는 글자가 16px 보다 작은 입력칸에 포커스가 가면 화면을 **확대**한다 — 회원 초대 판의 찾기 칸(14px)에서 판이 옆으로 밀려
   「나클럽 · 원 초대」 처럼 왼쪽이 잘렸다(mw 캡처). 확대를 막는 viewport(maximum-scale)는 접근성을 해치니 글자 크기로 막는다.
   PC(900px~)는 그대로 — 작은 칸이 어울리고 확대도 없다. 체크 · 라디오 · 슬라이더 · 파일은 글자가 아니다. */
@media (max-width: 899px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea { font-size: 16px; }
}