/* ============================================================
   지점 로테이션 (bemove_rotation) — formula-x.app / Bemove X 모드
   스코프: .rt-root[data-fx-feature="bemove_rotation"]
   Be:Move 원본 토큰(--bm-*)만 쓴다. 다크는 web/brands/bemove/theme.css 가
   --bm-* 를 뒤집으므로 저절로 따라온다 (AGENTS.md 구현 규칙).
   설계: docs/GYMTOSS_BRANCH_ROTATION_DESIGN.md §9·§10
   ============================================================ */

.rt-root {
  --rt-line: var(--bm-border);
  --rt-page: var(--bm-chalk);
  --rt-card: var(--bm-surface);
  --rt-sunken: var(--bm-surface-muted);
  --rt-strong: var(--bm-text);
  --rt-body: var(--bm-text-sub);
  --rt-muted: var(--bm-text-sub);
  --rt-faint: var(--bm-charcoal-400);
  --rt-accent: var(--bm-orange-600);
  color: var(--rt-body);
  font-family: var(--bm-font-body);
  font-size: 14px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
html[data-bemove-theme="dark"] .rt-root { --rt-accent: var(--bm-orange-400); }
.rt-root * { box-sizing: border-box; }
.rt-root button { font-family: inherit; cursor: pointer; }
.rt-mono { font-family: var(--bm-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-ml { margin-left: auto; }
.rt-root [hidden] { display: none !important; }

/* ── 상단 바 ─────────────────────────────────────────────── */
.rt-bar {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--rt-card);
  border: 1px solid var(--rt-line); border-radius: var(--bm-radius-card);
}
.rt-eyebrow { font-family: var(--bm-font-display); font-size: 11px; letter-spacing: .18em; color: var(--rt-accent); text-transform: uppercase; }
.rt-h1 { font-family: var(--bm-font-display); font-size: 26px; line-height: 1.15; color: var(--rt-strong); margin: 3px 0 0; }
.rt-h1-sub { font-size: 12.5px; color: var(--rt-muted); margin-top: 2px; }
.rt-bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rt-sum {
  padding: 8px 14px; border-radius: var(--bm-radius-card); background: var(--rt-sunken);
  border: 1px solid var(--rt-line); text-align: right; min-width: 92px;
}
.rt-sum-k { font-size: 11px; color: var(--rt-muted); font-weight: 700; }
.rt-sum-v { font-family: var(--bm-font-display); font-size: 20px; color: var(--rt-strong); line-height: 1.1; margin-top: 2px; }
.rt-sum-v.warn { color: var(--bm-amber-500); }
.rt-sum-v.bad { color: var(--bm-red-500); }

/* ── 주간 리듬: 실제 목표는 '전 지점 중 한 곳을 주 1회' 다 ──── */
.rt-week {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--rt-line); border-radius: var(--bm-radius-card);
  background: var(--rt-sunken);
}
.rt-week-k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-muted); }
.rt-week-v { font-family: var(--bm-font-display); font-size: 22px; color: var(--rt-strong); line-height: 1; }
.rt-week-v.done { color: var(--bm-green-500); }
.rt-week-note { font-size: 12px; color: var(--rt-muted); }
.rt-week-dots { display: flex; gap: 5px; }
.rt-week-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--bm-charcoal-200); }
.rt-week-dot.on { background: var(--bm-orange-500); }

/* ── 컨트롤 ─────────────────────────────────────────────── */
.rt-select, .rt-input {
  min-height: 34px; padding: 0 12px; border: 1px solid var(--rt-line);
  border-radius: var(--bm-radius-field); background: var(--rt-card); color: var(--rt-strong);
  font-size: 13px; font-weight: 600; font-family: inherit; max-width: 100%;
}
.rt-input::placeholder { color: var(--rt-faint); font-weight: 400; }
.rt-textarea {
  width: 100%; min-height: 76px; padding: 10px 12px; border: 1px solid var(--rt-line);
  border-radius: var(--bm-radius-field); background: var(--rt-card); color: var(--rt-strong);
  font-size: 13px; line-height: 1.6; font-family: inherit; resize: vertical;
}
.rt-select:focus-visible, .rt-input:focus-visible, .rt-textarea:focus-visible,
.rt-btn:focus-visible, .rt-seg-btn:focus-visible, .rt-tag:focus-visible { outline: var(--bm-ring-focus); outline-offset: 2px; }
.rt-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--rt-sunken); border: 1px solid var(--rt-line); border-radius: 999px; flex-wrap: wrap; }
.rt-seg-btn { min-height: 28px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--rt-muted); font-size: 12.5px; font-weight: 700; }
.rt-seg-btn.on { background: var(--bm-charcoal-900); color: #fff; }
html[data-bemove-theme="dark"] .rt-seg-btn.on { background: var(--bm-white); color: var(--bm-charcoal-900); }
.rt-btn {
  min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--bm-charcoal-900);
  background: transparent; color: var(--rt-strong); font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
html[data-bemove-theme="dark"] .rt-btn { border-color: var(--bm-charcoal-200); }
/* 오렌지 채움은 뷰당 하나다 — 보드는 '방문 기록', 방문 상세는 '방문 완료'. */
.rt-btn-accent { border-color: transparent; background: var(--bm-orange-500); color: #fff; }
.rt-btn-sm { min-height: 30px; padding: 0 12px; font-size: 12px; }
.rt-btn-ghost { border-color: transparent; background: var(--rt-sunken); color: var(--rt-body); }
.rt-btn[disabled] { opacity: .45; cursor: not-allowed; }
.rt-link { background: none; border: 0; padding: 0; color: var(--rt-accent); font-size: 12.5px; font-weight: 700; }

/* ── 칩 · 태그 ──────────────────────────────────────────── */
.rt-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--rt-sunken); color: var(--rt-muted); border: 1px solid var(--rt-line);
}
.rt-chip.ok { background: var(--bm-green-100); color: #1B6B3C; border-color: transparent; }
.rt-chip.warn { background: var(--bm-amber-100); color: #8A5B00; border-color: transparent; }
.rt-chip.bad { background: var(--bm-red-100); color: #A32020; border-color: transparent; }
html[data-bemove-theme="dark"] .rt-chip.ok { background: rgba(46,158,91,.2); color: #7FD8A2; }
html[data-bemove-theme="dark"] .rt-chip.warn { background: rgba(242,176,30,.2); color: #F3C862; }
html[data-bemove-theme="dark"] .rt-chip.bad { background: rgba(217,58,58,.22); color: #F09A9A; }
/* 관찰 태그는 어떤 값에서도 중립색이다 — 사람에 대한 낙인을 만들지 않는다. */
.rt-tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 8px;
  border-radius: 999px; background: var(--rt-sunken); color: var(--rt-body);
  border: 1px solid var(--rt-line); white-space: nowrap;
}
button.rt-tag { cursor: pointer; }
.rt-tag.on { background: var(--bm-charcoal-900); color: #fff; border-color: transparent; }
html[data-bemove-theme="dark"] .rt-tag.on { background: var(--bm-white); color: var(--bm-charcoal-900); }
.rt-tags { display: flex; gap: 5px; flex-wrap: wrap; }

/* ── 레이아웃 · 패널 ────────────────────────────────────── */
.rt-body { display: grid; gap: 14px; align-items: start; min-width: 0; }
.rt-body--board { grid-template-columns: 264px minmax(0, 1fr); }
.rt-body--visit { grid-template-columns: minmax(0, 1fr) 360px; }
.rt-body--one { grid-template-columns: minmax(0, 1fr); }
.rt-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rt-panel { background: var(--rt-card); border: 1px solid var(--rt-line); border-radius: var(--bm-radius-card); display: flex; flex-direction: column; min-width: 0; }
.rt-panel-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--rt-line); flex-wrap: wrap; }
.rt-panel-title { font-size: 13.5px; font-weight: 700; color: var(--rt-strong); }
.rt-panel-note { font-size: 11.5px; color: var(--rt-muted); }
.rt-pad { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rt-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-muted); }
.rt-empty { padding: 24px 12px; text-align: center; color: var(--rt-muted); font-size: 12.5px; }
.rt-scroll-y { max-height: 380px; overflow: auto; }

/* ── 지점 카드 ──────────────────────────────────────────── */
.rt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rt-card {
  background: var(--rt-card); border: 1px solid var(--rt-line); border-left: 3px solid transparent;
  border-radius: var(--bm-radius-card); padding: 14px; display: flex; flex-direction: column; gap: 10px;
  text-align: left; width: 100%;
}
button.rt-card { cursor: pointer; font-family: inherit; }
.rt-card.s-late { border-left-color: var(--bm-amber-500); }
.rt-card.s-stale { border-left-color: var(--bm-red-500); }
.rt-card.s-none { border-left-color: var(--bm-charcoal-300); }
.rt-card-top { display: flex; align-items: flex-start; gap: 8px; }
.rt-branch { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--rt-strong); }
.rt-div { font-size: 11px; color: var(--rt-muted); margin-top: 2px; }
.rt-days { display: flex; align-items: baseline; gap: 7px; }
.rt-days-n { font-family: var(--bm-font-display); font-size: 34px; line-height: .9; color: var(--rt-strong); }
.rt-days-n.s-late { color: var(--bm-amber-500); }
.rt-days-n.s-stale { color: var(--bm-red-500); }
.rt-days-n.s-none { font-size: 22px; color: var(--rt-muted); }
.rt-days-u { font-size: 12px; font-weight: 700; color: var(--rt-muted); }
.rt-card-meta { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; border-top: 1px solid var(--rt-line); }
.rt-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rt-muted); }
.rt-row b { color: var(--rt-strong); font-weight: 700; }
/* 남이 다녀간 방문의 이름. 날짜에 딸린 부속이라 약하게 둔다. */
.rt-visitor { color: var(--rt-muted); font-size: 11.5px; white-space: nowrap; }
.rt-bar-track { flex: 1; height: 5px; border-radius: 999px; background: var(--rt-sunken); overflow: hidden; min-width: 40px; }
.rt-bar-fill { display: block; height: 100%; background: var(--bm-charcoal-700); border-radius: 999px; }
html[data-bemove-theme="dark"] .rt-bar-fill { background: var(--bm-charcoal-200); }

/* ── 타임라인 ───────────────────────────────────────────── */
.rt-tl { display: flex; flex-direction: column; }
.rt-tl-i { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rt-line); align-items: center; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.rt-tl-i:last-child { border-bottom: 0; }
.rt-tl-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--bm-charcoal-300); flex: 0 0 auto; }
.rt-tl-b { font-size: 12.5px; font-weight: 700; color: var(--rt-strong); }
.rt-tl-m { font-size: 11px; color: var(--rt-muted); }

/* ── 조치 ───────────────────────────────────────────────── */
.rt-acts { display: flex; flex-direction: column; }
.rt-act { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--rt-line); flex-wrap: wrap; }
.rt-act:last-child { border-bottom: 0; }
.rt-act.over { background: var(--rt-sunken); }
.rt-act.closed .rt-act-b { text-decoration: line-through; color: var(--rt-muted); }
.rt-act-b { flex: 1; min-width: 0; font-size: 13px; color: var(--rt-strong); word-break: keep-all; }
.rt-act-m { font-size: 11.5px; color: var(--rt-muted); margin-top: 2px; }
.rt-act-tools { display: flex; gap: 6px; }

/* ── 면담 카드 ──────────────────────────────────────────── */
.rt-meet { border: 1px solid var(--rt-line); border-radius: var(--bm-radius-card); padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--rt-card); }
.rt-meet-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rt-meet-who { font-size: 14px; font-weight: 700; color: var(--rt-strong); }
.rt-meet-meta { font-size: 11.5px; color: var(--rt-muted); }
.rt-sec { display: flex; flex-direction: column; gap: 3px; }
.rt-sec-k { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--rt-accent); }
.rt-sec-b { font-size: 12.5px; line-height: 1.65; color: var(--rt-body); word-break: keep-all; white-space: pre-wrap; }

/* ── 사진 ───────────────────────────────────────────────── */
.rt-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.rt-thumb { width: 104px; height: 74px; border-radius: var(--bm-radius-control); background: var(--bm-charcoal-800) center/cover no-repeat; display: flex; align-items: flex-end; padding: 6px; position: relative; overflow: hidden; border: 0; }
.rt-thumb span { position: relative; z-index: 1; font-size: 10px; color: var(--bm-charcoal-200); line-height: 1.2; }
.rt-thumb-x { position: absolute; top: 4px; right: 4px; z-index: 2; width: 20px; height: 20px; border-radius: 999px; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 1; }
.rt-drop { min-height: 74px; width: 104px; border-radius: var(--bm-radius-control); border: 1px dashed var(--rt-line); background: var(--rt-sunken); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--rt-muted); font-size: 11px; text-align: center; }

/* ── 표 ─────────────────────────────────────────────────── */
.rt-table-wrap { overflow-x: auto; }
.rt-table { width: 100%; border-collapse: collapse; }
.rt-table th { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rt-muted); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rt-line); white-space: nowrap; }
.rt-table td { font-size: 12.5px; color: var(--rt-body); padding: 10px 12px; border-bottom: 1px solid var(--rt-line); vertical-align: middle; }
.rt-table tr:last-child td { border-bottom: 0; }
.rt-table td b { color: var(--rt-strong); }
.rt-table .num { text-align: right; font-family: var(--bm-font-mono); font-variant-numeric: tabular-nums; }
.rt-sub-tr td { background: var(--rt-sunken); }

/* ── 공유 텍스트 ────────────────────────────────────────── */
.rt-share { background: var(--bm-charcoal-900); border-radius: var(--bm-radius-card); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rt-share pre { margin: 0; font-family: var(--bm-font-mono); font-size: 11.5px; line-height: 1.85; color: var(--bm-charcoal-100); white-space: pre-wrap; word-break: break-word; }
.rt-share-head { display: flex; align-items: center; gap: 8px; }
.rt-share-head .rt-panel-title { color: #fff; }

/* ── 모달 / 시트 ────────────────────────────────────────── */
.rt-scrim { position: fixed; inset: 0; background: rgba(20,20,20,.62); display: flex; align-items: center; justify-content: center; z-index: 1200; padding: 24px; }
html[data-bemove-theme="dark"] .rt-scrim { background: rgba(0,0,0,.7); }
.rt-modal { width: 620px; max-width: 100%; max-height: 100%; background: var(--rt-card); border-radius: var(--bm-radius-sheet); box-shadow: var(--bm-shadow-sheet); display: flex; flex-direction: column; overflow: hidden; }
.rt-modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--rt-line); }
.rt-modal-title { font-family: var(--bm-font-display); font-size: 19px; color: var(--rt-strong); }
.rt-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.rt-modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--rt-line); flex-wrap: wrap; }
.rt-x { border: 0; background: none; color: var(--rt-muted); font-size: 18px; line-height: 1; padding: 4px; }
.rt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rt-fieldrow { display: flex; gap: 12px; flex-wrap: wrap; }
.rt-fieldrow > * { flex: 1; min-width: 140px; }
.rt-picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bm-orange-500); border-radius: var(--bm-radius-field); background: color-mix(in srgb, var(--bm-orange-500) 10%, transparent); flex-wrap: wrap; }
.rt-people { max-height: 210px; overflow: auto; border: 1px solid var(--rt-line); border-radius: var(--bm-radius-field); }
.rt-person { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--rt-line); background: var(--rt-card); color: var(--rt-body); font-size: 12.5px; text-align: left; }
.rt-person:last-child { border-bottom: 0; }
.rt-person.on { background: var(--rt-sunken); }
.rt-person b { color: var(--rt-strong); }

/* ── 배너 · 토스트 ──────────────────────────────────────── */
.rt-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--bm-radius-card); background: var(--bm-amber-100); color: #8A5B00; font-size: 12.5px; font-weight: 600; }
html[data-bemove-theme="dark"] .rt-banner { background: rgba(242,176,30,.18); color: #F3C862; }
.rt-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1400; background: var(--bm-charcoal-900); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: var(--bm-shadow-sheet); max-width: calc(100vw - 32px); }
.rt-loading { padding: 40px 12px; text-align: center; color: var(--rt-muted); font-size: 13px; }
.rt-error { padding: 16px; border-radius: var(--bm-radius-card); border: 1px solid var(--bm-red-500); color: var(--bm-red-500); background: var(--rt-card); font-size: 13px; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .rt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .rt-body--board, .rt-body--visit { grid-template-columns: minmax(0, 1fr); }
  /* 한 줄로 접히면 좌측 레일(최근 방문·주기 기준)이 먼저 온다. 이 화면의 요점은
     '어디를 가장 오래 안 갔나' 라서, 좁은 화면에서는 지점 카드가 먼저여야 한다. */
  .rt-body--board > .rt-col:first-child { order: 2; }
  .rt-body--visit > .rt-col:last-child { order: 2; }
}
@media (max-width: 768px) {
  .rt-root { font-size: 13.5px; }
  .rt-bar { padding: 14px 16px; }
  .rt-h1 { font-size: 22px; }
  .rt-bar-right { margin-left: 0; width: 100%; }
  .rt-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* 모바일 카드: 경과일이 가장 큰 글자다. 좌측에 숫자 한 칸, 우측에 지점명과 요약.
     flex 로 가로 배치하면 카드 안의 세 덩어리가 세 칸으로 쪼개져 요약 칸이 눌린다.
     영역 이름을 붙여 숫자 칸만 두 줄에 걸치게 한다. */
  .rt-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "days head" "days body"; align-items: center; column-gap: 14px; row-gap: 6px; }
  .rt-card > .rt-card-top { grid-area: head; min-width: 0; }
  .rt-card > .rt-days { grid-area: days; flex-direction: column; align-items: flex-start; gap: 0; align-self: center; }
  .rt-card > .rt-card-body { grid-area: body; min-width: 0; }
  .rt-card .rt-days-n { font-size: 40px; }
  .rt-card .rt-days-n.s-none { font-size: 15px; line-height: 1.2; }
  .rt-card .rt-days-u { font-size: 11px; }
  .rt-card .rt-branch { font-size: 15px; }
  .rt-card-meta { border-top: 0; padding-top: 0; gap: 4px; }
  .rt-card-meta .rt-row-desk { display: none; }
  .rt-card-meta .rt-bar-track { min-width: 32px; }
  .rt-seg-btn, .rt-btn, .rt-tag, .rt-person, .rt-tl-i { min-height: 44px; }
  button.rt-tag { padding: 10px 14px; font-size: 12.5px; }
  .rt-scrollchips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .rt-scrollchips .rt-tag { flex: 0 0 auto; }
  .rt-scrim { padding: 0; align-items: flex-end; }
  .rt-modal { width: 100%; max-height: calc(100% - 44px); border-radius: var(--bm-radius-sheet) var(--bm-radius-sheet) 0 0; }
  .rt-modal-foot { position: sticky; bottom: 0; background: var(--rt-card); }
  .rt-table th, .rt-table td { padding: 9px 8px; }
}
@media (min-width: 769px) {
  .rt-card-meta .rt-row-mobile { display: none; }
}