/* ============================================================================
   매출(B6) — 시안 proto/sales_settings.html <style> 의 매출 부분(#salesStrip · .ss-eq · .ss-facts · .bars 고른 날)을 옮긴 것 +
   판매 상세 시트·내보내기 시트. 새 색·새 크기 0: 값은 tokens.css 변수 또는 components.css 에 이미 있는 수치다.
   시안과 다른 점: 강사별 PT 매출 패널 없음(F) → 그 자리에 판매 목록(판매 상세로 들어가는 길) · 미납 목록 '마지막 연락' 열 없음(서버 값 없음).
   ========================================================================== */

/* 기간 알약 + 직접 고른 기간 줄 */
.sl-periods { margin-bottom: 16px; }
.sl-range { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.sl-range .input { width: 168px; height: var(--btn-sm); }
.sl-range-host > .field-error { margin: -8px 0 16px; }

/* ① 띠 3칸 — 시안 #salesStrip */
.sl-strip { overflow: hidden; }
.sl-stats .num { white-space: nowrap; }
.sl-stats .stat-value > .t-sub { font-size: var(--fs-28); line-height: var(--lh-28); }
@media (min-width: 768px) and (max-width: 1279px) { .sl-stats .kpi { font-size: var(--fs-28); line-height: var(--lh-28); } }
@media (max-width: 767px) {   /* BRIEF 6-8: 폰은 숫자 3개 세로(공용 is-hero 폰 배치 — 첫 칸 넓게·둘째 줄 두 칸 — 보다 먼저) */
  .sl-strip .stat-strip.sl-stats { grid-template-columns: minmax(0, 1fr); }
  .sl-strip .sl-stats > .stat { grid-column: 1 / -1; border-left: 0; border-bottom: 0; border-radius: 0; }
  .sl-strip .sl-stats > .stat + .stat { border-top: 1px solid var(--line); }
  .sl-strip .sl-stats > .stat:first-child { border-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0; }
  .sl-strip .sl-stats > .stat:last-child { border-radius: 0 0 var(--r-card) var(--r-card); }
  .sl-strip .sl-stats .stat .kpi { font-size: var(--fs-28); line-height: var(--lh-28); }
}

/* 갱신 중 — 이전 값을 그대로 두고 흐리게만(0·빈칸으로 비우지 않는다) */
.sl-grid > .is-pending, .od-body.is-pending { opacity: .55; transition: opacity var(--t-set) var(--ease-set); }

/* ② 막대 · 사실 3칸 — 시안 .ss-eq · .ss-facts */
.ss-eq { align-self: stretch; display: flex; flex-direction: column; }
.ss-eq > .panel-body:last-child { flex: 1; display: flex; flex-direction: column; }
.ss-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.ss-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-facts > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.ss-facts > div:not(:last-child) { padding-right: 16px; }
.ss-facts .t-value { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-chart-body .bars-box { margin-bottom: 20px; }
.bars > span[role="button"] { cursor: pointer; }
.bars > span:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bars-axis span.is-on { color: var(--ink); font-weight: 700; }
.sl-chart-body > .op-more-row { margin: 8px 0 16px; }
.sl-chart-body > .table-wrap + .ss-facts { margin-top: 16px; }
.table-wrap.sl-flush { padding: 0; }
.table tfoot td { height: 52px; padding: 8px 12px; border-top: 1px solid var(--line-strong); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 700; white-space: nowrap; }
.table tfoot td:first-child { padding-left: 0; }
.table tfoot td:last-child { padding-right: 0; }

/* 표 안 이름 단추(판매 상세 열기) — 글자 단추, 마우스 올리면 밑줄 */
.sl-link { padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-align: left; border-radius: 4px; }
.sl-link:hover { text-decoration: underline; text-underline-offset: .22em; }
.table tbody tr.is-link:hover .sl-link { text-decoration: underline; text-underline-offset: .22em; }

/* 막대 단위 고르기 — 좁아도 접히지 않게 */
.sl-grid .panel-head > .seg { flex: none; }
.sl-grid .panel-head > .seg button { white-space: nowrap; }

/* ③ 어떻게 받았나 */
.sl-break-body { padding-top: 12px; }
.sl-break-note { padding: 12px 24px 20px; }

/* ④ 판매 목록 */
.sl-search-box { width: 240px; height: var(--btn-sm); }
.sl-orders td.is-wrap { min-width: 180px; }
.sl-status { align-items: flex-start; gap: 2px; }
.sl-orders-note { padding: 12px 24px 20px; }
@media (max-width: 767px) { .sl-orders-note { padding: 12px 20px 16px; } }

/* ⑤ 미납 목록 */
.sl-dues .cell-person { gap: 10px; }
.sl-due-more { padding: 12px 24px 20px; }
.sl-due-warn { margin: 12px 24px 0; }
@media (max-width: 767px) { .sl-due-warn { margin: 12px 20px 0; } }
.sl-due-rows { padding-top: 8px; }
.sl-due-rows .mrow-cap { font-size: var(--fs-14); line-height: var(--lh-14); }
.sl-due-rows div.mrow:hover { background: var(--surface); }
@media (max-width: 767px) { .sl-due-more { padding: 12px 20px 16px; } }

/* ⑥ 환불 */
.sl-grow { flex: 1; min-width: 0; }
.sl-refund-body { padding-top: 8px; }
.sl-refunds .rpt-row .t-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-refund-facts { margin-top: auto; }
@media (max-width: 1279px) and (min-width: 768px) { .sl-refund-body .ss-facts { margin-top: 16px; } }

.sl-phone-note { text-align: center; }

/* ── 판매 상세 시트 ──────────────────────────────────────────────────────── */
.od-body { display: flex; flex-direction: column; gap: 24px; }
.od-body > .sheet-sec + .sheet-sec { padding-top: 24px; border-top: 1px solid var(--line); }
.od-sum { display: flex; flex-direction: column; gap: 16px; }
.od-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-input); box-shadow: inset 0 0 0 1px var(--line); }
.od-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.od-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.od-pays, .od-adjs { list-style: none; margin: 0; padding: 0; }
.od-pay { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.od-pay:first-child, .od-adj:first-child { border-top: 0; }
.od-amt { font-weight: 700; white-space: nowrap; }
.od-adj { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.od-ref-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.od-note { color: var(--muted); }

/* 결과 줄(내보내기) — 성공은 초록 띠, 실패는 오류 줄(error-note) */
.notice-line.is-ok { color: var(--ink); box-shadow: inset 3px 0 0 var(--go); }

/* 내보내기 종류 고르기 */
.ex-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .ex-choices { grid-template-columns: minmax(0, 1fr); } }