/* =============================================================
   계약관리 화면 스킨 — 공통 화면 규칙(ui-tokens.css) 1차 적용
   범위: #my_sales-content 안쪽만. 다른 메뉴 · 팝업 · 옆 메뉴는 그대로.
   원칙: 배치(열 순서 · 칸 너비 · 기능)는 건드리지 않고 "값"만 규칙으로 바꾼다.
         색 · 글자 크기와 굵기 · 선 · 모서리 · 그림자.
   되돌리기: index.tsx 의 이 파일 <link> 한 줄을 빼면 원래 화면.
   기존 스타일(styles.css .toss-contract-page, 표 내장 스타일 #tp-style)이 !important 를 써서
   여기서도 html #my_sales-content 로 범위를 좁히고 필요한 곳만 !important 를 쓴다.
   ============================================================= */

/* ── 1. 바탕 · 글꼴 ── */
html #my_sales-content{
  background:var(--ui-bg);
  font-family:var(--ui-font) !important;
  color:var(--ui-text-1);
  -webkit-font-smoothing:antialiased;
}
html #my_sales-content *:not(i):not(.fas):not(.far):not(.fa){ font-family:var(--ui-font) !important }

/* 바깥 큰 카드 · 머리 카드: 그라데이션 · 그림자 제거 → 흰 묶음 + 머리카락 선 */
html #my_sales-content > .bg-white{
  background:var(--ui-bg) !important;
  border:0 !important; box-shadow:none !important; border-radius:0 !important;
  padding:var(--ui-pad) !important;
}
html #my_sales-content > .bg-white > .flex:first-child{
  background:var(--ui-surface) !important;
  border:0 !important; box-shadow:none !important;
  border-radius:var(--ui-radius-panel) !important;
  padding:16px 18px !important; margin-bottom:var(--ui-gap) !important;
}

/* ── 2. 화면 제목 ── */
html #my_sales-content h2{
  font-size:var(--ui-text-title1) !important; font-weight:var(--ui-weight-bold) !important;
  color:var(--ui-text-1) !important; letter-spacing:var(--ui-tracking-tight) !important;
}
html #my_sales-content h2 .fa-chart-line{ color:var(--ui-accent) !important }
html #my_sales-content p{ color:var(--ui-text-2) !important }

/* 관리자 표시 · 담당자 · 월 고르기: 보라 · 파랑 테두리 → 기본 입력칸 */
html #my_sales-content #admin-staff-filter-wrap > span{
  background:var(--ui-fill) !important; color:var(--ui-text-2) !important; border:0 !important;
  font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; border-radius:var(--ui-radius-pill) !important;
}
html #my_sales-content #admin-staff-filter-wrap > span i{ color:var(--ui-text-2) !important }
html #my_sales-content select, html #my_sales-content input[type=text], html #my_sales-content input[type=search], html #my_sales-content input:not([type]){
  height:var(--ui-control) !important; border:var(--ui-hairline) solid var(--ui-line-control) !important;
  border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important;
  color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important;
  box-shadow:none !important;
}
html #my_sales-content select:focus, html #my_sales-content input:focus{ box-shadow:var(--ui-focus-ring) !important; border-color:var(--ui-accent) !important; outline:none !important }
html #my_sales-content #month-filter{ font-weight:var(--ui-weight-semibold) !important; border:var(--ui-hairline) solid var(--ui-line-control) !important; background:var(--ui-surface) !important; color:var(--ui-text-1) !important }
html #my_sales-content #sales-month-badge{
  background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; box-shadow:none !important;
  height:var(--ui-control); border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important;
}

/* ── 4. 카드 · 묶음: 그림자 없음, 모서리 10, 흰 바탕 ── */
html #my_sales-content .rounded-lg, html #my_sales-content .rounded-xl, html #my_sales-content .rounded-2xl{ border-radius:var(--ui-radius-group) !important }
html #my_sales-content .rounded-md{ border-radius:var(--ui-radius-control) !important }
html #my_sales-content [class*="shadow"]:not(.add-btn){ box-shadow:none !important }
html #my_sales-content #my_sales-list,
html #my_sales-content #extra-pay-section > div,
html #my_sales-content #action-cards-container > div,
html #my_sales-content #sales-activities-list > div{
  border:0 !important; box-shadow:none !important; border-radius:var(--ui-radius-panel) !important; background:var(--ui-surface) !important;
}
html #my_sales-content .border, html #my_sales-content .border-b, html #my_sales-content .border-t{ border-color:var(--ui-line) !important }
html #my_sales-content .divide-x > * + *, html #my_sales-content .divide-y > * + *{ border-color:var(--ui-line) !important }

/* 색 바탕 칸 → 상태 연한 바탕 (장식용 색은 회색으로) */
html #my_sales-content .bg-emerald-50, html #my_sales-content .bg-green-50{ background:var(--ui-success-tint) !important }
html #my_sales-content .bg-amber-50, html #my_sales-content .bg-yellow-50, html #my_sales-content .bg-orange-50{ background:var(--ui-warning-tint) !important }
html #my_sales-content .bg-rose-50, html #my_sales-content .bg-red-50{ background:var(--ui-danger-tint) !important }
html #my_sales-content .bg-blue-50, html #my_sales-content .bg-sky-50, html #my_sales-content .bg-indigo-50{ background:var(--ui-accent-tint) !important }
html #my_sales-content .bg-purple-50, html #my_sales-content .bg-violet-50{ background:var(--ui-fill) !important }
html #my_sales-content .bg-slate-50, html #my_sales-content .bg-gray-50{ background:var(--ui-surface-alt) !important }
html #my_sales-content .bg-slate-100, html #my_sales-content .bg-gray-100{ background:var(--ui-fill-subtle) !important }
html #my_sales-content .border-amber-100, html #my_sales-content .border-amber-200,
html #my_sales-content .border-slate-100, html #my_sales-content .border-slate-200,
html #my_sales-content .border-gray-200, html #my_sales-content .border-gray-300{ border-color:var(--ui-line) !important }

/* ── 5. 글자색: 회색 계열 → 본문/보조 두 단계, 상태색 → 규칙 색 ── */
html #my_sales-content .text-gray-800, html #my_sales-content .text-slate-800, html #my_sales-content .text-gray-900, html #my_sales-content .text-slate-900,
html #my_sales-content .text-gray-700, html #my_sales-content .text-slate-700{ color:var(--ui-text-1) !important }
html #my_sales-content .text-gray-600, html #my_sales-content .text-slate-600,
html #my_sales-content .text-gray-500, html #my_sales-content .text-slate-500,
html #my_sales-content .text-gray-400, html #my_sales-content .text-slate-400,
html #my_sales-content .text-slate-300{ color:var(--ui-text-2) !important }
html #my_sales-content .text-blue-600, html #my_sales-content .text-blue-700, html #my_sales-content .text-blue-800{ color:var(--ui-accent-text) !important }
html #my_sales-content .text-emerald-700, html #my_sales-content .text-emerald-600, html #my_sales-content .text-green-700, html #my_sales-content [class*="text-emerald-700/"]{ color:var(--ui-success) !important }
html #my_sales-content .text-amber-700, html #my_sales-content .text-amber-600, html #my_sales-content .text-amber-500, html #my_sales-content .text-orange-600{ color:var(--ui-warning) !important }
html #my_sales-content .text-rose-600, html #my_sales-content .text-rose-700, html #my_sales-content .text-red-600{ color:var(--ui-danger) !important }
html #my_sales-content .text-purple-700, html #my_sales-content .text-purple-900{ color:var(--ui-text-2) !important }

/* ── 6. 글자 크기 · 굵기: 11px 미만 없음, 반쪽 크기 없음, 굵기 400/600/700 ── */
html #my_sales-content .text-\[9px\], html #my_sales-content .text-\[10px\], html #my_sales-content .text-\[10\.5px\],
html #my_sales-content .text-\[11px\]{ font-size:var(--ui-text-caption) !important }
html #my_sales-content .text-\[12px\], html #my_sales-content .text-xs{ font-size:var(--ui-text-footnote) !important }
html #my_sales-content .text-sm{ font-size:var(--ui-text-body) !important }
html #my_sales-content .font-extrabold, html #my_sales-content .font-black{ font-weight:var(--ui-weight-bold) !important }
html #my_sales-content .font-bold{ font-weight:var(--ui-weight-semibold) !important }
html #my_sales-content .font-medium{ font-weight:var(--ui-weight-regular) !important }
html #my_sales-content .text-xl, html #my_sales-content .text-2xl{ font-weight:var(--ui-weight-bold) !important }
html #my_sales-content .tabular-nums{ letter-spacing:0 !important }

/* ── 7. 계약 표 (#tp-tbl) — 배치 그대로, 값만 ── */
html #my_sales-content #tp-tbl{ font-size:var(--ui-text-body) }
html #my_sales-content #tp-tbl thead th{
  background:var(--ui-surface-alt) !important; color:var(--ui-text-2) !important;
  font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important;
  border-bottom:var(--ui-hairline) solid var(--ui-line) !important;
}
html #my_sales-content #tp-tbl thead th.tp-num{ font-size:var(--ui-text-caption) !important }
html #my_sales-content #tp-tbl thead th .op{ color:var(--ui-text-3) !important }
html #my_sales-content #tp-tbl tbody td{ border-bottom:var(--ui-hairline) solid var(--ui-line) !important; padding-top:6px; padding-bottom:6px }
html #my_sales-content #tp-tbl thead th + th,
html #my_sales-content #tp-tbl tbody tr.tp-main td + td,
html #my_sales-content #tp-tbl thead th.tp-num,
html #my_sales-content #tp-tbl tbody td.tp-num{ border-left-color:var(--ui-line) !important; border-left-width:var(--ui-hairline) !important }
html #my_sales-content #tp-tbl tbody tr.tp-main:hover{ background:var(--ui-fill-subtle) }
html #my_sales-content #tp-tbl tbody tr.tp-main.on{ background:var(--ui-accent-tint) }
/* 키보드 ↑ · ↓ 로 옮긴 줄 — 간단히 보기 줄과 같은 테두리 */
html #my_sales-content #tp-tbl tbody tr.tp-main:focus-visible{ outline:none; box-shadow:inset var(--ui-focus-ring) }
html #my_sales-content #tp-tbl tbody tr.tp-main:focus-visible:not(.on){ background:var(--ui-fill-subtle) }
html #my_sales-content .tp-co{ font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold) }
html #my_sales-content .tp-co .exp{ color:var(--ui-text-3) }
html #my_sales-content tr.tp-main.on .tp-co .exp{ color:var(--ui-accent) }
html #my_sales-content .tp-prod{ font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content .tp-cnum{ font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); color:var(--ui-accent-text); background:var(--ui-accent-tint); font-family:var(--ui-font-mono) !important }
html #my_sales-content .tp-itemsum{ font-size:var(--ui-text-caption); color:var(--ui-text-2); font-weight:var(--ui-weight-regular) }
html #my_sales-content .tp-itemsum i{ color:var(--ui-text-3) }
html #my_sales-content .tp-contact{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html #my_sales-content .tp-owner{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold) }
/* 금액: 숫자는 본문색, 외주는 보조색, 순매출만 굵게. 색으로 뜻을 나누지 않는다 */
html #my_sales-content .tp-n{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #my_sales-content .tp-n.out{ color:var(--ui-text-2); font-weight:var(--ui-weight-regular) }
html #my_sales-content .tp-n.net{ color:var(--ui-text-1); font-weight:var(--ui-weight-bold) }
html #my_sales-content .tp-n.zero{ color:var(--ui-text-3); font-weight:var(--ui-weight-regular) }
html #my_sales-content .tp-pp{ font-size:var(--ui-text-caption); color:var(--ui-warning); font-weight:var(--ui-weight-semibold) }
html #my_sales-content .tp-pay{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-success); background:var(--ui-success-tint); border-radius:var(--ui-radius-row) }
/* 진행 단계 (계약 · 계산서 · 입금) */
html #my_sales-content .tp-step .dot.done{ background:var(--ui-accent) }
html #my_sales-content .tp-step .dot.wait{ background:var(--ui-surface); color:var(--ui-text-2); border-color:var(--ui-line-dashed) }
html #my_sales-content .tp-step .dot.na{ background:var(--ui-fill-subtle); color:var(--ui-text-3) }
html #my_sales-content .tp-step .dot.partial{ background:var(--ui-warning-dot) }
html #my_sales-content .tp-step .cap{ font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html #my_sales-content .tp-step .dot.done + .cap{ color:var(--ui-accent-text) }
html #my_sales-content .tp-step .dot.partial + .cap{ color:var(--ui-warning) }
html #my_sales-content .tp-step .dt{ font-size:var(--ui-text-caption); font-weight:var(--ui-weight-regular) }
html #my_sales-content .tp-dt-on{ color:var(--ui-accent-text) }
html #my_sales-content .tp-dt-wait{ color:var(--ui-text-2) }
html #my_sales-content .tp-dt-na{ color:var(--ui-text-3) }
html #my_sales-content .tp-dt-part{ color:var(--ui-warning); font-weight:var(--ui-weight-semibold) }
html #my_sales-content .tp-link{ background:var(--ui-line) } html #my_sales-content .tp-link.on{ background:var(--ui-accent) }
html #my_sales-content .tp-step.clk:hover .dot.wait{ background:var(--ui-accent); border-color:var(--ui-accent); box-shadow:none }
html #my_sales-content .tp-step.clk:hover .dot.done, html #my_sales-content .tp-step.clk:hover .dot.partial{ box-shadow:none }
html #my_sales-content .tp-step.clk:hover .cap{ color:var(--ui-accent-text) }
html #my_sales-content .tp-step.clk:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
/* 전자계약 · 이월 · 알림 · 상태 칩 */
html #my_sales-content .tp-ecc{ font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); border-radius:var(--ui-radius-row) }
html #my_sales-content .tp-ecc.y{ background:var(--ui-accent-tint); color:var(--ui-accent-text) }
html #my_sales-content .tp-ecc.n{ background:var(--ui-fill-subtle); color:var(--ui-text-2) }
html #my_sales-content .tp-carry{ font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); color:var(--ui-warning); background:var(--ui-warning-tint); border:0 }
html #my_sales-content .tp-alert{ font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold) }
html #my_sales-content .tp-stt{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold) }
html #my_sales-content .tp-stt.done{ background:var(--ui-accent-tint); color:var(--ui-accent-text) }
html #my_sales-content .tp-stt.ing{ background:var(--ui-warning-tint); color:var(--ui-warning) }
html #my_sales-content .tp-cancel-st, html #my_sales-content .tp-cancel-tag{ background:var(--ui-fill); color:var(--ui-text-2); font-weight:var(--ui-weight-semibold); font-size:var(--ui-text-caption) }
/* 진행상태 토글 (진행중 ↔ 완료): 주황 · 파랑 → 주의색 · 강조색 */
html #my_sales-content .tp-sw-tr{ background:var(--ui-warning-tint); border-color:transparent; border-radius:var(--ui-radius-control) }
html #my_sales-content .tp-sw[aria-checked="true"] .tp-sw-tr{ background:var(--ui-accent-tint); border-color:transparent }
html #my_sales-content .tp-sw-kn{ background:var(--ui-warning); box-shadow:var(--ui-elev-control); border-radius:5px }
html #my_sales-content .tp-sw[aria-checked="true"] .tp-sw-kn{ background:var(--ui-accent) }
html #my_sales-content .tp-sw-lb{ font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold) }
html #my_sales-content .tp-sw-lb.dn{ color:var(--ui-warning) }
html #my_sales-content .tp-sw[aria-checked="true"] .tp-sw-lb.ing{ color:var(--ui-accent-text) }
html #my_sales-content .tp-sw:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }

/* ── 7-1. 요약: 핵심 숫자 칸은 초록 대신 연한 강조색, 숫자는 본문색 ── */
html #my_sales-content div:not(.ts-tile):not(.ts-it):has(> #total-net-sales-value){ background:var(--ui-accent-tint) !important }
html #my_sales-content div:not(.ts-tile):not(.ts-it):has(> #total-net-sales-value) > div:not(#total-net-sales-value){ color:var(--ui-accent-text) !important }
html #my_sales-content div:not(.ts-tile):not(.ts-it) > #total-net-sales-value{ color:var(--ui-text-1) !important; font-size:var(--ui-text-title1) !important; font-weight:var(--ui-weight-bold) !important }

/* ── 7-2. 실적지급 현황: 노랑 상자 · 주황 버튼 → 흰 묶음 · 회색 버튼 ── */
html #my_sales-content #extra-pay-section > div{ background:var(--ui-surface) !important; border:0 !important }
html #my_sales-content #extra-pay-section .bg-amber-100{ background:var(--ui-surface-alt) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #my_sales-content #extra-pay-section .text-amber-800{ color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-bold) !important }
html #my_sales-content #extra-pay-section .fa-coins{ color:var(--ui-text-2) !important }
html #my_sales-content #extra-pay-section button.bg-amber-500{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important; height:var(--ui-control-sm); font-size:var(--ui-text-footnote) !important }
html #my_sales-content #extra-pay-section button.bg-amber-500:hover{ background:var(--ui-fill-hover) !important }
html #my_sales-content #extra-pay-section .text-gray-300{ color:var(--ui-text-3) !important }

/* ── 7-3. 남은 작은 글자 · 과한 굵기 (표 머리 'vat 제외', 단계 점 숫자 · 날짜) ── */
html #my_sales-content #tp-tbl thead th.tp-num > div{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important }
html #my_sales-content #tp-tbl thead th .op{ color:var(--ui-text-2) !important; font-weight:var(--ui-weight-semibold) !important }
html #my_sales-content .tp-step .dot{ font-size:var(--ui-text-caption) }
html #my_sales-content .tp-step .dt{ font-size:var(--ui-text-caption) }
html #my_sales-content .tp-carry{ font-size:var(--ui-text-caption) }
html #my_sales-content .tp-cancel-tag{ font-size:var(--ui-text-caption) }
html #my_sales-content .tp-sw-lb{ letter-spacing:0 }
html #my_sales-content [style*="font-weight:800"], html #my_sales-content [style*="font-weight: 800"],
html #my_sales-content [style*="font-weight:900"]{ font-weight:var(--ui-weight-bold) !important }
html #my_sales-content [style*="font-size:9px"], html #my_sales-content [style*="font-size:10px"], html #my_sales-content [style*="font-size:10.5px"],
html #my_sales-content [style*="font-size: 9px"], html #my_sales-content [style*="font-size: 10px"]{ font-size:var(--ui-text-caption) !important }


/* ── 8. 움직임: 버튼이 위로 뜨는 효과 없앰 ── */
html #my_sales-content button:hover{ transform:none !important }
@media (prefers-reduced-motion:reduce){ html #my_sales-content *{ transition-duration:0ms !important } }
html #my_sales-content [hidden]{ display:none !important }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   맥 고밀도형 (사용자 승인 2026-10-30 "고밀도시안으로 가자" — 시안 B:
   docs/reports/ui-audit/contract-mac-dense/b-dense.html)
   흰 판 하나 · 머리 2줄(제목+버튼 / 조회 조건+검색+보기) · 요약 한 줄 띠 · 표 28px 한 줄 · 오른쪽 상세 300px.
   휴대폰: 버튼 [⋯][등록], 요약 띠 · 표 옆으로 밀기(광고주 칸 고정), 줄 누르면 아래 창, 확인·관리는 떠 있는 단추
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html #my_sales-content > .bg-white{
  background:var(--ui-surface) !important; border:0 !important; box-shadow:var(--ui-elev-raised) !important;
  border-radius:var(--ui-radius-group) !important; padding:0 0 12px !important; overflow:visible;
}

/* ── 머리 1줄: 제목 ······ [확인·관리] [설정 ▾] [계약 등록] ── */
html #my_sales-content .ct-head{ padding:12px 16px 0 }
html #my_sales-content .ct-row1{ display:flex; align-items:center; gap:8px; min-height:30px }
html #my_sales-content .ct-title{ margin:0 !important; font-size:var(--ui-text-title2) !important; line-height:24px !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:var(--ui-tracking-tight) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
html #my_sales-content .ct-acts{ margin-left:auto; display:flex; align-items:center; gap:6px; flex:none }
html #my_sales-content .ct-acts > button, html #my_sales-content .ct-btn{
  height:var(--ui-control) !important; padding:0 10px !important; display:inline-flex !important; align-items:center !important; gap:5px !important;
  border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important;
  color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap; cursor:pointer
}
html #my_sales-content .ct-acts > button:hover, html #my_sales-content .ct-btn:hover{ background:var(--ui-surface-alt) !important }
html #my_sales-content .ct-acts > button:focus-visible, html #my_sales-content .ct-btn:focus-visible{ outline:none !important; box-shadow:var(--ui-focus-ring) !important }
html #my_sales-content .ct-acts > button.add-btn{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; font-weight:var(--ui-weight-semibold) !important }
html #my_sales-content .ct-acts > button.add-btn:hover{ background:var(--ui-accent-hover) !important }
html #my_sales-content .ct-acts > button.add-btn i{ color:var(--ui-on-accent) !important; font-size:var(--ui-text-caption) !important }
html #my_sales-content .ct-car{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #my_sales-content .ct-more-ic{ display:none }
/* 확인·관리 (원래 왼쪽 세로 탭) → 머리 단추: 빨간 점 + 글자 + 개수 */
html #my_sales-content #sales-rail-reopen{ position:static !important; writing-mode:horizontal-tb !important }
html #my_sales-content #sales-rail-reopen.hidden{ display:none !important }
html #my_sales-content .ct-chk-dot{ width:7px; height:7px; border-radius:50%; background:var(--ui-danger) }
html #my_sales-content #rail-reopen-badge{ font-weight:var(--ui-weight-semibold); color:var(--ui-danger); font-variant-numeric:tabular-nums }
html #my_sales-content #rail-reopen-badge:empty{ display:none }
/* 설정 ▾ 펼침 메뉴 (맥 풀다운) */
html #my_sales-content .ct-more{ position:relative }
html #my_sales-content .ct-pop{ display:none }
html #my_sales-content .ct-more.open .ct-pop{
  display:block; position:absolute; top:calc(100% + 4px); right:0; z-index:60; min-width:210px; padding:5px;
  background:var(--ui-surface); border-radius:var(--ui-radius-card); box-shadow:var(--ui-elev-popover);
}
html #my_sales-content .ct-pop button{
  display:flex !important; align-items:center !important; gap:8px !important; width:100%; height:26px !important; padding:0 8px !important; margin:0 !important;
  border:0 !important; border-radius:5px !important; background:transparent !important; box-shadow:none !important;
  color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; text-align:left; white-space:nowrap; cursor:default
}
html #my_sales-content .ct-pop button.hidden{ display:none !important }
html #my_sales-content .ct-pop button:hover, html #my_sales-content .ct-pop button:focus-visible{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; outline:none }
html #my_sales-content .ct-pop button i{ width:14px; text-align:center; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #my_sales-content .ct-pop button:hover i{ color:var(--ui-on-accent) !important }
html #my_sales-content .ct-pop-views{ display:none }
html #my_sales-content .ct-pop-cap{ padding:6px 8px 2px; font-size:var(--ui-text-caption); color:var(--ui-text-2); border-top:var(--ui-hairline) solid var(--ui-line); margin-top:4px }
html #my_sales-content .ct-pop-views button.on::after{ content:"✓"; margin-left:auto }

/* ── 머리 2줄: ‹ 조회월 › · 담당자 · 걸러보기 | 검색 ······ 보기 ── */
html #my_sales-content .ct-row2{ display:flex; align-items:center; gap:6px; padding:8px 0 10px; flex-wrap:nowrap; min-width:0 }
html #my_sales-content .ct-sep{ width:var(--ui-hairline); height:16px; background:var(--ui-line); margin:0 4px; flex:none }
html #my_sales-content #sales-month-badge{ display:none !important }
html #my_sales-content #month-step{ gap:0 !important; flex:none; height:var(--ui-control); border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control) }
html #my_sales-content .month-step-btn{
  width:26px; height:var(--ui-control); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  border:0; border-radius:var(--ui-radius-control); background:transparent; color:var(--ui-text-2); cursor:pointer
}
html #my_sales-content .month-step-btn:hover{ color:var(--ui-text-1) }
html #my_sales-content .month-step-btn:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #my_sales-content .month-step-btn:disabled{ color:var(--ui-text-3); cursor:default }
html #my_sales-content .month-step-btn i{ font-size:var(--ui-text-caption) }
html #my_sales-content #month-step #month-filter{
  height:var(--ui-control) !important; min-width:0; width:auto; padding:0 4px !important; border:0 !important; box-shadow:none !important; background:transparent !important;
  font-weight:var(--ui-weight-semibold) !important; text-align:center; text-align-last:center; -webkit-appearance:none; appearance:none; cursor:pointer
}
html #my_sales-content #admin-staff-filter-wrap{ flex:none }
html #my_sales-content #admin-staff-filter-wrap > span{ display:none !important }
html #my_sales-content #admin-staff-filter-wrap #staff-filter, html #my_sales-content #month-filter{ font-family:var(--ui-font) !important }
html #my_sales-content #admin-staff-filter-wrap #staff-filter{
  height:var(--ui-control) !important; padding:0 24px 0 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important;
  background-color:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important
}
html #my_sales-content #admin-staff-filter-wrap #staff-filter:focus{ box-shadow:var(--ui-focus-ring) !important }
/* 검색 · 보기 (#sales-view-slot — sales-table.js 가 채움) */
html #my_sales-content .ct-slot{ display:flex; align-items:center; gap:8px; flex:1; min-width:0 }
html #my_sales-content .ct-search{ position:relative; flex:1; min-width:120px; max-width:340px; height:var(--ui-control); display:flex; align-items:center; gap:6px; padding:0 8px; margin:0; border-radius:var(--ui-radius-control); background:var(--ui-fill-subtle); box-shadow:var(--ui-elev-field) }
html #my_sales-content .ct-search:focus-within{ background:var(--ui-surface); box-shadow:var(--ui-focus-ring) }
html #my_sales-content .ct-search i{ font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content .ct-search input{ flex:1; min-width:0; height:100% !important; border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; font-size:var(--ui-text-body) !important }
html #my_sales-content .ct-search input::placeholder{ color:var(--ui-text-3) }
html #my_sales-content .ct-search-n{ font-size:var(--ui-text-caption); color:var(--ui-accent-text); font-weight:var(--ui-weight-semibold); font-variant-numeric:tabular-nums }
html #my_sales-content .ct-seg{ margin-left:auto; flex:none; display:inline-flex; height:var(--ui-control-sm); padding:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #my_sales-content .ct-seg button{ border:0 !important; background:transparent !important; padding:0 10px !important; height:100% !important; border-radius:5px !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; box-shadow:none !important; white-space:nowrap; cursor:pointer }
html #my_sales-content .ct-seg button.on{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }
html #my_sales-content .ct-seg button:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) !important }

/* 걸러보기 ▾ : 단추 하나 + 펼침 칸(체크 3줄 · 결과 건수 · 모두 해제). 켠 개수는 단추에 숫자로 */
html #my_sales-content #sales-status-filters{ position:relative; display:block !important; flex:none }
html #my_sales-content #sales-status-filters .sf-btn{ height:var(--ui-control) !important; padding:0 10px !important; display:inline-flex !important; align-items:center !important; gap:5px !important; white-space:nowrap !important; cursor:pointer !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font:inherit !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important }
html #my_sales-content #sales-status-filters .sf-btn:hover{ background:var(--ui-surface-alt) !important }
html #my_sales-content #sales-status-filters .sf-btn:focus-visible{ outline:none !important; box-shadow:var(--ui-focus-ring) !important }
html #my_sales-content #sales-status-filters .sf-btn i{ color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #my_sales-content #sales-status-filters .sf-btn.on{ background:var(--ui-accent-tint) !important; box-shadow:inset 0 0 0 var(--ui-hairline) var(--ui-accent) !important; color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-semibold) !important }
html #my_sales-content #sales-status-filters .sf-btn.on i{ color:var(--ui-accent-text) !important }
html #my_sales-content #sales-status-filters .sf-count{ min-width:16px; height:16px; padding:0 4px; border-radius:var(--ui-radius-pill); background:var(--ui-accent); color:var(--ui-on-accent); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-bold); display:inline-flex; align-items:center; justify-content:center }
html #my_sales-content #sales-status-filters .sf-count.hidden{ display:none }
html #my_sales-content #sales-status-filters .sf-pop, html #my_sales-content #sales-status-filters .sf-scrim{ display:none }
html #my_sales-content #sales-status-filters.open .sf-pop{
  display:block; position:absolute; top:calc(100% + 4px); left:0; z-index:60; width:240px; padding:5px;
  background:var(--ui-surface); border-radius:var(--ui-radius-card); box-shadow:var(--ui-elev-popover);
}
html #my_sales-content #sales-status-filters .sf-hd{ padding:4px 8px 4px; font-size:var(--ui-text-caption); color:var(--ui-text-2); font-weight:var(--ui-weight-regular) }
html #my_sales-content #sales-status-filters label.sf-row{
  display:flex !important; align-items:center; gap:8px !important; height:28px !important; padding:0 8px !important; margin:0;
  border:0 !important; border-radius:5px !important; background:transparent !important; box-shadow:none !important;
  color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; cursor:pointer;
}
html #my_sales-content #sales-status-filters label.sf-row:hover{ background:var(--ui-fill-subtle) !important }
html #my_sales-content #sales-status-filters .sf-cb{ width:14px; height:14px; margin:0; accent-color:var(--ui-accent); cursor:pointer }
html #my_sales-content #sales-status-filters .sf-ft{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding:6px 8px 2px; border-top:var(--ui-hairline) solid var(--ui-line); font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #my_sales-content #sales-status-filters .sf-ft button{ border:0 !important; background:transparent !important; padding:4px 0 !important; color:var(--ui-accent-text) !important; font:inherit !important; font-weight:var(--ui-weight-semibold) !important; cursor:pointer !important }

/* 확인·관리 펼친 칸 · 목록 묶음 */
html #my_sales-content .flex.gap-4.items-start:has(> #sales-cards-rail){ gap:0 !important }
html #my_sales-content #sales-cards-rail.flex{ margin:0 12px 0 16px; border:var(--ui-hairline) solid var(--ui-line) !important; border-radius:var(--ui-radius-group) !important; box-shadow:none !important }
html #my_sales-content #sales-cards-rail > div:first-child{ background:var(--ui-surface) !important }

/* ── 간단히 보기: 감싸는 흰 상자 걷기 ── */
html #my_sales-content #my_sales-list:has(#ts-tbl){ background:transparent !important; padding:0 !important; border-radius:0 !important; overflow:visible !important }

/* 요약 한 줄 띠 — 회색 바탕 위 칸 6개, 칸 사이 머리카락 선. 넘치면 옆으로 밀기 */
html #my_sales-content .ts-strip{ display:flex; align-items:stretch; margin:0 16px 10px; border-radius:var(--ui-radius-card); background:var(--ui-bg); overflow-x:auto; scrollbar-width:none }
html #my_sales-content .ts-strip::-webkit-scrollbar{ display:none }
html #my_sales-content .ts-it{ position:relative; flex:1 0 auto; display:flex; flex-direction:column; gap:1px; padding:7px 12px; margin:0; border:0; background:transparent; text-align:left; font:inherit; color:inherit; min-width:0 }
html #my_sales-content .ts-it + .ts-it::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:var(--ui-hairline); background:var(--ui-line) }
html #my_sales-content .ts-it .k{ display:flex; align-items:center; gap:5px; font-size:var(--ui-text-caption); color:var(--ui-text-2); white-space:nowrap }
html #my_sales-content .ts-it .v{ font-size:var(--ui-text-callout); font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important; white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:0 }
/* 값 옆 작은 설명은 값 아래 줄로 — 옆에 두면 1280~1440 노트북에서 마지막 칸('전월 대비 순매출')이 화면 밖으로 잘렸음(운영 실데이터 1280: 206px · 1440: 45px 넘침) */
html #my_sales-content .ts-it .v small{ display:block; margin-left:0; font-size:var(--ui-text-caption); font-weight:var(--ui-weight-regular); color:var(--ui-text-2) }
html #my_sales-content .ts-it .v.down{ color:var(--ui-danger) !important }
html #my_sales-content .ts-it .v.up{ color:var(--ui-success) !important }
html #my_sales-content .ts-it.warn .k{ color:var(--ui-warning) }
html #my_sales-content .ts-wdot{ width:6px; height:6px; border-radius:50%; background:var(--ui-warning) }
html #my_sales-content button.ts-it{ cursor:pointer; border-radius:var(--ui-radius-card) }
html #my_sales-content button.ts-it:hover{ background:var(--ui-fill-subtle) }
html #my_sales-content button.ts-it:focus-visible{ outline:none; box-shadow:inset var(--ui-focus-ring) }
html #my_sales-content button.ts-it.on{ background:var(--ui-accent-tint) }
html #my_sales-content button.ts-it.on + .ts-it::before{ display:none }
html #my_sales-content .ts-sum{ display:flex; flex-wrap:wrap; gap:2px 14px; align-items:center; margin:-4px 16px 10px; padding:0 2px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #my_sales-content .ts-sum b{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }

/* 목록 + 오른쪽 상세 */
/* 계약 상세는 목록 왼쪽(사용자 요청 2026-10-30 "상세정보가 오른쪽이 아닌 왼쪽에"). 휴대폰은 아래에서 올라오는 창 그대로 */
html #my_sales-content .ts-split{ display:grid; grid-template-columns:300px minmax(0,1fr); align-items:stretch; border-top:var(--ui-hairline) solid var(--ui-line); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .ts-split.no-insp{ grid-template-columns:minmax(0,1fr) }
html #my_sales-content .ts-split.no-insp .ts-insp{ display:none }
html #my_sales-content .ts-list{ background:var(--ui-surface); min-width:0; border-radius:0; overflow:hidden; container:tslist / inline-size }
html #my_sales-content .ts-scroll{ overflow-x:auto }
html #my_sales-content #ts-tbl{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:var(--ui-text-body) }
html #my_sales-content #ts-tbl th{ height:28px; padding:0 10px; text-align:left; font-size:var(--ui-text-caption); font-weight:var(--ui-weight-regular); color:var(--ui-text-2); border-bottom:var(--ui-hairline) solid var(--ui-line); white-space:nowrap; background:var(--ui-surface) }
html #my_sales-content #ts-tbl th.r, html #my_sales-content #ts-tbl td.r{ text-align:right }
html #my_sales-content #ts-tbl td{ height:28px; padding:0 10px; border-bottom:var(--ui-hairline) solid var(--ui-line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ui-text-1); background:var(--ui-surface) }
html #my_sales-content #ts-tbl .num{ font-variant-numeric:tabular-nums }
html #my_sales-content #ts-tbl tbody tr:last-child td{ border-bottom:0 }
html #my_sales-content #ts-tbl tbody tr.ts-row{ cursor:default }
html #my_sales-content #ts-tbl tbody tr.ts-row:focus-visible{ outline:none; box-shadow:inset var(--ui-focus-ring) }
html #my_sales-content #ts-tbl .co{ font-weight:var(--ui-weight-semibold) }
html #my_sales-content #ts-tbl .pr{ margin-left:6px; color:var(--ui-text-2) }
html #my_sales-content #ts-tbl .ts-dim{ color:var(--ui-text-2) }
html #my_sales-content #ts-tbl .ts-iss{ display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--ui-danger); vertical-align:1px }
html #my_sales-content #ts-tbl tr.ts-cancel .co, html #my_sales-content #ts-tbl tr.ts-cancel .num{ color:var(--ui-text-2); text-decoration:line-through }
html #my_sales-content #ts-tbl tbody tr.ts-row.sel td{ background:var(--ui-accent-tint) !important }
html #my_sales-content #ts-tbl .ts-none{ height:80px; text-align:center; color:var(--ui-text-2) }
@media (hover:hover){ html #my_sales-content #ts-tbl tbody tr.ts-row:hover td{ background:var(--ui-fill-subtle) } }
/* 진행: 점 3개(계약 · 계산서 · 입금) + 글자 */
html #my_sales-content .ts-tag{ display:inline-flex; align-items:center; gap:5px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); white-space:nowrap }
html #my_sales-content .ts-tag.g{ color:var(--ui-success) }
html #my_sales-content .ts-tag.o{ color:var(--ui-warning) }
html #my_sales-content .ts-tag.x{ color:var(--ui-text-2) }
html #my_sales-content .ts-insp .ts-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
html #my_sales-content .ts-pips{ display:inline-flex; gap:2px }
html #my_sales-content .ts-pips i{ width:6px; height:6px; border-radius:50%; background:var(--ui-fill-hover) }
html #my_sales-content .ts-pips i.ok{ background:var(--ui-success) }
html #my_sales-content .ts-pips i.now{ background:var(--ui-warning) }
html #my_sales-content .ts-foot{ display:flex; justify-content:space-between; gap:10px; padding:7px 16px; border-top:var(--ui-hairline) solid var(--ui-line); font-size:var(--ui-text-caption); color:var(--ui-text-2) }
/* 오른쪽 아래 '?' 도움말 단추(#help-fab-btn · 오른쪽 24px · 44px)에 표 아래 설명 줄 끝이 가리지 않게: 설명 줄 오른쪽 여백 + 맨 아래까지 내리면 단추 위로 */
html #my_sales-content .ts-foot{ padding-right:76px }
@media (min-width:768px){ html #my_sales-content{ padding-bottom:76px } }
html #my_sales-content .ts-foot .ts-link{ min-height:0; font-size:var(--ui-text-caption) }

/* 오른쪽 상세 — 광고주DB 상세와 같은 패널 */
html #my_sales-content .ts-insp{ order:-1; background:var(--ui-surface); border-right:var(--ui-hairline) solid var(--ui-line); border-radius:0; padding:0 0 10px; min-width:0; align-self:stretch }
html #my_sales-content .ts-insp-empty{ padding:16px 14px; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #my_sales-content .ts-insp-h{ display:flex; gap:8px; align-items:center; min-height:44px; padding:6px 14px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .ts-insp-h b{ display:block; font-size:var(--ui-text-callout); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
html #my_sales-content .ts-insp-h > div{ min-width:0 }
html #my_sales-content .ts-insp-h > div > span{ display:flex; align-items:center; gap:4px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content .ts-track{ padding:8px 14px; border-bottom:var(--ui-hairline) solid var(--ui-line); margin:0 }
html #my_sales-content .ts-track .tp-track{ justify-content:flex-start }
html #my_sales-content .ts-sec{ padding:10px 14px 2px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #my_sales-content .ts-kv{ display:grid; grid-template-columns:92px minmax(0,1fr); gap:0 8px; min-height:26px; align-items:center; padding:0 14px; font-size:var(--ui-text-footnote) }
html #my_sales-content .ts-kv + .ts-kv::before{ content:none }
html #my_sales-content .ts-kv .l{ color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #my_sales-content .ts-kv .v{ min-width:0; word-break:keep-all; color:var(--ui-text-1) }
html #my_sales-content .ts-kv .num{ font-variant-numeric:tabular-nums }
html #my_sales-content .ts-kv b{ font-weight:var(--ui-weight-semibold) }
html #my_sales-content .ts-dim{ color:var(--ui-text-2) }
html #my_sales-content .ts-link{ border:0; background:transparent; padding:0 4px; margin-left:-4px; min-height:24px; display:inline-flex; align-items:center; font:inherit; color:var(--ui-accent-text); cursor:pointer }
html #my_sales-content .ts-link:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring); border-radius:4px }
html #my_sales-content .ts-items{ margin:6px 0 0; border-top:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .ts-items summary{ padding:6px 14px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2); cursor:pointer }
html #my_sales-content .ts-links{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px 0; margin-top:8px; border-top:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .ts-links .tp-lk{ height:var(--ui-control-sm); padding:0 8px !important; display:inline-flex; align-items:center; gap:5px; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #my_sales-content .ts-links .tp-lk i{ color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #my_sales-content .ts-links .tp-lk .ext{ display:none }
html #my_sales-content .ts-acts{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px 0 }
html #my_sales-content .ts-btn{ flex:1 0 auto; height:var(--ui-control-sm); padding:0 10px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font:inherit; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); cursor:pointer; white-space:nowrap }
html #my_sales-content .ts-btn:hover{ background:var(--ui-surface-alt) }
html #my_sales-content .ts-btn:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #my_sales-content .ts-btn.danger{ color:var(--ui-danger) }

/* ── 상세 '1안 수정'(사용자 승인 2026-10-30): 문서 단추 3칸 맨 위 · 진행 막대 + 다음 할 일 · 설정 앱 묶음.
   상태가 바뀌어도 높이 · 글자 자리가 그대로 — 칸 수 고정, 단계 글자 · 다음 할 일은 한 줄(넘치면 …), 묶음 줄 높이 고정 ── */
html #my_sales-content .ts-insp-h .ts-tag{ min-width:64px }
html #my_sales-content .tsd-docs{ display:grid; gap:6px; padding:8px 14px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .tsd-doc{ height:var(--ui-control-sm); min-width:0; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font:inherit; font-size:var(--ui-text-footnote); cursor:pointer; overflow:hidden }
html #my_sales-content .tsd-doc span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
html #my_sales-content .tsd-doc i{ font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content .tsd-doc.on i{ color:var(--ui-success) }
html #my_sales-content .tsd-doc:hover:not(:disabled){ background:var(--ui-surface-alt) }
html #my_sales-content .tsd-doc:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #my_sales-content .tsd-doc:disabled{ color:var(--ui-text-2); box-shadow:none; background:var(--ui-fill-subtle); cursor:default }
html #my_sales-content .tsd-bar{ padding:12px 14px 10px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .tsd-segs{ display:grid; gap:3px }
html #my_sales-content .tsd-segs i{ height:5px; border-radius:3px; background:var(--ui-fill) }
html #my_sales-content .tsd-segs i.ok{ background:var(--ui-success) }
html #my_sales-content .tsd-segs i.now{ background:var(--ui-warning) }
html #my_sales-content .tsd-segs i.na{ background:var(--ui-fill-hover) }
html #my_sales-content .tsd-segs i.half{ background:linear-gradient(90deg, var(--ui-warning) 0 var(--p), var(--ui-fill) var(--p) 100%) }
html #my_sales-content .tsd-labs{ display:grid; gap:3px; margin-top:6px }
html #my_sales-content .tsd-labs button{ min-width:0; padding:2px 0; border:0; border-radius:4px; background:transparent; text-align:left; font:inherit; color:var(--ui-text-1); cursor:pointer }
html #my_sales-content .tsd-labs button:disabled{ cursor:default }
html #my_sales-content .tsd-labs button:hover:not(:disabled) .t{ color:var(--ui-accent-text) }
html #my_sales-content .tsd-labs button:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #my_sales-content .tsd-labs .t, html #my_sales-content .tsd-labs .s{ display:block; height:16px; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content .tsd-labs .t{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold) }
html #my_sales-content .tsd-labs .s{ font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content .tsd-labs .ok .s{ color:var(--ui-success) }
html #my_sales-content .tsd-labs .now .t, html #my_sales-content .tsd-labs .half .t, html #my_sales-content .tsd-labs .half .s{ color:var(--ui-warning) }
html #my_sales-content .tsd-labs .na .t{ color:var(--ui-text-2) }
html #my_sales-content .tsd-next{ display:flex; align-items:center; justify-content:space-between; gap:8px; height:24px; margin-top:9px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #my_sales-content .tsd-next > span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content .tsd-next.fin > span{ color:var(--ui-success) }
html #my_sales-content .tsd-go{ flex:none; min-width:84px; height:var(--ui-control-sm); padding:0 10px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-accent); color:var(--ui-on-accent); font:inherit; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); cursor:pointer; white-space:nowrap }
html #my_sales-content .tsd-go:hover{ background:var(--ui-accent-hover) }
html #my_sales-content .tsd-go:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #my_sales-content .tsd-groups{ background:var(--ui-bg); padding:2px 10px 10px }
html #my_sales-content .tsd-gl{ padding:8px 6px 4px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content .tsd-grp{ background:var(--ui-surface); border-radius:var(--ui-radius-group); overflow:hidden }
html #my_sales-content .tsd-r{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; height:28px; padding:0 10px; font-size:var(--ui-text-footnote) }
html #my_sales-content .tsd-r + .tsd-r::before{ content:""; position:absolute; top:0; left:10px; right:0; border-top:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .tsd-r .l{ flex:none; color:var(--ui-text-1) }
html #my_sales-content .tsd-r .v{ min-width:0; color:var(--ui-text-2); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content .tsd-r .v.num{ font-variant-numeric:tabular-nums }
html #my_sales-content .tsd-r .v.strong{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }
html #my_sales-content .tsd-r .v.warn{ color:var(--ui-warning) }
html #my_sales-content .tsd-r .v .ts-link{ min-height:0; margin:0; padding:0 }
html #my_sales-content .tsd-r .v .tp-sw{ margin:0 }
html #my_sales-content .tsd-groups .ts-items{ margin:8px 0 0; border-top:0; background:var(--ui-surface); border-radius:var(--ui-radius-group) }
html #my_sales-content .tsd-groups .ts-items summary{ padding:6px 10px }
html #my_sales-content .tsd-groups .ts-items .ts-kv{ padding:0 10px }
html #my_sales-content .ts-insp .ts-acts{ padding:10px 14px 2px; border-top:var(--ui-hairline) solid var(--ui-line) }

/* ── 상세 안 취소 안내 상자(자세히 보기와 같은 내용) — 300px 칸에서 할 일 글자가 한 글자씩 세로로 꺾이던 것:
   할 일 줄을 [글자 위 · 단추 아래]로 쌓고, 맥 묶음 모양으로. 맨 아래에도 있는 [취소 되돌리기]는 상자 안에서만 숨김 ── */
html #my_sales-content .ts-insp .sales-cancel-box{ margin:0 !important; padding:10px 14px !important; border:0 !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important; border-radius:0 !important; background:var(--ui-bg) !important }
html #my_sales-content .ts-insp .sales-cancel-hd > div{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #my_sales-content .ts-insp .sales-cancel-hd > div i{ color:var(--ui-text-2) !important }
html #my_sales-content .ts-insp .sales-cancel-hd > button{ display:none !important }
html #my_sales-content .ts-insp .sales-cancel-box > div:not(.sales-cancel-hd){ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #my_sales-content .ts-insp .sales-cancel-fu{ flex-direction:column !important; align-items:stretch !important; gap:6px !important; padding:8px 10px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface) !important }
html #my_sales-content .ts-insp .sales-cancel-fu > div{ flex:none !important; width:auto !important }
html #my_sales-content .ts-insp .sales-cancel-fu > div > div:first-child{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #my_sales-content .ts-insp .sales-cancel-fu > div > div:first-child span{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important }
html #my_sales-content .ts-insp .sales-cancel-fu > div > div + div{ font-size:var(--ui-text-caption) !important; line-height:1.45 !important; color:var(--ui-text-2) !important; word-break:keep-all }
html #my_sales-content .ts-insp .sales-cancel-fu > span{ display:flex !important; flex-wrap:wrap; gap:6px !important }
html #my_sales-content .ts-insp .sales-cancel-fu button{ height:var(--ui-control-sm); padding:0 9px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap }
html #my_sales-content .ts-insp .sales-cancel-fu > span > button:first-child:not(:only-child), html #my_sales-content .ts-insp .sales-cancel-fu > span > button:only-child{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; font-weight:var(--ui-weight-semibold) !important }

/* ── 확인·관리 레일 — 맥 2줄 목록 + 눌러서 펼치기(시안 2안). 담당자별 묶음 · 정렬 · 단추가 여는 창은 그대로 ── */
html #my_sales-content #sales-cards-rail > div:first-child{ height:40px; padding:0 8px 0 12px !important; gap:6px !important; background:var(--ui-surface) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #my_sales-content #sales-cards-rail > div:first-child > span:first-child{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #my_sales-content #sales-cards-rail > div:first-child > span:first-child > i{ display:none }
html #my_sales-content #sales-cards-rail #subtab-cards-badge{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--ui-danger) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important; line-height:18px }
html #my_sales-content #sales-cards-rail #ac-collapse-all-btn, html #my_sales-content #sales-cards-rail > div:first-child > button:last-child{ height:24px; padding:0 8px !important; border-radius:var(--ui-radius-control) !important; background:transparent !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important }
html #my_sales-content #sales-cards-rail > div:first-child > button:last-child{ width:24px; padding:0 !important }
html #my_sales-content #sales-cards-rail #ac-collapse-all-btn i, html #my_sales-content #sales-cards-rail > div:first-child > button:last-child i{ font-size:11px !important }
html #my_sales-content #sales-cards-rail #action-cards-container{ padding:4px 10px 12px !important; background:var(--ui-bg) !important; border-radius:0 !important }
html #my_sales-content #sales-cards-rail #action-cards-container > :is(.ac4-gh,.ac4-empty,.ac4-hist){ background:transparent !important; border-radius:0 !important }
html #my_sales-content #sales-cards-rail .ac4-gh{ display:flex; align-items:baseline; gap:6px; padding:10px 4px 4px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content #sales-cards-rail .ac4-gh b{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #my_sales-content #sales-cards-rail .ac4-gh .r{ margin-left:auto; white-space:nowrap }
html #my_sales-content #sales-cards-rail .ac4-gh.top{ padding-top:8px }
html #my_sales-content #sales-cards-rail .ac4-grp{ background:var(--ui-surface); border-radius:var(--ui-radius-group); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #my_sales-content #sales-cards-rail .ac4 + .ac4{ border-top:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content #sales-cards-rail .ac4-row{ position:relative; display:block; width:100%; padding:7px 28px 7px 12px; border:0; background:transparent; text-align:left; font:inherit; color:inherit; cursor:pointer }
html #my_sales-content #sales-cards-rail .ac4-row:focus-visible{ outline:none; box-shadow:inset var(--ui-focus-ring) }
@media (hover:hover){ html #my_sales-content #sales-cards-rail .ac4-row:hover{ background:var(--ui-fill-subtle) } }
html #my_sales-content #sales-cards-rail .ac4:not(.ac3-collapsed){ background:var(--ui-surface-alt) }
html #my_sales-content #sales-cards-rail .ac4-a{ display:flex; align-items:baseline; gap:8px; height:18px }
html #my_sales-content #sales-cards-rail .ac4-a b{ flex:1; min-width:0; font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content #sales-cards-rail .ac4-a .amt{ font-size:var(--ui-text-footnote); font-variant-numeric:tabular-nums; color:var(--ui-text-1); white-space:nowrap }
html #my_sales-content #sales-cards-rail .ac4-b{ display:flex; align-items:center; gap:5px; height:17px; margin-top:2px; font-size:var(--ui-text-caption); color:var(--ui-text-2); white-space:nowrap; overflow:hidden }
html #my_sales-content #sales-cards-rail .ac4-b > span{ flex:none }
html #my_sales-content #sales-cards-rail .ac4-b .hidden{ display:none }
html #my_sales-content #sales-cards-rail .ac4-st{ display:inline-flex; align-items:center; gap:5px; color:var(--ui-text-1) }
html #my_sales-content #sales-cards-rail .ac4-x{ flex:0 1 auto !important; min-width:0; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content #sales-cards-rail .ac4-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; flex:none; background:var(--ui-text-3) }
html #my_sales-content #sales-cards-rail .ac4-dot.red{ background:var(--ui-danger) } html #my_sales-content #sales-cards-rail .ac4-dot.orange{ background:var(--ui-warning) } html #my_sales-content #sales-cards-rail .ac4-dot.green{ background:var(--ui-success) }
html #my_sales-content #sales-cards-rail .ac4 .red{ color:var(--ui-danger) } html #my_sales-content #sales-cards-rail .ac4 .org{ color:var(--ui-warning) } html #my_sales-content #sales-cards-rail .ac4 .acc{ color:var(--ui-accent-text) }
html #my_sales-content #sales-cards-rail .ac4-chev{ position:absolute; right:10px; top:50%; width:10px; height:10px; margin-top:-5px; color:var(--ui-text-3); transition:transform var(--ui-dur-fast) var(--ui-ease) }
html #my_sales-content #sales-cards-rail .ac4:not(.ac3-collapsed) > .ac4-row .ac4-chev{ transform:rotate(90deg) }
html #my_sales-content #sales-cards-rail .ac4.ac3-collapsed > .ac4-ex{ display:none }
html #my_sales-content #sales-cards-rail .ac4-ex{ padding:0 0 2px }
html #my_sales-content #sales-cards-rail .ac4-bar{ display:grid; grid-template-columns:1fr 1fr; gap:3px; margin:2px 12px 0 }
html #my_sales-content #sales-cards-rail .ac4-bar i{ display:block; height:4px; border-radius:2px; background:var(--ui-fill) }
html #my_sales-content #sales-cards-rail .ac4-bar i.ok{ background:var(--ui-success) } html #my_sales-content #sales-cards-rail .ac4-bar i.na{ background:var(--ui-fill-hover) } html #my_sales-content #sales-cards-rail .ac4-bar i.now{ background:var(--ui-warning) }
html #my_sales-content #sales-cards-rail .ac4-labs{ display:grid; grid-template-columns:1fr 1fr; gap:3px; margin:3px 12px 0 }
html #my_sales-content #sales-cards-rail .ac4-labs > *{ display:block; min-width:0; padding:0; border:0; background:transparent; text-align:left; font:inherit; color:inherit }
html #my_sales-content #sales-cards-rail .ac4-labs .clk{ cursor:pointer }
html #my_sales-content #sales-cards-rail .ac4-labs .t{ display:block; height:16px; line-height:16px; font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content #sales-cards-rail .ac4-labs .clk .t{ color:var(--ui-accent-text) }
@media (hover:hover){ html #my_sales-content #sales-cards-rail .ac4-labs .clk:hover .t{ text-decoration:underline } }
html #my_sales-content #sales-cards-rail .ac4-labs .s{ display:block; height:15px; line-height:15px; font-size:var(--ui-text-caption); color:var(--ui-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content #sales-cards-rail .ac4-note{ padding:6px 12px 6px; font-size:var(--ui-text-caption); color:var(--ui-text-2); line-height:1.45 }
html #my_sales-content #sales-cards-rail .ac4-memo{ border-top:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content #sales-cards-rail .ac4-memo .mh{ display:flex; justify-content:space-between; align-items:center; height:26px; padding:0 12px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content #sales-cards-rail .ac4-thread{ max-height:128px; overflow-y:auto; padding:0 12px }
html #my_sales-content #sales-cards-rail .ac4-mi{ padding:0 0 6px; font-size:var(--ui-text-footnote); line-height:1.45; color:var(--ui-text-1); word-break:break-word }
html #my_sales-content #sales-cards-rail .ac4-mi .w{ font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content #sales-cards-rail .ac4-mi.sys .c{ color:var(--ui-text-2) }
html #my_sales-content #sales-cards-rail .ac4-mempty{ padding:0 0 6px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content #sales-cards-rail .ac4-memo .in{ display:flex; gap:6px; padding:0 10px 8px }
html #my_sales-content #sales-cards-rail .ac4-memo input{ flex:1; min-width:0; height:26px; padding:0 8px; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; font:inherit; font-size:var(--ui-text-footnote) }
html #my_sales-content #sales-cards-rail .ac4-memo input:focus{ outline:none; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #my_sales-content #sales-cards-rail .ac4-acts{ display:flex; align-items:center; gap:6px; padding:8px 12px; border-top:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content #sales-cards-rail .ac4-acts .sp{ flex:1 }
html #my_sales-content #sales-cards-rail .ac4-btn{ display:inline-flex; align-items:center; justify-content:center; gap:5px; height:var(--ui-control-sm); padding:0 9px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font:inherit; font-size:var(--ui-text-caption); white-space:nowrap; cursor:pointer }
html #my_sales-content #sales-cards-rail .ac4-btn i{ font-size:11px; color:var(--ui-text-2) }
html #my_sales-content #sales-cards-rail .ac4-btn.ic{ width:var(--ui-control-sm); padding:0 }
html #my_sales-content #sales-cards-rail .ac4-btn.fu-on{ color:var(--ui-accent-text) } html #my_sales-content #sales-cards-rail .ac4-btn.fu-on i{ color:var(--ui-accent-text) }
html #my_sales-content #sales-cards-rail .ac4-btn.pri{ background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
@media (hover:hover){ html #my_sales-content #sales-cards-rail .ac4-btn:hover{ background:var(--ui-fill-subtle) } html #my_sales-content #sales-cards-rail .ac4-btn.pri:hover{ background:var(--ui-accent-hover) } }
html #my_sales-content #sales-cards-rail .ac4-cf{ padding:0 12px 6px }
html #my_sales-content #sales-cards-rail .ac4-cfi{ padding:7px 0; border-top:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content #sales-cards-rail .ac4-cfi:first-child{ border-top:0; padding-top:0 }
html #my_sales-content #sales-cards-rail .ac4-cfi .tt{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #my_sales-content #sales-cards-rail .ac4-cfi .dd{ margin-top:1px; font-size:var(--ui-text-caption); line-height:1.45; color:var(--ui-text-2); word-break:keep-all }
html #my_sales-content #sales-cards-rail .ac4-cfi .bb{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
html #my_sales-content #sales-cards-rail .ac4-resolved{ padding:6px 12px; border-top:var(--ui-hairline) solid var(--ui-line); font-size:var(--ui-text-caption); color:var(--ui-success); text-align:center }
html #my_sales-content #sales-cards-rail .ac4.ac4-is-done > .ac4-row b{ color:var(--ui-success) }
html #my_sales-content #sales-cards-rail .ac4-empty{ display:flex; flex-direction:column; gap:2px; padding:28px 8px; text-align:center; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #my_sales-content #sales-cards-rail .ac4-empty b{ font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #my_sales-content #sales-cards-rail .ac4-hist{ margin-top:10px }
html #my_sales-content #sales-cards-rail .ac4-hist summary{ display:flex; align-items:center; gap:6px; height:28px; padding:0 4px; list-style:none; cursor:pointer; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #my_sales-content #sales-cards-rail .ac4-hist summary::-webkit-details-marker{ display:none }
html #my_sales-content #sales-cards-rail .ac4-hist summary span{ font-weight:var(--ui-weight-regular); color:var(--ui-text-2) }
html #my_sales-content #sales-cards-rail .ac4-hist summary .ac4-chev{ position:static; margin:0; color:var(--ui-text-2) }
html #my_sales-content #sales-cards-rail .ac4-hist[open] summary .ac4-chev{ transform:rotate(90deg) }
html #my_sales-content #sales-cards-rail .ac4-done{ display:flex; align-items:center; gap:8px; height:32px; padding:0 12px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #my_sales-content #sales-cards-rail .ac4-done + .ac4-done{ border-top:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content #sales-cards-rail .ac4-done .n{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ui-text-1) }
html #my_sales-content #sales-cards-rail .ac4-done .amt{ font-variant-numeric:tabular-nums }
@media (max-width:767px){
  html #my_sales-content #sales-cards-rail .ac4-row{ min-height:44px }
  html #my_sales-content #sales-cards-rail .ac4-btn{ height:32px; padding:0 12px }
  html #my_sales-content #sales-cards-rail .ac4-btn.ic{ width:32px }
  html #my_sales-content #sales-cards-rail .ac4-memo input{ height:32px; font-size:16px }
}

/* ── PC 왼쪽 칸 [상세 | 확인·관리] 탭(A안) — 확인·관리 레일을 왼쪽 칸 안으로 옮겨 씀. 휴대폰은 탭 없이 원래대로 ── */
html #my_sales-content .ts-lseg{ position:sticky; top:0; z-index:2; display:flex; padding:8px 10px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .ts-lseg .s{ flex:1; display:flex; padding:2px; border-radius:8px; background:var(--ui-fill) }
html #my_sales-content .ts-lseg button{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:4px; height:24px; border:0; border-radius:6px; background:transparent; font:inherit; font-size:var(--ui-text-footnote); color:var(--ui-text-1); cursor:pointer }
html #my_sales-content .ts-lseg button[aria-selected="true"]{ background:var(--ui-surface); box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold) }
html #my_sales-content .ts-lseg button:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #my_sales-content .ts-lseg .n{ min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--ui-danger); color:var(--ui-on-accent); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); line-height:16px; text-align:center }
html #my_sales-content .ts-lseg .n.hidden{ display:none }
html #my_sales-content .ts-insp[data-tab="c"] #ts-insp-d, html #my_sales-content .ts-insp[data-tab="d"] #ts-insp-c{ display:none }
html #my_sales-content .ts-insp:has(#ts-insp-c #sales-cards-rail)[data-tab="c"]{ padding-bottom:0; background:var(--ui-bg) }
html #my_sales-content #ts-insp-c #sales-cards-rail{ width:auto !important; max-height:calc(100vh - 120px) !important; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:var(--ui-bg) !important; position:sticky; top:41px }
html #my_sales-content #ts-insp-c #sales-cards-rail > div:first-child{ height:30px; padding:0 6px 0 10px !important; background:transparent !important; border-bottom:0 !important; justify-content:flex-end }
html #my_sales-content #ts-insp-c #sales-cards-rail > div:first-child > span:first-child, html #my_sales-content #ts-insp-c #subtab-cards-badge, html #my_sales-content #ts-insp-c #sales-cards-rail > div:first-child > button:last-child{ display:none !important }
html #my_sales-content #ts-insp-c #action-cards-container{ padding-top:0 !important }
html #my_sales-content #sales-rail-reopen[aria-pressed="true"]{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important }
@media (max-width:767px){ html #my_sales-content .ts-lseg, html #my_sales-content #ts-insp-c{ display:none !important } html #my_sales-content .ts-insp[data-tab="c"] #ts-insp-d{ display:block } }

/* ── 자세히 보기 — 맥 고밀도 한 줄(간단히 보기와 같은 요약 한 줄 · 32px 줄 · 아래 설명줄). 열 · 단추 · 펼친 줄 내용은 그대로 ── */
html #my_sales-content .tp-wrap{ background:var(--ui-surface); border-top:var(--ui-hairline) solid var(--ui-line); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .tp-scroll{ overflow-x:auto }
html #my_sales-content .tp-wrap .ts-foot{ border-top:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content #tp-tbl{ width:100%; table-layout:auto; font-size:var(--ui-text-body) }
html #my_sales-content #tp-tbl :is(thead th, tbody tr.tp-main td):nth-child(3){ width:100%; max-width:0 }
html #my_sales-content #tp-tbl thead th{ height:28px; padding:0 8px !important; background:var(--ui-surface-alt) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-2) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content #tp-tbl tbody tr.tp-main td{ height:32px; padding:0 8px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content #tp-tbl tbody tr.tp-main td.tp-num{ position:relative }
html #my_sales-content #tp-tbl .tp-mon{ font-size:var(--ui-text-footnote); color:var(--ui-text-2); font-variant-numeric:tabular-nums }
/* 이월: 줄 높이를 지키려고 글자 대신 주황 화살표(마우스를 올리면 '이월 2026.09~ …') */
html #my_sales-content #tp-tbl .tp-carry{ display:inline !important; margin-left:3px; padding:0 !important; background:transparent !important; font-size:0 !important; cursor:help }
html #my_sales-content #tp-tbl .tp-carry i{ font-size:11px; color:var(--ui-warning) }
/* 진행: 점 + 이름 한 줄(날짜 · 상태는 마우스를 올리면). 밀린 단계를 누르면 원래 처리 창 */
html #my_sales-content #tp-tbl .tp-track{ display:flex; align-items:center; gap:0; flex-wrap:nowrap }
html #my_sales-content #tp-tbl .tp-step{ flex-direction:row !important; align-items:center; gap:0 !important; min-width:0 !important; padding:2px; border-radius:var(--ui-radius-row) }
html #my_sales-content #tp-tbl tbody td.tp-mon-col{ padding:0 6px !important; text-overflow:clip !important }
html #my_sales-content #tp-tbl .tp-step .dot{ width:14px !important; height:14px !important; font-size:0 !important; border-width:1px !important; transform:none !important; box-shadow:none !important }
html #my_sales-content #tp-tbl .tp-step .dot i{ font-size:11px; transform:scale(.72) }
html #my_sales-content #tp-tbl td.tp-prog{ text-overflow:clip !important }
html #my_sales-content #tp-tbl td.tp-prog .tp-track{ display:inline-flex; vertical-align:middle }
html #my_sales-content #tp-tbl .tp-now{ margin-left:4px; font-size:var(--ui-text-caption); color:var(--ui-text-2); vertical-align:middle }
html #my_sales-content #tp-tbl .tp-now.o{ color:var(--ui-warning) } html #my_sales-content #tp-tbl .tp-now.g{ color:var(--ui-success) }
html #my_sales-content #tp-tbl .tp-step .dot.done{ background:var(--ui-success) !important; color:var(--ui-on-accent) !important }
html #my_sales-content #tp-tbl .tp-step .dot.partial{ background:var(--ui-warning) !important }
html #my_sales-content #tp-tbl .tp-step .cap{ display:none }
html #my_sales-content #tp-tbl .tp-step .dot.done + .cap{ color:var(--ui-text-1) !important }
html #my_sales-content #tp-tbl .tp-step .dot.partial + .cap{ color:var(--ui-warning) !important }
html #my_sales-content #tp-tbl .tp-step .dt{ display:none }
html #my_sales-content #tp-tbl .tp-step.clk .cap{ color:var(--ui-accent-text) !important }
@media (hover:hover){ html #my_sales-content #tp-tbl .tp-step.clk:hover{ background:var(--ui-accent-tint) } }
html #my_sales-content #tp-tbl .tp-link{ flex:0 0 4px; width:4px; height:1px; margin:0 }
/* 폭이 모자라면(노트북 · 확인·관리를 옆에 편 때) 펼친 줄에도 있는 칸부터 숨긴다: 초도컨택 · 전자계약 → 계약자. 그래도 모자라면 옆으로 밀기 */
html #my_sales-content .tp-wrap{ container-type:inline-size; container-name:tpw }
@container tpw (max-width:1150px){ html #my_sales-content #tp-tbl :is(th,td):is(.tp-contact-col,.tp-ecc-col){ display:none; width:0 !important } }
@container tpw (max-width:960px){ html #my_sales-content #tp-tbl :is(th,td).tp-owner-col{ display:none; width:0 !important } }
@container tpw (max-width:980px){ html #my_sales-content #tp-tbl{ min-width:980px } }
@container tpw (max-width:979px){ html #my_sales-content #tp-tbl :is(thead th, tbody tr.tp-main td):nth-child(3){ position:sticky; left:0; z-index:1; background:var(--ui-surface) } html #my_sales-content #tp-tbl thead th:nth-child(3){ z-index:3; background:var(--ui-surface-alt) !important } }
/* 계약 · 품목: 업체 · 품목 · 계약번호 한 줄, 확인·관리 표시는 색 글자(꼬리표 상자 없음). 품목 요약은 펼친 줄 '품목 내역'에 */
html #my_sales-content #tp-tbl td .tp-co{ display:inline; font-weight:var(--ui-weight-semibold) }
html #my_sales-content #tp-tbl td .tp-co .exp{ font-size:11px; transform:scale(.8); margin-right:6px }
html #my_sales-content #tp-tbl td .tp-co .biz{ display:inline-block; max-width:62%; vertical-align:bottom; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
html #my_sales-content #tp-tbl td .tp-cometa{ display:inline; margin-left:6px }
html #my_sales-content #tp-tbl td .tp-cometa > span + span{ margin-left:6px }
/* 계약번호: 줄 안에선 파란 꼬리표 상자 → 회색 글자(칸 끝에서 잘릴 때 파란 상자 조각만 보이던 것), 전체는 마우스를 올리면 */
html #my_sales-content #tp-tbl td .tp-cnum{ margin-left:0; padding:0; background:transparent !important; border-radius:0; color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important; font-size:var(--ui-text-caption) !important }
html #my_sales-content #tp-tbl td .tp-itemsum{ display:none }
html #my_sales-content #tp-tbl .tp-alert{ display:inline !important; margin-left:6px; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap }
html #my_sales-content #tp-tbl .tp-alert i{ display:none }
html #my_sales-content #tp-tbl .tp-alert::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:currentColor; vertical-align:1px }
html #my_sales-content #tp-tbl .tp-alert.red{ color:var(--ui-danger) !important } html #my_sales-content #tp-tbl .tp-alert.amber{ color:var(--ui-warning) !important } html #my_sales-content #tp-tbl .tp-alert.blue{ color:var(--ui-accent-text) !important }
html #my_sales-content #tp-tbl .tp-contact, html #my_sales-content #tp-tbl .tp-owner{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content #tp-tbl .tp-contact{ color:var(--ui-text-2) !important }
/* 금액: 한 줄 · 고정폭 숫자. 상품·수수료가 있는 계약은 금액 앞 주황 점(마우스를 올리면 금액, 펼친 줄 계약 정보에도) */
html #my_sales-content #tp-tbl .tp-n{ font-size:var(--ui-text-footnote) !important; font-variant-numeric:tabular-nums }
html #my_sales-content #tp-tbl .tp-n.net{ font-weight:var(--ui-weight-semibold) !important }
html #my_sales-content #tp-tbl td.tp-num .tp-pp{ position:absolute; left:2px; top:50%; width:6px; height:6px; margin-top:-3px; overflow:hidden; border-radius:50%; background:var(--ui-warning); color:transparent; font-size:0; cursor:help }
html #my_sales-content #tp-tbl .tp-pay{ display:inline-block; padding:0 !important; line-height:20px; background:transparent !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important; font-size:var(--ui-text-footnote) !important; font-variant-numeric:tabular-nums }
html #my_sales-content #tp-tbl .tp-ecc{ padding:0 !important; background:transparent !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important }
html #my_sales-content #tp-tbl .tp-ecc.y{ color:var(--ui-accent-text) !important } html #my_sales-content #tp-tbl .tp-ecc.n{ color:var(--ui-text-2) !important }
/* 진행상태 스위치 · 작업 단추: 줄 높이에 맞게 */
html #my_sales-content #tp-tbl .tp-sw-tr{ width:76px !important; height:22px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill) !important }
html #my_sales-content #tp-tbl .tp-sw-kn{ border-radius:5px !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important }
html #my_sales-content #tp-tbl .tp-sw-lb{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; letter-spacing:0 !important; color:var(--ui-text-2) !important }
html #my_sales-content #tp-tbl .tp-sw[aria-checked="false"] .tp-sw-lb.ing{ color:var(--ui-warning) !important; font-weight:var(--ui-weight-semibold) !important }
html #my_sales-content #tp-tbl .tp-sw[aria-checked="true"] .tp-sw-lb.dn{ color:var(--ui-success) !important; font-weight:var(--ui-weight-semibold) !important }
html #my_sales-content #tp-tbl td.c > div{ gap:2px !important }
html #my_sales-content #tp-tbl .tp-ib{ width:24px !important; height:24px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:transparent !important; color:var(--ui-text-2) !important; font-size:11px !important }
@media (hover:hover){ html #my_sales-content #tp-tbl .tp-ib:hover{ background:var(--ui-fill-subtle) !important; color:var(--ui-text-1) !important } }
html #my_sales-content #tp-tbl tbody td.text-center[colspan]{ height:64px; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) }
/* 펼친 줄: 바탕만 맥 묶음색으로(내용 · 배치 그대로) */
html #my_sales-content #tp-tbl tr.tp-detail td{ background:var(--ui-bg) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
@media (max-width:767px){
  /* 휴대폰: 옆으로 밀어 보기. 귀속월은 펼친 줄 '등록일 · 귀속월'에 있어 숨기고, 계약 · 품목 칸은 밀어도 왼쪽에 남김 */
  html #my_sales-content #tp-tbl{ min-width:1080px }
  html #my_sales-content #tp-tbl :is(th,td).tp-mon-col{ display:none }
  html #my_sales-content #tp-tbl tbody tr.tp-main td{ height:44px }
  html #my_sales-content #tp-tbl :is(thead th, tbody tr.tp-main td):nth-child(3){ position:sticky; left:0; z-index:1; background:var(--ui-surface) }
  html #my_sales-content #tp-tbl thead th:nth-child(3){ z-index:3; background:var(--ui-surface-alt) !important }
}

/* ── 자세히 보기 펼친 줄 — 맥 묶음(설정 앱 모양 · 왼쪽 상세 칸과 같은 값). 배치 · 내용 · 단추 동작 그대로 ── */
html #my_sales-content #tp-tbl tr.tp-detail td{ white-space:normal }
html #my_sales-content #tp-tbl tr.tp-detail .tp-detgrid{ gap:14px !important; padding:10px 14px 14px !important; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.8fr) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-dett{ height:24px; margin:0 0 2px !important; padding:0 4px; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-2) !important; gap:6px }
html #my_sales-content #tp-tbl tr.tp-detail .tp-dett .rt{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-dett2{ margin-top:10px !important }
html #my_sales-content #tp-tbl tr.tp-detail :is(.tp-itembox,.tp-infobox){ padding:0 12px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface) !important; box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-infobox{ }
html #my_sales-content #tp-tbl tr.tp-detail .tp-inforow{ height:30px; padding:0 !important; font-size:var(--ui-text-footnote) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-inforow + .tp-inforow{ border-top:var(--ui-hairline) solid var(--ui-line) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-inforow .k{ color:var(--ui-text-2) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-inforow .v{ font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; font-variant-numeric:tabular-nums }
html #my_sales-content #tp-tbl tr.tp-detail .tp-inforow .v.amber{ color:var(--ui-text-1) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-inforow .v.green{ font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-inforow .v.blue{ color:var(--ui-text-1) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-dnote{ margin-top:6px; padding:0 4px; font-size:var(--ui-text-caption); line-height:1.45; color:var(--ui-text-2) }
/* 품목 표 */
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable{ font-size:var(--ui-text-footnote) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable th{ height:28px; padding:0 6px !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable tr, html #my_sales-content #tp-tbl tr.tp-detail .tp-itable td{ background:transparent !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable td{ height:30px; padding:0 6px !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important; color:var(--ui-text-1); font-variant-numeric:tabular-nums }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable tr:last-child td{ border-bottom:0 !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable .tp-i-no{ width:24px; color:var(--ui-text-3) }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable .tp-i-name{ max-width:0; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable .tp-i-tax{ color:var(--ui-text-2) }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable .tp-i-tot{ font-weight:var(--ui-weight-semibold) }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable td.r, html #my_sales-content #tp-tbl tr.tp-detail .tp-itable td.c{ white-space:nowrap }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itable td[colspan]{ height:44px; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; background:transparent !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-itail{ margin:0 -12px !important; padding:8px 12px 10px !important; border-top:var(--ui-hairline) solid var(--ui-line) !important; align-items:flex-start !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-linkinline{ gap:6px !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-linkinline .lbl{ width:100%; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-isum{ gap:0 !important; font-size:var(--ui-text-footnote) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-isum .row{ height:22px; align-items:center; min-width:200px !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-isum .row.tot{ height:28px; margin-top:2px !important; padding-top:0 !important; border-top:var(--ui-hairline) solid var(--ui-line) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-isum .k{ color:var(--ui-text-2) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-isum b{ font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; font-variant-numeric:tabular-nums }
html #my_sales-content #tp-tbl tr.tp-detail .tp-isum .row.tot b{ font-weight:var(--ui-weight-semibold) !important }
/* 연동 문서 단추: 맥 단추(흰 바탕 · 얇은 그림자), 아직 없는 문서는 파란 글자 */
html #my_sales-content #tp-tbl tr.tp-detail .tp-lk{ height:var(--ui-control-sm); padding:0 9px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; transform:none !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-lk i{ font-size:11px !important; color:var(--ui-text-2) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-lk .ext{ display:none }
html #my_sales-content #tp-tbl tr.tp-detail .tp-lk.add{ color:var(--ui-accent-text) !important } html #my_sales-content #tp-tbl tr.tp-detail .tp-lk.add i{ color:var(--ui-accent-text) !important }
@media (hover:hover){ html #my_sales-content #tp-tbl tr.tp-detail .tp-lk:hover{ background:var(--ui-fill-subtle) !important } }
/* 진행 상태: 상세 칸과 같은 초록 체크 / 회색 점 */
html #my_sales-content #tp-tbl tr.tp-detail .tp-stbox{ padding:0 12px !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-statline{ height:30px; padding:0 !important; gap:8px !important; font-size:var(--ui-text-footnote) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-statline + .tp-statline{ border-top:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content #tp-tbl tr.tp-detail .tp-statline .ic{ width:16px !important; height:16px !important; font-size:0 !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-statline .ic i{ font-size:11px; transform:scale(.7) }
html #my_sales-content #tp-tbl tr.tp-detail .tp-statline .ic.ok{ background:var(--ui-success) !important; color:var(--ui-on-accent) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-statline .ic.no{ background:transparent !important; box-shadow:inset 0 0 0 1px var(--ui-line-dashed); color:transparent !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-statline .ic.na{ background:var(--ui-fill) !important; color:var(--ui-text-3) !important; font-size:11px !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-statline .t{ font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #my_sales-content #tp-tbl tr.tp-detail .tp-statline .d{ color:var(--ui-text-2) !important; font-variant-numeric:tabular-nums }
/* 취소한 계약 안내(펼친 줄 맨 위) */
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-box{ margin:10px 14px 0 !important; border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface) !important; box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) !important }
/* 취소 후속 할 일(펼친 줄 안) — 상세 칸과 같은 값: 노란 상자 → 흰 묶음 안 회색 칸, '할 일' 꼬리표는 회색, 채운 파랑은 칸마다 첫 단추 하나 */
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-hd > div{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-hd > div i{ color:var(--ui-text-2) !important }
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-hd > button{ height:var(--ui-control-sm); padding:0 9px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-box > div:not(.sales-cancel-hd){ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-fu{ padding:8px 10px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface-alt) !important; box-shadow:inset 0 0 0 var(--ui-hairline) var(--ui-line) }
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-fu > div > div:first-child{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-fu > div > div:first-child span{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important; border:0 !important }
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-fu > div > div + div{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-fu button{ height:var(--ui-control-sm); padding:0 9px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap }
html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-fu > span > button:first-child:not(:only-child), html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-fu > span > button:only-child{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; font-weight:var(--ui-weight-semibold) !important }
@container tpw (max-width:1100px){ html #my_sales-content #tp-tbl tr.tp-detail .tp-detgrid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important } html #my_sales-content #tp-tbl tr.tp-detail .tp-detgrid > div:first-child{ grid-column:1 / -1 } }
@media (max-width:767px){
  html #my_sales-content #tp-tbl tr.tp-detail td{ position:sticky; left:0 }
  html #my_sales-content #tp-tbl tr.tp-detail .tp-detgrid{ grid-template-columns:minmax(0,1fr) !important; width:calc(100vw - 36px); padding:10px 0 14px !important }
  html #my_sales-content #tp-tbl tr.tp-detail .tp-itembox{ overflow-x:auto }
  html #my_sales-content #tp-tbl tr.tp-detail .tp-itable{ min-width:420px }
  html #my_sales-content #tp-tbl tr.tp-detail .tp-inforow, html #my_sales-content #tp-tbl tr.tp-detail .tp-statline{ height:40px }
  html #my_sales-content #tp-tbl tr.tp-detail .tp-lk{ height:var(--ui-control-mobile) }
  html #my_sales-content #tp-tbl tr.tp-detail .tp-itail{ flex-direction:column !important; align-items:stretch !important; gap:10px !important }
  html #my_sales-content #tp-tbl tr.tp-detail .tp-linkinline{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); }
  html #my_sales-content #tp-tbl tr.tp-detail .tp-linkinline .lbl{ grid-column:1 / -1 }
  html #my_sales-content #tp-tbl tr.tp-detail .tp-linkinline .tp-lk{ justify-content:center; min-width:0; padding:0 4px !important; white-space:nowrap; overflow:hidden }
  html #my_sales-content #tp-tbl tr.tp-detail .tp-isum{ align-items:stretch !important }
  html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-box{ margin:10px 0 0 !important; width:calc(100vw - 36px); }
  html #my_sales-content #tp-tbl tr.tp-detail .sales-cancel-fu{ flex-direction:column !important; align-items:stretch !important }
}

/* 아래 묶음(서비스별 매출 · 실적지급 현황) — 맥 접기 화살표 */
html #my_sales-content .ts-fold{ margin:12px 16px 0; background:transparent; border-radius:0; overflow:visible; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .ts-fold > summary{ list-style:none; height:32px; display:flex; align-items:center; gap:6px; padding:0; font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold); cursor:pointer }
html #my_sales-content .ts-fold > summary::-webkit-details-marker{ display:none }
html #my_sales-content .ts-fold > summary::before{ content:"▶"; font-size:var(--ui-text-caption); transform-origin:50% 50%; scale:.8; color:var(--ui-text-2); transition:transform var(--ui-dur-fast) var(--ui-ease) }
html #my_sales-content .ts-fold[open] > summary::before{ transform:rotate(90deg) }
html #my_sales-content .ts-sheet-bar, html #my_sales-content .ts-sheet-scrim{display:none}
html #my_sales-content #sales-subtab-table > #extra-pay-section{ margin:12px 16px 0 !important }


/* 실적지급 현황(extra-pay.js 가 그림) — 노랑 상자 → 머리카락 선 묶음, 머리 13px, 단추는 맥 단추. 숫자 · 잠금 동작은 그대로 */
html #my_sales-content #extra-pay-section > div{ max-width:none !important; margin-top:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important }
html #my_sales-content #extra-pay-section > div > div:first-child{ height:32px; padding:0 !important; background:transparent !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #my_sales-content #extra-pay-section > div > div:first-child .fa-coins{ display:none }
html #my_sales-content #extra-pay-section > div > div:first-child .text-amber-800{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #my_sales-content #extra-pay-section > div > div:first-child .text-amber-600{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #my_sales-content #extra-pay-section > div > div:first-child button{ height:var(--ui-control-sm) !important; padding:0 10px !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #my_sales-content #extra-pay-section > div > div:first-child button i{ color:var(--ui-text-2) !important }
html #my_sales-content #extra-pay-section > div > div:not(:first-child):not(#ep-locked-screen){ background:transparent !important; padding-left:0 !important; padding-right:0 !important; border-color:var(--ui-line) !important }
html #my_sales-content #extra-pay-section > div > div:not(:first-child) [class*="bg-"]:not(button):not(.rounded-full){ background:transparent !important }
html #my_sales-content #extra-pay-section > div > div:not(:first-child) :is(.px-3,.px-4){ padding-left:0 !important; padding-right:0 !important }

/* 노트북: 목록 폭이 모자라면 상세에 같은 값이 있는 칸부터 숨김 — 외주(4번째) → VAT 포함(6번째) */
@media (min-width:768px){
  @container tslist (max-width:760px){
    html #my_sales-content #ts-tbl col:nth-child(4), html #my_sales-content #ts-tbl th:nth-child(4), html #my_sales-content #ts-tbl tr.ts-row > td:nth-child(4){ display:none }
  }
  @container tslist (max-width:660px){
    html #my_sales-content #ts-tbl col:nth-child(6), html #my_sales-content #ts-tbl th:nth-child(6), html #my_sales-content #ts-tbl tr.ts-row > td:nth-child(6){ display:none }
  }
}

/* ━━ 휴대폰 ━━ */
@media (max-width:767px){
  html #my_sales-content{ padding-bottom:80px }
  html #my_sales-content > .bg-white{ border-radius:0 !important; box-shadow:none !important; padding-bottom:8px !important }
  html #my_sales-content .ct-head{ padding:10px 12px 0 }
  html #my_sales-content .ct-title{ font-size:var(--ui-text-title2) !important }
  html #my_sales-content .ct-acts > button, html #my_sales-content .ct-btn{ height:var(--ui-control-mobile) !important; padding:0 12px !important; font-size:var(--ui-text-callout) !important }
  html #my_sales-content .ct-more-lb, html #my_sales-content .ct-car{ display:none }
  html #my_sales-content .ct-more-ic{ display:inline-block }
  html #my_sales-content #sales-more-btn{ width:var(--ui-control-mobile); padding:0 !important; justify-content:center }
  html #my_sales-content .ct-pop-views{ display:block }
  html #my_sales-content .ct-pop button{ height:var(--ui-row-mobile) !important; font-size:var(--ui-text-callout) !important }
  /* 확인·관리: 왼쪽 아래 떠 있는 흰 단추(오른쪽 아래 도움말 단추와 같은 줄) */
  html #my_sales-content #sales-rail-reopen{ position:fixed !important; left:14px; bottom:18px; z-index:30; height:40px !important; border-radius:var(--ui-radius-pill) !important; padding:0 14px !important; box-shadow:var(--ui-elev-popover) !important }
  html #my_sales-content .ct-row2{ flex-wrap:wrap; gap:6px; padding:8px 0 8px }
  html #my_sales-content #month-step, html #my_sales-content .month-step-btn, html #my_sales-content #month-step #month-filter,
  html #my_sales-content #admin-staff-filter-wrap #staff-filter, html #my_sales-content #sales-status-filters .sf-btn{ height:var(--ui-control-mobile) !important }
  html #my_sales-content .month-step-btn{ width:28px }
  html #my_sales-content #sales-status-filters .sf-car{ display:none }
  html #my_sales-content #sales-status-filters .sf-btn{ padding:0 10px !important }
  html #my_sales-content .ct-add-w{ display:none }
  html #my_sales-content #admin-staff-filter-wrap{ flex:1 1 0; min-width:0 }
  html #my_sales-content #admin-staff-filter-wrap #staff-filter{ width:100%; min-width:0 }
  html #my_sales-content .ct-sep{ display:none }
  html #my_sales-content .ct-slot{ flex:1 0 100% }
  html #my_sales-content .ct-search{ max-width:none; height:var(--ui-control-mobile) }
  html #my_sales-content .ct-search input{ font-size:16px !important }
  html #my_sales-content .ct-seg{ display:none }
  html #my_sales-content #sales-status-filters.open .sf-scrim{ display:block; position:fixed; inset:0; z-index:9994; background:var(--ui-scrim) }
  html #my_sales-content #sales-status-filters.open .sf-pop{ position:fixed; top:auto; left:0; right:0; bottom:0; width:auto; z-index:9995; padding:12px 10px calc(16px + env(safe-area-inset-bottom)); border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0; box-shadow:var(--ui-elev-sheet) }
  html #my_sales-content #sales-status-filters label.sf-row{ height:var(--ui-row-mobile) !important; font-size:var(--ui-text-callout) !important }
  html #my_sales-content #sales-status-filters .sf-cb{ width:20px; height:20px }
  html #my_sales-content .ts-strip{ margin:0 0 8px; border-radius:0; padding:0 4px }
  html #my_sales-content .ts-it{ padding:7px 10px }
  html #my_sales-content .ts-sum{ margin:-2px 12px 8px }
  html #my_sales-content .ts-split{ grid-template-columns:1fr; border-bottom:0 }
  /* 표: 옆으로 밀기, 광고주 칸 고정, 한 줄 44px */
  html #my_sales-content .ts-scroll{ -webkit-overflow-scrolling:touch }
  html #my_sales-content #ts-tbl{ width:auto; min-width:100% }
  /* 계약 목록 줄: 사용자 요청 "행높이 더 줄여서 밀도 높혀"(2026-10-30) — 44px → 32px. 이 표에만(다른 휴대폰 입력 · 단추 크기는 그대로). 누르는 높이가 작아짐 */
  html #my_sales-content #ts-tbl td{ height:32px; font-size:var(--ui-text-callout) }
  html #my_sales-content #ts-tbl th{ height:26px }
  html #my_sales-content #ts-tbl th.ts-main, html #my_sales-content #ts-tbl td.ts-main{ position:sticky; left:0; z-index:2; box-shadow:inset calc(-1 * var(--ui-hairline)) 0 0 var(--ui-line) }
  html #my_sales-content #ts-tbl th.ts-main{ z-index:3 }
  html #my_sales-content #ts-tbl tbody tr.ts-row.sel td.ts-main{ background:linear-gradient(var(--ui-accent-tint),var(--ui-accent-tint)), var(--ui-surface) !important }
  html #my_sales-content #ts-tbl .ts-tag{ font-size:var(--ui-text-footnote) }
  html #my_sales-content .ts-foot{ flex-direction:column; gap:2px; padding:8px 64px 8px 12px }
  html #my_sales-content .ts-fold{ margin:12px 12px 0 }
  html #my_sales-content #sales-subtab-table > #extra-pay-section{ margin:12px 12px 0 !important }
  /* 상세: 줄을 누르면 아래에서 올라오는 창(닫으면 보던 자리 그대로). 도움말 ? 단추(9990)보다 위, 알림 토스트(9999)보다 아래 */
  html #my_sales-content .ts-insp{display:none}
  html #my_sales-content .ts-insp.open{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:86vh;overflow-y:auto;overscroll-behavior:contain;z-index:9995;padding-top:0;border-left:0;border-right:0;border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0;box-shadow:var(--ui-elev-sheet);padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  html #my_sales-content .ts-insp.open .ts-sheet-bar{display:flex;justify-content:center;position:sticky;top:0;z-index:1;background:var(--ui-surface);padding:6px 10px 0}
  html #my_sales-content .ts-insp.open .ts-sheet-bar::before{content:"";width:36px;height:5px;border-radius:var(--ui-radius-pill);background:var(--ui-fill);position:absolute;top:6px;left:50%;transform:translateX(-50%)}
  html #my_sales-content .ts-sheet-x{margin-left:auto;margin-top:8px;min-height:var(--ui-control-mobile);padding:0 12px;border:0;background:transparent;color:var(--ui-accent-text);font:inherit;font-size:var(--ui-text-body);font-weight:var(--ui-weight-semibold)}
  html #my_sales-content .ts-sheet-scrim.open{display:block;position:fixed;inset:0;z-index:9994;background:var(--ui-scrim)}
  html #my_sales-content .ts-kv{ min-height:32px; font-size:var(--ui-text-body) }
  html #my_sales-content .ts-btn, html #my_sales-content .ts-links .tp-lk{ height:var(--ui-control-mobile) }
  html #my_sales-content .tsd-doc{ height:var(--ui-control-mobile); font-size:var(--ui-text-body) }
  html #my_sales-content .tsd-labs .t, html #my_sales-content .tsd-labs .s{ height:18px; line-height:18px }
  html #my_sales-content .tsd-labs .t{ font-size:var(--ui-text-body) }
  html #my_sales-content .tsd-labs .s{ font-size:var(--ui-text-footnote) }
  html #my_sales-content .tsd-next{ height:36px; font-size:var(--ui-text-body) }
  html #my_sales-content .tsd-go{ height:var(--ui-control-mobile); min-width:96px; font-size:var(--ui-text-body) }
  html #my_sales-content .tsd-r{ height:40px; font-size:var(--ui-text-callout) }
  /* 펼친 확인·관리 칸은 표 위에 화면 폭 전체로 */
  html #my_sales-content .flex.gap-4.items-start:has(> #sales-cards-rail){ flex-direction:column !important; align-items:stretch !important }
  html #my_sales-content #sales-cards-rail{ width:auto !important; max-height:70vh !important; margin:0 12px 10px !important }
  html #my_sales-content #my_sales-list .ml-auto{max-width:100%;overflow-x:auto;flex-wrap:nowrap !important;justify-content:flex-start !important;margin-left:0 !important}
}

/* ── 칸반 보기 — 맥: 단계 칸 = 회색 묶음, 카드 = 흰 2줄(49px · 휴대폰 53px). 휴대폰은 단계 칸을 옆으로 밀기 ── */
html #my_sales-content .kb-board{ display:grid; grid-template-columns:repeat(3,minmax(260px,1fr)); gap:10px; margin:0 16px; align-items:start }
html #my_sales-content .kb-col{ display:flex; flex-direction:column; min-width:0; border-radius:var(--ui-radius-group); background:var(--ui-bg) }
html #my_sales-content .kb-hd{ display:flex; align-items:center; gap:6px; height:32px; padding:0 10px; font-size:var(--ui-text-footnote) }
html #my_sales-content .kb-t{ font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #my_sales-content .kb-n{ min-width:18px; height:18px; padding:0 5px; border-radius:var(--ui-radius-pill); background:var(--ui-fill); color:var(--ui-text-2); font-size:var(--ui-text-caption); line-height:18px; text-align:center }
html #my_sales-content .kb-sum{ margin-left:auto; color:var(--ui-text-2); font-size:var(--ui-text-caption) }
html #my_sales-content .kb-list{ display:flex; flex-direction:column; gap:4px; padding:0 6px 6px; max-height:calc(100vh - 290px); overflow-y:auto; scrollbar-gutter:stable }
html #my_sales-content .kb-empty{ height:44px; display:flex; align-items:center; justify-content:center; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #my_sales-content .kb-none{ margin:0 16px; padding:40px 0; text-align:center; color:var(--ui-text-2) }
html #my_sales-content .kb-foot{ margin:8px 16px 0 }
html #my_sales-content .kb-card{ display:block; width:100%; padding:7px 10px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); text-align:left; font:inherit; color:var(--ui-text-1); cursor:pointer }
@media (hover:hover){ html #my_sales-content .kb-card:hover{ box-shadow:0 0 0 1px var(--ui-accent) } }
html #my_sales-content .kb-card:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:1px }
html #my_sales-content .kb-card > div{ display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap }
html #my_sales-content .kb-l1{ height:18px; font-size:var(--ui-text-body) }
html #my_sales-content .kb-l2{ height:16px; margin-top:2px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #my_sales-content .kb-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:var(--ui-weight-semibold) }
html #my_sales-content .kb-amt{ flex:none; font-variant-numeric:tabular-nums; color:var(--ui-text-1) }
html #my_sales-content .kb-prod{ min-width:0; overflow:hidden; text-overflow:ellipsis }
html #my_sales-content .kb-own{ flex:none }
html #my_sales-content .kb-sep{ flex:none; color:var(--ui-text-3) }
html #my_sales-content .kb-st{ flex:none; display:inline-flex; align-items:center; gap:4px }
html #my_sales-content .kb-st::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
html #my_sales-content .kb-st.warn{ color:var(--ui-warning) } html #my_sales-content .kb-st.ok{ color:var(--ui-success) }
@media (max-width:767px){
  html #my_sales-content .kb-board{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0; padding:0 12px; gap:8px; scrollbar-width:none }
  html #my_sales-content .kb-col{ flex:0 0 calc(100vw - 48px); scroll-snap-align:start }
  html #my_sales-content .kb-list{ max-height:calc(100vh - 330px) }
  html #my_sales-content .kb-card{ padding:9px 12px }
  html #my_sales-content .kb-foot{ margin:8px 12px 0 }
}

/* ── 마스터-디테일 보기 — 맥: 왼쪽 2줄 목록(고른 줄 옅은 파랑) + 오른쪽 문서형 상세(계약 상세 창과 같은 값). 휴대폰은 목록만 ── */
html #my_sales-content .md-split{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:0; margin:0 16px; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden; align-items:start }
html #my_sales-content .md-list{ display:flex; flex-direction:column; max-height:calc(100vh - 290px); overflow-y:auto; scrollbar-gutter:stable; border-right:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .md-row{ display:block; width:100%; padding:7px 12px; border:0; border-bottom:var(--ui-hairline) solid var(--ui-line); background:transparent; text-align:left; font:inherit; color:var(--ui-text-1); cursor:pointer }
@media (hover:hover){ html #my_sales-content .md-row:hover{ background:var(--ui-fill-subtle) } }
html #my_sales-content .md-row.sel{ background:var(--ui-accent-tint) }
html #my_sales-content .md-row > div{ display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap }
html #my_sales-content .kb-st.x{ color:var(--ui-text-2) }
html #my_sales-content .kb-st.wait{ color:var(--ui-text-2) } html #my_sales-content .kb-st.wait::before{ background:transparent; box-shadow:inset 0 0 0 1px var(--ui-line-dashed) }
html #my_sales-content .md-detail{ min-width:0; max-height:calc(100vh - 290px); overflow-y:auto; scrollbar-gutter:stable }
html #my_sales-content .md-doc{ padding:14px 20px 18px }
html #my_sales-content .md-empty{ padding:60px 0; text-align:center; color:var(--ui-text-2) }
html #my_sales-content .md-doc .flex-col.items-end > div{ width:240px !important }
html #my_sales-content .md-doc .text-\[20px\]{ font-size:var(--ui-text-title2, 17px) !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:0 !important; color:var(--ui-text-1) !important }
html #my_sales-content .md-doc .text-\[13px\]{ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }
html #my_sales-content .md-doc .pb-4.border-b{ padding-bottom:10px !important; border-color:var(--ui-line) !important }
html #my_sales-content .md-doc .font-mono{ border:0 !important; background:transparent !important; padding:0 !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important; font-family:var(--ui-font-mono) !important }
html #my_sales-content .md-doc .grid.grid-cols-2{ gap:0 18px !important; padding:6px 0 !important; margin:0 0 10px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #my_sales-content .md-doc .grid.grid-cols-2 > div{ height:28px; align-items:center; font-size:var(--ui-text-footnote) !important }
html #my_sales-content .md-doc .grid.grid-cols-2 .text-gray-400{ color:var(--ui-text-2) !important }
html #my_sales-content .md-doc .grid.grid-cols-2 .font-semibold{ font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #my_sales-content .md-doc .bg-gray-50.rounded-lg{ background:var(--ui-bg) !important; border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-1) !important; margin-bottom:10px !important }
html #my_sales-content .md-doc .bg-gray-50.rounded-lg b{ font-weight:var(--ui-weight-semibold) !important; font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #my_sales-content .md-doc .text-\[12px\].font-bold.mb-2{ margin-bottom:4px !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-2) !important }
html #my_sales-content .md-doc .text-\[12px\].font-bold.mb-2 i{ display:none }
html #my_sales-content .md-doc table{ margin-bottom:8px !important }
html #my_sales-content .md-doc thead tr{ border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #my_sales-content .md-doc th{ height:26px; padding:0 6px !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #my_sales-content .md-doc td{ height:30px; padding:0 6px !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; font-variant-numeric:tabular-nums }
html #my_sales-content .md-doc td:first-child{ color:var(--ui-text-3) !important }
html #my_sales-content .md-doc tbody tr{ border-color:var(--ui-line) !important }
html #my_sales-content .md-doc td .text-\[10\.5px\]{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #my_sales-content .md-doc .flex-col.items-end{ gap:0 !important; padding-top:6px !important; border-color:var(--ui-line) !important; font-size:var(--ui-text-footnote) !important }
html #my_sales-content .md-doc .flex-col.items-end > div{ height:24px; align-items:center; width:220px !important }
html #my_sales-content .md-doc .flex-col.items-end .text-gray-400{ color:var(--ui-text-2) !important }
html #my_sales-content .md-doc .flex-col.items-end .font-semibold{ font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #my_sales-content .md-doc .flex-col.items-end > div:last-child{ height:30px; margin-top:2px !important; padding-top:0 !important; border-color:var(--ui-line) !important }
html #my_sales-content .md-doc .flex-col.items-end > div:last-child span{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #my_sales-content .md-doc .mt-4.pt-3.border-t{ margin-top:10px !important; padding-top:10px !important; border-color:var(--ui-line) !important; gap:14px !important }
html #my_sales-content .md-doc .mt-4.pt-3.border-t > span{ padding:0 !important; background:transparent !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #my_sales-content .md-doc .mt-4.pt-3.border-t > span i{ font-size:11px; color:var(--ui-text-3) } html #my_sales-content .md-doc .mt-4.pt-3.border-t > span i.fa-circle-check{ color:var(--ui-success) }
html #my_sales-content .md-doc .mt-4.pt-3.border-t > span i.fa-circle{ display:inline-block; width:11px; height:11px; border-radius:50%; color:transparent !important; box-shadow:inset 0 0 0 1px var(--ui-line-dashed) }
html #my_sales-content .md-doc .mt-4.pt-3.border-t > span i.fa-circle::before{ content:none }
@media (max-width:767px){
  html #my_sales-content .md-split{ grid-template-columns:minmax(0,1fr); margin:0 12px }
  html #my_sales-content .md-list{ max-height:none; border-right:0 }
  html #my_sales-content .md-row{ padding:9px 12px } html #my_sales-content .md-row.sel{ background:transparent }
  html #my_sales-content .md-detail{ display:none }
}

/* ── 카드 보기 — 맥: 3줄 카드(칸반 · 마스터-디테일과 같은 줄 부품), 휴대폰은 한 줄에 하나 ── */
html #my_sales-content .cg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px; margin:0 16px }
html #my_sales-content .cg-card{ display:block; width:100%; min-width:0; padding:8px 12px; border:0; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); text-align:left; font:inherit; color:var(--ui-text-1); cursor:pointer }
@media (hover:hover){ html #my_sales-content .cg-card:hover{ box-shadow:0 0 0 1px var(--ui-accent) } }
html #my_sales-content .cg-card:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:1px }
html #my_sales-content .cg-card > div{ display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap }
html #my_sales-content .cg-card .kb-st{ flex:none }
@media (max-width:767px){
  html #my_sales-content .cg-grid{ grid-template-columns:minmax(0,1fr); margin:0 12px; gap:6px }
  html #my_sales-content .cg-card{ padding:10px 12px }
}